Rapid App Development with AWS Amplify

1. Rapid App DevelopmentWith AWS Amplify

2. Hi, I’m Riza!

3. Agenda
• Modern Web App
• About AWS Amplify
• Getting Started with AWS Amplify
• Demo

4. Modern Application

5. DB Backend Frontend

6. DB Backend Frontend
PostgreSQL
MariaDB
MongoDB
Redis
PHP
Node.js
Go
.NET
React
Vue
Ionic
Android/iOS

7. DB Frontend
RDS
DynamoDB
Elasticache
Aurora
EC2
Beanstalk
Lambda
API Gateway
S3
Cloudfront
AppSync
Backend

8. Modern Development
Photo by pascal claivaz from Pexels

9. DB Backend Frontend

10. ServicesDeployment
DB FrontendBackend

11. Services
SNS
SES
Cognito
Websocket
Deployment
ECS
EKS
CloudFormation
CodePipeline
DB FrontendBackend

12. Registration/Login

13. Registration/Login
Frontend
Backend
DB
Email service

14. AWS Amplify

15. AWS Amplify is a development platform for
building secure, scalable mobile and web
application.

16. Continuous Integration
Continuous Delivery
Hosting
Functions
Authentication
Real-time datastore
Serverless API
Analytics
Push Notification
PubSub
Cognito
AppSync
Lambda
API Gateway
SES
S3
DynamoDB
RDS

17. Getting Startedwith AWS Amplify

18. $ npm install -g @aws-amplify/cli
$ amplify configure
Specify the AWS Region
? region: # Your preferred region
Specify the username of the new IAM user:
? user name: # User name for Amplify IAM user
Complete the user creation using the AWS console
Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEY
Successfully set up the new user.

19. $ cd awesome-project
$ amplify init
Enter a name for the project (react-amplified)
Enter a name for the environment (dev)
Choose your default editor
Choose the type of app that you're building (javascript)
What JavaScript framework are you using (react)
Source directory path (src)
Distribution directory path (build)
Build command (npm build)
Start command (npm start)
Do you want to use an AWS profile

20. $ amplify help
| Category |
| ------------- |
| analytics |
| api |
| auth |
| function |
| hosting |
| interactions |
| notifications |
| predictions |
| storage |
| xr |

21. Analytics
• Collect analysis data for your app
• Build-in support for AWS Kinesis & Amazon Pinpoint
$ amplify add analytics

22. Application Programming Interface
• REST and GraphQL endpoints
• Supports AWS API Gateway and AWS AppSync
$ amplify add api

23. Application Programming Interface
• Authentication module
• Supports AWS Cognito
$ amplify add auth

24. Interactions
• Enables AI-powered chatbots in your application
• Supports of Amazon Lex
$ amplify add interactions

25. Predictions
• AI and Machine Learning
• Supports of AWS Rekog, Polly, Textract, etc.
$ amplify add predictions

26. PubSub
• Cloud-based message-oriented middleware
• Supports of AWS IoT and generic MQTT protocol
$ amplify add pubsub

27. Push Notification
• Integrate with push notification features
• Supports of Amazon Pinpoint
$ amplify add notifications

28. Extended Reality
• Adds AR and VR experience to your application
• Build-in support for Amazon Sumeria
$ amplify add xr

29. Let’s Build an AppWithin Less Than 15 Minutes

30. Amplify Meetup
Find nearby events and build local
communities. Meet new people, learn new
things, find support, get out of your comfort
zones, and pursue your passions, together.
It’s real-time, serverless, mobile-first and
using NoSQL database. Build with AWS
Amplify and React.

31. The Mockup

33. Create New Project

35. Initialize Amplify

37. Deployment

39. Mockup to React

41. Auth Module

43. API

45. Display Data

47. To ConcludeAWS Amplify

48. Conclusion
• AWS Amplify is a development platform to create
modern app faster
• Combination of CLI tools, framework, dev tools and
services
• Abstraction layer on top of AWS Services. Everything
you need to build modern App

49. Thanks!
github.com/rizafahmi
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hacktiv8.com