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.

Atenção

Este cenário precisa de usuários do IAM com acesso programático e credenciais de longo prazo, o que representa um risco de segurança. Para ajudar a reduzir esse risco, recomendamos que você forneça a esses usuários somente as permissões necessárias para realizar a tarefa e que você os remova quando não forem mais necessários. As chaves de acesso podem ser atualizadas, se necessário. Para obter mais informações, consulte Atualização de chaves de acesso no Guia de usuário do IAM.

Etapa 1: baixar a aplicação de exemplo

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

Para baixar a aplicação de exemplo

1. Baixe a aplicação de exemplo do seguinte bucket do Amazon S3:

   https://evidently-sample-application.s3.us-west-2.amazonaws.com/evidently-sample-shopping-app.zip

2. Descompacte o pacote.

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.

Para conceder à aplicação de exemplo permissões para chamar o Evidently

1. Federe-a à sua conta da AWS.

2. Crie um usuário do IAM e anexe a política AmazonCloudWatchEvidentlyFullAccess a esse usuário.

3. Anote o ID da chave de acesso do usuário do IAM e a chave de acesso secreta, pois você precisará deles na próxima etapa.

4. No mesmo arquivo config.js modificado anteriormente nesta seção, insira os valores do ID da chave de acesso e da chave de acesso secreta, como no exemplo a seguir:

   credential: {
      accessKeyId: "Access key ID",
      secretAccessKey: "Secret key"
   }

   Importante

   Usamos esta etapa para tornar a aplicação de exemplo a mais simples possível para você experimentar. Não recomendamos colocar a credencial de usuário do IAM em sua aplicação de produção real. Em vez disso, recomendamos usar o Amazon Cognito para autenticação. Para obter mais informações, consulte Como integrar o Amazon Cognito a aplicações Web e móveis.

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.

Para configurar o código de avaliação de recursos para a aplicação de demonstração da livraria

1. Adicione o construtor do cliente ao arquivo src/App.jsx para que a aplicação de exemplo possa chamar o Evidently.

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

2. Adicione o seguinte à seção do código const App para iniciar o cliente.

     if (client == null) {
         client = defaultClientBuilder(
           config.evidently.ENDPOINT,
           config.evidently.REGION,
         );

3. Construa evaluateFeatureRequest adicionando o código a seguir. Esse código preenche previamente o nome do projeto e o nome do recurso que recomendaremos mais adiante neste tutorial. Você poderá substituí-los por seus próprios nomes de projeto e recurso, desde que também especifique esses nomes de projeto e recurso no console do Evidently.

   const evaluateFeatureRequest = {
                 entityId: id,
                 // Input Your feature name
                 feature: 'showDiscount',
                 // Input Your project name'
                 project: 'EvidentlySampleApp',
               };

4. Adicione o código para chamar o Evidently para avaliação de recursos. Quando a solicitação é enviada, o Evidently atribui aleatoriamente a sessão do usuário para ver o recurso showDiscount ou não.

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

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.

Para criar o projeto, o recurso e o experimento para este tutorial

1. Abra o console CloudWatch em https://console.aws.amazon.com/cloudwatch/.

2. No painel de navegação, escolha Application Signals e, em seguida, Evidently.

3. EscolhaCreate project (Criar projeto) e preencha os campos. Você deve usar EvidentlySampleApp para o nome do projeto para que o exemplo funcione corretamente. Em Evaluation event storage (Armazenamento de eventos de avaliação), escolha Don't store Evaluation events (Não armazenar eventos de avaliação).

   Após preencher os campos, escolha Create Project (Criar projeto).

   Para obter mais detalhes, consulte Criar um novo projeto da .

4. Depois que o projeto for criado, crie um recurso nele. Nomeie o recurso como showDiscount. Nesse recurso, crie duas variações do tipo Boolean. Nomeie a primeira variação como disable com um valor deFalse e nomeie a segunda variação como enable com um valor de True.

   Para obter mais informações sobre como criar um recurso, consulte Adicionar um recurso a um projeto.

5. Depois de terminar de criar o recurso, crie um experimento no projeto. Nomeie o experimento como pageLoadTime.

   Este experimento usará uma métrica personalizada chamada pageLoadTime, que mede o tempo de carregamento da página que está sendo testada. Métricas personalizadas para experimentos são criadas usando o Amazon EventBridge. Para obter mais informações sobre o EventBridge, consulte O que é o Amazon EventBridge?.

   Para criar essa métrica personalizada, faça o seguinte ao criar o experimento:

   • Em Metrics (Métricas), em Metric source (Fonte da métrica), escolha Custom metrics (Métricas personalizadas).

   • Em Metric name (Nome da métrica), insira pageLoadTime.

   • Em Goal (Objetivo), escolha Decrease (Diminuir). Isso indica que um valor menor dessa métrica indicará a melhor variação do recurso.

   • Em Metric rule (Regra de métrica), insira o seguinte:

     • Em Entity ID (ID da entidade), insira UserDetails.userId.

     • Em Value key (Valor da chave), insira details.pageLoadTime.

     • Em Units (Unidade), insira ms.

   • Escolha Add metric (Adicionar métrica).

   Em Audiences (Públicos), selecione 100% para que todos os usuários sejam inseridos no experimento. Configure a divisão de tráfego entre as variações para 50% cada uma.

   Em seguida, escolha Create Experiment (Criar experimento). Depois dessa criação, o experimento não começa até que você diga Evidently para iniciá-lo.

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.

Para iniciar o experimento tutorial

1. Abra o console CloudWatch em https://console.aws.amazon.com/cloudwatch/.

2. No painel de navegação, escolha Application Signals e, em seguida, Evidently.

3. Selecione o projeto EvidentlySampleApp.

4. Escolha a guia Experiments (Experimentos).

5. Escolha o botão ao lado de pageLoadTime e escolha Actions (Ações), Start experiment (Iniciar experimento).

6. Escolha um horário de finalização do experimento.

7. Escolha Start experiment (Iniciar experimento).

   O experimento iniciará imediatamente.

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.

nota

O Evidently tem avaliações persistentes. As avaliações de recursos são determinísticas, o que significa para os mesmos entityId e recurso, um usuário sempre receberá a mesma atribuição de variação. A única vez que as atribuições de variação mudam é quando uma entidade é adicionada a uma substituição ou o tráfego do experimento é discado.

No entanto, para facilitar o uso do tutorial da aplicação de exemplo para você, o Evidently reatribui a avaliação do recurso da aplicação de exemplo toda vez que você atualiza a página para que você possa experimentar ambas as variações sem precisar adicionar substituiçõ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.

Como instalar o npm versão 6.14.14

1. Use um navegador para se conectar a https://nodejs.org/download/release/v14.17.5/.

2. Baixe o arquivo node-v14.17.5.pkg e execute esse pkg para instalar o npm.

   Se um erro webpack not found surgir, navegue para a pasta evidently-sample-shopping-app e tente o seguinte:

   1. Exclua package-lock.json

   2. Exclua yarn-lock.json

   3. Exclua node_modules

   4. Exclua a dependência do webpack de package.json

   5. Execute o seguinte:

      npm install -f && npm