Amplify trong game là gì

AWS Amplify là một thư viện nguồn mở cho phép các nhà phát triển, và trong trường hợp của chúng ta là các nhà phát triển cho nền tảng di động, thêm một loạt các chức năng có ích cho các ứng dụng bao gồm phân tích, thông báo đẩy, lưu trữ và xác thực.

Amplify không chỉ hoạt động với React Native, mà còn với Vue, Angular, Ionic, React cho web và bất kỳ framework JavaScript nào. Trong bài hướng dẫn này, chúng tôi sẽ minh hoạ một số tính năng cốt lõi của nó trong một ứng dụng React Native.

Điều tuyệt vời về thư viện này là nó đóng gói tất cả những thiết lập và cấu hình phức tạp cho các tính năng vào một mô-đun dễ sử dụng mà chúng ta có thể thêm vào dự án bằng cách sử dụng NPM.

Chúng ta sẽ tìm hiểu AWS Amplify trong ba phần: xác thực, lưu trữ và phân tích.

Cài đặt và thiết lập React Native

Nếu bạn muốn theo dõi, hãy tạo một dự án React Native bằng cách sử dụng Expo [Tạo Ứng dụng React Native] hoặc React Native CLI:

react-native init RNAmplify

or

create-react-native-app RNAmplify

Tiếp theo, hãy tiến hành cài đặt thư việnaws-amplifybằng cách sử dụng yarn hoặc npm:

yarn add aws-amplify

Nếu bạn đang sử dụng Expo, bạn có thể bỏ qua bước tiếp theo [liên kết] vì Expo đã đi kèm các phụ thuộc cho việc hỗ trợ Amazon Cognito.

Nếu bạn không sử dụng Expo, chúng ta cần liên kết thư viện Cognito [Amazon Cognito xử lý xác thực] đã được cài đặt khi chúng ta thêm aws-amplify:

react-native link amazon-cognito-identity-js

Thiết lập AWS

Bây giờ thì dự án React Native đã được tạo ra và thiết lập cấu hình, chúng ta cần thiết lập các dịch vụ Amazon mà chúng ta sẽ tương tác với chúng.

Bên trong thư mục của dự án mới, chúng ta sẽ tạo dự án Mobile Hub mới cho hướng dẫn này. Để tạo ra dự án này, chúng ta sẽ sử dụng AWSMobile CLI, nhưng bạn có thể sử dụng console nếu bạn là người dùng cao cấp hơn. Tôi đã đăng một video lên YouTube với một cái nhìn tổng quan về AWSMobile CLInếu bạn muốn tìm hiểu thêm về nó.

Bây giờ hãy tạo một dự án Mobile Hub mới trong thư mục gốc của dự án mới của chúng ta:

awsmobile init

Sau khi bạn đã tạo ra dự án của mình và có được tập tin aws-exports-file [tập tin này được tự động tạo ra cho bạn bằng cách chạy awsmobile init], chúng ta cần phải cấu hình dự án React Native với dự án AWS của chúng ta sử dụng AWS Amplify.

Để làm như vậy, chúng ta sẽ truy cập vào App.jsbên dưới dòng import sau cùng và thêm ba dòng code sau đây:

import Amplify, { Auth } from 'aws-amplify' import config from './aws-exports' Amplify.configure[config]

Xác thực

Xác thực với Amplify được thực hiện bằng cách sử dụng dịch vụ Amazon Cognito. Chúng ta sẽ sử dụng dịch vụ này để cho phép người dùng đăng nhập và đăng ký vào ứng dụng của chúng ta!

Thêm Xác thực bằng AWSMobile CLI

Hãy thêm người dùng đăng nhập và Amazon Cognito vào dự án Mobile Hub của chúng ta. Trong thư mục gốc, hãy chạy các lệnh sau:

awsmobile user-signin enable awsmobile push

Bây giờ, chúng ta sẽ có một user pool Amazon Cognito mới được thiết lập và sẵn sàng. [Nếu bạn muốn xem chi tiết dịch vụ mới này, hãy chuyển đến AWS Console, nhấp vào Cognito và chọn tên của dự án AWSMobile mà bạn đã tạo ra.]

Tiếp theo, hãy tích hợp Xác thực với Amazon Cognito và AWS Amplify.

Lớp Auth

Hãy bắt đầu bằng cách xem xét lớp chính mà bạn sẽ sử dụng để truy cập đầy đủ vào các dịch vụ Amazon Cognito, đó là lớp Auth.

Lớp Auth có nhiều phương thức cho phép bạn thực hiện mọi thứ từ đăng ký và đăng nhập người dùng đến thay đổi mật khẩu và những thứ khác.

Cũng đơn giản khi làm việc với xác thực hai lớp với AWS Amplify bằng lớp Auth, như chúng ta sẽ thấy trong ví dụ sau đây.

Ví dụ

Hãy cùng xem cách bạn có thể đăng ký và đăng nhập một người dùng bằng Amazon Cognito và lớp Auth.

Chúng ta có thể hoàn thành tiến trình đăng ký và đăng nhập với tương đối ít việc phải làm! Chúng ta sẽ sử dụng các phương thức signUp, confirmSignUp, signIn và confirmSignIn của lớp Auth.

Trong App.js, hãy tạo một vài phương thức dùng để xử lý người dùng đăng ký với xác thực hai lớp cũng như một số trạng thái để lưu giữ đầu vào của người dùng:

state = { username: '', email: '', phone_number: '', password: '', authCode: '', user: {} } onChangeText = [key, value] => { this.setState[{ [key]: value }] } signUp[] { const { username, password, email, phone_number } = this.state Auth.signUp[{ username, password, attributes: { phone_number, email } }] .then[[] => console.log['user sign up success!!']] .catch[err => console.log['error signing up user: ', err]] } confirmSignUp[] { Auth.confirmSignUp[this.state.username, this.state.authCode] .then[[] => console.log['confirm user sign up success!!']] .catch[err => console.log['error confirming signing up user: ', err]] }

signUp tạo yêu cầu đăng ký ban đầu, sẽ gửi một tin nhắn SMS tới người dùng mới để xác nhận số điện thoại của họ. confirmSignUp lấy code SMS và tên người dùng và xác nhận người dùng mới trong Amazon Cognito.

Chúng ta cũng sẽ tạo ra một giao diện người dùng cho form nhập liệu và một cái nút, và kết nối các phương thức của lớp với các thành phần UI này. Cập nhật phương thức render như sau:

render[] { return [ this.onChangeText['username', val]} /> this.onChangeText['password', val]} /> this.onChangeText['email', val]} /> this.onChangeText['phone_number', val]} /> this.onChangeText['authCode', val]} /> ]; }

Sau cùng, chúng ta sẽ cập nhật các style của chúng ta sao cho giao diện đẹp hơn:

const styles = StyleSheet.create[{ container: { flex: 1, justifyContent: 'center', }, input: { height: 50, borderBottomWidth: 2, borderBottomColor: '#9E9E9E', margin: 10 } }];

Để xem phiên bản cuối cùng của tập tin này, hãy bấm vào đây.

Bây giờ, chúng ta sẽ có thể đăng ký, nhận một mã xác nhận được gửi đến số điện thoại của chúng ta và xác nhận bằng cách nhập mã xác nhận.

Nếu bạn muốn xem chi tiết về người dùng vừa mới tạo này, hãy trở lại AWS Console, nhấp vào Cognito, chọn tên dự án AWSMobile mà bạn đã tạo và nhấp vào Users and groups trong trình menu General settings ở bên trái .

Bạn có thể nâng cao điều này bằng cách cài đặt đăng nhập và xác nhận đăng nhập. Hãy xem các phương thức signIn và confirmSignIn:

signIn[] { Auth.signIn[this.state.username, this.state.password] .then[user => { this.setState[{ user }] console.log['user sign in success!!'] }] .catch[err => console.log['error signing in user: ', err]] } confirmSignIn[] { Auth.confirmSignIn[this.state.user, this.state.authCode] .then[[] => console.log['confirm user sign in success!!']] .catch[err => console.log['error confirming signing in user: ', err]] }

Truy cập Dữ liệu và Session của người dùng

Một khi người dùng đã đăng nhập vào, chúng ta sau đó có thể sử dụng Auth để truy cập thông tin người dùng!

Chúng ta có thể gọi Auth.currentUserInfo[] để lấy thông tin về tiểu sử của người dùng [tên người dùng, email, ...] hoặc Auth.currentAuthenticatedUser[] để lấy idToken, JWT của người dùng và rất nhiều thông tin hữu ích khác về session đăng nhập hiện tại của người dùng.

Phân tích

AWS Amplify sử dụng Amazon Pinpoint để xử lý số liệu. Khi bạn tạo dự án Mobile Hub mới bằng CLI hoặc Mobile Hub, bạn sẽ tự động bật, cấu hình và sẵn sàng sử dụng Amazon Pinpoint.

Nếu bạn vẫn chưa rõ, Amazon Pinpoint là một dịch vụ không chỉ cho phép các nhà phát triển thêm Phân tích vào ứng dụng di động của họ mà còn cho phép họ gửi thông báo đẩy, tin nhắn SMS và email đến người dùng của họ.

Với AWS Amplify, chúng ta có thể gửi thông tin session của người dùng dưới dạng số liệu cho Amazon Pinpoint bằng một vài dòng code.

Hãy mở bảng điều khiển Amazon Pinpoint để chúng ta có thể xem các sự kiện mà chúng ta sắp tạo. Nếu bạn mở dự án Mobile Hub trong AWS Console, hãy chọn Analytics ở góc trên cùng bên phải hoặc truy cập trực tiếp vào Amazon Pinpoint từ console và mở dự án hiện tại.

Trong thanh điều hướng màu xanh đậm ở bên trái, có bốn tùy chọn: Analytics, Segments, Campaigns và Direct. Hãy chọn Analytics.

Một khi chúng ta bắt đầu tạo sự kiện gửi, chúng ta sẽ có thể nhìn thấy chúng trong giao diện console này.

Bây giờ chúng ta đã sẵn sàng để bắt đầu theo dõi! Trong App.js, xoá bỏ tất cả các code từ ví dụ trước đó, chỉ để lại một phương thức render có chứa một View container với một Text lời chào, không có stage, không có phương thức của lớp, và chỉ một phong cách container.

Chúng ta cũng import Analytics từ aws-amplify:

import React, { Component } from 'react'; import { StyleSheet, Text, Button, View } from 'react-native'; import Amplify, { Analytics } from 'aws-amplify' import config from './aws-exports' Amplify.configure[config] export default class App extends Component { render[] { return [ Analytics ]; } } const styles = StyleSheet.create[{ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }];

Theo dõi các Sự kiện Cơ bản

Một số liệu chung mà bạn có thể muốn theo dõi là số lần người dùng mở ứng dụng. Hãy bắt đầu bằng cách tạo một sự kiện sẽ theo dõi điều này.

Trong React Native, chúng ta có AppState API, sẽ cho chúng ta trạng thái hiện tại của ứng dụng bao gồm active, background hoặc inactive. Nếu trạng thái là active, nó có nghĩa là người dùng đã mở ứng dụng. Nếu stage là background, điều đó có nghĩa là ứng dụng đang chạy ẩn và người dùng đang ở trên màn hình home hoặc trong một ứng dụng khác, trong khi inactive có nghĩa là người dùng đang chuyển đổi giữa active và foreground, đa nhiệm hoặc đang gọi điện thoại.

Khi ứng dụng trở nên active, hãy gửi một sự kiện đến Analytics của chúng ta để cho biết rằng ứng dụng đã được mở.

Để làm như vậy, chúng ta sẽ gọi sự kiện sau:

Analytics.record['App opened!']

Bạn có thể xem API cho phương thức này trong tài liệu chính thức. Phương thức recordnhận ba đối số: name [chuỗi], attributes [đối tượng, tùy chọn] và metrics [đối tượng, tùy chọn]:

record[name: string, attributes?: EventAttributes, metrics?: EventMetrics]: Promise

Hãy cập nhật lớp để thêm một event listener khi thành phần được gắn kết, và gỡ bỏ nó khi thành phần bị phá hủy. Listener này sẽ gọi _handleAppStateChange bất cứ khi nào trạng thái ứng dụng thay đổi:

componentDidMount[] { AppState.addEventListener['change', this._handleAppStateChange]; } componentWillUnmount[] { AppState.removeEventListener['change', this._handleAppStateChange]; }

Bây giờ, hãy tạo phương thức _handleAppStateChange:

_handleAppStateChange[appState] { if [appState === 'active'] { Analytics.record['App opened!'] } }

Bây giờ, chúng ta có thể di chuyển ứng dụng vào nền, mở lại nó, và điều này sẽ gửi một sự kiện đến bảng điều khiển Analytics của chúng ta. Lưu ý: Để đưa ứng dụng vào nền trên iOS simulator hoặc Android emulator, hãy nhấn Command-Shift-H.

Để xem dữ liệu này trong bảng điều khiển, nhấp vào Events và chọn App opened! từ menu Events:

Bạn cũng sẽ có thể nhận thấy rằng bạn có các dữ liệu khác tự động từ Mobile Hub, bao gồm dữ liệu session, người dùng đăng ký và người dùng đăng nhập. Tôi nghĩ nó khá tuyệt khi tất cả các thông tin này được ghi lại một cách tự động.

Theo dõi các sự kiện chi tiết

Bây giờ đưa nó lên cấp độ cao hơn. Điều gì sẽ xảy ra nếu chúng ta không chỉ muốn theo dõi người dùng mở ứng dụng, mà người dùng nào đã mở ứng dụng và bao nhiêu lần họ mở ứng dụng?

Chúng ta có thể dễ dàng thực hiện điều này bằng cách thêm một thuộc tính vào chỉ số thứ hai!

Hãy hành động như thể chúng ta có một người dùng đã đăng nhập và theo dõi một sự kiện mới mà chúng ta sẽ gọi là "User detail: App opened".

Để làm điều này, hãy cập nhật sự kiện record như sau:

Analytics.record['User detail - App opened', {username: 'NaderDabit'}]

Sau đó, đóng và mở lại ứng dụng một vài lần. Bây giờ chúng ta có thể thấy thêm chi tiết về sự kiện này trong bảng điều khiển của chúng ta.

Để làm như vậy, hãy nhìn về phía bên phải của menu sổ xuống Event; có một phần gọi là Attributes. Ở đây, chúng ta có thể đi sâu vào các thuộc tính cho sự kiện. Trong trường hợp của chúng ta, chúng ta có tên người dùng, vì vậy chúng ta có thể lọc sự kiện này theo tên người dùng!

Dữ liệu Sử dụng

Mục cuối cùng mà chúng ta sẽ theo dõi là dữ liệu sử dụng. Đây là đối số thứ ba của record.

Hãy thêm một số liệu ghi lại thời gian tích lũy mà người dùng đã ở trong ứng dụng. Chúng ta có thể thực hiện điều này khá dễ dàng bằng cách thiết lập một giá trị thời gian trong lớp, gia tăng nó theo từng giây và gửi thông tin này đến Amazon Pinpoint khi người dùng mở ứng dụng:

// below class definition time = 0 componentDidMount[] { this.startTimer[] AppState.addEventListener['change', this._handleAppStateChange]; } componentWillUnmount[] { AppState.removeEventListener['change', this._handleAppStateChange]; } _handleAppStateChange[appState] { if [appState === 'active'] { Analytics.record['User detail - App opened!', { username: 'NaderDabit' }, { timeInApp: this.time }] } } startTimer[] { setInterval[[] => { this.time += 1 }, 1000] } // render method

Ở đây, chúng ta đã tạo ra một giá trị time và gán nó là 0. Chúng ta cũng đã thêm một phương thức startTimer mới để thêm 1 vào giá trị time sau mỗi giây. Trong componentDidMount, chúng ta gọi startTimer sẽ tăng giá trị thời gian lên 1 giây.

Bây giờ, chúng ta có thể thêm đối số thứ ba vào Analytics.record[]cái mà sẽ ghi lại giá trị này dưới dạng số liệu!

Lưu trữ

Hãy xem cách chúng ta có thể sử dụng Amplify cùng với Amazon S3 để thêm lưu trữ vào ứng dụng của chúng ta.

Để thêm S3 vào dự án Mobile Hub, hãy chạy các lệnh sau:

awsmobile user-files enable awsmobile push

Ví dụ Sử dụng

AWS Amplify có Storage API mà chúng ta có thể import giống như với các API khác:

import { Storage } from 'aws-amplify'

Sau đó chúng ta có thể gọi các phương thức trên Storage như get, put, list và remove để tương tác với các phần tử trong nhóm của chúng ta.

Khi một nhóm S3 được tạo ra, chúng ta sẽ tự động có một hình ảnh mặc định trong nhóm của chúng ta trong thư mục public; của tôi có tên là example-image.png. Hãy xem liệu chúng ta có thể sử dụng AWS Amplify để đọc và xem ảnh này từ S3 hay không.

Như ta đã đề cập ở trên, Storage có một phương thức get mà chúng ta sẽ gọi để lấy ra các phần tử, và phương thức để lấy hình ảnh này sẽ giống như thế này:

Storage.get['example-image.png']

Để minh hoạ tính năng này trong ứng dụng React Native của chúng ta, hãy tạo một số chức năng truy vấn hình ảnh này từ S3 và hiển thị nó cho người dùng của chúng ta.

Chúng ta sẽ cần import Image from React Native, cũng như Storage từ aws-amplify.

import React, { Component } from 'React' import { // previous imports Image } from 'react-native'; import Amplify, { Storage } from 'aws-amplify' // rest of code

Bây giờ, chúng ta cần phải có một số stage để nắm giữ hình ảnh này, cũng như một phương thức để truy vấn hình ảnh và giữ nó trong stage. Hãy thêm các code sau vào lớp của chúng ta bên trên phương thức render:

state = { url: '' } async getFile[] { let name = 'example-image.png'; let fileUrl = await Storage.get[name]; this.setState[{ url: fileUrl }] }

Sau cùng, hãy thêm một số phần tử UI để truy vấn hình ảnh và kết xuất nó vào UI:

render[] { return [ Storage { this.state.url !== '' && [ ] } ]; }

Bây giờ, chúng ta sẽ có thể nhấp vào nút và xem hình ảnh từ S3!

Để xem phiên bản sau cùng của tập tin này, hãy bấm vào đây.

Tóm tắt

Nhìn chung, AWS Amplify cung cấp một cách thật sự dễ dàng để hoàn thành những chức năng vốn phức tạp với ít code, tích hợp liền mạch với nhiều dịch vụ AWS.

Chúng ta không tìm hiểu thông báo đẩy, cái mà gần đây cũng đã được thêm vào AWS Amplify, nhưng chúng ta sẽ được đề cập nó ở trong một bài viết sắp tới!

AWS Amplify đang được duy trì, vì vậy nếu bạn có bất kỳ yêu cầu hoặc ý tưởng nào về tính năng, đừng ngại đưa ra bình luận, gửi issue hoặc pull request hoặc star hoặc theo dõi dự án nếu bạn muốn cập nhật các tính năng trong tương lai!

Và trong lúc chờ đợi, hãy tìm hiểu một số bài viết khác của chúng tôi về viết ứng dụng React Native.

• React Native
  Viết một ứng dụng Với GraphQL, React Native và AWS AppSync: Ứng dụng
  Nader Dabit
• Phát triển Ứng dụng Di động
  Các công cụ để phát triển React Native
  Wern Ancheta
• React Native
  Làm quen với Template Ứng ụng React Native
  Wern Ancheta