py程式設計（三）課程網站
第 2 週 · 單元 1-2

六步建站法：換了題目也能穩定做完的流程

學這學期最重要的方法，並為你自己的點子寫出 PROJECT.md 初稿。這份文件會一路陪你到期末專題。

W2六步建站＋PROJECT.md

本週結束時你會

今天的時間安排

0:00–0:10回顧：上週抓到的 AI 錯誤
0:10–0:40派課室線上課程 1-2：六步建站法、垂直切片、PROJECT.md
0:40–1:00實作 1【跟著做】拆解吃貨評分站的 PROJECT.md
1:00–1:10休息
1:10–1:40實作 2【自己做】定義問題：訪問同學、寫使用者故事
1:40–2:10實作 3【自己做】畫草圖、設計資料表
2:10–2:30實作 4：請 AI 審查，本週檢核

六步建站法

步驟你的產出AI 的角色寫進 PROJECT.md
① 定義問題使用者故事追問、找遺漏1. 問題與使用者
② 畫出畫面頁面清單＋草圖產生頁面骨架2. 頁面
③ 設計資料資料表與關聯檢查設計、產生建表 SQL3. 資料表
④ 一次一條功能能動的功能主要寫程式4. 功能進度
⑤ 驗收自動測試全過產生測試、解釋錯誤5. 驗收標準
⑥ 上線公開網址帶你完成部署6. 上線

水平分層

先做完所有畫面，再寫所有後端，最後接資料庫。做到最後一刻之前，沒有任何功能能用；資料庫一改，畫面全部重來。

垂直切片

一次只做「新增評論」這一條，從表單、Flask 路由到寫進資料庫全部打通。每做完一條，就有可以驗收、可以給同學試用的成果。

PROJECT.md 是你和 AI 的共同記憶。AI 不會記得上一次的對話，但這份文件會。之後每一段提示詞的第一句，都是「請先讀 PROJECT.md」。

實作 1：拆解範例【跟著做】

打開練習包中的 PROJECT_範例_吃貨評分站.md，和老師一起找出：

  1. 四條使用者故事，各自在哪一頁完成？
  2. reviews.shop_id 是做什麼用的？少了它會怎樣？
  3. 「評分只能是 1–5 的整數」要怎麼測試？至少想出 4 種要被擋下的輸入。
參考答案

1. 看排行榜與篩選在首頁；打分數寫短評在店家頁；新增店家在新增店家頁。

2. 讓每一則評論知道自己屬於哪一間店。少了它，就算不出每間店的平均分數。

3. 0、6、空白、文字（例如 abc）、小數（3.5）、負數。第 5 週的自動測試就是測這些。

實作 2：定義問題【自己做】

想一個你自己真的會用的網站。它很可能就是你的期末專題。

  1. 訪問兩位同學：「遇到這件事時，你現在怎麼處理？最麻煩的是什麼？」
  2. 寫出 3–5 條使用者故事：身為（誰），我想（做什麼），才能（目的）。
提示詞 1 Antigravity
我想做一個網站：（一兩句描述你的點子）。使用者是（誰）。
請不要寫程式。先問我 5 個問題，幫我釐清：使用者是誰、他們現在怎麼解決這個問題、最重要的 3 個功能是什麼。
等我回答完，再把結果整理成 PROJECT.md 的「1. 問題與使用者」，使用者故事用「身為…我想…才能…」的格式。

學生的點子常常太大（例如「做一個像 Instagram 的網站」）。引導他們縮小到「一個人、一件事」：誰在什麼情境下需要它？第一版只要 3 個功能。

實作 3：畫面與資料表【自己做】

  1. 在紙上畫出每一頁（按鈕、輸入框、清單的位置即可），拍照放進 sketches/。
  2. 列出每一頁要顯示、要輸入哪些資料。
  3. 把這些資料分成資料表，標出必填欄位與關聯。

檢查方法：每一頁要顯示的每一個資料，都要找得到存在哪一張表的哪一個欄位。找不到，就是資料表少了東西。

實作 4：請 AI 審查

把內容填進 PROJECT_模板.md，存成 PROJECT.md：

提示詞 2 Antigravity
請先讀 PROJECT.md。
請扮演一位嚴格的專案顧問，指出這份文件會讓工程師做錯或做不出來的地方，至少 3 點，每一點說明：哪一段、問題是什麼、建議怎麼改。先不要寫程式。

提示詞中直接寫出檔名，Antigravity 就會到專案資料夾讀取它。把 AI 的建議記在學習單上，你同意的才修改。

本週檢核

第 3 週預告：資料庫入門。我們會直接打開吃貨評分站的資料庫，用 SQL 算出排行榜。