Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Tutorial: Pengujian A/B dengan aplikasi sampel Evidently

Bagian ini menyediakan tutorial untuk menggunakan Amazon CloudWatch Terbukti untuk pengujian A/B. Tutorial ini adalah contoh aplikasi Evidently, yang merupakan sebuah aplikasi reaksi sederhana. Aplikasi sampel akan dikonfigurasi untuk menampilkan fitur showDiscount atau tidak. Ketika fitur tersebut ditampilkan untuk seorang pengguna, harga yang ditampilkan di situs belanja itu ditampilkan dengan diskon 20%.

Selain menunjukkan diskon kepada beberapa pengguna dan bukan kepada orang lain, dalam tutorial ini Anda juga mengatur Evidently untuk mengumpulkan metrik waktu buka halaman dari kedua variasi.

Langkah 1: Mengunduh aplikasi sampel

Mulailah dengan mengunduh aplikasi sampel Evidently.

Langkah 2: Menambahkan titik akhir Evidently dan menyiapkan kredensial

Berikutnya, tambahkan Wilayah dan titik akhir untuk Evidently ke file config.js di direktori src dalam paket aplikasi sampel, seperti pada contoh berikut:

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

Anda juga harus memastikan bahwa aplikasi memiliki izin untuk menelepon CloudWatch dengan jelas.

Langkah 3: Menyiapkan kode untuk evaluasi fitur

Bila Anda menggunakan CloudWatch Evidently untuk mengevaluasi fitur, Anda harus menggunakan EvaluateFeatureoperasi untuk secara acak memilih variasi fitur untuk setiap sesi pengguna. Operasi ini menetapkan sesi pengguna untuk masing-masing variasi fitur, sesuai dengan persentase yang Anda tentukan dalam percobaan.

Langkah 4: Menyiapkan kode untuk metrik percobaan

Untuk metrik kustom, gunakan Evidently PutProjectEvents API untuk mengirim hasil metrik ke Evidently. Contoh-contoh berikut akan menunjukkan kepada Anda cara menyiapkan metrik kustom dan mengirim data percobaan ke Evidently.

Tambahkan fungsi berikut untuk menghitung waktu buka halaman dan gunakan PutProjectEvents untuk mengirimkan nilai metrik ke Evidently. Tambahkan fungsi berikut ke dalam Home.tsx dan panggil fungsi ini di dalam EvaluateFeatureAPI:

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

Berikut ini adalah tampilan file App.js setelah semua pengeditan yang telah Anda lakukan sejak Anda mengunduhnya.

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;

Setiap kali ada seorang pengguna mengunjungi aplikasi sampel, metrik kustom akan dikirim ke Evidently untuk analisis. Evidently menganalisis setiap metrik dan menampilkan hasil secara waktu nyata di dasbor Evidently. Contoh berikut menunjukkan sebuah muatan metrik:

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

Langkah 5: Membuat proyek, fitur, dan percobaan

Selanjutnya, Anda membuat proyek, fitur, dan eksperimen di konsol CloudWatch Evidently.

Langkah 6: Mulai percobaan dan uji dengan CloudWatch jelas

Langkah terakhirnya adalah memulai percobaan dan memulai aplikasi sampel.

Berikutnya, Anda harus memulai aplikasi sampel Evidently dengan perintah berikut:

npm install -f && npm start

Setelah aplikasi sampel tersebut dimulai, Anda akan ditugaskan ke salah satu dari dua variasi fitur yang sedang diuji. Satu variasi akan menampilkan "Diskon 20%" dan variasi lainnya tidak. Terus segarkan halaman untuk melihat variasi-variasi yang berbeda.

Pemecahan Masalah

Kami menyarankan Anda untuk menggunakan npm versi 6.14.14. Jika Anda melihat adanya kesalahan tentang cara membangun atau memulai aplikasi sampel dan Anda menggunakan versi npm yang berbeda, lakukan hal berikut.