Workshop TrueWatch: Panduan Penyiapan Demo ExpressCart

🌟 Ini adalah aplikasi Truewatchshop berbasis expresscart oleh Markmoffat

Lihat dokumentasi expresscart 📖 di sini.

ℹ️ Tujuan:
Tujuan Truewatchshop adalah menyediakan lingkungan sandbox pelatihan bagi pelanggan dan mitra.
Sandbox ini memungkinkan pengguna menjelajah, bereksperimen, dan mempelajari monitoring, tracing, serta manajemen kinerja aplikasi menggunakan Truewatch dalam lingkungan praktik yang aman.
Aplikasi telah diinstrumentasi, sehingga fokus sandbox pelatihan ini adalah cara melakukan onboarding data dan membiasakan diri dengan platform serta alur kerja Truewatch.

🛠️ Tech Stack

Proyek ini dibangun menggunakan teknologi berikut:

Node.js: 🟢 Lingkungan runtime backend untuk menjalankan JavaScript.
Express.js: 🚀 Framework web untuk membangun aplikasi.
MongoDB: 🗄️ Database NoSQL untuk menyimpan data aplikasi.
Docker: 🐳 Platform containerization untuk men-deploy aplikasi.
Nginx: 🌐 Web server yang digunakan sebagai reverse proxy.
Truewatch RUM / APM / LOG: 📊 Alat monitoring dan tracing untuk kinerja dan debugging.

⚙️ Prasyarat

Sebelum memulai, pastikan Anda memiliki hal berikut:

Akun Truewatch 📝
Daftarkan akun Truewatch di truewatch.com untuk mengakses fitur monitoring dan analitik.
Sistem Linux dengan Koneksi Internet 💻
Gunakan mesin Linux (fisik atau virtual) dengan koneksi internet yang stabil.

Tips: Kami menyarankan penggunaan VM Linux untuk isolasi dan kemudahan penyiapan. Jika Anda tidak memilikinya, Anda dapat menggunakan Oracle VirtualBox untuk mesin Windows atau OrbStack untuk MacOS guna membuat lingkungan virtual.
Sandbox pelatihan ini dibuat menggunakan Orbstack dan Ubuntu 22.04.5 LTS.
- Jika Anda memilih Orbstack, panduan instalasi tersedia di sini.
- Jika Anda memilih Virtualbox, panduan instalasi tersedia di sini.
Buat VM Linux dengan Ubuntu 22.04.5 LTS.
DataKit Terinstal 📦
Instal DataKit dari akun Truewatch Anda untuk mengaktifkan tracing dan monitoring.
Informasi lebih lanjut tentang instalasi Datakit resmi di sini.

Untuk menginstal Datakit Anda:
- Buka platform Truewatch Anda, lalu masuk dengan kredensial Truewatch Anda.
- Navigasikan ke Integrations > Datakit.
- Salin Deploy Script yang disorot warna hijau seperti pada cuplikan layar di bawah ini.

Buka mesin Linux yang baru Anda instal, lalu jalankan Deploy Script di konsol:

DK_DATAWAY="https://id1-openway.truewatch.com?token=tkn_xxxxxxxx" bash -c "$(curl -L https://static.truewatch.com/datakit/install.sh)"

Pastikan datakit berjalan:

ps aux | grep datakit
root         806 11.6  0.3 2036304 34012 ?       Sl   01:59 116:22 /usr/local/datakit/externals/datakit-ebpf run --datakit-apiserver 0.0.0.0:9529 --hostname ubuntu --l7net-enabled httpflow --pprof-host 127.0.0.1 --pprof-port 6061 --netlog-metric --netlog-log --trace-env-list DK_BPFTRACE_SERVICE,DD_SERVICE,OTEL_SERVICE_NAME --enabled ebpf-net,ebpf-trace

Docker 🐳
Instal Docker untuk menjalankan aplikasi dalam container.
Lihat petunjuk Docker di sini.
```
sudo apt-get update
sudo apt-get install -y git docker.io docker-compose
sudo usermod -aG docker $USER
newgrp docker
```
Catatan: Dua perintah terakhir menambahkan pengguna Anda ke grup docker sehingga Anda dapat menjalankan Docker tanpa sudo. Anda mungkin perlu keluar lalu masuk kembali agar perubahan ini berlaku.
Git 🧰
Instal Git untuk meng-clone repositori dan mengelola kode sumber:
```
sudo apt-get update
sudo apt-get install -y git
```

🚀 Langkah-langkah Menyiapkan Proyek

Clone repositori:

git clone https://github.com/TrueWatchTech/expresscart-demo-setup-guide
cd expresscart-demo-setup-guide

Instal dependensi dan build proyek:
```
docker-compose build
```
Jalankan layanan:
```
docker-compose up -d
```

Isi database dengan data uji:

docker exec -it expresscart npm run testdata

[Opsional] Sesuaikan gambar produk:
- Buka halaman admin Truewatchshop.
- Masuk menggunakan kredensial berikut:
  - Username: [email protected]
  - Password: test
- Navigasikan ke Products.

Temukan produk "Duckworth Woolfill Jacket" lalu klik add image URL di bagian bawah. Jendela Product Image URL akan muncul.

Buka tab browser baru dan cari URL gambar di Google menggunakan kata kunci Duckworth Woolfill Jacket. Sebagai contoh, Anda dapat menggunakan URL ini:
https://content.steepandcheap.com/images/items/large/FJR/FJRZ0M5/GRE.jpg.
Salin URL tersebut ke Product Image URL lalu tambahkan gambar.
Ulangi langkah di atas untuk produk lainnya guna memperbarui URL gambarnya.

Catatan: Anda dapat memantau waktu pemuatan gambar dari statistik RUM.

📊 Langkah-langkah Menyiapkan Infra Monitoring

Dengan menginstal Datakit seperti pada Langkah 3 di bagian Prasyarat.
Host Linux yang telah terinstal datakit akan mengirimkan data metriknya ke platform Truewatch.
Pastikan hal ini dengan membuka platform Truewatch Anda.
Navigasikan ke Infrastructure > Host. Klik Honeycomb untuk mengubah tampilan menjadi Honeycomb View.

Anda akan dapat melihat host Anda. Arahkan kursor mouse untuk melihat metrik utama host Anda secara sekilas (CPU, MEM Usage, load5).

Aktifkan monitoring container, dalam hal ini Docker, dengan mengonfigurasi container.conf Datakit:
- Buka konsol Linux Anda, pindah ke direktori /usr/local/datakit/conf.d/container/. Lalu salin container.conf.sample menjadi container.conf dan restart Datakit:
```
cd /usr/local/datakit/conf.d/container
sudo cp container.conf.sample container.conf
sudo datakit service -R
```
Pastikan hal ini dengan membuka platform Truewatch Anda.
Navigasikan ke Infrastructure > Containers.

Jelajahi tampilan Containers dengan mengklik nama container.

Navigasikan ke Scenes > New Dashboard. Pada Template Name, ketik Docker, lalu tekan enter. Anda akan mendapatkan template Docker Monitor View, klik template tersebut. Beri nama lalu klik confirm.

Setelah langkah di atas, Anda akan tiba di Docker Monitor View. Berikut contohnya; Anda dapat menerapkan filter menggunakan kolom di kiri atas, yaitu (Host Name, Container Name, Container ID).

Infrastructure monitoring sangat penting untuk menjaga kesehatan, kinerja, dan keandalan lingkungan aplikasi Anda. Dengan Truewatch, Anda memperoleh visibilitas real-time ke server, container, dan sumber daya jaringan Anda. Hal ini memungkinkan Anda mendeteksi masalah dengan cepat, mengoptimalkan penggunaan sumber daya, dan memastikan pengalaman yang mulus bagi pengguna Anda.

🌐 Langkah-langkah Menyiapkan RUM

Buka platform Truewatch Anda, lalu masuk dengan kredensial Truewatch Anda.
Buat client token:
Buka Management > Client Token > Create. Salin token yang baru dibuat dan simpan di tempat yang aman; Anda akan membutuhkannya pada langkah berikutnya.

Masuk ke konsol Truewatch Anda lalu buka Real User Monitoring > Application List > Create Application.

Pilih Web sebagai App Type. Masukkan nama aplikasi pada kolom App Name dan tentukan App Id.

Pilih Public DataWay Deployment, lalu pilih CDN Asynchronous Loading. Masukkan Client Token yang telah Anda simpan sebelumnya pada bagian clientToken.

Masukkan nilai berikut (atau nilai yang paling menggambarkan aplikasi Anda):
- service = frontend
- env = production
- version = 1.0.0.0

Salin skrip yang dihasilkan otomatis dan disorot warna hijau, lalu simpan di editor favorit Anda.

Instrumentasi Nginx agar menggunakan parameter di atas:
- Buka direktori expresscart-demo-setup-guide Anda di konsol, lalu navigasikan ke nginx/conf.d
```
cd expresscart-demo-setup-guide
cd nginx/conf.d/
```
- Edit default.conf dengan editor favorit Anda, lalu tempelkan nilai dari skrip yang dihasilkan otomatis pada langkah 5.

Catatan: Kami mengonfigurasi Nginx untuk menginstrumentasi agen RUM secara otomatis dengan menyisipkan skrip menggunakan direktif sub_filter, sehingga agen RUM terinstrumentasi ke browser klien. Dengan metode ini, Anda tidak perlu mengubah kode HTML frontend Anda. Informasi lebih lanjut tentang direktif Nginx sub_filter di sini.

Hentikan dan jalankan kembali layanan:

docker-compose down
docker-compose up -d

Buka browser Anda dan kunjungi http://localhost:8080. Anda akan dapat melihat aplikasi web Anda berjalan di port 8080.

Berinteraksilah dengan aplikasi Anda:
- Masuk dengan pengguna [email protected] dan kata sandi test.
- Simulasikan pengguna yang memilih produk ke keranjang.
Buka Platform Truewatch Anda, buka RUM > Application, lalu pilih aplikasi Anda.
Amati statistik di bawah Analysis Dashboard.