使用 Amplify 构建无服务器 React Native AWS 移动应用程序 - AWS Prescriptive Guidance
Summary先决条件和限制架构工具操作说明相关资源

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

使用 Amplify 构建无服务器 React Native AWS 移动应用程序

由 Deekshitulu Pentakota 创作 () AWS

代码存储库：aws-amplify-react-native-ios-todo-app

环境：生产

资料来源：不适用

目标：AWSAmplify、、亚马逊 Cognito AWS AppSync、亚马逊 DynamoDB

R 类型：重构

工作负载：开源

技术：无服务器；Web 和移动应用程序

AWS服务：AWSAmplify；；Amazon Cognito AWS AppSync；亚马逊 DynamoDB

Summary

此模式展示了如何使用 Amp AWS lify 和以下服务为 React Native 移动应用创建无服务器后端：AWS

  • AWS AppSync

  • Amazon Cognito

  • Amazon DynamoDB

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

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

先决条件和限制

先决条件

  • 一个活跃的AWS账户

  • Amplify 命令行界面 (AmplifyCLI)，已安装和配置

  • XCode（任何版本）

  • Microsoft Visual Studio（任何版本、任何代码编辑器、任何文本编辑器）

  • 熟悉 Amplify

  • 熟悉 Amazon Cognito

  • 熟悉 AWS AppSync

  • 熟悉 DynamoDB

  • 熟悉 Node.js

  • 熟悉 npm

  • 熟悉 React 和 React Native

  • 熟悉 JavaScript 和 ECMAScript 6 () ES6

  • 熟悉 GraphQL

架构

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

运行带有AWS服务的 React Native 移动应用程序的工作流程。

该图显示以下架构：

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

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

工具

AWS服务

  • AWSAmplify 是一组专门构建的工具和功能，可帮助前端网络和移动开发人员快速构建全栈应用程序。AWS

  • AWS AppSync提供了可扩展的 GraphQL 接口，可帮助应用程序开发人员合并来自多个来源的数据，包括亚马逊 DynamoDB、Lambda 和。AWS HTTP APIs

  • Amazon Cognito 为您的 Web 和移动应用程序提供身份验证、授权和用户管理。

  • Amazon DynamoDB 是一项完全托管的SQL无数据库服务，可提供快速、可预测和可扩展的性能。

代码

此模式中使用的示例应用程序的代码可在 GitHub aws-amplify-react-native-ios-todo-app 存储库中找到。若要使用示例文件，请按照此模式的操作说明部分进行操作。

操作说明

任务描述所需技能

设置 React Native 开发环境。

有关说明，请参阅 React Native 文档中的设置开发环境。

应用程序开发人员

在 iOS 模拟器中创建并运行 ToDoList React Native 移动应用程序。

  1. 在新的终端窗口中运行以下命令，在本地环境中创建新的 React Native 移动应用程序项目目录：

    npx react-native init ToDoListAmplify

  2. 通过运行以下命令导航到项目根目录：

    cd ToDoListAmplify

  3. 运行以下命令来运行应用程序：

    npx react-native run-ios

应用程序开发人员
任务描述所需技能

创建支持 Amplify 中的应用程序所需后端服务。

  1. 在本地环境中，从项目的根目录 (ToDoListAmplify) 运行以下命令：

    amplify init

  2. 将显示一条提示，要求您提供有关该应用程序的信息。基于自己的用例来输入所需信息。然后按 Enter。

对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。

示例 React Native Amplify 应用程序配置

? Name: ToDoListAmplify

? Environment: dev

? Default editor: Visual Studio Code

? App type: javascript

? Javascript framework: react-native

? Source Directory Path: src

? Distribution Directory Path: /

? Build Command: npm run-script build

? Start Command: npm run-script start

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use: default

有关更多信息，请参阅 Amplify Dev Center 文档中的创建新的 Amplify 后端。

注意：该amplify init命令使用以下资源供应 AWS CloudFormation： 

  • AWS适用于经过身份验证和未经身份验证的用户的 Identity and Access Management (IAM) 角色（身份验证角色和取消身份验证角色）

  • 用于部署 Amazon Simple Storage Service (Amazon S3) 存储桶（用于此模式的示例应用程序 Amplify-meta.json）存储桶

  • Amplify Hosting 中的后端环境

应用程序开发人员
任务描述所需技能

创建 Amazon Cognito 身份验证服务。

  1. 在本地环境中，从项目的根目录 (ToDoListAmplify) 运行以下命令：

    amplify add auth

  2. 将出现一条提示，要求您提供有关身份验证服务的配置设置的信息。基于自己的用例来输入所需信息。然后按 Enter。

对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。

身份验证服务配置设置示例

? Do you want to use the default authentication and security configuration? \ 
Default configuration
 
? How do you want users to be able to sign in? \ 
Username 

? Do you want to configure advanced settings? \ 
No, I am done

注意：amplify add auth 命令在项目根目录的本地文件夹 (amplify) 中创建必要的文件夹、文件和依赖文件。对于此模式中使用的 ToDoList 应用程序设置，aws-exports.js 就是为此目的而创建的。

应用程序开发人员

将 Amazon Cognito 服务部署到云端。AWS

  1. 在项目的根目录中，运行以下 Amplify CLI 命令：

    amplify push

  2. 将出现确认部署提示。输入是。然后按 Enter。

注意：要查看项目中已部署的服务，请运行以下命令进入 Amplify 控制台：

amplify console

应用程序开发人员

为 React Native 安装所需的 Amplify 库和 iOS 的 CocoaPods 依赖项。

  1. 通过从项目的根目录运行以下命令以安装所需 Amplify 开源客户端库：

    npm install aws-amplify aws-amplify-react-native \ amazon-cognito-identity-js @react-native-community/netinfo \ @react-native-async-storage/async-storage

  2. 通过运行以下命令安装 iOS 所需的 CocoaPods 依赖项：

    npx pod-install

应用程序开发人员

导入并配置 Amplify 服务。

在应用程序的入口点文件（例如 App.js）中，通过输入以下代码行来导入和加载 Amplify 服务的配置文件：

import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)

注意： 如果在应用程序的入口点文件中导入 Amplify 服务后收到错误，请停止该应用程序。然后，打开XCode并选择项目的 iOS 文件夹中的 ToDoListAmplify.xcworkspace，然后运行该应用程序。

应用程序开发人员

更新应用程序的入口点文件以使用 withAuthenticator 高阶组件 (HOC)。

注意：只需使用几行代码，即可在您的应用程序中withAuthenticatorHOC提供登录、注册和忘记密码的工作流程。有关更多信息，请参阅 Amplify 开发中心的选项 1：使用预构建的用户界面组件。另外，React 文档中的高阶组件。

  1. 在应用程序的入口点文件（例如 App.js）中，withAuthenticatorHOC通过输入以下代码行来导入：

    import { withAuthenticator } from 'aws-amplify-react-native'

  2. withAuthenticator HOC通过输入以下代码导出：

    export default withAuthenticator(App)

withAuthenticator HOC代码示例

import Amplify from 'aws-amplify'
import config from './src/aws-exports'
Amplify.configure(config)
import { withAuthenticator } from 'aws-amplify-react-native';


const App = () => {
  return null;
};


export default withAuthenticator(App);

注意：在 iOS 模拟器，该应用程序会显示 Amazon Cognito 服务提供的登录屏幕。

应用程序开发人员

测试身份验证服务设置。

使用 iOS 模拟器，执行以下操作：

  1. 使用真实的电子邮件地址在应用程序中创建新账户。然后，验证码将发送至注册的电子邮件中。

  2. 使用您在验证电子邮件中收到的代码验证所设置的账户。

  3. 输入您创建的用户名和密码。然后，选择登录，出现欢迎屏幕。 

注意：您也可以打开 Amazon Cognito 控制台，检查身份池中是否创建了新用户。

应用程序开发人员
任务描述所需技能

创建AWS AppSync API和 DynamoDB 数据库。

  1. AWS AppSync API向您的应用程序添加并通过从项目的根目录运行以下 Amp CLI lify 命令来自动配置 DynamoDB 数据库：

    amplify add api

  2. 将出现一个提示，要求您提供有关API和数据库配置设置的信息。基于自己的用例来输入所需信息。然后按 Enter。Amplify CLI 会在您的文本编辑器中打开 GraphQL 架构文件。

对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。

示例API和数据库配置设置

? Please select from one of the below mentioned services: \ 
GraphQL 

? Provide API name: todolistamplify

? Choose the default authorization type for the API \ 
Amazon Cognito User Pool

Do you want to use the default authentication and security configuration

? Default configuration How do you want users to be able to sign in? \ 
Username

Do you want to configure advanced settings? \ 
No, I am done.

? Do you want to configure advanced settings for the GraphQL API \ 
No, I am done.

? Do you have an annotated GraphQL schema? \ 
No

? Choose a schema template: \ 
Single object with fields (e.g., “Todo” with ID, name, description)

? Do you want to edit the schema now? \ 
Yes

示例 GraphQL 架构

 type Todo @model {
   id: ID!
   name: String!
   description: String
}
应用程序开发人员

部署AWS AppSync API。

  1. 在项目的根目录中，运行以下 Amplify CLI 命令：

    amplify push

  2. 将出现一个提示，要求您提供有关API和数据库配置设置的更多信息。基于自己的用例来输入所需信息。然后按 Enter。您的应用程序现在可以与交互了AWS AppSync API。 

对于此模式中使用的 ToDoList 应用程序设置，请应用以下示例配置。

AWS AppSync API配置设置示例

注意：以下配置在中创建 GraphQL，API在 AWS AppSync Dynamo DB 中创建待办事项表。

 ? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - \ 
queries, mutations and subscriptions Yes
? Enter maximum statement depth \
[increase from default if your schema is deeply nested] 2
应用程序开发人员

将应用程序的前端连接到. AWS AppSync API

要使用此模式中提供的示例 ToDoList 应用程序，请从 aws-amplify-react-native-ios-todo-app GitHub 存储库中的 App.js 文件中复制代码。然后，将示例代码集成至您的本地环境中。

存储库 App.js 文件中提供的示例代码执行以下操作：

  • 显示用于创建带有标题和描述字段的ToDo 项目的表单

  • 显示待办事项列表（标题与描述）

  • 使用 aws-amplify 方法发布和获取数据

应用程序开发人员

相关资源