使用 React 和 AWS Amplify 实现无服务器架构 第三部分：跟踪应用使用情况

无服务器架构是一种云计算执行模型，云服务提供商负责执行代码，并根据需要动态分配资源来运行代码。借助无服务器架构，我们可以降低运营成本并缩短开发时间。它使我们能够专注于代码编写，为用户创造业务价值，而无需担心服务器的构建和维护。配置这些服务并将其集成到我们的代码中需要几个步骤，而 AWS Amplify 的设计初衷就是为了简化在 AWS 上构建无服务器应用程序的过程。它提供了一些工具，只需几个命令即可创建和配置服务，以及一些库组件，方便我们从代码中与这些服务进行交互。

本文是系列文章的一部分，我将在此系列文章中向您展示如何使用 React 和 AWS Amplify 构建无服务器应用程序。在第一篇文章中，我们搭建了开发环境、创建了一个 Amplify 项目和一个 React 项目。在第二篇文章中，我们创建了运行在不同 AWS 服务上的后端服务，并构建了一个 React 应用来执行 CRUD 操作，从而与这些后端服务进行交互。在本文中，我们将为之前文章中构建的应用程序添加分析和使用情况跟踪功能。

设置分析后端

在许多应用中，都需要捕获应用使用数据，以便企业能够深入了解客户如何与应用互动。我们将使用 Amazon Pinpoint 来跟踪 React 应用的使用指标。Amazon Pinpoint 具有以下几种事件类型：

1. 盈利事件。此事件类型用于报告您的应用程序产生的收入以及用户购买的商品数量。
2. 会话事件。它们跟踪使用情况，并指示用户何时以及多久打开和关闭您的应用。
3. 身份验证事件。此类别显示用户使用您的应用程序进行身份验证的频率。登录、注册和身份验证失败均在此类别中进行跟踪。
4. 自定义事件。此类事件代表您通过指定自定义事件类型来定义的非标准事件。您可以向自定义事件添加自定义属性和指标。

要将 Pinpoint 添加到我们的项目中，请打开 React 项目的根目录并按照以下说明操作。

1. 运行该命令amplify add analytics。
2. 系统会提示您输入此服务的资源名称。输入todosPinpoint后按回车键。
3. 您应该会看到一个提示，询问您是否允许未经身份验证的用户发送分析事件。输入n并按回车键。

我们运行的命令在本地创建了分析资源并更新了身份验证资源。现在我们需要在云端配置它们。运行命令amplify push在云端创建服务。完成后，它会拉取服务信息并更新src/aws-exports.js 文件。打开该文件，你会发现其中包含一些属性aws_mobile_analytics_app_id。aws_mobile_analytics_app_region这些信息将用于配置 Amplify 库。

为应用添加分析功能

在云端创建 Pinpoint 服务后，我们现在需要添加代码来向其发送使用数据。在src/App.js文件的第 7 行，代码会使用来自aws-export.jsAmplify.configure(aws_exports);的数据来设置库。由于aws-export.js包含相关配置，它还会配置分析服务以及其他包含相关信息的服务。默认情况下，Amplify 库会跟踪用户会话和身份验证事件。无需添加额外的代码。如果您启动应用程序、登录或注册用户，您将收到发送到云端的这些事件数据。我们还可以记录自定义事件。让我们记录一个项目被删除的自定义事件。打开src/App.js 文件，并将第 4 行更新为导入 Analytics 模块。aws_mobile_analytics_app_id

import Amplify, { API, Analytics } from "aws-amplify";

更新delete()函数，使其包含以下代码语句。

Analytics.record({ name: "delete", attributes: { id } });

每次调用此函数时，都会发送一个delete事件。这可以用来跟踪项目被删除的频率。我们还可以通过每次进入“详情”视图时记录一个事件来跟踪哪些项目被查看得最多。将以下代码添加到函数loadDetailsPage()中：

Analytics.record({
  name: "detailsView",
  attributes: { title: response.title }
});

在浏览器中打开该应用，选择不同的项目以查看各个项目的详细信息。现在登录 AWS 管理控制台，并转到 Pinpoint 控制面板以查看该应用的分析报告。

结束了

您可以将 Amazon Pinpoint 集成到您的 Web 应用中，以捕获使用数据，从而深入了解客户如何与您的应用互动。企业可以利用这些数据分析客户行为，包括他们的参与度、人口统计信息和购买活动。我向您展示了如何使用 Amplify CLI 创建 Pinpoint 服务，然后将其集成到 React 应用中，以便向 Pinpoint 服务发送自定义事件。Amplify JavaScript 库中的分析模块还有更多功能，例如自动记录页面浏览量和事件。有关分析 API 的更多信息，请参阅文档。

延伸阅读

1. 第一部分：开发环境搭建
2. 第二部分：创建和使用无服务器服务

也发布在我的博客上了