本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 使用 AWS Amplify 构建无服务器 React Native 移动应用程序
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify"></a>

*Deekshitulu Pentakota，Amazon Web Services*

## Summary
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-summary"></a>

此示例介绍了如何使用 AWS Amplify 和以下 Amazon Web Services 为 React Native 移动应用程序创建无服务器后端：
+ AWS AppSync
+ Amazon Cognito
+ Amazon DynamoDB

使用 Amplify 配置和部署应用程序的后端后，Amazon Cognito 将对应用程序用户进行身份验证并授权他们访问应用程序。 AppSync 然后，AWS 与前端应用程序和后端 DynamoDB 表进行交互以创建和获取数据。

**注意**  
此模式以简单的 “ToDoList” 应用程序为例，但你可以使用类似的过程来创建任何 React Native 移动应用程序。

## 先决条件和限制
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-prereqs"></a>

**先决条件**
+ 一个活跃的 AWS 账户
+ [Amplify 命令行界面 (Amplify CLI)](https://docs.amplify.aws/cli/start/install/)，已安装并配置
+ XCode （任何版本）
+ Microsoft Visual Studio（任何版本、任何代码编辑器、任何文本编辑器）
+ 熟悉 Amplify
+ 熟悉 Amazon Cognito
+ 熟悉 AWS AppSync
+ 熟悉 DynamoDB
+ 熟悉 Node.js
+ 熟悉 npm
+ 熟悉 React 和 React Native
+ 熟悉 JavaScript 和 ECMAScript 6 () ES6
+ 熟悉 GraphQL

## 架构
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-architecture"></a>

下图显示了在 AWS 云中运行 React Native 移动应用程序后端的示例架构：

![使用 AWS 服务运行 React Native 移动应用程序的工作流。](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/images/pattern-img/c95e0150-5762-4c90-946c-efa3a22913e4/images/5beff5f9-9d14-49dc-a046-b74e5bfbd13f.png)


该图显示以下架构：

1. Amazon Cognito 对应用程序用户进行身份验证，并授权他们访问应用程序。

1. 为了创建和获取数据，AWS AppSync 使用 GraphQL API 与前端应用程序和后端 DynamoDB 表进行交互。

## 工具
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-tools"></a>

**Amazon Web Services**
+ [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) 是一组专门构建的工具和功能，可帮助前端 Web 和移动开发人员快速地在 AWS 上构建全栈应用程序。
+ [AWS AppSync](https://docs.aws.amazon.com/appsync/latest/devguide/what-is-appsync.html) 提供了可扩展的 GraphQL 接口，可帮助应用程序开发人员合并来自多个来源的数据，包括亚马逊 DynamoDB、AWS Lambda 和 HTTP。 APIs
+ [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) 为您的 Web 和移动应用程序提供身份验证、授权和用户管理。
+ [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) 是一项完全托管式 NoSQL 数据库服务，可提供快速、可预测、可扩展的性能。

**代码**

此模式中使用的示例应用程序的代码可在 GitHub [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) 存储库中找到。若要使用示例文件，请按照此模式的**操作说明**部分进行操作。

## 操作说明
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-epics"></a>

### 创建并运行您的 React Native 应用程序
<a name="create-and-run-your-react-native-app"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 设置 React Native 开发环境。 | 有关说明，请参阅 React Native 文档中的[设置开发环境](https://reactnative.dev/docs/next/environment-setup)。 | 应用程序开发人员 | 
| 在 iOS 模拟器中创建并运行 ToDoList React Native 移动应用程序。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 应用程序开发人员 | 

### 为应用程序初始化新后端环境
<a name="initialize-a-new-backend-environment-for-the-app"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建支持 Amplify 中的应用程序所需后端服务。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。<br />**示例 React Native Amplify 应用程序配置**<pre>? Name: ToDoListAmplify<br /><br />? Environment: dev<br /><br />? Default editor: Visual Studio Code<br /><br />? App type: javascript<br /><br />? Javascript framework: react-native<br /><br />? Source Directory Path: src<br /><br />? Distribution Directory Path: /<br /><br />? Build Command: npm run-script build<br /><br />? Start Command: npm run-script start<br /><br />? Select the authentication method you want to use: AWS profile<br /><br />? Please choose the profile you want to use: default</pre><br />有关更多信息，请参阅 Amplify Dev Center 文档中的[创建新的 Amplify 后端](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend)。该`amplify init`命令使用 [AWS](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) 预置以下资源 CloudFormation： [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 应用程序开发人员 | 

### 将Amazon Cognito 身份验证添加到您的 Amplify React Native 应用程序中
<a name="add-amazon-cognito-authentication-to-your-amplify-react-native-app"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建 Amazon Cognito 身份验证服务。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。<br />**身份验证服务配置设置示例**<pre>? Do you want to use the default authentication and security configuration? \ <br />Default configuration<br /> <br />? How do you want users to be able to sign in? \ <br />Username <br /><br />? Do you want to configure advanced settings? \ <br />No, I am done</pre>`amplify add auth` 命令在项目根目录的本地文件夹（**amplify**）中创建必要的文件夹、文件和依赖文件。对于此模式中使用的 ToDoList 应用程序设置，**aws-exports.js** 就是为此目的而创建的。 | 应用程序开发人员 | 
| 将 Amazon Cognito 服务部署到 Amazon Web Services Cloud 端。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)要查看项目中已部署的服务，请运行以下命令进入 Amplify 控制台：`amplify console` | 应用程序开发人员 | 
| 为 React Native 安装所需的 Amplify 库和 iOS 的 CocoaPods 依赖项。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 应用程序开发人员 | 
| 导入并配置 Amplify 服务。 | 在应用程序的入口点文件（例如 **App.js**）中，通过输入以下代码行来导入和加载 Amplify 服务的配置文件：<pre>import Amplify from 'aws-amplify'<br />import config from './src/aws-exports'<br />Amplify.configure(config)</pre>如果在应用程序的入口点文件中导入 Amplify 服务后收到错误，请停止该应用程序。然后，打开 XCode 并选择项目的 iOS 文件夹中的 **ToDoListAmplify.xcworkspace**，然后运行该应用程序。 | 应用程序开发人员 | 
| 更新应用程序的入口点文件，以使用 withAuthenticator 高阶组件 (HOC)。 | `withAuthenticator` HOC 仅使用几行代码即可在您的应用程序中提供登录、注册和忘记密码的工作流。有关更多信息，请参阅 Amplify 开发中心的[选项 1：使用预构建的用户界面组件](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components)。另外，React 文档中的[高阶组件](https://reactjs.org/docs/higher-order-components.html)。[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**withAuthenticator HOC 代码示例**<pre>import Amplify from 'aws-amplify'<br />import config from './src/aws-exports'<br />Amplify.configure(config)<br />import { withAuthenticator } from 'aws-amplify-react-native';<br /><br /><br />const App = () => {<br />  return null;<br />};<br /><br /><br />export default withAuthenticator(App);</pre>在 iOS 模拟器，该应用程序会显示 Amazon Cognito 服务提供的登录屏幕。 | 应用程序开发人员 | 
| 测试身份验证服务设置。 | 使用 iOS 模拟器，执行以下操作：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)您也可以打开 [Amazon Cognito 控制台](https://console.aws.amazon.com/cognito/)，在**身份池**中检查是否已创建了新用户。 | 应用程序开发人员 | 

### 将 AWS AppSync API 和 DynamoDB 数据库连接到应用程序
<a name="connect-an-aws-appsync-api-and-dynamodb-database-to-the-app"></a>


| Task | 说明 | 所需技能 | 
| --- | --- | --- | 
| 创建 AWS AppSync API 和 DynamoDB 数据库。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。<br />**API 与数据库配置设置示例**<pre>? Please select from one of the below mentioned services: \ <br />GraphQL <br /><br />? Provide API name: todolistamplify<br /><br />? Choose the default authorization type for the API \ <br />Amazon Cognito User Pool<br /><br />Do you want to use the default authentication and security configuration<br /><br />? Default configuration How do you want users to be able to sign in? \ <br />Username<br /><br />Do you want to configure advanced settings? \ <br />No, I am done.<br /><br />? Do you want to configure advanced settings for the GraphQL API \ <br />No, I am done.<br /><br />? Do you have an annotated GraphQL schema? \ <br />No<br /><br />? Choose a schema template: \ <br />Single object with fields (e.g., "Todo" with ID, name, description)<br /><br />? Do you want to edit the schema now? \ <br />Yes</pre><br />**示例 GraphQL 架构**<pre> type Todo @model {<br />   id: ID!<br />   name: String!<br />   description: String<br />}</pre> | 应用程序开发人员 | 
| 部署 AWS AppSync API。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。<br />**AWS AppSync API 配置设置示例**以下配置在 AWS AppSync 中创建 GraphQL API，在 Dynamo DB 中创建 **Todo** 表。<pre> ? Are you sure you want to continue? Yes<br />? Do you want to generate code for your newly created GraphQL API Yes<br />? Choose the code generation language target javascript<br />? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js<br />? Do you want to generate/update all possible GraphQL operations - \ <br />queries, mutations and subscriptions Yes<br />? Enter maximum statement depth \<br />[increase from default if your schema is deeply nested] 2</pre> | 应用程序开发人员 | 
| 将应用程序的前端连接到 AWS AppSync API。 | 要使用此模式中提供的示例 ToDoList 应用程序，请从 [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) GitHub 存储库中的 **App.js** 文件中复制代码。然后，将示例代码集成至您的本地环境中。<br />存储库 **App.js** 文件中提供的示例代码执行以下操作：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 应用程序开发人员 | 

## 相关资源
<a name="build-a-serverless-react-native-mobile-app-by-using-aws-amplify-resources"></a>
+ [AWS Amplify](https://aws.amazon.com/amplify/)
+ [Amazon Cognito](https://aws.amazon.com/cognito/)
+ [AWS AppSync](https://aws.amazon.com/appsync/)
+ [Amazon DynamoDB](https://aws.amazon.com/dynamodb/)
+ [React](https://reactjs.org/)（React 文档）