教程：使用 Evidently 示例应用程序进行 A/B 测试

本节介绍如何使用 Amazon CloudWatch Evidently 进行 A/B 测试的教程。本教程涉及 Evidently 示例应用程序，其是一个简单的响应应用程序。示例应用程序将被配置为显示/不显示 showDiscount 功能。当向用户显示该功能时，购物网站上以 20％ 的折扣显示价格。

除了向一些用户而非向其他用户显示折扣之外，在本教程中，您还设置 Evidently 以从两个变体收集页面加载时间指标。

步骤 1：下载示例应用程序

首先下载 Evidently 示例应用程序。

步骤 2：添加 Evidently 端点并设置凭证

接下来，将 Evidently 的区域和端点添加到示例应用程序包中 src 目录下的 config.js 文件，如以下示例所示：

evidently: { 
    REGION: "us-west-2",
    ENDPOINT: "https://evidently.us-west-2.amazonaws.com (https://evidently.us-west-2.amazonaws.com/)",
},

您还必须确保应用程序有调用 CloudWatch Evidently 的权限。

步骤 3：为功能评估设置代码

当您使用 CloudWatch Evidently 评估功能时，必须使用 EvaluateFeature 操作为每个用户会话随机选择功能变体。此操作根据您在实验中指定的百分比，将用户会话分配给功能的每个变体。

步骤 4：为实验指标设置代码

对于自定义指标，请使用 Evidently 的 PutProjectEvents API 向 Evidently 发送指标结果。以下示例说明了如何设置自定义指标并向 Evidently 发送实验数据。

添加以下函数来计算页面加载时间，并使用 PutProjectEvents 向 Evidently 发送指标值。将以下函数添加到 Home.tsx 中并在 EvaluateFeature API 中调用此函数：

const getPageLoadTime = () => {
    const timeSpent = (new Date().getTime() - startTime.getTime()) * 1.000001;
    const pageLoadTimeData = `{
      "details": {
        "pageLoadTime": ${timeSpent}
      },
      "UserDetails": { "userId": "${id}", "sessionId": "${id}"}
    }`;
    const putProjectEventsRequest = {
      project: 'EvidentlySampleApp',
      events: [
        {
          timestamp: new Date(),
          type: 'aws.evidently.custom',
          data: JSON.parse(pageLoadTimeData)
        },
      ],
    };
    client.putProjectEvents(putProjectEventsRequest).promise();
  }

自您下载 App.js 文件并对其进行所有编辑之后，该文件应该如此处所示。

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch } from "react-router-dom";
import AuthProvider from "contexts/auth";
import CommonProvider from "contexts/common";
import ProductsProvider from "contexts/products";
import CartProvider from "contexts/cart";
import CheckoutProvider from "contexts/checkout";
import RouteWrapper from "layouts/RouteWrapper";
import AuthLayout from "layouts/AuthLayout";
import CommonLayout from "layouts/CommonLayout";
import AuthPage from "pages/auth";
import HomePage from "pages/home";
import CheckoutPage from "pages/checkout";
import "assets/scss/style.scss";
import { Spinner } from 'react-bootstrap';

import Evidently from 'aws-sdk/clients/evidently';
import config from './config';

const defaultClientBuilder = (
  endpoint,
  region,
) => {
  const credentials = {
    accessKeyId: config.credential.accessKeyId,
    secretAccessKey: config.credential.secretAccessKey
  }
  return new Evidently({
    endpoint,
    region,
    credentials,
  });
};

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [startTime, setStartTime] = useState(new Date());
  const [showDiscount, setShowDiscount] = useState(false);
  let client = null;
  let id = null;

  useEffect(() => {
    id = new Date().getTime().toString();
    setStartTime(new Date());
    if (client == null) {
      client = defaultClientBuilder(
        config.evidently.ENDPOINT,
        config.evidently.REGION,
      );
    }
    const evaluateFeatureRequest = {
      entityId: id,
      // Input Your feature name
      feature: 'showDiscount',
      // Input Your project name'
      project: 'EvidentlySampleApp',
    };

    // Launch
    client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
      if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
      }
    });

    // Experiment
    client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
      if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
      }
      getPageLoadTime()
    })

    setIsLoading(false);
  },[]);

  const getPageLoadTime = () => {
    const timeSpent = (new Date().getTime() - startTime.getTime()) * 1.000001;
    const pageLoadTimeData = `{
      "details": {
        "pageLoadTime": ${timeSpent}
      },
      "UserDetails": { "userId": "${id}", "sessionId": "${id}"}
    }`;
    const putProjectEventsRequest = {
      project: 'EvidentlySampleApp',
      events: [
        {
          timestamp: new Date(),
          type: 'aws.evidently.custom',
          data: JSON.parse(pageLoadTimeData)
        },
      ],
    };
    client.putProjectEvents(putProjectEventsRequest).promise();
  }
  return (
    !isLoading? (
    <AuthProvider>
      <CommonProvider>
        <ProductsProvider>
          <CartProvider>
            <CheckoutProvider>
              <Router>
                <Switch>
                  <RouteWrapper
                    path="/"
                    exact
                    component={() => <HomePage showDiscount={showDiscount}/>}
                    layout={CommonLayout}
                  />
                  <RouteWrapper
                    path="/checkout"
                    component={CheckoutPage}
                    layout={CommonLayout}
                  />
                  <RouteWrapper
                    path="/auth"
                    component={AuthPage}
                    layout={AuthLayout}
                  />
                </Switch>
              </Router>
            </CheckoutProvider>
          </CartProvider>
        </ProductsProvider>
      </CommonProvider>
    </AuthProvider> ) : (
      <Spinner animation="border" />
    )
  );
};

export default App;

每次用户访问示例应用程序时，都会向 Evidently 发送自定义指标进行分析。Evidently 会分析每个指标并在 Evidently 控制面板上实时显示结果。以下示例显示了指标有效负载：

[ {"timestamp": 1637368646.468, "type": "aws.evidently.custom", "data": "{\"details\":{\"pageLoadTime\":2058.002058},\"userDetails\":{\"userId\":\"1637368644430\",\"sessionId\":\"1637368644430\"}}" } ]

步骤 5：创建项目、功能和实验

然后，您可以在 CloudWatch Evidently 控制台中创建项目、功能和实验。

步骤 6：开始实验并测试 CloudWatch Evidently

最后的步骤是开始实验并开启示例应用程序。

然后，使用以下命令开启 Evidently 示例应用程序：

npm install -f && npm start

开启应用程序后，您将被分配到正在测试的两个功能变体之一。一个变体会显示“20％ 折扣”，另一个变体不会显示。继续刷新页面以查看不同的变体。

故障排除

我们建议您使用 npm 版本 6.14.14。如果您看到有关构建或开启示例应用程序的任何错误，并且您正在使用不同版本的 npm，请执行以下操作。