02 แอปพื้นฐาน

จุดเริ่มต้น

คุณอยู่บน build-workshop-v1 (เลือกไว้ในโมดูล 00) — ไม่ต้อง checkout ตั้งงบเวลา ประมาณ 5 นาที สแต็กเวิร์กช็อปที่คุณเริ่มไว้ในโมดูล 00 ควรยังรันอยู่

ข้อกำหนดเบื้องต้น: โมดูล 00 และ 01 เสร็จแล้ว (สแต็กสุขภาพดี ClickHouse มีข้อมูลแล้ว) ฟรอนต์เอนด์เข้าถึงได้ที่ http://localhost:8080/

ทำไม

คุณต่อยอดสิ่งที่ยังไม่เคยเห็นไม่ได้ ตอนนี้ที่คลังข้อมูลของคุณมีข้อมูลแล้ว (โมดูล 01) ใช้เวลาสองสามนาทีทำความเข้าใจรูปร่างของแอป: แดชบอร์ดสองอันมีไว้ทำอะไร ฟรอนต์เอนด์ แบ็กเอนด์ และฐานข้อมูลประกอบกันอย่างไร และแผงแชท AI อยู่ที่ไหน นี่เป็น โมดูลเดียวที่ไม่มีอะไรต้องสร้าง และนั่นเป็นความตั้งใจ — คุณตั้งหลักที่นี่ แล้วจึง ต่อยอดแอปด้วยข้อมูลสด agent และ observability ในโมดูลถัดไป

เป้าหมาย

สามารถอธิบายเป็นประโยคเดียวได้ว่าแดชบอร์ด Ops มีไว้ทำอะไร แดชบอร์ด Historical มีไว้ทำอะไร และข้อมูลของแอปมาจากไหน (ข้อมูลย้อนหลังที่คุณ โหลดเข้า ClickHouse Cloud ในโมดูล 01 ข้อมูลสดที่คุณสตรีมเข้ามาผ่าน CDC ในโมดูล 03)

ขั้นที่ 1 — เปิดแดชบอร์ด Ops

frontend/

เปิด http://localhost:8080/ นี่คือแดชบอร์ด Ops: การ์ด ฟิลเตอร์ และเลย์เอาต์ สำหรับเมตริกปฏิบัติการสด (การเดินทางล่าสุด โซนที่ใช้งานอยู่ ค่ารวมแบบใกล้เรียลไทม์) มัน จะยังว่างอยู่ตอนนี้ — วิวสดจะเติมข้อมูลเมื่อคุณสตรีมแถวแบบเรียลไทม์ผ่าน CDC ในโมดูล 03 เท่านั้น ข้อมูลย้อนหลังที่คุณโหลดในโมดูล 01 จะปรากฏบนแดชบอร์ด Historical ในขั้นถัดไป

ภาพหน้าจอด้านล่างแสดงแดชบอร์ด Ops ที่กดปุ่ม Use sample window แล้ว เพื่อให้คุณเห็นเลย์เอาต์ที่มีข้อมูลที่โหลดไว้ — โดยค่าเริ่มต้นมันเปิดที่หน้าต่าง สด (วันนี้) ซึ่งจะว่างอยู่จนกว่าคุณจะเริ่ม CDC ในโมดูล 03

ขั้นที่ 2 — เปิดแดชบอร์ด Historical

frontend/

เปิด http://localhost:8080/historical แดชบอร์ดนี้สร้างมาสำหรับการรวมข้อมูลช่วงกว้าง และการเจาะลึกบนข้อมูลการเดินทางย้อนหลัง — และตอนนี้มันแสดงผลได้ เพราะคุณ โหลดข้อมูลการเดินทางหนึ่งเดือนเข้า ClickHouse Cloud ในโมดูล 01 ลองใช้ช่วงวันที่กว้างครอบ เดือนนั้นและตัวควบคุมฟิลเตอร์ และดูคิวรีกลับมาในเวลาต่ำกว่าหนึ่งวินาทีอย่างสบาย

ขั้นที่ 3 — หาแผงแชทและตามการไหลของข้อมูล

backend/

หาแผงแชท AI ใน UI (คุณจะต่อสายมันเข้ากับโมเดลจริงในโมดูล 08) แล้วดู ว่าฟรอนต์เอนด์เรียกแบ็กเอนด์ FastAPI อย่างไร และแบ็กเอนด์ถูกต่อสายให้คิวรี ClickHouse อย่างไร — เซอร์วิสที่มันชี้ไปคือเซอร์วิส Cloud ของคุณ ที่เชื่อมต่อและโหลดข้อมูลใน โมดูล 01

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

ขอให้ coding agent ของคุณสรุปเอนด์พอยต์วิเคราะห์:

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

วิธีตรวจสอบว่าคุณทำเสร็จ

• คุณได้เปิดแดชบอร์ดทั้งสองแล้ว: แดชบอร์ด Historical แสดงผลจากข้อมูลที่คุณ โหลดในโมดูล 01 และแดชบอร์ด Ops (Live) ว่างอยู่จนกว่า CDC จะเริ่มในโมดูล 03 — นั่นเป็นเรื่องที่คาดไว้
• คุณบอกได้ว่าข้อมูลของแอปมาจากไหน (ข้อมูลตั้งต้นย้อนหลังใน ClickHouse Cloud จาก โมดูล 01 ข้อมูล CDC สดในโมดูล 03)
• คุณรู้ว่าแผงแชทอยู่ที่ไหน แม้ว่ามันจะยังไม่ได้ต่อกับโมเดล

สรุปปิดท้าย

คุณมีแบบจำลองความคิดของแอปแล้ว: แดชบอร์ดสองอัน API แบบ FastAPI ฐานข้อมูลต้นทาง Postgres แบบ managed และแผงแชทที่รอการเชื่อมต่อ ทุกโมดูลหลังจากนี้จะเปลี่ยนส่วนหนึ่งของภาพ นี้

สถานะปลายทาง

คุณเข้าใจแอปที่รันอยู่ ไปต่อที่ 03 Managed Postgres CDC เพื่อสตรีมแถวสดเข้าสู่แดชบอร์ด Ops