奧微官網
Vibe Coding 從零開始 / 換成你的點子 / 第 22 課

VIBE CODING · 第 22 課

替自己的產品加 App,
再把流程測一遍

上一課你的產品有了網頁和管理後台。這一課需要的話加上 App,最後請 Codex 把整個流程測一遍,對照你在第 06 課寫的及格線。

  1. PHASE 01認識 Vibe Coding 和工具
  2. PHASE 02第一次做出東西
  3. PHASE 03規劃你的產品
  4. PHASE 04做出小店預約
  5. PHASE 05上線前要懂的事
  6. PHASE 06換成你的點子
  7. PHASE 07往商用產品前進
  • 網頁
  • 後台
  • App
Docker
  • 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. 1 選做:iPhone 模擬器上的 App(畫面分成上下兩半並排),以補習班報名為例,上方是第 21 課的 logo,下面列出課程和國中數學的場次:第 1 梯額滿、第 2 梯剩 10 名。
    1 選做:iPhone 模擬器上的 App(畫面分成上下兩半並排),以補習班報名為例,上方是第 21 課的 logo,下面列出課程和國中數學的場次:第 1 梯額滿、第 2 梯剩 10 名。
  2. 2 Codex 回報自動測試的結果:總共幾項、全部通過。
    示意圖2 Codex 回報自動測試的結果:總共幾項、全部通過。
  3. 3 Codex 對照及格線的表格,每一項都標著「通過」。
    示意圖3 Codex 對照及格線的表格,每一項都標著「通過」。

你的畫面和這裡不同是正常的。測試全部通過、及格線每一項都通過,就是做對了。

上課前:準備好這四樣

上一課的專案
「文件」裡你的專案資料夾,網頁和管理後台都達到及格線。還沒做好的話,先回第 21 課做完。
你的及格線
專案資料夾裡 product-brief.md 的「做到什麼程度算及格」,這一課最後逐項對照它。
做 App 的話
一台 Mac,和第 15 課裝好的 Xcode、iPhone 模擬器。沒做過第 15 課,先照第 15 課「這幾步要你自己按」裝好。
一位試用的人
練習時要請第一個會用的人試用你的雛形,先約好時間。

這兩步要你自己按

要不要做 App 由你決定;打開哪個專案,也要你自己來。

步驟 1決定這一課走哪一條路

  1. 對照上面「什麼時候值得做 App」,決定做不做。
  2. 要做 App:從操作步驟 1 開始。不做 App:直接跳到操作步驟 4。

做完應看到:你知道自己從步驟 1 還是步驟 4 開始。

步驟 2打開 Docker Desktop 和你的專案

  1. 打開 Docker Desktop,確認你的專案那一組是綠色的執行中,shop-booking 那一組是停止的。
  2. 打開 ChatGPT 桌面 App,確認上方選的是「Codex」,選「打開資料夾」,選你的專案資料夾,按「New chat」開新對話。
Docker Desktop 搜尋 class-signup,你的專案那一組都在執行中;下面是 VS Code 打開 class-signup 資料夾的樣子。
Docker Desktop 搜尋 class-signup,你的專案那一組都在執行中;下面是 VS Code 打開 class-signup 資料夾的樣子。

做完應看到:新對話標示著你的專案資料夾,http://localhost:8000/docs 打開是你的 API。

Windows:跳過 App,直接從操作步驟 4 開始。Windows 裝不了 Xcode,也跑不了 iPhone 模擬器;Flutter 也能在 Android 模擬器上跑,這門課不另外教。

操作步驟:App 選做,再把整個流程測一遍

步驟 1 到 3 對應第 15、16 課的 App,步驟 4 到 7 對應第 17 課的測試與健檢。

步驟 1選做:App 環境健檢

  1. 在 Codex 貼上下面這段,送出。第 15 課做過健檢、之後沒有更新過 Xcode 的話,這一步通常很快。
請幫我做 iPhone App 的環境健檢:檢查這台 Mac 的 Xcode、iOS 模擬器和 Flutter 是不是都準備好了。
缺什麼,請先用白話列出來、說明你打算怎麼補,問過我再動手;需要我自己按的步驟(輸入電腦密碼、同意條款、在 Xcode 裡按按鈕),請一步一步告訴我。
全部好了之後,用 Flutter 自己的健檢工具(flutter doctor)再檢查一次,用白話告訴我 iOS 相關的項目是不是都通過。Android 相關的項目沒通過沒關係,這門課不用。
Codex 回報健檢結果,iOS 相關的項目都通過。
示意圖Codex 回報健檢結果,iOS 相關的項目都通過。

做完應看到:Codex 回報 iOS 相關的項目都通過。

如果只剩 CocoaPods 沒裝的警告:App 沒裝它也跑得起來,可以先繼續;之後 Codex 建置時說缺 CocoaPods,再請它幫你裝。

步驟 2選做:App 先看得到你的資料

  1. 複製下面這段,把括號換成你的產品,送出。
請照 AGENTS.md 的規矩,在 app/ 資料夾用 Flutter 做「(換成你的產品名)」的 App,這一步先只做看資料的畫面:
1. (換成第一個畫面,例如:列出課程,資料從 GET /api/courses 拿)
2. (換成選了之後看到的內容,例如:選一門課後,從 GET /api/sessions?course_id=… 拿場次,額滿的場次要看得出來)
3. App 連這台 Mac 上已經在跑的後端 http://localhost:8000,不要另外做一份假資料,也不要改 backend/ 裡的程式。
做好後打開 iPhone 模擬器把 App 跑起來,告訴我模擬器上應該看到什麼;如果出現錯誤,請先用白話告訴我原因,修好後再跑一次。
iPhone 模擬器上的 App,從同一個 API 讀出國中數學的場次,和網頁上一樣:第 1 梯額滿、第 2 梯剩 10 名。
iPhone 模擬器上的 App,從同一個 API 讀出國中數學的場次,和網頁上一樣:第 1 梯額滿、第 2 梯剩 10 名。

做完應看到:模擬器上的 App 列出的資料,和你在網頁上看到的一樣。

步驟 3選做:App 走完核心流程,換上 logo

  1. 複製下面這段,把括號換成你的產品,送出。
  2. 在模擬器上走一次核心流程,再到管理後台 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 送出後的「已收到您的報名」,報名編號 #6;中:App 用的圖示檔,就是第 21 課的 logo;右:管理後台的報名名單,最上面 #6 王小明就是從 App 送出的那一筆。
左:App 送出後的「已收到您的報名」,報名編號 #6;中:App 用的圖示檔,就是第 21 課的 logo;右:管理後台的報名名單,最上面 #6 王小明就是從 App 送出的那一筆。

做完應看到:App 顯示成功畫面,管理後台看得到同一筆;模擬器主畫面上的 App 圖示是你的 logo。

步驟 4請 Codex 替核心流程寫自動測試

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

做完應看到:Codex 回報全部通過,存好了版本。

步驟 5故意改壞一處,看測試抓不抓得到

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

做完應看到:改壞時有一項失敗,退回後又全部通過。

步驟 6請 Codex 把整個流程測一遍,對照及格線

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

做完應看到:及格線每一項都是「通過」。沒做 App 的人,App 那一項標「這一課不做」也算完成。

步驟 7用健檢清單看結構,用 VS Code 看改了哪些檔案,存一個版本

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

做完應看到:健檢每一項都符合,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 的官方課程。