More and more IoT devices have become available over the past few years. Many of the new products unveiled at the Consumer Electronics Show (CES) are smart devices.

VIDEO: Everything Cool at CES 2017 (focus on smart devices)

Understanding existing products is an important part of the research phase when designing a new product. This is called competitive analysis. This type of research helps you better understand what's possible to create with the technology, what existing products offer to users, and where there may be opportunities for new or better products.

YOUR TASK

Research the design of any existing smart device of your choice (other than a smartphone or smart thermostat - also no computers, tablets, TVs, Blu-Ray/DVD players, game consoles, or headphones).

The smart device could be a consumer product (such as wearable device, smart home device, or smart car technology) or could be a smart device system for use in businesses, industry, cities, transportation systems, infrastructure, or environmental monitoring.

Here are some resources to help find a smart device to research (but you are not limited to these - also you will want to find a product website and articles about the product):

• IOTLIST - browse examples of consumer IoT products

• Internet of Things Examples - for body, home, city, industry, and the environment

• The Best Smart Home Gadgets of CES 2017

Research the smart device in order to create and deliver a presentation to the class that includes the following:

1. Introduce the product (include images), and give your description of the product’s value proposition.

2. Summarize the key functions and features of the product, as well as its benefits for people.

3. Give your description of the target users for the product, and provide a brief scenario (story) of the product being used. The target user description would include: demographics (age, gender, family status, etc.), current frustrations or problems that product helps solve, important needs or values that product helps fulfill, etc.

4. Show your system model for the product, and explain how its parts work together. Your system model should include the product's inputs (sensors, etc.) and outputs, as well as any web services or apps that interact with the product.

5. Provide links to the specific information sources used in your research.

Your presentation to the class should be about 2-4 minutes in length (about 5-10 slides). Make sure both the visual and verbal portions of your presentation are clear and engaging. Be prepared to briefly respond to questions or comments from the audience.

Most people already carry around an IoT device – a smartphone. A smartphone has an impressive set of inputs, outputs, and network connections packed into a small but highly-capable computing device.

YOUR TASK

Research the Apple iPhone, Google Pixel, or Samsung Galaxy S to learn the following:

1. What kinds of inputs (such as sensors, etc.) does a typical smartphone have to gather or receive data from the environment or a user? What are these inputs used for?

2. What kinds of outputs does a typical smartphone have? How are these outputs matched to our human senses (our body's inputs)?

3. What kinds of network connections is a typical smartphone capable of making? When or how are these different connections used?

Use this assignment template to record your research findings. (Hint: Look for the technical specs listed on the smartphone webpages.)

Your project challenge is to design and build an IoT device and web app that could improve or benefit your school community.

Your team will solve the project challenge by applying a user-centered design process that follows an iterative "Learn-Build-Measure" cycle.

1. Research Problem Space - Let's start by exploring existing IoT devices and the technology you'll use to build your own smart devices. You will also begin to frame the goals of your team's project by learning about potential stakeholders and generating initial ideas for what problem to solve.

   • Research inputs, outputs, and network connections of smartphone

   • Research design of smart thermostat

   • Research design of another smart device and present to class

   • Practice: Introduction to IoT electronics kit (create Hello World app)

   • Practice: Build and program smart lightbulb and web app

   • Generate project ideas by making observations and asking questions

   • Practice: Build and program smart thermostat and web app

2. Define Problem to Solve - Your team will evaluate its set of ideas for what problem to solve through deliberation and feedback. After conducting additional user research on your selected problem, you will describe your target stakeholders, the current user experience, the value proposition of your solution, and the design requirements for your solution.

   • Evaluate ideas and get stakeholder feedback on top ideas

   • Plan and conduct user research for selected problem

   • Compile data from observations and interviews of stakeholders

   • Construct personas for target stakeholders

   • Construct journey map of current user experience

   • Define value proposition of solution

   • Define design requirements for solution

3. Design Solution & Deliver Proposal - Generate, evaluate, and refine your ideas for a solution. Create a detailed solution design for evaluation by stakeholders. Present your targeted problem and proposed solution for critique by other design teams.

   • Generate multiple ideas for solution

   • Evaluate and refine ideas for solution

   • Create system model of solution

   • Create wireflow of web app for smart device

   • Create storyboard of future user experience with solution

   • Evaluate solution design with stakeholders

   • Present targeted problem and proposed solution for critique

4. Build & Develop Solution - During development, track your team's progress and any issues that arise.

   Construct your smart device by connecting the necessary parts. Plan out and code your device app and web app. Conduct integration testing to ensure your solution works properly. Create a product demo video and product marketing website.

   • Track development progress and issues

   • Build smart device from parts

   • Create Photon app for smart device

   • Create web app to interact with smart device

   • Conduct integration testing of solution

   • Create video demonstrating use of solution

   • Create product marketing website

5. Evaluate & Improve Solution - After creating your solution, test the solution with target stakeholders to gather feedback on improvements to make or additional features to add.

   • Evaluate smart device and web app with stakeholders

   • Evaluate product marketing website with stakeholders

   • Identify possible improvements to solution, and implement as feasible

6. Reflect & Present Project Results - At a public poster presentation, explain your team's design process and demonstrate your solution. Be prepared to respond to questions. Each team member will reflect on his or her contributions and how this project experience impacted future college and career interests.

   • Create project poster

   • Present project solution to public audience

   • Write personal reflection

The Nest Learning Thermostat is a smart thermostat for homes that was first released in 2011. Nest now offers other smart home devices. In 2014, Google bought Nest for over $3 billion.

VIDEO:

YOUR TASK

2. What types of people do you think are the target users for this product? What characteristics do these target users probably have? Use this information to create a persona summarizing a target user for this product.

The smart lightbulb was introduced in 2012, and now several companies offer smart lightbulbs. Smart lightbulbs can be controlled remotely using a mobile app and offer features like setting automatic on-off schedules, dimming lights, changing the light color, syncing lights to music, etc.

VIDEO:

YOUR TASK

As an introduction to building and programming IoT devices using your Photon kit, your team will create a prototype of a smart lightbulb that can be controlled by a web app.

Your team will build its prototype of a smart lightbulb in four versions (or iterations) that keep getting closer to the end result. Each time you will modify your existing Photon device and your existing Photon code.

1. Prototype Version 1: Connect LED light to Photon device, and have Photon code turn light on and off in repeating cycle.

2. Prototype Version 2: Add push button to Photon device, and have Photon code turn on light when button is pressed.

3. Prototype Version 3: Modify Photon code so button switches light on or off with each push, like a regular light switch.

4. Prototype Version 4: Modify Photon code so it interacts with a web app by sending and receiving data through Internet. Create web app that shows current status of light and allows user to switch light on or off remotely.

Since this is practice, the instructions provided below will tell you which parts are needed, show you how to connect them, and even provide the code needed.

Your focus should be on:

• understanding how to connect the parts to form circuits that power the parts and transfer data

• understanding how the Photon code controls the parts and processes data

• understanding how the Photon code and a web app can interact by sending and receiving data through the Internet

BACKGROUND

Each part (such as LED, etc.) that you connect to your Photon device must have a complete electrical circuit. The jumper wires and breadboard are used to help make a circuit for each part.

PROTOTYPE VERSION 1

GOAL: Connect LED light to Photon device, and have Photon code turn light on and off in repeating cycle.

NOTE: LED lights need to be connected correctly. They are polarized (meaning they have a positive end and a negative end), and they need to be connected through a resistor (to limit the current that flows through the bulb). Pay attention to the diagrams and instructions in the experiment.

PROTOTYPE VERSION 2

GOAL: Add push button to Photon device, and have Photon code turn light on when button is pressed.

For the Photon code, modify your existing code from the previous step. The complete code for Experiment 2 is shown below.

The push buttons included in your kit are classified as momentary switches, meaning they are only active ("on") when they are being pushed. Everyday examples of momentary switches are doorbell switches and the keys on a computer keyboard.

PROTOTYPE VERSION 3

GOAL: Modify Photon code so button switches light on or off with each push.

You will modify your existing Photon code to make the push button act similar to a maintained switch, which maintain their current state (on or off) until pushed again. This is how most light switches operate.

To do this, you need to create a global variable in the Photon code to keep track of the light's current state (on or off), so the light can be switched to the opposite state when the button is pushed again. Let's name this variable as: ledStatus

There are several possible data types that could be used for this variable, but we have to select only one to use:

Although any of those data types above would work, the code might be easier to understand if we use a String variable to track ledStatus as "off" or "on" by changing the variable's value whenever the button is pushed.

Since we still need global variables for the LED pin and the push button pin, our final list of global variables will be:

Let's make sure the light is actually off when the device first starts (so it matches the initial ledStatus assigned in the global variables). To do this, add a statement within the setup() function.

Let's add a custom function at the end of the Photon code that will toggle the light on or off based on the current ledStatus. Let's name this function as: ledToggle()

Now you can "call" (run) this custom function within the loop() whenever the button is pushed:

Notice that a slight delay was included before reading the button again. (The delay command uses milliseconds, so 1000 milliseconds = 1 second.)

Without a delay (or if the delay is too short), the code loops so fast that it toggles the light on and off multiple times with each button press, making the device seem unpredictable. If the delay is too long, the device feels unresponsive because you have to hold down the button longer to have the code detect the press.

Remember to flash the modified app to your Photon device to test it out.

PROTOTYPE VERSION 4

GOAL: Modify Photon code so it interacts with a web app by sending and receiving data through Internet. Create a web app that shows current status of light and allows user to switch light on or off remotely.

You will modify your existing Photon code to send and receive data through the Particle Cloud service. Then you will create a web app that uses the Particle JavaScript library to send and receive data through the Particle Cloud.

Particle has built-in functions to share data through the Particle Cloud service. This is how your Photon device can interact with other apps (or even with other Photon devices).

Modify Photon Code

We want to share the ledStatus variable with our web app, so we can display the current status of the light. We can share the current value of a variable by adding one line of code to the setup() function:

We need to first tell it what name to call the variable in Particle Cloud (name can be up to 12 characters) and then identify the name of the variable in the Photon code. Usually, these two will have the same name (but they don't have to).

Next, we want to be able to receive data from our web app, so we can run the function to toggle the light on or off when the user clicks a button in the web app. Again, we can do this by adding one line of code to the the setup() function:

We need to first tell it what name to call the function in Particle Cloud (name can be up to 12 characters) and then identify the name of the function in the Photon code to run. These can have the same name or be different.

We will also need to modify our ledToggle() function. If we want to use the Particle Cloud to call a function in our Photon code, then the function in the Photon code must return a int value (instead of void or some other data type) – and the function must accept a String value from the Particle Cloud (the string is the data that our web app sends to the Photon device).

However, you do not necessarily have to do any with the function's return value or even with the String value – they just need to be present in the code for it to communicate properly with Particle Cloud.

The modified ledToggle() function is as follows:

Now we have to also modify the line of Photon code in the loop that calls this function when the user pushes the button on the device. We must pass a string value to the function (even though we decided to not actually use this string for anything inside the function).

The modified loop() function is as follows (only change is adding "toggle"):

That takes care of the changes in the Photon code. Remember to flash the modified app to your Photon device.

Create Web App

Create a new HTML file (index.html), CSS file (style.css), and JavaScript file (code.js) using a code editor (such as Editey in Google Drive, etc.). Make sure the files are blank.

Copy and paste the HTML code below into index.html

HTML for index.html

Notice that the HTML <head> section loads 3 JavaScript files:

1. jQuery which is a JavaScript library that makes it easier to do things like change HTML or CSS in your web app

2. Particle API JS which is a JavaScript library that contains functions that allows your web app do things like share data through Particle Cloud

3. code.js which is your own JavaScript file that will get data from your Photon device, send data to your Photon device, and update your web app to show the current status of your Photon device.

Notice that we've assigned unique id names to several elements within the <body> section. This will allow us to use jQuery functions to change these elements.

Finally, notice that we added an onclick event to the <button> that will run a JavaScript function called toggleLight() which will be in your code.js file.

Next, copy and paste the CSS code below into style.css

CSS for style.css

The CSS will make our web app look nicer. The <div> in the HTML is styled to look like a card. The background color will be gray when the light is off but will be changed to yellow when the light is on.

We will change this background color by using jQuery to add the class of .light-on to the <div> if the data from the Particle Cloud tells us the light is on. When the light is turned off, we will use jQuery to remove that class (making the card gray again).

Finally, copy and paste the JavaScript code below into code.js

JavaScript for code.js

Notice that the first two lines of JavaScript are supposed to list your Photon device ID and your Photon access token, which must be copied and pasted from your Particle Build account.

IMPORTANT: If you don't update these first two lines of JS code, your web app will not work properly.

• Your Photon device ID is listed in the "Devices" section of your Particle Build account. Click the arrow to the right of your Photon device name to reveal the device ID. This device ID acts like a username to access your device's data in the Particle Cloud service.

• Your Photon access token is listed in the "Settings" section of your Particle Build account. This access token acts as a password to access your device's data in the Particle Cloud service. (If you reset your access token at some future point, you would have to update your web app to use the new token.)

Next notice that we include a JavaScript statement that tells the webpage (window) to run the checkLight function at an interval of once every 200 milliseconds. This lets the web app stay updated on the current status of the light.

Next, we list our checkLight() function that we already told the web app to run every 200 milliseconds. Inside this function, it checks the current value of the ledStatus variable that is being shared to the Particle Cloud by your Photon device.

Here's how particle.getVariable in the web app matches up with Particle.variable in the Photon code. Notice that what links them is the name "ledStatus" – this is the variable in the Photon code that is being sharing through Particle Cloud.

Once we get the data result for the "ledStatus" variable, we use jQuery statements to add or remove the class light-on to switch the card background to yellow or gray and to update the text in two HTML elements.

Finally, the last thing in our JavaScript is the toggleLight() function that will run whenever the user clicks the on-screen button. Inside this function, it calls the "led" function through Particle Cloud and sends it data (the String argument, which we assigned a value of "toggle").

Here's how particle.callFunction in the web app matches up with Particle.function in the Photon code. Notice that what links them is the name "led" – this is the function that the web app calls through Particle Cloud. When the Photon code receives this call, the Photon code runs the custom function called ledToggle and passes it the String data sent by the the web app.

Be sure to refresh your web app, and it should now be able to interact with your Photon device. You should be able to push the physical button on the Photon device to switch the light on or off – and see that your web app shows the updated light status relatively quickly.

You should also be able to do the reverse: click the on-screen button in your web app to see that it toggles the light on your Photon device and then updates the light status on the web app.

NOTE: There may be a slight delay of about 0.5 second for the device and web app to sync up. Keep in mind that the web app was told to only run checkLight() once every 0.2 seconds. We also told the Photon code to add its own delay of 0.2 seconds because of the push button. Also, the data is traveling from an app on one device through the Internet to Particle Cloud and then back again through the Internet to the other app on a different device. (Remember data is not being transferred through the USB cable – it only provides power.)

You've just created your first IoT device!

GOING FURTHER

If you have time, you could think about ways to modify the smart lightbulb and its apps. Can you further customize the appearance of the web app? Can you add a second LED light and second button to your Photon device – and then modify your Photon app and web app to control each light separately? What are some other features that you could try to add to the smart lightbulb web app (dimming lights, setting on-off schedule, etc.)?

Your team's is to design and build a smart device that could improve or benefit your school. Your goal is to create a useful and innovative solution that solves a problem, fulfills a need, or improves an existing situation in the school community or school environment.

YOUR TASK

Each team member should generate his or her own set of possible ideas for what problem your project might solve. Later on, your team will share and discuss their ideas, in order to evaluate and refine them to select the problem to tackle for your project. (After that, your team will go through another process to generate, evaluate, and refine ideas for the solution to your selected problem.)

Over the next couple of weeks outside of class (while your team is building a smart thermostat during class), you should "look and listen" by observing problems or issues around school and talking with stakeholders affected by these issues.

Stakeholders from the school community might include students, teachers, administrators, staff, parents, etc. Depending on the problem, the stakeholders might belong to specific subgroups such as: student athletes, students involved in extra-curricular activities, maintenance staff, cafeteria staff, etc.

Here are a few tips:

1. Don't worry about knowing all the details yet about the problems. Record enough information to be able to explain the ideas to your team. If needed, your team can gather more information later if an idea seems worth pursuing.

2. Don't worry about how "good" each idea is. Your team will discuss and evaluate the ideas later. Sometimes an idea that doesn't seem promising at first turns out to be a great idea.

3. Don't worry yet about trying to come up with solutions to the problems. Your team will focus on figuring out possible solutions later.

Background

A growing trend in computing is the “Internet of Things” (abbreviated as: IoT) – objects or devices connected to the Internet (and/or to other devices) that can gather, process, and share data. These are also called connected devices or smart devices.

Most people already carry around an IoT device with them – a smartphone. Now many other connected devices are becoming available to consumers, businesses, and cities: wearable devices that track your health and fitness, voice-activated speakers that serve as a virtual assistant, smart thermostats that learn how to keep your home comfortable while also saving energy, smart streetlights that automatically brighten or dim based on how many pedestrians or vehicles are nearby, etc.

Smart devices are programmed to process data and respond automatically to certain conditions. They have inputs, such as sensors, that gather data from the physical environment and/or outputs, such as actuators, that do something in the physical environment. Smart devices also send and/or receive data by communicating with apps, databases, or other devices through a network connection.

The Internet of Things has become possible due to advances in technology and manufacturing. Computing parts (such as chips, sensors, batteries, etc.) have become much smaller, more powerful, more energy-efficient, and less expensive. Wireless networking (such as cellular, Wi-Fi, Bluetooth, etc.) has become much faster, more energy-efficient, and more widespread. These advances have made it feasible to incorporate computing technology into almost any object, device, or environment.

What if we brought the Internet of Things to our school?

Additional Resources for Background:

Copyright and License

Copyright © 2016-2017 Michael Frontz and Jim Lyst, Indiana University School of Informatics and Computing at IUPUI

How could we improve our school by creating smart devices?

Design and build a smart device that could improve or benefit your school. Your goal is to provide a useful and innovative solution to a problem affecting the school community or school environment.

Each team will build and program a smart device using an IoT electronics kit that has a microcontroller with Wi-Fi capability, as well as various inputs and outputs that can be connected. Each team will also design and program a web app (for phone, tablet, or desktop) that interacts with the smart device. In addition, each team will create a product marketing website for their smart device.

At the end of the semester, all teams will demonstrate and explain their smart devices at a public poster presentation.

Design Criteria

• Useful: Smart device and web app should provide value by solving a problem, fulfilling a need, or improving an existing situation in the school.

• Usable: Smart device and web app should be easy to understand and interact with.

• Feasible: Smart device should be possible to prototype and could become a real product.

• Innovative: Smart device should be unique or different from existing products or solutions.

Development Constraints

• Smart device built using Photon electronics kit

• Smart device Photon app coded using Wiring programming language

• Smart device web app coded using HTML, CSS, and JavaScript

• Smart device prototype may have to be smaller-scale model of actual product installation and/or may have to simulate certain parts

Team Member Roles

• Product Design Lead: leads interaction design and evaluation of product

• Product Development Lead: leads building and programming of product

• Product Marketing Lead: leads research and marketing for product

• Product Manager: manages team to ensure work results in quality product

Teams of 2 need to have a Design Lead and a Development Lead. Each person can also assume one of the other two roles.

Teams of 3 need to have a Design Lead, a Development Lead, and a Marketing Lead. One person can also assume the role of Project Manager.

Teams of 4 need all four roles.

Final Team Deliverables

• Smart Device with Photon app that is a functional prototype

• Web App that interacts with smart device by sending and/or receiving data through Internet

• Product Marketing Website for the solution, which includes a product demo video

• Poster Presentation to demonstrate solution and explain how it was designed, built, and tested

Next your team will select its final idea for what problem to solve, and conduct user research to learn more about the problem and the people affected by it.

The user research will consist of a field study to observe people experiencing the problem in a real context and interviews to ask people about their experiences with the problem. Ideally, you will both observe and interview each person.

NOTE: If it is not possible to directly observe people experiencing the problem (due to when and where it occurs), then during the interviews, ask each person to recall in detail the last time they experienced the problem.

Your observations and interviews should gather data to help your team:

1. DEFINE THE PROBLEM: What are the steps involved in the current process? When and where does it occur? Who is involved? What are their goals and needs related to this process? What works well in the current process? What are the problems?

2. MEASURE THE IMPACT: What are the effects of the problem? If possible, try to quantify the effects, such as: extra time spent, effort wasted, extra cost, errors made, level of frustration, etc.

3. ANALYZE THE CAUSE: Why does the problem occur? Keep asking “why” until you discover the root cause(s).

Your team will use the data gathered during your research to help complete the next several project deliverables, which help further define the problem your team is solving:

• Personas for Different Stakeholders

• Journey Map of Current User Experience

• Value Proposition of Solution

• Design Requirements for Solution

In particular, you should preview the examples provided for the persona and journey map.

YOUR TASK

Your team should use this template to create a user research plan to gather data about the problem and the stakeholders (people) affected by the problem.

HINT: Once completed, your team's template could be printed and used to record your research notes. Print one copy for each person that you need to observe and interview.

1. Select the final idea for what problem your team project will solve.

2. Identify 2 different groups of stakeholders affected by the problem (such as: students, teachers, administrators, staff, etc.). Even if the problem only seems to affect one group (such as: students that get food from the cafeteria), try to identify two subgroups (such as: students that only occasionally get food from the cafeteria vs. students that regularly get food from the cafeteria).

3. Identify what background information would be relevant to gather about each stakeholder (such as: gender, age, etc.).

4. Prepare list of 3-5 focus questions that your team will try to answer through the field study observations.

5. Prepare list of 3-5 open-ended questions that your team will ask people during the interviews. If helpful, here is an article on open-ended versus closed-ended questions in user research.

6. Discuss specific plans to make sure your team will observe and interview at least 3 people from each of your 2 stakeholder groups for a total of at least 6 people. Each team member should observe and interview at least 2 people (but may need to complete more).

Conduct the user research over the next couple of days. Each team member should record detailed notes for each observation and interview conducted, so that all the team's data can be compiled together.

During the next class meeting, you will have the opportunity to practice your interviews with students from other teams. This will give your team a chance to revise its questions (if necessary) before you collect data from people outside of class. Data collected in-class can be used by your team, but your team still needs data from people outside of class.

Your team will build and program smart devices using an IoT electronics kit featuring the Photon P1 microcontroller, which is produced by a company called Particle.

A microcontroller is a small computer on a single integrated circuit that contains a processor (CPU), memory (RAM and storage), and programmable inputs and outputs. The Photon microcontroller also has an integrated Wi-Fi chip, which makes it great for IoT products.

The Photon electronics kit that your team will use comes from another company called SparkFun. SparkFun has incorporated the Particle Photon P1 microcontroller into an electronics board (which SparkFun calls a "RedBoard") that makes it easy to build devices using various inputs and outputs, such as the ones included in the kit.

VIDEO: SparkFun Photon Kit

YOUR TASK

1. Briefly look over this overview of the Photon RedBoard to become familiar with its power supply, buttons, and LEDs. How can you power the Photon device? What does the reset button do? What does the RGB LED tell you about the status of your Photon device?

2. Turn on your Photon device by carefully inserting the USB cable into the Micro-USB port on the device (be absolutely sure the correct side of the Micro-USB plug is facing up) and plugging the other end of the cable into a USB port on a computer or charger. Your Photon will try to connect to Wi-Fi (we've already saved a Wi-Fi login on the device). Once you have verified that your Photon device is connected to Wi-Fi and the Particle Cloud, you're ready for the next step.

3. Save and run this Hello World app on your team's Photon device by using your team's Particle Build account.

4. Finish up by identifying the name and function of all the parts included in your team's Photon kit by labeling this set of pictures. (Hint: Check the SparkFun Photon Experiment Guide for a list of the parts and match them to the pictures.)

A persona is a model of a target user for a product or service. A persona summarizes the target user’s background, goals, and needs. The persona helps you design a solution to meet the target user’s expectations.

A persona is based on data collected from multiple users through observations, interviews, surveys, etc. However, the persona is presented as a description of an individual person, even though the persona actually represents a group of users with similar characteristics.

The reason for presenting the user data as an individual person is because it is easier to empathize with a description of a specific person, rather than a set of statistics summarizing an entire group.

Here is an example of a persona created for a travel booking website:

VIDEO: What are personas, and why should I care?

A product or service might have many different types of users with different backgrounds, goals, and needs. Therefore, different personas could be created to model these different types of users.

However, it may not be possible (or desirable) to design an solution that tries to meet the needs of every possible type of user. Often this results in a solution that doesn’t actually satisfy anyone. Instead, it is recommended to identify the primary type (or types) of users that represent your main target for designing your solution.

It is important that a persona is fictional (not an actual individual) yet realistic (based on data from actual users). Since the goal is to develop empathy for the target users, a persona should not be humorous.

There are different formats for personas, but personas are usually condensed to one-page in length and often contain information such as:

• Profile (background information about user):

  • Photo (fictional - use stock photo)

  • Name (fictional - first name is sufficient)

  • Type of User (label or category)

  • Relevant Demographic Information (might include: age, gender, occupation/role, etc.)

  • Other Relevant Information or Context (might include: description of physical, social, and technological environment in which product/service will be used; user’s proficiency with technology; special knowledge or skills; personality traits; quote from user; etc.)

• Goals (what high-level goals does user want to achieve with product/service, and what tasks does user need to complete in order to meet these goals)

• Anxieties and Motivations (what influences user’s behaviors and decisions related to adopting possible new solution to meet goals)

• Frustrations (what pain points does user experience with current situation or current solution)

• Needs and Expectations (what are user’s expectations related to functionality, usability, and user experience of possible new solution)

YOUR TASK

Identify two different types of users (stakeholders) that will be your main targets for designing your solution.

For example, your stakeholders might have different roles (such as: students, teachers, administrators, staff, etc.). Even if there only seems to be one group that you are targeting (such as: students that get food from the cafeteria), try to identify two subgroups that may have different needs (such as: students that only occasionally get food from the cafeteria vs. students that regularly get food from the cafeteria).

Use your team’s research data to construct a separate persona for each of these two types of users using this template.

EXAMPLE: Here is an example of a persona for a smart student attendance system created with this template.

A journey map is a diagram of a user’s experience during different steps before, during, and after using a process, product, or service to accomplish a goal.

A journey map is often used to understand the current user experience. The user’s emotion (ranging from positive to negative) is indicated for each step in the experience. Steps that cause negative emotions identify opportunities to improve the user experience through a new solution.

A journey map shows the experience for a particular type of user (i.e., a particular persona) during a specific scenario.

For example, imagine creating a journey map for visiting a doctor’s office. A brand new patient would probably have a different experience than a regular patient. A patient having a routine check-up would probably have a different experience than a patient receiving test results.

There are different formats for displaying journey maps. Here is an example of a journey map that uses emojis to show the experience of a repeat customer buying a drink from a coffee shop. Multiple customers were observed and interviewed to gather the data used to construct the journey map.

EXAMPLE:

The employees at the coffee shop could then use this journey map to identify the parts of the current user experience that are positive, neutral, or negative.

The positive experiences should be obviously be kept because these are the things your users enjoy about your current product or service. If possible, you should try to enhance, extend, or emphasize these positive experiences.

Even if there are very positive parts in the overall experience, it is critically important to fix or reduce the negative experiences. This is because users tend to remember the bad parts of an experience more than the good parts – this is called negativity bias.

You should also try to make the neutral experiences become more positive. Otherwise, there is a danger of them turning into negative experiences. In the coffee shop example, waiting in line for your drink starts off as a neutral experience. However, if the wait becomes too long, it becomes a negative experience. What if the coffee shop could figure out a way to actually make waiting an enjoyable experience?

The point is that you cannot provide a better user experience until you know what is – and what isn't – working well in the current experience. This is true whether you are trying to improve an existing solution or trying to design a brand new solution.

YOUR TASK

Construct a journey map of the current user experience for one of your target user personas:

1. Use your team’s research data to identify the sequence of steps involved in the current process (i.e., without your smart device) for the persona. For each step, identify the persona’s emotional reaction (from positive to negative). For example, if your team is focusing on improving student lockers, show the current experience of how students use their lockers to show what is good and bad about using the current lockers.

2. Use this drawing template to construct your journey map. Add text boxes to briefly describe each step, and represent the persona’s emotion at each step with a corresponding emoji. A range of emoji has been included in the template for you to use. Just delete any emoji that you don't need for your journey map. (If necessary, you can download other emoji images from EmojiOne.)

3. Connect the emojis with arrows to create a line graph of the user experience over time. Any steps that show a decrease or that have negative emotions represent opportunities for your team to design an improved solution (i.e., your smart device) that will provide a better user experience.

Within your team, you will share and discuss the possible project ideas generated by each team member. Your team will use a graph to help evaluate the ideas to determine its top 3 ideas for what problem to solve. Then your team will gather additional feedback on its top 3 ideas from potential stakeholders.

YOUR TASK

Each team member should briefly explain his or her possible ideas for what problem your team project might solve. As a group, briefly discuss each idea, and then plot each idea on this graph based on:

• how much your team is interested in solving the problem (from LOW to HIGH)

• how much the school community would benefit from solving the problem (from LOW to HIGH)

On the graph, each idea will be represented by a circle with a unique number. Five numbered circles have been provided that you should drag-and-drop into the graph to plot ideas. Copy-and-paste to create more circles, and then change their numbers (to make 6, 7, 8, etc.).

TIP: The graph can be modified by clicking it and selecting the "Edit" link below the graph.

Below the graph, provide a legend that summarizes the idea represented by each number.

EXAMPLE: Here is an example of a completed graph with ten ideas plotted.

Each idea should be plotted relative to the other ideas.

For example, if there is less team interest in the current idea compared to another idea, the current idea should be located further left than the other idea. If the current idea will have a greater community benefit compared to the other idea, the current idea should be located higher than the other idea.

After plotting circles for all the ideas, your team should select its top 3 project ideas, and fill out the table on the second page of the graph.

HINT: You will probably want to select ideas located towards the upper right of your graph.

Share your top 3 project ideas with stakeholders that might be affected by these problems, so you can get their feedback on how much they are interested in having these problems solved.

Now that your team has observed and interviewed stakeholders, you should compile and share all your user research data electronically, so that your team can analyze and use the data.

YOUR TASK

Transfer your handwritten research notes into a digital version using this spreadsheet template. Your team should enter all its data into one shared spreadsheet.

The research notes from each person (user) that was observed and interviewed will be listed in a separate row. Each user will be identified by a code (U1, U2, U3, etc.) instead of their real name (to keep them anonymous).

For each user, list the name of the team member who conducted the interview, and list the type of stakeholder that the user represents.

The spreadsheet has 3 generic columns to record: (1) relevant background info about the user, (2) notes from your observation of the user (either your direct observation or the user's recalled experience), and (3) notes from your interview of the user.

NOTE: It may be better to replace some or all of these 3 generic columns with specific columns for each of the questions listed in your team's user research plan. This will allow you to list specific notes under specific questions, making it much easier to compare and analyze the data from all the users.

The Nest Learning Thermostat was introduced in 2011, and now several companies offer smart thermostats. Smart thermostats can be controlled remotely using a mobile app and offer features like adjusting the temperature, creating temperature schedules, reviewing energy usage, etc.

YOUR TASK

As further practice building and programming IoT devices with your Photon kit, your team will create a prototype of a smart thermostat that can be controlled by a web app.

However for this practice, you will only be given partial instructions. Your team will have to figure out the rest in order to build the device and program its apps.

Your team will need to carefully read through these instructions. Only ask questions if you have first read the instructions.

It might be helpful to have your team members divide up the work:

• one person could build the device by connecting the parts

• another person could program the Photon app

• a third person could program the web app

BUILDING THE DEVICE

System Model

Here is a system model showing how the parts of the smart thermostat prototype are supposed to work together:

System Features

• Device (and web app) display room temperature, temperature setting, and system status (Off, Heating, Cooling).

• Device (and web app) allow user to change desired temperature setting using buttons.

• Device reads current room temperature.

• Device compares room temperature with temperature setting to control system:

  • If room temperature is lower than temperature setting, device turns on heating system (represented by red LED).

  • If room temperature is higher than temperature setting, device turns on cooling system (represented by blue LED).

  • If room temperature is equal to temperature setting, device turns off heating and cooling systems.

NOTE: To make this device simpler to build and program, this thermostat is designed to run in a dual mode where it may turn on heating or cooling during the same day. For example, people that live in desert climates (such as Arizona, etc.) would want a thermostat that runs in dual mode because it can get very hot during the day but very cool at night.

Most thermostats are designed to be in only one mode at a time: Heat Only, Cool Only, or Off. The "Heat" mode is used during the winter to only run the furnace. The "Cool" mode is used during the summer to only run the air conditioning. The "Off" mode is used during parts of the spring and fall when no heating or cooling is needed. Most thermostats have a separate button to change the system mode.

Picture of Prototype

Here's a picture of a smart thermostat prototype to give you a general sense of how it will look when finished. While it might look complex, each individual part is relatively simple to connect. The instructions provide references that show how to connect each part.

Parts Needed

• Red LED (to represent heating system, such as furnace)

• Blue LED (to represent cooling system, such as air conditioner)

• 2 Resistors (one for each LED)

• Red Push Button (used to increase temperature setting)

• Blue Push Button (used to decrease temperature setting)

• RHT03 Humidity and Temperature Sensor

• Micro OLED Display Screen

• 18 Jumper Wires

Arranging Parts

Make sure the parts are arranged in a logical layout that makes it easy for a person to understand and use the device.

Remember that all the parts have to be arranged so their pins are in their own breadboard rows:

• If different parts are on the same side of the breadboard, the pins of different parts should not be in the same row number.

• A resistor is an exception because it is supposed to share a row number with a pin of another part (such as LED, etc.).

• If different parts are on opposite sides of the breadboard (left vs. right), it is perfectly fine if they use the same row numbers because the left-hand rows are not connected to the right-hand rows.

• Different pins from the same part should not be in the same row number. For example, the OLED display has 8 pins, and each of these pins must be in a different row number on the breadboard.

TIP: Try to place the jumper wires on the side closest to the Photon board, so the wires don't block parts that need to be seen or interacted with.

Connecting Power Supply

You can use one power rail on the breadboard to provide power to all the parts (similar to how a power strip works):

1. Connect a jumper wire from the 3.3V (+) pin on the Photon board to a pinhole in the positive (+) column of the power rail closest to the Photon board.

2. Then connect another jumper wire from a pinhole in the negative (-) column of this power rail back to a GND (-) pin on the Photon board.

3. All other parts that you add to the breadboard can connect to this power rail through their own jumper wires. Some parts will only need to connect to the negative (-) rail because their voltage source (+) will come from a digital pin. Other parts will need to connect to both the positive (+) and negative (-) rails.

IMPORTANT: The OLED display screen can only handle 3.3 volts of power, so be sure to use the 3.3V pin as your voltage source. (Caution: The V-USB pin supplies 5V, which could damage the OLED.)

Connecting Micro OLED Display

The Micro OLED display requires using 7 jumper wires to connect the OLED pins to specific pins on the Photon board. Therefore, you should probably connect the OLED first before adding the other parts.

This reference for the Micro OLED display explains how to connect the OLED and provides example code for displaying text on the OLED screen.

Connecting Other Parts

The other parts can be connected to any of the other digital pins (or analog pins such as A0 or A1) that are not being used by the OLED.

This reference for the RHT03 sensor explains how to connect the RHT03 Humidity and Temperature Sensor and provides example code for taking readings with the RHT03 sensor.

If helpful, there are also references for the LED light and push button that show how to connect them and provide example code for using them.

CODING PHOTON APP

Create a new app in Particle Build titled: SMART-THERMOSTAT

Remember that the structure and order of the code for a Photon app is:

1. libraries (if needed for certain inputs or outputs)

2. global variables

3. setup() function (can only have one)

4. loop() function (can only have one)

5. custom functions (as many as needed)

If helpful, here is additional information (and references) for coding Photon apps.

Libraries

Be sure that you include the libraries for the Micro OLED display and the RHT03 sensor. The code examples in the Micro OLED reference and the RHT03 sensor reference explain how to include the library for each part.

Global Variables

Your app should declare global variables for each part's pin numbers (OLED, RHT03, both LEDs, both buttons) and declare objects for the OLED display and RHT03 sensor. The code examples in the references for the parts can help with this.

Be sure the pin numbers (such as: D0, D1, etc.) you list in your code match the actual pin that each part's jumper wire is connected to on the Photon board. If they don't match, it is usually easiest to fix it by changing your code (rather than moving your wire).

In addition, your app should also include these other global variables:

// add global variables for OLED display, RHT03 sensor, LEDs, and buttons

// other global variables
String systemStatus = "Off"; // values = Off, Heating, Cooling
int setTemp = 70; // initial temperature setting (degrees F)
int minTemp = 50; // minimum allowed temperature setting
int maxTemp = 90; // maximum allowed temperature setting
int roomTemp; // reading from temperature sensor

setup( )

In your setup() function, be sure to:

• set the pin modes for your LEDs and buttons

• turn off the LEDs at the start

• start the OLED display and RHT03 sensor

• include Particle.variable statements to share these three variables with your web app: setTemp, roomTemp, systemStatus

• include Particle.function statements to allow your web app to call these two custom functions: tempUp, tempDown

The code examples in the references for the parts can help with figuring out the pin modes, turning off the LEDs, and starting the OLED display and RHT03 sensor.

This Particle Cloud reference can help with the Particle.variable and Particle.function statements.

You can also refer back to the setup() function in the final version of the Photon app for your Smart Lightbulb.

NOTE: If you have added the Particle.function statements but haven't yet added the custom functions for tempUp and tempDown, Particle Build will say your app has errors when you try to verify the code. To avoid this, you can type two forward slashes directly before each Particle.function statement to temporarily make them into comments. Later, you will need to remove these slashes once you've added the custom functions to your Photon app.

loop( )

Good news – here is the entire code for your loop() function:

void loop() {
    checkButtons();
    readTemp();
    compareTemp();
    displayTemp();
    delay(200);
} // end of loop()

However, you will have to create custom functions for: checkButtons(), readTemp(), compareTemp(), displayTemp() (as well as tempUp and tempDown)

NOTE: Until you create these custom functions, Particle Build will say your app has errors when you try to verify the code if you include the names of these functions inside your loop() function. So in the meantime, you can either leave the loop() function empty, or you can type two forward slashes directly before the name of each custom function listed inside the loop() function to temporarily make them into comments. You will need to revise the loop() function to match the code above once you've created the custom functions.

Custom Functions

You will need to create the following custom functions:

• checkButtons() should read each button and call tempUp() function if red button pushed and call tempDown() function if blue button pushed

• readTemp() should update roomTemp with new reading from RHT03 sensor

• compareTemp() should compare roomTemp with setTemp to decide whether system should be heating, cooling, or off (be sure to update systemStatus and turn correct LEDs on or off)

• displayTemp() should use Micro OLED to display roomTemp, setTemp, and systemStatus (add other text and adjust font size if needed to make information clear and easy to read)

• tempUp() should increase setTemp by 1 but not allow it to go higher than maxTemp

• tempDown() should decrease setTemp by 1 but not allow it to go lower than minTemp

Here is part of the code for your checkButtons() function:

void checkButtons() {
    int redButtonStatus = digitalRead(redButton);
    // LOW means button is pushed
    if (redButtonStatus == LOW) {
        tempUp("adjust");
    }

    // add code for checking blue button

} // end of checkButtons()

For help with your readTemp() function, look at the code examples in the RHT03 sensor reference.

void readTemp() {
    // add code to update roomTemp with new reading

} // end of readTemp()

Here is part of the code for your compareTemp() function:

void compareTemp() {
    if (roomTemp < setTemp) {
        // add code to change systemStatus and turn on/off LEDs

    } else if (roomTemp > setTemp) {
        // add code to change systemStatus and turn on/off LEDs

    } else {
        systemStatus = "Off";        
        digitalWrite(redLed, LOW);
        digitalWrite(blueLed, LOW);
    }
} // end of compareTemp()

For help with your displayTemp() function, look at the code examples in the Micro OLED reference.

void displayTemp() {
    // add code to update OLED with thermostat information

} // end of displayTemp()

Remember that tempUp() and tempDown() are functions that your web app can call, so the code for these two functions is slightly different (they must return an integer value and accept a String value).

As an example, here is the complete code for your tempUp() function:

int tempUp(String command) {
    if (command == "adjust") {
        setTemp = setTemp + 1;
        if (setTemp > maxTemp) {
            setTemp = maxTemp;
        }
        return 1;
    } else {
        return 0;
    }
} // end of tempUp()

Then you can copy and modify the code above to create your tempDown() function.

IMPORTANT: If necessary, go back to your setup() function to make sure your Particle.function statements do not have two slashes before them. Also be sure that your loop() function matches the code provided earlier.

CODING WEB APP

Create a new HTML file (index.html), CSS file (style.css), and JavaScript file (code.js) using a code editor (such as Editey in Google Drive, etc.). Make sure the files are blank. Rename the folder containing the files as: Smart Thermostat

The pictures show screenshots for how the web app could possibly look (during four different states: connecting, cooling, off, heating). However, your web app doesn't have to look exactly like this – you can design your own screen layout as long as the necessary information and functions are present.

If necessary, refer to the System Features towards the top of this page to verify what the web app should do.

HTML for index.html

You should copy and modify the HTML used in the Smart Lightbulb web app.

In the <body>, you should have a <div> element to display the current thermostat information. Assign id="thermostat" and class="off" to this <div> element.

This <div> should contain <p> elements to list the room temperature, temperature setting, and system status (Off, Heating, Cooling). Be sure to give each <p> element a unique id name, so you can update their HTML using jQuery statements in your code.js and change their style using CSS declarations in your style.css

Be sure to include two <button> elements to allow the user to increase and decrease the temperature setting: one should have onclick="raiseTemp();" and the other should have onclick="lowerTemp();" (these will run custom functions that you'll create in your code.js)

If necessary, here is a HTML reference for additional help on HTML element tags.

CSS for style.css

If you want, you can borrow and modify some of the CSS used in the Smart Lightbulb web app.

Add CSS declarations to style properties for your #thermostat. For example, the CSS below will make it into a circle (by setting border-radius: 50%).

#thermostat {
    /* you can change these or add other properties */
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border: 1px solid black;
    border-radius: 50%;

}

Create a class for each system status: .off, .heating, .cooling

Each of these classes should set a background-color that represents the system status.

You can add CSS declarations for other elements or id names to customize the layout and appearance of your web app, so it is easier and more enjoyable to use.

If necessary, here is a CSS reference for additional help on CSS syntax to declare style properties.

JavaScript for code.js

You should copy and modify the JavaScript used in the Smart Lightbulb web app.

It may be helpful to use the information and code examples in this Particle Cloud reference.

IMPORTANT: Remember to assign your Photon device id and access token to the JavaScript global variables for myDevice and myToken

Be sure the webpage window is set to run the checkThermostat function at an interval of every 200 milliseconds.

Your JavaScript code should have the following custom functions:

• raiseTemp() function should contain particle.callFunction statement to call "tempUp" function (with argument of "adjust") on your Photon device

• lowerTemp() function should contain particle.callFunction statement to call "tempDown" function (with argument of "adjust") on your Photon device

• checkThermostat() function should contain three separate particle.getVariable statements to get current values for setTemp, roomTemp, and systemStatus and use these to update the content and appearance of your web app

In each particle.getVariable statement, the value of the requested Photon variable gets temporarily stored in a local variable called data.body.result that you can use.

By referring to id names, jQuery statements (which always start with $) can easily change the text inside an HTML element. For example, if the webpage contained <p id="#set-temp"> element, you could update its content with jQuery to display the word "Set " followed by the value stored in data.body.result:

$("#set-temp").html("Set " + data.body.result);

Here's how that jQuery statement would be used inside a particle.getVariable statement:

particle.getVariable({ deviceId: myDevice, name: "setTemp", auth: myToken }).then(function(data) {
    $("#set-temp").html("Set " + data.body.result);
}, function(err) {
    console.log("An error occurred retrieving data:", err);
});

You can also use if and else if statements to check the data.body.result value, and then use jQuery statements to easily add or remove CSS classes:

particle.getVariable({ deviceId: myDevice, name: "systemStatus", auth: myToken }).then(function(data) {
    if (data.body.result == "Heating") {
        $("#system-status").html(data.body.result);
        $("#thermostat").removeClass("off");
        $("#thermostat").removeClass("cooling");
        $("#thermostat").addClass("heating");
    }
    // add code to check if data.body.result is "Cooling"

    // add code to check if data.body.result is "Off"

}, function(err) {
    console.log("An error occurred retrieving data:", err);
});

If necessary, here is a JavaScript reference and a jQuery reference for additional help on their syntax and functions. Because jQuery is a JavaScript library, JavaScript statements can be combined together with jQuery statements.

After creating the code for the other custom functions in your JavaScript, test your web app with your Photon device. If everything is working, then congratulations...

You've just created your second IoT device!

GOING FURTHER

If you have time, add a third button to the device and web app that allows the user to change the system mode (Off, Heat, Cool). For example, in the "Heat" mode, only the heating system (red LED) should be turned on or off by the device. You will have to modify your Photon app to make the device operate properly in each mode. Your device and web app should display both the system mode and system status. For example, the mode might be "Heat" but the status would be "Heat OFF" if the current room temperature is at or above the desired temperature setting.

Your team has researched and defined a specific problem to solve. Now your team needs to design a solution by brainstorming ideas.

Ideation – the process of forming ideas – is a fundamental part of design. Ideation involves both creative thinking and critical thinking.

The mistake that some designers make is to pick the first idea they think of, without really exploring all the possible design ideas.

That's why design ideation should really occur into two phases: 1. Getting the Right Design = producing many ideas to find the most promising design 2. Getting the Design Right = refining the selected design to make it as good as possible

In this assignment, your team will begin to "get the right design" by generating many possible ideas. In the next assignment, your team will evaluate those ideas to select the most promising design idea(s) and then "get the design right" by refining the idea(s).

Keep in mind that your solution must include both a smart device and a web app that interact with each other through the Internet. You will want to generate ideas for each of these parts of the solution.

Here is some advice for brainstorming ideas:

• First brainstorm as individuals, then share and brainstorm as a group

• Be as creative and diverse as possible in your thinking

• Don't criticize or reject any ideas yet

• It's okay to have ideas for only part of the solution

• Record ideas using simple sketches and descriptions

• Capture the essence of the idea, not the details

• Generate as many ideas as possible

Sketching is extremely helpful in ideation. Sketches are a quick way to record your ideas. Sketches also make it easier to explain your ideas to someone else. In fact, just creating a sketch can often lead you to think of even more ideas. Sketches do not need to be complex or realistic: stick figures can represent people, rectangles can represent device screens, arrows can represent movement or actions, etc. Adding a brief written description clarifies what the sketch represents.

EXAMPLE

Here are two different ideas for a solution to take student attendance. Each idea is only a partial solution (first idea is for a smart device, second idea is for a web app - but these two ideas do not necessarily go together). The essence of each idea is captured using a simple sketch and description. Of course, there are many other possible ideas that could be generated to solve this specific problem.

YOUR TASK

1. Be sure each team member understands the specific problem your team is trying to solve. If necessary, review your team's personas, journey map, value proposition, and design requirements. These help define who you are designing for, what problem you are solving, what benefits your solution should provide, and what criteria your solution should meet.

2. Each team member should individually brainstorm and record at least 5 different ideas using simple sketches and descriptions. It's okay if an idea focuses on just part of the solution (just the smart device, just the web app, etc.). Don't worry yet about whether you have the necessary technology or ability to build the idea.

3. Your team should share its ideas with each other, and brainstorm additional ideas as a group. Your team should have a combined total of at least 10 different ideas recorded. Remember that you are not rejecting any ideas yet.

Your team will create a system model of your smart device and web app to show how the different parts of your solution work together. This system model will help your team better understand how to build and program your solution.

Your system model should include the smart device's inputs (such as: sensors, buttons, etc.), outputs (such as: lights, motor, etc.), and its web app.

If your smart device and/or web app interact with a web service (such as: getting data from weather website, posting message to social media, etc.), then also include this in the system model.

EXAMPLE

Here is the system model of the that your team built as practice.

YOUR TASK

3. Add text boxes to the diagram to briefly explain the key functions and interactions of the parts of the system. The goal is that anyone should be able to use the diagram to understand how to build the smart device and how the device will work.

Design requirements list specific criteria that a new solution or system must meet in order to be considered successful.

It is helpful to identify these requirements up-front, so they can be used to help you generate, evaluate, and refine ideas for a solution.

There are different types of design requirements. Three key types of requirements are:

1. Functional Requirements

2. Usability Requirements

3. User Experience (UX) Requirements

Functional requirements specify the functions and features the solution should have to be useful to the target users. Functional requirements generally focus on making sure the system:

• has necessary functions to allow users to complete tasks to achieve their goals

• has innovative features that provide additional value to users

Usability requirements specify criteria to ensure the solution is easy to use. Usability requirements generally focus on making sure the system:

• is easy to learn and remember

• is efficient and effective to use

• helps prevent and fix user errors

User experience (UX) requirements specify criteria to ensure the solution is satisfying to use. UX requirements generally focus on making sure the system:

• produces desirable reactions (such as users feeling confident, engaged, relaxed, happy, etc.)

• avoids undesirable reactions (such as users feeling frustrated, bored, annoyed, angry, etc.)

In addition, other types of design requirements might include:

• environmental requirements (criteria for physical, social, and/or technical conditions that system must operate within)

• data requirements (criteria for data that system must process and store)

• security and privacy requirements

• maintenance and support requirements

• legal and regulatory requirements

• ethical requirements

An important aspect of any design requirement is the ability to objectively determine or measure whether the requirement was met (or to what degree it was met). After a solution has been designed and built, data from evaluations (such as user testing, etc.) can provide evidence of how well the design requirements were met.

YOUR TASK

• List at least 3 Functional Requirements

• List at least 3 Usability Requirements

• List at least 3 User Experience (UX) Requirements

• List at least 1 Other Requirement

It may be helpful to refer back to your personas, journey map, and value proposition to identify key requirements that will be needed in your solution.

Next your team will have stakeholders evaluate your solution design. Receiving constructive feedback early in the design process allows you to improve your solution before actually building it.

For each evaluator, your team will tell him/her the value proposition for your solution, and then show him/her each of these design artifacts:

• Refined Solution Sketches

• System Model for Solution

• Wireflow for Web App

• Storyboard for Solution

Your team should encourage the evaluator to ask questions and to provide specific feedback (positive and negative) by "" as they review the design artifacts.

If necessary, ask the evaluator questions to get him/her to provide more feedback or to clarify their feedback:

• What do they think is unclear or confusing? Why?

• What design features do they think are most useful or valuable? Why?

• What design features do they think should be changed or improved? Why?

It is important for your team to understand the reasons behind the feedback – why does the evaluator think that?

YOUR TASK

1. Your team should recruit 3-5 stakeholders to individually evaluate your team's solution design.

Your team will evaluate its set of solution ideas to select the most promising idea(s). This step is "Getting the Right Design" to solve your targeted problem.

Then your team will refine the selected idea(s) to improve the solution and make it more clear and complete. This step is "Getting the Design Right" by making your solution as good as possible.

Your team should evaluate its solution ideas by using the design criteria listed in the :

• Useful: Would this help solve the problem?

• Usable: Would this solution be easy for people to understand and use?

• Feasible: Would it be possible for your team to make a prototype of this solution?

• Innovative: Is this different from existing solutions?

If your solution idea for the smart device would require a special part that is not in your Photon kit, then determine whether it is possible to order the part – or to simulate the part. (For example, your smart thermostat prototype used a red LED and blue LED to simulate a heating and cooling system.)

If necessary, your team can browse or search the to see if the part is available to order and reasonable in cost. If browsing by category, check under Components or Sensors. Your team will be responsible for finding out how to connect and program the part.

Your team should use these criteria (as well as your team's design requirements) in order to select the most promising idea(s) for a smart device and web app that could work together to solve your problem.

It might be the case that your team doesn't have a complete solution yet. For example, your team might have a great idea for the smart device, but your current ideas for the web app don't match this device. If that's the case, it's okay – your team will think of new ideas for the web app when refining your solution.

Your team will refine your selected solution by generating additional ideas to show details of the smart device and web app. You could also show alternate versions or variations of the smart device and web app – such as different ways to build the device or different ways that the app could look or work. You will record these ideas using simple sketches and descriptions.

EXAMPLE

Here are several refined sketches for a smart lock solution. Each sketch shows a detail of the smart device or the web app.

In the next set of assignments that will follow, your team will create several project deliverables to provide even more details of your solution design:

• System Model showing how the parts of your smart device system work together

• Wireflow showing a sequence of screens for interacting with your web app

• Storyboard showing a person's experience using your solution in a real context

YOUR TASK

1. Your team should review its set of solution ideas to identify the most promising idea(s) for a smart device and web app that could work together to solve your problem. Your team should select its best idea (even if it is only a partial solution). You can select multiple ideas if you can combine them into one solution.

2. Your team should refine its selected solution by creating 8-10 sketches to show details (and/or variations) of the solution. Be sure to include sketches for both the smart device and the web app.

3. Your team should show and explain your refined solution sketches to another design team to gather feedback. Use the feedback to clarify and improve your team's solution.

A storyboard is a series of pictures – similar to a comic strip – that illustrate a brief story of a person using a product or solution to complete a task in a real context. A storyboard is helpful for showing the future user experience of a solution that you've designed.

EXAMPLE

Here is a storyboard of a person walking by a bulletin board in a hallway, who pauses to use his phone's camera to scan a code on an announcement, in order to download the information to the phone.

As you can see, a storyboard can use simple drawings and still be very effective at showing what happens. Each panel also includes a brief description to help clarify what is being shown.

Your team will create a 6-panel storyboard to tell a brief story of what happens before, during, and after a person uses your solution (the smart device, the web app, or both) to complete a specific task:

• BEFORE = 2 panels for problem (show setting of story and what task the person needs to complete)

• DURING = 3 panels for solution (show the person using your solution to complete the task)

• AFTER = 1 for panel for benefit (show how the person feels after using solution)

The task that you select for this storyboard should be core to the purpose and experience of using your smart device system. Therefore, do NOT select a mundane task such as: creating an account, logging into the app, etc.

TYPES OF CAMERA SHOTS

A storyboard can be more effective if the panels use different camera shots depending on what each panel is trying to communicate, similar to how movies use different camera shots to help tell a story. Some common types of camera shots that are useful in product storyboards are shown below.

NOTE: Your storyboard won’t necessarily use all these camera shots, and your storyboard won’t necessarily use them in this exact order. Select and order your camera shots to tell your story in the most effective way possible.

• Wide shots and long shots are useful for showing when and where the story takes place and who is involved. They are often used for the first panel of a storyboard.

• Medium shots are useful for showing the person’s emotion. They are often used to show a person’s reaction to a problem and/or their reaction to using the product.

• Over shoulder shots, point of view shots, and close-up shots are useful for showing what the person is doing and seeing as they use the product to complete the task.

YOUR TASK

Before building your solution, your team will give a formal presentation explaining your targeted problem and your proposed solution. This will be an opportunity for other project teams to provide constructive feedback through a design critique.

Your team's presentation should briefly explain and show:

1. Problem Being Solved: describe the problem, its impact, and its cause

2. Personas for Stakeholders: mention how many people were interviewed, and highlight some of the key characteristics of both personas (if necessary, clarify key differences between the two personas)

3. Journey Map of Current User Experience: introduce the persona and scenario, and briefly explain the current user experience (by highlighting problems in the current experience)

4. Value Proposition of Solution: be sure it is clear what value your solution will provide to people

5. Design Requirements for Solution: highlight some of the key requirements, and briefly explain how these are related to your user research findings

6. Refined Sketches of Solution: highlight some of the ideas shown in the sketches

7. System Model of Solution: briefly explain how the parts of the system work together

8. Wireflow for Web App: introduce the task, and briefly explain how the user interacts with the app

9. Storyboard of Future User Experience with Solution: briefly explain the story shown

10. Evaluation of Solution Design: mention how many evaluators were involved, and briefly summarize the evaluation findings (positive and negative)

YOUR TASK

• Prepare and practice your team's presentation. The presentation should have 10-15 slides and take about 8-10 minutes to deliver. Each team member should participate equally in the verbal presentation. Be sure to include a title slide identifying each of the team members. Be sure your presentation is clear and engaging.

• After your team's presentation, the other project teams will ask questions and provide constructive feedback through a design critique (about 2-4 minutes). Be prepared to respond to questions and to record notes on the audience feedback.

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

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

A value proposition is an “elevator pitch” for a product or service – a clear and concise sales pitch that summarizes the product or service.

There are different formats or templates for creating a value proposition statement. The most popular template for a value proposition provides the following answers:

• Who are the target users for the product/service?

• What problem or need does the product/service solve?

• What is the product/service?

• What benefit or value does the product/service provide?

VALUE PROPOSITION TEMPLATE

For [describe target users] who [describe problem or need], [name of product/service] is a [describe type of product/service] that [describe benefit or value].

EXAMPLES

For coffee drinkers who are annoyed by waiting in line to order and get their drinks, JavaGo is an app that lets you pre-order and pay for your drink, so it's fresh and ready when you arrive at our coffee shop.

For people needing a ride who are frustrated by trying to get and pay for a taxi, Lyft is a smart ride-sharing service that, with one tap in our app, quickly brings a car to your exact location, gets you to your destination, and lets you pay automatically without cash.

YOUR TASK

It may be helpful to refer back to your journey map since this shows some of the current problem(s) affecting your target users. The journey map can help you clarify the benefit or value that your solution will provide (compared to the current user experience).

Once your team's smart device, Photon app, and web app have been created, your team needs to conduct integration testing to ensure that all these parts of your system work together properly.

YOUR TASK

Conduct integration testing of your smart device, Photon app, and web app:

• Test all the functions and features of the smart device, Photon app, and web app to verify they are working correctly and interacting with each other correctly.

• Record detailed notes for any issues that occur (something that doesn't work correctly, something that could be improved, something that is missing, etc.).

• Troubleshoot the cause of each issue, implement a fix, and re-test until any significant issues are resolved. Don't worry about trying to make your solution absolutely "perfect" – just identify the most serious issues and fix as many as you can, depending on how much time is available.

Later, your team will conduct an evaluation of your solution by testing it with stakeholders.

Your team needs to build its smart device prototype by connecting the necessary inputs and outputs to your Photon board. Your team’s system model should identify each of the parts needed for your device.

You will need to use online references (such as: , , etc.) to verify how to correctly wire the parts to the I/O pins and power. (I/O = Input/Output)

Your team will need to test the wiring of each part by adding temporary code in the Photon app to do something simple with each part (such as: turn LED on and off, rotate servo motor back and forth, etc.).

In addition, you may need to construct other non-electronic parts for your team’s smart device prototype. For example, if your smart device locks a door, then your team should build a small-scale model door (using cardboard, etc.) that can be locked and unlocked by your device.

YOUR TASK

1. Connect the necessary parts to build the smart device:

   1. • If your team's system model does NOT clearly and correctly identify all the specific inputs and outputs needed for your device, then revise your system model to be accurate.

      • If necessary, you can simulate certain parts. For example, the smart thermostat prototype used a red LED and blue LED to represent heating and cooling systems.

      • TIP: If people will interact directly with the device, consider whether you need to add parts to provide visual and/or audio feedback to indicate the device status or a device response. For example, if a user presses a button on the device, how will the user know the device detected this? Devices and apps that don't provide any obvious feedback can be frustrating or confusing to users.

   2. • How many wires does the part need, and what do the wires connect to? Each part will connect to at least one I/O pin and to GND. Certain parts (such as: LED, etc.) connect to GND using a resistor. Certain parts (such as: OLED display, etc.) connect to additional I/O pins and/or to a power supply pin (3.3V or 5V).

      • Will the part gets its power from its I/O pin, the 3.3V pin, or the 5V pin (V-USB)? Some parts get power directly from their I/O pin, while other parts have separate wires for power. Certain parts (OLED display, etc.) are limited to only 3.3V of power, while other parts (servo motor, etc.) require 5V of power.

      • Does the part need to connect to specific pins? Certain inputs (such as: photocell, etc.) need an analog pin. Certain outputs (such as: servo motor, etc.) need a PWM pin. Certain parts (such as: OLED display, etc.) need to be connected to other specific pins.

   3. Plan out where the parts will placed on the breadboard, so the layout will be easy to understand and use (e.g., if users need to look at device and/or physically interact with device).

   4. Determine whether you need to connect one or more power rails on the breadboard:

      • Use a jumper wire to connect one of the negative power rails on the breadboard to a GND pin on the Photon board. Then connect each part’s GND wire (or resistor) into this negative power rail.

      • If there is one (and only one) part requiring 3.3V, then connect that part directly to the 3.3V pin on the Photon board.

      • If there are multiple parts requiring 3.3V, then use a jumper wire to connect one of the positive power rails on the breadboard to the 3.3V pin on the Photon board. Then connect each part’s 3.3V wire into this positive power rail.

      • If there is one (and only one) part requiring 5V, then connect that part directly to the V-USB pin (5V) on the Photon board.

      • If there are multiple parts requiring 5V, then use a jumper wire to connect one of the positive power rails on the breadboard to the V-USB pin (5V) on the Photon board. (If you already connected one positive power rail to 3.3V, then connect the second positive power rail to V-USB). Then connect each part’s 5V wire into this positive power rail.

      • If there are no parts requiring 3.3V or 5V, then do not connect a positive power rail (because all the parts will receive power from their I/O pins). However, you will still use the negative power rail for the GND wires.

   5. Connect each of the wires (and resistors, if applicable) for each part, and use your wiring table to record which I/O pin each part is connected to. This information will be needed to code the Photon app.

      • NOTE: Several analog pins are duplicated on the Photon board. A2, A3, A4, and A5 are each represented by two pins. If you use one of these pins, you cannot use its duplicate.

      • TIP: You may want to connect one part at a time, and then test the wiring of that part using Photon code (step 2) before connecting the next part.

2. Test the wiring of each part using temporary code in the Photon app. The "test" code for each part should do something simple to verify the part functions correctly.

   • For example, an LED light could be programmed to blink on and off repeatedly, a motion sensor could be programmed to briefly turn on the built-in D7 LED if movement is detected, etc.

   • For inputs that take measurements (such as: photocell, accelerometer, etc.), you will have to do a bit more work to test that the part is working correctly. For example, if you first connect and test the OLED display screen, then you could display a measurement taken with another part. (Later, you could remove the OLED screen if it's not needed as part of your final device.) Another option would be to share the measurement variable with a simple web app that would display the measurement value.

3. Construct any additional parts needed to demonstrate how your team’s smart device prototype works.

   • For example, if your smart device locks a door, then create a small-scale model door (using materials such as cardboard, etc.), so that your device can actually lock or unlock the model door.

Project teams need to track their progress on tasks – as well as any issues that arise – in order to complete their projects on time. This is why a detailed task schedule is such an important tool for managing a project.

This next phase of the project requires your team to develop its solution based on your team's design. There are six major components to complete during this development phase:

Over the next several weeks, your team should be working on multiple components in parallel (i.e., at the same time). Each team member should be assigned to work on one or more components.

that will help keep your team on track. These checkpoints do not necessarily represent equal amounts of time. For example, it may take less time to complete Checkpoint 1 but more time to complete Checkpoint 3.

IMPORTANT: Each team member should be contributing at all times throughout the development phase. If a team member completes their current task, he or she should either continue on to the next task for that component or help complete a task for a different component.

NOTE: Keep in mind that both the Photon app and web app require coding, so your team may need more than one person to work on coding. (The product marketing website can be coded – or it can be built without coding by using a tool such as Google Sites, etc.)

YOUR TASK

2. • List the name of the team member(s) assigned to each task.

   • When a task is started, enter the start date (MM/DD).

   • When the task is completed, enter the completion date.

   • There is an optional column for due date, which your team can use for its own deadlines or any deadlines established by your teacher.

3. During this time, also track any significant issues that your team is unable to resolve, in order to follow up and get help as needed. Record these in the "Issues Log" sheet of the spreadsheet.

   • Describe the issue. Be sure to include specific details that may help figure out the cause of the issue. (For example: What happens or doesn’t happen? What have you checked or tried? What information do you need?)

   • Use the drop-down menu to select the component affected by the issue (such as: smart device, Photon app, web app, etc.).

   • List the name of the team member(s) assigned to follow up and resolve the issue.

   • When the issue is added to the log, enter the date.

   • When the issue is resolved, enter the date.

Your team needs to create a Photon app that will run on 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 program a Photon app that will read data from your device’s inputs, analyze the data to make decisions, send commands to your device’s outputs, and interact with your device’s web app by sharing data through the Internet (via ).

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

YOUR TASK

1. Plan out Photon app

   1. • If your team's system model does NOT clearly and correctly describe the functions and interactions of the parts, then revise your system model to be accurate.
2. Code Photon app - Part 1 (add libraries, declare global variables, code setup() function, test each part)

   1. CREATE NEW APP: Login to your team's Particle Build account. Create a new app, and give it a title that makes sense. Particle Build will automatically insert a blank setup() function and blank loop() function for your new app.

   2. LIBRARIES: Determine whether any parts (such as: OLED display, servo motor, etc.) need a special code library added to the Photon app. If so, then search for the necessary library in Particle Build, and add the library to your Photon app. Particle Build will insert an #include statement for the library at the very top of your app code.

   3. GLOBAL VARIABLES: Declare (create) global variables near the top of your app (after any library #include statements but before the setup() function). Each variable must have a unique name. You get to decide what the names are, but try to use names that will make sense to someone else reading your code. Remember that variable names cannot have spaces (and cannot be a keyword in the programming language).

      • Create global variables for each part’s I/O pin. This I/O pin number should have been recorded by the person who wired and connected the parts. If necessary, visually verify the I/O pin number used by the part on your Photon device.

      • Create global variables for any object variables that are needed. Parts that needed a special code library usually require an object variable.

      • Create global variables to store any other data (numbers, text, etc.) that your app needs to track or needs to share with your web app.

   4. SETUP( ) FUNCTION: Within the setup() function, add code needed to prepare your device for use. Remember that the setup() function runs only one time when the device is first started (or is reset).

      • Set the pinMode() for each input or output. Be aware that some parts do not need a pinMode() statement.

      • Parts that needed a library (such as: OLED display, etc.) may need certain commands added within the setup() function. For example, the OLED display needs oled.begin(); added within the setup() function.

      • Add any other commands that you want to occur one time when the device is first started. For example, if you are using an LED light, you may want to either turn it on (or turn it off) when the device is first started.

      • Later (in step 3 below), you will add Particle Cloud statements within the setup() function, so your Photon app can send data to your web app and/or receive commands from the web app.

   5. TEST EACH PART: Within the loop() function, add temporary code to test each part, in order to verify the part is wired correctly and working. This "test" code should make the part do something simple that you can observe or verify in some way.

      • OUTPUT examples: turn on LED (or make it blink), have speaker produce a tone, make servo motor rotate, display message on OLED screen, etc.

      • INPUT examples: turn on built-in D7 LED when button is pushed (and turn off when button is released), turn on built-in D7 LED when motion detected (and turn off when no motion detected), display measurement from accelerometer on OLED screen, etc.

      • After adding the "test" code, "flash" (download) the app onto your Photon device to run it. If the part doesn't work properly, then first check your code in the Photon app to make sure it is complete and accurate. For example, does the pin number you listed for the part's global variable match the actual pin that it is wired to? Did you set the correct pinMode() for the part? If necessary, revise the code, and re-flash the Photon app to your device. If you've verified the code is correct but the part is still not working, then check whether the part is wired correctly to the Photon device.

      • Once the parts are tested to work properly, the "test" code can be removed from the loop() function (but do not remove the libraries, global variables, or code in the setup() function) – or the "test" code can be turned into comments by typing two forward slashes at the beginning of each line of "test" code: //

3. Code Photon app - Part 2 (code loop() function, code any custom functions, add Particle Cloud statements)

   1. LOOP( ) FUNCTION: More details coming soon...

   2. CUSTOM FUNCTIONS: More details coming soon...

   3. PARTICLE CLOUD: More details coming soon...

Your team will create a wireflow of your smart device's web app to show how someone would interact with it to complete a task. Wireflows are prototypes that allow you to design, test, and revise a website or app before coding it.

What is a ? It's a combination of wireframes and a flowchart:

• A wireframe is a sketch or mockup of a webpage or app screen (also called the user interface). A wireframe shows how elements are visually arranged in the user interface (such as: navigation menus, icons, text, images, buttons, etc.). Early in the design process, wireframes are simplified outlines of the user interface. Later in the process, more detailed mockups are created.

• A flowchart is a diagram representing the steps in a process or task from start to finish. The flowchart includes steps completed by the user and steps completed by the system (i.e., the app). A flowchart might include decision points where the process or task can follow different paths. Flowcharts are helpful for figuring out how to design and program your app.

• A wireflow is a sequence of user interface mockups (wireframes) showing the steps in a task flow (flowchart) as a user interacts with a website or app.

The easiest way to create a wireflow is by sketching a sequence of wireframes representing a task flow. There are also tools available (such as: , , , etc.) to create (or import) wireframes and turn them into interactive wireflows (with clickable links, buttons, etc.) that can be tested with users.

EXAMPLE

Here is an example of a wireflow for a task in a smart light web app. This wireflow shows how the user interface changes as the user turns on a set of lights and adjusts the brightness of the lights.

As you can see, a wireflow can use simple screen mockups and still be effective for showing how a user interacts with the app. Each mockup also includes a brief description to help clarify what the user does and what the app does in response.

Your team will create a wireflow with 3-6 screen mockups to show how a person would use your web app to complete a specific task that involves interacting with your smart device.

• web app can receive and display data from smart device (by getting Photon variables)

• web app can send data and commands to smart device (by calling Photon functions)

• web app can receive notification alerts from smart device (by streaming Photon events)

The task that you select for this first wireflow should be core to the purpose and experience of using your smart device system. Therefore, do NOT select a mundane task such as: creating an account, logging into the app, etc.

YOUR TASK

Once your smart device, web app, and product marketing website have been evaluated, your team needs to determine what is working well and what could be improved. Then your team will implement improvements, as feasible.

YOUR TASK

• Determine what changes or improvements are most important to make – as well as most feasible to make – based on how much time is available before the public poster presentation.

• If there are changes to your smart device or web app that are not feasible to make at this time, you can describe those during your public poster presentation and/or in your product marketing website as features coming in the next iteration (version) of the solution.

Most entrepeneurs or companies create a website to help promote and market new products. Sometimes this is done as a webpage on a crowdfunding website (such as , , etc.). Other times, this is done as a webpage or mini-site on a company website.

Your team will create a one-page product marketing website for your smart device solution, which will include your . This website will be made public to allow more people to learn about your smart device project.

YOUR TASK

1. Create and/or gather the content (text, images, video, etc.) for your team’s product marketing website. Be sure the content is clear, concise, engaging, and professional. Your website should include the following content (but you can determine the best order – and you can add other content if helpful):

   • Product Name

   • Value Proposition (could be shortened even further into a tagline phrase)

   • Functions and Features (what does product allow you to do, what benefits does it provide)

   • Tech Specs (list the inputs, outputs, etc.)

   • Video demonstrating use of solution

   • Image(s) of smart device prototype

   • Screenshots of web app

   • Names of team members and their project roles

2. Create a visual design for your team's one-page website that will be engaging, professional, and reinforce your product concept.

   • Generate and sketch possible ideas for the layout of the content on the webpage.

   • Decide on the overall style for the website (such as: fonts, colors, etc.)

3. • Include temporary placeholders for the product demo video and certain images (smart device, web app screenshots).

Later, your team will conduct an evaluation of the website by testing it with users.

Your team will participate in a public poster presentation to demonstrate and explain your project to an audience.

The people attending the presentation will walk around to each team to learn about the projects, spending a few minutes with each team. You will most likely have to present multiple times to different small groups of people.

YOUR TASK

• Prepare and practice a basic 2-3 minute presentation that describes the problem your team targeted and demonstrates the solution you developed. Then if the audience seems interested in learning more, you can explain in more detail how you researched, designed, developed, and evaluated your project.

• Each team member should be prepared to help present as needed.

• On the day of the event, be sure you have your project poster, smart device prototype, and a laptop or mobile device to demonstrate your web app. You may also want to have your product marketing website available for viewing on a laptop or tablet.

• During the presentation, be friendly, confident, and engaging. When demonstrating your smart device product, give the audience members an opportunity to interact with it, so they can directly experience using your solution.

• Be prepared to respond to questions from the audience members.

• Treat every audience member as a potential judge (because some of them may be judges).

Reflecting back to think about what you've experienced is an important part of learning and improving. Reflection is useful throughout an experience, but it is especially helpful at the end because you have the benefit of reflecting on the entire experience from start to finish.

YOUR TASK

Write brief personal responses to the prompts in this project reflection document.

Once integration testing is completed, your team needs to evaluate your smart device and web app by testing it with stakeholders to gather feedback on what is working well and what could be improved.

The evaluation will focus on testing the functionality, usability, and user experience of your solution. This evaluation can provide evidence of how well your solution meets your design requirements.

YOUR TASK

1. Identify one or more tasks that people could complete using your smart device and web app. Create a brief scenario describing a realistic context in which someone would need to complete the task(s).

   • For example, a scenario and task might be something like: "Imagine you are a student that needs to get something from your locker before your next class starts. Open up your smart locker, and then lock it again when you're done."

2. Recruit 3-5 participants that match one of your target stakeholder groups, as represented by your personas. Each participant will individually evaluate your team’s solution. Each evaluation will take about 5-10 minutes.

3. At the start of each evaluation, briefly introduce your solution to the participant using your team's value proposition. Be sure to mention that:

   • the product is being tested, not the participant

   • the product consists of a smart device and a web app that work together

   • the product is an early prototype, so you want constructive feedback on what’s working well and what could be improved

4. Describe the scenario to the participant, and identify the task that he or she should complete using the device and web app. (If you have multiple tasks to test, give the participant one task at a time.) Tell the participant to provide feedback by “Thinking Aloud” as he or she interacts with the device and web app.

   • Since the device is an early prototype (which may be very unfamiliar), it may be necessary at times to provide limited help if the participant doesn't understand what to do next.

   • However, as much as possible, let the participant figure out how to interact with the device.

5. As the participant completes the task(s), record notes on the feedback being provided.

6. At the end, have the participant complete this online evaluation survey.

Repeat Steps 3-6 with each participant.

Once your product marketing website is completed, your team needs to evaluate the website by testing it with users to get feedback on what is working well and what could be improved.

The evaluation will focus on testing the functionality, usability, and user experience of your website. This evaluation can provide evidence of how effective your website is at marketing your product.

YOUR TASK

1. Recruit 3-5 participants that match one of your team’s target stakeholder groups, as represented by your team's personas. (Avoid using participants that evaluated the smart device and web app, since they will already be familiar with your product.) Each participant will individually test and evaluate your team's product website. Each evaluation will take about 5-10 minutes.

2. At the start of each evaluation, briefly explain that your team wants to get feedback on a website for a new product. Be sure to mention that:

   • the website is being tested, not the participant

   • the website is the focus of the evaluation, rather than the product

   • the website is a work in progress, so you want constructive feedback on what’s working well and what could be improved

3. Tell the participant to provide feedback by “Thinking Aloud” as they interact with the website. Tell the participant to use the website to learn about the product by finding answers to these questions:

   • What does the product do?

   • Who would use the product?

   • What benefit or value does the product provide?

4. As the participant uses the website, record notes on the feedback being provided.

5. At the end, have the participant complete this online evaluation survey.

Repeat Steps 2-5 with each participant.

Your team needs to create a poster that helps show how your team researched, designed, prototyped, and evaluated your solution to your targeted problem.

The poster will be a visual reference to supplement the explanation and demonstration that your team gives during the public presentation event. The goal is for the poster to be clear, concise, engaging, and professional in terms of its content and visual design.

The standard size for a large poster is 36 inches wide by 24 inches tall. Your teacher will assist with getting the posters professionally printed.

YOUR TASK

1. Gather the content (text and images) for your team’s project poster. Be sure the content is clear, concise, engaging, and professional. Here is a recommended list of content for the poster (and you can add other content if helpful):

   • TEAM

     • Team Name (if applicable)

     • Team Member Names

   • PRODUCT

     • Product Name

     • Value Proposition (or tagline phrase)

     • Functions and Features (optional)

   • RESEARCH

     • Persona for Target User

     • Journey Map of Current User Experience (optional)

     • Design Requirements for Solution (optional)

   • DESIGN

     • Refined Sketches of Solution (optional)

     • System Model of Solution

     • Wireflow of Web App

     • Storyboard of Future UX with Solution (optional)

   • PROTOTYPE

     • Photo of Smart Device

     • Example of Code from Photon App (optional)

     • Screenshot(s) of Web App

     • Example of Code from Web App (optional)

   • EVALUATION

     • Evaluation Findings (optional)

2. Determine the visual design for your team's poster.

   • Generate and sketch possible layouts of the poster content. You can use a regular sheet of paper to sketch a simplified, small-scale mockup.

   • Decide on the overall visual style for the poster (such as: fonts, colors, etc.)

3. Create your final poster using a tool such as Google Drawing.

   • You can use this Google Drawing template which is preset to 36 inches wide by 24 inches tall (zoom in or out as needed to add and edit text, images, etc., but do not change the canvas size).

   • Be sure your poster doesn't have too much text (people may not read it all) or too little text (people may not understand the poster). For example, include some kind of label or description for diagrams, images, etc.

   • Be sure you have strong contrast between the text color and its background color. (If the background color is dark, the text color should be light. If the background color is light, the text color should be dark.)

   • Be sure the font types and font sizes used on the poster will allow people to easily read the text from several feet away. (Fancy fonts may be hard to read. Bold text may be easier to read. Font sizes less than 30 might be too small.)

4. Save or download a copy of your poster as a PDF, and provide the PDF to your teacher for printing.

Each part (such as LED, etc.) that you connect to your Photon device must have a complete electrical circuit. A circuit is a continuous path that conducts electricity from the positive (+) end of the power supply through a part (such as LED, etc.) back to the negative (-) end of the power supply. The Input/Output (I/O) pins, jumper wires, and breadboard are used to help make a separate circuit for each part.

This is why each part needs at least 2 wires (one for positive and one for negative). In many cases, an I/O pin acts as the voltage source (positive end) for a particular part's circuit. All parts will connect back (directly or indirectly) to one of the GND (-) pins on the Photon board. Parts that require more than 2 wires use the extra wires for power or data.

Input/Output Pins

The Photon board has a number of I/O pins used for connecting inputs and outputs. Some of these are labeled as "analog" pins, while others are labeled as "digital" pins. However, in practice, the analog pins can act as digital pins, and some of the digital pins can act as analog pins.

ANALOG PINS

The Photon board has 6 analog I/O pins labeled as: A0, A1, A2, A3, A4, A5.

Several of these analog pins are duplicated on the Photon board. A2, A3, A4, and A5 are each represented by two pins. The duplicate pins are located in the 10-pin digital header and labeled as: SS/A2, SCK/A3, MISO/A4, MOSI/A5. You can use either the primary analog pin or its duplicate. However, if you use one, then you should not use the other. For example, you could connect a part to either A2 or SS/A2 (choose one), but you cannot connect two different parts to these two pins and try to control them separately.

DIGITAL PINS

The Photon board has 8 digital I/O pins labeled as: D0, D1, D2, D3, D4, D5, D6, D7.

The D7 pin is also connected to a small, built-in blue LED light on the Photon board. Sending a digital output signal of HIGH to D7 will turn on the built-in D7 LED (and sending a signal of LOW turns it off). You can connect another part to the D7 pin, but just be aware that your Photon code might also turn the D7 LED on or off (only if you're using the D7 pin as a digital output for your other part).

SPECIAL PINS

The Photon board has several I/O pins with "special" labels, indicating they have special uses.

There are several analog and digital pins with special uses: SDA/D0, SCL/D1, SS/A2, SCK/A3, MISO/A4, MOSI/A5. However, all of these pins can be used as regular I/O pins. In your Photon code, you can just refer to these pins by their "regular" labels (D0, D1, A2, A3, A4, A5).

There are two pins labeled as RX and TX, which are normally used for receiving data (RX) or sending data (TX) data over a serial connection to a part. If needed, these pins can instead be used as regular I/O pins. In your Photon code, you would simply refer to these pins as RX and TX.

There are two pins labeled as WKP and DAC, which have special uses. If needed, these pins can instead be used as regular I/O pins. In your Photon code, you would refer to WKP as A6 and DAC as A7.

PWM PINS

Some of the I/O pins are capable of PWM output. PWM stands for pulse-width modulation, which is how a digital output signal (which has only two values: HIGH or LOW) can act like an analog output signal (which has a range of values).

Certain parts (such as: speaker, servo motor, etc.) require a connection to a PWM output pin.

Only the following pins can act as PWM outputs: D0, D1, D2, D3, A4, A5, WKP, RX, TX.

Voltage Sources

The Photon board operates at 3.3 volts. Therefore, the voltage source from the I/O pins is 3.3 volts (regardless of whether the Photon is being powered by USB or battery). Again, many parts are powered directly from their I/O pin. However, some parts need a separate power source.

• The 3.3V pin (+) on the Photon board can be used as a power source.

• The V-USB pin (+) on the Photon board supplies 5 volts (which comes directly from the USB connection). This pin won't supply power if the USB is not connected.

• The VIN pin (+) on the Photon board supplies power directly from the battery connected to the barrel jack. So connecting a 9V battery would provide 9 volts to the VIN pin (but still only supply 3.3V to the regular I/O pins). This pin won't supply power if a battery is not connected.

CAUTION: Some parts (such as OLED display, accelerometer, etc.) can only handle 3.3V and can be damaged if connected to a higher voltage. Check the power requirements of each part before connecting a part to either V-USB or VIN.

NOTE: Some parts (such as servo motor, motion sensor, etc.) require 5V in order to operate properly. These parts will have to be connected to either V-USB or VIN.

GROUND PINS

There are 3 separate ground pins on the Photon board, each labeled as GND. These act as the negative end of a circuit. All parts have to connect to a GND pin (either directly or through the breadboard).

Breadboard

The breadboard is an important part used to help make your circuits. The left and right halves of the breadboard are actually separate (which means they will not conduct electricity between each other). Within each half, the holes within the same row are connected to each other electrically, but each row is separate from the other rows. The rows are numbered (1-30), and holes within the same row are lettered (a-e for left-hand rows, f-j for right-hand rows).

In addition, each half of the breadboard has a power rail as its two outer columns (positive column and negative column). The power rails are not connected to the rows. The purpose of a power rail is to allow multiple parts (which will be attached to the breadboard rows) to share access to the positive and negative ends of your Photon device's power supply. Think of each power rail as a power strip.

The best way to try to understand how the breadboard conducts electricity is this image (on the right) that shows the metal strips embedded inside the breadboard:

When a jumper wire is inserted into a breadboard hole, it makes contact with the metal strip underneath. Any wires or parts that are connected to the same metal strip are therefore connected electrically to each other. As the picture above shows, there are separate rows of metal strips on the left side and the right side.

The red arrows in the image are pointing to the metal strips under the power rails. Again, think of these two power rails as two power strips. Once you plug a power rail into a power supply (by connecting it to the Photon board), you can plug other parts into the power rail.

Connecting a Power Rail

In order to "plug in" a power rail, you have to connect a jumper wire from a voltage source (+) on the Photon board (such as the 3.3V pin) to any hole in the positive (+) column of the power rail. Then connect a second jumper wire from any hole in the negative (-) column of the power rail back to one of the GND (-) pins on the Photon board. Now if a part on the breadboard needs access to voltage (+) or GND (-), you can connect a jumper wire between a hole in that part's corresponding row and any hole in the appropriate power rail column (either + or -).

Depending on which parts are being connected, it may be necessary to only activate and use the negative (-) power rail. This is because every part needs to connect back to GND on the Photon board (and there are only 3 GND pins available). Since many parts use a digital or analog pin as their voltage source (+), sometimes it might not be necessary to activate and use a positive (+) power rail.

The fact that there are two power rails can be helpful if you have certain parts that need a lower voltage (such as 3.3V) while other parts need a higher voltage (such as 5V). You can supply these different parts with their appropriate voltage by connecting them to the correct power rail.

If necessary, you can even "plug in" one power rail to the Photon board, and then connect the second power rail to the first power rail.

How to Decide Which Power Rails to Connect

Here's how you can determine whether you need to connect one or more power rails on the breadboard:

NEGATIVE POWER RAIL

• If you have only have 1-3 parts to connect, then you can choose to connect each part to a separate GND pin using a jumper wire. However, it's actually a good habit to instead connect the negative power rail because it makes it easier if you decide later to add more parts to your device.

• Otherwise, use a jumper wire to connect one of the negative power rails on the breadboard to a GND pin on the Photon board. Then connect each part’s GND wire (or resistor) into this negative power rail.

POSITIVE POWER RAIL

• If there is one (and only one) part requiring 3.3V, then connect that part directly to the 3.3V pin on the Photon board.

• If there are multiple parts requiring 3.3V, then use a jumper wire to connect one of the positive power rails on the breadboard to the 3.3V pin on the Photon board. Then connect each part’s 3.3V wire into this positive power rail.

• If there is one (and only one) part requiring 5V, then connect that part directly to the V-USB pin (5V) on the Photon board.

• If there are multiple parts requiring 5V, then use a jumper wire to connect one of the positive power rails on the breadboard to the V-USB pin (5V) on the Photon board. (If you already connected one positive power rail to 3.3V, then connect the second positive power rail to V-USB). Then connect each part’s 5V wire into this positive power rail.

• If there are no parts requiring 3.3V or 5V, then do not connect a positive power rail (because all the parts will receive power from their I/O pins). However, you will still use the negative power rail for the GND wires.

Arranging Parts on Breadboard

Parts have to be arranged so their pins are in their own breadboard rows (which are numbered):

• Pins from different parts should not be in the same row. For example, a push button and LED would not share the same rows.

• Different pins from the same part should not be in the same row. For example, the Micro OLED display has 8 pins, and each of these pins must be in a different row on the breadboard.

• Resistors are the only exception to this rule: a resistor is supposed to share a row with a pin of another part (such as LED, etc.).

Parts should be arranged in a logical layout that makes it easy to understand and use the device:

• Place as many of the jumper wires as possible on the side of the breadboard closest to the Photon board, so the wires don't block parts that need to be seen or interacted with.

When learning a new coding language, many people first create what is called a "Hello World" program. Traditionally, this involves displaying the text "Hello World" on the screen. The purpose is to demonstrate that you can create a simple working program in the new coding language.

Creating a working device with an electronics kit involves both building the physical device and programming it. So if your device doesn't work as expected, the reason could be that some of the parts are connected incorrectly – or the program might have a mistake – or it could be both.

So you will create a different kind of "Hello World" app for your Photon device: an app that doesn't require connecting any additional parts to the Photon, so you can first focus on getting some code to work.

The Photon has a built-in blue LED light that is connected to its D7 pin. This "Hello World" app will turn this blue LED on and off in a repeating pattern. This will be your first app before you start to connect additional parts to program more complex devices.

This app – like all apps that run on Photon devices – is coded in a programming language called Wiring. Here's an overview of the Wiring programming language.

WHAT TO DO

1. Login to your Particle Build account. If necessary, here's a brief overview of navigating and using Particle Build.

2. Create a new app titled: hello-world

3. Delete the placeholder code that Particle Build inserted for your new app (the empty setup() and loop() functions).

4. Copy and paste the code below into your new app. Save the app in Particle Build, and then load ("flash") the app onto your Photon device. During "flashing", Particle Build transfers the app to your device over Wi-Fi. The RGB light on your Photon blinks magenta as the new app is being flashed, and then the Photon restarts. Be patient – sometimes it takes longer for your first app to flash because Particle may need to also update the firmware (OS) on your Photon device.

5. After the Photon has reconnected to Wi-Fi, the new app will automatically start running. If everything worked correctly, the blue D7 LED on your Photon device should blink on and off repeatedly. It may not seem like much, but you've just taken your first step in coding with the Wiring language.

6. Once you get the app working, try modifying the code to change the LED blinking pattern. Flash your modified app to your Photon to see what your changes do. Can you make the LED blink faster? Can you make it blink slower? Can you make it blink in a more complex pattern (maybe similar to Morse code)?

Code for Hello-World

// HELLO WORLD app - introductory program that doesn't require connecting any parts

// GLOBAL VARIABLES - variables that will be used in multiple functions
// declare integer variable called "led" and assign it value of D7 (built-in LED)
int led = D7;

// SETUP function runs one time at start when device is powered on
void setup() {
    // set "led" pin to be an output
    pinMode(led, OUTPUT);
}

// LOOP function runs in repeating loop (after setup finishes)
void loop() {
    // turn on "led" pin (built-in blue LED light)
    digitalWrite(led, HIGH);

    // wait 1 second (1000 milliseconds)
    delay(1000);

    // turn off "led" pin
    digitalWrite(led, LOW);

    // wait 1 second
    delay(1000);

    // loop repeats itself again
}

A couple of things to note about the code:

• The lines that begin with two forward slashes are comments. Comments are just notes for people reading the code. The comments are ignored by the device when the app runs. Comments are optional, but it can be helpful to include comments to explain certain parts of the app.

• Integers are supposed to be whole numbers, but the Wiring language treats input and output pin names (D7, etc.) as "integer" variables.

The references in this section can help with:

• connecting parts to create circuits using jumper wires, a breadboard, and the Photon I/O pins

• coding Photon apps in the Wiring programming language that will run on the Photon device

• coding web apps that interact with Photon apps through the Particle Cloud service

• connecting and programming specific inputs and outputs for the Photon device

General Wiring & Coding

• Creating Circuits

• Wiring Programming Language

• Particle Cloud

• Hello World App for Photon

Inputs and Outputs

Standard Parts in Photon Kit

• LED Light

• Push Button

• Micro OLED Display

• Humidity and Temperature Sensor

• Speaker

• Servo Motor

• Motion Sensor

• Magnetic Switch

• Potentiometer (Dial)

• Photocell (Light Sensor)

• Moisture Sensor

• Accelerometer

Custom Order Parts

• RFID Reader

• Fingerprint Scanner

• GPS Receiver

• Color Camera with Infrared

• Microphone

• Force Sensitive Resistor

• Keypad

The defining feature of an IoT device is its ability to send and receive information through the Internet. This allows an IoT device to interact with other apps or with other IoT devices.

The Particle firmware (the operating system) on your Photon device has built-in functions to allow your device to send and receive data through the Particle Cloud service. This will allow your device to interact with web apps that you create.

Particle also has a JavaScript library that provides functions that will allow web apps to send and receive data through Particle Cloud. You can use these functions in your web app's JavaScript code, so that your web app can interact with your Photon device.

The three main ways your Photon device can interact with your web app through Particle Cloud are by:

• sharing Photon variable: web app can read value of variable in Photon app

• sharing Photon function: web app can send commands and data to Photon app

• sharing Photon event: web app can receive event notifications and data from Photon app

You can also combine these Particle Cloud interactions in more complex ways. For example, your Photon app could send an event notification to your web app, which then triggers the web app to read the value of a variable in the Photon app.

This reference contains code examples for both your Photon app and your web app. Many of the code examples will need to be modified, in order to be used in your apps. For example, you may have to change the names of variables, add custom code, etc.

Particle JavaScript Library

Particle API JS is a JavaScript library that contains functions that will allow a web app to interact with your Photon device by sending and receiving data through Particle Cloud.

A web app must load the Particle API JS file using a <script> tag in the <head> section of its HTML file.

If possible, you should load the Particle API JS file from a web service like jsDelivr:

Include in Web App HTML file, such as: index.html

<script src="//cdn.jsdelivr.net/particle-api-js/6.4.2/particle.min.js" type="text/javascript"></script>

Alternatively, you can download a copy of the Particle API JS file, and place the file into the same folder as your HTML file. In this case, your <script> tag would load the file directly from the folder:

<script src="particle.min.js" type="text/javascript"></script>

After loading the Particle API JS file (using one of the methods shown above), your web app also needs to load a JavaScript file containing your own code to interact with your Photon device. This will be loaded using another <script> tag. The example below would load a JavaScript file (created by you) called: code.js

Include in Web App HTML file, such as: index.html

<script src="code.js" type="text/javascript"></script>

Photon Device ID and Access Token

If a web app wants to interact with your Photon device through Particle Cloud, the web app has to know your Photon device ID and your Photo access token. These act like a username and password to help protect your Photon data.

• Your Photon device ID is listed in the "Devices" section of your Particle Build account. Click the arrow to the right of your Photon device name to reveal the device ID. This device ID acts like a username to access your device's data in the Particle Cloud service.

• Your Photon access token is listed in the "Settings" section of your Particle Build account. This access token acts as a password to access your device's data in the Particle Cloud service.

Your web app will need to include the device ID and access token in its own JavaScript file in order to interact with your Photon device. Usually these are stored in global variables to make it easier to use them repeatedly throughout your web app's JavaScript code.

Include in Web App JS file, such as: code.js

var myDevice = "000000000000000000000000"; // insert your actual Photon device ID
var myToken = "abcdefghijklmnopqrstuvwxyz"; // insert your actual Photon access token

Be sure to modify the code above to insert your actual Photon device ID and access token.

Create Particle Object

In order to use the Particle Cloud functions in the Particle API JS library, your web app's JavaScript file must declare a Particle object variable. This should be a global variable and is usually just called particle.

Include in Web App JS file, such as: code.js

var particle = new Particle();

Your JavaScript code will use this particle object variable to run the Particle Cloud functions.

Share Photon Variable through Particle Cloud

You can share the current values of variables in your Photon app through Particle Cloud, so a web app can read these variables.

For example, your Photon device could measure the air temperature using a sensor, store the measurement in a temperature variable, and then share this variable with a web app.

Particle Cloud will let your Photon device share up to 20 variables at one time. Each cloud variable has to be given a unique name (up to 12 characters in length).

NOTE: The only data types that are allowed to be shared as cloud variables are: int (whole numbers), double (decimal numbers), or String (text, up to 622 characters).

PHOTON APP

A variable is shared through Particle Cloud by including a Particle.variable statement in the setup() function of your Photon app.

This Particle.variable statement has to provide a name for your cloud variable (up to 12 characters) and identify the name of the variable in your Photon app. Usually, these two will have the same name (but they don't have to).

Include within setup() function of Photon App

Particle.variable("roomTemp", roomTemp);

In the example above, the first name (in quotation marks) will become the name of your cloud variable. The second name identifies the variable in your Photon app that will be shared through the cloud. Modify this code to match your variable's name.

WEB APP

Your web app can read the current value of a cloud variable by using a particle.getVariable statement in its JavaScript file.

This particle.getVariable statement needs to provide your Photon device ID, the name of your cloud variable, and your Photon access token.

The value of your cloud variable gets temporarily stored in a local JS variable called data.body.result that you can use in your JavaScript code.

For example, if you want to display the value in your web app, you could insert the value by using a JavaScript statement to find an HTML element with a specific id name and then changing its HTML content to include data.body.result. In the code example below, assume that your web app HTML file contains a paragraph tag identified as: <p id="room-temp"></p>

Include in Web App JS file, such as: code.js

particle.getVariable({ deviceId: myDevice, name: "roomTemp", auth: myToken }).then(function(data) {
    // insert code to do something with data.body.result
    document.getElementById("room-temp").innerHTML = "Temperature is " + data.body.result);
}, function(err) {
        console.log("An error occurred retrieving data:", err);
});

Web apps are frequently updating their HTML through JavaScript statements that identify HTML elements using an id name or class name.

jQuery is a JavaScript library that makes it easier to update your HTML (and your CSS). jQuery statements start with $ and are usually shorter than using regular JavaScript. You can combine jQuery statements and regular JavaScript statements in the same code.

Here's an alternate example of the previous code that uses a jQuery statement instead.

// alternate example using jQuery to update html
particle.getVariable({ deviceId: myDevice, name: "roomTemp", auth: myToken }).then(function(data) {
    $("#room-temp").html("Temperature is " + data.body.result);
}, function(err) {
        console.log("An error occurred retrieving data:", err);
});

If your web app needs to keep checking the current value of the variable, you can place the particle.getVariable statement inside another custom function and then have your JavaScript code repeatedly run that custom function on a time interval (such as every 0.5 seconds, etc.).

// run checkTemp function every 0.5 seconds
window.setInterval(checkTemp, 500);

function checkTemp(){
    particle.getVariable({ deviceId: myDevice, name: "roomTemp", auth: myToken }).then(function(data) {
        $("#room-temp").html("Temperature is " + data.body.result);
    }, function(err) {
            console.log("An error occurred retrieving data:", err);
    });
}

If your web app needs to save the value of the Photon variable, you should create a global variable in your JavaScript that will be used to store the value. After getting the value of the Photon variable from the Particle Cloud, assign the data.body.result to the JS global variable.

// global variable
var roomTemp;

function checkTemp(){
    particle.getVariable({ deviceId: myDevice, name: "roomTemp", auth: myToken }).then(function(data) {
        roomTemp = data.body.result;
        // add other code to do something or call another JS function
    }, function(err) {
            console.log("An error occurred retrieving data:", err);
    });
}

// can add other function(s) to do something with roomTemp variable

Your web app can get the values of several Photon variables from Particle Cloud. You just need to include a particle.getVariable statement for each variable. However, you can put these statements inside the same custom function in your JavaScript. This next example runs a checkLocation() function every 5 seconds to get the latitude and longitude values from Particle Cloud.

// global variables
var latitude, longitude;

// run checkLocation function every 5 seconds
window.setInterval(checkLocation, 5000);

function checkLocation(){
    particle.getVariable({ deviceId: myDevice, name: "latitude", auth: myToken }).then(function(data) {
        latitude = data.body.result;
    }, function(err) {
        console.log("An error occurred retrieving data:", err);
    });

    particle.getVariable({ deviceId: myDevice, name: "longitude", auth: myToken }).then(function(data) {
        longitude = data.body.result;
    }, function(err) {
        console.log("An error occurred retrieving data:", err);
    });
}

Share Photon Function through Particle Cloud

You can share a custom function in your Photon app through Particle Cloud, so a web app can call this function to make it run on your Photon device. The web app also sends data (as a text String up to 63 characters) when calling the function. This is how your web app can send commands and/or data to your Photon app.

For example, your Photon app could share a custom function to turn an LED light on or off. A web app would be able to call this function to make it run on the Photon device.

Particle Cloud will let your Photon device share up to 15 functions at one time. Each cloud function has to be given a unique name (up to 12 characters in length). You get to decide what to name your cloud function – but use a name that will make sense to someone reading your code. (Your web app will have to refer to this same cloud function name, in order to call the function.)

PHOTON APP

A custom function is shared through Particle Cloud by including a Particle.function statement in the setup() function of your Photon app.

This Particle.function statement has to provide a name for your cloud function (up to 12 characters) and identify the name of the custom function in your Photon app. Usually, these two will have the same name (but they don't have to).

Include within setup() function

Particle.function("ledToggle", ledToggle);

In the example above, the first name (in quotation marks) will become the name of your cloud function. The second name identifies the custom function in your Photon app that will be shared through the cloud. Modify this code to match your function's name.

In order to share a custom function through Particle Cloud, the function must return an integer value and must accept a String value as an argument.

However, you do not necessarily have to do any with the function's return value. You also do not necessarily have to do anything inside the function with the String value. They just need to be present in the function for it to be shared with Particle Cloud.

Example of custom function in Photon App

int ledToggle(String data){
    if (ledStatus == "off") {
        digitalWrite(led, HIGH);
        ledStatus = "on";
    } else {
        digitalWrite(led, LOW);
        ledStatus = "off";
    }
    return 1;
}

When you want to use this custom function in your Photon app, you must pass a String value (text) to the function. Notice in the example below that we pass the text "switch" when we call the ledToggle() function, even though the ledToggle() function above doesn't actually use this String data.

void loop(){
    // check button
    int buttonState = digitalRead(button);

    // LOW means button is being pushed
    if(buttonState == LOW) {
        ledToggle("switch");
    }
    // wait 0.2 seconds before checking button again
    delay(200);
}

However, you can design your custom function to use the String data that is passed into it. The code examples below show a modified version of the ledToggle() function for a device that has separate push buttons to turn the LED on and off. The String data passed into ledToggle() function determines whether it will turn the light on, turn the light off, or do nothing.

void loop(){
    int redButtonState = digitalRead(redButton);
    // LOW means button is being pushed
    if(redButtonState == LOW) {
        ledToggle("off");
    }
    int greenButtonState = digitalRead(greenButton);
    // LOW means button is being pushed
    if(greenButtonState == LOW) {
        ledToggle("on");
    }
    // wait 0.2 seconds before checking buttons again
    delay(200);
}

int ledToggle(String data){
    if (data == "on") {
        digitalWrite(led, HIGH);
        return 1;
    } else if (data == "off") {
        digitalWrite(led, LOW);
        return 0;
    } else {
        return -1;
    }
}

If your Photon app needs to save the data sent by the web app when it calls the function, you should create a global variable in your Photon app that will be used to store the data. Then within the custom function called by the web app, assign the String data to the Photon global variable.

String userName;

int getName(String data){
    userName = data;
    // can add other code to do something with userName
    return 1;
}

The Photon app receives data from the web app in the form of a String (text). However, if the data is actually a number (which was converted to a String by the web app), then you can convert the String data back into a number using either the .toInt() or .toFloat() method, depending on whether the number is supposed to be a whole number (integer) or a decimal number (float).

int userID; // variable that can store whole numbers

int getUserID(String data){
    userID = data.toInt();
    // can add other code to do something with userID, such as:
    // if(userID == fingerprintID) digitalWrite(greenLED, HIGH);
    return 1;
}

float accountBalance; // variable that can store decimal numbers

int getBalance(String data){
    accountBalance = data.toFloat();
    // can add other code to do something with accountBalance, such as:
    // if(accountBalance <= 0.99) digitalWrite(redLED, HIGH);
    return 1;
}

WEB APP

Your web app can call a cloud function to make it run on your Photon device by using a particle.callFunction statement in its JavaScript file.

This particle.callFunction statement needs to provide your Photon device ID, the name of your cloud function, an argument (text String) to pass to the function, and your Photon access token.

Include in Web App JS file, such as: code.js

particle.callFunction({ deviceId: myDevice, name: "ledToggle", argument: "switch", auth: myToken });

The argument is the data that your web app sends to the Photon app. This argument data must be in the form of a text String. You can either list the String directly as text inside quotes, or you can use a String variable to store the text.

Often this particle.callFunction statement will be included inside another JavaScript function. For example, your web app might have an onscreen button that can be clicked to toggle the LED light on or off.