這些零件怎麼組起來運作

上一篇我們認識了四個零件：
前端、後端、資料庫、UI/UX。

但光知道零件還不夠。
你還要知道，
它們是怎麼合作的。

不知道這個，
你就會卡在 EP.1 講過的「第二種結果」—
網站能跑，
但你不知道為什麼能跑。

這篇講四個觀念，
vibe coder 卡關的地方有 80% 都跟它們有關。

1. API — 前端跟後端的對講機

前端跟後端是分開的兩個東西，
它們不會自己跑去找對方。

它們需要一個「對講機」。
那個對講機叫做 API。

API 的全名是 Application Programming Interface，
聽起來很複雜，
講白話就是「講話的方式」。

這整個來回，
就是一次 API 請求（API request）。

你打開的每一個 App、每一個網站，
背後都在不停地發 API 請求。
滑 IG、刷 Threads、按按鈕、滾動頁面、
大部分動作都在跟後端講話。

跟 AI 討論時你只要記得一件事：
當你說「按下這個按鈕之後要做 XX」，
AI 就會幫你寫一個 API。

2. 資料流 — 一個按鈕背後的六件事

四個零件加上 API，
串成一個完整動作會長什麼樣？

用 NaLi Match 真實情境來看。
客人在 NaLi Match 按下「送出需求」會發生什麼事？

一個按鈕背後，
六件事在跑。

你不用會寫，
但要知道有這六件事。
出問題時，
你才知道從哪一步開始問 AI。

知道流程，
debug 才能精準。

3. 靜態 vs 動態 — 不是每個網站都需要後端

這個觀念能幫你省一大堆事。

不是每個網站都需要後端跟資料庫。

關鍵觀念：
「靜態」不是說網站什麼都不會動。
是說「沒有自己的後端伺服器在跑程式」。
你還是可以用第三方服務（Supabase、Firebase、Disqus）
讓靜態網站有動態功能。

vibe coder 最常犯的錯：
明明要做的是一個介紹頁，
卻一開始就要 AI 幫你裝資料庫、做登入、加 API。

結果做了三天還沒上線。

跟 AI 討論時可以直接問：
「我這個產品需要後端嗎？還是純前端就夠？」
讓 AI 幫你判斷。

4. 開發環境 vs 正式環境 — 兩個世界

這個觀念你 100% 會踩到，
所以一定要先講。

你的網站其實活在兩個世界：

兩個是分開的世界。

你在電腦上改了東西，
線上不會自動變。
必須做一次「部署」（deploy），
線上才會更新。

為什麼會這樣？
因為兩個世界的環境不同：
檔案位置不同、
網址不同、
API key 不同、
資料庫不同。

所以「在開發環境能跑」
不等於「在正式環境能跑」。

後面 EP.6 會講 Vercel 部署實作。
但這個「兩個世界」的概念，
你現在就要記住。

三個輕量補充

這三個不是核心，
但 vibe coder 早晚會踩到。
先讓你有個印象，
後面 EP 會講細節。

給 vibe coder 的提問模板

下次你開新專案，
除了 EP.2 教你的架構討論，
也可以問 AI 這些問題：

這五個問題問完，
你對自己產品的運作邏輯就清楚了 80%。

兩個技術小補充（給認真的你）

這兩個觀念稍微進階一點，
不影響你動手做產品，
但知道了會更精準。

補充 A：API key 真的全部都不能放前端嗎？

原則上是的。
但有少數「設計成可以公開」的 key 例外。

例如 Supabase 的 anon key，
它本來就是給前端用的，
因為 Supabase 用一套叫「Row Level Security（RLS）」的機制，
在資料庫層級控制誰能讀寫哪筆資料。

所以判斷一把 key 能不能放前端，
不是看它叫不叫「key」，
而是看它有沒有被「保護機制」包住。

給 vibe coder 的安全做法：
不確定就放後端。
確定該服務文件寫「safe to expose in browser」
或「public anon key」才放前端。

補充 B：開發環境的網址到底長什麼樣？

剛剛我寫「http://localhost:3000」，
那是用框架（像 Next.js、Vite、React）開發時的預設網址。
localhost 的意思是「你自己的電腦」，
3000 是這個服務佔用的「埠口」（port）。

如果你只是寫一個純 HTML 檔案，
雙擊打開的時候網址會是 file:// 開頭，
那是你電腦本機檔案的路徑。

兩種都算「開發環境」，
共同特徵是：
只有你看得到、別人連不到。

到了線上之後就會變成 https:// 開頭的真實網域，
那才是「正式環境」。

下一篇我會講，
怎麼用 AI 寫出你的第一個網頁。
HTML、CSS、JavaScript 這三個東西，
各自在做什麼，
一篇講完。