AWS Alexa Workshop UI

This web application is part of AWS Alexa Workshop Smart Home. It is used to bind devices to users in Amazon Cognito User Pools.

The web application is built by AWS Amplify. The following is the architect:

When bind a device to a user, it will invoke the API and create an record in DynamoDB. When your device cloud receive a Alexa.Discovery directive, your Lambda should retrieve from this DynamoDB table and return to Alexa.

The following flow chart describes a proposed design of how to bind physical device to users.

For a physical device, a serial number is usually being used to 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 on which customers can bind their devices. The QR Code is shipped with the device.

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

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

Once the Alexa backend server receives the Alexa.Discovery, 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, thus the easiest way for deployment is AWS Amplify Console.

Deployment to Amplify Console

1. To get the code for this lab, You can fork this repo on GitHub. You could also push your code to GitHub, BitBucket, GitLab or CodeCommit.
2. Open Amplify Console in AWS Console, click Get started in Deploy session
3. Choose the Git repo provider and select Continue
4. Github will automatically ask for the authorization, after that, Choose the repo and branch, select Next
5. Input App name
6. Create a new environment, input the environment name of leave it as default
7. Select or create a new service role, and click Next
8. Click Save and deploy

Wait for the deployment to be finished. You will be see the URL for the web application.

Open the Web

Open http://<amplify-app-link>/?thingName=xxxxxx.

You will asked to registered an account if you don't have any. In this application, you should input email address as your username.

Once you login, the browser will be navigated the device binding page. Click the Bind button to link the device to your account.

Refresh the page to check if the button's status has changed to Unbind

Local Development

You will ONLY need to run this if you would like to develop locally. If you have already finished step1 Deployment to Amplify Console, skip this part.

In this application, Yarn and node.js are used to build the application. Please install the Yarn and node.js. The easiest way to install nodejs is NVM.

The backend is provisioned via AWS Amplify 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
2. Choose your default editor and AWS profile. Wait for the initialization finished
3. Run amplify push and type Yes when asked to confirm
4. Click Enter button to keep the all the rest default settings
5. Run yarn install to install dependencies
6. Run yarn start to start the web application

Open http://localhost:3000/?thingName=xxxxxxxx to view it in the browser.

If you are the first time to run the web application. You should click the Create account button to create an account.

Nest step

You may now go to Setup Smart Lamp Simulator to proceed the workshop.