Paso 1: Descargar una aplicación de muestra Paso 2: Agregar el punto de conexión de Evidently y configurar las credenciales Paso 3: Configurar el código para la evaluación de la característica Paso 4: Configurar el código para las métricas del experimento Paso 5: Crear el proyecto, la característica y el experimento Paso 6: Iniciar el experimento y probar CloudWatch Evidently

Tutorial: A/B testing with the Evidently sample application (Pruebas A/B con la aplicación de muestra de Evidently)

En esta sección encontrará un tutorial para utilizar Amazon CloudWatch Evidently para pruebas A/B. En este tutorial, se explica cómo usar la aplicación de muestra de Evidently, que es una aplicación de reacción simple. La aplicación de muestra se puede configurar para que muestre una característica de showDiscount o no lo haga. Cuando la característica se muestra para un usuario, el precio que se indica en el sitio web de compras aparece con un 20 % de descuento.

Además de cómo hacer para mostrar el descuento a algunos usuarios y a otros no, en este tutorial se indica cómo configurar Evidently para que recopile métricas de tiempo de carga de las páginas con ambas variaciones.

aviso

En este escenario, se requieren usuarios de IAM con acceso programático y credenciales de larga duración, lo que supone un riesgo de seguridad. Para ayudar a mitigar este riesgo, le recomendamos que brinde a estos usuarios únicamente los permisos que necesitan para realizar la tarea y que los elimine cuando ya no los necesiten. Las claves de acceso se pueden actualizar si es necesario. Para obtener más información, consulte Actualización de claves de acceso en la Guía de usuario de IAM.

Paso 1: Descargar una aplicación de muestra

Comience descargando la aplicación de muestra de Evidently.

Para descargar la aplicación de muestra

Descargue la aplicación de muestra del siguiente bucket de Amazon S3:


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

Descomprima el paquete.

Paso 2: Agregar el punto de conexión de Evidently y configurar las credenciales

A continuación, agregue la región y el punto de conexión de Evidently al archivo config.js que se encuentra en el directorio src del paquete de la aplicación de muestra, como se indica en el siguiente ejemplo:


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

También debe asegurarse de que la aplicación tenga permiso para llamar a CloudWatch Evidently.

Para otorgar permisos a la aplicación de muestra para llamar a Evidently

Fedérela a su cuenta de AWS.
Cree un usuario de IAM y adjunte la política AmazonCloudWatchEvidentlyFullAccess a este usuario.
Tome nota del ID de clave de acceso y de la clave de acceso secreta del usuario de IAM, ya que los necesitará en el paso siguiente.
En el mismo archivo config.js que modificó antes en esta sección, ingrese los valores del ID de clave de acceso y de la clave de acceso secreta, como se muestra en el ejemplo siguiente:
```
credential: {
   accessKeyId: "Access key ID",
   secretAccessKey: "Secret key"
}
```
importante
Realizamos este paso para que la aplicación de muestra sea lo más sencilla de probar posible. No es recomendable que incluya su credencial de usuario de IAM en su aplicación de producción real. En lugar de ello, le recomendamos utilizar Amazon Cognito para la autenticación. Para obtener más información, consulte Integración de Amazon Cognito en aplicaciones web y móviles.

Paso 3: Configurar el código para la evaluación de la característica

Cuando utilice CloudWatch Evidently para evaluar una característica, debe utilizar la operación EvaluateFeature (Característica de evaluación) para seleccionar una variación de característica de forma aleatoria para cada sesión de usuario. Esta operación asigna sesiones de usuario a cada variación de la característica, según los porcentajes especificados en el experimento.

Para configurar el código de evaluación de características para la aplicación de demostración de la biblioteca

Agregue el creador de clientes al archivo src/App.jsx para que la aplicación de muestra pueda llamar a 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,
    });
};

Agregue lo siguiente a la sección del código const App para iniciar el cliente.


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

Forme evaluateFeatureRequest agregando el siguiente código. Este código rellena con anticipación el nombre del proyecto y el nombre de la característica que recomendamos más adelante en este tutorial. Puede sustituirlos por los nombres de sus propios proyecto y característica siempre que especifique también esos nombres de proyecto y característica en la consola de Evidently.
```
const evaluateFeatureRequest = {
              entityId: id,
              // Input Your feature name
              feature: 'showDiscount',
              // Input Your project name'
              project: 'EvidentlySampleApp',
            };
```
Agregue el código para llamar a Evidently para efectuar la evaluación de la característica. Cuando se envía la solicitud, Evidently asigna aleatoriamente la sesión del usuario para que vea la característica de showDiscount o no lo haga.
```
client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
    if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
    }
    getPageLoadTime()
 })
```

Paso 4: Configurar el código para las métricas del experimento

Para la métrica personalizada, utilice la API PutProjectEvents de Evidently para enviar resultados de métricas a Evidently. En los siguientes ejemplos, aprenderá a configurar la métrica personalizada y enviar datos de experimentos a Evidently.

Agregue la siguiente función para calcular el tiempo de carga de la página y utilice PutProjectEvents para enviar los valores de la métrica a Evidently. Agregue la siguiente función a Home.tsx y llame a esta función dentro de la 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();
  }

A continuación, se muestra cómo debe verse el archivo App.js después de todas las modificaciones que le ha realizado desde que lo descargó.


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 un usuario visita la aplicación de muestra, se envía una métrica personalizada a Evidently para realizar un análisis. Evidently analiza cada métrica y muestra los resultados en tiempo real en el panel de Evidently. En el ejemplo siguiente se muestra una carga métrica:


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

Paso 5: Crear el proyecto, la característica y el experimento

A continuación, cree el proyecto, la característica y el experimento en la consola de CloudWatch Evidently.

Para crear el proyecto, la característica y el experimento de este tutorial

Abra la consola de CloudWatch en https://console.aws.amazon.com/cloudwatch/.
En el panel de navegación, elija Señales de aplicación, Evidently.
Elija Create project (Crear proyecto) y complete los campos. Debe utilizar EvidentlySampleApp para que el nombre del proyecto para la muestra funcione correctamente. En Evaluation event storage(Almacenamiento de eventos de evaluación), elija Don't store Evaluation events (No almacenar eventos de evaluación).

Luego de completar los campos, elija Create project (Crear proyecto).

Para obtener más información, consulte Crear un nuevo proyecto de .
Una vez creado el proyecto, cree una característica en ese proyecto. Nombre la característica como showDiscount (Mostrar descuento). En esta característica, cree dos variaciones del tipo Boolean (booleano). Nombre la primera variación como disable con un valor False (falso) y nombre la segunda variación como enable con un valor True (verdadero).

Para obtener más información acerca de la creación de una característica, consulte Agregue una característica a un proyecto.
Una vez que haya creado la característica, cree un experimento en el proyecto. Nombre el experimento como pageLoadTime (Tiempo de carga de la página).

En este experimento se utilizará una métrica personalizada denominada pageLoadTime(Tiempo de carga de la página) que mide el tiempo de carga de la página que está bajo prueba. Las métricas personalizadas para experimentos se crean con Amazon EventBridge. Para obtener más información acerca de EventBridge, consulte ¿Qué es Amazon EventBridge?

Para crear esa métrica personalizada, realice lo siguiente cuando cree el experimento:
- En Metrics (Métricas), para Metric source (Origen de métricas), elija Custom metrics (Métricas personalizadas).
- En Metric name (Nombre de métrica), ingrese pageLoadTime (Tiempo de carga de página).
- En Meta, elija Decrease (Disminuir). Esto indica que deseamos que un valor inferior de esta métrica indique la mejor variación de la característica.
- En Metric rule (Regla de la métrica), ingrese lo siguiente:
  - En Entity ID (ID de entidad), escriba UserDetails.userId.
  - En Value key (Clave de valor), ingrese details.pageLoadTime.
  - En Units (Unidades), ingrese ms.
- Elija Add metric (Agregar métrica).
En Audiences (Audiencias), seleccione 100 % para que se incluyan todos los usuarios en el experimento. Configure la división de tráfico entre las variaciones para que cada una sea del 50%.

Luego, para crear el experimento, elija Create Experiment (Crear experimento). Una vez que lo haya creado, no iniciará hasta que le indique a Evidently que debe iniciar.

Paso 6: Iniciar el experimento y probar CloudWatch Evidently

Los pasos finales son iniciar el experimento e iniciar la aplicación de muestra.

Para iniciar el experimento tutorial

Abra la consola de CloudWatch en https://console.aws.amazon.com/cloudwatch/.
En el panel de navegación, elija Señales de aplicación, Evidently.
Elija el proyecto EvidentlySampleApp.
Elija la pestaña Experiments (Experimentos).
Elija el botón situado junto a PageLoadTime (Tiempo de carga de página) y luego, Actions (Acciones), Start experiment (Iniciar experimento).
Elija el horario de finalización del experimento.
Elija Start experiment (Iniciar experimento).

El experimento iniciará de forma inmediata.

Luego, inicie la aplicación de muestra de Evidently con el comando siguiente:


npm install -f && npm start

Una vez que la aplicación se haya iniciado, se le asignará una de las dos variaciones de características que se están probando. Una variación mostrará un “20 % de descuento” y la otra no lo hará. Siga actualizando la página para ver las diferentes variaciones.

nota

Evidently tiene evaluaciones complicadas. Las evaluaciones de características son deterministas, lo que significa que para el mismo entityId y característica, el usuario recibirá la misma asignación de variaciones. El único cambio de asignaciones de variaciones de tiempo se produce cuando se agrega una entidad a una anulación o se marca el tráfico del experimento.

Sin embargo, para que el tutorial de la aplicación de muestra sea más sencillo para usted, Evidently reasigna la evaluación de la característica de la aplicación de muestra cada vez que se actualiza la página, de modo que pueda experimentar ambas variaciones sin tener que agregar anulaciones.

Solución de problemas

Le recomendamos utilizar la versión 6.14.14 de npm. Si aparece algún error sobre la creación o el inicio de la aplicación de muestra y está utilizando una versión diferente de npm, haga lo siguiente.

Para instalar la versión 6.14.14 de `npm`

Utilice un navegador para conectarse a https://nodejs.org/download/release/v14.17.5/.
Descargue node-v14.17.5.pkg y ejecute este paquete para instalar npm.

Si se indica un error de webpack not found, diríjase a la carpeta evidently-sample-shopping-app e intente lo siguiente:
1. Elimine package-lock.json
2. Elimine yarn-lock.json
3. Elimine node_modules
4. Elimine la dependencia de Webpack de package.json.
5. Ejecute lo siguiente:
```
npm install -f && npm
```

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Cuotas de CloudWatch Evidently

Uso de CloudWatch RUM