做出客人的預約網頁

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

這一課動到：網頁、API

你現在在這裡：第 4 階段的第三課。上一課做出了 API，在 API 文件頁存進第一筆預約；這一課加上客人的預約網頁，讓客人自己預約。

客人的預約網頁怎麼做？

請 Codex 在 web 資料夾用 React 做出客人的預約網頁，接上第 08 課做好的 API。打開 http://localhost:3000，選服務、選時段、填姓名電話 Email 送出，這筆預約就會存進資料庫。這一課只求從頭到尾走得通，外觀留到第 10 課。

前端和後端：外場和後場

客人看得到、點得到的畫面叫前端，像店的外場；上一課做的 API 和資料庫叫後端，像店的後場。客人在外場點好服務、填好單子，外場把單子送到後場的窗口，後場記進預約本。把兩邊分開做，就叫前後分離：之後的店家後台和 App 都接同一個後場，資料只有一份。

React：組網頁畫面的積木

React 像一盒積木，把按鈕、清單、表單一塊一塊組成整個網頁畫面，是現在很多網站用來做畫面的工具。你不用學它，跟 Codex 說畫面要有什麼、客人要怎麼操作就好；專案守則檔已經寫好網頁用 React、放在 web 資料夾。官方說明 ↗

localhost 和後面的數字

localhost 指的是「你自己這台電腦」，只有你打得開。後面的數字像同一棟大樓裡不同的門牌：3000 是客人的預約網頁，8000 是上一課的 API，第 11 課的店家後台會用 3001。三個都在你的電腦裡，各走各的門。

成果預覽：客人自己完成一筆預約

你的網頁不會和這張一模一樣，按鈕的字、排列方式都可能不同，而且這一課還很陽春。從選服務到送出走得通，預約查得到，就是做對了。

上課前：準備好這三樣

上一課的專案

第 08 課做好資料與 API 的 shop-booking 資料夾。還沒做好的話，先回第 08 課做完。

Docker Desktop

打開並顯示正在執行。網頁、API 和資料庫都跟著它跑。

Codex 與瀏覽器

ChatGPT 桌面 App，和平常用的瀏覽器（Safari 或 Chrome）。

這兩步要你自己按

開工前先確認上一課的 API 還活著，再讓 Codex 在同一個資料夾工作。

步驟 1打開 Docker Desktop，確認 API 文件頁打得開

1. 打開 Docker Desktop，等它顯示正在執行。
2. 在瀏覽器打開 http://localhost:8000/docs。

做完應看到：API 文件頁照常打開，看得到上一課的路由。

如果打不開：先回第 08 課的卡住時怎麼辦，讓 API 文件頁打得開再往下做。

步驟 2在 App 打開 shop-booking 資料夾，開新對話

1. 打開 ChatGPT 桌面 App，確認上方選的是「Codex」。
2. 選擇要在哪裡工作時，選「打開資料夾」，選「文件」裡的 shop-booking。
3. 按「New chat」開新對話。

做完應看到：新對話的畫面標示著 shop-booking。

如果 Codex 要下載網頁用的套件、先問你同不同意：第一次做 React 網頁要下載一批現成零件，可能要等幾分鐘。看清楚它要做什麼、是不是在 shop-booking 裡，再同意。

Windows：從開始選單打開 Docker Desktop，鯨魚圖示在右下角的系統匣；瀏覽器用 Edge 或 Chrome 都可以。

操作步驟：做出網頁、走一次預約、確認存進去

步驟 1請 Codex 做出客人的預約網頁

1. 按「複製」，貼到 Codex 的輸入框，送出。
2. 等 Codex 做完，告訴你怎麼打開。

請照 AGENTS.md，在 web/ 資料夾用 React 做出客人的預約網頁，接上第 08 課做好的 API：
1. 先列出服務項目（名稱、時長、價格），讓客人選一項。
2. 客人選日期後，列出這一天可以預約的時段，讓客人選一個。
3. 客人填姓名、電話、Email，按「送出預約」。
4. 送出後，在畫面上用一行字告訴客人預約已送出。
讓網頁跟著 Docker 一起跑，打開 http://localhost:3000 就能用。外觀先不用管，第 10 課再做。
做好後告訴我怎麼打開。

複製

做完應看到：Codex 回報網頁做好了，打開 http://localhost:3000 就能用。

步驟 2自己當客人，走一次預約

1. 在瀏覽器打開 http://localhost:3000。
2. 選「剪髮」，日期選一個週二到週日，再選一個時段。
3. 填上姓名、電話、Email（Email 可以填 test@example.com），按送出。

做完應看到：看得到三項服務和價格；選日期後出現時段；按送出後，畫面告訴你預約已送出。

選了週一卻沒有時段：這是對的，小森髮廊週一公休。換一個週二到週日的日期。

步驟 3確認這筆預約存進資料庫

1. 兩種方法選一種。第一種：打開 http://localhost:8000/docs，點開 GET /api/admin/bookings，按「Try it out」，range 填 week，按「Execute」。
2. 第二種：把下面這段貼給 Codex。

請查資料庫裡最新的一筆預約，用白話告訴我：預約的服務、日期、時間、客人姓名、電話和 Email。

複製

做完應看到：查到的最新一筆，姓名、服務、日期、時間都和你剛才在網頁上填的一樣。

API 文件頁查不到：日期選得比較遠時，不在從今天起算的 7 天裡，改用第二種方法請 Codex 查。

步驟 4用 VS Code 看這一課改了哪些檔案，再存一個版本

1. 貼上下面這段，送出。
2. 用 VS Code 打開 shop-booking，在左邊的檔案列表點開 web 資料夾看看。

請列出這一課你新增和修改了哪些檔案，每個用一句白話說它在做什麼。
列完請幫這個專案存一個版本，說明寫「第 09 課：客人的預約網頁走得通」。

複製

做完應看到：這一課的改動大多在 web 資料夾裡，網頁和後端各放各的；Codex 回報版本已經存好。

web 資料夾裡檔案很多：正常，React 會帶一批現成零件。你只要知道網頁都放在 web 裡，不用一個一個看。

Windows：網頁在瀏覽器裡操作，和 Mac 完全相同；重新整理按 Ctrl + R。

成果檢查

成功的樣子：

• 打開 http://localhost:3000，看得到剪髮、洗髮造型、染髮三項服務和價格。
• 選了週二到週日的日期，看得到可以預約的時段；選週一沒有時段。
• 填好姓名、電話、Email 送出後，畫面告訴我預約已送出。
• 在 API 文件頁或請 Codex 查資料庫，看得到同一筆預約。

還沒成功的樣子：網頁打不開、服務項目是空的、按送出後沒有反應，或查不到剛才送出的預約。照下面「卡住時怎麼辦」處理。每個人的畫面不一樣是正常的，看的是整條走得通、資料查得到，不是長相。

卡住時怎麼辦

打不開 http://localhost:3000

先確認 Docker Desktop 正在執行，再把這段貼給 Codex：

我在瀏覽器打不開 http://localhost:3000。請檢查客人的預約網頁有沒有跟著 Docker 跑起來，找出原因修好，改完告訴我改了什麼。

網頁打開了，服務項目卻是空的

網頁多半沒有接上 API。

http://localhost:3000 打開了，但服務項目是空的。請確認網頁有沒有接上 http://localhost:8000 的 API，自己打開網頁試一次，找出原因修好，改完告訴我改了什麼。

選了週二到週日，還是沒有時段

我在預約網頁選了剪髮和一個週二的日期，但沒有出現任何時段。小森髮廊週二到週日 10:00–19:00 營業、每 30 分鐘一格，請檢查網頁和 GET /api/slots，修好後告訴我改了什麼。

按送出後沒有反應，或出現錯誤

把畫面上看到的錯誤字樣一起貼給 Codex：

我在 http://localhost:3000 填好資料按送出後，沒有出現預約已送出。畫面上的錯誤字樣是：（貼在這裡，沒有就寫「沒有」）
請你打開網頁實際送出一次，找出原因修好，改完告訴我改了什麼。

畫面說送出了，卻查不到這筆預約

預約網頁說已經送出，但資料庫裡查不到這筆預約。請檢查網頁送出時有沒有真的呼叫 POST /api/bookings、後端有沒有存進資料庫，修好後告訴我改了什麼。

越改越亂的話，請 Codex 退回上一個版本：「我改壞了，請把專案退回上一個版本，退回後告訴我改回了什麼。」

練習：再預約一次，問 Codex 資料怎麼走

請用白話告訴我，客人在 http://localhost:3000 按下送出預約之後，資料經過哪幾站才存進資料庫？每一站在專案的哪個資料夾？

常見問題