AWS-Amplify
Báo cáo Lỗi/Yêu cầu Tính năng
AWS Amplify là một thư viện JavaScript dành cho các nhà phát triển frontend và di động xây dựng các ứng dụng tích hợp đám mây
AWS Amplify cung cấp giao diện khai báo và dễ sử dụng cho các loại hoạt động đám mây khác nhau. AWS Amplify hoạt động tốt với bất kỳ luồng làm việc frontend dựa trên JavaScript nào và React Native cho các nhà phát triển di động.
Hiện thực mặc định của chúng tôi hoạt động với Amazon Web Services (AWS), nhưng AWS Amplify được thiết kế để mở và có khả năng cắm cho bất kỳ backend hoặc dịch vụ tùy chỉnh nào.
Lưu ý:
Amplify@3.x.x có những thay đổi gây nên sự đứt gãy. Vui lòng xem các thay đổi gây đứt gãy dưới đây:
AWS.credentialsvàAWS.configkhông còn tồn tại bất kỳ ở đâu trong Amplify JS- Cả hai tùy chọn sẽ không còn sẵn để sử dụng trong phiên bản 3. Bạn sẽ không thể sử dụng và đặt thông tin xác thực của riêng bạn. Kế hoạch di cư về “Cách di cư để sử dụng thông tin xác thực do Amplify cung cấp” sẽ được thực hiện trong những tuần tiếp theo sau khi GA ra mắt.
aws-sdk@2.xđã bị loại bỏ khỏiAmplify@3.x.xđể ủng hộ version 3 of aws-sdk-js. Chúng tôi khuyến nghị chuyển đổi sang aws-sdk-js-v3 nếu bạn phụ thuộc vào các dịch vụ AWS mà không được hỗ trợ bởi Amplify, vì aws-sdk-js-v3 được nhập theo kiểu modul.
Nếu bạn không thể chuyển đổi sang aws-sdk-js-v3 hoặc phụ thuộc vào aws-sdk@2.x, bạn sẽ cần nhập nó một cách riêng lẻ.
Nếu bạn đang sử dụng các đường dẫn xuất bên trong ứng dụng Amplify JS của bạn, (ví dụ: import from "@aws-amplify/analytics/lib/Analytics") điều này sẽ bị hỏng và không còn được hỗ trợ nữa. Bạn sẽ cần chuyển sang các lệnh nhập có tên:
import { Analytics } from 'aws-amplify';
Nếu bạn đang sử dụng các danh mục như Amplify.<Category>, điều này sẽ không còn hoạt động và chúng tôi khuyến nghị nhập danh mục bạn cần sử dụng:
-
Một ngoại lệ duy nhất trong trường hợp này là sử dụng gói
aws-amplify-angularnơi chúng tôi vẫn cung cấp tất cả các danh mục đã được khởi tạo. Điều này có thể thay đổi trong phiên bản sau.import { Auth } from ‘aws-amplify’;
Đối với thành phần Authenticator của aws-amplify-react, bạn sẽ cần nhập các kiểu dáng vào ứng dụng của bạn:
import `@aws-amplify/ui/dist/style.css`;
Tính năng / API
- Authentication: API và các khối xây dựng dành cho các nhà phát triển muốn tạo trải nghiệm xác thực người dùng.
- Analytics: Dễ dàng thu thập dữ liệu phân tích cho ứng dụng của bạn. Dữ liệu phân tích bao gồm các phiên người dùng và các sự kiện tùy chỉnh khác mà bạn muốn theo dõi trong ứng dụng của bạn.
- REST API: Cung cấp một giải pháp đơn giản khi thực hiện các yêu cầu HTTP. Nó cung cấp một quy trình ký nhẹ tự động tuân theo AWS Signature Version 4.
- GraphQL API: Tương tác với máy chủ GraphQL của bạn hoặc AWS AppSync API với một khách hàng GraphQL dễ sử dụng và được cấu hình.
- Storage: Cung cấp một cơ chế đơn giản để quản lý nội dung người dùng cho ứng dụng của bạn trong các bucket lưu trữ công cộng, được bảo vệ hoặc riêng tư.
- Push Notifications: Cho phép bạn tích hợp thông báo đẩy vào ứng dụng của bạn với hỗ trợ đối tượng Amazon Pinpoint và quản lý chiến dịch.
- Interactions: Tạo ra các bot trò chuyện được hỗ trợ bởi các công nghệ học sâu.
- PubSub: Cung cấp kết nối với middleware hướng tin nhắn dựa trên đám mây.
- Internationalization: Một giải pháp quốc tế nhẹ.
- Cache: Cung cấp bộ đệm LRU chung cho các nhà phát triển JavaScript để lưu trữ dữ liệu với ưu tiên và cài đặt hết hạn.
- Predictions: Cung cấp một giải pháp cho việc sử dụng các dịch vụ đám mây AI và ML để tăng cường ứng dụng của bạn.
Truy cập Web Site của chúng tôi để tìm hiểu thêm về AWS Amplify.
- Documentation
- Cài đặt
- Cấu hình
- Demo Applications
- Ví dụ
- Contributing
Cài đặt
AWS Amplify có sẵn dưới dạng gói aws-amplify trên npm.
Web
$ npm install aws-amplify --save
Hoặc bạn có thể cài đặt riêng từng mô-đun mà bạn muốn sử dụng:
$ npm install @aws-amplify/auth --save
React
Nếu bạn đang phát triển ứng dụng React, bạn có thể cài đặt một gói bổ sung aws-amplify-react chứa Higher Order Components:
$ npm install aws-amplify --save
$ npm install aws-amplify-react --save
Angular
Nếu bạn đang phát triển ứng dụng Angular, bạn có thể cài đặt gói bổ sung aws-amplify-angular. Gói này bao gồm một Angular module với provider and components:
$ npm install aws-amplify --save
$ npm install aws-amplify-angular --save
Truy cập Installation Guide for Web của chúng tôi để bắt đầu xây dựng ứng dụng web của bạn.
Vue
Nếu bạn đang phát triển ứng dụng Vue, bạn có thể cài đặt gói bổ sung aws-amplify-vue. Gói này bao gồm một Vue plugin cho thư viện Amplify cùng với Vue components:
$ npm install aws-amplify --save
$ npm install aws-amplify-vue --save
Truy cập Installation Guide for Web của chúng tôi để bắt đầu xây dựng ứng dụng Vue của bạn.
React Native
Đối với phát triển React Native, hãy cài đặt aws-amplify:
$ npm install aws-amplify --save
Nếu bạn đang phát triển ứng dụng React Native, bạn có thể cài đặt gói bổ sung aws-amplify-react-native chứa Higher Order Components:
$ npm install aws-amplify-react-native --save
Truy cập Installation Guide for React Native của chúng tôi để bắt đầu xây dựng ứng dụng React Native của bạn.
Cấu hình
Ở bất kỳ đâu trong ứng dụng của bạn, ưu tiên tại mức gốc, cấu hình Amplify với tài nguyên của bạn.
Sử dụng Tài nguyên AWS
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
// or if you don't want to install all the categories
import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';
import aws_exports from './aws-exports';
// in this way you are only importing Auth and configuring it.
Amplify.configure(aws_exports);
Không có AWS
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});
Ví dụ
AWS Amplify hỗ trợ nhiều kịch bản danh mục như Xác thực, Phân tích, API và Lưu trữ như đã được mô tả trong Developer Guide. Dưới đây là một số ví dụ:
1. Thu thập dữ liệu theo dõi phiên người dùng
Theo mặc định, AWS Amplify có thể thu thập dữ liệu theo dõi phiên người dùng với vài dòng mã:
import Analytics from '@aws-amplify/analytics';
Analytics.record('myCustomEvent');
Xem trang Analytics Developer Guide của chúng tôi để biết thông tin chi tiết.
2. Thêm Xác thực vào Ứng dụng của Bạn
Thêm đăng ký và đăng nhập người dùng bằng hai trong số nhiều phương pháp có sẵn cho Auth class:
import Auth from '@aws-amplify/auth';
Auth.signUp({
username: 'AmandaB',
password: 'MyCoolPassword1!',
attributes: {
email: 'someemail@example.com',
},
});
Auth.signIn(username, password)
.then(success => console.log('successful sign in'))
.catch(err => console.log(err));
Xem trang Authentication Developer Guide của chúng tôi để biết thông tin chi tiết.
React / React Native
Thêm xác thực vào ứng dụng React hoặc React Native của bạn dễ dàng bằng cách bọc thành phần chính của ứng dụng của bạn với thành phần cao cấp withAuthenticator của chúng tôi. AWS Amplify sẽ cung cấp giao diện người dùng có thể tùy chỉnh cho các trường hợp sử dụng phổ biến như đăng ký và đăng nhập người dùng.
// For React
import { withAuthenticator } from 'aws-amplify-react';
// For React Native
import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);
Angular
Để thêm xác thực vào ứng dụng Angular của bạn, bạn cũng có thể sử dụng nhà cung cấp dịch vụ và thành phần tích hợp sẵn:
// app.component.ts
import { AmplifyService } from 'aws-amplify-angular';
...
constructor( public amplify:AmplifyService ) {
// handle auth state changes
this.amplify.authStateChange$
.subscribe(authState => {
this.authenticated = authState.state === 'signedIn';
if (!authState.user) {
this.user = null;
} else {
this.user = authState.user;
}
});
}
// app.component.html
<amplify-authenticator></amplify-authenticator>
Xem trang Angular Guide của chúng tôi để biết thêm chi tiết về cài đặt và sử dụng Angular.
3. Ký yêu cầu HTTP
AWS Amplify tự động ký các yêu cầu REST của bạn bằng AWS Signature Version 4 khi sử dụng mô-đun API:
import API from '@aws-amplify/api';
let apiName = 'MyApiName';
let path = '/path';
let options = {
headers: {...} // OPTIONAL
}
API.get(apiName, path, options).then(response => {
// Add your code here
});
Xem trang REST API Developer Guide của chúng tôi để biết thông tin chi tiết.
4. Thao tác API GraphQL
Để truy cập API GraphQL với ứng dụng của bạn, bạn cần đảm bảo cấu hình URL điểm cuối trong cấu hình ứng dụng của bạn.
// configure a custom GraphQL endpoint
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});
// Or configure an AWS AppSync endpoint.
let myAppConfig = {
// ...
aws_appsync_graphqlEndpoint:
'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
aws_appsync_region: 'us-east-1',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
// ...
};
Amplify.configure(myAppConfig);
truy vấn
import API, { graphqlOperation } from '@aws-amplify/api';
const ListEvents = `query ListEvents {
listEvents {
items {
id
where
description
}
}
}`;
const allEvents = await API.graphql(graphqlOperation(ListEvents));
đột biến
import API, { graphqlOperation } from '@aws-amplify/api';
const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where: String!, $description: String!) {
createEvent(name: $name, when: $when, where: $where, description: $description) {
id
name
where
when
description
}
}`;
const eventDetails = {
name: 'Party tonight!',
when: '8:00pm',
where: 'Ballroom',
description: 'Coming together as a team!',
};
const newEvent = await API.graphql(graphqlOperation(CreateEvent, eventDetails));
theo dõi
import API, { graphqlOperation } from '@aws-amplify/api';
const SubscribeToEventComments = `subscription subscribeToComments {
subscribeToComments {
commentId
content
}
}`;
const subscription = API.graphql(
graphqlOperation(SubscribeToEventComments)
).subscribe({
next: eventData => console.log(eventData),
});
Xem trang GraphQL API Developer Guide của chúng tôi để biết thông tin chi tiết.
5. Tải lên và Tải xuống nội dung công cộng hoặc riêng tư
AWS Amplify cung cấp một API dễ sử dụng để lưu trữ và lấy nội dung từ các thư mục lưu trữ công cộng hoặc riêng tư:
Storage.put(key, fileObj, { level: 'private' })
.then(result => console.log(result))
.catch(err => console.log(err));
// Store data with specifying its MIME type
Storage.put(key, fileObj, {
level: 'private',
contentType: 'text/plain',
})
.then(result => console.log(result))
.catch(err => console.log(err));
Xem trang Storage Developer Guide của chúng tôi để biết thông tin chi tiết.
Chi tiết Tải xuống:
Tác giả: aws-amplify
Mã nguồn: https://github.com/aws-amplify/amplify-js
Giấy phép: Apache-2.0 license
