Tutorial: teste de A/B com a aplicação de exemplo do Evidently

Esta seção fornece um tutorial para usar o Amazon CloudWatch Evidently para testes A/B. Este tutorial é a aplicação de exemplo do Evidently, uma aplicação de reação simples. O aplicativo de exemplo será configurado para exibir um recurso showDiscount ou não. Quando o recurso é exibido para um usuário, o preço exibido no site de compras é exibido com um desconto de 20%.

Além de mostrar o desconto para alguns usuários e não para outros, neste tutorial você configurou o Evidently para coletar métricas de tempo de carregamento de página de ambas as variações.

Etapa 1: baixar a aplicação de exemplo

Comece baixando a aplicação de exemplo do Evidently.

Etapa 2: adicionar o endpoint do Evidently e configurar credenciais

Em seguida, adicione a região e o endpoint para o Evidently ao arquivo config.js no diretório src no pacote da aplicação de exemplo, conforme mostrado a seguir:

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

Você também deve garantir que a aplicação tenha permissão para chamar o CloudWatch Evidently.

Etapa 3: configurar código para a avaliação do recurso

Quando você usa o CloudWatch Evidently para avaliar um recurso, você deve usar a operação EvaluateFeature para selecionar aleatoriamente uma variação de recursos para cada sessão do usuário. Esta operação atribui sessões do usuário a cada variação do recurso, de acordo com as porcentagens especificadas no experimento.

Etapa 4: configurar código para as métricas do experimento

Para a métrica personalizada, use a API PutProjectEvents do Evidently para enviar resultados de métricas para o Evidently. Os exemplos a seguir mostram como configurar a métrica personalizada e enviar dados do experimento para Evidently.

Adicione a seguinte função para calcular o tempo de carregamento da página e use PutProjectEvents para enviar os valores de métrica para o Evidently. Adicione a seguinte função em Home.tsx e chame essa função dentro da API EvaluateFeature:

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();
  }

É assim que o arquivo App.js deveria ser após toda a edição que você fez desde o download.

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;

Cada vez que um usuário visita a aplicação de exemplo, uma métrica personalizada é enviada para análise do Evidently. O Evidently analisa cada métrica e exibe resultados em tempo real no painel do Evidently. O exemplo a seguir mostra uma carga útil de métrica:

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

Etapa 5: criar o projeto, o recurso e o experimento

Em seguida, você cria o projeto, o recurso e o experimento no console do CloudWatch Evidently.

Etapa 6: iniciar o experimento e testar o CloudWatch Evidently

As etapas finais são iniciar o experimento e iniciar a aplicação de exemplo.

Em seguida, inicie a aplicação de exemplo do Evidently com o seguinte comando:

npm install -f && npm start

Assim que a aplicação for iniciada, você será atribuído a uma das duas variações de recursos que estão sendo testadas. Uma variação exibe "20% de desconto" e a outra não. Continue atualizando a página para ver as diferentes variações.

Solução de problemas

Recomendamos usar o npm versão 6.14.14. Se você observar algum erro durante a compilação ou ao iniciar a aplicação de exemplo e estiver usando uma versão diferente do npm, faça o seguinte.