Performing the Net… of Things
Perform the Net is a classic Mozilla learning activity used to introduce the mechanics of the Internet. The kinesthetic activity challenges learners, young and old, to use physical objects, including their bodies, to model how information and content is passed to an internet user.
The video below, A Packet’s Tale kicks off the lesson to offer learners a quick tour of the hardware, information pathways and vocabulary of the internet. From there, performers might assume the role of servers and cables, toss balled up sheets of paper to represent data packets, and assemble received post it’s to form colorful mosaic representations of a web page.
In my experience, Perform the Net has been a no-fi hit with folks who have found creative but accurate ways to demonstrate their understanding. So I wondered, how might we use Perform the Net to assess learners’ understanding of the Internet of Things (IoT)?
At the 2017 SPARK Hackathon in Charlottesville – an IoT themed event for local high school students – I delivered a workshop that introduced teen hackers to a popular IoT prototyping circuit board, the Particle.io Photon.
The main outcome of the workshop was to create a web page that could be used to remotely turn an internet-connected LED on and off. However, the purpose behind that outcome was to introduce the mechanics, affordances, and potential of the Internet of Things.
Our workshop toolbox consisted of: a Photon Kit with resistor and LED; the Particle.io Integrated Development Environment (IDE), Docs and API; Mozilla’s Thimble browser-based code editor; an open WiFi or smartphone hosted network; this demo LED button/switch Thimble make; and last but not least, this handy-dandy slide deck.
We opened the workshop with Perform the Net as an icebreaker to assess the learners’ existing understanding of the Internet, then we separated learners by experience level using a spectrogram activity, paired experienced learners with those who were just getting started with programming, and worked through a series of steps and tutorials together. After about an hour, all 6 pairs had an operational web page to turn their LEDs on and off.
But did they understand what was happening? I prompted Perform the Net teams to regroup, but this time, to Perform the Net… of Things! The results were eye opening.
These performers had demonstrated a very clear understanding of the end-points, nodes, steps and order of operations that exist between typing a URL into a browser and loading a web page nanoseconds later. However, the similar steps for operating their Photons were confused. The Particle.io IDE, Thimble, USB cables, and other scaffolding only used to set things up had somehow found their way into the final performance, whereas host servers, APIs, and WiFi routers were conspicuously missing!
To successfully Perform the Net of Things, learners would need some more reflection during future workshops. Here’s what I learned…
5 Things I Learned About Teaching and Learning with Particle.io Photons
1 — Wireless All the Way
Photons use USB cables for power and we had those plugged into the laptops the students were using to program them using the Particle.io IDE. This caused confusion about how information was being transmitted between the code-editor and the Photon. Use a battery pack to power your Photons independently and make sure students know they are connected to WiFi. Have students place their Photon elsewhere in the room during testing.
2 — Where Does the Code Live?
Browser-based code editors like the Particle.io IDE and Thimble make it a bit confusing to know where the code actually lives. Students seemed unclear on whether they were programming directly onto the Photon board, programming their computers, or hosting code on a remote server. Take a moment to ask students where they think the “code” is stored or lives. Using a battery pack to disconnect the USB may help resolve some of this confusion.
3 — A Flash in the Pan
Students didn’t necessarily grasp the process of sending a copy of the complied code from the Particle.io IDE onto the Photon, called “flashing”. Take the time to pause and ask students, “what happens when you flash the Photon?” and make sure they understand how the code in the editor is distinct from the code compiled and executed on the CPU. Have students close the IDE and see that the code still runs on the Photon.
4 — Push Past Preview to Publish
Thimble makes it incredibly easy for learners to produce web content and see the results real-time. However, participants in the Photon workshop confused the Thimble code-editor and the web page they were building to operate the Photon. It was basically the same problem with the Particle.io IDE and Flashing described above. Let students Publish their web pages and visit them outside of Thimble, then share that link with a friend on another computer.
5 — App Programming In Your Face
The Application Programming Interface (API) is an essential component of the IoT information pipeline. An API is like the ATM (automated teller machine) of the app world: you give an ATM the right account and personal identification numbers (debit card and pin) and the machine allows you to perform financial transactions. In the workshop, Access Tokens and Device IDs are collected from the Particle.io board and used in the web page to communicate with the API in order to execute commands between the web page and the Photon. Passing and validating this information through the Particle.io API is an essential step that is not obvious to learners. Take a moment to linger on those items in the HTML and Photon code.
Our Next Performance
Where can you find our next performance? Deep in the heart of Texas! Mozilla is bringing web literacy, digital inclusion and open innovation to central Texas with Hive Austin. We’re supporting local organizations through the Gigabit Community Fund and elevating local innovations to global scale through the Mozilla Leadership Network. Look out for upcoming events to teach and learn about topics in Internet Health with Mozilla Hive ATX partners, including a potential hackathon opportunity with our friends Code/Interactive and Coding4TX. Sign up for our newsletter or our mailing list to stay connected.
