08 Oct 2025 7 min read Vibe Coding

Vibe Coding 基礎 : HTTP API 介紹 - 打開網路服務溝通的大門

Photo by Miguel Ángel Padriñán Alba / Unsplash

在現代網路世界中，各種服務和應用程式之間需要互相溝通、交換資料。無論你是在使用 n8n 的 HTTP 節點，還是嘗試用 AI 輔助寫程式來串接不同的服務，理解 HTTP API 都是一個關鍵的基礎知識。今天，讓我們用最簡單的方式，來理解這個概念。

Client-Server Model：網路世界裡的一種基本架構

在深入了解 API 之前，我們先來理解網路世界最基本的運作模式

什麼是 Client 和 Server？

想像你走進一家咖啡店：

Client（客戶端）：就是你，提出需求的一方
Server（伺服器）：就是咖啡店，提供服務的一方

在網路世界中：

Client 是發出請求的程式（你的瀏覽器、手機 App、n8n 的 HTTP 節點）
Server 是提供服務的程式（Google、Facebook、天氣預報網站的後台系統）

互動過程

你（Client）        咖啡店（Server）
    |                    |
    |---> 我要一杯拿鐵 --> |
    |                    |
    |<--- 這是你的拿鐵 <-- |
    |                    |

這個模式無處不在：

當你打開 Instagram，你的手機（Client）向 Instagram 的伺服器（Server）要求最新的貼文
當你使用 Google Maps，你的瀏覽器（Client）向 Google 的伺服器（Server）要求地圖資料
當你在 n8n 中使用 HTTP Request，n8n（Client）向目標服務（Server）發送請求

什麼是 API？

現在我們理解了 Client-Server 模式，API 就是這兩者之間的溝通規則。

想像咖啡店的場景：

你不會直接走進廚房自己泡咖啡
你需要透過點餐系統（API）來溝通
點餐系統規定了你可以點什麼、怎麼點、會得到什麼

API（Application Programming Interface） 定義了：

Client 可以要求什麼服務（菜單）
Client 如何提出要求（點餐方式）
Server 會如何回應（上菜方式）

HTTP 是什麼？

API是Client 和 Server 之間溝通的規則，而這個規則可以有很多語言及寫法，HTTP（HyperText Transfer Protocol)就是其中最普遍的一種 !

就像在咖啡店裡，你們可能用中文溝通，在法國咖啡店用法文，HTTP 就是網路世界共通的語言。每次你：

在瀏覽器輸入網址
點擊連結
提交表單
使用 App

背後都是你的裝置（Client）用 HTTP 這個語言和某個 Server 在對話。

接下來就是要認識下HTTP這個規則會要有哪些元素。

HTTP API 的基本元素

1. URL（網址）- Server 的地址

每個 Server 都有自己的地址，就像每家店都有門牌號碼：

https://api.weather.com/v1/taipei/current

這告訴 Client：

https://api.weather.com - Server 的位置（咖啡店地址）
/v1/taipei/current - 要什麼服務（菜單上的品項）

2. HTTP 方法（動作）- Client 的意圖

Client 告訴 Server 想要做什麼：

GET - 我要看資料（看菜單、查詢餘額）
POST - 我要新增資料（下訂單、發文章）
PUT - 我要更新資料（修改訂單、編輯個人資料）
DELETE - 我要刪除資料（取消訂單、刪除貼文）

3. Headers（標頭資訊）- 額外的說明

就像點餐時的特殊要求：

你是誰（會員卡、認證資訊）
你的偏好（要中文菜單還是英文菜單）
特殊需求（外帶還是內用）

Headers: {
  "Authorization": "Bearer 你的會員卡號",
  "Accept-Language": "zh-TW",
  "Content-Type": "application/json"
}

想了解更詳細headers有哪些的可以參考我之前的文章：HTTP headers 簡介: 一些常用的headers

4. Body（內容）- 詳細資料

當 Client 要傳送資料給 Server 時（例如 POST 請求），詳細內容會放在 Body：

json

{
  "product": "拿鐵咖啡",
  "size": "大杯",
  "sugar": "半糖",
  "ice": "少冰"
}

5. Response（回應）- Server 的答覆

Server 處理完 Client 的請求後，會回傳：

狀態碼 - 告訴 Client 請求的結果
- 200：成功了！這是你要的東西
- 404：找不到你要的東西
- 401：你沒有權限（忘記帶會員卡）
- 500：我們這邊出問題了（咖啡機壞了）
回應內容 - 實際的資料

其他更多更完整的回應: Introduction to HTTP Response Status Codes: How to use them correctly?

Client-Server 互動的完整流程

讓我們看一個完整的例子，當你在 n8n 中查詢天氣：

n8n (Client)                     天氣服務 (Server)
     |                                 |
     |  1. 請給我台北的天氣               |
     |  方法: GET                       |
     |  網址: /weather/taipei           |
     |-------------------------------->|
     |                                 |
     |                          2. 查詢資料庫
     |                          3. 準備回應
     |                                  |
     |  4. 這是台北的天氣資料              |
     |  狀態: 200 OK                     |
     |  內容: {"temp": 28, "晴天"}       |
     |<---------------------------------|
     |                                  |
     5. 顯示結果給使用者

實際應用場景

場景一：你就是 Client

當你使用瀏覽器瀏覽網頁時：

Client：你的瀏覽器
Server：網站的伺服器
API：HTTP 協議
過程：瀏覽器送出 GET 請求 → Server 回傳 HTML → 瀏覽器顯示網頁

場景二：你的程式是 Client

當你在 n8n 中使用 HTTP Request 節點：

Client：n8n 節點
Server：LINE Notify 伺服器
API：LINE Notify API
過程：

方法：POST
網址：https://notify-api.line.me/api/notify
Headers：Authorization: Bearer [你的權杖]
Body：message=今天記得帶傘！

場景三：連續的 Client-Server 關係

有趣的是，一個系統可以同時是 Client 也是 Server：

你的 App → n8n → Google Sheets
(Client)   (Server/Client)  (Server)

n8n 對你的 App 來說是 Server，但對 Google Sheets 來說是 Client！

為什麼這些概念很重要？

當你在使用 n8n、Zapier 或任何自動化工具時，你其實在做的是：

設定一個 Client（你的自動化流程）
連接到各種 Server（Google、LINE、Notion 等）
透過 API 讓它們互相溝通

理解這些基本概念，你就能：

知道為什麼需要 API Key（Server 要識別 Client）
理解為什麼有些操作需要等待（Server 需要時間處理）
明白錯誤訊息的意義（是 Client 還是 Server 的問題）

重點回顧 Recap

讓我們快速複習一下今天學到的重要名詞：

基礎架構

Client（客戶端）：發出請求的一方，像是你的瀏覽器、手機 App、n8n 節點
Server（伺服器）：提供服務的一方，處理請求並回應結果
Client-Server Model：網路世界的基本運作模式，Client 發請求，Server 回應

溝通機制

API（Application Programming Interface）：Client 和 Server 之間的溝通規則，定義可以要求什麼、如何要求、會得到什麼
HTTP（HyperText Transfer Protocol）：網路上最普遍的溝通協議，Client 和 Server 對話的共通語言

HTTP 請求的組成

URL：要訪問的網址，告訴 Client 要去哪裡找 Server
HTTP 方法：
- GET：取得資料
- POST：新增資料
- PUT：更新資料
- DELETE：刪除資料
Headers：請求的額外資訊（身份認證、語言偏好等）
Body：請求要傳送的詳細內容（通常用於 POST、PUT）

Server 的回應

Response：Server 回傳給 Client 的答覆
狀態碼：
- 200：請求成功
- 404：找不到資源
- 401：未授權（沒有權限）
- 500：Server 內部錯誤

掌握這些基本概念，你就擁有了在網路世界中串接各種服務的基礎知識！

開始你的 API 之旅

現在你已經理解了 Client-Server 模式和 HTTP API，可以開始嘗試：

觀察日常使用：打開瀏覽器的開發者工具，看看網頁如何向 Server 請求資料
使用 API 測試工具：試試 Postman 或 n8n，體驗當 Client 的感覺
閱讀 API 文件：現在你知道文件在教你如何當一個好的 Client

記住，每個成功的網路服務都建立在 Client-Server 模式上。從簡單的網頁瀏覽到複雜的 AI 應用，都離不開這個基本架構。

下一步

在下一篇文章中，我們將深入探討如何閱讀 API 文件，以及如何在實際專案中選擇合適的 API 服務。記住 Hammer Hub 的核心理念：解決問題的工具不只一種，選擇最適合的才是關鍵！

希望這篇文章能幫助你理解網路世界的基本運作方式。掌握了 Client-Server 的概念，你就掌握了開啟無限可能的鑰匙！