技術ブログ

2023年10月31日

FlutterとAWS Amplifyでプッシュ通知（Push Notification）の環境を構築する手順

こんにちは！先日、ひさしぶりに AWS AmplifyのFlutterページ を見ていると、なにやら見慣れぬ Push Notification が追加されていました。AWSのこの手の機能を実装する際に意外に大変なのは環境構築。ここでつまづく方も多いのではないでしょうか。そんな方のために、この記事ではFlutterとAWS Amplifyを使用したPush Notification（プッシュ通知）の環境構築の手順を記載したいと思います。

※Flutterの環境構築は完了しているものとします。

Amplify CLIの設定

  1. Node.js, npm, gitをインストール。
  2. npm install -g @aws-amplify/cli
  3. amplify configure
    コマンドプロンプトでENTERを押してIAMの設定をします。
    上記URLの通り手順を進めアクセスキーを作成。
    ※Option項目は今回スキップ。
  4. ②で作成したアクセスキーとシークレットアクセスキーを入力。

Firebaseプロジェクトの作成

※「プロジェクトを作成から」作成。

Firebaseにアプリを登録

※FlutterFire CLIを使えば簡単にAndroid, iOSの環境構築が出来ます。今回はAndroidだけで実装する為個別で登録します。

  1. Androidのアイコンをクリック。
  2. Android パッケージ名の箇所にアプリのパッケージ名(アプリケーションID)を入力。
    ※プロジェクト/android/build.gradleの中に書いてあるアプリケーションID。
  3. google-services.jsonをダウンロードしてFlutterアプリに追加。
    配置場所：Flutterプロジェクト/android/app/
  4. /android/build.gradle/に以下を追加。
    dependencies {
     classpath 'com.android.tools.build:gradle:7.3.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:4.4.0' //Google Services plugin
    }
  5. 以下が存在することを確認する。
    allprojects {
     repositories {
    　　 google() //これがあるか確認
    　　 mavenCentral()
    　　　}
    }
  6. プロジェクト/android/app/build.gradle/に以下を追加。
    apply plugin: 'com.google.gms.google-services'

Firebase Cloud Consoleにアプリを登録

  1. プロジェクトを作成していない場合は新規作成します。
  2. 画面左上の歯車アイコンをクリックし「プロジェクトの設定」をクリック。
  3. Cloud Messagingタブをクリック。
  4. 「Cloud Messaging API (Legacy)」の横にある 3 つの縦のドットを選択し、「Google Cloud Console で API を 管理」を選択。
  5. 新規タブが開き「有効にする」をクリック。
  6. 元のページに戻り画面を更新する。
  7. サーバーキーをコピー。

バックエンドリソースのセットアップ

  1. プロジェクトのディレクトリで以下のコマンドを実行。
    amplify add notifications
  2. FCMを選択しサーバー キーの入力を求めるプロンプトが表示されるので「Firebase Cloud Consoleにアプリを登録」の7で発行されたサーバーキーを貼り付ける。正常完了するとamplifyconfiguration.dart が更新される。

Amplifyライブラリのインストール

プロジェクトのpubspec.yamlのdependenciesに以下を追加する。

dependencies: 
    amplify_auth_cognito: ^1.0.0 
    amplify_flutter: ^1.0.0 
    amplify_push_notifications_pinpoint: ^1.0.0

Amplify Push Notificationの初期化

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_push_notifications_pinpoint/amplify_push_notifications_pinpoint.dart';
import 'package:flutter/cupertino.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

  Future<void> _configureAmplify() async {
    try {
      final authPlugin = AmplifyAuthCognito();
      final pushPlugin = AmplifyPushNotificationsPinpoint();
      await Amplify.addPlugins([authPlugin, pushPlugin]);
      await Amplify.configure(amplifyconfig);
    } on Exception catch (e) {
      safePrint('An error occurred configuring Amplify: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    // Your application UI
  }
}

以上、みなさんの参考になれば幸いです。

参考記事

https://docs.amplify.aws/lib/project-setup/prereq/q/platform/flutter/#configure-the-amplify-cli

https://firebase.google.com/docs/cloud-messaging/android/first-message?hl=ja#register_your_app_with_firebase

https://docs.amplify.aws/lib/push-notifications/setup-push-service/q/platform/flutter/

https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/flutter/#set-up-backend-resources

アバター画像