4-4 Create Web App

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: References for Wiring & Coding, W3Schools, etc.) to figure out how to code a web app that will get data from your smart device through the Internet (via Particle Cloud), 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

   1. Use your team’s system model and wireflow to identify the tasks, content, screen layouts, and interactions for your 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. Answer these questions to help plan out your web app. Don't worry about creating "code" for the answers – answer in plain English.

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

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