本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

教學︰使用 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，請執行以下操作。