Hands-On Lab: Building a Serverless Real-Time Chat Application with AWS AppSync In this workshop, we'll build a new Progressive Web App (PWA) starter application. Built with AWS AppSync, it showcases how to create a real-time chat application. In this blog post, we present an overview of the application, and dive into AWS AppSync and the front-end implementation. Level: Intermediate Speaker: Brice Pelle - Enterprise Support Lead, AWS

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
Hands-On Lab: Building a Serverless Real-Time Chat Application
with AWS AppSync
Brice Pellé (@BricePelle)
Enterprise Support Lead, AWS

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pre-requisites
* Install NodeJS with NPM (install v8 or latest)
* Install git
* Install lerna: `npm install -g lerna`
* Install onlybakam/amplify-cli
* `git clone https://github.com/onlybakam/amplify-cli.git`
* `cd amplify-cli; npm run setup-dev`

3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
What are we building?
• Progressive Web Application (PWA) in React
• AWS AppSync to implement offline and real-time capabilities in a chat app
• Users can have conversations with other users and exchange messages
• GraphQL Mutations, Queries and Subscriptions using AWS AppSync.

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Chat App With GraphQL
•
PWA: GraphQL Mutations (src/app/graphql/mutations)
– Create users
– Create conversations and link them to users
– Create messages in a conversations
• GraphQL Queries (src/app/graphql/queries)
– Get all users
– Get all messages in a conversation
– Get all user related conversations
• GraphQL Subscriptions (src/app/graphql/subscriptions)
– Real time updates for new messages in conversations
• Authentication
– The app uses Cognito User Pools to onboard users and authenticate them into the app
• Authorization
– The app uses JWT Tokens from Cognito User Pools as the authorization mechanism

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Building a serverless messaging app in React
User
User
Conversation
Messages
1..1
1..n
1..1
1..n
1..n
Relations between
NoSQL Tables
Conversation

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Messaging application architecture overview
AppSync Data Sources
Raw Data

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Clone the repo (all the code)
https://github.com/onlybakam/quickchat

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Follow instructions
• https://github.com/onlybakam/quickchat
• Follow readme

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
Thank you!