本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用 AWS Amplify 建置無伺服器 React Native 行動應用程式 *Deekshitulu Pentakota，Amazon Web Services* ## 總結 此模式示範如何使用 AWS Amplify 和下列 AWS 服務，為 React Native 行動應用程式建立無伺服器後端： + AWS AppSync + Amazon Cognito + Amazon DynamoDB 在您使用 Amplify 設定和部署應用程式的後端之後，Amazon Cognito 會驗證應用程式使用者，並授權他們存取應用程式。然後AWS AppSync 會與前端應用程式和後端 DynamoDB 資料表互動，以建立和擷取資料。 **注意** 此模式使用簡單的「ToDoList」應用程式做為範例，但您可以使用類似的程序來建立任何 React Native 行動應用程式。 ## 先決條件和限制 **先決條件** + 作用中的 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 ## Architecture 下圖顯示在 AWS 雲端中執行 React Native 行動應用程式後端的範例架構： ![使用 AWS 服務執行 React Native 行動應用程式的工作流程。](http://docs.aws.amazon.com/zh_tw/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 資料表互動。 ## 工具 **AWS 服務** + [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 介面，可協助應用程式開發人員結合來自多個來源的資料，包括 Amazon 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 資料庫服務，可提供快速、可預期且可擴展的效能。 **Code** 此模式中使用的範例應用程式的程式碼可在 GitHub [aws-amplify-react-native-ios-todo-app](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) 儲存庫中找到。若要使用範例檔案，請遵循此模式的** Epics** 區段中的指示。 ## 史詩 ### 建立並執行您的 React Native 應用程式 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 設定 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_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 應用程式開發人員 | ### 初始化應用程式的新後端環境 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 在 Amplify 中建立支援應用程式所需的後端服務。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)對於此模式中使用的 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 開發中心文件中建立新的 Amplify 後端](https://docs.amplify.aws/lib/project-setup/create-application/q/platform/js/#create-a-new-amplify-backend)。`amplify init` 命令會使用 [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) 佈建下列資源： [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 應用程式開發人員 | ### 將 Amazon Cognito 身分驗證新增至 Amplify React Native 應用程式 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 建立 Amazon Cognito 身分驗證服務。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)對於此模式中使用的 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` 命令會在專案根目錄中的本機資料夾 (**擴增**) 中建立必要的資料夾、檔案和相依性檔案。對於此模式中使用的 ToDoList 應用程式設定，系統會為此目的建立 **aws-exports.js**。 | 應用程式開發人員 | | 將 Amazon Cognito 服務部署至 AWS 雲端。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/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_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 應用程式開發人員 | | 匯入並設定 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)。 | `withAuthenticator` HOC 只會使用幾行程式碼，在您的應用程式中提供登入、註冊和忘記密碼工作流程。如需詳細資訊，請參閱 Amplify 開發中心中的[選項 1：使用預先建置的 UI 元件](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_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)**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 模擬器中，執行下列動作：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/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 資料庫連線至應用程式 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 建立 AWS AppSync API 和 DynamoDB 資料庫。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)對於此模式中使用的 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。 | [See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html)對於此模式中使用的 ToDoList 應用程式設定，請套用下列範例組態。
**AWS AppSync API 組態設定範例**下列組態會在 AWS AppSync 中建立 GraphQL API，並在 Dynamo DB中建立 **Todo** 資料表。
 ? 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](https://github.com/aws-samples/aws-amplify-react-native-ios-todo-app) GitHub 儲存庫中的 **App.js** 檔案複製程式碼。然後，將範例程式碼整合到您的本機環境。
儲存庫的 **App.js** 檔案中提供的範例程式碼執行下列動作：[See the AWS documentation website for more details](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/build-a-serverless-react-native-mobile-app-by-using-aws-amplify.html) | 應用程式開發人員 | ## 相關資源 + [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 文件）