CxD Archive
Internet of Things Project
Internet of Things Project
  • IoT Project Background
  • IoT Project Challenge
  • IoT Project Outline
    • 1-1 Smartphone Research
    • 1-2 Smart Thermostat Research
    • 1-3 Smart Device Research
    • 1-4 Introduction to Photon Kit
    • 1-5 Build Smart Lightbulb
    • 1-6 Generate Project Ideas
    • 1-7 Build Smart Thermostat
    • 2-1 Evaluate Project Ideas
    • 2-2 Plan User Research
    • 2-3 Compile Research Data
    • 2-4 Construct Personas
    • 2-5 Construct Journey Map
    • 2-6 Define Value Proposition
    • 2-7 Define Design Requirements
    • 3-1 Generate Solution Ideas
    • 3-2 Evaluate and Refine Solution Ideas
    • 3-3 Create System Model of Solution
    • 3-4 Create Wireflow for Web App
    • 3-5 Create Storyboard for Solution
    • 3-6 Evaluate Solution Design
    • 3-7 Present Project Proposal
    • 4-1 Track Progress and Issues
    • 4-2 Build Smart Device
    • 4-3 Create Photon App
    • 4-4 Create Web App
    • 4-5 Conduct Integration Testing
    • 4-6 Create Product Demo Video
    • 4-7 Create Product Marketing Website
    • 5-1 Evaluate Smart Device and Web App
    • 5-2 Evaluate Product Marketing Website
    • 5-3 Improve Solution Based on Evaluations
    • 6-1 Create Project Poster
    • 6-2 Present Project to Public
    • 6-3 Write Personal Reflection
  • References for Wiring & Coding
    • Creating Circuits
    • Wiring Programming Language
    • Particle Cloud
    • Hello World App for Photon
    • LED Light
    • Push Button
    • Micro OLED Display
    • Humidity and Temp Sensor
    • Speaker
    • Servo Motor
    • Motion Sensor
    • Magnetic Switch
    • Potentiometer
    • Photocell
    • Moisture Sensor
    • Accelerometer
    • RFID Reader
    • Fingerprint Scanner
    • GPS Receiver
    • Camera
    • Microphone
    • Force Sensitive Resistor
    • Keypad
    • Continuous Rotation Servo Motor
  • Glossary
  • Updated Project Guidebook
  • Updated Code Guidebok
Powered by GitBook
On this page
Export as PDF
  1. IoT Project Outline

4-4 Create Web App

Previous4-3 Create Photon AppNext4-5 Conduct Integration Testing

Last updated 7 years ago

Your team needs to create a web app (for a phone, tablet, or desktop) that will interact with your smart device to perform the functions envisioned in your team’s solution design.

You will need to use online references (such as: , , etc.) to figure out how to code a web app that will get data from your smart device through the Internet (via ), use the data to dynamically update the web app, and send data and commands to your smart device through the Internet.

The web app will be created in a code editor using HTML, CSS, and JavaScript. You will need to plan out your web app, and then program it in stages, testing and revising the code as you go.

YOUR TASK

  1. Plan out web app

      • If your team's system model and wireflow do NOT clearly and correctly describe and show the web app, then revise them to be accurate.

      • If necessary, create additional screen mockups in order to have a wireflow for the entire web app. (You can do this either before or after completing the plan for your web app.)

  2. Code web app - Part 1 (HTML, CSS) - More details coming soon...

  3. Code web app - Part 2 (JavaScript: variables, functions, Particle Cloud) - More details coming soon...

Use your team’s and to identify the tasks, content, screen layouts, and interactions for your web app.

Answer these . Don't worry about creating "code" for the answers – answer in plain English.

Once the smart device, Photon app, and web app have all been completed, to verify they work together properly.

system model
wireflow
questions to help plan out your web app
conduct integration testing
References for Wiring & Coding
W3Schools
Particle Cloud
Smart Device Web App