More Related Content
Similar to 20200513 Getting started with AWS Amplify (20)
More from Marcia Villalba (16)
20200513 Getting started with AWS Amplify
- 1. © 2020, Amazon Web Services, Inc. or its Affiliates.
Full stack development
with AWS Amplify
Marcia Villalba
@mavi888uy
- 2. © 2020, Amazon Web Services, Inc. or its Affiliates.
About me
AWS Developer Advocate
Coding for more than 15 years
Host of FooBar YouTube Channel
https://youtube.com/foobar_codes
@mavi888uy
- 4. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 5. © 2020, Amazon Web Services, Inc. or its Affiliates.
Amplify – A Set of Open-Source Libraries
- 6. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 7. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 8. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 9. © 2020, Amazon Web Services, Inc. or its Affiliates.
Amplify Framework review: CLI
Code generation
Local mocking and testing
Manage single/multi-environment
Convention over configuration
Native code Types & statements
Android iOS
- 10. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 11. © 2020, Amazon Web Services, Inc. or its Affiliates.
Let’s get building
- 12. © 2020, Amazon Web Services, Inc. or its Affiliates.
Let’s enrich a React web app
- 13. © 2020, Amazon Web Services, Inc. or its Affiliates.
Get the code
https://github.com/mavi888/demo-amplify-base
- 14. © 2020, Amazon Web Services, Inc. or its Affiliates.
Initialise amplify
$ amplify init
- 18. © 2020, Amazon Web Services, Inc. or its Affiliates.
#1 add authentication
- 19. © 2020, Amazon Web Services, Inc. or its Affiliates.
$ amplify add auth & amplify push
AWS Cloud
Clients
AWS Cognito User Pool
Accounts
Multi Factor
Authentication
Signup & Signin
- 20. © 2020, Amazon Web Services, Inc. or its Affiliates.
Hosted UI & Federated Authentication
AWS Cloud
AWS Cognito User Pool
Accounts
Multi Factor
Authentication
Signup & Signin
Clients
- 21. © 2020, Amazon Web Services, Inc. or its Affiliates.
Provision the service
$ amplify add auth
- 25. © 2020, Amazon Web Services, Inc. or its Affiliates.
Provision the service
$ amplify push
- 27. © 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;
- 28. © 2020, Amazon Web Services, Inc. or its Affiliates.
#2 add an API
- 29. © 2020, Amazon Web Services, Inc. or its Affiliates.
/posts /comments /authors
REST API
posts comments authors
GraphQL API
What is GraphQL?
- 30. © 2020, Amazon Web Services, Inc. or its Affiliates.
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!
- 31. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 33. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 34. © 2020, Amazon Web Services, Inc. or its Affiliates.
Provision the API
$ amplify add api
- 38. © 2020, Amazon Web Services, Inc. or its Affiliates.
A basic schema
type Note {
id: ID!
note: String!
}
- 39. © 2020, Amazon Web Services, Inc. or its Affiliates.
Transformers (aka annotations)
type Note
@model @auth(rules: [{allow: owner}]){
id: ID!
note: String!
}
- 40. © 2020, Amazon Web Services, Inc. or its Affiliates.
GraphQL Transform: Mix and match data sources
type Note {
id: ID!
note: String!
}
- 41. © 2020, Amazon Web Services, Inc. or its Affiliates.
GraphQL Transform: Mix and match data sources
type Note
@model {
id: ID!
note: String!
}
Amazon
DynamoDB
AWS AppSync
Mutations
Queries
createNote
readNote
updateNote
deleteNote
list
- 42. © 2020, Amazon Web Services, Inc. or its Affiliates.
GraphQL Transform: Mix and match data sources
type Note
@model
@auth(rules: [{allow: owner}]){
id: ID!
note: String!
}
Amazon
DynamoDB
AWS AppSync
Mutations
Queries
Amazon
Cognito
createNote
readNote
updateNote
deleteNote
list
- 43. © 2020, Amazon Web Services, Inc. or its Affiliates.
Provision the API
$ amplify push
- 47. © 2020, Amazon Web Services, Inc. or its Affiliates.© 2020, Amazon Web Services, Inc. or its Affiliates.
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 } )
}
- 48. © 2020, Amazon Web Services, Inc. or its Affiliates.
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
- 50. © 2020, Amazon Web Services, Inc. or its Affiliates.
#3 add search
capability
- 51. © 2020, Amazon Web Services, Inc. or its Affiliates.
Update GraphQL Transformer
type Note
@model @auth(rules: [{allow: owner}])
@searchable {
id: ID!
note: String!
}
- 52. © 2020, Amazon Web Services, Inc. or its Affiliates.
GraphQL Transform: Mix and match data sources
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
- 53. © 2020, Amazon Web Services, Inc. or its Affiliates.
Provision the service
$ amplify push
- 56. © 2020, Amazon Web Services, Inc. or its Affiliates.© 2020, Amazon Web Services, Inc. or its Affiliates.
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"} ] } );
}
}
}
- 57. © 2020, Amazon Web Services, Inc. or its Affiliates.
@searchable
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
- 58. © 2020, Amazon Web Services, Inc. or its Affiliates.
@searchable
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
ElasticSearch
Datasource
IAM Role
ARN
ES
Domain
ARN
Amazon ElasticSearch
searchNotes
- 60. © 2020, Amazon Web Services, Inc. or its Affiliates.
#4 deploy the app
- 61. © 2020, Amazon Web Services, Inc. or its Affiliates.
Amplify console: Full-stack deployments
$ amplify console
- 65. © 2020, Amazon Web Services, Inc. or its Affiliates.
Let’s try this
https://bit.ly/3fTLQwG
- 66. © 2020, Amazon Web Services, Inc. or its Affiliates.
Get the code
https://github.com/mavi888/demo-amplify-base
- 67. © 2020, Amazon Web Services, Inc. or its Affiliates.
Thanks!
Q&A
Marcia Villalba
@mavi888uy