實作

• 建立分析服務

  透過在專案根目錄的終端機執行以下命令，將分析服務新增至您的 Amplify 專案：
  

  amplify add analytics

  Amplify CLI 將詢問一系列問題以設定分析服務。按 enter 鍵，為每個問題提供預設答案。輸出應如下所示：
  

  ➜  photo_gallery git:(master) ✗ amplify add analytics
  ? Select an Analytics provider Amazon Pinpoint
  ? Provide your pinpoint resource name: photogallery
  Adding analytics would add the Auth category to the project if not already added.
  ? Apps need authorization to send analytics events. Do you want to allow guests
  and unauthenticated users to send analytics events? (we recommend you allow this
   when getting started) Yes

  完全設定資源後，您將收到如下輸出：
  

  Successfully updated auth resource locally.
  Successfully added resource photogallery locally

  請注意，新增分析會更新我們的身份驗證類別。透過執行以下操作，在設定後端之前我們將能夠確認這一點：
  

  amplify push

  我們應取得對 Amplify 應用程式所做變更的狀態報告：
  

  ➜  photo_gallery git:(master) ✗ amplify push
  ✔ Successfully pulled backend environment dev from the cloud.
  
  Current Environment: dev
  
  | Category  | Resource name        | Operation | Provider plugin   |
  | --------- | -------------------- | --------- | ----------------- |
  | Analytics | photogallery         | Create    | awscloudformation |
  | Auth      | photogallery42b5391b | Update    | awscloudformation |
  | Storage   | s33daafe54           | No Change | awscloudformation |
  ? Are you sure you want to continue? Yes

  在後端中設定分析資源之後，您應看到一則成功訊息，以及指向應用程式的 Pinpoint 儀表板連結：
  

  ✔ All resources are updated in the cloud
  
  Pinpoint URL to track events https://us-west-2.console.aws.amazon.com/pinpoint/home/?region=us-west-2#/apps/ca14fce9dd034d6dbd7ca3ec27afc67c/analytics/overview
  

  按一下連結以查看儀表板。它看起來應像這樣：
  

  

  在記錄一些分析事件之後，我們將重新瀏覽儀表板。
  

• 安裝相依項

  在 Visual Studio Code 中，開啟 pubspec.yaml 並新增 Amplify Analytics 作為相依項：
  

  ... # amplify_storage_s3: '<1.0.0'
  
  amplify_analytics_pinpoint: '<1.0.0'
  
  ... # cached_network_image: ^2.3.3

  現在儲存檔案，以使 Visual Studio Code 安裝 Amplify Auth Cognito 外掛程式。如果未在儲存時安裝相依項，還可以從終端機執行 $ flutter pub get。

  您應取得以下輸出：
  

  exit code 0

• 設定外掛程式

  開啟 main.dart，然後將分析外掛程式新增至用於設定其他外掛程式的 Amplify 執行個體：
  

  ... // void _configureAmplify() async {
  
  _amplify.addPlugin(
      authPlugins: [AmplifyAuthCognito()],
      storagePlugins: [AmplifyStorageS3()],
      analyticsPlugins: [AmplifyAnalyticsPinpoint()]);
  
  ... // try {

  執行應用程式。您仍應在日誌中看到成功訊息，表明 Amplify 仍正確設定並且包含分析外掛程式。
  

  flutter: Successfully configured Amplify 🎉

• 實作功能

  透過執行以下操作，Amplify 分析可以非常輕鬆地記錄分析事件：
  

  final myEvent = AnalyticsEvent('my_event_name');
  myEvent.properties.addStringProperty('property_name', 'property_value');
  Amplify.Analytics.recordEvent(event: myEvent);

  然而，在應用程式中的任意點定義和建立事件可能會變得很繁瑣。相反，我們將在單一檔案中定義所有分析事件，並使每個事件作為其自己的物件。

  建立名稱為 analytics_events.dart 的新檔案，並新增以下內容：
  

  import 'package:amplify_analytics_pinpoint/amplify_analytics_pinpoint.dart';
  
  abstract class AbstractAnalyticsEvent {
    final AnalyticsEvent value;
  
    AbstractAnalyticsEvent.withName({String eventName})
        : value = AnalyticsEvent(eventName);
  }
  
  class LoginEvent extends AbstractAnalyticsEvent {
    LoginEvent() : super.withName(eventName: 'login');
  }
  
  class SignUpEvent extends AbstractAnalyticsEvent {
    SignUpEvent() : super.withName(eventName: 'sign_up');
  }
  
  class VerificationEvent extends AbstractAnalyticsEvent {
    VerificationEvent() : super.withName(eventName: 'verification');
  }
  
  class ViewGalleryEvent extends AbstractAnalyticsEvent {
    ViewGalleryEvent() : super.withName(eventName: 'view_gallery');
  }

  透過建立 AbstractAnalyticsEvent，我們可以建立自訂分析事件物件，這些物件均具有通用屬性、值，其中將包含 AnalyticsEvent 執行個體。使用一行程式碼，我們將能夠執行個體化 AbstractAnalyticsEvent，同時將實作詳細資訊保留在單一檔案中。

  我們可以更進一步。我們在為執行個體拍照時建立一個 AbstractAnalyticsEvent，但同時也讓它能夠追蹤執行個體是使用裝置的前置攝像頭還是後置攝像頭。為了實現該目的，我們首先需要向 AbstractAnalyticsEvents 新增另一個建構函數，以接受 AnalyticsEvent 作為參數。
  

  ... // : value = AnalyticsEvent(eventName);
  
  AbstractAnalyticsEvent.withEvent({AnalyticsEvent event}) 
        : value = event;
  
  ... // AbstractAnalyticsEvent closing }

  現在我們可以實作 TakePictureEvent：
  

  class TakePictureEvent extends AbstractAnalyticsEvent {
    // 1
    TakePictureEvent._fromEvent(AnalyticsEvent event)
        : super.withEvent(event: event);
  
    // 2
    factory TakePictureEvent({@String cameraDirection}) {
      final event = AnalyticsEvent('take_picture');
      event.properties.addStringProperty('camera_direction', cameraDirection);
      return TakePictureEvent._fromEvent(event);
    }
  }

  1. 我們建立了一個名稱為 _fromEvent 的私有建構函數，該函數將允許我們叫用接受 AnalyticsEvent 作為參數的超級建構函數。
  2. 工廠建構函數將是我們用於建立此事件的建構函數，並接受字串參數，從而允許將攝像頭方向作為 AnalyticsEvent 的屬性包含在內。

  現在，我們來建立一個物件，能夠將 AbstractAnalyticsEvent 的執行個體轉換為 AnalyticsEvent。建立名稱為 analytics_service 的新檔案，並新增以下內容：
  

  import 'package:amplify_core/amplify_core.dart';
  import 'analytics_events.dart';
  
  class AnalyticsService {
    static void log(AbstractAnalyticsEvent event) {
      Amplify.Analytics.recordEvent(event: event.value);
    }
  }

  AnalyticsService 很簡單，採用稱為日誌的靜態方法，這種方法使用 AbstractAnalyticsEvent 並將值傳遞給 Amplify.Analytics。就這麼簡單。

  現在，我們可以實作我們的每個具體的 AbstractAnalyticsEvent 類別。

  在 Login_page.dart 中將 LoginEvent 新增至 _login 函數：
  

  ... // widget.didProvideCredentials(credentials);
  
  AnalyticsService.log(LoginEvent());
  
  ... // _login closing }

  將 signUpEvent 新增至 sign_up_page.dart 中的 _signUp 函數中：
  

  ... // widget.didProvideCredentials(credentials);
  
  AnalyticsService.log(SignUpEvent());
  
  ... // _signUp closing }

  在 Verification_page.dart 中將 VerificationEvent 新增至 _verify 函數：
  

  ... // widget.didProvideVerificationCode(verificationCode);
  
  AnalyticsService.log(VerificationEvent());
  
  ... // _verify closing }

  將 ViewGalleryEvent 新增至 gallery_page.dart 中的建構函數：
  

  ... // : super(key: key) {
  
  AnalyticsService.log(ViewGalleryEvent());
  
  ... // constructor closing }

  最後，將 TakePictureEvent 新增至 camera_page.dart 中的 _takePicture：
  

  ... // widget.didProvideImagePath(path);
  
  AnalyticsService.log(TakePictureEvent(
      cameraDirection: widget.camera.lensDirection.toString()));
  
  ... // } catch (e) {

  由於建構函數接受字串參數，因此我們可以將 lensDirection 傳遞給我們的事件。

  執行該應用程式，嘗試擊中所有不同事件，以便至少記錄一次。

  觸發一些要記錄的分析事件後，請前往 Pinpoint 儀表板。如果您關閉了該視窗，可以透過執行以下命令返回：
  

  amplify console

  您應看到 Amplify 專案的概述：
  

  

  導覽至分析標籤，然後按一下 "View in Pinpoint" (以 Pinpoint 檢視) 按鈕：
  

  

  導覽至分析事件部分，您應能夠看到記錄的分析事件數量：
  

  

  在此情況下，我能夠在 Photo Gallery 應用程式中觸發 20 個不同的事件，這表明我們已在應用程式中成功實作 Amplify 分析。

  您可以隨時新增更多分析，或使目前的分析變得更詳細。然後，您將能夠真正了解執行個體如何與您的應用程式互動，進而知道需要重點關注的領域。
  

• 安全地共用您的專案

  如果您希望透過將程式碼託管在公有儲存庫，使 Photo Gallery 應用程式可供檢視，或使其他可一般存取，建議您從專案中刪除可能導致濫用 AWS 資源的敏感資訊。大多數敏感檔案應已在 .gitignore 中列出，但建議您確保以下兩行已包含在您的儲存庫中：
  

  amplify/
  **/amplifyconfiguration.dart

  這些行將確保在將程式碼推送至儲存庫時，不包含 amplify 目錄和 amplifyconfiguration.dart 檔案。
  

• 共用您的後端

  AWS Amplify 讓您能夠輕鬆地跨多個平台或與團隊成員共用您的設定 Amplify 後端。如果要在新平台 (例如 Web) 上建立應用程式，只需導覽至專案的根目錄並執行以下命令：
  

  ? Do you want to use an AWS profile? Yes
  ? Please choose the profile you want to use default
  ? Which app are you working on? d3p0ir7eqcu4le
  Backend environment 'dev' found. Initializing...
  ? Choose your default editor: Visual Studio Code
  ? Choose the type of app that you're building javascript
  Please tell us about your project
  ? What javascript framework are you using react
  ? Source Directory Path:  src
  ? Distribution Directory Path: build
  ? Build Command:  npm run-script build
  ? Start Command: npm run-script start
  
  ? Do you plan on modifying this backend? Yes

  如果您選擇帶有 React 的 JavaScript 平台，則以上為輸出。

  如果您打算在團隊中工作，您仍需執行 $ amplify，但該團隊成員需要存取與存放 Photo Gallery Amplify 應用程式相同的 AWS 設定檔。
  

• 刪除專案

  如果您完成該專案且不打算進一步進行，應考慮刪除 Amplify 應用程式。這樣可確保在有人取得您的專案登入資料存取權限時，不會濫用您的資源。

  若要刪除後端中的所有本機 Amplify 關聯檔案和 Amplify 專案，請執行以下命令：
  

  amplify delete

  如果您繼續刪除 Amplify 專案，則會取得如下輸出：
  

  ✔ Project deleted in the cloud
  Project deleted locally.

  ⚠️ 此動作無法復原。刪除專案後，您將無法復原，如果您需要再次使用該專案，必須重新設定類別和專案組態檔案。