AWS Amplify を使用してサーバーレスの React Native モバイルアプリを構築する

React Native 開発環境のセットアップ

手順については、React Native ドキュメントの「開発環境のセットアップ」を参照してください。

iOS シミュレーターで ToDoList React Native モバイルアプリを作成して実行します。

AAmplify でアプリをサポートするために必要なバックエンドサービスを作成します。

このパターンで使用する 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 バックエンドの作成」を参照してください。

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

Amazon Cognito サービスを AWS クラウドにデプロイします。

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)

WithAuthenticator 高次コンポーネント (HOC) を使用するようにアプリのエントリポイントファイルを更新します。

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 シミュレータで、以下の操作を行います。

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 の設定例

 ? 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 ファイルにあるサンプルコードは以下の処理を行います。