Similar to robotic devices, IoT devices follow a "Sense-Think-Act" cycle to interact with the physical world. IoT devices also "communicate" through an internet or network connection.

• SENSE: IoT devices typically have one or more physical inputs (such as sensors, etc.) that gather data from the physical environment.

• THINK: IoT devices are programmed to analyze data from their inputs to make decisions and respond to certain conditions by acting through their outputs.

• ACT: IoT devices typically have one or more physical outputs (such as motors, etc.) that can do something in the physical environment.

• COMMUNICATE: IoT devices send and/or receive data by communicating with other apps, databases, or other devices through an internet or network connection (which is often a wireless signal such as cellular, Wi-Fi, Bluetooth, etc.). This data communication can serve as a digital input ("sense") or as a digital output ("act").

Your team will create a system model of your smart device and web app to show how the different parts of your solution will work together to "Sense-Think-Act-Communicate". This system model will help your team better understand how to build your smart device and program its apps.

Make a copy of this system model template, and then modify it:

1. Identify the name of each physical input (sensor, push button, etc.) that your smart device will use, and describe how each input will be used.

2. Identify the name of each physical output (motor, LED light, etc.) that your smart device will use, and describe how each output will be used.

3. Describe each task or feature of the web app that interacts with your smart device.

NOTE: Although this system model won't directly list the "Think" steps performed by your smart device's apps, these "Think" steps should be clearly implied by your descriptions for the inputs, outputs, and web app.

❏ Deliverable

Submit your team's system model for your smart device solution.

Your team needs to create a project schedule to help ensure that you'll complete all the necessary tasks involved to design and develop your team's smart device solution. This phase of the project will require about 4-6 weeks to complete. Your teacher will identify the specific deadline(s) for this project phase.

This flowchart shows the major tasks that your team must complete during this project phase:

In the first task, your team will work together to create a system model of your smart device and web app. This will give your team a shared vision of what your smart device solution will do.

Then your team members will start to work in parallel on different tasks, depending on their team role. Some of the tasks must be completed in a certain order. When necessary, you might have multiple team members working together on certain tasks.

Your team will finish this project phase by presenting your working smart device solution to the class. (In the next project phase, your team will evaluate your solution with people outside your team, in order to refine the solution before the final public presentation.)

1. Identify the sequence of tasks to be completed (which might require dividing major tasks into subtasks)

2. Assign one or more team members to lead or perform each task

3. Estimate the amount of time to complete each task

4. Develop a draft schedule with specific dates for working on the tasks

5. Finalize the schedule by making any necessary adjustments (task sequence, assigned resources, durations, dates, etc.) to ensure the project deadline(s) will be met

6. Use the schedule to monitor the team's progress on a regular basis, and make any necessary adjustments to keep the project on track

Your teacher might assign a specific format or template for your team's project schedule.

❏ Deliverables

• Submit your team's project schedule

• Provide weekly updates on your team's progress

Here's an example of a project schedule that breaks down the major task into weeks.

NOTE: Your project schedule might use a different format that has more detailed information (such as: subtasks, estimated durations for tasks, start & end dates for tasks, etc.).

Your team needs to build and program a functional prototype of your smart device using the provided IoT electronics kit. You'll need to code the device app that controls the smart device, as well as the web app that interacts with the smart device.

• Build your smart device using the Photon kit

• Code the Photon device app that controls your smart device

• Code the web app that interacts with your smart device

• Verify that your smart device and its apps work together correctly

Build Smart Device

Your team must build a functional prototype of your smart device that can be demonstrated to the public. If necessary, you can simulate certain parts or actions as long as the main task of your smart device can still be demonstrated.

The project challenge requires that you use at least one physical input (sensor, button, etc.) and at least one physical output (motor, LED light, etc.) from the provided IoT electronics kit:

• The IoT Code Guidebook has references showing how to connect the physical inputs and physical outputs to your Photon circuit board.

• If necessary, refer back to the first tutorial in the IoT Code Guidebook to understand how to create electronic circuits by connecting components to the Photon circuit board.

If desired, you can construct certain parts for your smart device using cardboard, 3D-printing, etc. The constructed parts could provide functional value by helping the device perform its task and/or aesthetic value by adding to the device's appearance for demonstration purposes.

• For example, if your smart device uses a magnetic switch to detect when a door is open or closed, you could construct a small-scale door and attach the magnetic switch to it.

Code Device App

Your team will use the Particle Build online code editor to create the Photon device app that controls your smart device. You'll "flash" (download) the app to your smart device over Wi-Fi.

The IoT Code Guidebook has a reference explaining the different parts of a Photon device app.

The IoT Code Guidebook has references explaining how to write code in your device app to:

• Control your device's physical inputs and physical outputs

• Interact with your device's web app through Particle Cloud

Code Web App

Your team will create a web app that interacts with your Photon device over the internet through Particle Cloud. The web app will consist of an HTML file, a CSS file, and a JavaScript file.

The IoT Code Guidebook has templates with starter code for your web app, depending on whether you need just a single screen app or multiple screens:

• Web App - Single Screen

• Web App - Multiple Screens (with navigation menu)

The IoT Code Guidebook also has a reference explaining how to write code in your web app JS file to interact with your smart device through Particle Cloud.

Verify Device and Apps Work Together

Throughout coding, be sure to test each new feature as you add it to your device app or web app. Make sure the new feature works correctly, and be sure all the existing features still work. Troubleshoot and fix any bugs or issues that you discover.

Once you've verified that your smart device and apps work together correctly, your team will create a product demo video.

❏ Deliverables

• Submit a photo of your completed smart device

• Download and submit your Photon device app file (.ino)

• Submit your web app files (.html, .css, .js) – or a link to the web app files

Your team will test the interactive prototype of your web app with people outside your team to evaluate whether the web app's design is easy to understand and use. Receiving constructive feedback will allow you to make improvements in the design before coding the web app.

Follow these instructions to conduct user testing of your team's interactive prototype. User testing consists of four major steps:

1. Create Task Scenarios

2. Recruit Participants

3. Facilitate Testing Sessions

4. Summarize Findings

Use this template to summarize your team's evaluation findings.

Based on the evaluation findings, make any necessary changes in the design of your web app before your team starts coding it. Create new sketches or mockups to show the revised interface design for the web app prototype.

IMPORTANT: Be sure to keep a copy of your original interactive prototype.

❏ Deliverable

Submit your team's evaluation findings & revised web app design

Your team will create an interactive prototype of the web app for your smart device. However, this prototype will not be coded (yet). Instead, you will first take your interaction storyboard sketches and use them to help create an interactive prototype of screen images.

1. Review your interaction storyboard sketches, and determine if there are any changes that should be made to your smart device's web app (screen layout, tasks, etc.). The web app should have at least one primary task that it performs. Determine if any additional tasks or features should be included in the web app that your team will create.

2. Use an online prototyping tool (such as Marvel, InVision, etc.) to create a sequence of screen images for the web app that will demonstrate/simulate how someone would interact with the web app to complete tasks. You can either import images of your sketched screens, or you can create high-fidelity screen layouts directly in the prototyping tool (which will also allow you to easily copy and modify screens).

3. Add one or more clickable "hotspots" to each screen where a user could click a button, link, icon, etc. to perform an action or navigate to another screen. Then link each hotspot to another screen image that shows the result of the interaction.

In the next assignment, you'll test the interactive prototype of your web app with people outside your team to make sure the design of the web app is easy to understand and use. After you've identified possible improvements to web app design, you'll begin to code a functional version of the web app using HTML, CSS, and JS.

❏ Deliverable

Submit a link to the interactive prototype for your team's smart device web app.

Click on the interactive prototype shown below to start interacting with it. Once you "arm" the security system, it will simulate a "motion" event after 5 seconds. A second simulated motion event will occur after several more seconds.

This prototype demonstrates/simulates the following tasks and features:

• Monitor security system's current mode ("armed" or "disarmed")

• Can remotely toggle system between "armed" or "disarmed" mode

• Receive and display event notification if system detects motion when “armed”

• Display date and time of last motion event

This interactive prototype was created using a sequence of 9 screen images. Each new screen was created from a copy of a previous screen. Each copied screen was then modified to show the differences in the new screen image.

Your team will create a one-page product marketing website for your smart device solution, which will include a that your team will create. This website will be made public to allow more people to learn about your smart device project.

1. Gather and/or create the content (text, images, video, etc.) for your team’s product marketing website. As necessary, tailor the content to your target users, as represented by your team's persona. Be sure the content is clear, concise, engaging, and professional. Your website should include the following (but you can add other content if helpful):

   • Product Name

   • Product Description (can use value proposition as starting point)

   • Product Video (demonstrate how smart device solution works)

   • Features (list tasks that smart device solution can perform)

   • Tech Specs (list device's inputs, outputs, connectivity, etc.)

   • Photo(s) of completed smart device (if necessary, add captions to explain)

   • Screenshot(s) of completed web app (if necessary, add captions to explain)

2. Create a visual design for your team's website that will be engaging, professional, and reinforce your product concept. As necessary, tailor the design to your target users.

   • Sketch possible ideas for the overall layout of the content on the webpage.

   • Determine the final layout and its overall style (such as: colors, fonts, etc.)

3. Build the website using a tool such as (available within Google Drive, see guide to ) – or code the website directly using HTML and CSS.

   • Include temporary placeholders for the product demo video and product images (smart device & web app) until they are ready to add to the website.

In the next phase of the project, you'll test the website with people outside your team to determine how effective the website is at explaining and marketing your team's solution.

❏ Deliverable

Submit a link to your team's product marketing website for its smart device solution.

Your team will create a product demo video that will briefly demonstrate and explain your working smart device prototype and its web app. You'll include the video in your team's product marketing website.

1. Create a script and narrative storyboard for your team's product demo video, which should be about 1-2 minutes in length. As necessary, tailor the video content to your target users, as represented by your team's persona. Be sure the video will be clear, concise, engaging, and professional.

   • For the script, be sure you'll show and explain what the smart device and web app do, as well as the value they provide to users.

   • For the storyboard, decide which types of camera shots will be most effective for the different parts or scenes in the video. When necessary, be sure to capture close-up shots of the smart device or web app to show important details.

2. Use your script and storyboard to practice the video.

   • The person(s) that will act and/or narrate should practice what they will do and/or say.

   • The camera person should practice capturing the camera shots using different camera movements (tilting up or down, panning left or right, zooming in or out, etc.).

   • If your team can record the final video (and its audio) in one continuous take, you'll avoid or minimize the need to edit the video.

3. Record and finalize the video.

   • If necessary, record additional takes.

   • If necessary, edit the video to finalize it (cut and splice scenes, add titles or captions, add narration or background music, etc.).

   • Upload the final video to a site (such as: Google Drive, YouTube, etc.) that will allow you to embed (or link to) the video in your team’s product marketing website.

❏ Deliverable

Submit a link to your team's product demo video for its smart device solution.

Here's a real-life example of a product video: Fitbit Charge 3 fitness tracker

Because your team's device is a first version prototype, your video will be more of a demonstration, rather than a polished commercial for a finished product.

Create a slide presentation that explains and demonstrates the smart device and web app that your team designed and developed as your project solution. Practice your presentation before delivering it to your class. This will be an opportunity for other project teams to ask questions and provide constructive feedback to help your team improve its solution.

Your team's presentation should include the following (in this order):

1. Project Team: product name, team name, team members & their roles

2. Value Proposition: If necessary, revise your team's value proposition to better match your solution. Be sure the value proposition is clear and compelling.

3. Persona: If necessary, revise your team's persona to better match the target users for your solution. Be sure the persona is useful for understanding the target users that the solution was designed for.

4. System Model: If necessary, revise your team's system model to better match your solution. Briefly explain the system model for your smart device and web app.

5. Interactive Prototype: Briefly demonstrate at least one task using your team's original interactive prototype of the web app (the version used during user testing).

6. Prototype Evaluation: Briefly describe the participants (number, gender, age, etc.) involved in the user testing of the interactive prototype of the web app, and briefly summarize the evaluation findings.

7. Product Website: Use your team's product marketing website to briefly describe the features and tech specs of your smart device solution. Be sure to show the photo(s) of your completed smart device.

8. Product Demonstration: Either do a live demo of your team's smart device (while projecting the completed web app) – or play your team's product demo video.

The presentation should have 8-10 slides and take 5-10 minutes to deliver.

❏ Deliverable

Submit your team’s slide presentation