Loading...

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 —— 應用程式介面

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,開發者就會需要自行架設遠端伺服器,才能進行多人協作。

延伸閱讀:Git與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。

學習軟體開發實務,用AJAX串接第三方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 的嵌套關係,例如:

  1. 外層是 array,裡頭包含其他 object
  2. 外層是 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軟體開發實務入門

三分鐘小測驗,了解你該從哪開始自學全端開發

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者

學期三|軟體工程師養成

養成業界接軌的實戰能力

前端/全端工程師專修路徑,完成技能與求職準備,成為業界即戰力