讓預約 App 在
iPhone 模擬器跑起來

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 階段的第九課。上一課客人預約後收到確認信、也能自己取消，這一課加上新零件：在 iPhone 模擬器上跑的 App，先讓它讀出可預約的時段。

這一課和第 16 課需要 Mac，因為 iPhone 模擬器只能在 Mac 上跑。用 Windows 的人可以先跳過，直接到第 17 課，用網頁路線完成這門課。Flutter 也能在 Android 模擬器上跑，這門課不另外教。

怎麼讓預約 App 在 iPhone 模擬器跑起來？

先從 App Store 裝好 Xcode，再請 Codex 做環境健檢、裝好 Flutter，在專案的 app 資料夾做出預約 App。App 在 Mac 上的 iPhone 模擬器打開，讀的是第 08 課做好的同一套 API，所以看得到和客人網頁一樣的可預約時段。整個過程你不寫程式，只要照畫面按幾個按鈕、看結果對不對。

App 和網頁差在哪

網頁像貼在店門口的看板，誰打開瀏覽器都看得到；App 像客人帶回家的會員卡，裝在手機裡，點一下就打開。兩個都是客人預約的入口，背後接的是同一本預約本。

Flutter：一套模具做兩種手機的 App

Flutter 像一套可以同時做出 iPhone 版和 Android 版的模具：畫面設計一次，兩種手機都用得到。它是 Google 免費提供的 App 開發工具，這門課用它做小森髮廊的 App。官方說明 ↗

Xcode 與 iPhone 模擬器

Xcode 像蘋果發給開發者的工具箱，要做 iPhone App 就一定要有它，只能裝在 Mac 上。iPhone 模擬器像在 Mac 螢幕上放一台假的 iPhone，App 可以先在上面試用，不必有真的手機。模擬器在 Xcode 26 以前叫 Simulator，Xcode 27 起改名為 Device Hub。官方說明 ↗

App 讀的是同一套 API

API 像點餐窗口：客人網頁到這個窗口問「剪髮這天還有哪些時段」，App 也到同一個窗口問，拿到的答案就會一樣。這一課 App 只用兩個窗口：GET /api/services 拿服務項目，GET /api/slots 拿可預約時段。後端不用改，App 是新加的另一個入口。

成果預覽：iPhone 模擬器上的小森髮廊 App

你的 App 不會和這張一模一樣，Codex 每次做的版面都不同。看得到服務項目，選好日期後看得到時段，就是做對了。

上課前：準備好這四樣

上一課的專案

「文件」裡的 shop-booking，做到第 14 課：客人預約後收到確認信、也能取消。還沒做出來的話，先回第 14 課做完。

一台夠新的 Mac

App Store 上的 Xcode 需要 macOS 26.6 以後的版本，以及 Apple M1 以後的晶片（2026-09-29 查閱）。從左上角蘋果選單的「關於這台 Mac」看得到版本和晶片。App Store 的 Xcode 頁面 ↗

磁碟空間和時間

Xcode 在 App Store 標示的大小是 3.1 GB，iPhone 模擬器還要另外下載。先清出空間，下載要等一陣子，可以先做別的事。

工作箱在跑

打開 Docker Desktop，用瀏覽器打開 http://localhost:8000/docs，看得到 API 文件頁，就代表後端在跑。App 要向它拿資料。

這四步要你自己按

從 App Store 下載、同意授權條款、輸入電腦密碼，都要你本人來。Xcode 很大，第一步可以在上課前先開始下載。

步驟 2第一次打開 Xcode：同意條款、輸入密碼、下載 iPhone 模擬器

1. 從「應用程式」資料夾打開 Xcode。
2. 跳出授權條款時，看過後按「Agree」（同意）。
3. Mac 要你輸入電腦密碼時，輸入你登入 Mac 用的密碼。這是 Xcode 要安裝它需要的零件。
4. 問你要開發哪些平台時，勾選 iOS，按下載。iPhone 模擬器會跟著一起下載，要等一段時間。

做完應看到：下載完成後，Xcode 顯示歡迎畫面。這一課不會在 Xcode 裡寫東西，看到歡迎畫面就可以先關掉。

如果沒問你要下載哪些平台：從上方選單按「Xcode」→「Settings…」，點左邊的「Components」，在 iOS 旁邊按「Get」。官方說明 ↗

步驟 4第一次打開 iPhone 模擬器

1. 按 ⌘ + 空白鍵打開聚光燈搜尋，輸入「Device Hub」；Xcode 26 以前的版本輸入「Simulator」。
2. 打開後等一下，螢幕上會出現一台 iPhone，第一次開機比較久。

做完應看到：Mac 螢幕上出現一台 iPhone，停在主畫面，可以用滑鼠點。

如果搜尋不到：先確認步驟 2 的 iOS 下載已經完成，再到 Xcode 上方選單按「Xcode」→「Open Developer Tool」，找模擬器打開。

Windows：這一課跳過。Windows 裝不了 Xcode，也跑不了 iPhone 模擬器；Flutter 雖然也能在 Android 模擬器上跑，這門課不另外教。

操作步驟：健檢、做出 App、在模擬器打開

步驟 1環境健檢：請 Codex 檢查 Xcode、iOS 模擬器、Flutter 缺什麼

1. 打開 Codex，選 shop-booking 資料夾，開一個新對話。
2. 貼上下面這段，送出。
3. Codex 列出缺什麼、要怎麼補之後，看清楚再同意。它要你自己按的地方，照它說的一步一步做。

請幫我做 iPhone App 的環境健檢：檢查這台 Mac 的 Xcode、iOS 模擬器和 Flutter 是不是都準備好了。
缺什麼，請先用白話列出來、說明你打算怎麼補，問過我再動手；需要我自己按的步驟（輸入電腦密碼、同意條款、在 Xcode 裡按按鈕），請一步一步告訴我。
Flutter 還沒裝的話，請幫我裝好。
全部補好後，請用 Flutter 自己的健檢工具（flutter doctor）再檢查一次，用白話告訴我 iOS 相關的項目是不是都通過。Android 相關的項目沒通過沒關係，這門課不用。

複製

做完應看到：Codex 回報 Xcode、iOS 模擬器、Flutter 都準備好了。

如果 Codex 要你輸入電腦密碼或按「允許」：看清楚它要做什麼、是不是在裝這一課需要的東西，再照做。看不懂就先問它「這一步在做什麼」。

如果只剩 CocoaPods 沒裝的警告：這一課的 App 沒裝它也跑得起來，可以先繼續；之後 Codex 建置時說缺 CocoaPods，再請它幫你裝。

步驟 2請 Codex 在 app 資料夾做出預約 App

1. 在同一個對話貼上下面這段，送出。

請照 AGENTS.md 的規矩，在 app/ 資料夾用 Flutter 做小森髮廊的預約 App，這一課先只做一個看時段的畫面：
1. 上方列出服務項目，資料從 GET /api/services 拿。
2. 選一個服務和日期後，從 GET /api/slots?service_id=…&date=… 拿可預約的時段，排成一格一格的按鈕；額滿的時段要看得出來。
3. App 連這台 Mac 上已經在跑的後端 http://localhost:8000，不要另外做一份假資料，也不要改 backend/ 裡的程式。
這一課還不用送出預約。做好後告訴我新增、改了哪些檔案。

複製

做完應看到：Codex 回報 App 做好了，新增的檔案都在 app/ 裡。

步驟 3請 Codex 在 iPhone 模擬器打開 App

1. 貼上下面這段，送出。
2. 第一次建置比較久，等 Codex 回報 App 跑起來。

請打開 iPhone 模擬器，把 app/ 裡的 App 跑起來。
跑起來後告訴我，模擬器上應該看到什麼；如果出現錯誤，請先用白話告訴我原因，修好後再跑一次。

複製

做完應看到：模擬器上打開了小森髮廊 App，看得到三個服務項目。

如果 App 打開了，但列表是空的或顯示連不上：多半是後端沒在跑，請看下面的「卡住時怎麼辦」。

步驟 4自己點一次，和客人網頁對照

1. 在模擬器的 App 裡選「剪髮」，日期選一個週二到週日的日子，看列出的時段。
2. 用瀏覽器打開客人網頁 http://localhost:3000，選同一個服務、同一天。
3. 回到 App，改選一個週一。

做完應看到：App 和網頁列出的時段一樣，已經被訂走的時段兩邊都顯示額滿；選週一時，App 顯示公休或沒有時段。

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

1. 用 VS Code 打開 shop-booking，看左邊的檔案列表。
2. app/ 裡多了一整組 Flutter 的檔案：畫面的程式在 app/lib/，iPhone 專用的設定在 app/ios/。
3. 確認 backend/、web/、admin/ 這一課沒有被改到。有被改到，請 Codex 說明原因。
4. 在 Codex 貼上下面這段，存一個版本。

這一課完成了，請幫我存一個版本，說明寫「第 15 課：App 在 iPhone 模擬器看到可預約時段」。存好後告訴我這個版本改了哪些檔案。

複製

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

成果檢查

成功的樣子：

• Codex 的健檢回報 Xcode、iOS 模擬器、Flutter 都準備好了。
• iPhone 模擬器上打開了小森髮廊 App，看得到剪髮、洗髮造型、染髮三個服務。
• 選服務和日期後，列出的時段和客人網頁一樣；選週一時沒有時段。
• 這一課新增的檔案都在 app/ 裡，也存了一個版本。

還沒成功的樣子：模擬器沒有出現、App 建置到一半失敗，或 App 打開了但列表是空的、顯示連不上。照下面「卡住時怎麼辦」處理。

每個人 App 的版面、顏色不一樣是正常的，Codex 每次做的都不同。看的是結果：服務和時段有出現，而且和網頁一樣。

卡住時怎麼辦

App 打開了，但列表是空的或顯示連不上

先用瀏覽器打開 http://localhost:8000/docs。打不開代表後端沒在跑，先打開 Docker Desktop，等服務都啟動。打得開，就把這段貼給 Codex：

App 在 iPhone 模擬器上打開了，但服務或時段列表是空的（或顯示連不上）。瀏覽器打得開 http://localhost:8000/docs。
請檢查 App 連的網址和它收到的回應，用白話告訴我原因，修好後再跑一次。不要改 backend/ 裡的程式。

建置失敗，出現一大串紅字

不用自己讀，把這段貼給 Codex：

App 建置失敗了。請讀錯誤訊息，用白話告訴我原因，修好後再跑一次；需要我自己按的地方（輸入密碼、在 Xcode 裡按按鈕），請一步一步告訴我。

Codex 說找不到 iPhone 模擬器

多半是模擬器還沒下載完。到 Xcode 上方選單按「Xcode」→「Settings…」→「Components」，看 iOS 是不是已經裝好；還在下載就等它完成，沒有就按「Get」。裝好後再請 Codex 跑一次。

Codex 說 Xcode 不完整，或命令列工具不對

回到「這四步要你自己按」的步驟 3，在 Xcode 設定的 Locations 裡把 Command Line Tools 選成 Xcode，再請 Codex 重做一次健檢。

磁碟空間不夠

Xcode 和模擬器都很大。先清掉不用的大檔案，或請 Codex 告訴你這台 Mac 哪些資料夾佔了最多空間，你自己決定要刪什麼。

練習：在後台改設定，看 App 跟著變

請在 App 的時段列表加上往下拉就重新整理的功能，讓我在後台改了設定後，App 拉一下就看得到最新的時段。改完在模擬器重新跑一次。

常見問題