開發時差：當前端已經刻好畫面，後端還在拉資料庫...
在一個標準的軟體開發團隊中，通常會有一位前端工程師負責切版畫 UI，還有一位後端工程師負責寫 API 與管理資料庫。
最常發生的辦公室慘劇就是：
前端工程師用 Tailwind CSS 花了半天時間，把一個精美的「商品列表頁面」切好了。現在他需要真實的商品資料來讓畫面活起來。
他轉頭問後端工程師：「那個 /api/products 的 API 寫好了嗎？」
後端工程師滿頭大汗地回覆：「還沒！資料庫權限出問題了，還在跟架構師討論，大概還要兩天才能給你。」
這時候，前端工程師只能無奈地在自己的程式碼裡，手動寫死一堆假資料 (Fake Data)：
const fakeProducts = [
{ id: 1, name: "蘋果", price: 100 },
{ id: 2, name: "香蕉", price: 50 }
];
等到兩天後真實的 API 寫好了，前端又要再花時間把這些假資料全部刪掉，換成真正的 fetch 邏輯。這不僅浪費時間，還非常容易出錯。
什麼是 Mock API？前端的救星
為了解決這種「被後端卡住」的窘境，業界流行一種做法叫做 Mock API (模擬 API)。 它的概念是：既然我們已經跟後端約定好了 RESTful API 的格式與長相，那前端為什麼不自己先開一個「假的 API 伺服器」？
只要這個假的伺服器，能夠在前端呼叫 GET /api/products 時，回傳剛剛約定好的 JSON 格式資料，前端就可以完全當作這是一支真的 API 來串接開發。
等到未來後端真的把 API 寫好了，前端只需要把 API 的網址從「假的 (localhost:3001)」換成「真的 (api.company.com)」就可以了！一行邏輯程式碼都不用改！
在過去，要自己架設一個 Mock API 伺服器，你可能需要學會寫 Node.js、設定 Express 路由，這對前端來說是一場硬仗。
但現在，有了 Vibe Coding 的加持，你只需要一個小工具 json-server 加上一段神級 Prompt，五分鐘就能擁有自己的 Mock API！
Vibe 實戰：五分鐘打造假資料大軍
步驟一：安裝神兵利器 json-server
首先，我們需要借助一個名為 json-server 的開源套件。它能在 30 秒內，把一個單純的 JSON 檔案，變成一支完整的 RESTful API！
請打開你的終端機 (Terminal)，輸入：
npm install -g json-server
(這會將 json-server 安裝到你的電腦全域環境中)
步驟二：Vibe Prompt 詠唱！產生海量逼真假資料
如果你自己手動去打 JSON 假資料，打到第三筆你就累了，而且名字常常是 test1, test2 這種毫無真實感的資料。
我們請 AI 來幫我們代勞。請在 Cursor 中下達這個 Prompt：
【逼真假資料生成 Prompt】 我正在使用
json-server來建立 Mock API。 請幫我生成一個db.json檔案的內容。需求如下：
- 這是一個「線上書店」的資料庫。
- 請幫我建立一個
books的陣列，裡面至少包含 10 筆書本資料。- 每本書必須要有以下欄位：
id(數字),title(書名，請給我真實感的暢銷書名),author(作者名字),price(價格，300-800之間),stock(庫存量),is_published(布林值)。- 請確保 JSON 格式絕對正確，不能有語法錯誤。
- 輸出時只要給我純 JSON 的內容碼即可。
AI 產出的高品質 JSON 資料：
{
"books": [
{
"id": 1,
"title": "原子習慣：細微改變帶來巨大成就的實證法則",
"author": "詹姆斯·克利爾",
"price": 330,
"stock": 150,
"is_published": true
},
{
"id": 2,
"title": "被討厭的勇氣：自我啟發之父阿德勒的教導",
"author": "岸見一郎",
"price": 300,
"stock": 85,
"is_published": true
},
{
"id": 3,
"title": "投資最重要的事：一本股神巴菲特讀了兩遍的書",
"author": "霍華·馬克斯",
"price": 380,
"stock": 0,
"is_published": false
}
// ... 後面還有 7 筆精美的假資料
]
}
請在你的專案資料夾中，建立一個名為 db.json 的檔案，把這段資料貼進去並存檔。
步驟三：啟動你的 Mock API 伺服器！
現在，見證奇蹟的時刻到了。
請在終端機輸入這行指令：
json-server --watch db.json --port 3001
終端機會顯示一個笑臉，並告訴你伺服器已經啟動了。
現在，你可以打開你的瀏覽器，或是打開你的 Postman，輸入這個網址：
http://localhost:3001/books
按下 Enter！你剛剛請 AI 生成的 10 本書，完美地以 API JSON 的格式呈現在你眼前！
更誇張的是，json-server 不只幫你做好了 GET (讀取)。
如果你用 Postman 發送 DELETE http://localhost:3001/books/1，它會真的去你的 db.json 檔案裡面，把第一本書刪掉！
它完美支援了所有的 CRUD RESTful 動作！
結語：掌控資料流，你就是全端大師
透過這五章的 API 課程，你已經揭開了前後端溝通的神秘面紗。 你學會了什麼是 JSON、如何用 Postman 點餐、什麼是 RESTful 的點餐規範、如何用 Token 防範駭客，甚至學會了自己架設 Mock API 不求人。
未來，當你遇到任何陌生的第三方服務（例如：Google Map API、綠界金流 API、Line Bot API），你都不會再感到恐懼。 因為你知道，所有的 API 說穿了，不過就是「對著一個特定的 URL，帶上通行證，發送一份 JSON 格式的訂單」而已。
帶著這些堅實的網路通訊知識，繼續你的 Vibe Coding 旅程吧！下一個課程，我們將帶你進入數據的寶庫：Python 爬蟲與資料分析！
🎁 [VIP 專屬加碼] API 進階除錯術與 Webhook 逆向工程
在接案市場上，最賺錢的案子通常不是「從零做一個網站」，而是「把 A 系統跟 B 系統串接起來」。 例如：客戶想把他們家的 ERP 系統，跟 LINE 官方帳號串接。 這時候，API 與 Webhook 的觀念就是你接下這種 10 萬元起跳案子的核心武器。
1. 學會看懂 API 錯誤訊息 (不再瞎子摸象)
當你用 Postman 打 API，卻收到紅色的 Error 時，不要急著去問 Cursor。請先學會自己判讀狀態碼：
- 401 Unauthorized：90% 是你的 Headers 裡面忘記帶
Bearer Token，或是 Token 已經過期了。去重新登入拿一組新的！ - 403 Forbidden：你有 Token，但你的權限不夠。例如你是一般會員，卻試圖呼叫
/api/admin/delete_user。 - 422 Unprocessable Entity：你送過去的資料格式錯了。例如後端要的是
{"age": 25}，你卻送了字串{"age": "二十五"}。仔細檢查你的 JSON Body！ - CORS Error (前端專屬噩夢)：當你在瀏覽器呼叫別人的 API，卻看到紅色的 CORS 錯誤。這代表對方的伺服器沒有允許你的網域存取。解法：在後端加上
cors套件，或是透過 Next.js 的 Route Handlers 做一層中繼代理 (Proxy)。
2. 什麼是 Webhook？(API 的反向操作)
傳統的 API 是「你主動去問別人」。
例如：你每 5 分鐘打一次 /api/check-payment 問綠界科技：「這筆訂單客人付款了嗎？」這非常浪費伺服器資源。
Webhook 是「別人主動來通知你」。
你寫一支 API (例如 /api/webhook/ecpay)，然後把這個網址交給綠界。
當客人付款成功的瞬間，綠界會「主動」打你的這支 API，告訴你：「付款成功了！訂單號碼是 12345」。
這就是所謂的 Webhook (網路鉤子)，它是現代 SaaS 服務之間最主流的溝通方式 (包含 LINE Bot、Stripe、綠界、GitHub Actions 全部都依賴 Webhook)。
3. Vibe Coding 實戰：一鍵產生 Webhook 接收器
在開發 Webhook 時，因為是「別人打給你」，所以你沒辦法用 Postman 自己測。這時候，強大的 Cursor 再次發揮作用。
✅ Vibe Prompt 示範：
「我需要寫一支 Node.js 路由來接收 LINE 官方帳號的 Webhook 訊息。
- 路徑為
POST /api/webhook/line。- 請幫我寫好驗證 LINE Signature 的安全防護邏輯，確保這個請求真的是從 LINE 官方發出來的。
- 如果收到使用者的文字訊息，請先使用
console.log將內容印出來即可。- 最後，務必回傳
200 OK給 LINE 伺服器，否則 LINE 會判定發送失敗。」
有了這個觀念，你已經具備了打通全世界所有 SaaS 系統任督二脈的能力。準備好成為企業眼中的系統整合大師了嗎？