Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

クイックスタート

👋 AWS Amplify へようこそ!このクイックスタートガイドでは、以下を行います:

  1. Amplify バックエンドのデータベースと認証を AWS にデプロイする
  2. Android アプリからバックエンドに接続する
  3. バックエンドの更新を行う

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 を選択します。

Shows the Android studio welcome window

Select a Project TemplateEmpty Activity または Empty Compose Activity を選択します。Next を押します。

Shows Android studio new project window

  • Name フィールドに MyAmplifyApp と入力する
  • Language ドロップダウンメニューから Java または Kotlin を選択する
  • Minimum SDK ドロップダウンメニューから API 24: Android 7.0 (Nougat) を選択する
  • Finish を押す

Shows Android studio configure project window

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 に以下の行を追加します:

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 ファイルに以下の依存関係を追加する必要があります:

compileSdk のバージョンが 34 以上であることを確認してください。
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 クラスを作成し、以下のコードを追加します:

MyAmplifyApp.kt
import android.app.Application
import android.util.Log
import com.amplifyframework.AmplifyException
import com.amplifyframework.auth.cognito.AWSCognitoAuthPlugin
import com.amplifyframework.core.Amplify
import 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 ファイルでこのクラスを呼び出します:

AndroidManifest.xml
<application
android:name=".MyAmplifyApp"
...
</application>

Android Authenticator コンポーネントを使用するように MainActivity.kt を更新します。

MainActivity.kt
import android.os.Bundle
..
import com.amplifyframework.ui.authenticator.ui.Authenticator
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import 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 コンソールで確認できます。 image

Terminal
cd my-android-app
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

完了したら、プロジェクトに以下の依存関係を追加します:

build.gradle.kts
dependencies {
// Amplify API dependencies
implementation("com.amplifyframework:aws-api:ANDROID_VERSION")
// ... other dependencies
}

依存関係を追加したら、MyAmplifyApp クラスを開き、configure 呼び出しの前に以下の行を追加します:

MyAmplifyApp.kt
import com.amplifyframework.api.aws.AWSApiPlugin
..
Amplify.addPlugin(AWSApiPlugin())

新しい To-do アイテムを作成するために MainActivity クラスを以下のコードで更新します。onClick 関数は新しい Todo アイテムを作成します。

MainActivity
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")
}
}
}
}
}
}
}
}

次に、追加されたアイテムを表示するロジックを追加します。

MainActivity.kt
@Composable
fun 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() を呼び出します:

MainActivity.kt
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 のサブスクリプション機能を使用できます。アプリケーションの onCreateonUpdateonDelete イベントをサブスクライブできます。この例では、新しい Todo が追加されるたびにリストに追加しましょう。

MainActivity.kt
@Composable
fun 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. ユーザーごとの認可の実装

まず、デプロイされたリポジトリをクローンします。

Terminal
git clone https://github.com/<github-user>/amplify-backend-template.git
cd amplify-backend-template
npm install

バックエンドの To-do モデルはすべてのユーザー間でデータを共有するように設定されていますが、ほとんどの場合、データはユーザーごとに分離することが望まれます。

ユーザーごとにデータを分離するには、「オーナーベースの認可ルール」を使用できます。To-do アイテムにオーナーベースの認可ルールを適用しましょう:

amplify/data/resource.ts
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 システムが自動的に変更を検出してビルドとデプロイを行います。

Terminal
git commit -am "added per-user data isolation"
git push

10. アプリでのテスト

Android アプリケーションに戻って、To-do アイテムのユーザー分離をテストしてみましょう。Android Studio ターミナルで以下のコマンドを再実行して最新の amplify_outputs.json とモデルファイルを取得します。

Amplify コンソールで App ID を見つける
App ID をお探しですか?

以下のコマンドで APP-ID を Amplify アプリ ID に置き換えてください。Amplify コンソールで確認できます。

image

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 の仕組みの概念ガイドをご覧ください。