AWS AmplifyとFlutterでクロスプラットフォームなアプリを作る

本記事は  モバイルアプリWeek  4日目の記事です。
📳  3日目  ▶▶ 本記事 ▶▶  5日目  📳

こんにちは、古田です。

今回は、AWS Amplifyを使って、Flutterのクロスプラットフォームアプリを試してみたいと思います。

Flutterってなんだ？という時は、岡さんの記事が詳しいです。 tech.nri-net.com

Amplifyってなんだ？という方は、拙記事で概要を紹介しています。 tech.nri-net.com

はじめに、Firebaseとの比較

ネイティブアプリのmBaaSとして見た場合、Amplifyの比較対象はGoogleのFirebaseになりますよね。主な機能を表にしました。機能の中身の差は置いておいたとして、ラインナップはAmplifyとFirebaseの間に差はないように見えます。

	AWS Amplify	Firebase
ホスティング	Hosting / Amplify Console	Firebase Hosting
認証	Authentication ( Amazon Cognito )	Firebase Authentication
データベース	Database ( Amazon DynamoDB )	Firestore / Realtime Database
ストレージ	Storage ( Amazon S3 )	Cloud Storage for Firebase
アナリティクス	Analytics ( Amazon Pinpoint )	Google Analytics for Firebase
API	API ( AWS AppSync / Amazon API Gateway )	Cloud Functions for Firebase
通知	Notifications ( Amazon Pinpoint )	FCM

しかし、今回はクロスプラットフォームを目標に掲げているため、プラットフォーム別の対応状況を確認する必要があります。こちらも簡単な一覧表にまとめてみました。

プラットフォーム別のmBaaS機能対応状況（2022年5月時点）*1*2*3*4

Amplify for Flutterは基本的にiOS/Androidアプリのみに対応しており、Webやデスクトップには対応していません。特にAmplify ConsoleでFlutter Webアプリのホスティングができないのは痛いですね…。

Webやデスクトップもいける点がFlutterの大きな特徴だと思っていたので、やや出鼻を挫かれてしまいましたが、iOS/Androidのオーソドックス（？）なクロスプラットフォームアプリを試していくことにします。

（その理想とは裏腹に、プラットフォームごとの対応可否や固有動作に苦しむのがクロスプラットフォームの常であり、醍醐味でもあり……）

やってみよう

公式のチュートリアルを参考に、AuthenticationとAnalyticsを実装していきたいと思います。

• Authentication Getting started - Amplify Doc
• Authenticator | Flutter - Amplify UI
• Analytics Getting started - Amplify Doc

プロジェクトの準備

環境は以下

$ flutter --version
Flutter 2.10.5 • channel stable • https://github.com/flutter/flutter.git 
Framework • revision 5464c5bac7 (4 weeks ago) • 2022-04-18 09:55:37 -0700
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2
$ amplify --version
8.1.0

新規のFlutterプロジェクトを作り、Amplifyをセットアップします

$ flutter create amplutter

$ amplify configure
$ amplify init

AWSコンソールで確認すると、Amplifyアプリができて、バックエンド環境が構築されています。

認証機能を作る

Amplify StudioでバックエンドにAuthenticationを作ります。

pullしてamplifyconfiguration.dartが更新されることを確認します。

$ amplify pull

次はフロントエンド側

Flutterプロジェクトにpub.devからAmplifyライブラリを入れます。

dependencies:
  flutter:
    sdk: flutter
  amplify_flutter: ^0.4.0
  amplify_auth_cognito: ^0.4.0
  amplify_authenticator: ^0.1.0

main.dart はこう。

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.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();
  }

  void _configureAmplify() async {
    try {
      await Amplify.addPlugin(AmplifyAuthCognito());
      await Amplify.configure(amplifyconfig);
      print('Successfully configured');
    } on Exception catch (e) {
      print('Error configuring Amplify: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Text('You are logged in!'),
          ),
        ),
      ),
    );
  }
}

iPhoneとAndroidで動かしてみましょう。できてますね🎉

ロギングしてみる

Amplify CLIでバックエンドにanalyticsを追加します。

$ amplify add analytics

pushして、Amplify Studioでバックエンドが構築されたことを確認します。手元のamplifyconfiguration.dartにもanalyticsが反映されていると思います。

$ amplify push

フロント側は、まずライブラリを追加し、

dependencies:
  flutter:
    sdk: flutter
  amplify_flutter: ^0.4.0
  amplify_auth_cognito: ^0.4.0
  amplify_authenticator: ^0.1.0
  amplify_analytics_pinpoint: ^0.4.0 #ADD

main.dart に出力処理を追記し、アプリを動かしてみましょう。

AnalyticsEvent myEvent = AnalyticsEvent('my_event_name');
myEvent.properties.addStringProperty('property_name', 'property_value');
Amplify.Analytics.recordEvent(event: myEvent );

Pinpointのコンソールを見ると、イベントが上がってきました。（すぐに反映されなかったので、小一時間ほど待ちました）

フィルタからカスタムイベントを指定して見ることもできます。プラットフォームなどの属性情報は自動的に取得されるようです。ロギングというよりは、送信タイミングだけ考えて実装すればファネル分析ができる、デジタルマーケティング的なサービスなんですね。（Pinpoint初めて触りました）

さいごに

チュートリアルに沿って、特に詰まることなく、iOS/Android共に各バックエンド機能を実現することができました。

この記事を書いてる途中に、Google I/O会議でFlutter3が発表され*5、FlutterとFirebaseの統合が強化されています。FlutterFireの勢いは眩しいのですが、Amplifyもアップデートの勢いでは負けてないと思うので、今後のFlutterサポートにも期待したいところです。

*1:Add Firebase to your Flutter app

*2:Getting started with deploying an app to Amplify Hosting - AWS Amplify Hosting

*3:Web support for amplify-flutter · Issue #234 · aws-amplify/amplify-flutter · GitHub

*4:表には含めていませんがFlutterFire以外にWindowsやLinuxなどのデスクトップに対応した3rd Partyもあり。

*5:Flutter at Google I/O 2022

執筆者古田 拓也

たぶんシステムアーキテクト。
デスクトップアプリが専門でしたが最近は何でも屋