改完有沒有弄壞？
請 Codex 測試，再錄下作品

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

這一課動到：全部零件一起測一遍（網頁、後台、App、API、資料庫、Redis、測試收信匣、Docker）

你現在在這裡：第 5 階段的第一課。上一課用 App 完成了預約，網頁、後台和 App 接上同一套資料（沒做 App 的人，做到第 14 課的確認信與取消就好）；這一課加上自動測試，確認之後再改東西不會弄壞原本的功能。

改完程式，怎麼知道有沒有弄壞？

請 Codex 替預約流程寫自動測試，之後每改一次，就請它把測試跑一遍，看是全部通過還是有失敗。你不用讀測試程式，只看結果。這一課也會故意改壞一處，親眼看測試抓出來，再找一個人試用、錄下你的作品。

自動測試：出門前的檢查清單

出門前照著清單看一遍：鑰匙、錢包、手機、瓦斯關了沒。自動測試就是一份寫成程式的清單，Codex 每改一次程式，就照清單把預約流程從頭檢查一遍：列不列得出服務項目、能不能預約、同一個時段會不會被訂兩次、少填電話會不會被擋下來。它的正式名稱是自動測試，放在專案的 backend/tests/ 資料夾裡。FastAPI 測試說明 ↗

為什麼現在就要有測試

做到這一課，小店預約已經有網頁、後台、確認信，可能還有 App。功能越多，越容易改了這裡、壞了那裡，而且自己不會馬上發現。很多人做到這個階段開始越改越不敢動，〈非工程背景的 Vibe Coding 踩雷：做出來很興奮，為什麼越改越不敢動？〉整理了這種卡點。有了測試，每次改完跑一遍，全部通過才存版本，就敢繼續改。

真人試用：看別人第一次怎麼用

你自己做的東西，你知道要按哪裡；第一次看到的人不知道。請一位可能會用的人自己操作一遍，你在旁邊只看、不出聲，就會看到你沒想到的卡點。這份紀錄在第 20 課做自己的產品時會用到。

作品錄影：拿給別人看的畢業作品

最後錄一段你自己操作網頁、App 和後台的畫面。截圖只看得到一個畫面，錄影看得到從預約到店家收到的整段流程，拿給朋友、合作對象看都比較清楚。Mac 內建的「截圖」就能錄螢幕，不用另外裝軟體。Apple 官方說明 ↗

成果預覽：測試抓得到錯，還有一段作品錄影

你的測試項目和數量不會和截圖一模一樣，Codex 每次寫的都不同。看的是兩件事：平常全部通過，改壞時會失敗。

上課前：準備好這四樣

上一課的專案

「文件」裡的 shop-booking 資料夾，做到第 16 課（沒做 App 的人做到第 14 課）。還沒做出來的話，先回第 16 課或第 14 課做完。

Codex

ChatGPT 桌面 App，打開 shop-booking 資料夾，開一個新對話。

試用的人

約一位可能會用小店預約的人，例如常去髮廊的朋友或家人，不必懂電腦，約一段不被打擾的時間，坐到你的電腦前操作。

紙筆

真人試用時記下他卡在哪裡。用手機的備忘錄也可以。

跳過第 13 課、自己做完第 14 課的人：專案裡還沒有防止重複預約，這一課的測試會在「同一個時段不能被訂兩次」這一項失敗。這是測試在說實話，不是你做錯。回第 13 課補做，這一項就會通過。

這幾步要你自己按

這一課有三件事 Codex 替你做不了：打開 Docker Desktop、在旁邊看別人試用、按下錄影。第一件現在做，後兩件在操作步驟 6、7，到時候由你自己來。

步驟 1打開 Docker Desktop

1. 從「應用程式」資料夾打開 Docker Desktop。
2. 等它顯示正在執行，再回到 Codex。

做完應看到：Docker Desktop 顯示正在執行，列表裡有 shop-booking。

如果列表是空的：沒關係，下一段的步驟 1 會請 Codex 把服務啟動。

Windows：從「開始」選單打開 Docker Desktop，一樣等它顯示正在執行。

操作步驟：測試、改壞、改回、健檢、試用、錄影

步驟 1從網頁和 App 各預約一筆，在後台看到

1. 在 Codex 貼上下面這段，送出。
2. 打開客人網頁 http://localhost:3000，預約一筆。
3. 有做第 15、16 課的人，在 iPhone 模擬器的 App 上再預約一筆。
4. 打開店家後台 http://localhost:3001，登入後看今天和本週的預約。

請確認 Docker 裡小店預約的服務都在跑，沒在跑的請幫我啟動。
好了之後告訴我客人網頁、店家後台和測試收信匣的網址。
如果專案裡有 Flutter App，也請在 iPhone 模擬器打開它。

複製

做完應看到：網頁（和 App）送出的預約，都出現在店家後台。

如果後台看不到：先確認預約的日期落在今天或本週；還是看不到，用下面「卡住時怎麼辦」的提示詞問 Codex。

步驟 2請 Codex 寫自動測試，跑一遍

1. 在 Codex 貼上下面這段，送出。
2. 等 Codex 寫好、跑完，看它回報的結果。

請替小店預約的預約流程寫自動測試，放在 backend/tests/。至少檢查這幾件事：
1. 列得出三個服務項目：剪髮、洗髮造型、染髮。
2. 週一公休查不到可預約的時段，營業日查得到。
3. 填好姓名、電話、Email，可以預約成功，而且存下來的姓名、電話、Email 都正確。
4. 少填電話，或 Email 格式不對，會被擋下來。
5. 同一個時段不能被訂兩次。
6. 用確認信裡的取消碼可以取消預約，取消後這個時段又能預約。
7. 店家沒登入，看不到預約列表。
測試要用另外準備的測試資料，不要動到我在網頁上建的預約。
寫好後把測試跑一遍，用白話告訴我：總共幾項、通過幾項、失敗幾項。
有失敗的話，先說明是測試寫錯，還是功能真的有問題，等我確認再改。
全部通過後存一個版本，說明寫「加上自動測試」。

複製

做完應看到：Codex 回報測試全部通過，也存好了「加上自動測試」這個版本。

如果有失敗：先看 Codex 怎麼說。功能真的有問題，就請它修好、再跑一遍；說不清楚的話，用「卡住時怎麼辦」的提示詞。

步驟 3故意改壞一處，看測試抓出來

1. 在 Codex 貼上下面這段，送出。

這是練習，請故意把程式改壞一處：讓同一個時段可以被重複預約。
改完告訴我改了哪個檔案，然後把測試跑一遍，用白話告訴我哪一項失敗、代表什麼。
這一步不要存版本。

複製

做完應看到：測試出現失敗，失敗的是「同一個時段不能被訂兩次」這一項。

如果改壞了，測試還是全部通過：代表這件事沒被檢查到。請看「卡住時怎麼辦」，請 Codex 補上這一項測試。

步驟 4請 Codex 退回，全部通過

1. 在 Codex 貼上下面這段，送出。這就是第 05 課學過的「改壞了退回」。

我改壞了，請把專案退回上一個版本（「加上自動測試」那一版），再把測試跑一遍，告訴我結果。

複製

做完應看到：測試又全部通過。

步驟 5用健檢清單看一遍專案結構

第 08 課看過路由、第 11 課看過模組分工，標準答案都寫在專案守則檔 AGENTS.md 裡。把它們整理成一份清單，之後做自己的產品也拿來用：

• 一個檔案只管一件事：backend/app/routers/ 裡，services.py 管服務項目、hours.py 管營業時間與公休日、slots.py 管可預約時段、bookings.py 管預約、admin.py 管店家登入與管理。
• 不同的人用的東西分開放：客人的網頁在 web/，店家後台在 admin/，App 在 app/，沒有混在一起。
• 沒有一個檔案塞進所有東西：資料表在 backend/app/models/，測試在 backend/tests/，不是全部寫在同一個檔案裡。
• 網址看得懂在做什麼：/api/services 是服務項目、/api/bookings 是預約，不是 /api/data1 這種看不出意思的名字。
• 命名一致：英文小寫、複數名詞、單字之間用減號，例如 business-hours，不是 BusinessHours 或 business_hours。
• 客人和店家分開：客人用的在 /api/ 底下，店家用的在 /api/admin/ 底下。
• 測試全部通過：改完結構，測試仍然全部通過。

1. 在 Codex 貼上下面這段，送出。

請照專案守則檔 AGENTS.md，用白話幫我檢查這個專案，先不要修改任何檔案：
1. 每個檔案是不是只管一件事？backend/app/routers/ 是不是依功能分檔？
2. 客人的網頁、店家後台、App 是不是分開放在 web/、admin/、app/？
3. 有沒有哪個檔案塞進太多東西？
4. API 的網址看不看得懂在做什麼？命名是不是英文小寫、複數名詞、單字用減號？
5. 客人用的是不是都在 /api/，店家用的是不是都在 /api/admin/？
逐項回答符合或不符合；不符合的，說明在哪個檔案、建議怎麼調整。

複製

做完應看到：Codex 逐項回答；全部符合，或列出哪幾項不符合、建議怎麼改。

如果有不符合的：不用自己動手改，把下面這段貼給 Codex：

請照你的建議調整不符合的項目，改完把測試跑一遍；全部通過再存一個版本，說明寫「依健檢清單調整結構」。

複製

步驟 6真人試用（你自己來）

1. 在你的電腦打開客人網頁 http://localhost:3000，請試用的人坐下來。有 App 的話，也可以讓他用 iPhone 模擬器。
2. 只給他一個任務：「請幫自己預約這週六下午的剪髮。」姓名和電話請他填假的就好。
3. 你在旁邊看，不出聲、不幫他按。他停住超過一分鐘，再問他「你現在在找什麼？」
4. 記下四件事：有沒有完成、花了多久、卡在哪一步、他嘴裡說了什麼。
5. 把紀錄貼給 Codex，請它整理。

這是真人試用的紀錄：
（貼上你的紀錄）
請幫我整理成一張表：卡住的地方、可能的原因、建議怎麼改，依重要程度排序。先不要修改任何檔案。

複製

做完應看到：一份試用紀錄，和 Codex 整理好的卡點表。

想馬上修的話：挑最重要的一項請 Codex 修，修完跑測試、存版本。其他的留著，第 20 課做自己的產品時會再用到這個方法。

我要錄一段一分鐘左右的作品影片，拿給別人看小店預約。
請幫我排一份操作順序：從客人網頁預約、到測試收信匣看確認信、到店家後台看到這筆預約；如果專案裡有 App，也用 App 預約一筆。
每一步寫一句我要打開哪個網址、按什麼。

步驟 8用 VS Code 看這一課改了哪些檔案

1. 用 VS Code 打開 shop-booking，點開 backend/tests/，看看多了哪些檔案。
2. 在 Codex 貼上下面這段，送出。

請告訴我這一課你新增或修改了哪些檔案，各做了什麼；確認都已經存進版本，沒有存的請存一個版本，說明寫「第 17 課完成」。

複製

做完應看到：backend/tests/ 裡有測試檔，Codex 回報這一課的改動都存進版本了。

Windows：沒有 iPhone 模擬器，只用網頁和後台（Flutter 也能在 Android 模擬器上跑，這門課不另外教）。錄影用內建的「剪取工具」：按 Windows 標誌鍵 + Shift + R，選要錄的範圍，按「開始」，錄完按「停止」。微軟官方說明 ↗

成果檢查

成功的樣子：

• 網頁（和 App）送出的預約，都出現在店家後台。
• Codex 回報測試全部通過。
• 故意改壞時，測試出現失敗，失敗的正是和改壞的地方有關的那一項；退回後又全部通過。
• 健檢清單每一項都對過，不符合的已經請 Codex 調整。
• 有一份真人試用紀錄：他有沒有完成預約、卡在哪一步。
• 有一段作品錄影，看得到從預約到後台收到的整段流程。

還沒成功的樣子：Codex 說測試跑不起來、測試一直有失敗、改壞之後測試仍然全部通過，或錄好的影片找不到、是黑畫面。照下面「卡住時怎麼辦」處理。

你的測試項目、數量和 Codex 的回報文字，和截圖不同是正常的。看結果就好：平常全部通過，改壞時會失敗。

卡住時怎麼辦

測試一直有失敗

把這段貼給 Codex：

測試一直有失敗。請用白話告訴我：失敗的是哪一項、原因是測試寫錯還是功能有問題。
如果是功能有問題，請修好功能；如果是測試寫錯，請說明為什麼錯再改測試。改完再跑一遍，全部通過後存一個版本。

故意改壞了，測試還是全部通過

代表測試沒有檢查這件事。請 Codex 補上：

剛剛故意改壞的地方，測試卻全部通過，代表沒有檢查到。
請補一項測試檢查這件事，確認改壞時會失敗，再退回改壞之前的版本，確認全部通過。

Codex 說測試跑不起來

多半是 Docker Desktop 沒開，或服務沒在跑。先確認 Docker Desktop 顯示正在執行，再貼這段：

測試跑不起來。請先檢查 Docker 裡小店預約的服務是不是都在跑，把沒在跑的啟動，再把測試跑一遍，用白話告訴我結果。

後台看不到剛剛的預約

我剛在客人網頁預約了一筆，店家後台卻看不到。請檢查預約有沒有存進資料庫，後台讀的是不是同一個資料庫，修好後告訴我原因。

錄好的影片找不到，或是黑畫面

按 Shift + Command + 5，點「選項」，看「儲存到」選的是哪裡，影片就存在那裡。黑畫面多半是錄到了有保護的視窗，換成錄整個螢幕，只開網頁、後台和模擬器。

練習：換一種改壞法，再請人試一次

這是練習，請故意把程式改壞一處：預約時不要存下電話。
改完告訴我改了哪個檔案，把測試跑一遍，告訴我哪一項失敗。這一步不要存版本，看完結果請退回上一個版本。

常見問題