前後端串接與教練式除錯：
讓《今天學AI》真正活起來
將首頁報名表單接上後端資料庫、打造 /admin 教師專屬管理後台，並學會不看懂每行程式碼也能用 /browser 與 Subagents 優雅抓蟲！
當學員按下「確認送出報名」的那 0.5 秒，發生了什麼事？
按鈕變為「報名傳送中...」
前端把學員填寫的姓名、Email、場次打包成 JSON，並把按鈕鎖住避免學員手抖連按兩次。
外場服務生跑向傳菜口
透過瀏覽器的 fetch('/api/registrations', { method: 'POST' }) 把資料送到後端。
廚房檢查並寫入資料庫
後端確認沒有重複報名後，寫入 registrations.json，回傳 201 Created。
顯示成功訊息並清空表單
若回傳 201 就顯示「報名成功！」；若回傳 409 就顯示暖金色「您已報名過此場次」提醒。
實作任務一：將首頁報名表單正式接上後端 API
請複製下方 Prompt，讓 Antigravity 把階段三的報名表單與階段四的後端 API 正式接通：
1. 送出時按鈕顯示『報名資料傳送中...』並防止重複點擊。
2. 若回傳成功（201）：清空表單，並顯示包含學員姓名與報名場次的成功橫幅。
3. 若回傳錯誤（如 409 重複報名）：將後端的中文錯誤訊息以暖金色提醒框顯示在表單上方。」
身為《今天學AI》的網站主人，你需要一個 /admin 教師後台
總不能每次要看誰報名，都去翻 JSON 純文字檔！我們請 AI 幫老師做一個專屬的管理看板：
一眼掌握各場次報名熱度
頂部顯示三張大數字卡片：「總報名人數」、「場次 A 目前人數 / 剩餘名額」、「場次 B 目前人數 / 剩餘名額」。
課前掌握學員背景與痛點
可依場次篩選名單，清楚表格列出學員姓名、Email、職稱與「想問老師的問題」，還可一鍵刪除測試資料。
一鍵下載用 Excel 打開
內建「匯出 CSV 簽到表」按鈕（自動加上 UTF-8 BOM 防止中文亂碼），上課前直接印出簽到單！
實作任務二：打造 /admin 教師報名管理與 CSV 匯出後台
1. 自動呼叫 GET /api/registrations 取得最新資料。
2. 頂部顯示 3 張統計卡片（總人數、場次 A、場次 B），並提供『匯出 CSV 名單（確保 Excel 中文不亂碼）』按鈕。
3. 提供場次篩選按鈕與完整報名表格（含課前提問），每列提供『刪除』按鈕可即時移除測試紀錄。」
教練式除錯（Debugging）：
當 AI 寫出 Bug 或畫面報錯怎麼辦？
即使是最頂尖的工程師，寫全端網站也一定會遇到報錯。學會「新手除錯三板斧」，不用看懂程式碼也能優雅指揮 AI 把 Bug 修好！
看到紅字先別慌！分辨「外場報錯」與「廚房報錯」
程式出現紅色錯誤訊息，不是電腦壞了，而是系統在「幫你指出哪一條電線沒接好」：
Next.js Build / Runtime Error 彈窗
- 當 localhost:3000 畫面上直接跳出紅字黑框時
- 通常代表某個元件名稱拼錯、少了套件、或是前端在讀空的資料
- 處理方式：直接點彈窗上的複製按鈕，或整張畫面截圖貼給 Antigravity
表單送出卡住或跳出錯誤訊息
- 畫面沒有崩潰，但按下「送出報名」卻失敗
- 可以在瀏覽器按 F12 打開 Console（主控台） 查看紅字，或看 Antigravity 右側的 Terminals 面板
第一斧：最簡單的「症狀描述 ＋ 紅字貼回法」
跟醫生看診一樣，不要只跟 AI 說「壞掉了！」，請用這三個黃金句型回報症狀：
貼上紅字或截圖
「我打開 /admin 頁面時，畫面出現這段錯誤訊息（貼上紅字或截圖），請幫我找出原因並修復。」
描述「做了什麼 vs. 發生什麼」
「我在首頁填完報名表按下送出，預期應該看到成功訊息，但按鈕一直停在傳送中，請幫我檢查前後端串接。」
隨時要求退回上一動
「剛剛這次修改把原本正常的導覽列弄壞了，請幫我還原剛才對導覽列的修改，只保留報名表單的部分。」
第二斧：啟動 /browser 與 verification，讓 AI 自己測到好！
為什麼要人類自己當測試員？叫 AI 自己去點！
- Antigravity 內建了強大的 瀏覽器自動化工具 與 verification（全流程驗證）技能
- 你可以命令 AI：自己打開 localhost:3000、自己填寫表單按下按鈕、自己看有沒有報錯、再去 /admin 確認名單有沒有多一筆！
- 如果中間任何一步失敗，AI 會自己看 Console 紅字並當場修好！
第三斧：認識 Subagents（子代理人）── 你的專家分身團隊
當任務很複雜時，主 AI 不必一個人硬扛，它可以派發「專職分身（Subagents）」在背景同時幫你工作：
| 內建 Subagent 名稱 | 專家角色頭銜 | 什麼時候可以點名叫它出場？ |
|---|---|---|
| research | 程式碼與文獻調查員 | 當你想查某個複雜錯誤原因或最新套件寫法，又不想弄亂主對話的記憶時 |
| performance-optimizer | 網站效能優化專家 | 覺得網頁載入不夠快、圖片太大時，請它做全面效能體檢 |
| deployment-expert | Vercel 部署與 CI/CD 專家 | 階段六部署上雲端遇到環境變數或編譯問題時，專門負責排障 |
| image-generator | 視覺圖像生成師 | 需要為網站文章或活動卡片生成專屬配圖時，在背景生成圖片檔 |
上線前的關鍵防護：
為 /admin 教師後台加上通行碼鎖
如果網站公開上線後，任何路人都能點進 /admin 看到所有學員的 Email 與提問，那就糟了！我們來加一道簡單實用的教師通行碼保護。
保護學員個資：把「教師通行碼」放在環境變數 .env.local
為什麼不能把密碼直接寫在網頁程式碼裡？
- 因為階段六我們會把程式碼推上公開的 GitHub 倉庫
- 如果密碼直接寫在 page.tsx 裡，全世界去你的 GitHub 看原始碼就能看到密碼！
正確做法：寫在 .env.local 保險箱檔
- 在專案根目錄建立 .env.local，放入：
ADMIN_PASSCODE=ai2026 - 這個檔案永遠不會被上傳到 GitHub，只有你的本機與未來的 Vercel 主機後台知道這組密碼！
實作任務四：為 /admin 後台加上教師通行碼驗證
1. 在 .env.local 設定 ADMIN_PASSCODE=ai2026（確認 .gitignore 已排除 .env.local）。
2. 進入 /admin 時，先顯示深墨藍風格的『教師通行碼驗證框』，輸入正確通行碼（預設 ai2026）通過後，才顯示報名統計與學員名單。」
《今天學AI》本機全端功能總驗收：親自走一遍這 4 步！
測試首頁教學專欄
在首頁點擊「AI Agent 實戰」分類按鈕，確認文章卡片即時篩選，點擊文章可展開閱讀。
填寫你自己的名字送出
在首頁下方報名表單填入你的名字與想問的問題按送出，確認跳出報名成功橫幅。
輸入通行碼 ai2026
點導覽列進入 /admin，輸入通行碼，親眼確認你剛剛填寫的名字與問題已經出現在名單第一列！
點擊「匯出 CSV 名單」
下載匯出的 CSV 檔，確認所有報名學員資料完整無缺！
推上雲端前的黃金習慣：請 AI 跑一次 npm run build
很多新手在本機 npm run dev 跑得好好的，一推上 Vercel 卻部署失敗。秘訣就是先在本機做一次「正式打包測試」：
階段五總結與最終階段預告
報名表單真實寫入資料庫
完成首頁報名送出、防重複提醒，即使按 F5 重整網頁資料也穩穩保存。
/admin 統計與匯出就緒
具備通行碼保護、各場次人數統計、名單管理與 CSV 簽到表匯出功能。
掌握 AI 驗證與排障
學會紅字貼回、全流程驗證與 npm run build 部署前打包檢查。
階段六：從本機走向全世界 ── GitHub 自動開倉、Vercel 部署與公開上線！
萬事俱備！最後一個階段，我們將請 Antigravity 直接在你的 GitHub 開立新倉庫，並透過 Vercel 發布成全世界都能用手機打開報名的正式網站！