實戰測試工具：Postman 深入解析

上一章我們用瀏覽器打開了一支 GitHub 的 API，順利拿到了 JSON 資料。 你可能會想：「既然瀏覽器就能看 API，為什麼工程師還要特別安裝一套叫做 Postman 的軟體？」

這就像是問：「既然微波爐就能加熱食物，為什麼專業廚師還需要頂級烤箱？」 當你只需要單純的「拿資料 (GET)」時，瀏覽器確實堪用。但真實的商業世界裡，API 的操作遠比你想的複雜：

  • 如果你需要「送出」一張圖片給伺服器呢？
  • 如果這支 API 需要你帶上「身分證 (Token)」才能看呢？
  • 如果你需要一口氣測試 100 支不同的 API 呢？

這就是業界最鼎鼎大名的 API 測試工具 Postman 登場的時刻了。在寫程式碼之前，我們必須先用 Postman 確認 API 是活著的，這能幫你省下無數除錯的時間。

🚀 發送你的第一個 HTTP Request

去下載並安裝免費的 Postman 軟體。打開後，我們來試著串接一個公開免費的笑話 API。 這支 API 不需要任何權限，非常適合新手練習。

  1. 在 Postman 的畫面上點擊 New -> HTTP Request。
  2. 看到一個可以輸入網址的長條框。在左邊的下拉選單確認是 GET (意思是「給我資料」)。
  3. 在網址框輸入這串網址：https://official-joke-api.appspot.com/random_joke
  4. 用力按下右邊藍色的 Send (發送) 按鈕！

在下方的 Body 視窗中，你會立刻看到伺服器傳回來熱騰騰的 JSON 回應：

{
    "type": "general",
    "setup": "Why don't scientists trust atoms?",
    "punchline": "Because they make up everything!",
    "id": 394
}

恭喜你！你已經成功用專業工具呼叫了你人生中的第一支 API，並且拿到了一個冷笑話。

🔍 剖析 Postman 的三大核心武器：Params, Headers, Body

在 Postman 網址列的下方，你會看到一排頁籤。這是前端工程師每天都會用到的三大武器，你必須搞懂它們的差異：

1. Params (參數)

這是加在網址後面的「過濾條件」。 例如你今天去蝦皮買鞋子，你搜尋了 Nike，網址會變成 https://shopee.tw/search?keyword=nike。 那個 ?keyword=nike 就是 Params。在 Postman 裡面，你可以在表格中填入 Key (keyword) 與 Value (nike)，它會自動幫你拼到網址後面。

2. Headers (標頭)

這是一張貼在信封外面的「隱形標籤」，用來傳遞一些不希望直接顯示在網址上的中繼資料 (Metadata)。 最常見的用途就是 身分驗證。 如果你要打一支「查詢我的銀行餘額」的 API，總不可能把帳號密碼寫在網址上吧？這時候我們就會在 Headers 裡面加上一行 Authorization: Bearer <你的超長亂碼金鑰>。這就像是你在進高檔俱樂部時，偷偷塞給保鑣的 VIP 卡。

3. Body (主體)

當你要「新增」或「修改」資料時，你會用到 POST 或 PUT 請求。 例如你在 Facebook 發布了一篇包含 1000 字和 3 張圖片的貼文。這麼龐大的資料塞不進網址裡，所以會全部打包放在 Body 裡面送給伺服器。 在 Postman 中，我們通常會選擇 Body -> raw -> 右邊下拉選 JSON，然後在框框裡自己寫一段 JSON 來模擬送出資料。

🤖 讓 AI 幫你寫出完美的 Fetch 程式碼

我們已經在 Postman 確定這家餐廳有開門，也確定它賣的東西長什麼樣子了。接下來，我們要把這個「點餐動作」，寫進我們的網站程式碼裡，讓網站上的按鈕也能自動發送這個請求。

在前端網頁開發中，最常拿來呼叫 API 的指令叫做 fetch。 過去，工程師必須手寫一大堆複雜的語法，處理非同步 (async/await)、用 try/catch 捕捉錯誤，還要管理 React 的 useState 與 useEffect。

但現在有了 Vibe Coding，你只要把在 Postman 看到的 JSON 結果丟給 Cursor，並下達正確的 Vibe Prompt，一切都會在幾秒內搞定。

🔥【請複製以下實戰 Prompt】 我正在開發一個 React (Next.js) 的 Client Component。 請幫我寫一個「每日笑話」的組件，包含以下功能：

  1. 畫面上有一個「按我聽笑話」的按鈕，點擊後會觸發 fetchJoke 函數。
  2. fetchJoke 函數必須呼叫這個 API：https://official-joke-api.appspot.com/random_joke
  3. 從 API 回傳的資料結構如下：{"setup": "問題", "punchline": "答案"}。
  4. 請將抓到的 setup 與 punchline 存在 useState 中，並優雅地顯示在畫面上 (請用 Tailwind CSS 加上簡單的卡片陰影設計)。
  5. 在抓取資料的過程中 (等待 API 回應時)，按鈕必須變成 disabled，並且文字要顯示「載入中...」的動畫。
  6. 如果 API 掛掉了 (例如網路斷線)，請用 try/catch 捕捉，並在畫面上顯示紅色的錯誤提示。

當 Cursor 收到這個指令後，它不但會幫你把串接 API 的 fetch 寫得毫無破綻，甚至連 UX (使用者體驗) 最注重的「載入狀態」與「錯誤處理」都一併幫你做好了！

這就是 Vibe Coding 開發全端網站的核心秘訣：先用 Postman 確認 API 的 JSON 結構，然後把它當作說明書貼給 AI，讓 AI 幫你寫出完美的串接邏輯！

💼 [商業實戰案例] 從免費 API 到收費服務

許多剛開始接案的自由職業者，會利用公開的免費 API 來打造高價值的專案。 例如：台灣政府有一個「天氣觀測站」的免費 API。 你可以接下一個民宿業者的案子：「幫我們在官網首頁加上即時天氣與降雨機率，讓客人知道明天適不適合烤肉。」

傳統工程師可能覺得這個功能很簡單，只值 1000 元。 但如果你運用上面學到的技巧，用 Cursor 十分鐘幫他把這個精美的「天氣模組」寫好，你可以大膽報價 5,000 元。 因為你賣的不是「打 API 的語法」，而是「幫助民宿提高旅客滿意度與訂房率的商業解決方案」。

這就是技術轉化為現金的魅力。下一章，我們將帶你進入 RESTful API 的設計世界。