使用 AWS Amplify 建置無伺服器 React Native 行動應用程式

設定 React Native 開發環境。

如需指示，請參閱 React Native 文件中的設定開發環境。

在 iOS Simulator 中建立和執行 ToDoList React Native 行動應用程式。

在 Amplify 中建立支援應用程式所需的後端服務。

對於此模式中使用的 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 後端。

注意： amplify init命令使用 佈建下列資源AWS CloudFormation： 

建立 Amazon Cognito 身分驗證服務。

對於此模式中使用的 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雲端。

注意：若要查看專案中部署的服務，請執行下列命令，前往 Amplify 主控台：

amplify console

安裝 React Native 所需的 Amplify 程式庫和 iOS 的 CocoaPods 相依性。

匯入並設定 Amplify 服務。

在應用程式的進入點檔案中 （例如 App.js ），輸入下列幾行程式碼匯入和載入 Amplify 服務的組態檔案：

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

注意：如果您在應用程式的入口檔案中匯入 Amplify 服務後收到錯誤，請停止應用程式。然後，從專案的 iOS 資料夾開啟XCode並選取 ToDoListAmplify.xcworkspace，然後執行應用程式。

更新應用程式的進入點檔案以使用 withAuthenticator 高階元件 （HOC）。

注意： 只使用幾行程式碼，即可在應用程式中withAuthenticatorHOC提供登入、註冊和忘記密碼工作流程。如需詳細資訊，請參閱 Amplify Dev Center 中的選項 1：使用預先建置的 UI 元件。此外，React 文件中的高階元件。

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 Simulator 中，應用程式會顯示 Amazon Cognito 服務提供的登入畫面。

測試身分驗證服務設定。

在 iOS Simulator 中，執行下列動作：

注意：您也可以開啟 Amazon Cognito 主控台，並檢查是否已在 Identity Pool 中建立新的使用者。

建立 AWS AppSync API和 DynamoDB 資料庫。

對於此模式中使用的 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。

對於此模式中使用的 ToDoList 應用程式設定，請套用下列範例組態。

AWS AppSync API組態設定範例

注意：下列組態會在 Dynamo DB API 中建立 GraphQL AWS AppSync 和 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 GitHub 儲存庫中的 App.js 檔案複製程式碼。然後，將範例程式碼整合到您的本機環境。

在儲存庫的 App.js 檔案中提供的範例程式碼執行下列動作：