AWS 入門

建置 Flutter 應用程式

使用 AWS Amplify 建立簡單的 Flutter 應用程式

第二單元︰初始化 Amplify

在本單元中,您將安裝和設定 Amplify CLI。

簡介

現在您已實作 Photo Gallery Flutter 應用程式,可以繼續初始化 Amplify 專案。

此時,您將需要在機器上安裝 Amplify CLI 的 Amplify-Flutter 開發人員預覽版。安裝完成後,我們將在專案的根目錄下初始化 Amplify,將 Amplify 相依項安裝至我們的專案,並確保在每次執行應用程式期間均正確設定 Amplify。

您將學到的內容

  • 透過指令列初始化新的 Amplify 專案
  • 將 Amplify 新增為專案的相依項
  • 在執行時間初始化 Amplify 程式庫

主要概念

Amplify CLI – Amplify CLI 讓您可以直接從終端機建立、管理和移除 AWS 服務。

Amplify 程式庫 – Amplify 程式庫讓您可以透過 Web 或行動應用程式與 AWS 服務進行互動。

 完成時間

10 分鐘

 使用的服務

實作

  • 安裝 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 🎉

結論

您已在我們的專案根目錄中初始化 Amplify! 在下一個單元中,我們將僅使用幾行程式碼,新增完整的使用者身份驗證流程。

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
關閉
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。
關閉

新增身份驗證