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 🎉