CxD Archive
Project: Internet of Things
Project: Internet of Things
  • Project Introduction
  • Project Challenge
  • Project Instructions
    • 1 DEFINE PROBLEM & VALUE PROPOSITION
      • 1.1 IoT Product Research
      • 1.2 IoT Code Tutorials
      • 1.3 Project Ideas
      • 1.4 Competitive Analysis
      • 1.5 User Research
      • 1.6 Value Proposition
      • 1.7 Design Requirements
      • 1.8 Interaction Storyboard
      • 1.9 Proposal Presentation
    • 2 DESIGN & BUILD SOLUTION
      • 2.1 Project Schedule
      • 2.2 System Model
      • 2.3 Interactive Prototype
      • 2.4 Prototype Evaluation
      • 2.5 Smart Device and Apps
      • 2.6 Product Website
      • 2.7 Product Video
      • 2.8 Solution Presentation
    • 3 EVALUATE & REFINE SOLUTION
      • 3.1 Solution Evaluation
      • 3.2 Solution Refinements
      • 3.3 Project Poster
      • 3.4 Evaluation Presentation
      • 3.5 Public Presentation
      • 3.6 Project Reflection
      • 3.7 Class Celebration
  • References
    • IoT Code Guidebook
    • CxD Principles & Practices
    • Research Topics in Computing
Powered by GitBook
On this page
Export as PDF
  1. Project Instructions
  2. 2 DESIGN & BUILD SOLUTION

2.5 Smart Device and Apps

Previous2.4 Prototype EvaluationNext2.6 Product Website

Last updated 6 years ago

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

RESOURCE: The contains references and links to help you with all the tasks to build and program your smart device and its apps.

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 and to your Photon circuit board.

  • If necessary, refer back to the 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 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 .

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

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:

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.

❏ 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

✓- Below Standard

✓ Meets Standard

✓+ Exceeds Standard

Description

Description

Description

Control your device's and

Interact with your device's web app through

(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 .

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

IoT Code Guidebook
physical inputs
physical outputs
first tutorial
Particle Build
Photon device app
physical inputs
physical outputs
Particle Cloud
Web App - Single Screen
Web App - Multiple Screens
Particle Cloud
product demo video