02 Aplikasi dasar

Titik awal

Anda berada di build-workshop-v1 (dipilih di Modul 00) — tidak perlu checkout. Siapkan sekitar 5 menit. Tumpukan workshop yang Anda jalankan di modul 00 seharusnya masih berjalan.

Prasyarat: modul 00 dan 01 selesai (tumpukan sehat, ClickHouse terisi), dan front end dapat dijangkau di http://localhost:8080/.

Mengapa

Anda tidak bisa memperluas sesuatu yang belum Anda lihat. Sekarang setelah gudang data Anda terisi (modul 01), luangkan beberapa menit untuk memahami bentuk aplikasinya: untuk apa kedua dashboard itu, bagaimana front end, back end, dan database saling bertaut, dan di mana panel chat AI berada. Ini adalah satu-satunya modul yang tidak ada yang perlu dibangun, dan itu memang disengaja — Anda berorientasi di sini, lalu memperluas aplikasi dengan data langsung, agent, dan observability di modul-modul berikutnya.

Tujuan

Mampu menjelaskan, masing-masing dalam satu kalimat, untuk apa dashboard Ops, untuk apa dashboard Historical, dan dari mana data aplikasi berasal (data historis yang Anda isi ke ClickHouse Cloud di modul 01; data langsung yang Anda alirkan lewat CDC di modul 03).

Langkah 1 — Buka dashboard Ops

frontend/

Buka http://localhost:8080/. Ini adalah dashboard Ops: kartu, filter, dan tata letak untuk metrik operasional langsung (perjalanan terbaru, zona aktif, agregat mendekati real-time). Untuk sekarang ia tetap kosong — tampilan langsungnya baru terisi setelah Anda mengalirkan baris real-time lewat CDC di modul 03. Data historis yang Anda isi di modul 01 muncul di dashboard Historical berikutnya.

Tangkapan layar di bawah menunjukkan dashboard Ops dengan tombol Use sample window diterapkan, sehingga Anda bisa melihat tata letaknya terisi data yang sudah dimuat — secara default ia terbuka pada jendela langsung (hari ini), yang tetap kosong sampai Anda memulai CDC di modul 03.

Langkah 2 — Buka dashboard Historical

frontend/

Buka http://localhost:8080/historical. Dashboard ini dibuat untuk agregasi rentang besar dan drilldown atas data perjalanan historis — dan sekarang ia menampilkan data, karena Anda mengisi satu bulan perjalanan ke ClickHouse Cloud di modul 01. Coba rentang tanggal yang lebar sepanjang bulan itu beserta kontrol filternya, dan perhatikan kuerinya kembali dalam jauh di bawah satu detik.

Langkah 3 — Temukan panel chat dan telusuri alur datanya

backend/

Temukan panel chat AI di UI (Anda akan menghubungkannya ke model nyata di modul 08). Lalu lihat bagaimana front end memanggil back end FastAPI, dan bagaimana back end dirangkai untuk meng-query ClickHouse — layanan yang ditujunya adalah layanan Cloud Anda, yang terhubung dan terisi di modul 01.

React front end  ->  FastAPI back end  ->  ClickHouse Cloud (connected + seeded in module 01)
                                        ->  ClickHouse-managed Postgres (operational source; created in module 03)

Minta coding agent Anda meringkas endpoint analitiknya:

Read the FastAPI backend and list each analytics endpoint, what it returns, and which table it reads from.

Cara memverifikasi Anda sudah selesai

• Anda sudah membuka kedua dashboard: dashboard Historical menampilkan data yang Anda isi di modul 01, dan dashboard Ops (Live) kosong sampai CDC dimulai di modul 03 — itu memang diharapkan.
• Anda dapat menyebutkan dari mana data aplikasi berasal (isian historis di ClickHouse Cloud dari modul 01; CDC langsung di modul 03).
• Anda tahu di mana panel chat berada, walaupun belum terhubung ke sebuah model.

Penutup

Anda punya model mental tentang aplikasinya: dua dashboard, satu API FastAPI, satu Postgres sumber terkelola, dan sebuah panel chat yang menunggu dihubungkan. Setiap modul berikutnya mengubah satu bagian dari gambaran ini.

Kondisi akhir

Anda memahami aplikasi yang berjalan. Lanjutkan ke 03 CDC Postgres terkelola untuk mengalirkan baris langsung ke dashboard Ops.