クイックスタート
👋 AWS Amplify へようこそ!このクイックスタートガイドでは、以下を行います:
- Amplify バックエンドのデータベースと認証を AWS にデプロイする
- Android アプリからバックエンドに接続する
- バックエンドの更新を行う
Amplify バックエンドを AWS にデプロイする
より素早く始めるために、スターターの "To-do" Amplify バックエンドを用意しました。まず、スターターテンプレートを使用して GitHub アカウントにリポジトリを作成します。
1. リポジトリの作成
スターターテンプレートを使用して GitHub アカウントにリポジトリを作成します。このテンプレートは Auth と Data 機能を備えた Amplify バックエンドをscaffold します。
テンプレートからリポジトリを作成
2. スターターのデプロイ
リポジトリが作成されたので、Amplify の CI/CD パイプラインにデプロイします。
AWS にデプロイ
GitHub を選択し、スターターリポジトリを選択して「Save and Deploy」をクリックします。
3. デプロイされたバックエンドの確認
アプリのデプロイを待つ間(約5分)プロジェクト構造について学ぶ
このスターターリポジトリのプロジェクト構造を見てみましょう。スターターアプリケーションには、すべての To-do アイテムのリアルタイムデータベースフィードと新しいアイテムを追加する機能を提供するコードがあらかじめ記述されています。
├── amplify/ # Folder containing your Amplify backend configuration│ ├── auth/ # Definition for your auth backend│ │ └── resource.ts│ ├── data/ # Definition for your data backend│ │ └── resource.ts| ├── backend.ts│ └── package.jsonビルドが完了したら、ブランチ名を選択してデプロイメントの Deployed backend resources セクションを確認して、新しくデプロイされたブランチにアクセスします。
アプリの更新
To-do リストアイテムの削除フローを作成してアプリの機能を強化する方法を学びましょう。
4. ローカル環境のセットアップ
既存の Android アプリがない場合Android プロジェクトのセットアップ
Android Studio を開きます。+ Create New Project を選択します。
Select a Project Template で Empty Activity または Empty Compose Activity を選択します。Next を押します。
- Name フィールドに MyAmplifyApp と入力する
- Language ドロップダウンメニューから Java または Kotlin を選択する
- Minimum SDK ドロップダウンメニューから API 24: Android 7.0 (Nougat) を選択する
- Finish を押す
Deployed backend resources で、Download outputs file を選択して、デプロイされたすべてのバックエンドリソースの識別子を含む amplify_outputs.json ファイルをダウンロードします。
上でダウンロードした amplify_outputs.json ファイルを Android プロジェクトの app/src/main/res/raw に移動します。これでこのバックエンドに接続できるようになります。
詳細を見るamplify_outputs.json
amplify_outputs.json ファイルにはバックエンドエンドポイント情報、公開可能な API キー、認証フロー情報などが含まれています。Amplify クライアントライブラリはこの outputs ファイルを使用して Amplify バックエンドに接続します。
5. 依存関係のインストール
Amplify は一部の最新の Java API を使用しており、古いバージョンの Android 向けに脱糖処理を追加する必要があります。app/build.gradle.kts に以下の行を追加します:
android { compileOptions { // Support for modern Java features isCoreLibraryDesugaringEnabled = true }}
dependencies { coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:ANDROID_DESUGAR_VERSION")}6. ログイン UI の実装
デプロイされたバックエンドアプリケーションには、amplify/auth/resource.ts ファイルに事前設定済みの認証バックエンドがすでに定義されています。
ログイン体験を素早く起動する最も簡単な方法は、Authenticator UI コンポーネントを使用することです。Authenticator UI コンポーネントを使用するには、app/build.gradle.kts ファイルに以下の依存関係を追加する必要があります:
dependencies { implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION") coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:ANDROID_DESUGAR_VERSION")}その後、Application を拡張する MyAmplifyApp クラスを作成し、以下のコードを追加します:
import android.app.Applicationimport android.util.Logimport com.amplifyframework.AmplifyExceptionimport com.amplifyframework.auth.cognito.AWSCognitoAuthPluginimport com.amplifyframework.core.Amplifyimport com.amplifyframework.core.configuration.AmplifyOutputs
class MyAmplifyApp: Application() { override fun onCreate() { super.onCreate()
try { Amplify.addPlugin(AWSCognitoAuthPlugin()) Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext) Log.i("MyAmplifyApp", "Initialized Amplify") } catch (error: AmplifyException) { Log.e("MyAmplifyApp", "Could not initialize Amplify", error) } }}次に AndroidManifest.xml ファイルでこのクラスを呼び出します:
<application android:name=".MyAmplifyApp" ...</application>Android Authenticator コンポーネントを使用するように MainActivity.kt を更新します。
import android.os.Bundle..import com.amplifyframework.ui.authenticator.ui.Authenticatorimport androidx.compose.foundation.layout.Columnimport androidx.compose.material3.Buttonimport com.amplifyframework.core.Amplify
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) 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}!", ) Button(onClick = { Amplify.Auth.signOut { } }) { Text(text = "Sign Out") } } } } } } }}Android エミュレーターでアプリケーションを実行すると、認証フローが動作しているのが確認できるはずです。
7. データの読み書き
初期のscaffoldには、amplify/data/resource.ts ファイルに事前設定済みのデータバックエンドがすでに定義されています。デフォルトの例では、content フィールドを持つ Todo モデルが作成されます。
Amplify はバックエンド API と対話するためのコードを自動的に生成できます。以下のコマンドで Data スキーマからモデルクラスを生成します:
Amplify コンソールで App ID を見つけるApp ID をお探しですか?
以下のコマンドで APP-ID を Amplify アプリ ID に置き換えてください。Amplify コンソールで確認できます。
cd my-android-appnpx @aws-amplify/backend-cli generate graphql-client-code --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch main完了したら、プロジェクトに以下の依存関係を追加します:
dependencies { // Amplify API dependencies implementation("com.amplifyframework:aws-api:ANDROID_VERSION") // ... other dependencies}依存関係を追加したら、MyAmplifyApp クラスを開き、configure 呼び出しの前に以下の行を追加します:
import com.amplifyframework.api.aws.AWSApiPlugin
..Amplify.addPlugin(AWSApiPlugin())新しい To-do アイテムを作成するために MainActivity クラスを以下のコードで更新します。onClick 関数は新しい Todo アイテムを作成します。
class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) 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}!", ) Button(onClick = { val todo = Todo.builder() .content("My first todo") .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") } Button(onClick = { Amplify.Auth.signOut { } }) { Text(text = "Sign Out") } } } } } } }}次に、追加されたアイテムを表示するロジックを追加します。
@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 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()8. リアルタイムデータの有効化
アプリケーションをビルドして再実行すると、前のビルドで作成された 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 Text(text = todo.content) } } }}バックエンドの更新
各ユーザーが自分の To-do のみにアクセスできるよう、ユーザーごとの認可ルールを実装するためにバックエンドを更新しましょう。
9. ユーザーごとの認可の実装
まず、デプロイされたリポジトリをクローンします。
git clone https://github.com/<github-user>/amplify-backend-template.gitcd amplify-backend-templatenpm installバックエンドの To-do モデルはすべてのユーザー間でデータを共有するように設定されていますが、ほとんどの場合、データはユーザーごとに分離することが望まれます。
ユーザーごとにデータを分離するには、「オーナーベースの認可ルール」を使用できます。To-do アイテムにオーナーベースの認可ルールを適用しましょう:
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
const schema = a.schema({ Todo: a.model({ content: a.string(), }).authorization(allow => [allow.owner()]),});
export type Schema = ClientSchema<typeof schema>;
export const data = defineData({ schema, authorizationModes: { // This tells the data client in your app (generateClient()) // to sign API requests with the user authentication token. defaultAuthorizationMode: 'userPool', },});この変更を git リポジトリにコミットします。Amplify の CI/CD システムが自動的に変更を検出してビルドとデプロイを行います。
git commit -am "added per-user data isolation"git push10. アプリでのテスト
Android アプリケーションに戻って、To-do アイテムのユーザー分離をテストしてみましょう。Android Studio ターミナルで以下のコマンドを再実行して最新の amplify_outputs.json とモデルファイルを取得します。
Amplify コンソールで App ID を見つけるApp ID をお探しですか?
以下のコマンドで APP-ID を Amplify アプリ ID に置き換えてください。Amplify コンソールで確認できます。
npx @aws-amplify/backend-cli generate graphql-client-code --format modelgen --model-target java --out app/src/main/java --app-id <your-amplify-app-id> --branch main最新の outputs 情報で amplify_outputs ファイルも更新します。
npx @aws-amplify/backend-cli generate outputs --out-dir app/src/main/res/raw --app-id <your-amplify-app-id> --branch main🥳 成功
以上です!AWS Amplify でフルスタックアプリの構築に成功しました。Amplify の使い方についてさらに詳しく学びたい場合は、Amplify の仕組みの概念ガイドをご覧ください。