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

全覽 Dashboard（結業）

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

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

✓

完成定義 · Definition of Done

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

0:00–0:05	回顧 8a：今天要實作結業作品
0:05–0:15	Capstone 概念：這個功能用到了哪些學過的東西？
0:15–0:45	動手：實作 Dashboard——fetch 共用資料，map 成整排卡片
0:45–0:55	全班同時打開 dashboard：所有人的團同框顯示（最終 wow）
0:55–1:00	結業收尾：整門課的地圖總覽

01Capstone：所有層一次合體

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

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

🧩合體清單

5a、6 堂的「一份資料陣列，用 map 長出整排卡片」＋ 5b 堂的 fetch ＋ 7 堂才拿到的「共用、大家看到同一份真相」的資料。你最早學會的技能，跑在你最晚拿到的能力上——這就是「後端到底給了你什麼」的最終答案。

02動手：實作 Dashboard

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

03成果發表

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

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

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

節課走完 · 你從這裡出發

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

·AI Prompt speed dial起手式 · 用自己的話改

A實作全覽 Dashboard

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

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

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

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

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

·作業與檢核

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

講師 / 助教檢核重點

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