---
title: "1. Build Device Binding UI"
date: 2019-09-05T23:06:51+08:00
draft: false
chapter: false
weight: 201
---

The application is used to bind devices to users in [Amazon Cognito User Pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html).
It is built by [AWS Amplify](https://aws-amplify.github.io/). The following is the architect:

## Architecture
![](/images/smart-home/arch.jpg)

## Overview
The process involves two steps. 
The first step is the binding between the device and the user, and the second step is for Device Cloud to sends users' device information back to Alexa when it receives 'Alexa.Discovery' command. Let's understand the steps one by one.

### Step 1: Bind device to a user
When bind a device to a user, it will invoke the API and create an record in DynamoDB.

For a physical device, a serial number is usually being used as an uniquely identify a device.
In this proposal, the serial number has been encoded into a QR code together with a link to a 
web page. Customers simply need to scan the QR code to bind the devices. In real word, the QR Code could be packed inside the device.

The following flow chart describes a proposed design of how to bind physical device to users.
![](/images/smart-home/device-bind-flow.png)

1. Customer scan the QR code with their mobile phone
1. A web page being rendered on the phone    
1. Redirect to the login page (skip to step 6 if authenticated)    
1. Submit login information and get **accessToken** and **idToken**    
1. Get user profile using **accessToken**    
1. Invoke device binding API    
1. Create device and user relationship in database    

{{% notice info %}}
The Alexa does not have any requirement for creating the relationship between devices and users.
You can always design your own work flow. 
{{% /notice %}}

### Step 2: Alexa retrieves user's device information

Once the Alexa backend server receives the [Alexa.Discovery](https://developer.amazon.com/docs/device-apis/alexa-discovery.html),
the server can retrieve device information from the database and return to Alexa.

## How to Run
You could choose either to **Deploy this to Amplify console** or to **develop locally**.
This is a [modern web application](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html#what-are-modern-web-applications),
thus the easiest way for deployment is [AWS Amplify Console](https://docs.aws.amazon.com/zh_cn/amplify/latest/userguide/welcome.html).

{{% notice tip %}}
**The code for this application is located [here](https://github.com/aws-samples/aws-alexa-workshop-smarthome-ui)**. Amplify Console
supports GitHub, BitBucket, GitLab or CodeCommit as code source. The easiest way to get started is to 
[fork the repo](https://help.github.com/en/articles/fork-a-repo#fork-an-example-repository). 
{{% /notice %}}

 {{% tabs %}}
   {{% tab name="Option 1: Deployment to Amplify Console" %}}
1. Open **Amplify Console** in [AWS Console](https://console.aws.amazon.com/amplify/home?region=us-east-1#/), click **Get started** in **Deploy** session
    ![](/images/smart-home/amplify-console-get-started.png)

1. Choose the Git repo provider and select **Continue**

1. Github will automatically ask for the authorization, after that, Choose the repo and branch, select **Next**
    ![](/images/smart-home/amplify-console-repo.png)

1. Input **App name**

1. Create a new environment, input the **environment name** of leave it as default

1. Select or **create a new service role**, and click **Next**
    ![](/images/smart-home/amplify-console-settings.png)

1. Click **Save and deploy**

Wait for the deployment to be finished. You will be see the URL for the web application.
    ![](/images/smart-home/amplify-url.png)

   {{% /tab %}}

   {{% tab name="Option 2: Local Development" %}}
{{% notice warning %}}
**You will ONLY need to run this if you would like to develop locally**.  **Skip this part**
if you have already finished  [Deployment to Amplify Console](#deployment-to-amplify-console).
{{% /notice %}}

In this application, **Yarn** and **node.js** are used to build the application. 
    
- Please install [Yarn](https://yarnpkg.com/en/) and [node.js](https://nodejs.org/en/). The easiest way to install NodeJS is [NVM](https://github.com/nvm-sh/nvm).    
- The backend is provisioned via [AWS Amplify CLI](https://github.com/aws-amplify/amplify-cli#install-the-cli). The easiest way to install is via **npm**. If you install NodeJS via NVM, it will come with **npm**.

1. Init the backend. Run `amplify init`, enter **dev** for environment name
1. Choose your **default editor** and **AWS profile**. Wait for the initialization finished
![](/images/smart-home/amplify-init.png)
1. Run `amplify push` and type **Yes** when asked to confirm
1. Click **Enter** button to keep the all the rest default settings
![](/images/smart-home/amplify-push.png)
1. Run `yarn install` to install dependencies
1. Run `yarn start` to start the web application
1. Open [http://localhost:3000/?thingName=xxxxxxxx](http://localhost:3000/?thingName=xxxxxxxx) to view it in the browser.
1. If you are the first time to run the web application. You should click the **Create account** button to create an account.

   {{% /tab %}}
 {{% tabs %}}