Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.P U B L I C S E C TO R
S U M M I T
Take Mobile and Web Apps to the Next
Level with AWS AppSync and AWS Amplify
Xiang Shen
Specialist Solutions Architect
Amazon Web Services
2 9 5 4 6 1
Chris Richardson
Deputy CIO - IT Development, Mobility, Smart Cities
Arizona State University

S U M M I T
What is needed to build an app?
Data management
• Content (images/videos)
• Lists, records, text (strings, integers, etc.)
Privacy controls
• User registration and sign-In
• Federation (social channels)
• Multi-factor authentication (MFA)
Tracking and engagement
• Session metrics
• Analytics on custom attributes
• Targeted messaging
Workflows
• API access
UX controls
• Multi-language support
• Multi-form factor
Platforms
• Mobile web
• Native
• Hybrid

S U M M I T
How do we want apps to operate?
Information must be real-time
- Banking alerts
- News stories
- Multi-player games
- Chat applications
- Shared whiteboards
- AR/VR experiences
- Document collaboration
Interaction must work online or offline
- Financial transactions
- News articles
- Games
- Messaging (pending chat)
- Document collaboration

S U M M I T
How do people interact with data?
Request
Specific question
Filter answer to question
Add/update my data
Notify me when data changes
Query()
Query(name:"Nadia")
Select "name", "address"
UpdateInfo(address:"1234")
Subscribe newPost(author:"Shaggy")

S U M M I T
What Developers Ask ?
Tools for building,
testing, deploying,
and hosting the
entire app – frontend
and backend
Secure and scalable
apps
Offline data,
network-optimized
sync, and real-time
updates
Centralized config,
cloud provisioning,
and team workflow
Code generation to
eliminate boilerplate
Frontend support for
multiple platforms
and frameworks

S U M M I T
AWS Amplify - An Integrated Developer
Experience
Developer Tools
Amplify Framework, an open source client
framework, includes libraries,
Cloud Services

S U M M I T

S U M M I T
Amplify Framework: Library, UI Components, &
CLI
Libraries focused on
frontend developers
Support for native apps
with iOS and Android
SDKs
Support for JavaScript
incl. React, React
Native, Angular, Ionic,
and Vue
Category-based
opinionated
Implementations: Auth,
Analytics, API, Storage,
Interactions, XR,
PubSub
UI components for
React, React Native,
Angular, and Ionic
Support for drop-in
Auth, photo pickers, and
chatbots
CLI toolchain for rapidly
integrating AWS
services to projects
Iterative code & type
generation for GraphQL
APIs throughout the
development cycle

S U M M I T
Amplify Framework: UI Components
<amplify-photo-picker framework="Ionic”
(picked)="onImagePicked($event)"
(loaded)="onImageLoaded($event)">
</amplify-photo-picker>
<amplify-s3-album framework="Ionic"
path="pics”(selected)="onAlbumImageSelected($event)">
</amplify-s3-album>
onAlbumImageSelected( event ) {
window.open( event, '_blank' );
}
Photo Picker
S3 Album

S U M M I T
Amplify Framework: CLI
$ amplify init
$ amplify add <category>
$ amplify push
Effortlessly configure backends
$ amplify add hosting
$ amplify publish
Hosting for static assets and websites
$ amplify codegen add
$ amplify codegen statements
Easily create APIs & client code
Category support for authentication, analytics,
functions, REST/GraphQL APIs, storage, notifications,
interactions
Distribute content to end users with low latency and
high data transfer speeds via a secure, durable, and
scalable object storage infrastructure
Define your API using the GraphQL Schema Definition
Language (SDL). The toolchain will expand and
transform a full CloudFormation template that
implements your data model.

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify CLI: Multi-environments and team
workflow
- Git-style interaction & project switching
- Share backends between team members or clone for isolated development
User Users
AWS AppSync AWS AppSync AWS AppSync
Amazon DynamoDB AWS Lambda Amazon DynamoDB AWS Lambda Amazon DynamoDB AWS Lambda

S U M M I T
Breadth of Cloud Services for Mobile and Web
Apps
Auth Analytics
Core
Experiences
Storage Interactions AR & VR PubSub
API
Amazon Cognito AWS AppSync Amazon API Gateway Amazon Pinpoint Amazon Kinesis
Amazon Simple Storage
Service (S3)
Amazon Lex Amazon Sumerian AWS IoT Core

S U M M I T
Example: Adding Auth with Amplify CLI and
Amazon Cognito
• Customize sign-in/registration flow
• Customize email and SMS messages for Multi-Factor Authentication
• Customize attributes for your users, e.g. name, email
• Enable 3rd party authentication providers, e.g. Facebook, Twitter,
Google and Amazon

S U M M I T
Amplify CLI and Amazon Cognito : $amplify add
auth
import { Auth } from 'aws-amplify’;
Auth.signUp({
username,
password,
attributes: {
email, // optional
phone_number, // optional
},
validationData: [] //optional
})
.then(data => console.log(data))
.catch(err => console.log(err));
Auth.confirmSignUp(username, code, {
forceAliasCreation: true
}).then(data => console.log(data))
.catch(err => console.log(err));
Auth.resendSignUp(username).then(() => {
console.log('code resent successfully');
}).catch(e => {
console.log(e);
});
Step 1 – Create a new user Step 2 – Confirm with code

S U M M I T
AWS Amplify Console
Globally available
Your app is served via AWS’s
reliable content delivery
network with 169 points of
presence globally.
Easy custom domain setup
Set up custom domains managed in
Amazon Route 53 with a single click
plus get a free HTTPS certificate.
Simplified Continuous
Workflow
Connect your repository to 'git
push' changes to your
frontend and backend in a
single workflow.
Feature Branch Deployments
Work on new features without impacting
production.
Create branch deployments linked to
each feature branch.
Atomic Deployments
All deployments either rollout
successfully or fail without requiring
maintenance windows.
Password Protection
Share yet-to-be released
features with internal
stakeholders by setting a
username and password

S U M M I T
Managed Serverless
GraphQL service
Connect to data sources
in your account
Add data sync, real-time
and offline capabilities
GraphQL façade for
any AWS service
Conflict detection
and resolution in
the cloud
Enterprise security
features (IAM,
Cognito, API keys)
AWS AppSync: Realtime and offline data with
GraphQL

S U M M I T
What is GraphQL?
Open, declarative data-fetching specification
!= Graph database
Use NoSQL, Relational, HTTP, etc.
Traditional data-fetching GraphQL
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsWithX
/commentsOnPost

S U M M I T
How does GraphQL work?
{
"id": "1",
"name": "Get Milk",
"priority": "1"
},
{
"id": "2",
"name": "Go to gym",
"priority": "5"
},…
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
query {
getTodos {
id
name
priority
}
}
Model data with
application schema
Client requests
what it needs
Only that data is
returned

S U M M I T
How does AWS AppSync work?

S U M M I T
Why GraphQL with AppSync?
Data
Aggregation
Bandwidth
Optimization
Rapid
Prototyping
Easily evolve
APIs
Client-defined
Data Selection

S U M M I T
AWS AppSync Data Sources

S U M M I T
AWS AppSync Resolvers

S U M M I T
Amplify CLI and AppSync : $amplify add api
type Post
@model
@auth(
rules: [
{allow: owner, ownerField: "owner",
mutations: [create, update, delete],
queries: [get, list]},
])
{
id: ID!
title: String!
content: String!
rating: Int
owner: String
}
appSyncClient?.fetch(query: ListPostsQuery()) {
(result, error) in
if error != nil {
print(error?.localizedDescription ?? "")
return
}
result?.data?.listTodos?.items!.forEach {
print(($0?.title)! + " " + ($0?.content)!)
}
}
Step 1 - Edit & push schema Step 2 – Write app code
GraphQL backend and client types auto-generated

S U M M I T
Images and rich content
type S3Object {
bucket: String!
key: String!
region: String!
}
input S3ObjectInput {
bucket: String!
key: String!
region: String!
localUri: String!
}
type Profile {
name: String!
profilePic: S3Object!
}
type Mutation {
updatePhoto(name: String!,
profilePicInput: S3ObjectInput!): Profile
}
https://github.com/aws-samples/aws-amplify-graphql
AWS AppSync
Amazon Simple Storage
Service (S3)
Amazon DynamoDB

S U M M I T
GraphQL subscriptions
Near real-time updates of data
Event-based mode, triggered by Mutations
- Scalable model, designed as a platform for common use cases
Can be used with ANY data source in AWS AppSync
- AWS Lambda, Amazon DynamoDB, Amazon Elasticsearch Service
- “None” —> GraphQL PubSub engine
mutation addPost( id:123
title:"New post!"
author:"Nadia"){
id
title
author
}
data: [{
id:123,
title:"New Post!"
author:"Nadia"
}]
AWS AppSync

S U M M I T
Mix/match data sources on GraphQL types
type Query {
listPosts: [Post]
searchPosts: [Post]
}
type Mutation {
addPost: Post
}
type Post {
id: ID!
content: String
description: String
ups: Int
downs: Int
}
addPost
listPosts
searchPosts
Amazon DynamoDB
Amazon
Elasticsearch Service
AWS AppSync

S U M M I T
Batch operations
Single or multiple tables
Custom error handling
Writes, reads, and deletes
Order is preserved
Web + mobile + IoT use cases
query {
getMultipleTablesResults{
id
name
}
}
AWS AppSync

S U M M I T
Offline mutations
Jane
Version : 2 Updated document
Jane
Version : 1 New document
Time
John
John
Jane goes offline
Jane comes back online
John
Jane

S U M M I T
Conflict resolution and synchronization
Conflict resolution in the cloud
1. Server wins
2. Silent reject
3. Custom logic (AWS Lambda)
- Optimistic version check
- Extend with your own checks
Optional
• Client callback for Conflict Resolution is still available as a fallback
"condition" : {
"expression" : "someExpression"
"conditionalCheckFailedHandler" : {
"strategy" : "Custom",
"lambdaArn" : "arn:..."
}
}

S U M M I T
Test, Debug, Log
GraphQL request logs, metrics, and auditing
- Verbose or errors
- Type & field
- Overall execution summary
“Stream” logs to query editor
“Unit test” with mock context
- Arguments, identity, parent
- Single or list results

S U M M I T
ASU Mobile App powered by AppSync
Mobile App Users Data Layer Requirements
70k Users on iOS & Android Scalable for up to 200k users
500k Monthly Sessions 24/7 Up-time & handle surges
20+ Backend Systems Integrated Secure connection end-to-end
5 Personas & Growing Fetch different pieces of data from same
datastore
Real-time Engagement in Classroom & Stadium Establish socket connect from app to backend

S U M M I T
Why we love AppSync
Reduced 50+ resources on API Gateway to efficient GraphQL queries
Use IAM identity tokens to retrieve only student’s own data (FERPA)
Fine-tune control over what data we are passing to app
Use same datasource for multiple personas without rewriting queries
Leverage DynamoDB, Elasticsearch, RDS, PeopleSoft Oracle/SQL DBs
Zero lines of code, automatic offline support (Students love)
Hundreds of University News/Events automatically paginated (Devs love)

S U M M I T
Friends Interactions
• Purpose: Student engagement is our primary goal with
the mobile app as studies have shown the more a student is
engaged with other students the higher chance of academic
success
• Feature: We’ve created a social world within the mobile
app that enables students to be friends with each other,
share content, and check-in to events
• Technical Challenge: 1 friend -> Needs to fetch updates
from 100s of friends’ interactions in the app
• AppSync Solution: We can simply subscribe each friend
with 100s of friends and as soon as they add any new
content or check-in to an event, the friend will see it and get
the update

S U M M I T
Chat
• Purpose: Students traditionally were forced to share their
personal social media accounts when they wanted to
collaborate with other students -> Now, through our app,
they can easily chat with other students in a safe and
secure environment
• Feature: Single Chat & Group Chat feature to allow
students to chat with each other
• Technical Challenge: Creating real-time socket
connections between 1:1 and 1:many users creates a very
difficult and complex backend problem
• AppSync Solution: Get real-time socket connections out-
of-the-box and can instantly get messages delivered
without delay and scale as our users increase

S U M M I T
Classroom Surveys
• Purpose: Currently students are forced to buy
expensive clickers to mark attendance by
giving quizzes -> We want our mobile app to
replace them on students’ existing devices
• Feature: Professor can send out a survey to
all students in the classroom and collect
responses in real-time
• Technical Challenge: Collecting responses
from ~100 devices in short amount of time
• AppSync Solution: All students devices
instantly send data to dashboard via
subscriptions and see the results come in
real-time

S U M M I T
Athletics
• Purpose: Fan engagement in the stadium using
technology is important to increase fan
attendance
• Lights Game: Using AppSync, we are able to
control everyone’s screen in real-time and flash
ASU colors in unison throughout the stadium
• Trivia Game: We are also able to push a trivia
game to everyone in the stadium and show the
results in real-time on the video board
• Guess the Car Game: The traditional game of
three cars racing on the video board and guessing
which will win has no real incentive. Through the
Mobile App, we can instantly count responses,
display how many guessed correctly, and send
them a push message with a coupon if correct

S U M M I T
Related breakouts
301597 Accelerating App Development with AWS Amplify
Will St Clair
309630 Creating a Modern Digital Engagement Platform for Mobile Students at Arizona
State University
Jason Hoog & Chris Richardson
295465 Mission Mobility - Creating Mobile Apps at the Intersection of Cloud and
Mobile Computing
John Ditomasso & Chris Gorman

S U M M I T
Thank you!
S U M M I T
Chris Richardson
Xiang Shen

S U M M I T
S U M M I T

Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify

Similar to Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify (20)

More from Amazon Web Services

More from Amazon Web Services (20)

Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify