Esercitazione: test A/B con l'applicazione Evidently di esempio

Questa sezione fornisce un tutorial sull'utilizzo di Amazon CloudWatch Evidently per il testing A/B. Questo tutorial ha come esempio l'applicazione Evidently, che è una semplice applicazione di reazione. L'applicazione di esempio sarà configurata per visualizzare o meno una funzione showDiscount. Quando la funzione viene mostrata a un utente, il prezzo visualizzato sul sito web dello shopping è mostrato con uno sconto del 20%.

Oltre a mostrare lo sconto ad alcuni utenti e non ad altri, in questo tutorial hai impostato Evidently per raccogliere i parametri del tempo di caricamento della pagina da entrambe le varianti.

Passaggio 1: Download dell'applicazione di esempio

Inizia scaricando l'applicazione Evidently di esempio.

Passaggio 2: Aggiungere l'endpoint Evidently e configurazione delle credenziali

Quindi, aggiungi la Regione e l'endpoint per Evidently al fileconfig.js nella directory src nel pacchetto di app di esempio, come nell'esempio seguente:

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

È inoltre necessario assicurarti che l'applicazione abbia il permesso di chiamare CloudWatch Evidently.

Passaggio 3: Impostazione del codice per la valutazione delle funzionalità

Quando utilizzi CloudWatch Evidentemente per valutare una funzionalità, è necessario utilizzare l'operazione Funzionalità di valutazione per selezionare casualmente una variante di funzionalità per ogni sessione utente. Questa operazione assegna sessioni utente a ciascuna variante della funzionalità, in base alle percentuali specificate nell'esperimento.

Passaggio 4: Configura il codice per i parametri dell'esperimento

Per il parametro personalizzato, usare l'API PutProjectEvents di Evidently per inviare i risultati deli parametri a Evidently. I seguenti esempi mostrano come configurare il parametro personalizzato e inviare dati sperimentali a Evidently.

Quindi, aggiungere la seguente funzione per calcolare il tempo di caricamento della pagina e utilizzare PutProjectEvents per inviare i valori dei parametri a Evidently. Inserire il seguente codice in Home.tsx e chiamare questa funzione all'interno dell'API di 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();
  }

Ecco come il file App.js dovrebbe apparire dopo le modifiche che hai apportato da quando lo hai scaricato.

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;

Ogni volta che un utente visita l'app bookstore, viene inviato un parametro personalizzato a Evidently per essere analizzato. Evidently analizza ogni parametro e visualizza i risultati in tempo reale sul pannello di controllo Evidently. Il seguente esempio mostra un payload di parametro:

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

Passaggio 5: Creare il progetto, la funzione e l'esperimento

Successivamente, creerai il progetto, la funzionalità e l'esperimento nella console CloudWatch Evidently.

Passaggio 6: Avvio dell'esperimento e prova CloudWatch Evidently

Gli ultimi passaggi sono l'avvio dell'esperimento e l'avvio dell'app di esempio.

Successivamente, avvia l'app Evidently di esempio con il comando seguente:

npm install -f && npm start

Una volta avviata l'app, ti verrà assegnata una delle due varianti in fase di test. Una variante mostra "20% di sconto» e l'altra no. Continua ad aggiornare la pagina per vedere le diverse varianti.

Risoluzione dei problemi

Ti consigliamo di utilizzare la versione 6.14.14 di npm. Se riscontri errori relativi alla creazione o all'avvio dell'app di esempio e stai utilizzando una versione diversa di npm, procedi come segue.