鼠年全馬鐵人挑戰 WEEK 11：API 測試工具 - Insomnia

w3hexschool insomnia

Ron Hsieh 2020-04-26 17:53:30 ‧ 7430 瀏覽

Photo by Greg Schier on Twitter

在這篇文章還沒開始之前，小弟先附上 Insomnia 官方網站的傳送門。
有興趣或是覺得小弟寫得不清楚的，都可以再到官方網站來看看～
( ～'ω')～ <<< Insomnia 官方網站 >>> ～('ω'～ )

前言

Insomnia 在免費使用的情況下所提供的功能也是應有盡有。

清楚劃分的工作區，讓你身兼多職無煩惱。
簡單的匯入與匯出，讓你分享資訊不卡卡。
快速切換環境變數，讓你快速切換超省事。
多型別的 http request，讓你一次滿足多請求。

(為什麼感覺在打廣告一樣(๑•́ ₃ •̀๑)～小弟沒有接業配啊(|||ﾟдﾟ))

上述的內容，在這週的文章小弟將一一的為大哥大姐們做介紹。

安裝 Insomnia

剛開始當然是要先安裝啦～
Insomnia 適用於 Mac, Windows 和 Linux 作業系統。
廢話不多說，趕快到官方網站下載處下載吧！
官方網站下載處: Download Insomnia

而在 Mac 與 Linux 的作業系統中，也支援透過指令來進行安裝呦。

Mac: brew cask install insomnia
Linux: sudo snap install insomnia

使用 Insomnia

開啟 Insomnia

確認 Insomnia 安裝成功後，就可以開啟 Insomnia。
剛開啟 Insomnia 時會長下面這個樣子。
那就讓我們開始進行接下來一連串的簡單教學吧～
創建一個 HTTP Request
1. 點擊左上角搜尋欄位旁邊的加號的 icon。
  
  可以選擇新增一個 http request 或是新增一個資料夾 (Folder)。
2. 點選 + New Request 或是使用快捷鍵來新增 http request。
  
  點選 new request 將會跳出一個輸入框。
  該輸入框可以為該 http request 命名，以及選擇 http 的請求方式。
  
  Get, Post, Put, Patch, Delete, Options, Head
  
  小弟這邊的範例將使用 "Get request"，並且名為 "全馬鐵人挑戰賽"。
3. 設置 http request 的 URL 並且送出執行。
  
  新增完 http request 後，可以在請求方式旁邊填寫 URL。
  小弟這邊的範例將使用，六角學院大大釋出的馬拉松 API 資料。
  https://raw.githubusercontent.com/hexschool/w3hexschool-API/master/data.json
4. 送出 request 並查看 request 的回傳訊息。
  
  點擊 URL 旁邊的 Send 按鈕，執行 request 請求。
  詳細的訊息會在右邊的視窗中顯示。
  在這個區塊中可以得到的資訊有：
  
  狀態代碼 (200 OK)
  執行時間 (618 ms)
  內容大小 (150.6 KB)
  執行紀錄 (A Minute Ago)
  回傳內容 (Preview, Header, Cookie, Timeline)
5. 篩選回傳回來的訊息。
  
  點擊回傳訊息處最底部的輸入欄位。
  可以篩選出你所需要的資訊。
  最右邊有 ? 的 icon 可以查看更多的操作說明。
  小弟這邊的範例將使用，自己的名字來篩選出文章名稱。
  $..[?(@.name==“Ron”)].blogList[*].title
看完以上內容的大哥大姐們。
恭喜你，已經會使用 Insomnia 了～
接下來的內容將會進一步的介紹其他功能。

靈活運用 Insomnia

工作區 (Workspaces)

當你有許多專案都會使用到 API。
這個時候有效的分類工作區會是一個很好的選擇。
1. 點選左上角工作區的下拉式選單。
  
  點擊 Create Workspaces 來新增一個新的工作區。
  或是點擊 Workspaces Settings 編輯該工作區。
匯入/匯出資料 (Import/Export)

當你整理了一堆 API 想要分享給別人。
或是別人也整理了一堆 API 想要分享給你。
這個時候就可以使用匯入/匯出的功能來達成。
1. 點選左上角工作區的下拉式選單。
  
  點擊 Import/Export 的選項來匯入/匯出資訊。
  因為內容較為單純，就不再贅述了～
2. 嵌入執行按鈕。
  
  一樣在 Import/Export 的頁面中，點擊最右邊的 Create Run Button。
  
  點擊後將會開啟一個視窗，輸入 API 的名字並貼上 Curl。
  
  複製下面的連結，可以嵌入到 HTML 或是 Markdown。
環境變數

在測試的時候經常會遇到一種情況。
就是同一支 API 要打到不同的環境。
但是 API 的內容並沒有差太多，只是 host 不同而已。
環境較常會被分成：開發環境、測試環境、正式環境。
所以為了解決重複創建類似的 http request。
就可以透過 環境變數 的設計方式來達成。
小弟這邊的範例會把 base_url 變數，用來儲存 URL 部分的資訊。
1. 點選左上角搜尋欄位上方的 No Environment 下拉式選單。
  
  選擇最下方的 Manage Enironment 來新增環境變數。
2. 定義環境變數，與變數值。
  
  出現編輯器後，以 json 的方式寫入 變數名(key) 與 變數值 (value)。
  確認輸入完之後，就可以點擊右下角的 Done 結束編輯。
3. 使用自行設定的環境變數。
  
  在使用的欄位打上環境變數的 key 就會跳出對應的選項可以選擇。
  點選所需的環境變數或是按 Enter 鍵來完成選擇。
  自行設定的環境變數，在選擇時通常是紫色帶有 x 的符號。
4. 更進一步的使用環境變數。
  
  在第二步的編輯器中，可以使用左邊欄位的 Sub Environments 選項。
  使用相同的 key 但是不同的 value。
  這樣一來就可以快速切換環境來使用。
連接請求

當你所用的 "A" API 的內容需要使用到 "B" API 的回傳值。
就可以使用連接請求的方式。
直接將 "B" API 的回傳值帶到 "A" API。
以下的內容會使用到上一個小節 "篩選回傳回來的訊息" 的功能。
小弟這邊的範例一樣使用六角學院的 API 撈文章的資訊。
1. 創建一個 Get http request (我將其命名為 "我的文章")。
2. 在 URL 的欄位中輸入 Response 選擇 "Response Body Attribute"。
  
  選擇青色 function 帶有ｆ的符號。
3. 點選反紅的 "Response Body Attribute" function。
  
  在 "Request" 的欄位中，選擇說明時提到的 "B" API。
  也就是 "GET 全馬鐵人挑戰賽"。
  
  接這在 "Filter (JSONPath or XPath)" 的欄位中，輸入搜尋內容。
4. 送出 request 並查看 request 的回傳訊息。
Curl 的使用

Insomnia 提供的功能當中我覺得最方便的一個功能之一。
Curl 是一個利用 URL 的語法在 cmd 運行的文件傳輸工具。
簡單來說就是只要有 cmd 也可以做到 Imsomnia 的事情。
而他的方便之處就在於可以產生出 curl。
也可以使用 curl 產生出 Insomnia 介面的內容。
1. 在左邊欄位的 http request 上點擊右鍵
  
  選擇 Copy as Curl 的選項
  此時你就回得到一串 curl 的指令了
  curl --request GET \ --url https://raw.githubusercontent.com/hexschool/w3hexschool-API/master/data.json
2. 在請求方式旁邊的 URL 貼上 curl。
  
  當你手上有一個 curl 的指令，也可以嘗試看看這個方式。
  如果沒有的話，就拿上面的 curl 來試試吧～
  先新增一個 http request 然後直接把 curl 貼在 URL 的欄位。
  (可以故意把請求方式設定成非 Get 的試試～)
代碼產生器

當 API 使用 Insomnia 完成進行後。
想要把該 API 的內容應用到程式設計中。
就可以透過此功能來快速生成所需的代碼。
1. 在左邊欄位的 http request 上點擊右鍵
  
  選擇 Generate Code 的選項
2. 出現編輯器後就可以選擇程式語言