Antigravity 階段五：前後端串接與教練式除錯 ↗
打通表單送出與教師後台，用自動實測與除錯流程找出問題。
WEEK 10 / Agentic AI 專題實作
Agentic AI 實作 II：串接、除錯與部署
01｜這週你會做出什麼接續 Week 9 原型，完成前後端串接、除錯、安全檢查與部署。
2026-12-04（學期第 12 週）先照步驟做，卡住再查操作參考。查看完成標準 ↓
02 / SKILLS
本週學習內容
- Layout
- Component
- Navigation
- CTA
- Form
- Responsive
- Debug
- Error Message
- Environment Variables
- Version History
- Rollback
03 / REFERENCE
操作參考｜需要時再查
必看
開始操作前看重點，完成後用清單自查。
Antigravity 階段六：GitHub 建倉與 Vercel 部署 ↗
資安紅線、自動建立 GitHub 倉庫、部署上線與收工交接流程。
把問題說清楚：互動需求與 Debug 範例
先選一個 Quiz、Filter、Search 或 Calculator，測成功、空值與錯誤輸入。
不清楚：幫我改漂亮。具體：手機版 Hero 太高，CTA 被推到首屏外。請只調整 Mobile Layout，桌面版維持原樣。修好後測 390px 寬度。
卡住再看
只查你正在卡住的步驟，不必讀完整份文件。
Environment Variables：密鑰放哪裡 ↗
英文官方文件。只有功能需要密鑰時才查；Password、API Key 不可提交 GitHub，也不可放入會傳給瀏覽器的公開變數。
想進一步再看
選用補充；不影響本週完成標準。
改壞了怎麼辦：Instant Rollback ↗
英文官方操作文件。找回先前可用部署；回復部署後仍要修正 GitHub 原始碼，避免下次部署又帶回錯誤。
04 / MAKE
跟著做
Step 1
接續原型與串接
開啟 Week 9 規格與原型，串接表單、API 與結果呈現，檢查重新整理後的資料行為。
Step 2
分次修改 Component
請 AI 先完成一個功能，再調整 Layout、Navigation、CTA 或 Form。每次修改先預覽。
Example：手機版 Hero 太高，CTA 被推到第一屏之外。請只修改 Mobile Layout，桌面版維持原樣。
檢查點 → 原本導覽與內容仍可用。
Step 3
測試正常與錯誤操作
測試空白輸入、無結果、重複操作與重新整理；檢查手機觸控和鍵盤操作。
檢查點 → 功能有清楚結果，也處理不合理輸入。
Step 4
用證據 Debug
記下預期結果、實際結果、重現步驟、錯誤訊息與螢幕尺寸。請 AI 解釋原因後做小範圍修改。
檢查點 → 同一操作重測後問題已修正。
Step 5
檢查密碼與金鑰
檢查程式、設定與 GitHub 紀錄。伺服器用的秘密放適當環境變數，不放前端程式或公開 Repository。
注意：Environment Variables 不代表自動保密；打包到前端的值仍可能公開。若金鑰曾外洩，先撤銷或輪替，刪檔或 Rollback 不會讓它失效。
檢查點 → 能區分公開設定與秘密。
Step 6
留下版本與回復路徑
提交可用版本，查看 GitHub Version History 與 Vercel Deployment History。記下要回到哪一版，以及重新驗證的方式。
檢查點 → 能找到已知可用的版本並說明回復方式。
05 / UNDERSTAND
你剛剛學到了什麼？
Requirement / Component / Prompt
把需求寫成輸入與結果，再針對元件修改，比要求「改漂亮」更能驗證。
Debugging / Human Judgment
AI 的修正是待驗證的建議。重現問題、縮小原因、測試修正，才能判斷是否成功。
Version Control / Basic Security
版本紀錄幫你追溯修改；部署回復不能取代金鑰輪替，也不會自動復原外部資料。
06 / DELIVER
本週成果
本週過關目標
公開網站、測試證據與版本資訊
勾選供本次瀏覽自我檢核，重新整理後重設。繳交與期限依 Google Classroom 或學校 LMS 公告。
07 / DEBUG
常見問題 / Debug
AI 修一個地方卻弄壞其他功能？
先查看差異，縮小修改範圍；必要時回到已知可用版本，再逐項套用並重測。
08 / KEEP GOING
下一週，繼續往前。
下一單元：AI 內容產製：創作、編修與跨平台轉換