AWS の開始方法

Flutter アプリケーションを構築する

AWS Amplify を使用してシンプルな Flutter アプリケーションを作成する

モジュール 5: 分析カテゴリを追加する

このモジュールでは、分析カテゴリを追加し、カスタムイベントを作成し、追跡中の分析を表示します。

はじめに

フォトギャラリーアプリケーションは現在すべての機能が利用可能となっており、ユーザー認証と撮影した写真をストレージにアップロードができる状態です。ここでは、分析を記録して、ユーザーのアプリケーションとのインタラクション状況を把握することに絞り込みます。

このモジュールでは、Amplify アプリケーションに分析カテゴリを追加し、カスタムの分析イベントを作成し、そのイベントを運用し、Amazon Pinpoint ダッシュボードに表示させて追跡中の分析を閲覧します。

学習内容

  • 分析カテゴリを作成する
  • Amazon Pinpoint に分析イベントを記録する
  • Amazon Pinpoint ダッシュボードに表示させる

主要な概念

分析 - アプリケーションの各インスタンスにイベントが発生した際の記録はユーザーの行動パターン分析を収集するためには価値ある方法で、アプリケーションの持つ機能の重要性を判断する材料となり得ます。

 所要時間

10 分

 使用するサービス

実装

  • 分析サービスを作成する

    プロジェクトのルートディレクトリのターミナルで下記を実行して、分析サービスを Amplify プロジェクトに追加します。

    amplify add analytics

    Amplify CLI から一連の質問が投げかけられて、分析サービスが設定されます。Enter キーを押して、各質問に既定値で回答します。出力結果は下記のようになります。

    ➜  photo_gallery git:(master) ✗ amplify add analytics
    ? Select an Analytics provider Amazon Pinpoint
    ? Provide your pinpoint resource name: photogallery
    Adding analytics would add the Auth category to the project if not already added.
    ? Apps need authorization to send analytics events. Do you want to allow guests
    and unauthenticated users to send analytics events? (we recommend you allow this
     when getting started) Yes

    リソースが完全に設定されると、下記のような出力結果を受信します。

    Successfully updated auth resource locally.
    Successfully added resource photogallery locally

    追加しようとしている分析によって、Auth カテゴリが更新されることになります。このことは、バックエンド設定を終える前に、下記を実行すると確認できます。

    amplify push

    Amplify アプリケーションに対してなされた変更のステータスレポートが取得できるはずです。

    ➜  photo_gallery git:(master) ✗ amplify push
    ✔ Successfully pulled backend environment dev from the cloud.
    
    Current Environment: dev
    
    | Category  | Resource name        | Operation | Provider plugin   |
    | --------- | -------------------- | --------- | ----------------- |
    | Analytics | photogallery         | Create    | awscloudformation |
    | Auth      | photogallery42b5391b | Update    | awscloudformation |
    | Storage   | s33daafe54           | No Change | awscloudformation |
    ? Are you sure you want to continue? Yes

    分析リソースがバックエンドで設定されたら、成功メッセージがアプリケーションの Pinpoint ダッシュボードへのリンクとともに表示されます。

    ✔ All resources are updated in the cloud
    
    Pinpoint URL to track events https://us-west-2.console.aws.amazon.com/pinpoint/home/?region=us-west-2#/apps/ca14fce9dd034d6dbd7ca3ec27afc67c/analytics/overview
    

    リンクをクリックして、ダッシュボードを表示させます。下記のようになるはずです。

    FlutterApp-Module5Photo1

    ダッシュボードには、分析イベントを記録してから戻ることになります。

  • 依存関係をインストールする

    Visual Studio Code で pubspec.yaml を開き、Amplify 分析を依存関係として追加します。

    ... # amplify_storage_s3: '<1.0.0'
    
    amplify_analytics_pinpoint: '<1.0.0'
    
    ... # cached_network_image: ^2.3.3

    このファイルを保存して、Visual Studio Code に Amplify Auth Cognito プラグインをインストールさせます。保存時に依存関係がインストールされない場合は、ターミナルから「$ flutter pub get」を実行することもできます。

    下記のような出力結果が得られるはずです。

    exit code 0
  • プラグインを設定する

    main.dart を開き、さまざまなプラグインの設定に使用された Amplify のインスタンスに分析プラグインを追加します。

    ... // void _configureAmplify() async {
    
    _amplify.addPlugin(
        authPlugins: [AmplifyAuthCognito()],
        storagePlugins: [AmplifyStorageS3()],
        analyticsPlugins: [AmplifyAnalyticsPinpoint()]);
    
    ... // try {

    アプリケーションを実行します。Amplify が今も適切に設定され、分析プラグインを含んでいることを示す成功メッセージがログに表示されるはずです。

    flutter: Successfully configured Amplify 🎉
  • 機能を実装する

    Amplify 分析を使用すると、下記のようにきわめて簡単に分析イベントが記録できます。

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

    ただし、アプリケーションの任意のポイントでイベントを定義、作成することは、継続するには煩雑になることがあります。そこで、すべての分析イベントを単一ファイルで定義し、各イベントは独自のオブジェクトとすることにします。

    analytics_events.dart という新しいファイルを作成し、下記を追加します。

    import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
    
    abstract class AbstractAnalyticsEvent {
      final AnalyticsEvent value;
    
      AbstractAnalyticsEvent.withName({String eventName})
          : value = AnalyticsEvent(eventName);
    }
    
    class LoginEvent extends AbstractAnalyticsEvent {
      LoginEvent() : super.withName(eventName: 'login');
    }
    
    class SignUpEvent extends AbstractAnalyticsEvent {
      SignUpEvent() : super.withName(eventName: 'sign_up');
    }
    
    class VerificationEvent extends AbstractAnalyticsEvent {
      VerificationEvent() : super.withName(eventName: 'verification');
    }
    
    class ViewGalleryEvent extends AbstractAnalyticsEvent {
      ViewGalleryEvent() : super.withName(eventName: 'view_gallery');
    }

    AbstractAnalyticsEvent を作成すると、共通のプロパティと値を持つカスタム分析イベントオブジェクトを作成して、AnalyticsEvent インスタンスに含められます。単一ファイルに実装詳細を保持しながら、1 行のコードで AbstractAnalyticsEvent のインスタンスを作成できます。

    これをワンステップ先に進めてみます。ユーザーが写真を撮影したときのために AbstractAnalyticsEvent を作成してみます。さらに、ユーザーがデバイスのフロントカメラとバックカメラのどちらを使用したか追跡する機能を AbstractAnalyticsEvent に与えてみます。これを達成するには、まず AbstractAnalyticsEvents が AnalyticsEvent をパラメータとして受け入れるようにコンストラクタをもう 1 つ追加する必要があります。

    ... // : value = AnalyticsEvent(eventName);
    
    AbstractAnalyticsEvent.withEvent({AnalyticsEvent event}) 
          : value = event;
    
    ... // AbstractAnalyticsEvent closing }

    これで、TakePictureEvent を運用できるようになりました。

    class TakePictureEvent extends AbstractAnalyticsEvent {
      // 1
      TakePictureEvent._fromEvent(AnalyticsEvent event)
          : super.withEvent(event: event);
    
      // 2
      factory TakePictureEvent({@String cameraDirection}) {
        final event = AnalyticsEvent('take_picture');
        event.properties.addStringProperty('camera_direction', cameraDirection);
        return TakePictureEvent._fromEvent(event);
      }
    }
    1. AnalyticsEvent をパラメータとして受け入れるスーパーコンストラクタを呼び出せるようにする _fromEvent と呼ばれるプライベートコンストラクタを作成します。
    2. このイベントの作成に使用するファクトリーコンストラクタは String パラメータを受け入れて、カメラの向きが AnalyticsEvent のプロパティとして含まれるようにします。

    それでは、AbstractAnalyticsEvent のインスタンスを AnalyticsEvent に変換する機能を搭載するオブジェクトを作成してみましょう。analytics_service という新しいファイルを作成し、下記を追加します。

    import 'package:amplify_core/amplify_core.dart';
    import 'analytics_events.dart';
    
    class AnalyticsService {
      static void log(AbstractAnalyticsEvent event) {
        Amplify.Analytics.recordEvent(event: event.value);
      }
    }

    シンプルな AnalyticsService はそのログと呼ばれる静的メソッドによって、AbstractAnalyticsEvent を受け入れ、その値を Amplify.Analytics に渡します。これだけです。

    これで、AbstractAnalyticsEvent クラスが実体として運用できるようになりました。

    LoginEvent を login_page.dart の _login 関数に追加します。

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(LoginEvent());
    
    ... // _login closing }

    SignUpEvent を sign_up_page.dart の _signUp 関数に追加します。

    ... // widget.didProvideCredentials(credentials);
    
    AnalyticsService.log(SignUpEvent());
    
    ... // _signUp closing }

    VerificationEvent を verification_page.dart の _verify 関数に追加します。

    ... // widget.didProvideVerificationCode(verificationCode);
    
    AnalyticsService.log(VerificationEvent());
    
    ... // _verify closing }

    ViewGalleryEvent を gallery_page.dart のコンストラクタに追加します。

    ... // : super(key: key) {
    
    AnalyticsService.log(ViewGalleryEvent());
    
    ... // constructor closing }

    最後に、TakePictureEvent を camera_page.dart の _takePicture に追加します。

    ... // widget.didProvideImagePath(path);
    
    AnalyticsService.log(TakePictureEvent(
        cameraDirection: widget.camera.lensDirection.toString()));
    
    ... // } catch (e) {

    コンストラクタが文字列引数を受け入れるため、lensDirection をイベントに渡せるようになりました。

    アプリケーション通して実行し、さまざまなイベントすべてにヒットして、少なくとも 1 回は記録されるようにします。

    分析イベントをいくつか記録されるようにトリガーしたら、Pinpoint ダッシュボードに進みます。そのウィンドウを閉じて、下記を実行して戻ります。

    amplify console

    Amplify プロジェクトの概要が表示されているはずです。

    FlutterApp-Module5Photo2

    [Analytics (分析)] タブから、[View in Pinpoint (Pinpoint で表示)] ボタンをクリックします。

    FlutterApp-Module5Photo3

    分析イベントセクションに進むと、記録された分析イベント数が表示されているはずです。

    FlutterApp-Module5Photo4

    このケースでは、フォトギャラリーアプリケーションで異なる 20 のイベントをトリガーできた結果、アプリケーションに Amplify 分析を正しく組み込めました。

    分析をさらに追加することも、現行の分析の詳細度を上げることも可能です。その結果、ユーザーのアプリケーションとのインタラクション状況が把握できるようになり、改善に注力すべき領域がわかります。

まとめ

AWS Amplify を使用してシンプルな Flutter アプリケーションをビルドしました。 フォトギャラリーが完成し、認証、ストレージ、分析のサービスを運用できるようになったら、そこから先の手順はコードの一般公開、異なるプラットフォームへのプロジェクトの拡張、プロジェクトの削除と、あとわずかです。

このモジュールでは、残りの各手順を詳しく見ていきます。

  • プロジェクトを安全に共有する

    パブリックリポジトリにコードをホスティングするか、または誰でもアクセス可能にしてフォトギャラリーアプリケーションを一般公開したいのであれば、AWS リソースを悪用されないようにプロジェクトから機密情報を削除しておくことをお勧めします。機密ファイルの多くは .gitignore にリスト化されているはずですが、リポジトリには下記の 2 行を追加しておくことをお勧めします。

    amplify/
    **/amplifyconfiguration.dart

    この 2 行によって、コードをリポジトリにプッシュした際に、Amplify ディレクトリと amplifyconfiguration.dart ファイルが除外されます。

  • バックエンドを共有する

    AWS Amplify を使用すると、複数のプラットフォーム全体でも、チームメンバー間でも、簡単に configure Amplify バックエンドを共有できます。新しいプラットフォーム、例えばウェブでアプリケーションを作成したいのであれば、プロジェクトのルートディレクトリから下記のコマンドを実行します。

    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default
    ? Which app are you working on? d3p0ir7eqcu4le
    Backend environment 'dev' found. Initializing...
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building javascript
    Please tell us about your project
    ? What javascript framework are you using react
    ? Source Directory Path:  src
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    
    ? Do you plan on modifying this backend? Yes

    上記は、React に JavaScript プラットフォームを選択した場合の出力結果です。

    チームで作業しようとする場合には $ amplify pull を実行することが考えられますが、チームメンバーにはフォトギャラリー Amplify アプリケーションが格納されている場所と同じ AWS プロフィールへのアクセス権限が必要になります。

  • プロジェクトを削除する

    プロジェクトが終わり、そのプロジェクトですることがなくなったら、Amplify アプリケーションを削除することを検討してください。プロジェクトを削除すれば、何者かがプロジェクトの認証情報にアクセスしてリソースを悪用することもありません。

    Amplify 関連のローカルファイルおよびバックエンドの Amplify プロジェクトをすべて削除するには、下記のコマンドを実行します。

    amplify delete

    Amplify プロジェクトの削除手順を終えると、下記のような出力結果が表示されます。

    ✔ Project deleted in the cloud
    Project deleted locally.

    ⚠️ この操作は元に戻すことができません。プロジェクトが削除されると、元には戻せません。プロジェクトを再度使用する場合は、カテゴリおよびプロジェクト設定ファイルを再設定する必要があります。

このチュートリアルを最後まで続けていただき、ありがとうございます。以下のツールで、ご意見をお聞かせください。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
閉じる
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。
閉じる

おめでとうございます。

AWS で Flutter アプリケーションをビルドできました。 次のステップとして、具体的な AWS テクノロジーをさらに詳しく見て、アプリケーションを次のレベルに引き上げます。