8 điều cần biết về Aws Amplify - Giới thiệu Aws Amplify

 I. Giới thiệu chung

Như chúng ta đã biết, cloud platform đã trở thành xu thế lập trình phổ biến từ nhiều năm nay việc sử dụng các service như:

– Google Cloud Storage hay Amazon S3 để lưu trữ file

– Google Cloud Datastore/Cloud Bigtable hay Amazon DynamoDB để lưu trữ dữ liệu không cấu trúc(NoSQL)

– Google Cloud Stackdriver Logging hay Amazon CloudWatch Logs đễ ghi log gần như đã trở thành kỹ năng quen thuộc với mỗi developer.

Cùng với sự phổ biến của cloud platform, thì thời gian gần đây kiến trúc serverless trên nền tảng cloud cũng đang là 1 chủ để khá nóng với những lợi ích như:

– Giảm bớt khâu maintain hệ thống, giúp khách hàng tiết kiệm chi phí và giảm sự phụ thuộc vào bên cung cấp dịch vụ outsourcing

– Tính năng tự động scale hệ thống để tương thích với lượng truy cập bất thường từ users

– Dễ dàng tích hợp với các service mới đang ngày càng được mở rộng trên nền tàng cloud

Nhưng kiến trúc này cũng đòi hỏi developer ngoài việc biết sử dụng các dịch vụ cơ bản của cloud như đã nêu ở trên, thì cũng phải có ít nhiều kiến thức về các cloud service cần thiết khác dùng để setting kiến trúc serverless.

Ví dụ như trên môi trường AWS, để setting được kiến trúc serverless, bạn cần biết cách setting lambda, api gateway, cognito, cloudfront và có thể là cả cloudformation nữa.

Một bài toán đặt ra là làm sao để 1 frontend developer vốn chỉ quen với các code Js hay native app(iOS, Android) có thể ngay lập tức xây dựng được 1 ứng dụng serverless theo yêu cầu của khách hàng?

Cũng có thể đặt vấn đề theo 1 cách khác là: Giải pháp nào để xây dựng một ứng dụng nặng về giao diện và cloud service với chi phí thấp nhất và thời gian nhanh nhất?

Ví dụ:

Khách hàng yêu cầu tạo 1 website vẽ biểu đồ điện tim đồ của bệnh nhân với dữ liệu lấy từ AWS Athena. Với cách tiếp cận thông thường, chúng ta cần xây dựng team dev cới các thành viên sau:

– frontend dev chịu tránh nhiện xây dựng giao diện

– backend dev xây dựng API lấy dữ liệu từ AWS Athena và trả về cho tầng frontend

– devops dev cài đặt cấu hình web server, quản lý deploy, release, mornitoring.

– cloud dev tạo/quản lý tài nguyên trên AWS

Sau khi release hệ thống cho khách hàng xong thì vẫn cần giữ lại ít nhất 1 dev để maintain hệ thống. Với dự án to thì cấu trúc team như này có thể vẫn cần thiết, nhưng với dự án nhỏ thì sẽ khá là cồng kềnh và tốn kém.

AWS Amplify có thể sẽ là lời giải cho bài toán này. Một frontend dev dành 1, 2 tuần tìm hiểu về AWS Amplify, đọc thêm một chút về AWS SDK cho Athena là có thể tự mình thực hiện tất cả các role nêu ở trên.

II. Vậy AWS Amplify là gì?

– Là bộ framework và công cụ hỗ trợ tích hợp backend(sử dụng các service cua AWS) với frontend trên các nền tảng:

• iOS
• Android
• Web(React, Angular/Ionic, Vue)
• Đa nền tảng(React native)

– Hỗ trợ tự động cấu hình tài nguyên AWS cần thiết, deploy code, gen code tự động

1. Kiến trúc

Dưới đây là kiến trúc hệ thống cho Web/or đa nền tảng.

2. Thành phần

AWS Amplify cho iOS:

– AWS Amplify CLI:

Tạo/quản lý serverless backend, web hosting. Gen code tự động

– AWS SDK cho iOS

AWS Amplify cho Android:

• AWS Amplify CLI:
  Tạo/quản lý serverless backend, web hosting. Gen code tự động
• AWS SDK cho Android

AWS Amplify cho Web/Đa nền tảng:

• Amplify CLI:
  Tạo/quản lý serverless backend, web hosting. Gen code tự động
• Amplify JavaScript library:
  Thư viện hỗ trợ truy cập AWS resources
• UI component libraries:
  Thư viện UI tương thích với React, React Native, Angular/Ionic, Vue JS
• AWS SDK cho JavaScript

3. Tính năng và tiện ích

Tính năng:

Analytics:

• Cho phép thu thập analytics data từ Amazon Pinpoint, Amazon Kinesis

Interactions:

• Tích hợp Amazon Lex, cung cấp AI-powered chatbots

API:

• Cho phép xây dựng REST API và Graph API:
• REST API được tích hợp từ AWS API Gateway và AWS Lambda:
• Là trái tim của hệ thống
• Thông qua ́REST API có thể tương tác với mọi service của AWS

PubSub:

• Tích hợp AWS IoT và Generic MQTT Over WebSocket Providers, cung cấp tính năng gừi/nhận message đến AWS IOT

Authentication:

• Tích hợp Amazon Cognito, cung cấp API cho việc quản lý users

Push Notifications:

• Tích hợp Amazon Pinpoint, cung cấp tính năng Push notifications

Storage:

• Tích hợp Amazon S3, cung cấp tính năng lưu trữ files
• Tích hợp Amazon DynamoDB, cung cấp tính năng lưu trữ dữ liệu nosql

XR:

• Tích hợp Amazon Sumerian, hỗ trợ thực tế ảo(VR) và thực tế tăng cường(AR)

Tiện ích:

Cache:

• Cung cấp LRU cache cho JavaScript

Hub:

• Local event bus system theo mô hình Publisher-Subscriber, cung cấp tính năng chia sẻ dữ liệu giữa các modules và components trong ứng dụng

I18n:

• Hỗ trợ giao diện đa ngôn ngữ

Logger:

• Hỗ trợ ghi log

Service Workers:

• Hỗ trợ Push APIs, cho phép nghe và nhận message từ Push events.

III. Bắt đầu học AWS Amplify từ đâu?

iOS:

• https://aws-amplify.github.io/docs/ios/start

Android:

• https://aws-amplify.github.io/docs/android/start

Web/Da nen tang:

• https://aws-amplify.github.io/docs/js/start?platform=purejs

IV. Viết demo đơn giản

Giống như trên sơ dồ trên phần kiến truc, với amplify chúng ta có thể chọn 1 trong 3 cách sau để viết ứng dụng:

+ Sử dụng Rest API

+ Sử dụng GraphQL API

+ Hoặc chúng ta có thể sử dụng kế hợp cả Rest API và GraphQL API

Rest API và GrapQL API thì đều hỗ trợ kiến trúc serverless, nhưng có những ưu nhược điểm, chi phí vận hành infra, usecase khác nhau.

Rest API (API Gateway + lambda) thì đã khá quen thuộc với anh em VTI thông qua các bài viết của Mạnh. Nên trong nội dung bài viết này mình sẽ viết demo dùng GraphQL API, anh em hãy xem các steps thực hiện và tự đánh giá xem ưu nhược điểm của việc sử dụng Amplify với GraphQL API như thế nào nhé.

1. Khái quát về demo:

Mình sẽ xây dựng 1 Blog website đơn giản với các chức năng sau:

• Create, View, Update, Delete Blog(Group bài viết)
• Create, View, Update, Delete Post(Bài viết)
• Create, View Comments
• Quản lý Users đơn giản với SignUp, LogIn. Chỉ những những User đã Login với được truy cập hệ thống.

Các steps bên dưới được thực hiện trên môi trường Mac/Unix

2. Cài đặt nodejs, amplify cli, create-react-app:

Install nodejs:

• https://nodejs.org/en/download/package-manager/

Install amplify cli:

• $npm install -g @aws-amplify/cli

Install create-react-app (một plugin hỗ trợ tạo dự án react)

• $npm install -g create-react-app

Check version:

• npm list -g –depth=0

/usr/local/lib
├── @aws-amplify/[email protected]
├── [email protected]
└── [email protected]

3. Vào workspace, tạo project mới:

$cd /Users/apple/source
$create-react-app phu-blogs

4. Vào project vừa tạo, init amplify:

Bạn cần cung cấp Access key ID và Secret access key dùng để truy cập vào tài khoản AWS của bạn. Bạn dùng các key này, và chọn aws region để setting aws profile trong máy local như hướng dẫn sau:
https://docs.aws.amazon.com/en_us/cli/latest/userguide/cli-chap-configure.html

Profile đã được setting sẽ được dùng trong lệnh init amplify.

Init amplify:

$cd /Users/apple/source/phu-blogs
$amplify init

? Enter a name for the project: phu-blogs
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you’re building: javascript
Please tell us about your project
? What javascript framework are you using: react-native
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
Using default provider awscloudformation

For more information on AWS Profiles, see:

https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use: phu-blogs-dev

=>Sau bước này, trong sourcode của project sẽ có thêm thư mục amplify, và trên aws cloudformation console sẽ được thêm 1 stack cha dùng cho việc tạo tài nguyên aws dùng trong project.

5. Add graphql api:

$amplify add api

? Please select from one of the below mentioned services: GraphQL
? Provide API name: phuGraphqlApi
? Choose an authorization type for the API: Amazon Cognito User Pool
Using service: Cognito, provided by: awscloudformation

The current configured provider is Amazon Cognito.

Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in when using your Cognito User Pool? Username
What attributes are required for signing up? Email
Successfully added auth resource
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
? Do you want to edit the schema now? No

Sau bước này, schema với nội dung sau được sinh ra:

amplify/backend/api/phuGraphqlApi/schema.graphql

type Blog @model {
id: ID!
name: String!
posts: [Post] @connection(name: “BlogPosts”)
}
type Post @model {
id: ID!
title: String!
blog: Blog @connection(name: “BlogPosts”)
comments: [Comment] @connection(name: “PostComments”)
}
type Comment @model {
id: ID!
content: String
post: Post @connection(name: “PostComments”)
}

Chúng ta sẽ sửa schema trên 1 chút như sau

thêm content Post, để chứa nội dung bài viết, thêm owner vào Comment để biết ai là người tạo comment đó

thêm @auth(rules: [{allow: owner}]) vào Comment để giới hạn chỉ cho phép sửa, xoá comment của chính mình

type Blog @model {
id: ID!
name: String!
posts: [Post] @connection(name: “BlogPosts”)
}
type Post @model {
id: ID!
title: String!
content: String
blog: Blog @connection(name: “BlogPosts”)
comments: [Comment] @connection(name: “PostComments”)
}
type Comment @model @auth(rules: [{allow: owner}]) {
id: ID!
content: String
owner: String
post: Post @connection(name: “PostComments”)
}

Check lại trạng thái local của amplify

$amplify status

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| ——– | ————— | ——— | —————– |
| Auth | cognito335cc9a5 | Create | awscloudformation |
| Api | phuGraphqlApi | Create | awscloudformation |

=>Trạng thái như trên cho biết 1 Auth và 1 Api đã được thêm mới ở local nhưng chưa đẩy lên aws.
Auth ở đây là cognito vòn Api là GraphQlApi (Aws AppSync)

Tiếp theo chúng ta sẽ push những config này lên aws:

$amplify push

=>Sau bước này, check trên AWS console chúng ta sẽ thấy ở cloudformation có các stacks con mới được sinh ra, các stacks dùng để tạo ra 1 api ở AWS AppSynce, 1 Coginto User Pool, 3 Tables (Blog, Post, Comment) ở DynamoDB, và các tài nguyên liên quan khác.

Ở sourcecode, phần code tương ứng để truy cập vào api trên cũng được sinh ra ở thư mục ls src/graphql/

6. Viết code frontend:

Cài các thư viện frontend:

npm install –save aws-amplify
npm install –save aws-amplify-react
npm install –save bootstrap
npm install –save react-bootstrap
npm install –save react-bootstrap-table-next
npm install –save react-ckeditor-component
npm install –save react-redux
npm install –save redux
npm install –save redux-form
npm install –save react-render-html
npm install –save react-router-dom

file src/index.js chúng ta sẽ setting router

file src/App.js chúng ta sẽ có 1 form để tạo Blog mới, và 1 table để list các Blog đã có trong DB

file src/blog.js chúng ta sẽ có 1 form + editor để tạo Post mới, và 1 table để list các Post đã có theo từng Blog

file src/post.js chúng ta show nội dung Post, có form để add comment, và 1 table để list các comments đã có cho Post này.

file src/App.css định dạng style cho toàn bộ page

file src/notfound.js hiện thị trong trường hợp route được gọi không tồn tại

7. Run code ở local:

$npm start

http://localhost:3000/

– Create account, sau khi đăng ký, vào email của bạn để lại verification code:

– Xác thực với verification code:

– Login:

– Tại màn hình Home tạo Blog mới: ‘AI’

– View ‘AI’ Blog:

– Add Post mới cho Blog AI: ‘What Is Amazon SageMaker?’

– View Post vừa tạo, add comment

8. Hosting:

Add hosting(ở local):

$amplify hosting add

? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name phu-blogs-20190407215754-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

Đẩy hosting lên cloud:

$amplify push

Publish code lên hosting trên cloud:

$amplify publish