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 🎉