Amplify Data をセットアップする
このガイドでは、Amplify Data をセットアップする方法を学びます。これには、TypeScript を使用してデータモデルを定義してリアルタイム API とデータベースを構築し、認可ルールで API をセキュアにすることが含まれます。また、カスタムユースケースにスケーリングするために AWS Lambda を使用することも紹介します。
開始する前に、以下が必要です:
Amplify Data を使うと、数分でデータベースによるセキュアで リアルタイム API を構築できます。TypeScript を使用してデータモデルを定義した後、Amplify はリアルタイム API をデプロイします。この API は AWS AppSync によって提供され、Amazon DynamoDB データベースに接続されています。認可ルールで API をセキュアにでき、AWS Lambda でカスタムユースケースにスケーリングできます。
データバックエンドを構築する
すでに npm create amplify@latest を実行している場合、amplify/data/resource.ts ファイルが表示されます。これは、データバックエンドを構成するための中心的な場所です。最も重要な要素は schema オブジェクトで、バックエンドのデータモデル (a.model()) とカスタムクエリ (a.query())、ミューテーション (a.mutation())、サブスクリプション (a.subscription()) を定義します。
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';
const schema = a.schema({ Todo: a.model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.publicApiKey()])});
// Used for code completion / highlighting when making requests from frontendexport type Schema = ClientSchema<typeof schema>;
// defines the data resource to be deployedexport const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'apiKey', apiKeyAuthorizationMode: { expiresInDays: 30 } }});すべての a.model() は、クラウドで以下のリソースを自動的に作成します:
- レコードを保存するための DynamoDB データベーステーブル
- レコードを作成、読取 (リスト/取得)、更新、削除するためのクエリおよびミューテーション API
- 各レコードが最初に作成されたとき、または最後に更新されたときを追跡するのに役立つ
createdAtおよびupdatedAtフィールド - レコードの作成、更新、削除イベントをサブスクライブするためのリアルタイム API
allow.publicApiKey() ルールは、API キーで認証されたすべての人が、todo を作成、読取、更新、削除できることを指定します。
これらのリソースをクラウドサンドボックスにデプロイするには、ターミナルで次の CLI コマンドを実行します:
npx ampx sandbox --outputs-out-dir <path_to_app/src/main/res/raw/>アプリケーションコードをデータバックエンドに接続する
クラウドサンドボックスが起動して実行されている場合、API エンドポイント URL や API キーなどのデータバックエンドへの接続情報を含む amplify_outputs.json ファイルも作成されます。
フロントエンドコードをバックエンドに接続するには、以下を実行する必要があります:
- Amplify ライブラリを Amplify クライアント構成ファイル (
amplify_outputs.json) で構成する - Amplify ライブラリから新しい API クライアントを生成する
- エンドツーエンドの型安全性を備えた API リクエストを実行する
Gradle Scripts の下で、build.gradle (Module :app) を開いて、以下の行を追加します:
android { compileOptions { // Support for modern Java features isCoreLibraryDesugaringEnabled = true }}
dependencies { // Amplify API dependencies implementation("com.amplifyframework:aws-api:ANDROID_VERSION") // ... other dependencies coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:ANDROID_DESUGAR_VERSION")}ファイルエディタの上の通知バーにある Sync Now をクリックして、これらの依存関係を同期します。
次に、生成された amplify_outputs.json ファイルを使用して Amplify クライアントライブラリを構成し、バックエンド API エンドポイントを認識させます。*注意: amplify_outputs.json ファイルが res/raw/ フォルダに存在することを確認してください。
Application から継承する新しい MyAmplifyApp クラスを次のコードで作成します:
package com.example.myapplication
import android.app.Applicationimport android.util.Logimport com.amplifyframework.AmplifyExceptionimport com.amplifyframework.api.aws.AWSApiPluginimport com.amplifyframework.core.Amplifyimport com.amplifyframework.core.configuration.AmplifyOutputs
class MyAmplifyApp : Application() { override fun onCreate() { super.onCreate()
try { // Adds the API plugin that is used to issue queries and mutations // to your backend. Amplify.addPlugin(AWSApiPlugin()) // Configures the client library to be aware of your backend API // endpoint and authorization modes. Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext) Log.i("Tutorial", "Initialized Amplify") } catch (error: AmplifyException) { Log.e("Tutorial", "Could not initialize Amplify", error) } }}これはアプリケーション起動時に Amplify を初期化するために onCreate() をオーバーライドします。
次に、新しいカスタム Application クラスを使用するようにアプリケーションを構成します。manifests > AndroidManifest.xml を開いて、新しいクラス名の値を持つ android:name 属性を追加します:
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <application android:name=".MyAmplifyApp" ... > <!-- ... --> </application></manifest>アプリケーションをビルドして実行します。Logcat に、成功を示すログ行が表示されます:
com.example.MyAmplifyApp I/MyAmplifyApp: Initialized Amplify最後に、Android アプリケーション用の GraphQL クライアントコードを生成します。Amplify Data は GraphQL を使用して、クエリ、ミューテーション、サブスクリプションリクエストを実行します。生成された GraphQL クライアントコードは、GraphQL リクエストを手動で作成してマップする必要なく、完全に型付きされた API リクエストを作成するのに役立ちます。
npx ampx generate graphql-client-code --format modelgen --model-target java --out <path_to_app/src/main/java/>バックエンドにデータを書き込む
MainActivity で、新しい todo を作成するボタンを追加します。
// imports
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyApplicationTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Column { Button(onClick = { val todo = Todo.builder() .content("My first todo") .isDone(false) .build()
Amplify.API.mutate(ModelMutation.create(todo), { Log.i("MyAmplifyApp", "Added Todo with id: ${it.data.id}")}, { Log.e("MyAmplifyApp", "Create failed", it)}, ) }) { Text(text = "Create Todo") } } } } } }}アプリをビルドして実行します。次に、アプリの "Create Todo" をクリックします。Logcat に todo が正常に追加されたことが表示されるはずです:
com.example.MyAmplifyApp I/MyAmplifyApp: Added Todo with id: SOME_TODO_IDバックエンドからデータを読み込む
次に、すべての todo をリストし、todo が追加された後に todo を再度取得します:
最初にデータを取得する新しい TodoList @Composable を開始します:
@Composablefun TodoList() { var todoList by remember { mutableStateOf(emptyList<Todo>()) }
LaunchedEffect(Unit) { // API request to list all Todos Amplify.API.query(ModelQuery.list(Todo::class.java), { todoList = it.data.items.toList() }, { Log.e("MyAmplifyApp", "Failed to query.", it)}) }
LazyColumn { items(todoList) { todo -> Row { // Render your activity item here Checkbox(checked = todo.isDone, onCheckedChange = null) Text(text = todo.content) } } }}アプリケーションをビルドして再実行すると、前のビルドで作成した todo が表示されるはずです。ただし、"create Todo" ボタンをクリックしても、アプリを次に起動するまで下にリストに新しい todo が追加されないことに注意してください。これを解決するために、todo リストにリアルタイム更新を追加しましょう。
リアルタイム更新をサブスクライブする
リアルタイム更新を追加するには、Amplify Data のサブスクリプション機能を使用できます。これにより、アプリケーションの onCreate, onUpdate, および onDelete イベントをサブスクライブできます。この例では、新しい todo が追加されるたびにリストを追加します。
@Composablefun TodoList() { var todoList by remember { mutableStateOf(emptyList<Todo>()) }
LaunchedEffect(Unit) { Amplify.API.query(ModelQuery.list(Todo::class.java), { todoList = it.data.items.toList() }, { Log.e("MyAmplifyApp", "Failed to query.", it)}) Amplify.API.subscribe(ModelSubscription.onCreate(Todo::class.java), { Log.i("ApiQuickStart", "Subscription established") }, { Log.i("ApiQuickStart", "Todo create subscription received: ${it.data}") todoList = todoList + it.data }, { Log.e("ApiQuickStart", "Subscription failed", it) }, { Log.i("ApiQuickStart", "Subscription completed") }
) }
LazyColumn { items(todoList) { todo -> Row { // Render your activity item here Checkbox(checked = todo.isDone, onCheckedChange = null) Text(text = todo.content) } } }}onCreate() 関数から TodoList() を呼び出します:
setContent { MyAmplifyAppTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Authenticator { state -> Column { Text( text = "Hello ${state.user.username}!", ) .... TodoList()結論
成功しました! Amplify Data で初めてのリアルタイム API とデータベースを作成する方法を学びました。
次のステップ
Amplify Data で発見することがたくさんあります。詳細については、以下をご覧ください: