Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Esercitazione: test A/B con l'applicazione Evidently di esempio
Questa sezione fornisce un tutorial per l'utilizzo di Amazon CloudWatch Evidently per i test 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.
avvertimento
Questo scenario richiede IAM utenti con accesso programmatico e credenziali a lungo termine, il che presenta un rischio per la sicurezza. Per contribuire a mitigare questo rischio, si consiglia di fornire a questi utenti solo le autorizzazioni necessarie per eseguire l'operazione e di rimuoverli quando non sono più necessari. Le chiavi di accesso possono essere aggiornate se necessario. Per ulteriori informazioni, vedere Aggiornamento delle chiavi di accesso nella Guida IAM per l'utente.
Passaggio 1: Download dell'applicazione di esempio
Inizia scaricando l'applicazione Evidently di esempio.
Per scaricare l'applicazione di esempio
scarica l'applicazione di esempio dal seguente bucket Amazon S3:
https://evidently-sample-application.s3.us-west-2.amazonaws.com/evidently-sample-shopping-app.zip
Decomprimi il pacchetto.
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 assicurarsi che l'applicazione sia autorizzata a chiamare CloudWatch Evidently.
Per concedere all'app di esempio le autorizzazioni per chiamare Evidently
Effettua la federazione sul tuo account. AWS
Crea un IAM utente e allega la AmazonCloudWatchEvidentlyFullAccesspolicy a questo utente.
Prendi nota dell'ID della chiave di accesso e della chiave di accesso segreta IAM dell'utente, perché ti serviranno nel passaggio successivo.
Nello stesso file
config.js
modificato in precedenza in questa sezione, immetti i valori dell'ID chiave di accesso e la chiave di accesso segreta, come nell'esempio seguente:credential: { accessKeyId: "
Access key ID
", secretAccessKey: "Secret key
" }Importante
Utilizziamo questo passaggio per rendere l'app di esempio il più semplice possibile da provare. Non è consigliabile inserire le credenziali IAM utente nell'applicazione di produzione effettiva. Invece, ti consigliamo di utilizzare Amazon Cognito per l'autenticazione. Per maggiori informazioni, consulta Integrazione di Amazon Cognito con le app Web e per dispositivi mobili.
Passaggio 3: Impostazione del codice per la valutazione delle funzionalità
Quando si utilizza CloudWatch Evidently per valutare una funzionalità, è necessario utilizzare l'EvaluateFeatureoperazione per selezionare casualmente una variante della funzionalità per ogni sessione utente. Questa operazione assegna sessioni utente a ciascuna variante della funzionalità, in base alle percentuali specificate nell'esperimento.
Per impostare il codice di valutazione delle funzionalità per l'app demo della libreria
Aggiungi il client builder nel file
src/App.jsx
in modo che l'app di esempio possa chiamare 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, }); };
Aggiungi il comando seguente nella sezione codice
const App
per avviare il client.if (client == null) { client = defaultClientBuilder( config.evidently.ENDPOINT, config.evidently.REGION, );
Costruisci
evaluateFeatureRequest
aggiungendo il seguente codice. Questo codice pre-riempie il nome del progetto e della funzionalità che consigliamo più avanti in questo tutorial. È possibile sostituire i nomi dei progetti e delle funzionalità, purché si specifichino anche i nomi dei progetti e delle funzionalità nella console Evidently.const evaluateFeatureRequest = { entityId: id, // Input Your feature name feature: 'showDiscount', // Input Your project name' project: 'EvidentlySampleApp', };
Aggiungi il codice da chiamare Evidently per la valutazione delle funzionalità. Quando la richiesta viene inviata, Evidently assegna in modo casuale la sessione utente per vedere o meno la funzionalità
showDiscount
.client.evaluateFeature(evaluateFeatureRequest).promise().then(res => { if(res.value?.boolValue !== undefined) { setShowDiscount(res.value.boolValue); } getPageLoadTime() })
Passaggio 4: Configura il codice per i parametri dell'esperimento
Per la metrica personalizzata, usa Evidently's per inviare i risultati delle metriche PutProjectEvents
API 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. Aggiungi la seguente funzione a into Home.tsx
e chiama questa funzione all'interno di: 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(); }
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, crei il progetto, la funzionalità e l'esperimento nella console CloudWatch Evidently.
Per creare il progetto, la funzionalità e l'esperimento per questo tutorial
Apri la CloudWatch console all'indirizzo https://console.aws.amazon.com/cloudwatch/
. Nel riquadro di navigazione, scegli Application Signals, Evidently.
Scegli Crea progetto e compilare i campi. È necessario utilizzare
EvidentlySampleApp
per il corretto funzionamento del nome del progetto per l'esempio. Per Archiviazione eventi di valutazione, scegli Non memorizzare eventi di valutazione.Dopo aver riempito i campi, scegli Create profile (Crea profilo).
Per ulteriori dettagli, consulta Crea un nuovo progetto.
Dopo la creazione del progetto, creare una funzionalità in quel progetto. Assegnare un nome alla funzionalità
showDiscount
. In questa funzionalità, creare due varianti del tipoBoolean
. Assegnare un nome alla prima variantedisable
con un valore diFalse
e nominare la seconda varianteenable
con un valore diTrue
.Per ulteriori informazioni sulla creazione di una funzionalità, consulta Aggiunta di una funzionalità a un progetto.
Dopo aver finito di creare la funzionalità, creare un esperimento nel progetto. Assegnare un nome all'esperimento
pageLoadTime
.Questo esperimento utilizzerà un parametro personalizzato chiamato
pageLoadTime
che misura il tempo di caricamento della pagina da testare. Le metriche personalizzate per gli esperimenti vengono create utilizzando Amazon EventBridge. Per ulteriori informazioni su EventBridge, consulta What Is Amazon EventBridge? .Per creare quel parametro personalizzato, effettuare le seguenti operazioni quando si crea l'esperimento:
In Parametri, per Fonte parametro, scegli Parametri personalizzati.
Per Nome parametro, inserire
pageLoadTime
.Per Obiettivo scegli Decrease (Riduci). Ciò indica che vogliamo che un valore inferiore di questo parametro indichi la migliore variazione della funzionalità.
Per Metric rule (Regola parametro), inserisci quanto segue.
Per Entity ID (ID entità), inserisci
UserDetails.userId
.PerChiave valore, inserire
details.pageLoadTime
.Per Units (Unità), inserisci
ms
.
Scegli Aggiungi parametro.
Per Destinatari, seleziona 100%in modo che tutti gli utenti vengano inseriti nell'esperimento. Impostare la suddivisione del traffico tra le variazioni al 50% ciascuna.
Quindi scegli Create Experiment (Crea esperimento). Dopo averlo creato, non avvia finché non si dice a Evidently di avviarlo.
Fase 6: Iniziate l'esperimento e testatelo CloudWatch evidentemente
Gli ultimi passaggi sono l'avvio dell'esperimento e l'avvio dell'app di esempio.
Per iniziare l'esperimento di tutorial
Apri la CloudWatch console all'indirizzo https://console.aws.amazon.com/cloudwatch/
. Nel riquadro di navigazione, scegli Application Signals, Evidently.
Scegli il EvidentlySampleAppprogetto.
Seleziona la scheda Esperimenti.
Scegli il pulsante accanto a pageLoadTimee scegli Azioni, Avvia esperimento.
Scegli un orario per la fine dell'esperimento.
Scegli Inizia un esperimento.
L'esperimento inizierà immediatamente.
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.
Nota
Evidently ha valutazioni adesive. Le valutazioni delle funzionalità sono deterministiche, il che significa che per gli stessi entityId
e funzionalità, un utente riceverà sempre la stessa assegnazione di variazione. L'unica modifica delle assegnazioni delle variazioni temporali è quando un'entità viene aggiunta a un override o viene composto il traffico sperimentale.
Tuttavia, per semplificare l'utilizzo del tutorial dell'app di esempio, Evidently riassegna la valutazione della funzionalità dell'app di esempio ogni volta che si aggiorna la pagina, in modo da poter sperimentare entrambe le varianti senza dover aggiungere sostituzioni.
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.
Per installare la versione 6.14.14 di npm
Usa un browser per connetterti a https://nodejs.org/download/release/v14.17.5/
. Scarica nodo v14.17.5.pkg
ed esegui questo pkg per installare npm. Se viene visualizzato un errore
webpack not found
, passa alla cartellaevidently-sample-shopping-app
e prova quanto segue:Eliminazione di
package-lock.json
Eliminazione di
yarn-lock.json
Eliminazione di
node_modules
Eliminare la dipendenza del webpack da
package.json
Esegui il seguente codice:
npm install -f && npm