1 of 10

Internet of Things

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 2:30 pm and Thursday at 2:30 pm. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

All posted times are Eastern Daylight Time (EDT)

Workshop Resources

Slack Channel: #programming-iot in the CxD 2022 Slack Workspace
Programming Platforms
- Particle Build is the recommended programming platform for the IoT Board.
- Replit.com is the recommended platform for web app programming.
Zoom Video Conferences: A link will be provided on Slack

Here is the link to the original Code Reference that uses the no longer available Sparkfun Inventor's Kit. You may find this useful as the documentation is being updated for the new IoT kit. https://docs.idew.org/code-internet-of-things/

Workshop Prep

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Each project has three phases, where programming is a very important component of all three. Our Innovation Workshop covers the breadth of the Computing by Design framework. We have found that the programming in any project presents a fine line between a wonderfully empowering experience (when students struggle and get things working) and a sometimes frustrating experience that becomes a missed opportunity. Therefore we are offering these programming workshops to provide a solid foundation on building the applications.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Identify an online tutorial site that you can use in your classroom to supplement any project work. Over the course of the workshop try out a few basic online programming tutorials from popular sites to facilitate this "concept first" approach, and consider how you might manage a self-paced assignment based on milestones. How might you use these self-guided tutorials as "filler time" or dedicate scheduled time to their completion?

Getting Started with Slack

Slack will be our primary communication platform for the workshop. The video above provides a brief introduction on the features of Slack, but more help and tutorials can be found at https://slack.com/help.

Getting Started with Replit

Replit is the recommended programming environment for many of our projects. The video above provides a brief introduction on the features of Replit, but more help and tutorials can be found at https://docs.replit.com/.

Getting Started with Particle Build Editor

Particle offers a web-based editor (https://build.particle.io/build/) that makes programming a device pretty easy. To prepare for the workshop you will want to create a Particle account and know how to access the programming environment. We will get to actually programming a little bit later.

Live Zoom: Mon 2:30 pm ⏰

Agenda (1 hour)

Welcome and Introductions
Quick Survey
Review of Workshop Format and Sequence
Key Pointers
- Sharing Code via Slack
- Searching the Internet for Code Help
- Online Tutorials and Other Resources
- Look for Patterns and Analogies You Can Identify With
Information on School of Informatics and Computing Degrees
Open Discussion and Wrap Up

The Zoom link will be posted in Slack workshop channel.

Programming Warm-Up ⏱

All programming workshops will use the same warm up, linked below.

Teacher Insights

Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

Program for IoT Part 1 ⏱

Getting Started with Programming the IoT Device

Introduction

Claiming Your IoT Device

IoT Tutorial - Programming the Device

We will use the Particle tutorial for the IoT kit linked below to guide us, but the videos will deviate a bit to demonstrate things using the web programming environment. Ultimately we want to get familiar with the hardware, inputs, sensors, and programming. ★ Post questions and successes in our Slack channel as you move along.

Understanding LED Status Signals

Reading Temperature and Humidity

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, and have your Argon device connected.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Controlling an LED

Instructions coming soon...

1. Create a new program in Particle build.

2. Connect the Grove Chainable LED to A4, and have your Argon device connected.

3. Include the "Grove_ChainableLED" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Call the toggleLed function to pulse the LED one time.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Reference Material for the IoT Kit Hardware

Program for IoT Part 2 ⏱

Getting Started with a Web Interface to the IoT Device

Programming a Web-enabled IoT Device

Program the Particle IoT Device

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, connect the LED to A4, and connect your Argon device to your computer.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" and "Grove_ChainableLED" libraries in your program as we have done before.

4. Copy and paste the code below (except of the #include parts) into your program.

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working. Call the "toggleLed" function to ensure the light toggles.

Program the Web Interface

1. Create a new replit program for HTML/CSS/JavaScript.

2. Copy and paste the following for your `index.html` file.

3. Copy and paste the following for your `script.js` file.

4. Run your replit.com program.

6. Confirm that the temperature is displayed on your page.

7. Click the `Toggle Light` button and confirm that the light on your device changes and the text on your web app is consistent with the change.

That's it for our first web-enabled IoT experiment 🎉.

For Reference

Program for IoT Part 3 ⏱

Experimenting with a Custom Project

Complete a Custom IoT Project

After completing the particle tutorials, develop a custom application with a subset of the provided hardware that solves a problem with web-enabled features. Simple examples (Thermostat and Door Bell) will be posted as we progress. Again, let's share successes and roadblocks liberally in Slack to help each other and inspire ideas.

Thermostat Project Example

Example code coming soon...

Door Bell Project Example

Example code coming soon...

Planning for Student Success

Now that you have experience with programming for this project...

Consider how you will approach classroom management when students are completing a tutorial like this one.
- What will be your expectations?
- How much will be individual work versus team work?
- Will you assign any code champions to help you support students with questions?
How will you supplement it with other programming content or experiences?
- Will you use any online tutorials?
- Will you supplement with any CS unplugged activities?
- Will you create any custom programming exercises yourself?

Live Zoom: Thur 2:30 pm ⏰

Agenda (1 hour)

Welcome
Quick Survey
Review Instructions for Final Deliverables
Discuss Progress and Concerns Identified During the Week
- TBD
- TBD
Open Discussion and Wrap Up

Workshop Deliverables

For the IoT programming workshop we simply request that you submit the following three items in a document.

A link to your working web app code (e.g. replit.com) that connects to your IoT board.
A copy of your Particle Build code.
A summary of your classroom plan
- Consider how you will approach classroom management when students are completing a tutorial like this one.
  - What will be your expectations?
  - How much will be individual work versus team work?
  - Will you assign any code champions to help you support students with questions?
- How will you supplement it with other programming content or experiences?
  - Will you use any online tutorials?
  - Will you supplement with any CS unplugged activities?
  - Will you create any custom programming exercises yourself?

Workshop Prep

Background and Recommended Classroom Approach

Background on Computing by Design Framework

Learning to Program: A Two-Pronged Approach

Getting Started with Slack

Getting Started with Replit

Getting Started with Particle Build Editor

Program for IoT Part 1 ⏱

Getting Started with Programming the IoT Device

Introduction

Claiming Your IoT Device

This video steps you through claiming a particle device and setting up WIFI. You will want your mobile phone to complete this with the Particle App installed. Apple: Android:

IoT Tutorial - Programming the Device

IoT Starter Kit | Quickstart

Understanding LED Status Signals

This link comes in very handy for interpreting the different status LED signals you may get from time to time.

Reading Temperature and Humidity

We are covering concepts from the Particle Variables: measure temperature & humidity section of the tutorial.

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, and have your Argon device connected.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_Temperature_And_Humidity_Sensor.h>

DHT dht(D2);

double temp_dbl, humidity_dbl;

void setup() {
    Serial.begin(9600);

    dht.begin();
    
    Particle.variable("temp", temp_dbl);
    Particle.variable("humidity", humidity_dbl);
}

void loop() {
    float temp, humidity;

    temp = dht.getTempFarenheit();
    humidity = dht.getHumidity();

    temp_dbl = temp;
    humidity_dbl = humidity;

    delay(10000);
}

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Controlling an LED

We are covering concepts from the Particle Functions: controlling a Chainable LED section of the tutorial.

Instructions coming soon...

1. Create a new program in Particle build.

2. Connect the Grove Chainable LED to A4, and have your Argon device connected.

3. Include the "Grove_ChainableLED" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_ChainableLED.h>
ChainableLED leds(A4, A5, 1);

void setup() {
    leds.init();
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    Particle.function("toggleLed", toggleLed);
}

void loop() {
    // toggleLed("");
}

int toggleLed(String args) {
    leds.setColorHSB(0, 0.0, 1.0, 0.5);
    delay(500);
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    delay(500);
    return 1;
}

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Call the toggleLed function to pulse the LED one time.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Reference Material for the IoT Kit Hardware

IoT Starter Kit | Quickstart

Program for IoT Part 2 ⏱

Getting Started with a Web Interface to the IoT Device

Programming a Web-enabled IoT Device

Program the Particle IoT Device

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, connect the LED to A4, and connect your Argon device to your computer.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" and "Grove_ChainableLED" libraries in your program as we have done before.

4. Copy and paste the code below (except of the #include parts) into your program.

// This #include statement was automatically added by the Particle IDE.
#include <Grove_ChainableLED.h>

// This #include statement was automatically added by the Particle IDE.
#include <Grove_Temperature_And_Humidity_Sensor.h>

ChainableLED leds(A4, A5, 1);
DHT dht(D2);
double temp_dbl, humidity_dbl;
bool ledOn = false;

void setup() {
    //for the LED
    leds.init();
    leds.setColorHSB(0, 0.0, 0.0, 0.0);
    Particle.function("toggleLed", toggleLed);
    //for the temp and humidity
    dht.begin();
    Particle.variable("temp", temp_dbl);
    Particle.variable("humidity", humidity_dbl);
}

void loop() {
    float temp, humidity;
    temp = dht.getTempFarenheit();
    humidity = dht.getHumidity();
    temp_dbl = temp;
    humidity_dbl = humidity;
    delay(10000);
}

bool toggleLed(String args) {
    ledOn = !ledOn;
    if (ledOn) {
        leds.setColorHSB(0, 0.0, 1.0, 0.5);
    }
    else {
        leds.setColorHSB(0, 0.0, 0.0, 0.0);
    }
    return ledOn;
}

5. Save, Verify, and Flash the code to the Argon board.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Get the temp and humidity variables to check if all is working. Call the "toggleLed" function to ensure the light toggles.

Program the Web Interface

1. Create a new replit program for HTML/CSS/JavaScript.

2. Copy and paste the following for your `index.html` file.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>IoT Test</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="login">
		<h3>Sign In to Access the IoT Device</h3>
		<input id="username">
		<input type="password" id="password">
		<button onclick="login()">Login</button>
	</div>
	<div id="iot-control" style="display: none;">
		<div id="temp">Loading...</div>
		<div id="light"></div>
		<button onclick="toggleLight()">Toggle Light</button>
	</div>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js">
	</script>
	<script src="script.js"></script>
</body>

</html>

3. Copy and paste the following for your `script.js` file.

var particle = new Particle();
var token;

function login() {
	particle.login({
		username: document.querySelector("#username").value,
		password: document.querySelector("#password").value
	}).then(
		function(data) {
			console.log('API call completed on promise resolve: ', data.body.access_token);
			token = data.body.access_token;
			document.querySelector("#login").style.display = "none";
			document.querySelector("#iot-control").style.display = "block";
			displayTemp();
		},
		function(err) {
			console.log('API call completed on promise fail: ', err);
		}
	);
};

function displayTemp() {
	particle.getVariable({ deviceId: 'e00fce6872f90e7cbce1b406', name: 'temp', auth: token })
		.then(function(data) {
			document.querySelector("#temp").innerHTML = `The temperature is ${data.body.result} ℉`
		}, function(err) {
			console.log('An error occurred while getting attrs:', err.body);
		});
}

function toggleLight() {
	particle.callFunction({ deviceId: 'e00fce6872f90e7cbce1b406', name: 'toggleLed', argument: null, auth: token })
		.then(
		  function(data) {
				document.querySelector("#light").innerHTML = `The light is ${data.body.return_value ? 'on.' : 'off.'}`
		  }, function(err) {
		    console.log('An error occurred:', err);
		  });
}

4. Run your replit.com program.

6. Confirm that the temperature is displayed on your page.

7. Click the `Toggle Light` button and confirm that the light on your device changes and the text on your web app is consistent with the change.

That's it for our first web-enabled IoT experiment 🎉.

For Reference

Particle API JS (Javascript SDK) | Reference

Internet of Things

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

All posted times are Eastern Daylight Time (EDT)

Workshop Resources

Workshop Prep

Background and Recommended Classroom Approach

Background on Computing by Design Framework

Learning to Program: A Two-Pronged Approach

Getting Started with Slack

Getting Started with Replit

Getting Started with Particle Build Editor

Live Zoom: Mon 2:30 pm ⏰

Agenda (1 hour)

Programming Warm-Up ⏱

Teacher Insights

Angela Jones

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas

On Practical Approaches to Programming for Beginners

Program for IoT Part 1 ⏱

Introduction

Claiming Your IoT Device

IoT Tutorial - Programming the Device

Understanding LED Status Signals

Reading Temperature and Humidity

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, and have your Argon device connected.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Controlling an LED

1. Create a new program in Particle build.

2. Connect the Grove Chainable LED to A4, and have your Argon device connected.

3. Include the "Grove_ChainableLED" library in your program.

4. Copy and paste the code below (except of the #include part) into your program.

6. Open the Console from particle build, select "my devices", and select your Argon.

7. Call the toggleLed function to pulse the LED one time.

That's it for this step 🎉. If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

Reference Material for the IoT Kit Hardware

Program for IoT Part 2 ⏱

Programming a Web-enabled IoT Device

Program the Particle IoT Device

1. Create a new program in Particle build.

2. Connect the temperature and humidity sensor to D2, connect the LED to A4, and connect your Argon device to your computer.

3. Include the "GROVE_TEMPERATURE_AND_HUMIDITY_SENSOR" and "Grove_ChainableLED" libraries in your program as we have done before.

4. Copy and paste the code below (except of the #include parts) into your program.

Program the Web Interface

1. Create a new replit program for HTML/CSS/JavaScript.

2. Copy and paste the following for your `index.html` file.

3. Copy and paste the following for your `script.js` file.

4. Run your replit.com program.

5. Login to your web app with your Particle account.

6. Confirm that the temperature is displayed on your page.

7. Click the `Toggle Light` button and confirm that the light on your device changes and the text on your web app is consistent with the change.

That's it for our first web-enabled IoT experiment 🎉.

★ If you are having any problems, no worry, post in our slack channel. Please share your code when it makes sense or create videos.

For Reference

Program for IoT Part 3 ⏱

Complete a Custom IoT Project

Thermostat Project Example

Door Bell Project Example

Planning for Student Success

Live Zoom: Thur 2:30 pm ⏰

Agenda (1 hour)

Workshop Deliverables

Teacher Insights

Angela Jones

On Enjoying the Journey

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Matthew Baron

On Scaffolding and Scrum

Travis Faas