用 App 完成預約，
接上同一套資料

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、測試收信匣

你現在在這裡：第 4 階段的最後一課。上一課 App 在 iPhone 模擬器看到了可預約時段，這一課讓客人在 App 上把預約送出去，網頁、後台和 App 全部串起來。

這一課接著第 15 課，一樣需要 Mac。用 Windows 的人可以先跳過，直接到第 17 課，用網頁路線完成這門課。

怎麼用 App 完成預約？

請 Codex 在上一課的 App 加上填資料、送出預約的畫面，送出時用的是客人網頁同一個預約 API。所以 App 送出的預約一樣會寄確認信到測試收信匣，店家後台也看得到同一筆。最後把 App 圖示和啟動畫面換成第 10 課做的 logo，看起來就是同一家店的 App。

同一套資料是什麼意思

網頁和 App 像同一家店的兩個櫃台：客人不管從哪個櫃台預約，店員都寫進同一本預約本。這本預約本就是第 08 課接上的資料庫，兩個櫃台都透過同一個點餐窗口（API）POST /api/bookings 把預約交進去，所以店家只要看一個後台。

確認信為什麼不用另外做

寄確認信是後端收到預約之後做的事，不是網頁做的。App 把預約交給同一個窗口，後端就照第 14 課的做法寄信，App 不必另外做寄信功能。

App 圖示與啟動畫面

App 圖示像店門口的招牌，放在手機主畫面上，客人一眼認出是哪家店；啟動畫面像拉開鐵門的那一下，點開 App、內容還沒出來前先看到的那一頁。它們的正式名稱是 App icon 和 launch screen，這一課都換成第 10 課的 logo，和網頁是同一套樣子。官方說明 ↗

成果預覽：一筆預約，三個地方都看得到

每個人的畫面都不一樣。看得到同一位客人、同一個時段出現在三個地方，App 圖示是小森髮廊的 logo，就是做對了。

上課前：準備好這四樣

上一課的 App

第 15 課做好的 App，在 iPhone 模擬器上看得到可預約時段。還沒做出來的話，先回第 15 課做完。

工作箱在跑

打開 Docker Desktop，用瀏覽器確認 API 文件頁、測試收信匣和店家後台都打得開。

第 10 課的 logo

第 10 課存進 web/ 資料夾的小森髮廊 logo。這一課只沿用，不重做。

店家後台的帳號

第 11 課做的店家帳號 owner，和你當時決定的密碼，等一下要登入後台看預約。

這兩步要你自己按

模擬器要你自己打開；在 App 上預約，也要你本人像客人一樣點一遍，才知道客人用起來順不順。

步驟 1打開 iPhone 模擬器

1. 按 ⌘ + 空白鍵打開聚光燈搜尋，輸入「Device Hub」；Xcode 26 以前的版本輸入「Simulator」。
2. 等 iPhone 開機，停在主畫面。

做完應看到：模擬器主畫面上有上一課的 App。

步驟 2確認在模擬器裡打得了字

1. 在模擬器裡隨便點一個可以打字的地方，例如 Safari 的網址列。
2. 用 Mac 的鍵盤打幾個字，看模擬器裡有沒有出現。

做完應看到：用 Mac 鍵盤打的字出現在模擬器裡。

如果打不出字：在模擬器上方選單找「I/O」→「Keyboard」，打開「Connect Hardware Keyboard」（連接實體鍵盤）。也可以直接點模擬器螢幕上的鍵盤打字。

Windows：這一課跳過，第 17 課用網頁和後台驗收。

操作步驟：加上預約、對照三個地方、換上 logo

步驟 1請 Codex 在 App 加上預約功能

1. 在 Codex 打開 shop-booking，開一個新對話，貼上下面這段，送出。

請照 AGENTS.md 的規矩，在 app/ 的 Flutter App 加上預約功能：
1. 點一個可預約的時段後，進到填資料的畫面：姓名、電話、Email。
2. 填錯要有提示（例如姓名或電話空白、Email 格式不對），規則和客人網頁一樣。
3. 送出時用後端既有的 POST /api/bookings，不要另外做新的預約 API，也不要改 backend/、web/、admin/ 裡的程式。
4. 送出成功後顯示成功畫面，寫出服務、日期、時段，並提醒客人去收確認信；送出失敗要顯示看得懂的原因。
做好後在 iPhone 模擬器重新跑一次 App，告訴我改了哪些檔案。

複製

做完應看到：在 App 上點一個時段，會進到填姓名、電話、Email 的畫面。

步驟 2自己在 App 上預約一次

1. 在 App 選「剪髮」，日期選本週還沒過、不是週一的日子，再點一個時段。
2. 姓名、電話隨便填；Email 填一個好認的，例如 amy@example.com。信不會真的寄出去，只會進測試收信匣。
3. 先故意把 Email 打錯送出一次，看有沒有提示；改正後再送出。

做完應看到：Email 打錯時有提示；改正送出後，App 顯示預約成功，寫出服務、日期和時段。

為什麼選本週的日子：店家後台列的是今天和本週的預約，選本週的日子，等一下在後台才找得到這一筆。

步驟 3到測試收信匣看確認信

1. 用瀏覽器打開測試收信匣 http://localhost:8025。
2. 點開最新一封寄給剛剛那個 Email 的信。

做完應看到：收件人是你在 App 上填的 Email，信裡的服務、日期、時段和 App 上一樣，也有取消預約的連結。

步驟 4到店家後台找到同一筆

1. 打開店家後台 http://localhost:3001，用帳號 owner 和第 11 課設定的密碼登入。
2. 切到「本週」的預約。

做完應看到：列表裡有剛剛從 App 送出的那一筆，姓名、日期、時段都一樣。

步驟 5請 Codex 把 App 圖示和啟動畫面換成 logo

1. 貼上下面這段，送出。
2. Codex 重新裝好 App 後，回到模擬器主畫面看圖示，再點開 App 看啟動畫面。

請把 App 的圖示和啟動畫面換成第 10 課做的小森髮廊 logo：
1. 先找出 web/ 資料夾裡第 10 課的 logo 圖檔，告訴我用的是哪一個檔案。
2. App 圖示用這個 logo，iPhone 需要的各種尺寸都請你做好。
3. 啟動畫面把同一個 logo 放在中間，底色用客人網頁的主色。
4. 不要重畫或修改 logo 本身，也不要改 app/ 以外的檔案。
做好後在 iPhone 模擬器重新安裝 App，告訴我改了哪些檔案。

複製

做完應看到：模擬器主畫面上的 App 圖示變成小森髮廊的 logo；點開 App 時，先看到置中 logo 的啟動畫面。

如果圖示還是舊的：模擬器有時會記住舊圖示。在模擬器主畫面按住 App 圖示，選刪除 App，再請 Codex 重新跑一次。

如果第 10 課的 logo 是用文字排的、沒有圖檔：請 Codex 照網頁上那個 logo 的顏色和符號，排一張正方形的圖示用圖，存進 web/ 資料夾，再用它做圖示和啟動畫面。

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

1. 用 VS Code 打開 shop-booking，看左邊的檔案列表。
2. 這一課應該只改到 app/ 裡的檔案：預約畫面在 app/lib/，圖示和啟動畫面在 app/ios/。backend/、web/、admin/ 不該被改到；有被改到，請 Codex 說明原因。
3. 在 Codex 貼上下面這段，存一個版本。

這一課完成了，請幫我存一個版本，說明寫「第 16 課：App 完成預約、換上 logo」。存好後告訴我這個版本改了哪些檔案。

複製

做完應看到：改動的檔案都在 app/ 裡，Codex 回報版本存好了。

成果檢查

成功的樣子：

• 在 App 上選時段、填資料送出，看到預約成功畫面；填錯時有提示。
• 測試收信匣收到一封寄給 App 上那個 Email 的確認信。
• 店家後台的本週預約裡，看得到同一位客人、同一個時段的這一筆。
• 模擬器主畫面上的 App 圖示和啟動畫面，都是第 10 課的小森髮廊 logo。
• 這一課只改了 app/ 裡的檔案，也存了一個版本。

還沒成功的樣子：送出後沒反應或顯示錯誤、測試收信匣沒有新的信、後台找不到這一筆，或圖示還是 Flutter 預設的圖示。照下面「卡住時怎麼辦」處理。

每個人 App 的版面、確認信的排版不一樣是正常的。看的是結果：同一筆預約在 App、收信匣、後台三個地方都對得上。

卡住時怎麼辦

送出後沒反應，或顯示錯誤

先確認 API 文件頁打得開。打得開，就把畫面上的錯誤訊息一起貼給 Codex：

我在 App 上送出預約，畫面顯示「（貼上錯誤訊息，沒有就寫沒反應）」。
請檢查 App 送給 POST /api/bookings 的內容和後端的回應，用白話告訴我原因，修好後在模擬器再跑一次。不要改後端和網頁原本的規則。

App 預約成功，但收信匣沒有信

先用客人網頁 http://localhost:3000 預約一次。網頁預約也收不到，是第 14 課的寄信設定沒在跑；網頁收得到、App 收不到，把這段貼給 Codex：

用客人網頁預約時，測試收信匣收得到確認信；用 App 預約成功了，卻沒有收到信。
請比對 App 和網頁送出預約的方式有什麼不同，用白話告訴我原因，修好後我再從 App 預約一次。

後台找不到這一筆

先確認預約的日期在本週，後台也切到「本週」。日期不在本週，換一個本週的日子從 App 再預約一次。日期對了還是找不到，把這段貼給 Codex：

我從 App 送出一筆預約，App 顯示成功，但店家後台本週的列表裡找不到。
請檢查這筆預約有沒有存進資料庫、後台為什麼沒列出來，用白話告訴我原因再修好。

圖示或啟動畫面沒換

在模擬器主畫面按住 App 圖示，刪除 App，再請 Codex 重新跑一次。還是沒換，貼這段：

模擬器上的 App 圖示（或啟動畫面）還是舊的。請檢查 app/ios/ 裡的圖示和啟動畫面設定，確認用的是第 10 課的 logo，修好後重新安裝 App。

練習：從信裡取消，看 App 跟著變

客人網頁訂走的時段，在 App 上看不出已經額滿。請讓 App 的額滿時段和客人網頁顯示得一樣清楚，改完在模擬器重新跑一次。

常見問題