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
penting
Pemberitahuan akhir dukungan: Pada 16 Oktober 2025, AWS akan menghentikan dukungan untuk CloudWatch Evidently. Setelah 16 Oktober 2025, Anda tidak akan lagi dapat mengakses konsol Terbukti atau sumber daya Terbukti.
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.
Awas
Skenario ini mengharuskan IAM pengguna dengan akses terprogram dan kredensi jangka panjang, yang menghadirkan risiko keamanan. Untuk membantu mengurangi risiko ini, kami menyarankan agar Anda memberikan pengguna ini hanya izin yang mereka perlukan untuk melakukan tugas dan menghapus pengguna ini ketika mereka tidak lagi diperlukan. Kunci akses dapat diperbarui jika perlu. Untuk informasi selengkapnya, lihat Memperbarui kunci akses di Panduan IAM Pengguna.
Langkah 1: Mengunduh aplikasi sampel
Mulailah dengan mengunduh aplikasi sampel Evidently.
Cara mengunduh aplikasi sampel
Unduh aplikasi sampel dari bucket Amazon S3 berikut:
https://evidently-sample-application.s3.us-west-2.amazonaws.com/evidently-sample-shopping-app.zip
Buka zip paketnya.
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.
Cara memberikan izin aplikasi sampel untuk memanggil Evidently
Federasi ke AWS akun Anda.
Buat IAM pengguna dan lampirkan AmazonCloudWatchEvidentlyFullAccesskebijakan ke pengguna ini.
Catat id kunci akses IAM pengguna dan kunci akses rahasia, karena Anda akan membutuhkannya di langkah berikutnya.
Dalam file
config.js
yang sama yang sudah Anda ubah sebelumnya di bagian ini, masukkan nilai ID kunci akses dan kunci akses rahasia, seperti pada contoh berikut:credential: { accessKeyId: "
Access key ID
", secretAccessKey: "Secret key
" }penting
Kami menggunakan langkah ini untuk membuat aplikasi sampel tersebut sesederhana mungkin untuk Anda coba. Kami tidak menyarankan Anda memasukkan kredensi IAM pengguna Anda ke dalam aplikasi produksi Anda yang sebenarnya. Sebaliknya, kami menyarankan Anda menggunakan Amazon Cognito untuk autentikasi. Untuk informasi selengkapnya, silakan lihat Mengintegrasikan Amazon Cognito dengan aplikasi web dan seluler.
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.
Cara menyiapkan kode evaluasi fitur untuk aplikasi demo toko buku
Tambahkan pembuat klien dalam file
src/App.jsx
sehingga aplikasi sampel dapat memanggil 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, }); };
Tambahkan berikut ini ke bagian kode
const App
untuk memulai klien.if (client == null) { client = defaultClientBuilder( config.evidently.ENDPOINT, config.evidently.REGION, );
Membuat konsep
evaluateFeatureRequest
dengan menambahkan kode berikut. Kode ini akan secara otomatis mengisi nama proyek dan nama fitur yang kami rekomendasikan nanti dalam tutorial ini. Anda dapat mengganti nama proyek dan fitur Anda sendiri, selama Anda juga menentukan nama proyek dan fitur tersebut di konsol Evidently.const evaluateFeatureRequest = { entityId: id, // Input Your feature name feature: 'showDiscount', // Input Your project name' project: 'EvidentlySampleApp', };
Tambahkan kode untuk memanggil Evidently untuk melakukan evaluasi fitur. Ketika permintaan tersebut dikirim, Evidently akan secara acak menetapkan sesi pengguna untuk melihat fitur
showDiscount
atau tidak.client.evaluateFeature(evaluateFeatureRequest).promise().then(res => { if(res.value?.boolValue !== undefined) { setShowDiscount(res.value.boolValue); } getPageLoadTime() })
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 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(); }
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.
Untuk membuat proyek, fitur, dan percobaan untuk tutorial ini
Buka CloudWatch konsol di https://console.aws.amazon.com/cloudwatch/
. Di panel navigasi, pilih Sinyal Aplikasi, Terbukti.
Pilih Buat proyek dan isi bidang-bidang yang ditampilkan. Anda harus menggunakan
EvidentlySampleApp
untuk nama proyek agar sampel dapat berfungsi dengan benar. Untuk Penyimpanan peristiwa evaluasi, pilih Jangan simpan peristiwa evaluasi.Setelah mengisi bidang-bidang itu, pilih Buat Proyek.
Untuk detail selengkapnya, silakan lihat Membuat sebuah proyek baru.
Setelah proyek selesai dibuat, buatlah sebuah fitur dalam proyek itu. Beri nama fitur dengan
showDiscount
. Dalam fitur ini, buatlah dua variasi tipeBoolean
. Beri nama variasi pertama dengan namadisable
dengan nilaiFalse
dan beri nama variasi kedua dengan namaenable
dengan nilaiTrue
.Untuk informasi selengkapnya tentang cara membuat sebuah fitur, silakan lihat Menambahkan sebuah fitur ke proyek.
Setelah Anda selesai membuat fitur tersebut, buatlah sebuah percobaan dalam proyek. Beri nama percobaan tersebut dengan nama
pageLoadTime
.Percobaan ini akan menggunakan metrik kustom yang bernama
pageLoadTime
yang mengukur waktu buka halaman dari halaman yang sedang diuji. Metrik khusus untuk eksperimen dibuat menggunakan Amazon EventBridge. Untuk informasi selengkapnya EventBridge, lihat Apa itu Amazon EventBridge? .Untuk membuat metrik kustom tersebut, lakukan hal-hal berikut saat Anda membuat percobaan:
Pada Metrik, untuk Sumber metrik, pilih Metrik kustom.
Untuk Nama metrik, masukkan
pageLoadTime
.Untuk Tujuan pilih Turun. Hal ini menunjukkan bahwa kita menginginkan nilai yang lebih rendah dari metrik ini untuk menunjukkan variasi terbaik dari fitur tersebut.
Untuk Aturan metrik, masukkan berikut ini:
Untuk ID Entitas, masukkan
UserDetails.userId
.Untuk Kunci nilai, masukkan
details.pageLoadTime
.Untuk Unit, masukkan
ms
.
Pilih Tambahkan metrik.
Untuk Audiens, pilih 100% sehingga semua pengguna akan dimasukkan dalam percobaan. Setel pembagian lalu lintas antara variasi menjadi 50% masing-masing.
Kemudian, pilih Buat percobaan untuk membuat percobaan tersebut. Setelah Anda selesai membuatnya, percobaan itu tidak akan dimulai sampai Anda memberi tahu Evidently untuk memulainya.
Langkah 6: Mulai percobaan dan uji dengan CloudWatch jelas
Langkah terakhirnya adalah memulai percobaan dan memulai aplikasi sampel.
Untuk memulai percobaan dalam tutorial ini
Buka CloudWatch konsol di https://console.aws.amazon.com/cloudwatch/
. Di panel navigasi, pilih Sinyal Aplikasi, Terbukti.
Pilih EvidentlySampleAppproyek.
Pilih tab Percobaan.
Pilih tombol di samping pageLoadTimedan pilih Tindakan, Mulai eksperimen.
Pilih waktu kapan percobaan akan berakhir.
Pilih Mulai percobaan.
Percobaan akan dimulai saat itu juga.
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.
catatan
Evidently memiliki evaluasi yang lengket. Evaluasi fitur bersifat deterministik, artinya untuk entityId
dan fitur yang sama, seorang pengguna akan selalu menerima penetapan variasi yang sama. Satu-satunya waktu perubahan penetapan variasi adalah ketika ada entitas yang ditambahkan untuk sebuah penggantian atau lalu lintas percobaan dipanggil.
Namun demikian, untuk mempermudah penggunaan tutorial aplikasi sampel ini untuk Anda, Evidently menetapkan kembali evaluasi fitur aplikasi sampel setiap kali Anda menyegarkan halaman, sehingga Anda dapat mengalami kedua variasi tersebut tanpa harus menambahkan penggantian.
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.
Cara melakukan instalasi npm
versi 6.14.14
Gunakan browser untuk terhubung ke https://nodejs. org/download/release/v14.17.5/
. Unduh node-v14.17.5.pkg
dan jalankan pkg ini untuk melakukan instalasi npm. Jika Anda melihat sebuah kesalahan
webpack not found
, buka folderevidently-sample-shopping-app
dan coba lakukan hal berikut ini:Hapus
package-lock.json
Hapus
yarn-lock.json
Hapus
node_modules
Hapus dependensi webpack dari
package.json
Jalankan hal berikut:
npm install -f && npm