Étape 1 : télécharger l'exemple d'application Étape 2 : ajouter le point de terminaison Evidently et configurer les informations d'identification Étape 3 : configurer le code pour l'évaluation des fonctions Étape 4 : configurer le code pour les métriques d'expérience Étape 5 : créer le projet, la fonction et l'expérience Étape 6 : Commencez l'expérience et testez CloudWatch évidemment

Didacticiel : tests A/B avec l'exemple d'application Evidently

Cette section fournit un didacticiel sur l'utilisation d'Amazon CloudWatch Evidently pour les tests A/B. Ce tutoriel est l'exemple d'application Evidently, qui est une simple application react. L'exemple d'application sera configuré pour afficher une fonction showDiscount ou non. Lorsque la fonction est affichée à un utilisateur, le prix affiché sur le site Web d'achat affichait une réduction de 20 %.

En plus de montrer la réduction à certains utilisateurs et non à d'autres, dans ce tutoriel, vous configurez Evidently pour collecter des métriques de temps de chargement des pages à partir des deux variations.

Avertissement

Ce scénario nécessite que les utilisateurs IAM disposent d'un accès programmatique et d'informations d'identification à long terme, ce qui présente un risque de sécurité. Pour atténuer ce risque, nous vous recommandons de ne fournir à ces utilisateurs que les autorisations dont ils ont besoin pour effectuer la tâche et de supprimer ces utilisateurs lorsqu'ils ne sont plus nécessaires. Les clés d'accès peuvent être mises à jour si nécessaire. Pour plus d'informations, consultez la section Mise à jour des clés d'accès dans le guide de l'utilisateur IAM.

Étape 1 : télécharger l'exemple d'application

Commencez par télécharger l'exemple d'application Evidently.

Pour télécharger l'exemple d'application

Téléchargez l'exemple d'application à partir du compartiment Simple Storage Service (Amazon S3) suivant :
```
https://evidently-sample-application.s3.us-west-2.amazonaws.com/evidently-sample-shopping-app.zip
```
Décompressez le package.

Étape 2 : ajouter le point de terminaison Evidently et configurer les informations d'identification

Ensuite, ajoutez la Région et le point de terminaison pour Evidently dans le fichier config.js du répertoire src dans l'exemple de package d'application, comme dans l'exemple suivant :


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

Vous devez également vous assurer que l'application est autorisée à appeler CloudWatch Evidently.

Pour accorder à l'exemple d'application les autorisations pour appeler Evidently

Fédérez sur votre AWS compte.
Créez un utilisateur IAM et associez la AmazonCloudWatchEvidentlyFullAccesspolitique à cet utilisateur.
Notez l'identifiant de la clé d'accès et la clé d'accès secrète de l'utilisateur IAM, car vous en aurez besoin lors de l'étape suivante.
Dans le même fichier config.js que vous avez modifié précédemment dans cette section, saisissez les valeurs de l'identifiant de la clé d'accès et de la clé d'accès secrète, comme dans l'exemple suivant :
```
credential: {
   accessKeyId: "Access key ID",
   secretAccessKey: "Secret key"
}
```
Important
Nous utilisons cette étape pour rendre l'exemple d'application aussi simple que possible pour vous. Nous vous déconseillons de placer vos informations d'identification utilisateur IAM dans votre application de production réelle. En lieu et place, nous vous recommandons d'utiliser Amazon Cognito pour l'authentification. Pour plus d'informations, consultez Intégration d'Amazon Cognito aux applications Web et mobiles.

Étape 3 : configurer le code pour l'évaluation des fonctions

Lorsque vous utilisez CloudWatch Evidently pour évaluer une fonctionnalité, vous devez utiliser l'EvaluateFeatureopération pour sélectionner de manière aléatoire une variante de fonctionnalité pour chaque session utilisateur. Cette opération attribue des séances d'utilisateurs à chaque variation de la fonction, en fonction des pourcentages que vous avez indiqués dans l'expérience.

Pour configurer le code d'évaluation des fonctions pour l'application de démonstration bookstore

Ajoutez le générateur de clients dans le fichier src/App.jsx pour que l'exemple d'application puisse appeler 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,
    });
};

Ajoutez ce qui suit dans la section de code const App pour initier le client.


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

Construisez evaluateFeatureRequest en ajoutant le code suivant. Ce code préremplit le nom du projet et le nom de la fonction que nous recommandons plus loin dans ce didacticiel. Vous pouvez les remplacer par vos propres noms de projets et de fonctions, à condition que vous spécifiez également ces noms de projet et de fonction dans la console Evidently.
```
const evaluateFeatureRequest = {
              entityId: id,
              // Input Your feature name
              feature: 'showDiscount',
              // Input Your project name'
              project: 'EvidentlySampleApp',
            };
```
Ajoutez le code à appeler Evidently pour l'évaluation des fonctions. Lorsque la demande est envoyée, Evidently attribue de manière aléatoire à la session utilisateur pour voir la fonction showDiscount ou non.
```
client.evaluateFeature(evaluateFeatureRequest).promise().then(res => {
    if(res.value?.boolValue !== undefined) {
        setShowDiscount(res.value.boolValue);
    }
    getPageLoadTime()
 })
```

Étape 4 : configurer le code pour les métriques d'expérience

Pour la métrique personnalisée, utilisez l'API PutProjectEvents d'Evidently pour envoyer les résultats des métriques à Evidently. Les exemples suivants décrivent la configuration de la métrique personnalisée et l'envoi des données d'expérience à Evidently.

Ajoutez la fonction suivante pour calculer le temps de chargement de la page et utilisez PutProjectEvents pour envoyer les valeurs de métrique à Evidently. Ajoutez la fonction suivante dans Home.tsx et appelez cette fonction dans l'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();
  }

Voici à quoi devrait ressembler le fichier App.js après toutes les modifications que vous avez effectuées depuis son téléchargement.


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;

Chaque fois qu'un utilisateur visite l'application exemple, une métrique personnalisée est envoyée à Evidently pour analyse. Evidently analyse chaque métrique et affiche les résultats en temps réel sur le tableau de bord d'Evidently. L'exemple suivant illustre une charge utile de métrique :


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

Étape 5 : créer le projet, la fonction et l'expérience

Ensuite, vous créez le projet, la fonctionnalité et l'expérience dans la console CloudWatch Evidently.

Pour créer le projet, la fonction et l'expérience pour ce tutoriel

Ouvrez la CloudWatch console à l'adresse https://console.aws.amazon.com/cloudwatch/.
Dans le volet de navigation, choisissez Application Signals, Evidently.
Sélectionnez Create project (Créer un projet) et remplissez les champs. Vous devez utiliser EvidentlySampleApp pour que le nom du projet de l'exemple fonctionne correctement. Pour Evaluation event storage (Stockage d'événements d'évaluation), choisissez Don't store Evaluation events (Ne stockez pas les événements d'évaluation).

Une fois les champs remplis, choisissez Create Project (Créer le projet).

Pour en savoir plus, consultez Création d'un nouveau projet..
Une fois le projet créé, créez une fonction dans ce projet. Nommez la fonctionshowDiscount. Dans cette fonction, créez deux variations du type Boolean Nommez la première variation disable par une valeur de False et nommez la deuxième variation enable par une valeur deTrue.

Pour plus d'informations sur la création d'une fonction, consultez Ajouter une fonction à un projet.
Une fois la création de la fonction terminée, créez une expérience dans le projet. Nommez l'expériencepageLoadTime.

Cette expérience utilisera une métrique personnalisée appelée pageLoadTime qui mesure le temps de chargement de la page testée. Les métriques personnalisées pour les tests sont créées à l'aide d'Amazon EventBridge. Pour plus d'informations EventBridge, consultez Qu'est-ce qu'Amazon EventBridge ? .

Pour créer cette métrique personnalisée, procédez comme suit lorsque vous créez l'expérience :
- Sous Métriques, pour Source métrique, choisissez Métriques personnalisées.
- Pour Metric name (Nom de métrique), saisissez pageLoadTime.
- Pour Goal (Objectif), sélectionnez Decrease (Diminuer). Cela indique que nous souhaitons qu'une valeur inférieure de cette métrique indique la meilleure variation de fonction.
- Pour Metric rule (Règle de métrique), saisissez ce qui suit.
  - Pour Entity ID (ID d'entité), saisissez UserDetails.userId.
  - Pour Value key (Valeur de la clé), saisissez details.pageLoadTime.
  - Pour Units (Unités), saisissez ms.
- Sélectionnez Add metric (Ajouter une métrique).
Pour Audiences (Publics ciblés), sélectionnez 100 % afin que tous les utilisateurs soient saisis dans l'expérience. Configurez la répartition du trafic entre les variations de 50 % chacune.

Ensuite, sélectionnez Create Experiment (Créer une expérience) pour créer l'expérience. Une fois que vous l'avez créée, elle ne démarre pas tant que vous n'avez pas demandé à Evidently de la démarrer.

Étape 6 : Commencez l'expérience et testez CloudWatch évidemment

Les dernières étapes consistent à démarrer l'expérience et à démarrer l'application exemple.

Pour démarrer l'expérience du tutoriel

Ouvrez la CloudWatch console à l'adresse https://console.aws.amazon.com/cloudwatch/.
Dans le volet de navigation, choisissez Application Signals, Evidently.
Choisissez le EvidentlySampleAppprojet.
Sélectionnez l'onglet Experiments (Expériences).
Cliquez sur le bouton à côté pageLoadTimeet choisissez Actions, Démarrer l'expérience.
Sélectionnez une heure pour la fin de l'expérience.
Sélectionnez Start experiment (Démarrer une expérience).

L'expérience démarre immédiatement.

Ensuite, démarrez l'exemple d'application Evidently à l'aide de la commande suivante :


npm install -f && npm start

Une fois l'application démarrée, vous serez affecté à l'une des deux variations de fonctions testées. L'une des variations affiche « 20 % de réduction », et l'autre ne l'affiche pas. Continuez à actualiser la page pour voir les différentes variations.

Note

Evidently a des évaluations collantes. Les évaluations des fonctions sont déterministes, ce qui signifie pour la même entityId et fonction, un utilisateur recevra toujours la même attribution de variation. Le seul moment où les affectations de variation changent est lorsqu'une entité est ajoutée à une substitution ou que le trafic d'expérience est composé.

Toutefois, pour vous faciliter l'utilisation du tutoriel de l'application exemple, Evidently réaffecte l'évaluation de la fonction de l'application exemple à chaque fois que vous rafraîchissez la page, afin que vous puissiez expérimenter les deux variantes sans devoir ajouter des substitutions.

Dépannage

Nous vous recommandons d'utiliser npm version 6.14.14. Si vous constatez des erreurs concernant la création ou le démarrage de l'exemple d'application et que vous utilisez une version différente de npm, procédez comme suit.

Pour installer `npm` version 6.14.14

Utiliser un navigateur pour vous connecter à https://nodejs.org/download/release/v14.17.5/.
Téléchargez node-v14.17.5.pkg et exécutez ce pkg pour installer npm.

Si vous voyez une erreur webpack not found, accédez au répertoire evidently-sample-shopping-app et essayez ce qui suit :
1. Supprimez package-lock.json
2. Supprimez yarn-lock.json
3. Supprimez node_modules
4. Supprimez la dépendance au Webpack dans package.json
5. Exécutez les commandes suivantes :
```
npm install -f && npm
```

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

CloudWatch De toute évidence, des quotas

Utiliser du CloudWatch rhum