> For the complete documentation index, see [llms.txt](https://docs.idew.org/project-internet-of-things/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/project-internet-of-things/project-instructions/2-design-and-build-solution/2.5-smart-device-and-apps.md).

# 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](/project-internet-of-things/project-instructions/2-design-and-build-solution/2.7-product-video.md).

### **❏ 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 %}         |                      |                         |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.idew.org/project-internet-of-things/project-instructions/2-design-and-build-solution/2.5-smart-device-and-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.