從麻瓜到魔法師的關鍵：認識 API (應用程式介面)

在上一堂課，你已經學會了基礎的程式語言 (JavaScript / Python)。你可以寫出一個迴圈印出 1 到 100，也可以寫一個判斷式來檢查分數是否及格。 但是，如果你想做一個「即時顯示全台灣天氣」的網站，你總不可能自己去全台灣各地量溫度，然後手動把資料打進程式碼裡吧？

這時候，你就需要 API (Application Programming Interface)。

🍔 用「去餐廳吃飯」來秒懂 API

很多人看到「應用程式介面」這幾個中文字，每個字都認識，但合在一起就完全看不懂。 其實，API 就跟去餐廳點餐的流程一模一樣：

  1. 你 (前端網頁或手機 APP)：肚子餓了，想吃牛肉麵。你不用知道廚房怎麼燉牛肉。
  2. 服務生 (API)：你把點菜單交給服務生。服務生負責把你的需求，正確無誤地傳遞給廚房。
  3. 廚房 (後端伺服器與資料庫)：收到服務生傳來的訂單，開始煮麵。煮好之後，把麵交給服務生。
  4. 服務生 (API)：把熱騰騰的牛肉麵端到你的桌上。

在這個過程中，API 就是那個服務生。 你不需要知道天氣預報局的超級電腦是怎麼運算的（廚房），你只需要透過 API（服務生），告訴它：「給我台北市今天的溫度」。API 就會去後台把資料拿出來，並且以一種電腦看得懂的格式（通常是 JSON 格式）端給你。

🌍 為什麼 API 是軟體業最偉大的發明？

在沒有 API 的年代，如果 A 公司的系統想跟 B 公司的系統交換資料，工程師必須互相開放資料庫權限，這非常危險且難以維護。 有了 API 之後，世界變得完全不同了：

  • 不用重複造輪子：你想做一個地圖網站？不用自己發射衛星，直接呼叫 Google Maps API。
  • 金流串接不再是惡夢：你想在網站上收費？不用自己去跟各大銀行談判，直接呼叫 ECPay (綠界科技) API 或是 Stripe API。
  • 賦予網站 AI 靈魂：你想讓你的網站能自動回覆客服？直接呼叫 OpenAI API，你的網站瞬間就擁有了大腦。

只要你學會怎麼串接 API，你一個人就是一支軍隊。你可以把全世界最頂尖公司的技術，全部拼接進你自己的小網站裡。

💡 [實戰演練] 看看真實世界的 API 長怎樣

我們來看看一個公開、免費的 API。 請在你的瀏覽器（Chrome 或 Safari）網址列，輸入以下這串網址，然後按下 Enter：

https://api.github.com/users/github

這是一支由全球最大程式碼代管平台 GitHub 提供的 API，專門用來查詢使用者資料。 當你按下 Enter 後，你不會看到漂亮排版的網頁，你會看到一堆密密麻麻的文字，類似這樣：

{
  "login": "github",
  "id": 9919,
  "node_id": "MDEyOk9yZ2FuaXphdGlvbjk5MTk=",
  "avatar_url": "https://avatars.githubusercontent.com/u/9919?v=4",
  "type": "Organization",
  "name": "GitHub",
  "company": null,
  "blog": "https://github.com/about",
  "location": "San Francisco, CA",
  "public_repos": 519,
  "followers": 41927
}

這就是我們前面提到的 JSON (JavaScript Object Notation) 格式。

  • "name": "GitHub" 告訴你它的名稱。
  • "location": "San Francisco, CA" 告訴你它的公司位置。
  • "public_repos": 519 告訴你它有多少個公開的專案。

這就是前端工程師每天在看東西！ 前端工程師的工作，就是把這堆醜醜的 JSON 文字抓回來，然後用 HTML/CSS 幫它們穿上衣服，變成你在手機上看到的那種漂亮卡片介面。

⚠️ [常見地雷區] JSON 格式的嚴格要求

在剛接觸 API 時，最常犯的錯誤就是「自己手寫 JSON 時語法錯誤」。 JSON 非常嚴格，它有幾個鐵律，只要違反一個，伺服器就會直接當機給你看：

  1. 必須用雙引號 (")：在 JSON 中，所有的「鍵 (Key)」和字串「值 (Value)」都必須用雙引號包起來。絕對不能用單引號 (')。
  2. 最後一個項目不能有逗號：這跟 JavaScript 不一樣。如果在 JSON 物件的最後一行加了逗號，就會引發致命錯誤。
  3. 不能寫註解：在 JSON 檔案裡面，不支援 // 或 /* */ 這類的註解寫法。

Vibe Coder 秘訣： 身為 Vibe Coder，你其實不需要死記硬背這些規則。當你拿到一包不確定的資料格式時，直接貼給 Cursor 說：「這是一段 JSON 嗎？請幫我檢查並修復格式錯誤」，AI 秒速就能幫你找出少了雙引號的地方。

💼 [商業應用場景] API 經濟的變現模式

懂 API 不只能讓你寫出酷炫的網站，它本身就是一門好生意。

案例 1：串接與整合服務 (系統整合商) 很多傳產老闆有自己的進銷存系統，但他們想要讓業務在外面用 LINE 就能查庫存。 這時候，如果你能寫一支程式，一邊呼叫進銷存系統的 API，一邊呼叫 LINE Bot 的 API，把這兩端串起來。 這個「過路費系統」，在接案市場上的行情至少是 5 萬 ~ 10 萬台幣 起跳。

案例 2：自己賣資料 (資料供應商) 假設你對台股非常有研究，你寫了一支爬蟲每天去抓籌碼資料，並經過你的獨門演算法計算出「明天必漲名單」。 與其只放在自己的 Excel 裡看，你可以把這份名單包裝成一支 API (GET /api/stock-predictions)。 然後在網路上採取「訂閱制」，每個月付費 990 元的人，才能拿到呼叫這支 API 的權限 (Token)。 你從此脫離了出賣時間的打工仔，成為了躺著賺錢的「資料供應商」。

這就是 API 的魔力。在下一章，我們將教你如何使用工程師的超級武器：Postman，來優雅地測試這些 API。