创建react应用程序_使用React和AWS Amplify进入无服务器阶段3：跟踪应用程序使用情况...

创建react应用程序

by Peter Mbanugo

彼得·姆巴努戈(Peter Mbanugo)

使用React和AWS Amplify进入无服务器阶段3：跟踪应用程序使用情况 (Going serverless with React and AWS Amplify Part 3: Tracking App Usage)

Serverless is a cloud-computing execution model in which the cloud provider is responsible for executing a piece of code by dynamically allocating resources to run the code when needed. With it, we can get reduced operation cost and development time. It allows us to focus on our code to provide business value to the users without worrying about building and maintaining servers.

无服务器是一种云计算执行模型，其中云提供商负责通过在需要时动态分配资源来运行代码来执行一段代码。 有了它，我们可以降低运营成本和开发时间。 它使我们能够专注于代码，从而为用户提供业务价值，而不必担心构建和维护服务器。

It takes a couple of steps to configure and integrate these services with our code, and AWS Amplify was built to make it easier to build serverless applications on AWS. It provides tools to create and configure services with a few commands, and library components to easily interact with those services from our code.

要配置这些服务并将其与我们的代码集成，需要几个步骤，并且构建了AWS Amplify是为了使在AWS上构建无服务器应用程序更加容易。 它提供了使用一些命令来创建和配置服务的工具，并提供了库组件以轻松地通过我们的代码与这些服务进行交互。

This article is part of a series where I show you how to build serverless applications in React and AWS Amplify. In the first post we set up our development environment, an Amplify project, and a React project. In the second post we created backend services running on different AWS services and built a React app to perform CRUD operations, thereby interacting with the backend services that we created.

本文是该系列文章的一部分，我向您展示如何在React和AWS Amplify中构建无服务器应用程序。 在第一篇文章中，我们设置了开发环境，一个Amplify项目和一个React项目。 在第二篇文章中，我们创建了在不同的AWS服务上运行的后端服务，并构建了一个React应用程序来执行CRUD操作，从而与我们创建的后端服务进行交互。

In this post, we will add analytics and usage tracking to the application we built in the previous posts.

在这篇文章中，我们将为先前文章中构建的应用程序添加分析和使用情况跟踪。

设置分析后端 (Set Up Analytics Backend)

In many applications, it is required to capture application usage data so the business can gain insight into how customers interact with the app. We will use Amazon Pinpoint to track usage metrics for our React application. Amazon Pinpoint has the following types of event:

在许多应用程序中，需要捕获应用程序使用情况数据，以便企业可以洞悉客户与应用程序的交互方式。 我们将使用Amazon Pinpoint跟踪React应用程序的使用指标。 Amazon Pinpoint具有以下类型的事件：

1. Monetization events. This event type is used to report the revenue that’s generated by your application and the number of items that are purchased by users.
   获利事件。 此事件类型用于报告您的应用程序产生的收入和用户购买的商品数量。
2. Session events. They track usage and indicate when and how often users open and close your app.
   会话事件。 它们跟踪使用情况，并指示用户何时以及如何打开和关闭您的应用程序。
3. Authentication events. This shows how frequently users authenticate with your application. Sign-ins, Sign-ups, and Authentication failures are tracked in this category.
   认证事件。 这显示了用户对您的应用程序进行身份验证的频率。 在此类别中跟踪登录，注册和身份验证失败。
4. Custom events. This type of events represents non-standard events that you define by assigning a custom event type. You can add custom attributes and metrics to a custom event.
   自定义事件。 这种类型的事件表示您通过分配自定义事件类型定义的非标准事件。 您可以将自定义属性和指标添加到自定义事件。

To add Pinpoint to our project, open the command to the root directory of your React project and follow the instructions below.

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

1. Run the command amplify add analytics.

   运行命令amplify add analytics 。

2. You’ll be prompted for a resource name for this service. Enter todosPinpoint and press the Enter key.

   系统将提示您输入此服务的资源名称。 输入todosPinpoint ，然后按Enter键。

3. You should get a prompt asking if you want to allow unauthenticated users to send analytic events. Enter n and press Enter.

   您应该得到一个提示，询问您是否要允许未经身份验证的用户发送分析事件。 输入n并按Enter。

The command we ran created the analytics resource and updated the authentication resource locally. We need to provision them in the cloud. Run the command amplify push to create the service in the cloud. Once completed, it pulls the service information and updates src/aws-exports.js. If you open it, you'll find we have properties aws_mobile_analytics_app_id and aws_mobile_analytics_app_region. This information will be used to configure the Amplify library.

我们运行的命令创建了分析资源并在本地更新了身份验证资源。 我们需要在云中配置它们。 运行命令amplify push以在云中创建服务。 完成后，它将提取服务信息并更新src / aws-exports.js 。 如果将其打开，则会发现我们具有属性aws_mobile_analytics_app_id和aws_mobile_analytics_app_region 。 此信息将用于配置Amplify库。

向应用程序添加分析 (Add Analytics To The App)

With the Pinpoint service created in the cloud, we now need to add code to send usage data to it. In src/App.js line 7, which reads Amplify.configure(aws_exports); will set up the library with data from aws-export.js. Since aws-export.js contains aws_mobile_analytics_app_id, it'll configure analytics as well as other services whose information is in it.

借助在云中创建的Pinpoint服务，我们现在需要添加代码以向其发送使用情况数据。 在src / App.js第7行中，显示为Amplify.configure(aws_exports); 将使用aws-export.js中的数据设置库。 由于aws-export.js包含aws_mobile_analytics_app_id ，因此它将配置分析以及其中包含信息的其他服务。

By default, the Amplify library will track user session and authentication events. No need to add extra code. If you start the app, sign-in or sign-up users, you'll get these events data sent to the cloud.

默认情况下，Amplify库将跟踪用户会话和身份验证事件。 无需添加额外的代码。 如果您启动应用程序，登录或注册用户，则会将这些事件数据发送到云中。

We can also record custom events. Let's record a custom event for when an item is deleted. Open src/App.js and update line 4 to import the Analytics module:

我们还可以记录自定义事件。 让我们记录一个删除项目时的自定义事件。 打开src / App.js并更新第4行以导入Analytics模块：

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

Update the delete() function to include the following code statement:

更新delete()函数以包含以下代码语句：

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

This will send a delete event each time this function is called. It could be used to track how often items get deleted. We could also track which items get viewed the most by recording an event each time we go to the Details view. Add the following code to the loadDetailsPage() function:

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

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

Open the app in a browser and select different items to move through details view for different items you have. Now login to AWS management console and go to the Pinpoint dashboard to view the analytics report for the application.

在浏览器中打开应用程序，然后选择不同的项目以在详细信息视图中移动您拥有的不同项目。 现在登录到AWS管理控制台，然后转到Pinpoint仪表板以查看该应用程序的分析报告。

这是一个包装 (That’s A Wrap)

You can integrate Amazon Pinpoint into your web apps to capture usage data to provide you with insight into how customers interact with your apps. A business can use this data to analyse customer behavior, including their engagement, demographics and purchase activity.

您可以将Amazon Pinpoint集成到您的Web应用程序中以捕获使用情况数据，从而为您提供有关客户如何与您的应用程序交互的见解。 企业可以使用此数据来分析客户行为，包括其参与度，人口统计和购买活动。

I showed you how to create a Pinpoint service using the Amplify CLI, and then integrated it in the React application to send custom events to the Pinpoint service. There’s more we can do with the analytics module in the Amplify JavaScript library, like automatic recording of page views and event. See the docs for more info on the Analytics API.

我向您展示了如何使用Amplify CLI创建Pinpoint服务，然后将其集成到React应用程序中以将自定义事件发送到Pinpoint服务。 我们可以使用Amplify JavaScript库中的分析模块做更多的事情，例如自动记录页面浏览量和事件。 有关Analytics(分析)API的更多信息，请参阅文档 。

进一步阅读 (Further Reading)

1. Part 1: Development Environment Set up

   第1部分：开发环境设置

2. Part 2: Creating And Using Serverless Services

   第2部分：创建和使用无服务器服务

Also published on my blog

也发表在我的博客上

翻译自: https://www.freecodecamp.org/news/going-serverless-with-react-and-aws-amplify-part-3-tracking-app-usage-57b4b5626612/

创建react应用程序