实施

• 创建分析服务

  通过在终端的项目根目录下运行以下命令，将分析服务添加到 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，并将 Analytics 插件添加到用于配置其他插件的 Amplify 实例中：
  

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

  运行应用程序。您应该仍然会在日志中看到成功消息，表明 Amplify 仍正确配置，并且包含 Analytics 插件。
  

  flutter: Successfully configured Amplify 🎉

• 实现功能

  利用 Amplify Analytics，可以轻松记录分析事件，只需执行以下操作即可：
  

  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，我们可以创建自定义分析事件对象，这些对象都有一个公共属性“value”，该属性将包含 AnalyticsEvent 实例。只需一行代码，我们就可以实例化 AbstractAnalyticsEvent，同时将实现详细信息保存在单个文件中。

  我们可以更进一步。让我们为用户拍照创建一个 AbstractAnalyticsEvent，但同时为其赋予以下功能：跟踪用户是使用设备的前置摄像头还是后置摄像头。为此，我们首先需要添加另一个构造函数，以便 AbstractAnalyticsEvent 接受 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 很简单，它包括一个名为 log 的静态方法，该方法将接受 AbstractAnalyticsEvent 并将值传递给 Amplify.Analytics。以上就是所有步骤。

  现在我们可以实现每个具体的 AbstractAnalyticsEvent 类了。

  将 LoginEvent 添加到 login_page.dart 的 _login 函数中：
  

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

  将 SignUpEvent 添加到 sign_up_page.dart 的 _signUp 函数中：
  

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

  将 VerificationEvent 添加到 verification_page.dart 的 _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 项目概览：
  

  

  导航到“Analytics”（分析）选项卡，然后单击“View in Pinpoint”（在 Pinpoint 中查看）按钮：
  

  

  导航到分析事件部分，您应该能够看到记录了多少个分析事件：
  

  

  在本例中，我能够在 Photo Gallery 应用程序中触发 20 个不同的事件，这表明我们已经成功在应用程序中实现了 Amplify Analytics。

  您可以随意添加更多的分析或使当前的分析更详细。之后，您将能够真正了解用户如何与您的应用程序交互，这样您便知晓哪些领域需要重点改进。
  

• 安全共享您的项目

  如果您希望通过在公有存储库中托管代码以便其他人可以查看 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 pull，但团队成员需要访问存储 Photo Gallery Amplify 应用程序的同一 AWS 配置文件。
  

• 删除项目

  如果您已经完成项目，不打算继续进行此项目，应考虑删除 Amplify 应用程序。这可以确保在有人访问您的项目凭证时，您的资源不会被滥用。

  要删除后端中所有与本地 Amplify 相关的文件和 Amplify 项目，请运行以下命令：
  

  amplify delete

  如果您继续删除 Amplify 项目，将获得如下输出：
  

  ✔ Project deleted in the cloud
  Project deleted locally.

  ⚠️ 此操作无法撤消。项目删除后，无法将其恢复，如果您需要再次使用此项目，必须重新配置类别和项目配置文件。