API 是 Application Programming Interface 的縮寫，API中文是「應用程式介面」。這篇帶你認識 Web API 和 HTTP 的關係，從客戶端和伺服器端來瞭解網路 API 的角色。以及在使用 Web API 交換資料時，常見的資料交換格式 JSON 。
什麼是API
以下是維基百科對 API 的定義：在電腦程式設計裡，應用程式介面 (API) 是用於打造應用程式軟體的一組副程式定義、協定與工具。一般而言，API 是指各種軟體組件之間一套明確定義的溝通方法。好的 API 提供模塊，並且由工程師將它們組合在一起，如此一來讓寫程式變得更簡單。
兩個主體溝通的交接點——介面
在認識 API 以前，讓我們來認識介面 (Interface)。
「介面」是兩個主體溝通的交接點：
「人」作為一個主體，如果人要去使用機械、物品或是應用軟體，人無法直接和這些東西進行互動，因此需要有一個「介面」，來讓兩個主體之間可以溝通。
例如，如果今天「人」想要請收音機播放自己想聽的電台節目，可以透過收音機上的調頻按鈕來設定頻道，讓收音機播送電台節目；或者，如果今天「人」想要請咖啡機泡咖啡，人可以透過咖啡機的控制面板來啟動機器的泡咖啡程序。
在上述例子裡，收音機的調頻按鈕和咖啡機的控制面板即為人機互動的「介面」。
如果今天人要和應用軟體互動，例如 Google Maps，Google Maps 系統裡儲存著大量的地理資訊，可以供人查詢。而人需要在網頁上的輸入框輸入地址，系統才能得知人想要查詢的地址，因而進入資料庫搜尋，並將結果回傳到網頁上讓人閱讀。
在這個例子中，Google Maps 的前端網頁扮演了介面的角色。
API 開發、測試、除錯一次到位！使用 MSW 快速上手 Mock API
API —— 應用程式介面
API 的使用者：工程師
需要注意的是，API 的使用者是正在開發軟體應用程式的工程師。
舉例來說，今天有一個工程師在開發一個餐廳網頁，他希望使用者在查看餐廳資訊時，也能看見在地圖上看見餐廳的位置，因此，他想在餐廳網頁裡加入 Google Maps 服務，這時候，他就可以使用 Google 公司的開放 Google Maps API 來完成這項功能。
在這個例子裡，Google Maps API 讓開發者能和 Google Maps 系統溝通，取得 Google Maps 的資料。在下個單元，我們會再回到這個例子，看看更具體的使用流程。
使用 API 的好處
在 OpenSource 的時代，公家機關或大型公司往往會將手上的資料庫開放成 API，讓其他應用程式能夠使用這些資料，例如上述的 Google Maps API。開發產品的人有機會利用這些資料，創造更豐富的服務內容，例如許多外送或交通服務使用到了 Google Maps 的資料、購物車系統會串接銀行的資料、新聞服務可以串接氣象局的資料來即時提供天氣資料。
從軟體開發的角度來看，近年來由於軟體開發日益複雜，將複雜的系統劃分成多個組成元件成為趨勢，工程師可能會分頭開發，再通過 API 的介面讓元件之間可以溝通，組合出完整的功能。
我們常使用的 GitHub 也是一種 API，如果沒有 GitHub，開發者就會需要自行架設遠端伺服器，才能進行多人協作。
在移動設備當道的時代趨勢中，API 也日益重要。一個軟體服務可能會在多種設備上被人使用，例如手機、瀏覽器、穿戴式設備等，這些裝置必須要和同一個後端資料庫互動，才可能呈現出一致的內容。舉例來說，如果你透過電腦購買了商品，你應該要能在手機上查看到這筆交易的結果。
為了實現上述功能，你會設計一個 API 介面，讓各個裝置的開發團隊共用同一個介面去使用資料庫，因此讓每個裝置都會呈現出最新的資料內容。
Web API 與 HTTP
在 Web Application 的開發情境下的 API 被稱為 Web API，在 Web API 作用時，客戶端和伺服器端會透過 HTTP 通訊協定來進行請求與回應。
使用 Web API 的一方是客戶端，可能是瀏覽器、手機或者穿戴式設備等等，客戶端會向伺服器端發出請求，要求執行某個 CRUD 動作。
伺服器端會依照客戶端的請求內容，經過內部的處理程序後，將結果回應給客戶端。
你有可能扮演客戶端的一方，也有可能是伺服器端。
Web API 與你
客戶端：串接他人開發的 Web API
作為開發者，你會常常需要使用第三方開發的 Web API：
這時候，做為客戶端，你會向 Web API 伺服器發送請求。
舉個例子，假設你現在是個開發餐廳網頁的工程師，你需要在餐廳網頁上放入 Google Maps 地圖資料，你會經歷以下步驟：
- 登入 Google Map API 的官方網站，找到你要使用的 API。
- 閲讀 Google Map API 的文件，了解如何使用 Google Maps API。
- 註冊 Google Maps API 帳號，並且取得金鑰 (Key) 通過驗證。
- 取得金鑰 (Key) 後，就可以將 Google Maps API 提供的 API 放進自己的專案，API 的呈現會是一組程式碼，你需要自行改寫其中的 Key 和地址。
- 完成程式碼改寫之後，就可以在網頁中讀取 Google Maps 的地圖了。
餐廳網頁作為一個客戶端，可以透過 Google Maps 提供的 Web API，從 Google Maps 的資料庫取得自家餐廳所在位置的地圖，傳遞到網頁裡展示。
伺服器端：開發 Web API 給他人使用
你也有可能做為伺服器端，將你擁有的資料庫開放給第三方使用：
延續著 Google Maps API 的例子，這次我們想像自己是 Google Maps 的開發團隊，我們決定將手上龐大的地圖資料 OpenSource，意即我們將開放 API 供他人使用，步驟可能會是這樣：
- 撰寫一個明確的 API 文件，清楚定義 API 的使用方式及格式等等。
- 按照文件開發一個 Web API，也就是在 Google Maps 系統上開發可供外部呼叫的方法 (method)，用這個方式做為使用介面。
以上是 Web API 的初步說明，為了建立實際的體會，接下來教案會帶你實際去使用他人的 Web API，並為自己的專案開發 Web API。
HTTP 通訊協定
HTTP (HyperText Transfer Protocol) 是通訊協定 (Transfer Protocol) 的一種，通訊協定制定了規則和標準，讓設備之間不但能認出彼此，也能夠根據不同情境選擇溝通的方式，而 HTTP 是專門用於瀏覽器與伺服器之間的通訊協定。
URL + Parameter
你需要先知道正確的 HTTP Verb 和 URL，才能使用正確的動詞對 URL 發出請求。
Request Format
根據 HTTP 規範，伺服器端和客戶端進行請求與回應時，會使用定義明確的請求格式 (request format) 和回應格式 (response format)。
Request format 指的是，客戶端需要使用特定的 HTTP 動詞，對 URL 發出請求。Rails 採用的 RESTful 風格就是一種 request format。
Response Format
Response format 是指伺服器端回應時採用的資料格式，可能會是：XML、JSON、Protocol Buffers、Thrift、YAML 等等。
JSON 是最常用的回應格式之一，各種程式語言都可以產生或解析 JSON 字串，以下是一個 JSON 的例子：
認識JSON
資料格式是 Web API 的要素之一，API 的設計者可以自行決定資料回傳的格式，而這個格式稱之為 —— Response Format。
HTTP 是 Server 及 Cilent 資料傳遞時所使用的溝通媒介，而 HTTP 使用 HTML 作為最初網路伺服器與電腦瀏覽器間傳遞資料的格式，但如今使用者可以在電腦、手機，甚至是穿戴式裝置上使用網路，不同的裝置也讓處理資料的方式更多元，所以 HTML 不再是唯一用來傳遞資料的格式。
在使用 Web API 交換資料時，目前最常見的回應格式有二：
- XML：Extensible Markup Language，是一種標記式 (markup) 語言，使用 < > 定義標記，標記的頭尾之間夾帶著內容，可以想像成是 HTML 標籤語法的延伸。
- JSON： JavaScript Object Notation 的縮寫，它參考了 JavaScript 中物件結構的表示方式。
與 XML 相較之下，JSON較為輕量、易於閱讀，幾乎所有網頁開發相關的語言都有解析 JSON 資料的函式庫，故本課程將使用 JSON 作為 Web API 資料交換的主要格式。
JSON 看起來很像 JavaScript 的 object，但其實是不同的資料格式，使用的時候需要經過解析，下文介紹 JSON 的使用方法。
JSON 的語法建立在 JavaScript 對於 Array 和 Object 的表示方式，同樣地，JSON 的資料結構中通常也會運用 array 和 object 的嵌套關係，例如：
- 外層是 array，裡頭包含其他 object
- 外層是 object，裡頭還有其他 object
以上兩種模型可以被自由地混合使用。除了 Array 和 Object，JSON 還可以處理字串 (String)、數字、布林值 (Booleans) 以及空值 (null)。
你可以運用 JavaScript 來撰寫 JSON。例如：
{
"name": "John",
"age": 29,
"employed": false,
"car": null,
"friends":
[
{ "name":"Mary", "status":"close friends" },
{ "name":"Robert", "status":"close friends" },
{ "name":"Linda", "status":"acquaintance" }
]
}
學會用AJAX串接第三方API
在ALPHA Camp的 學期2-2：軟體開發實務入門，我們會以實作的方式，要求學生綜合運用以下能力，做出有意義的網頁
- 處理 Array x Object 來創造曲目清單的 DOM 元素
- 設計事件驅動流程，在適當時機發送 Ajax 請求取得 API 資料
- 取得 API response 之後，觀察 Array x Object 的資料結構，選出需要的資料來修改 DOM 元素
教案用的例子是Adele的歌詞本，成功串接後做出來的成品會像是下面這個圖示
如果你也想要學會串接第三方API，可以先試讀學期2-2軟體開發實務入門
ALPHA Camp
