- PHASE 01認識 Vibe Coding 和工具
- PHASE 02第一次做出東西
- PHASE 03規劃你的產品
- PHASE 04做出小店預約
- PHASE 05上線前要懂的事
- PHASE 06換成你的點子
- PHASE 07往商用產品前進
- 網頁
- 後台
- App
- API
- 資料庫
- Redis
- 測試收信匣
這一課動到:App(選做),最後全部零件一起測一遍
你現在在這裡:第 6 階段的第三課。上一課你的產品有了網頁和管理後台,這一課加上 App(選做),再把整個流程測一遍。
我的產品需要 App 嗎?做完怎麼確認沒弄壞?
App 是選做:使用者常在手機上用、想放在手機桌面一點就開的產品再做,Windows 或只用網頁就夠的產品直接做測試。需要的話,照第 15、16 課的順序用 Flutter 做出 App,接上同一套 API。最後請 Codex 寫自動測試、把整個流程測一遍,逐項對照第 06 課的及格線,全部通過就是你自己的產品雛形。
什麼時候值得做 App
可以先不做 App
- 使用者偶爾才用一次,例如一年報名幾次
- 手機瀏覽器打開網頁就能順順用完
- 你用的是 Windows 電腦
- 及格線裡沒有寫到 App
值得做 App
- 使用者每天或每週都會打開
- 想放在手機桌面,一點就開
- 以後想用推播提醒使用者(第 23 課會點到)
- 及格線裡寫了 App
拿不定主意就先不做。網頁在手機上也能用,App 等真的有人需要再加,這一課後半段的測試一樣要做。
自動測試:開店前巡一遍的店長
自動測試像開店前照著清單巡一遍的店長:燈有沒有亮、收銀機能不能用,一項一項打勾。你在第 17 課請 Codex 替小店預約寫過,這一課換成你的核心流程和及格線。你不用讀測試程式,只看通過幾項、失敗幾項。
成果預覽:你自己的產品雛形

1 選做:iPhone 模擬器上的 App(畫面分成上下兩半並排),以補習班報名為例,上方是第 21 課的 logo,下面列出課程和國中數學的場次:第 1 梯額滿、第 2 梯剩 10 名。 
示意圖2 Codex 回報自動測試的結果:總共幾項、全部通過。 
示意圖3 Codex 對照及格線的表格,每一項都標著「通過」。
你的畫面和這裡不同是正常的。測試全部通過、及格線每一項都通過,就是做對了。
上課前:準備好這四樣
- 上一課的專案
- 「文件」裡你的專案資料夾,網頁和管理後台都達到及格線。還沒做好的話,先回第 21 課做完。
- 你的及格線
- 專案資料夾裡 product-brief.md 的「做到什麼程度算及格」,這一課最後逐項對照它。
- 做 App 的話
- 一台 Mac,和第 15 課裝好的 Xcode、iPhone 模擬器。沒做過第 15 課,先照第 15 課「這幾步要你自己按」裝好。
- 一位試用的人
- 練習時要請第一個會用的人試用你的雛形,先約好時間。
這兩步要你自己按
要不要做 App 由你決定;打開哪個專案,也要你自己來。
步驟 1決定這一課走哪一條路
- 對照上面「什麼時候值得做 App」,決定做不做。
- 要做 App:從操作步驟 1 開始。不做 App:直接跳到操作步驟 4。
做完應看到:你知道自己從步驟 1 還是步驟 4 開始。
步驟 2打開 Docker Desktop 和你的專案
- 打開 Docker Desktop,確認你的專案那一組是綠色的執行中,shop-booking 那一組是停止的。
- 打開 ChatGPT 桌面 App,確認上方選的是「Codex」,選「打開資料夾」,選你的專案資料夾,按「New chat」開新對話。

做完應看到:新對話標示著你的專案資料夾,http://localhost:8000/docs 打開是你的 API。
Windows:跳過 App,直接從操作步驟 4 開始。Windows 裝不了 Xcode,也跑不了 iPhone 模擬器;Flutter 也能在 Android 模擬器上跑,這門課不另外教。
操作步驟:App 選做,再把整個流程測一遍
步驟 1 到 3 對應第 15、16 課的 App,步驟 4 到 7 對應第 17 課的測試與健檢。
步驟 1選做:App 環境健檢
- 在 Codex 貼上下面這段,送出。第 15 課做過健檢、之後沒有更新過 Xcode 的話,這一步通常很快。
請幫我做 iPhone App 的環境健檢:檢查這台 Mac 的 Xcode、iOS 模擬器和 Flutter 是不是都準備好了。 缺什麼,請先用白話列出來、說明你打算怎麼補,問過我再動手;需要我自己按的步驟(輸入電腦密碼、同意條款、在 Xcode 裡按按鈕),請一步一步告訴我。 全部好了之後,用 Flutter 自己的健檢工具(flutter doctor)再檢查一次,用白話告訴我 iOS 相關的項目是不是都通過。Android 相關的項目沒通過沒關係,這門課不用。

做完應看到:Codex 回報 iOS 相關的項目都通過。
如果只剩 CocoaPods 沒裝的警告:App 沒裝它也跑得起來,可以先繼續;之後 Codex 建置時說缺 CocoaPods,再請它幫你裝。
步驟 2選做:App 先看得到你的資料
- 複製下面這段,把括號換成你的產品,送出。
請照 AGENTS.md 的規矩,在 app/ 資料夾用 Flutter 做「(換成你的產品名)」的 App,這一步先只做看資料的畫面: 1. (換成第一個畫面,例如:列出課程,資料從 GET /api/courses 拿) 2. (換成選了之後看到的內容,例如:選一門課後,從 GET /api/sessions?course_id=… 拿場次,額滿的場次要看得出來) 3. App 連這台 Mac 上已經在跑的後端 http://localhost:8000,不要另外做一份假資料,也不要改 backend/ 裡的程式。 做好後打開 iPhone 模擬器把 App 跑起來,告訴我模擬器上應該看到什麼;如果出現錯誤,請先用白話告訴我原因,修好後再跑一次。

做完應看到:模擬器上的 App 列出的資料,和你在網頁上看到的一樣。
步驟 3選做:App 走完核心流程,換上 logo
- 複製下面這段,把括號換成你的產品,送出。
- 在模擬器上走一次核心流程,再到管理後台 http://localhost:3001 找這一筆。
請在 app/ 的 Flutter App 加上核心流程的最後一步: 1. 填資料的畫面:(換成要填的欄位,例如:學生姓名、家長電話、Email),填錯要有提示,規則和網頁一樣。 2. 送出時用後端既有的(換成你的新增 API,例如:POST /api/enrollments),不要另外做新的 API,也不要改 backend/、web/、admin/ 裡的程式。 3. 送出成功後顯示成功畫面;失敗要顯示看得懂的原因。 4. App 圖示和啟動畫面,用第 21 課放在 web/ 資料夾的 logo,不要重畫或修改 logo 本身。 做好後在 iPhone 模擬器重新安裝 App,告訴我改了哪些檔案,再幫我存一個版本,說明寫「第 22 課:App 完成核心流程」。

做完應看到:App 顯示成功畫面,管理後台看得到同一筆;模擬器主畫面上的 App 圖示是你的 logo。
步驟 4請 Codex 替核心流程寫自動測試
- 複製下面這段,把括號換成你的規則;用不到的項目整行刪掉,送出。
請替 product-brief.md 的核心流程寫自動測試,放在 backend/tests/。至少檢查這幾件事: 1. (換成列出資料那一步,例如:列得出課程和場次) 2. 資料填好可以送出成功;少填必填欄位或格式不對,會被擋下來。 3. (換成你的規則,例如:額滿的場次報不了名) 4. 沒登入的人,看不到管理後台的資料。 5. (換成其他及格線要求,例如:用信裡的取消碼可以取消,取消後名額又空出來) 測試要用另外準備的測試資料,不要動到我自己建的資料。 寫好後跑一遍,用白話告訴我:總共幾項、通過幾項、失敗幾項。有失敗的話,先說明是測試寫錯還是功能有問題,等我確認再改。 全部通過後存一個版本,說明寫「加上自動測試」。

做完應看到:Codex 回報全部通過,存好了版本。
步驟 5故意改壞一處,看測試抓不抓得到
- 複製下面這段,把括號換成你的一條規則,送出。
這是練習,請故意把程式改壞一處:(換成一條規則,例如:讓額滿的場次還能報名)。 改完告訴我改了哪個檔案,把測試跑一遍,告訴我哪一項失敗、代表什麼。這一步不要存版本,看完結果請退回上一個版本(「加上自動測試」那一版),再跑一遍確認全部通過。

做完應看到:改壞時有一項失敗,退回後又全部通過。
步驟 6請 Codex 把整個流程測一遍,對照及格線
- 貼上下面這段,送出。Codex 會自己打開網頁、後台操作一次,要等一下。
- 表格裡有「還沒通過」的,一次補一項:「請補上及格線裡的(換成那一項),改完把測試跑一遍,全部通過再存一個版本。」
請把我的產品從頭到尾實際走一遍,對照 product-brief.md 的「做到什麼程度算及格」逐項檢查: 1. 用內建瀏覽器在 http://localhost:3000 走完核心流程,電腦寬度和 390 像素寬各一次。 2. 到管理後台 http://localhost:3001 登入,確認看得到剛剛那一筆,試一次改狀態和改設定。 3. 有通知信的話,到 http://localhost:8025 確認收得到;有 App 的話,在 iPhone 模擬器也走一次。 4. 把自動測試再跑一遍。 先不要修改任何檔案。最後用一張表告訴我:及格線每一項「通過」或「還沒通過」,還沒通過的,說明差在哪裡。

做完應看到:及格線每一項都是「通過」。沒做 App 的人,App 那一項標「這一課不做」也算完成。
步驟 7用健檢清單看結構,用 VS Code 看改了哪些檔案,存一個版本
- 貼上第一段提示詞,請 Codex 用第 17 課的健檢清單看你的專案。不符合的,回它「請照你的建議調整,改完把測試跑一遍,全部通過再存一個版本」。
- 在 VS Code 打開你的專案,看左邊的 backend/、web/、admin/(和 app/),再貼第二段提示詞。
請照專案守則檔 AGENTS.md,用白話幫我檢查這個專案,先不要修改任何檔案: 1. 每個檔案是不是只管一件事?backend/app/routers/ 是不是依功能分檔? 2. 使用者的網頁、管理後台、App 是不是分開放在 web/、admin/、app/? 3. 有沒有哪個檔案塞進太多東西? 4. API 的網址看不看得懂在做什麼?命名是不是英文小寫、複數名詞、單字用減號?使用者用的是不是都在 /api/,管理的人用的是不是都在 /api/admin/? 逐項回答符合或不符合;不符合的,說明在哪個檔案、建議怎麼調整。
請告訴我這一課你新增或修改了哪些檔案,各做了什麼;確認都已經存進版本,沒有存的請存一個版本,說明寫「第 22 課:我的產品雛形完成」。

做完應看到:健檢每一項都符合,Codex 回報存好了「第 22 課」的版本。
Windows:從步驟 4 開始做,提示詞一樣;步驟 6 第 3 項的 App 那一句可以刪掉。
成果檢查
成功的樣子:
- 有做 App 的:模擬器上的 App 走得完核心流程,送出的資料在管理後台看得到,App 圖示是你的 logo。
- Codex 寫好自動測試,全部通過;故意改壞時有一項失敗,退回後又全部通過。
- Codex 對照及格線的表格,每一項都是「通過」。
- 健檢清單每一項都符合,Codex 回報存好了第 22 課的版本。
還沒成功的樣子:測試有失敗、故意改壞時測試還是全部通過(代表沒檢查到)、及格線還有「還沒通過」,或 App 連不上後端。照下面「卡住時怎麼辦」處理。
畫面和截圖不一樣是正常的,你的產品本來就和補習班不同。看結果就好:測試通過、及格線全部通過。Windows 或沒做 App 的人,網頁和後台通過及格線,就是完成。
卡住時怎麼辦
測試一直有失敗
測試一直有失敗。請用白話告訴我:失敗的是哪一項、原因是測試寫錯還是功能有問題。 如果是功能有問題,請修好功能;如果是測試寫錯,請說明為什麼錯再改測試。改完再跑一遍,全部通過後存一個版本。
故意改壞了,測試還是全部通過
剛剛故意改壞的地方,測試卻全部通過,代表沒有檢查到。 請補一項測試檢查這件事,確認改壞時會失敗,再退回改壞之前的版本,確認全部通過。
App 打開了,但資料是空的或連不上
App 在 iPhone 模擬器上打開了,但列表是空的(或顯示連不上)。瀏覽器打得開 http://localhost:8000/docs。 請檢查 App 連的網址和它收到的回應,用白話告訴我原因,修好後再跑一次。不要改 backend/ 裡的程式。
App 建置失敗
App 建置失敗了。請讀錯誤訊息,用白話告訴我原因,修好後再跑一次;需要我自己按的地方(輸入密碼、在 Xcode 裡按按鈕),請一步一步告訴我。
及格線有一項一直沒通過
及格線裡的(換成那一項)一直沒通過。請把它拆成幾個小步驟,每一步做完讓我確認,再做下一步;每一步確認後把測試跑一遍,全部通過再存一個版本。
改壞了
我改壞了,請把專案退回上一個版本,退回後告訴我改回了什麼。
練習:請第一個會用的人試用,再錄下作品
這是你自己的產品,最該試用的是你在第 06 課寫的「第一個會用的人」。照第 17 課的方法:請他自己操作,你在旁邊看、不要教,記下四件事:有沒有完成、花了多久、卡在哪一步、他嘴裡說了什麼。再把紀錄貼給 Codex:
這是我請第一個會用的人試用我的產品的紀錄: (貼上你的紀錄) 請幫我整理成一張表:卡住的地方、可能的原因、建議怎麼改,依重要程度排序。先不要修改任何檔案。
挑最重要的一項請 Codex 修,修完跑測試、存版本。最後照第 17 課錄作品的方法,錄一段一分鐘左右的操作影片,拿給想合作或想請教的人看。接下來第 23 課,看雛形要往收費、登入和通知走,還差哪些事。
常見問題
不做 App,算完成嗎?
算。App 是選做,網頁和管理後台通過你在第 06 課寫的及格線,就是完成你自己的產品雛形。Windows 學員也是這樣完成。
自動測試是什麼?我要看得懂嗎?
自動測試像開店前照著清單巡一遍的店長,一項一項檢查功能還正不正常。你不用讀測試程式,只看 Codex 回報通過幾項、失敗幾項;改完程式請它跑一次,就知道有沒有弄壞原本的功能。
Windows 可以做 App 嗎?
這門課的 App 在 iPhone 模擬器上跑,iPhone 模擬器只能在 Mac 上執行,所以 Windows 學員跳過 App,直接做測試。Flutter 也能在 Android 模擬器上跑,這門課不另外教。
雛形做完,可以直接給客人用嗎?
還不行。現在它只在你自己的電腦上跑,要讓別人用,還要部署到雲端、處理資安與個資,這些在第 18、19 課;收費、登入和通知在第 23 課,營運在第 24 課。
來源與版本
官方資料查閱日:2026-09-29。Xcode、模擬器與 Codex 的按鈕名稱可能隨版本改變;這一課沿用第 15–17 課的提示詞。獨立教學,非 Apple、Google、OpenAI 的官方課程。
