表單到收款：做出能接單的網站 · 第 01 章
先畫清楚怎麼接單
先定義訪客從商品頁到訂單完成會經過哪些步驟，也分清楚收件成功、等待付款和付款確認。
貓老闆的簡報
我需要知道誰買、買幾個、付了沒。不要只給我一顆看起來很厲害的購買按鈕。
——貓掌櫃官網的老闆「掌櫃」下需求時的原話
這章做什麼
產出一張訂購流程與狀態表，並在目前專案留下 Git 存檔點。第一版只做單一商品、單次付款與會員訂單查詢。
動手做
- 確認官網能在本機開啟，請 AI 說明前端、後端與資料儲存分別放在哪裡；如果還沒有後端，先列出最少需要增加的工具與啟動指令。
- 畫出流程：商品頁 → 登入 → 訂單表單 → 訂單確認 → 金流付款頁 → 訂單結果。每一步寫清楚由誰操作、錯誤後回哪裡。
- 把訂單狀態定為等待付款、付款已確認、已取消；付款錯誤另記錄在付款嘗試中，允許同一張未付款訂單重試。
- 寫下商品單價 680 元、固定運費 60 元、數量 1 到 3 個的練習規則；第一版先不做折扣、庫存預留或訂閱。
- 請 AI 列出修改範圍，核對後用 Git 記錄開始前的版本。
親手試試
模擬訂單已建立，但還沒有確認收到款項。可以前往付款，或取消訂單。
模擬後端已驗證金流結果，核對訂單與金額後，才更新這個狀態。
模擬訂單已取消，不能再建立新的付款。若稍後收到付款通知，需要查明並交由管理者處理。
狀態示意，不會建立真實訂單。試著說出每種狀態可以做什麼。
這樣對 AI 說
中文就可以
我要延續目前的貓掌櫃官網，販售虛構的陶燒貓碗。單價 NT$680、固定運費 NT$60、數量 1 到 3 個。先閱讀專案，說明目前如何啟動、是否有後端與資料庫，再提出最少的新增工具。請產出商品頁、登入、訂單表單、訂單確認、付款與結果頁的流程表，列出等待付款、付款已確認、已取消的轉換條件，以及付款錯誤如何重試。第一版不做折扣、庫存或訂閱。先給計畫與驗收方式，等我確認再修改，並提醒我留下 Git 存檔點。
本章驗收清單
能說清楚流程，才開始加功能。
- 每一步都有下一步與錯誤時的處理方式
- 知道重新整理成功頁不代表已付款
- 已確認後端與資料儲存的啟動方式
- Git 中留有開始前的版本
這章的相關詞條
詞條頁都有可以動的示範——卡住的時候，去把名詞弄清楚，回來繼續做。
進度只存在這台瀏覽器，不上傳、不追蹤。