20200513 Getting started with AWS Amplify

© 2020, Amazon Web Services, Inc. or its Affiliates.
Full stack development
with AWS Amplify
Marcia Villalba
@mavi888uy

About me
AWS Developer Advocate
Coding for more than 15 years
Host of FooBar YouTube Channel
https://youtube.com/foobar_codes
@mavi888uy

AWS Amplify

AWS Amplify overview
Developer tools for building, testing,
deploying, and hosting the entire app –
frontend and backend
The Amplify Framework, an open-
source client framework, includes
libraries, a CLI toolchain, and UI
components
The CLI toolchain enables easy
integration with AWS services such as
Amazon Cognito, AWS AppSync, and
Amazon Pinpoint

Amplify – A Set of Open-Source Libraries

Amplify Framework review
• Open source
• Among the top 5 fastest growing projects on
GitHub
• Opinionated
• Best practices built-in
• Infrastructure as code
• Categories-based high-level abstractions

Amplify Framework
Analytics
Track user sessions, custom
user attributes and in-app
metrics
API
HTTP requests using REST
and GraphQL with support
for real-time data
Auth
AuthN + AuthZ library with
prebuilt UI components for
your app
DataStore
On-device persistent storage
that automatically
synchronizes data between
you apps and the cloud
Interactions
Conversational bots
powered by deep learning
technologies
PubSub
Connect your app to
message-oriented
middleware on the cloud
Notifications
Push notifications with
campaign analytics and
targeting
XR
Work with augmented
reality and virtual reality
content in your apps
Predictions
Add MI/ML capabilities to
your app powered by cloud
services
Storage
Manage user content securely
in public, protected, and
private storage

Amplify Framework review: CLI
Code generation
Local mocking and testing
Manage single/multi-environment
Convention over configuration
Native code Types & statements
Android iOS

Amplify Framework recap: Libraries
JS framework-specific components
JavaScript (JS) client for web and
React Native
Amplify native for iOS and Android
Interact with services via client-side

Let’s get building

Let’s enrich a React web app

Get the code
https://github.com/mavi888/demo-amplify-base

Initialise amplify
$ amplify init

#1 add authentication

$ amplify add auth & amplify push
AWS Cloud
Clients
AWS Cognito User Pool
Accounts
Multi Factor
Authentication
Signup & Signin

Hosted UI & Federated Authentication
AWS Cloud
AWS Cognito User Pool
Accounts
Multi Factor
Authentication
Signup & Signin
Clients

Provision the service
$ amplify add auth

Provision the service
$ amplify push

© 2020, Amazon Web Services, Inc. or its Affiliates.© 2020, Amazon Web Services, Inc. or its Affiliates.
import …
import Amplify from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
…
class App extends Component {
render() {
return (
<AmplifyAuthenticator>
<div className="row">
<div className="col m-3">
<Header/>
</div>
</div>
</AmplifyAuthenticator>
);
}
}
export default App;

#2 add an API

/posts /comments /authors
REST API
posts comments authors
GraphQL API
What is GraphQL?

Queries MutationsTypes
Subscriptions
GraphQL schema and operations
type User {
id: ID!
username: String!
firstName: String
lastName: String
daysActive: Int
}
A query language for APIs . . . and a runtime!

A query language for APIs . . .
Queries
query GetPost {
getPost(id: ”1”) {
id
title
}
}
mutation CreatePost {
createPost(title: “Summit”) {
id
title
}
}
subscription OnCreatePost {
onCreatePost {
id
title
}
}
Mutations Subscriptions

AppSync, a runtime to execute the query
query GetPost {
getPosts(id: ”1”) {
id
title
comments {
content
}
author {
name
}
}
}
query GetPost {
getPosts(id: ”1”) {
id
title
comments {
content
}
author {
name
}
}
}
Amazon
EC2
{
"data" : {
"posts" : [
{
"id" : 1,
"title" : "Introduction to GraphQL",
"comments" : [
{
"content" : "I want GraphQL for my next App!"
}
],
"author" : {
"name" : "Sébastien Stormacq"
}
}
]
}
}
Amazon
DynamoDB
AWS
Lambda

Provision the API
$ amplify add api

A basic schema
type Note {
id: ID!
note: String!
}

Transformers (aka annotations)
type Note
@model @auth(rules: [{allow: owner}]){
id: ID!
note: String!
}

GraphQL Transform: Mix and match data sources
type Note {
id: ID!
note: String!
}

type Note
@model {
id: ID!
note: String!
}
Amazon
DynamoDB
AWS AppSync
Mutations
Queries
createNote
readNote
updateNote
deleteNote
list

type Note
@model
@auth(rules: [{allow: owner}]){
id: ID!
note: String!
}
Amazon
DynamoDB
AWS AppSync
Mutations
Queries
Amazon
Cognito
createNote
readNote
updateNote
deleteNote
list

Provision the API
$ amplify push

addNote = async (note) => {
var result = await
API.graphql(graphqlOperation(createNote, {input:note}));
this.state.notes.push(result.data.createNote)
this.setState( { notes: this.state.notes } )
}

GraphQL API
AWS Cloud
AWS AppSync Amazon DynamoDB
Table
Schemas Resolvers Data Sources
queries
mutations
getNote Note Table
Datasource
IAM Role
ARN
Note Role
ARN
type Query {
getNote(...): Note
listNotes(...): Note
}
type Mutation {
createNote(...): Note
updateNote(...): Note
deleteNote(...): Note
}
type Subscription {
onCreateNote (...): Note
onUpdateNote (...): Note
onDeleteNotet(...): Note
}
type Note {
id: ID!
value: String
}
Clients
listNotes
createNote
deleteNote
updateNote

#3 add search
capability

Update GraphQL Transformer
type Note
@model @auth(rules: [{allow: owner}])
@searchable {
id: ID!
note: String!
}

type Note
@model
@auth(rules: [{allow: owner}])
@searchable{
id: ID!
note: String!
}
Amazon
DynamoDB
AWS AppSync
Mutations
Queries
Amazon
Cognito
searchPosts
Amazon Elasticsearch
Service
Lambda
function
createNote
readNote
updateNote
deleteNote
list

searchNote = async (note) => {
var result;
// when no search filter is passed, revert back to full list
if (note.note === "") {
result = await API.graphql(graphqlOperation(listNotes));
this.setState( { notes: result.data.listNotes.items } )
} else {
// search
const filter = {
note: {
match: note
}
}
result = await API.graphql(graphqlOperation(searchNotes, {filter : filter}));
if (result.data.searchNotes.items.length > 0) {
this.setState( { notes : result.data.searchNotes.items } );
} else {
// no search result, print help
this.setState( { notes : [ {id: "-1", note: "No Match: Clear the search to go
back to your Notes"} ] } );
}
}
}

@searchable
AWS Cloud
Table
queries
mutations
getNote Note Table
Datasource
IAM Role
ARN
Note Role
ARN
type Query {
getNote(...): Note
}
type Mutation {
}
type Subscription {
}
type Note {
id: ID!
value: String
}
Clients
listNotes
createNote
deleteNote
updateNote

@searchable
AWS Cloud
Table
queries
mutations
getNote
Note Table
Datasource
IAM Role
ARN
Note Role
ARN
type Query {
getNote(...): Note
}
type Mutation {
}
type Subscription {
}
type Note {
id: ID!
value: String
}
Clients
listNotes
createNote
deleteNote
updateNote
ElasticSearch
Datasource
IAM Role
ARN
ES
Domain
ARN
Amazon ElasticSearch
searchNotes

#4 deploy the app

Amplify console: Full-stack deployments
$ amplify console

Let’s try this
https://bit.ly/3fTLQwG

Thanks!
Q&A
Marcia Villalba
@mavi888uy

20200513 Getting started with AWS Amplify

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 20200513 Getting started with AWS Amplify

Similar to 20200513 Getting started with AWS Amplify (20)

More from Marcia Villalba

More from Marcia Villalba (16)

Recently uploaded

Recently uploaded (20)

20200513 Getting started with AWS Amplify