WhatsApp-clone Real-Time & Offline

Serverless Messaging Mobile & Web Apps

using AWS Amplify & AppSync

Thanh Nguyen VietNam Mobile Day 2019

+84 938203080 HCM, 06 June 2019
vbosstech@gmail.com Ha Noi, 14 June 2019

www.linkedin.com/in/nguyennhatthanh
https://devops.oceansoft.io
1.1. The Mobile & Web Apps Challenges
Challenge &
AWS Mobile

At any Business
Architecture
Time
On In an Offline
Anything Instant Software
Architecture
Platform Anywhere Realtime

Mobility
Anybody DevOps &
Agile SDP
AuthN/Z

Live
Demo

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 2

1.1. To Solve the Challenges - AWS Amplify & AppSync

SECURITY Challenge Challenge &

AWS Mobile
• Cognito: AuthN/Z, User Mngt.
• Amplify CLI: Auth, API, Database
Business
Architecture

RIGHT DATA Challenge

• AppSync: Network Friendly + Realtime Software
Architecture
• GraphQL: declarative data-fetching specs

DevOps &
SCREEN & MOBILITY Challenge Agile SDP

• Framework: React/React-Native, Vue, Angular

• AppSync + PWA built-in Offline capabilities
Live
Demo
http://oceansoft.io/blog/aws/2019/06/03/Modern-Mobile-Web-App-using-AWS-Amplify-AppSync.html
6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 3
2.1. [Business Needs] Customer Service & SmartChat

Marketing Automation Contact Center

Gamification
Agent hand-over
(Talk to Agent)
FB Ads
Adwords

SMS
Marketing

Notification
Notification (Auto-Post)
Email
Marketing AI &
NLU
ChatBot

Retargeting

Personalized Info

After Services
 Behaviors
Basic Enriched  Social
[Customer-Centric] Enrich Data ⬆ User Experience
Profile/Lead Profile/Lead  Personalization

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 5

2.2. SmartChat WhatsApp-clone - Product Features

Security & User Management:

Sign Up, Sign In, Settings 1
1. Sign Up: Email, Google, FB, Linkedin
2. Sign In: Email, Google, FB, Linkedin
3. Profile Settings
4. User Preferences 2 Small-Talk & FAQ
5. Integrate SmartChat & Chatbot4Website
1. Text Message
2. Emoticon Support
Conversation
New Chat, Group Chat 3 3. DnD Question & Answer
4. ElasticSearch a specific Conversation
5. Omni-Channel: Auto-Sync Web/Mobile
1. Chat Listings
2. New Chat
Rich Messaging:
3.
4.
New Group Chat
Group Detail 4 Maps, Images, Audio, Video, Files
5. Push Notification & Email Alerts
1. GEO Location / Maps Sharing
2. Image Sharing, Gif
Business Features 5 3.
4.
Audio Sharing & Speech to Text
Video Sharing
5. Files & Document Sharing
1. Company/Business Profile > Be Seen
2. Quick Replies > Message+ Work-
3. Labels > Stay Organized
4. Admin Dashboard & BI
5. Chatbot for Website

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 6

3. High-Level Architecture & AWS Technology

Omni-Channel Conversation Raw Data

React & S3 Bucket

React-Native
AWS AppSync
Data Sources Machine Learning
Services
listMessages DynamoDB Stream 

slsStreamProcessor 
Make applications smarter, without a PhD in data sciences
Angular createMessage

AWS DynamoDB

Vue Cognito searchMessages AWS Rekognition

 ES Index Operation

 Queries AWS
ElasticSearch
Mutations 

AWS Lambda Data Design: use the best Database for the Job
AWS DynamoDB: a great Primary Data Store that Scales
AWS ElasticSearch Service: Rich Search over Large Data Sets
AWS RDS Service: Store Transactional & Relational Data

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 8

3.1. [SECURITY] Cognito > Sign-Up/In, Access Control

[CUP] Cognito User Pools:

Identity Provider
 Serverless Database of Users for Mobile/Web Twitter
 Username (Email, Phone), Password & MFA OpenID
 Federated Identities: FB, Google, SAML 2.0
CUP Google Facebook SAML 2.0
[FIP] Cognito Federated Identity Pools
1.1. Register 1.2. JWT 2.2. Verify
Provide direct access to AWS Resources / Login JSON Web Tokens Token
from the Client Side
How: 2.1. authenticate to FIP
 Log-in to FIP or remain Anonymous 2.4. temp AWS credentials
 Get temporary AWS Credentials App Federated Identity
 Credentials come with a pre-defined IAM Policy
IAM Policy
2.5. Call
AWS Amplify CLI Toolchain check 2.3. Get Credentials

Use Auth module to easily interact

Wrap App in Authenticator to require sign-in
Uses Customizable Pre-Built UI Components AWS S3 Security Token Service

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 9

 3.2. [RIGHT DATA] AWS AppSync & GraphQL
GraphQL is a Query Language for APIs
declarative & self-documenting style
 Query - read-only fetch
 Mutation - write, followed by a fetch
 Subscription - long-lived connection for receiving data

Define & deploy DynamoDB based on Schema

 @model / @auth / @aws_subscribe / @searchable
1..1
 Queries / Mutations / Subscriptions
1..n DynamoDB operations map to GraphQL
 Mutation.create/update/delete <Type>
User User Conversation DynamoDB PutItem/UpdateItem/DeleteItem
 Query.get/list<Type>
1..1
DynamoDB Scan or Query

1..n
AppSync API & Resolvers - as GraphQL façade
 DynamoDB Resolvers
Conversation Message
 AWS Lambda Resolvers
1..n
 Amazon Elasticsearch Service Resolvers
6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 10
3.2. [Screen & Mobility] AppSync +
PWA built-in Offline

Network Friendly - Batch Requests

 Data fetch when component is mounted & fetchMore
 Cache lookup for quick User Feedback
Instantaneous - using Subscriptions
Responsive from several frameworks available
 Always Available:
 Use Rehydrated Component to rehydrate Cache from
Storage
 Use fetchPolicy to control usage 'cache-and-network’
 AWS AppSync SDK: If No Connection, then Store Action;
On Reconnection, Send Action
Offline Data Rendering
 Provide Optimistic UI Response
 Useful & required when Offline or slow network
 Provide all fields present in the returned selection set
⚡ CI/CD using AWS Amplify Console

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 11

[Reference] FAQ Bot with AWS Lex & Alexa

4 4

Amazon Coginto
5

Alexa Enable Devices

Lex Web Client UI 8 8 Content Designer UI

1
8.1
6 7

Aws CloudFront

8.2

2 3 10 9

AWS ElasticSearch UI Content Designer Content Designer Lex Web UI &

Knowledge-Based Lambda-Function AWS API-Gateway Content Designer Website

 Answer questions on any topic based on data

 Self trained Question & Answer application  Leverages FAQs

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 12

4.1. [MVP/MLP] Deliverables & Estimation (2 MM)

# Features Description Est. (days)

• amplify-category-api / auth / storage / analytics / notifications
1 [CM] Amplify CLI & Amplify Console • amplify-codegen 2 * 3.0
• amplify-frontend-javascript / android / ios
2 Auth Screens • Sign Up, Sign In, Logout, Forgot Password, Confirm Sign Up, Settings 2 * 1.5
• New Chat & New Chat Confirm
3 New Chat & New Chat Group 2 * 2.5
• New Group, New Group Confirm, Group Details
4 Chat List • Chat List 2 * 1.0
• Chat Room: Header, Message Box, Message List
• Chat Room Content: Text, Image, Audio, Video, File
5 Chat Room 2*5
• Chat Room Quick-Replies: Send & Answer Quick-Replies
• GEO-Location GMaps, Emoji, Speech-to-Text, Text-to-Speech
• SmallTalk & FAQ
6 DnD Drag-Drop Question & Answer • Quick Replies 2 * 4.5
• Multimedia: Text, Image, Audio, Video, File

7 Integration & DevOps • Chatbot for Website, Job4U.io (React), Job4U Mobile App (React Native) 2 * 2.5

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 14

4.2. Agile Software Delivery Framework

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 15

M1. Customizable Pre-Built UIs & Offline Data

Pre-Built UI: Sign Up & Sign In Offline Data Rendering

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 16

M2. Chat Room & Multimedia Sharing

AuthN/Z: Sign Up, Sign In, Settings

Chats Listing, New Chat & Chat Group
Chat Room
1. Text, Emoji
2. Location Sharing
3. Image, Audio, Video
4. Text to Speech & Speech to Text
5. Quick Reply
 DnD Question & Answer
1. Small Talk & FAQ
2. Survey
3. Multimedia Sharing
Others: Offline, Read Status
6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 17
M3. DnD Question & Answer

6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 18

References
Smart Chat
 Live Demo: https://smartchat.job4u.io
 https://devops.oceansoft.io/1.Product-Portfolio/5.WhatsApp-like-
SmartChat/index.html
Chatbot for Website
 https://devops.oceansoft.io/1.Product-Portfolio/7.ChatBot-for-Website/index.html
 Live Demo: https://chatbot.oceansoft.io
Amazon AWS re:Invent 2018
 https://www.youtube.com/watch?v=0H5F0PI2-SU
Real Time/Offline & AI/ML Capabilities in Modern Serverless Apps (MOB310)
Open Sources
 https://github.com/vbosstech/WhatsApp-Chat-Server
 https://github.com/vbosstech/WhatsApp-Chat-Client-React
OceanSoft.io
 https://devops.oceansoft.io
 https://job4u.io
6/11/2019 SmartChat - WhatsApp-clone using AWS Amplify & AppSync 19
 Thanh Nguyen

Thank You!
+84 938203080
vbosstech@gmail.com
https://www.linkedin.com/
in/nguyennhatthanh/
6/11/2019 SmartChat WhatsApp-clone Real-Time & Offline Serverless Messaging Mobile & Web Apps using AWS Amplify & AppSync