AWS Mobile Week at the San Francisco Loft Hands-On Lab: Building a Voice Enabled Modern App with GraphQL, AWS AppSync, and Amazon Alexa Voice interaction powered by Amazon Alexa is an exciting capability to add to your web and mobile apps to drive user engagement. In this hands-on session, you will use Alexa and AWS AppSync to build a NodeJS-based voice-control system to run commands on your computer from anywhere. Actions like “compile this project”, “read a file”, and “launch an application” are a voice command away! You will also build a React app to display commands in real-time as well a history of commands that were invoked. You will create a single GraphQL endpoint hosted in AWS AppSync that supports queries, mutations, and subscriptions for both the Alexa skill as well as the React app. At the conclusion of this session, you will have built a set of apps that use GraphQL, AWS AppSync, and Alexa and you can adapt the techniques you’ve learned into your own apps. Level: Intermediate Speaker: Rohan Deshpande - Sr. Software Developer Engineer, AWS Mobile Applications

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
Build a Voice Controlled Modern App with GraphQL, AWS
AppSync, and Amazon Alexa
Rohan Deshpande (@appwiz)
Principal Engineer, Amazon Web Services

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building?

3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building: GraphQL API
• Hosted in AWS AppSync
• API key authorization
• Amazon DynamoDB stores history
• Subscribe to commands

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building: React web app
• Runs in browser
• Listens for commands using Subscriptions
• Displays command history using Queries

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building: NodeJS app
• Runs on desktop
• Listens for commands using Subscriptions
• Executes recognized commands

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building: Alexa skill
• Built with Alexa Skill Kit
• Runs in AWS Lambda
• Interprets commands
• Tracks commands using Mutations

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Architecture

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Why GraphQL?
• Same data source
• Single endpoint
• Different data fetching requirements
• Listen for actions

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Follow at
http://bit.ly/voicecontrolapp

10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
#1: Build the GraphQL backend

11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
#2: Add the React web app

12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
#3: Add the NodeJS app

13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
#4: Add the Alexa skill

14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Go build with AWS AppSync, GraphQL, and Alexa!

15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
aws.amazon.com/appsync
https://aws-amplify.github.io/
https://developer.amazon.com/alexa
follow me on twitter
@appwiz
Thank you!