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

VIBE CODING · 第 20 課

換成自己的點子:
先做一條核心流程

小店預約已經完整做過一次。這一課換成你自己的點子:先只挑一條最核心的流程,照同樣的順序請 Codex 蓋出工作箱、資料和 API。

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

這一課動到:Docker、API、資料庫(換成你自己的產品)

你現在在這裡:第 6 階段的第一課。小店預約在第 17 課已經做完、測過,這一課開一個新資料夾,換成你自己的點子,先做出一條核心流程的資料和 API。

怎麼把自己的點子做成產品?

先別想一次做完,從第 06 課的產品說明裡挑出最核心的一條流程,例如「家長選課程、選場次、報名成功」。再照做小店預約的順序,請 Codex 準備工作箱、建立資料和 API,提示詞只要把小森髮廊換成你的產品。做完後在 API 文件頁存進第一筆資料,就代表你的產品有了後端。

核心流程:產品最主要的那一條路

核心流程像餐廳的招牌菜:客人上門最主要就是為了它,其他小菜可以之後再加。它是一條從頭走到尾的路:誰開始、做了哪幾步、最後存下什麼。小店預約的核心流程是「客人選服務、選時段、留下資料、預約成功」,確認信、後台和 App 都是繞著它長出來的。

換題目:換的是名詞,順序不變

這一課用另一個示範點子「補習班課程報名」說明怎麼換。左邊是你做過的小店預約,右邊是換成補習班後的樣子:

小店預約(做過的)

  • 要選的東西:服務項目(剪髮、洗髮造型、染髮)
  • 要選的時間:時段,每 30 分鐘一格
  • 要留的資料:服務、時段、姓名、電話、Email
  • API:GET /api/services、GET /api/slots、POST /api/bookings

補習班課程報名(換題目)

  • 要選的東西:課程(國中數學、英文會話、程式入門)
  • 要選的時間:場次,每一場有名額上限
  • 要留的資料:場次、學生姓名、家長電話、Email
  • API:GET /api/courses、GET /api/sessions、POST /api/enrollments

這一課的提示詞都是「套用模板」:用「(換成你的……)」標出要替換的地方,照你的產品說明填進去,括號連同裡面的例子一起刪掉。沒有標出來的地方不用改。

沿用專案守則檔

第 07 課的 AGENTS.md 是你給 Codex 的工作規矩。資料夾怎麼分、API 網址怎麼命名、每完成一步存一個版本、密碼不能寫在程式裡,這些原則照舊;只把小森髮廊的店名、服務項目和營業時間,換成你的產品和資料。

成果預覽:你的產品存進第一筆資料

Docker Desktop 搜尋 class-signup:新專案這一組的資料庫(postgres)、redis、測試收信匣(mailpit)和後端都是綠色的執行中。
Docker Desktop 搜尋 class-signup:新專案這一組的資料庫(postgres)、redis、測試收信匣(mailpit)和後端都是綠色的執行中。
瀏覽器打開 http://localhost:8000/docs,以補習班報名為例:列出 GET /api/courses、GET /api/sessions、POST /api/enrollments;按「Execute」新增一筆報名後,Code 是 201,回應裡是剛存進去的陳小美。
瀏覽器打開 http://localhost:8000/docs,以補習班報名為例:列出 GET /api/courses、GET /api/sessions、POST /api/enrollments;按「Execute」新增一筆報名後,Code 是 201,回應裡是剛存進去的陳小美。

你的畫面不會和這裡一樣:API 的名稱和欄位跟著你的產品走。看得到你自己的資料、新增一筆後讀得回來,就是做對了。

上課前:準備好這四樣

你的產品說明
第 06 課寫好的 product-brief.md,在「文件」裡的 my-idea 資料夾。還沒寫的話,先回到第 06 課的操作步驟寫好。
做好的小店預約
「文件」裡的 shop-booking。要用到它的 AGENTS.md,卡住時也可以打開對照。還沒做完的話,先回第 17 課做完。
第 17 課的真人試用紀錄
手寫的紀錄,或 Codex 整理好的卡點表都可以。沒做真人試用的話,改用第 06 課 product-brief.md 最後的「真人試用紀錄」。
Docker Desktop、Codex 和 VS Code
前面各課裝好的三樣工具。

這三步要你自己按

停下哪個專案、新資料夾叫什麼名字、讓 Codex 在哪裡工作,都要你自己決定。

步驟 1先停下小店預約的工作箱

  1. 打開 Docker Desktop,點左邊的「Containers」。
  2. 找到 shop-booking 這一組,按那一列的停止按鈕(方塊圖示)。
Docker Desktop 的容器列表:上面是 shop-booking 那一組,Actions 裡有方塊形的停止按鈕;下面是按下後整組變成已停止,按鈕換成三角形的開始。
Docker Desktop 的容器列表:上面是 shop-booking 那一組,Actions 裡有方塊形的停止按鈕;下面是按下後整組變成已停止,按鈕換成三角形的開始。

做完應看到:shop-booking 這一組的狀態變成已停止(Exited)。資料還在,之後按啟動就回來。

為什麼要停:新專案和小店預約用同樣的網址,例如 API 文件頁都在 8000 號窗口。兩個同時開,會搶同一個窗口。

步驟 2建新專案資料夾,放進產品說明和專案守則

  1. 在 Finder 的「文件」裡新增一個資料夾,名稱用英文小寫、單字之間用減號,例如補習班報名叫 class-signup。想不到名字就叫 my-product。
  2. 打開 my-idea,點一下 product-brief.md,按 ⌘C 拷貝;打開新資料夾,按 ⌘V 貼上。
  3. 打開 shop-booking,用同樣的方法把 AGENTS.md 拷貝到新資料夾。
Finder 的「文件」裡有新資料夾 class-signup,和 my-idea、shop-booking 等資料夾;下面是打開 class-signup,看得到 AGENTS.md 和 product-brief.md。
Finder 的「文件」裡有新資料夾 class-signup,和 my-idea、shop-booking 等資料夾;下面是打開 class-signup,看得到 AGENTS.md 和 product-brief.md。

做完應看到:新資料夾裡有 product-brief.md 和 AGENTS.md,原本的 my-idea 和 shop-booking 裡也都還在。

如果原本的資料夾裡檔案不見了:多半是用拖的,變成搬走。把檔案拖回原本的資料夾,再用 ⌘C、⌘V 拷貝一次。

步驟 3在 App 打開新資料夾,開新對話

  1. 打開 ChatGPT 桌面 App,確認上方選的是「Codex」。
  2. 選「打開資料夾」,選「文件」裡剛建的新資料夾。
  3. 按「New chat」開新對話。
App 裡打開新專案資料夾、開好新對話的畫面,標示著新資料夾的名稱。
示意圖App 裡打開新專案資料夾、開好新對話的畫面,標示著新資料夾的名稱。

做完應看到:新對話的畫面標示著你的新資料夾,不是 shop-booking。

如果 Codex 要執行 Docker 前先問你同不同意:看清楚它要做什麼、是不是在新資料夾裡,再同意。

Windows:Docker Desktop 從開始選單打開,左邊一樣有「Containers」;在檔案總管用 Ctrl + C 拷貝、Ctrl + V 貼上。

操作步驟:圈出核心流程,再照第 07、08 課的順序做

步驟 1、2 先把要做什麼講清楚,步驟 3、4 對應第 07 課的工作箱,步驟 5 到 7 對應第 08 課的資料與 API。

步驟 1請 Codex 從產品說明圈出一條核心流程

  1. 在 Codex 貼上下面這段,送出。
請讀這個資料夾的 product-brief.md,這是我的產品說明,我不會寫程式。
這一課只做一條最核心的流程。請從「核心功能」挑出沒有它、第一個會用的人就用不下去的那一條,用白話寫成 3 到 6 步:誰開始、每一步做什麼、最後存下什麼。
再列出這條流程要存哪幾種資料、每種有哪些欄位,以及需要哪幾條 API(照 AGENTS.md 的 API 命名規則)。
先不要寫程式,也先不要改檔案。

以補習班課程報名為例,Codex 整理出來的樣子大概是這樣:

核心流程
家長打開網頁,選一門課程,選一個還有名額的場次,填學生姓名、家長電話和 Email,報名成功。
要存的資料
課程(名稱、學費)、場次(課程、日期、上課時間、名額上限)、報名(場次、學生姓名、家長電話、Email、狀態)。
需要的 API
GET /api/courses、GET /api/sessions?course_id=1、POST /api/enrollments,以及管理的人查報名用的 GET /api/admin/enrollments。
Codex 列出 3 到 6 步的核心流程、要存的資料和需要的 API,沒有改動任何檔案。
示意圖Codex 列出 3 到 6 步的核心流程、要存的資料和需要的 API,沒有改動任何檔案。

做完應看到:一條從頭走到尾的流程、幾種資料和幾條 API,你讀得懂也同意。

如果 Codex 列了好幾條流程:回它「請只留一條,其他的之後再做」。

步驟 2真人試用:用第 17 課的發現,選一個最重要的修改

第 17 課請人試用小店預約時,你看到了別人卡在哪裡。同樣的問題,很可能也會出現在你的產品上。趁還沒動工,挑一個最重要的先避開。

  1. 複製下面這段,把第 17 課的試用紀錄貼進括號的位置,送出。
  2. 看 Codex 的建議,同意就回它「同意,請照做」。
這是我在第 17 課請人試用小店預約的真人試用紀錄:
(換成你的試用紀錄,或 Codex 整理好的卡點表)
請對照剛剛的核心流程,挑出我的產品也最可能碰到的一個問題,只挑一個,說明為什麼挑它、我的流程要怎麼改。
我同意後,請在 product-brief.md 最後新增「核心流程」一段,寫進剛剛的流程、資料、API 和這一項修改,改完幫這個資料夾存一個版本,說明寫「核心流程定稿」。
VS Code 打開 product-brief.md,最後多了「核心流程」一段:家長查看課程、選梯次、填資料送出、系統檢查名額、看見報名成功五個步驟。
VS Code 打開 product-brief.md,最後多了「核心流程」一段:家長查看課程、選梯次、填資料送出、系統檢查名額、看見報名成功五個步驟。

做完應看到:product-brief.md 最後多了「核心流程」,裡面有一項依真人試用選出的修改,Codex 回報存好了版本。例如試用的人在小店預約不知道電話要怎麼填,補習班報名就寫明「電話欄位先寫好填寫範例」。

這一項修改什麼時候做:跟資料有關的(例如哪一欄必填),這一課做資料時就一起做;跟畫面有關的(例如按鈕放哪裡),第 21 課做網頁時再做。

步驟 3請 Codex 把專案守則換成你的產品

  1. 複製下面這段,把括號換成你的產品名,送出。
這個資料夾的 AGENTS.md 是我做小店預約時的專案守則,我要沿用它做自己的產品。請照下面改寫:
1. 小森髮廊的店名、服務項目、營業時間這些示範資料,換成 product-brief.md 裡我的產品:(換成你的產品名,例如:晨光數學教室課程報名)。
2. 資料夾結構、技術組合、每完成一步存一個版本、密碼不能寫在程式裡、自動測試放在 backend/tests/ 這些做事原則,全部照舊。
3. backend/app/routers/ 的分檔改成依我產品的功能分,一個檔案只管一件事。API 網址照原本的命名規則:英文小寫、複數名詞、單字用減號;使用者用的在 /api/,管理的人用的在 /api/admin/。
4. 網址表照舊:API 文件頁 8000、網頁 3000、管理後台 3001、測試收信匣 8025。
改完用白話告訴我改了哪些地方,再幫這個資料夾存一個版本,說明寫「專案守則換成我的產品」。
VS Code 裡的 AGENTS.md:上面寫著新產品是補習班課程報名系統;下面的資料夾表把後端依功能分成 courses.py、sessions.py、enrollments.py、admin.py。
VS Code 裡的 AGENTS.md:上面寫著新產品是補習班課程報名系統;下面的資料夾表把後端依功能分成 courses.py、sessions.py、enrollments.py、admin.py。

做完應看到:Codex 列出改了哪些地方。在 VS Code 打開 AGENTS.md,找不到小森髮廊,看得到你的產品名。

如果還看得到小森髮廊:回它「AGENTS.md 裡還有小森髮廊的資料,請全部換成我的產品,改完列出換了哪幾處」。

步驟 4環境健檢,把工作箱跑起來

  1. 確認 Docker Desktop 開著,貼上下面這段,送出。
  2. 第一次啟動要下載工作箱,等 Codex 回報完成。
  3. 切到 Docker Desktop 的「Containers」,看新專案那一組。
請先讀這個資料夾的 AGENTS.md,幫我做環境健檢:Docker Desktop 有沒有在執行、Docker Compose 能不能用、Git 能不能存版本。
「文件」裡的 shop-booking 如果還有服務開著,會搶同樣的網址,請先幫我停掉,不要刪掉它的資料。
都正常的話,照 AGENTS.md 用 Docker Compose 把資料庫 PostgreSQL、Redis、測試收信匣 Mailpit 跑起來,工作箱這一組用這個資料夾的名稱,不要和 shop-booking 混在一起。資料庫密碼照守則放在 .env,不要寫進其他檔案。
跑起來後,告訴我怎麼在 Docker Desktop 看到它們。
Docker Desktop 搜尋 class-signup 後展開:postgres、redis、mailpit 三個工作箱和後端都是綠色的執行中。
Docker Desktop 搜尋 class-signup 後展開:postgres、redis、mailpit 三個工作箱和後端都是綠色的執行中。

做完應看到:新專案那一組的資料庫、Redis、Mailpit 都是綠色的執行中,shop-booking 那一組是停止的。

Redis 和 Mailpit 用不到也要開嗎:先照守則開著,不影響你的產品。第 21 課確定用不到時,那兩段可以跳過。

步驟 5建立核心流程要存的資料

  1. 複製下面這段,把括號換成你在步驟 1 列出的資料、欄位和示範資料,送出。資料不只三種的話,照同樣的寫法往下加。
請照 AGENTS.md 的資料夾與命名規則,在 backend/app/models/ 建立 product-brief.md「核心流程」用到的資料,存進 Docker 裡的 PostgreSQL 資料庫:
1. (換成你的第一種資料和欄位,例如:課程:名稱、學費)
2. (換成你的第二種資料和欄位,例如:場次:課程、日期、上課時間、名額上限)
3. (換成你的第三種資料和欄位,例如:報名:場次、學生姓名、家長電話、Email、狀態、建立時間)
先放入幾筆示範資料:(換成你的示範資料,例如:國中數學、英文會話、程式入門三門課,各兩個場次,每場 12 個名額)。
資料要保存下來,重開電腦或 Docker 也不會不見。做好後用白話告訴我建了哪幾種資料、每種有哪些欄位。
Codex 用白話列出建好的幾種資料和欄位。
示意圖Codex 用白話列出建好的幾種資料和欄位。

做完應看到:Codex 列出的資料和欄位,和你在步驟 1 同意的一樣。

步驟 6做出核心流程需要的 API

  1. 複製下面這段,把括號換成你在步驟 1 列出的 API,每一條後面用一句話寫它在做什麼,送出。
請照 AGENTS.md 的 API 命名規則,在 backend/app/routers/ 用 FastAPI 做出核心流程需要的 API,一個檔案只管一種資料:
- (換成你的 API,例如:GET /api/courses:列出課程)
- (例如:GET /api/sessions:用課程列出還能報名的場次和剩下幾個名額)
- (例如:POST /api/enrollments:新增一筆報名,名額滿了要擋下來)
- (例如:GET /api/admin/enrollments:管理的人查報名,登入第 21 課再加,先不用鎖)
讓後端跟著 Docker 一起跑。API 文件頁上新增資料的範例,請先填好一筆看得懂的示範資料。
做好後告訴我怎麼打開 API 文件頁。
Codex 回報 API 做好了,附上 API 文件頁的網址 http://localhost:8000/docs。
示意圖Codex 回報 API 做好了,附上 API 文件頁的網址 http://localhost:8000/docs。

做完應看到:Codex 回報做好了,告訴你打開 http://localhost:8000/docs。

步驟 7在 API 文件頁存進第一筆資料,再讀回來

  1. 在瀏覽器打開 http://localhost:8000/docs。
  2. 點新增資料的那一條(例如 POST /api/enrollments),按「Try it out」,範例已經填好,按「Execute」。
  3. 再點列出資料的那一條(例如 GET /api/admin/enrollments),按「Try it out」、「Execute」,看剛剛那一筆有沒有出現。
上面:POST /api/enrollments 新增一筆後,Code 是 201,回應裡是陳小美這一筆;下面:列出報名的 GET /api/admin/enrollments 回應 200,看得到剛剛新增的陳小美。
上面:POST /api/enrollments 新增一筆後,Code 是 201,回應裡是陳小美這一筆;下面:列出報名的 GET /api/admin/enrollments 回應 200,看得到剛剛新增的陳小美。

做完應看到:新增時 Code 是 2 開頭,列出時看得到同一筆資料。

如果頁面上是小森髮廊的 API:你打開的是 shop-booking 的後端,看下面「卡住時怎麼辦」。

步驟 8用 VS Code 看 Codex 改了哪些檔案,存一個版本

  1. 在 VS Code 按「File」→「Open Folder…」,打開你的新資料夾,看左邊多了 backend/、docker-compose.yml 這些檔案。
  2. 回到 Codex,貼上下面這段。
請對照 AGENTS.md 的 API 命名規則,檢查 API 文件頁上的每一條路由:網址是不是英文小寫、複數名詞、單字用減號;使用者用的是不是都在 /api/ 底下,管理的人用的是不是都在 /api/admin/ 底下。不符合的請改好,改完列出改了哪幾條。
再列出這一課你新增和修改了哪些檔案,每個用一句白話說它在做什麼。確認 .env 沒有被存進版本後,幫這個專案存一個版本,說明寫「第 20 課:核心流程的資料與 API」。
VS Code 左邊的檔案列表:左圖看得到 backend/、AGENTS.md、docker-compose.yml、product-brief.md;右圖展開 backend/app/routers/,裡面是 admin.py、courses.py、enrollments.py、sessions.py。
VS Code 左邊的檔案列表:左圖看得到 backend/、AGENTS.md、docker-compose.yml、product-brief.md;右圖展開 backend/app/routers/,裡面是 admin.py、courses.py、enrollments.py、sessions.py。

做完應看到:Codex 說明了每個檔案的用途,並回報版本已經存好。

Windows:Docker Desktop 和 API 文件頁的畫面和 Mac 一樣,提示詞不用改;VS Code 的「File」→「Open Folder…」也一樣。

成果檢查

成功的樣子:

  • product-brief.md 最後有「核心流程」一段,3 到 6 步,裡面有一項依真人試用選出的修改。
  • AGENTS.md 寫的是你的產品,找不到小森髮廊。
  • Docker Desktop 裡,你的專案那一組工作箱都是綠色的執行中。
  • http://localhost:8000/docs 列出你的產品的 API,新增一筆資料後,用列出那一條讀得回來。
  • Codex 回報存好了第 20 課的版本。

還沒成功的樣子:API 文件頁出現的還是小森髮廊、8000 打不開、新增時 Code 是 4 或 5 開頭,或讀回來是空的。照下面「卡住時怎麼辦」處理。

畫面和截圖不一樣是正常的:你的點子和補習班不同,API 的名稱和欄位也會不同。看得到自己的資料、存得進去也讀得回來,就是做對了。

卡住時怎麼辦

API 文件頁出現的是小森髮廊

shop-booking 的工作箱還開著。把這段貼給 Codex:

http://localhost:8000/docs 出現的是小森髮廊的 API,不是我的產品。請把 shop-booking 的服務停掉,不要刪掉它的資料;再把這個資料夾的服務跑起來,確認 API 文件頁是我的產品後告訴我。

Codex 說有窗口(連接埠)被佔用

你說有連接埠被佔用。請告訴我是哪個程式佔用的;如果是 shop-booking,請把它停掉,不要刪資料。如果是其他程式,不要關掉它,改用沒人用的連接埠,並更新 AGENTS.md 裡的網址表,改完告訴我新的網址。

新增資料時 Code 是 4 開頭

多半是有欄位沒填或格式不對。把畫面上的 Code 和 Response body 貼給 Codex:

我在 API 文件頁新增資料失敗了。下面是畫面上的 Code 和 Response body,請用白話告訴我哪一欄填錯、應該怎麼填:
(貼在這裡)

新增資料時 Code 是 5 開頭

我在 API 文件頁新增資料,Code 是 5 開頭。請查後端的錯誤紀錄,找出原因修好,改完告訴我改了什麼,我再試一次。

Codex 做了核心流程以外的功能

這一課只做 product-brief.md 的核心流程。請把核心流程以外新增的功能拿掉,列出拿掉了哪些,確認核心流程的 API 還能用,再存一個版本。

我的點子和小店預約差很多

例如沒有時段、沒有名額。先請 Codex 評估,不急著改:

我的產品和小店預約不一樣:(換成哪裡不一樣,例如:沒有時段,是讓人刊登二手物品)。
請照 AGENTS.md 的原則,告訴我這一課的資料和 API 要怎麼安排才合適,先不要改檔案。

改壞了

我改壞了,請把專案退回上一個版本,退回後告訴我改回了什麼。

練習:故意填錯一次,看規則擋不擋得住

在 API 文件頁再新增兩筆資料:一筆照正常填,一筆故意少填一個必填的欄位,例如沒有電話。正常的那一筆要成功,少填的那一筆要被擋下來,Code 是 4 開頭。

少填的也存進去了,就請 Codex 補上規則:

我在 API 文件頁新增資料時少填了(換成你少填的欄位),結果還是存進去了。請讓這一欄變成必填,少填時回傳看得懂的錯誤,改完我再試一次,並存一個版本。

下一課會在這套資料和 API 上,加上給人用的網頁和管理後台。

常見問題

我的點子一定要做成預約嗎?

不一定。第 06 課列過套得上這套骨架的點子:預約、點餐、報名、會員、刊登。換的是資料的名稱和規則,做法和順序不變;差很多的點子,先請 Codex 比較哪些零件要換。

為什麼只做一條核心流程?

一次只做一條,做壞了容易找到原因,也能最快拿給第一個會用的人看。其他功能先寫在產品說明裡,核心流程走通後,第 21、22 課再一段一段加上去。

小店預約的專案要刪掉嗎?

不用刪。它是你的參考答案,卡住時可以打開對照。兩個專案用同樣的網址,所以同一時間只開一個,換專案前先把另一個的工作箱停下來。

專案守則檔可以自己改嗎?

可以,但建議請 Codex 改。說清楚要換成什麼,再請它說明改了哪些地方;資料夾結構、命名規則和存版本這些原則保持不變,後面的提示詞才對得上。

來源與版本

官方資料查閱日:2026-09-29。Docker Desktop、API 文件頁與 Codex 的按鈕名稱可能隨版本改變。獨立教學,非 OpenAI、Docker、FastAPI 的官方課程。