# 2.5  Smart Device and Apps

{% tabs %}
{% tab title="✓ TASK" %}
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

{% hint style="success" %}
**RESOURCE:**  The [IoT Code Guidebook](https://docs.idew.org/code-internet-of-things/) contains references and links to help you with all the tasks to build and program your smart device and its apps.
{% endhint %}

### 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](https://docs.idew.org/code-internet-of-things/references/physical-inputs) and [physical outputs](https://docs.idew.org/code-internet-of-things/references/physical-outputs) to your Photon circuit board.
* If necessary, refer back to the [first tutorial](https://docs.idew.org/code-internet-of-things/tutorials/meet-your-iot-kit) 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](https://build.particle.io/) 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](https://docs.idew.org/code-internet-of-things/references/device-app).

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

* Control your device's [physical inputs](https://docs.idew.org/code-internet-of-things/references/physical-inputs) and [physical outputs](https://docs.idew.org/code-internet-of-things/references/physical-outputs)
* Interact with your device's web app through [Particle Cloud](https://docs.idew.org/code-internet-of-things/references/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](https://docs.idew.org/code-internet-of-things/references/web-app)
* [Web App - Multiple Screens](https://docs.idew.org/code-internet-of-things/references/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](https://docs.idew.org/code-internet-of-things/references/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](https://docs.idew.org/project-internet-of-things/project-instructions/2-design-and-build-solution/2.7-product-video).

### **❏ Deliverable**s

* 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
  {% endtab %}

{% tab title="➤ EXAMPLE" %}

{% endtab %}

{% tab title="★ RUBRIC" %}

| **✓- Below Standard** | **✓ Meets Standard** | **✓+ Exceeds Standard** |
| --------------------- | -------------------- | ----------------------- |
| Description           | Description          | Description             |
| {% endtab %}          |                      |                         |
| {% endtabs %}         |                      |                         |