不改程式，
也能調整服務與營業時間

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 階段的第六課。上一課做出店家的管理後台，能看預約；這一課在後台加上設定頁，店家自己就能改設定。

不改程式，也能調整服務與營業時間嗎？

可以。把服務項目、價格、時長、營業時間和公休日都存在資料庫，再在管理後台做一個設定頁，店家自己改、自己按儲存。客人網頁每次都向後端問最新的設定，所以改完重新整理，可預約的時段就跟著變。

寫在程式裡 vs 存在資料庫

營業時間寫在程式裡，像把價目表刻在招牌上，想改得找師傅重刻，也就是每次都要請 Codex 改程式。存在資料庫裡，像店門口的白板價目表，店員自己擦掉重寫就好；程式只負責去看白板上現在寫什麼。這種做法的正式說法是「把設定存成資料」，不寫死在程式裡。

第 08 課已經把服務項目和營業時間存進資料庫，但到現在只有 Codex 改得動。這一課在第 11 課做的後台裡加一個設定頁，只有登入的店家看得到，店家自己就能改。

為什麼客人那邊馬上跟著變

客人網頁每次要顯示時段，都會到後端的點餐窗口（API）問一句「這一天有哪些時段」。後端每次都照資料庫裡最新的營業時間、公休日和服務時長重新算，所以店家一改完，客人重新整理看到的就是新的時段。

設定頁要管哪些東西

服務項目

名稱、價格、時長，可以新增、修改、刪除。小森髮廊現在是剪髮（60 分鐘，600 元）、洗髮造型（30 分鐘，300 元）、染髮（120 分鐘，1,800 元）。

營業時間

每週七天各自幾點開、幾點關，哪天固定公休。現在是週二到週日 10:00–19:00，週一公休；時段每 30 分鐘一格。

公休日

特定的某一天不開，例如過年或店裡有事，客人那天不能預約。

成果預覽：店家自己就能改設定

每個人的設定頁版面都不一樣。改完營業時間、客人網頁的時段跟著變，就是做對了。

上課前：準備好這四樣

上一課的後台

第 11 課做好的 shop-booking 資料夾，後台 http://localhost:3001 登得進去。還沒做出來的話，先回第 11 課做完。

店家帳號

帳號 owner，和你在第 11 課設定的練習用密碼。

Codex

ChatGPT 桌面 App，打開 shop-booking 資料夾。

Docker Desktop

第 07 課裝好的，上課時要開著。

這兩步要你自己按

打開 Docker Desktop、登入後台要你自己來。這一課的重點也是你自己在後台改設定，不請 Codex 改。

步驟 1打開 Docker Desktop，把兩個網頁並排

1. 從「應用程式」資料夾打開 Docker Desktop，等它顯示正在執行。
2. 在瀏覽器開兩個分頁：一個是客人網頁 http://localhost:3000，一個是後台 http://localhost:3001。

做完應看到：兩個網頁都打得開。

如果網頁打不開：在 Codex 貼上「請把專案的服務都跑起來，跑好後告訴我客人網頁和後台的網址」，等它回報再打開一次。

Windows：Docker Desktop 從開始選單打開，其他步驟一樣。

操作步驟：做設定頁、自己改、去客人網頁看

步驟 1請 Codex 做「服務項目」設定頁

1. 在 Codex 貼上下面這段，送出。
2. Codex 改好後，回後台重新整理，找到「服務項目」。

請在店家後台加一個「服務項目」設定頁：列出所有服務的名稱、價格和時長，店家可以新增、修改、刪除。
已經有人預約的服務，刪除前先跳出提醒，說明有幾筆預約會受影響。
後端放在 /api/admin/services，只有登入的店家可以用；客人網頁的服務列表和價格要照這裡的設定顯示。改完告訴我怎麼試。

複製

做完應看到：後台列出剪髮 600 元 60 分鐘、洗髮造型 300 元 30 分鐘、染髮 1,800 元 120 分鐘。

步驟 2自己改一個價格，去客人網頁看

1. 在後台把剪髮改成 650 元，按儲存。
2. 切到客人網頁的分頁，按 ⌘R 重新整理。

做完應看到：客人網頁上的剪髮變成 650 元。看到了就改回 600 元。

步驟 3請 Codex 做「營業時間」設定頁

1. 在 Codex 貼上下面這段，送出。
2. Codex 改好後，回後台重新整理，找到「營業時間」。

請在店家後台加一個「營業時間」設定頁：
1. 每週七天，每一天可以設定開始和結束時間，或勾選「公休」。現在是週二到週日 10:00–19:00、週一公休。
2. 另外可以加特定的公休日，例如某一天店休，客人在那一天不能預約。
後端用 PUT /api/admin/business-hours 和 /api/admin/closed-days，只有登入的店家可以用。
客人網頁的可預約時段每次都照最新的設定算，不要把營業時間寫死在程式裡。改完告訴我怎麼試。

複製

做完應看到：後台顯示目前的營業時間：週一公休，週二到週日 10:00–19:00。

步驟 4自己改營業時間和公休日，去客人網頁看

1. 在後台把週三改成 13:00–19:00，按儲存。
2. 切到客人網頁，重新整理，選「剪髮」和下週三，看有哪些時段。
3. 回後台加一個公休日：下週四，按儲存。
4. 回客人網頁重新整理，選下週四。

做完應看到：下週三只剩 13:00 以後的時段；下週四不能預約。

試完記得改回來：把週三改回 10:00–19:00、刪掉下週四的公休日，後面幾課才不會被影響。

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

1. 在 Codex 貼上下面這段，送出。
2. 用 VS Code 打開 shop-booking，在左邊找到 Codex 列出的檔案。

請跟這一課開始前的版本比，列出新增和改過的檔案，用白話說每個檔案在做什麼。列完請幫我存一個版本，說明寫「第 12 課：店家自己改設定」。

複製

做完應看到：改到的後端檔案在 backend/app/routers/，例如 services.py、hours.py、admin.py；設定頁的畫面在 admin/。Codex 回報版本已經存好。

Windows：重新整理按 Ctrl + R，其他步驟一樣。

成果檢查

這一課的成果檢查，就是改完後台、到客人網頁看。

成功的樣子：

• 後台有「服務項目」和「營業時間」設定頁，看得到三種服務的價格、時長和每週的營業時間。
• 在後台改剪髮的價格，客人網頁重新整理後顯示新價格。
• 把週三改成 13:00 開始，客人網頁上下週三只剩 13:00 以後的時段。
• 加了公休日的那一天，客人網頁上不能預約。
• 這些都是你在後台自己改的，沒有再請 Codex 改程式。

還沒成功的樣子：後台改了、客人網頁重新整理後沒變；按儲存後重新整理，設定又變回原樣；或公休日那天還能預約。照下面「卡住時怎麼辦」處理。

每個人的設定頁不一樣是正常的，只要上面每一項都做到就好。

卡住時怎麼辦

後台改了，客人網頁沒變

先在客人網頁按 ⌘ + Shift + R 重新整理（Windows 按 Ctrl + Shift + R）。還是沒變，把這段貼給 Codex：

我在後台把（寫你改了什麼）改好也按了儲存，但客人網頁重新整理後沒變。請查客人網頁的時段和價格是不是照資料庫裡最新的設定算，有沒有哪裡寫死在程式裡。修好後用內建瀏覽器確認一次。

按了儲存，重新整理後又變回原樣

我在後台改了（寫你改了什麼）並按儲存，重新整理後又變回原樣。請查儲存有沒有真的寫進資料庫，修好後告訴我原因。

公休日那天還能預約

我在後台加了公休日（寫哪一天），但客人網頁那天還能預約。請讓可預約時段也照公休日算，公休日那天不顯示時段、寫「公休」。改完用內建瀏覽器確認一次。

改完後台或客人網頁壞掉了

我改壞了，請把專案退回上一個版本，退回後告訴我改回了什麼。

練習：自己加一項新服務

常見問題