做出店家的管理後台

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 階段的第五課。上一課客人的預約網頁變得像樣又好用，這一課加上店家用的管理後台。

店家的管理後台是什麼？

管理後台是只有店家能進去的網頁，登入後看得到客人的預約，也能取消或標記完成。這一課請 Codex 在 http://localhost:3001 做出後台，登入後就看得到第 09 課送出的那一筆預約。店家的密碼不會用原文存進資料庫，這一課也會請 Codex 查給你看。

管理後台：櫃台後面的預約本

客人的預約網頁像店門口的預約單，誰都能填；管理後台像櫃台後面的預約本，只有店員能翻，看得到每一位客人的姓名和電話。它的正式名稱是管理後台（admin），和客人網頁分開做，放在專案的 admin/ 資料夾。

登入：店員的門禁卡

登入像員工進門要刷門禁卡：帳號和密碼對了，才讓你進後台；沒登入的人只看得到登入畫面。這一課先做一個店家帳號，帳號叫 owner，密碼由你決定。

密碼不能用原文存

把密碼原文存進資料庫，就像把店門鑰匙本身收在抽屜裡，抽屜被人打開，鑰匙就被拿走了。正確做法是不存鑰匙，只存一個對得上、但反推不回去的印記：店家登入時，系統把輸入的密碼再做一次印記，和存著的印記對得上就放行。這種印記的正式名稱是雜湊（hash），就算資料庫被人看到，也拿不到密碼原文。OWASP 密碼儲存建議 ↗

後台看得到客人的姓名和電話，這些是個人資料。正式讓真的客人使用前還要注意什麼，第 19 課會講。

模組分工：一個檔案只管一件事

模組分工像店裡的分區：櫃台、洗頭區、染髮區、倉庫各放各的東西，要補洗髮精只要去倉庫。如果全部堆在同一張桌上，找東西要翻半天，動一樣還會碰倒別的。程式也一樣，一個檔案只管一件事，這種一格一格的分區叫模組。

第 07 課起點包裡的專案守則檔 AGENTS.md 已經寫好這門課的分區方式，它就是標準答案。你不用讀程式，只要用 VS Code 看資料夾和檔名：

backend/app/routers/
  services.py  服務項目
  hours.py     營業時間與公休日
  slots.py     可預約時段
  bookings.py  客人的預約
  admin.py     店家登入與管理
web/           客人的預約網頁
admin/         店家管理後台

backend/main.py
  服務、時段、預約、店家登入
  全部塞在這一個檔案
bookings.py
  客人預約和後台管理寫在一起
web/
  客人網頁和店家後台混在一起

看出不一樣時，不用自己搬檔案，請 Codex 照 AGENTS.md 調整，操作步驟 5 有固定提示詞。

成果預覽：店家在後台看到預約

你的後台版面不會和這兩張一樣，Codex 每次做的都不同。登入得進去、看得到第 09 課那一筆，就是做對了。

上課前：準備好這四樣

上一課的專案

第 10 課做好的 shop-booking 資料夾。還沒做出來的話，先回第 10 課做完。

第 09 課那筆預約

記下你填的姓名、服務和時段，等一下在後台找它。忘了的話，請 Codex「列出資料庫裡目前所有預約的姓名、服務、日期和時段」。

Codex

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

Docker Desktop

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

這兩步要你自己按

店家的密碼由你決定；登入後台時，帳號密碼也是你自己輸入。

步驟 2打開 Docker Desktop，確認客人網頁開得起來

1. 從「應用程式」資料夾打開 Docker Desktop，等它顯示正在執行。
2. 用瀏覽器打開 http://localhost:3000，確認第 10 課的網頁還在。

做完應看到：客人預約網頁有 logo、選得到服務和時段。

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

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

操作步驟：做後台、登入、改狀態、查密碼

步驟 1請 Codex 做出後台和店家帳號

1. 貼上下面這段，把「（換成你想好的練習用密碼）」改成你的密碼，送出。
2. 等 Codex 回報做好，並告訴你怎麼打開。

請做出店家的管理後台，畫面放在 admin/ 資料夾，用瀏覽器打開 http://localhost:3001。
1. 店家登入：建立一個店家帳號，帳號是 owner，密碼是「（換成你想好的練習用密碼）」。資料庫裡不要存密碼原文，只存雜湊過的值。
2. 登入後看預約：分成「今天」和「本週」兩個分頁（本週就是第 08 課 API 的 range=week，從今天起算的 7 天），列出每筆預約的客人姓名、電話、服務、日期、時段和狀態。
3. 沒登入的人打開後台，只看得到登入畫面。
後端的登入和管理功能放在 backend/app/routers/admin.py，API 放在 /api/admin/ 底下，照 AGENTS.md 的規矩。後台要跟著 Docker 一起跑，做好後告訴我怎麼打開。

複製

做完應看到：Codex 回報後台做好了，告訴你網址是 http://localhost:3001。

如果 Codex 先問你同不同意：它要改 docker-compose.yml 或重新啟動服務前可能會先問你。看清楚是在 shop-booking 裡，再同意。

步驟 2登入後台，找到第 09 課那筆預約

1. 用瀏覽器打開 http://localhost:3001。
2. 先故意把密碼打錯一次，按登入。
3. 再輸入帳號 owner 和正確的密碼，登入後點「本週」。

做完應看到：密碼打錯進不去；密碼對了進得去，「本週」裡有第 09 課那一筆，姓名、服務、時段都一樣。

「本週」裡找不到它：第 09 課那筆如果訂在 7 天以後，本週清單本來就不會有它。照下面「卡住時怎麼辦」處理。

步驟 3加上「取消」和「標記完成」

1. 在 Codex 貼上下面這段，送出。
2. Codex 改好後，到 http://localhost:3000 再訂兩筆本週的測試預約。
3. 回到後台重新整理，一筆按「取消」、一筆按「標記完成」。第 09 課那筆先留著。

請在後台的每一筆預約旁邊加上兩個按鈕：「取消」和「標記完成」。
按「取消」前先跳出確認；取消後，這個時段在客人網頁上要重新變成可以預約。
狀態改完，列表上要看得出來，例如寫「已取消」「已完成」。
後端用 PATCH /api/admin/bookings/{id} 來改狀態，只有登入的店家可以用。改完告訴我怎麼試。

複製

做完應看到：兩筆測試預約的狀態變了；被取消的那個時段，在客人網頁上又可以預約。

步驟 4請 Codex 查給你看：密碼不是原文

1. 貼上下面這段，送出。
2. 看 Codex 給你看的那一欄，跟你紙上的密碼比一比。

請到資料庫查店家帳號 owner 那一筆，把存密碼的那一欄給我看，只要顯示前面十幾個字就好。
告訴我那是不是我設定的密碼原文。如果是原文，請改成只存雜湊過的值，改完確認我用同一組密碼還能登入。

複製

做完應看到：一串看不懂的英文、數字和符號，開頭常是 $2b$ 或 $argon2 這類雜湊方法的名稱，看不出你的密碼。

如果 Codex 說存的是原文：讓它照提示詞改好，再自己登入一次，確認同一組密碼還進得去。

步驟 5用 VS Code 看模組分工，存一個版本

1. 用 VS Code 打開 shop-booking，在左邊點開 backend/app/routers/ 和 admin/。
2. 對照上面「好的模組分工」，只看檔名，不用讀程式。
3. 在 Codex 貼上下面這段，送出。

請跟這一課開始前的版本比，列出新增和改過的檔案，用白話說每個檔案在做什麼。
再對照 AGENTS.md 的資料夾規矩，告訴我有沒有哪個檔案管了不只一件事，或客人預約和店家後台混在同一個檔案。
列完請幫我存一個版本，說明寫「第 11 課：店家管理後台」。

複製

做完應看到：新檔案大多在 admin/ 和 backend/app/routers/admin.py；Codex 說結構符合守則，並回報版本已經存好。

如果結構和守則不一樣：請 Codex 只搬位置、不改功能：

請照 AGENTS.md 的資料夾規矩調整：店家登入與管理放 backend/app/routers/admin.py，客人的預約留在 bookings.py，店家後台畫面放在 admin/。只搬位置、不改功能，搬完確認客人網頁和後台都還能用，再存一個版本。

複製

Windows：VS Code 和瀏覽器的操作都一樣，重新整理按 Ctrl + R。

成果檢查

成功的樣子：

• http://localhost:3001 打得開，輸入 owner 和你的密碼能登入；密碼打錯進不去。
• 「本週」看得到第 09 課送出的那一筆預約，姓名、服務、時段都一樣。
• 測試預約按「取消」後顯示已取消，客人網頁上那個時段又能選；按「標記完成」後顯示已完成。
• Codex 查給你看的密碼欄位是一串看不懂的字，不是你的密碼。
• VS Code 裡，後台畫面在 admin/，店家的後端功能在 admin.py，沒有一個檔案塞進所有東西。

還沒成功的樣子：http://localhost:3001 打不開、密碼打錯也進得去、「本週」看不到第 09 課那一筆，或資料庫裡看得到密碼原文。照下面「卡住時怎麼辦」處理。

每個人的後台畫面不一樣是正常的，只要上面每一項都做到就好。

卡住時怎麼辦

http://localhost:3001 打不開

後台 http://localhost:3001 打不開。請檢查後台有沒有跑起來、有沒有加進 docker-compose.yml，修好後告訴我怎麼打開。

後台看不到第 09 課那筆預約

先看日期：「本週」只列從今天起算的 7 天，第 09 課那筆如果訂在 7 天以後，清單裡本來就沒有它。把這段貼給 Codex，它會先查日期再處理：

後台的「本週」看不到第 09 課我送出的那筆預約，姓名是「（換成你填的姓名）」。
請先到資料庫查這一筆的日期：如果不在從今天起算的 7 天裡，請把它改到這 7 天裡還空著的同一個時段；如果在這 7 天裡，請查後台讀的是不是同一個資料庫。修好後告訴我原因。

忘了店家密碼

資料庫只存印記，連 Codex 也查不回原本的密碼，只能重設：

我忘了店家帳號 owner 的密碼。請把密碼重設成「（換成新的練習用密碼）」，一樣只存雜湊過的值，改完確認我能用新密碼登入。

改完客人網頁壞掉了

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

練習：只看檔名，猜新功能該放哪裡

我想之後加一個「店家看上個月做了幾筆預約」的功能。我猜它應該放在（寫你的答案）。請照 AGENTS.md 告訴我對不對、為什麼，先不要改任何檔案。

常見問題