實作

• 安裝 Amplify CLI 開發人員預覽版

  AWS Amplify CLI 取決於要安裝的 Node.js，可在此處找到。

  若要下載 CLI 的 Amplify-Flutter 開發人員預覽版，請執行以下命令：
  

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

  通過執行 $ amplify --version 來驗證您現在是否正在使用 Flutter 預覽版 CLI。您應看到以下內容：
  

  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 來驗證是否位於正確的目錄。Yout 輸出應如下所示：
  

  ➜  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 🎉