LESSON 08 · 午餐揪團頁主線 · 結業 Capstone

全覽 Dashboard（結業）

收成整條主線的最終 payoff：把共用 Sheet 裡所有人的揪團資料，第一次同框顯示在同一個頁面上。你最早學會的技能，跑在你最晚拿到的能力上。

結業 Capstone 所有層合體全班資料同框產出：全覽 Dashboard

✓

完成定義 · Definition of Done

學員完成 Dashboard 頁面，能看到全班（非僅自己）的揪團資料；結業 PR 描述包含完整的自我總結。

01Capstone：所有層一次合體

今天要做的事：把共用 Sheet 裡所有人的揪團資料，全部顯示在同一個頁面上。想一下，這個功能用到了哪些你學過的東西？

圖 1.1Capstone：所有層一次合體——共用資料庫的資料，fetch 進來、map 成整排卡片，全公司同框。

🧩合體清單

第 3 堂的「一份資料長出整排卡片」＋ 第 4 堂的 fetch ＋ 第 5 堂才拿到的「寫得進去、大家看到同一份真相」＋ 第 6 堂的「而且那一筆知道是誰做的」。你最早學會的技能，跑在你最晚拿到的能力上——這就是「後端到底給了你什麼」的最終答案。

02動手：實作 Dashboard

用下面的 Prompt A 建立 Dashboard 頁面，fetch 第 5 堂那個唯讀資料網址
把回來的資料用 map 渲染成整排卡片（餐廳、發起人、人數）
畫面風格延續自己午餐揪團頁的設計
（選配加碼）用下面的 Prompt B 加上每 60 秒輪詢自動刷新

起手式 · 用自己的話改

A實作全覽 Dashboard

請幫我建立一個新的頁面 dashboard.html，
呼叫這個唯讀 API endpoint 取得所有人的揪團資料：

[貼上講師提供的唯讀 GET endpoint 文件]

拿到資料後，把每一筆揪團資訊長成一張卡片，
顯示：餐廳名稱、發起人、目前人數。
畫面風格延續我原本午餐揪團頁的設計。

旁註 · 那 React 呢？你可能聽過 React，公司的產品就是用它做的。它解決的問題正是這一頁會碰到的：畫面一複雜、要管的狀態一多，手動維護會失控——React 把「一份資料長出整排卡片」和「資料變了畫面自動跟上」變成內建的事。
這門課沒有把它排成一堂，理由很單純：元件化是 AI 可以代勞的事，「資料住在哪裡、誰有權限動它」不行，所以八堂的時間押在後者。等你哪天覺得「這頁的狀態我管不動了」，那就是學它的時機——跟 AI 說「幫我把這頁改寫成 React 並解釋你拆了哪些元件」，它會帶你走一遍。

B輪詢自動刷新（選配加碼）

請幫我讓這個 Dashboard 頁面，每 60 秒自動重新呼叫一次 API，
更新畫面上的資料，讓使用者不用手動重新整理就能看到最新的揪團狀況。

03成果發表

全班同時打開自己的 dashboard——今天所有人揪的午餐團，同框顯示在每個人的螢幕上。

整個教室的人舉起螢幕互相展示、慶祝結業的氛圍照 — 圖 3.1最終 wow：**全班的揪團資料同框**——八堂課的每一層，都在這個畫面裡。

04結業：這門課真正給你的

堂課走完 · 你從這裡出發

你可能還是不會自己寫後端、不會自己管資料庫——但這從來不是這門課的目標。這門課真正給你的是：看得懂系統的形狀、能精準指揮 AI、知道什麼時候該喚工程師。這才是 vibe coder 真正的天花板。

·作業與檢核

結業 PR：完成全覽 Dashboard 頁面。PR 描述必須包含一句：「這個 dashboard 用到了哪些從第 1 堂到第 7 堂學過的概念？」（作為自我總結）。

講師 / 助教檢核重點

每人完成 Dashboard 頁面，能顯示全班（非僅自己）的揪團資料
每人的結業 PR 描述包含完整的自我總結
（選配）輪詢刷新功能正常運作