預約後收到確認信，
也能取消預約

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 階段的第八課。客人已經能在網頁預約、店家在後台看得到；這一課加上確認信，讓客人用信裡的連結自己取消。

跳過第 13 課的人，用第 12 課做好的專案接著做就好。專案裡還沒有防重複預約，之後回第 13 課補做就有。

預約後怎麼寄確認信，讓客人自己取消？

請 Codex 在預約成功時寄一封確認信，信裡附一個取消連結，客人點了就能自己取消。這一課的信不會真的寄出去，而是寄到跟著 Docker 一起跑的測試收信匣，在瀏覽器就看得到。全程不用申請任何寄信帳號。

測試收信匣：店裡自己的練習信箱

測試收信匣像店門口一個練習用的信箱：系統寄出的每一封信都掉進這個信箱，不會送到客人手上，你打開就能看到信長什麼樣子。這門課用的是 Mailpit，它假裝成寄信的伺服器，把信全部收下，再用網頁讓你看。它跟後端、資料庫一樣裝在 Docker 的工作箱裡，收信匣的網址是 http://localhost:8025。官方說明 ↗

取消連結怎麼知道是哪一筆

取消連結像取件單上的號碼：每一筆預約都有一組別人猜不到的取消碼，只寫在這位客人的信裡。客人點連結時帶著這組碼，系統就知道要取消哪一筆；沒有這組碼的人，取消不了別人的預約。點開連結會先看到預約內容和「確認取消」按鈕，按下去才真的取消，不會一點就取消。

正式上線時，要改接專門的寄信服務，信才會真的送到客人信箱。台灣店家常用的簡訊與 LINE 通知，第 23 課會講怎麼往下做。

成果預覽：預約、收信、取消

你的信和畫面不會和這裡一模一樣，Codex 每次寫的都不同。收得到信、點得了連結、後台跟著變，就是做對了。

上課前：準備好這三樣

上一課的專案

第 13 課做好的 shop-booking 資料夾；跳過第 13 課的人，用第 12 課的。還沒做出來的話，先回第 13 課或第 12 課做完。

Codex

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

瀏覽器

客人網頁 http://localhost:3000 和店家後台 http://localhost:3001 都打得開。

這兩步要你自己按

開 Docker、決定用哪個 Email 測試，都要你自己來。

步驟 1打開 Docker Desktop，確認服務都在跑

1. 從「應用程式」打開 Docker Desktop，等它顯示正在執行。
2. 在 Docker Desktop 的容器列表裡，找到 shop-booking。

做完應看到：shop-booking 的服務都顯示執行中，瀏覽器打得開 http://localhost:3000。

如果服務是停止的：請 Codex「幫我把 shop-booking 的服務都啟動，啟動後告訴我網址」。

Windows：Docker Desktop 的鯨魚圖示在右下角的系統匣，其他都一樣。

操作步驟：確認收信匣、寄確認信、做取消

步驟 1確認測試收信匣開著

1. 在 Codex 貼上下面這段，送出。
2. Codex 做好後，在瀏覽器打開 http://localhost:8025。

這一課要讓客人預約後收到確認信。第 07 課已經用 Docker 跑起測試收信匣 Mailpit，請確認它還開著、收信匣網頁在 http://localhost:8025。
只用來測試：不要設定任何真實的寄信帳號或密碼，所有信都寄到 Mailpit，不能寄到外面。
沒開的話幫我啟動，告訴我怎麼確認它開著。

複製

做完應看到：http://localhost:8025 打得開，是一個還沒有信的收信匣。

如果打不開：等一分鐘再重新整理；還是打不開，看下面「卡住時怎麼辦」。

步驟 2請 Codex 在預約成功時寄確認信

1. 在 Codex 貼上下面這段，送出。
2. Codex 做好後，在客人網頁 http://localhost:3000 預約一次，Email 填你準備的假 Email。
3. 回到測試收信匣 http://localhost:8025，打開最新那封信。

請在客人預約成功時，寄一封確認信到客人填的 Email：
1. 主旨寫「小森髮廊 預約確認」。
2. 內容寫客人姓名、服務項目、日期時間、價格，和店家的營業時間。
3. 最後附一個「取消預約」的連結。每筆預約產生一組別人猜不到的取消碼，只放在這封信的連結裡。
4. 寄信失敗時，預約照樣成立，但要記下錯誤。
信一律寄到第 07 課開好的 Mailpit。改完重新啟動服務，告訴我改了哪些檔案。

複製

做完應看到：收信匣多了一封確認信，內容和你剛剛的預約對得上，最下面有取消連結。

步驟 3請 Codex 做取消頁

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

請讓確認信裡的取消連結，打開客人網頁上的取消頁：
1. 先顯示這筆預約的內容和「確認取消」按鈕，客人按了才真的取消。
2. 取消用 POST /api/bookings/{id}/cancel，帶上信裡的取消碼。
3. 取消後顯示「已取消」，這個時段重新開放給別人訂。
4. 取消碼不對、或這筆已經取消過，要顯示看得懂的說明。
5. 店家後台要看得到這筆變成已取消。
改完重新啟動服務，告訴我改了哪些檔案。

複製

做完應看到：Codex 回報做好了取消頁。

步驟 4點信裡的連結，取消這筆預約

1. 回到測試收信匣，打開剛剛那封確認信，點「取消預約」連結。
2. 在打開的取消頁確認是同一筆預約，按「確認取消」。
3. 打開店家後台 http://localhost:3001，找到這筆預約。
4. 回到客人網頁，看同一天同一個時段能不能再選。

做完應看到：取消頁顯示已取消，後台這筆變成已取消，客人網頁上這個時段又可以選了。

如果信是在步驟 3 之前寄的：舊信的連結可能打不開。重新預約一次，用新收到的那封信來取消。

步驟 5看改了哪些檔案，存一個版本

1. 在 Codex 貼上下面這段，送出。
2. 用 VS Code 打開 shop-booking 資料夾，對照 Codex 說的檔案，看這一課改了哪些地方。

請用白話告訴我，這一課你改了哪些檔案、各改了什麼，然後存一個版本，說明寫「確認信與取消預約」。

複製

做完應看到：改動集中在 docker-compose.yml、後端的預約（backend/app/routers/bookings.py）、寄信的程式，以及客人網頁（web/）的取消頁。寄信的程式最好自己放一個檔案，不要塞進別的檔案裡。

如果寄信的程式全塞在同一個檔案裡：請 Codex「把寄信的部分拆成自己一個檔案，功能不變，改完再試一次預約和取消」。

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

成果檢查

成功的樣子：

• 預約成功後，測試收信匣 http://localhost:8025 收到確認信，內容和預約對得上。
• 點信裡的取消連結、按確認取消後，看到已取消。
• 店家後台這筆預約變成已取消，客人網頁上這個時段又可以選。
• 整個過程沒有設定任何真實的寄信帳號或密碼。

還沒成功的樣子：收信匣是空的、信裡沒有取消連結、點了連結打不開，或取消後後台還是原本的狀態。照下面「卡住時怎麼辦」處理。

每個人的畫面不同是正常的：信的排版和用字不必一樣，收得到信、取消得了、後台跟著變就對了。

卡住時怎麼辦

測試收信匣打不開

先確認 Docker Desktop 開著。還是打不開，把這段貼給 Codex：

我打不開 http://localhost:8025 的測試收信匣。請檢查 Mailpit 有沒有在 Docker 裡跑、網址設定對不對，修好後告訴我原因。

預約成功了，收信匣卻是空的

我在客人網頁預約成功了，但 http://localhost:8025 的收信匣沒有信。請檢查預約成功後有沒有寄信、寄信的設定是不是指向 Mailpit，看一下有沒有記下寄信錯誤，修好後告訴我原因。

點了取消連結打不開，或說找不到

我點確認信裡的取消連結，打不開（或顯示找不到）。請檢查連結的網址對不對、客人網頁有沒有這個取消頁、取消碼有沒有帶上，修好後我再預約一次試試。

取消了，後台卻沒變

我在取消頁看到已取消，但店家後台這筆預約的狀態沒有變。請檢查取消有沒有真的存進資料庫、後台有沒有顯示取消的狀態，修好後告訴我原因。

信裡的中文變成亂碼

確認信裡的中文變成亂碼，請幫我修好，改完我再預約一次看看。

練習：試著亂用取消連結

我試了兩件事：同一個取消連結再點一次、把取消連結最後一個字改掉再打開。我看到的是（寫下你看到的畫面）。請讓這兩種情況都顯示看得懂的說明，而且不能取消到任何一筆預約，修好後存一個版本。

常見問題