AWS の開始方法

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

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

モジュール 2: Amplify を初期化する

このモジュールでは、Amplify CLI をインストールして設定します。

はじめに

Flutter フォトギャラリーアプリを実装したので、Amplify プロジェクトの初期化に進むことができます。

この時点で、お使いのマシンに Amplify CLI の Amplify-Flutter デベロッパープレビューバージョンがインストールされている必要があります。インストールしたら、プロジェクトのルートディレクトリで Amplify を初期化し、Amplify の依存関係をプロジェクトにインストールし、アプリの実行中に毎回、Amplify が適切に設定されていることを確認します。

学習内容

  • コマンドラインからの新しい Amplify プロジェクトの初期化
  • プロジェクトに対する Amplify の依存関係としての追加
  • 実行時における Amplify ライブラリの初期化

主要な概念

Amplify CLI – Amplify CLI により、ターミナルから直接 AWS のサービスを作成、管理、削除できます。

Amplify ライブラリ – Amplify ライブラリにより、ウェブまたはモバイルアプリケーションから AWS のサービスとやり取りできます。

 所要時間

10 分

 使用するサービス

実装

  • Amplify CLI デベロッパープレビューをインストールする

    AWS Amplify CLI は、インストールされる Node.js に依存します。Node.js については、こちらをご覧ください。

    CLI の Amplify-Flutter デベロッパープレビューバージョンをダウンロードするには、以下を実行します。

    npm install -g @aws-amplify/cli@flutter-preview

    $ amplify --version を実行して、CLI の Flutter プレビューバージョンを使用していることを確認します。次のように表示されます。

    photo_gallery git:(master) ✗ amplify --version
    Scanning for plugins...
    Plugin scan successful
    4.26.1-flutter-preview.0

    Amplify CLI をまだ設定していない場合は、必ず次のコマンドを実行してください。

    amplify configure

    設定プロセスをガイド付きで実施できます。CLI の設定の詳細については、こちらをご覧ください。

  • Amplify を初期化する

    Amplify プロジェクトを作成するには、プロジェクトのルートディレクトリでプロジェクトを初期化および設定する必要があります。

    プロジェクトのルートに移動します。

    cd path/to/your/project

    $ ls -al を実行して、正しいディレクトリを開いていることを確認します。出力は次のようになります。

    ➜  photo_gallery git:(master) ✗ ls -al
    total 80
    drwxr-xr-x  18 kiloloco  staff   576 Oct 19 18:07 .
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 ..
    drwxr-xr-x   4 kiloloco  staff   128 Oct 18 22:15 .dart_tool
    -rw-r--r--   1 kiloloco  staff   536 Oct 19 19:43 .flutter-plugins
    -rw-r--r--   1 kiloloco  staff  1422 Oct 19 19:43 .flutter-plugins-dependencies
    -rw-r--r--   1 kiloloco  staff   621 Oct 18 21:10 .gitignore
    drwxr-xr-x   6 kiloloco  staff   192 Oct 18 21:10 .idea
    -rw-r--r--   1 kiloloco  staff   305 Oct 18 21:10 .metadata
    -rw-r--r--   1 kiloloco  staff  3648 Oct 19 18:07 .packages
    -rw-r--r--   1 kiloloco  staff   543 Oct 18 21:10 README.md
    drwxr-xr-x  12 kiloloco  staff   384 Oct 18 21:10 android
    drwxr-xr-x   5 kiloloco  staff   160 Oct 18 22:20 build
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 19:04 ios
    drwxr-xr-x  11 kiloloco  staff   352 Oct 19 18:08 lib
    -rw-r--r--   1 kiloloco  staff   896 Oct 18 21:10 photo_gallery.iml
    -rw-r--r--   1 kiloloco  staff  6047 Oct 19 18:07 pubspec.lock
    -rw-r--r--   1 kiloloco  staff  2926 Oct 19 18:07 pubspec.yaml
    drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 test

    次に、Amplify プロジェクトを初期化します。

    amplify init

    プロジェクトの設定方法に関するいくつかの質問が表示されるはずです。各質問で Enter キーを押すと、各質問に対するデフォルトの回答が入力されます。出力はこのようになります。

    ➜  photo_gallery git:(master) ✗ amplify init
    Note: It is recommended to run this command from the root of your app directory
    ? Enter a name for the project photogallery
    ? Enter a name for the environment dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that you're building flutter
    Please tell us about your project
    ⚠️  Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW.
    Only the following categories are supported:
     * Auth
     * Analytics
     * Storage
    ? Where do you want to store your configuration file? ./lib/
    Using default provider  awscloudformation
    
    For more information on AWS Profiles, see:
    https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
    
    ? Do you want to use an AWS profile? Yes
    ? Please choose the profile you want to use default

    CLI がクラウド上でプロジェクトの作成を完了すると、次のような出力が得られるはずです。

    ✔ Successfully created initial AWS cloud resources for deployments.
    ✔ Initialized provider successfully.
    Initialized your environment successfully.
    
    Your project has been successfully initialized and connected to the cloud!

    プロジェクトのルートディレクトリで $ ls を実行すると、amplify.json という新しいファイルと、amplify というフォルダがプロジェクトに追加されていることがわかります。$ ls lib を実行すると、amplifyconfiguration.dart という新しいファイルもそこに追加されていることがわかります。

  • プロジェクトに依存関係を追加する

    次のステップでは、プロジェクトに Amplify を依存関係としてインストールして、ライブラリとやり取りできるようにします。

    Visual Studio Code に戻り、pubspec.yaml を開いて次の依存関係を追加します。

    ... # path:
    
    amplify_core: '<1.0.0'
    
    ... # dev_dependencies

    ファイルを保存するか、またはターミナルからアプリのルートディレクトリで $ flutter pub get を実行します。

    プロセスは次の出力で終了するはずです。

    exit code 0

    iOS の場合は、[Podfile] を開き ([iOS] > [Podfile])、プラットフォームを 11.0 以降に更新します。

    ... # Uncomment this line to define a global platform for your project
    
    platform :ios, '11.0'
    
    ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
  • アプリケーションに統合する

    Amplify Flutter ライブラリを使用するには、いずれかのカテゴリを使用する前に Amplify を設定することが重要です。

    main.dart を開き、_MyAppState に Amplify のインスタンスを追加します。

    ... // class _MyAppState extends State<MyApp> {
    
    final _amplify = Amplify();
    
    ... // final _authService = AuthService();

    次に、Amplify を設定する関数を作成します。

    ... // build closing }
    
    void _configureAmplify() async {
      try {
        await _amplify.configure(amplifyconfig);
        print('Successfully configured Amplify 🎉');
      } catch (e) {
        print('Could not configure Amplify ☠️');
      }
    }
    
    ... // _MyAppState closing }

    この関数は、生成されたファイル /lib/amplifyconfiguration.dart によって提供される amplifyconfig を渡し、使用する必要のあるプラグインで Amplify オブジェクトの設定を試みます。この後のモジュールで、プラグインの追加を開始します。

    次に、_MyAppState の initState() で _configureAmplify() を呼び出します。

    ... // super.initState();
    
    _configureAmplify();
    
    ... // _authService.showLogin();

    アプリを実行すると、ログに次のような出力が表示されます。

    flutter: Successfully configured Amplify 🎉

まとめ

プロジェクトのルートディレクトリで Amplify を初期化しました。 次のモジュールでは、ほんの数行のコードでユーザー認証フロー全体を追加します。

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