자습서: Evidently 샘플 애플리케이션으로 A/B 테스트

이 섹션에서는 A/B 테스트를 위해 Amazon CloudWatch Evidently를 사용하는 방법에 대한 자습서를 제공합니다. 이 자습서에서는 간단한 반응 애플리케이션인 Evidently 샘플 애플리케이션입니다. 샘플 앱은 showDiscount 기능 여부를 표시하도록 구성됩니다. 이 기능이 사용자에게 표시되면 쇼핑 웹 사이트에 표시된 가격은 20% 할인된 가격으로 표시됩니다.

이 자습서에서는 다른 사용자가 아닌 일부 사용자에게 할인을 표시하는 것 외에도 두 가지 변형에서 페이지 로드 시간 지표를 수집하도록 Evidently를 설정합니다.

1단계: 샘플 애플리케이션 다운로드

먼저 Evidently 샘플 애플리케이션을 다운로드합니다.

2단계: Evidently 엔드포인트 추가 및 자격 증명 설정

그런 다음, 다음 예제와 같이 Evidenty에 대한 리전 및 엔드포인트를 샘플 앱 패키지의 src 디렉터리에 있는 config.js 파일에 추가합니다.

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

또한 애플리케이션에 CloudWatch Evidenty를 호출할 수 있는 권한이 있는지 확인해야 합니다.

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을 사용하는 경우 다음을 수행합니다.