從使用者的角度來看,什麼是 API ?


Posted by Lauviah0622 on 2021-04-24

本文章擷取自 程式導師實驗計畫第四期的 week4 作業並做改寫

自己覺得這篇比較像是自己對 Interface 的理解,可能有錯誤的地方,歡迎大家給予建議!!

API 這個詞並沒有很複雜,只是這個詞的應用面真的太廣了。就像天龍這個詞有時候可能是形容詞,形容這個人可能觀念上很浮奢,可是有時候又在講名詞(台北某些地區),應用太廣泛(不是引戰阿,例子好難找)。

簡單來說,自己對於 API 的理解就是:你照別人給的規定做事情,別人會執行對應的的操作

在 web API (也就是大部分前端工程師口中所稱的 API),通常是處理 server 端的資料,包含 CRUD: create 建立, read 讀取, Update 更新, Delete 刪除資料,這些處理資料的方式。

API: Appication Programming Interface,應用程式介面,後面的 Interface 我覺得是精髓。

那 Interface 是啥?中文叫做介面。在化工中有一個東西叫做介面活性劑,簡單說就是可以讓油跟水融合在一起的東西。

油跟水本來是兩種沒辦法相容的液體,當你把油跟水倒在一起,他們之前會有明顯的分層,而我們就會叫那層東西叫做介面。而我們如果加入介面活性劑,就可以產生乳化作用,讓油和水混合在一起。

這樣看來,我們會把兩個不同的物體,它們之間的接觸、交互稱作為介面。

不過其實介面活性劑的英文是 surface active agents,應該稱作表面活性劑才對,這裡只是借用中文的概念。

那還有甚麼地方會有介面? 其實講到介面這個詞我們最常想到的應該是手機吧。、

手機上甚麼東西稱作為「介面」?我們最直覺想到的就是平常操作的螢幕,但並不只是這樣。我們常常會說這個界面不太好用,或者是聽到 Android 的用戶說 Iphone 的界面我用不習慣。那這些我們平常講「介面」到底是啥?

人與手機他們之間交互的媒介,也就是我們平常在螢幕上的操作

我們不可能甚麼都不做,甚麼都不表示,手機就知道我們要看影片、要拍照或者是要傳訊息。就算是聽起來很酷的腦機介面,你也有要一個在腦中想的動作。

那我們平常是怎麼操作手機的?很簡單,就是滑手機,不過其實滑手機這件事情我們可以拆解成很多的步驟來看。

1. 告訴你如何操作

手機大部分會用螢幕顯示資訊,來告訴你可以要如何操作。例如手機顯示的使用說明,這是比較淺白的利用文字來呈現;又或者是手機上面的 app 的圖示,雖然沒有告訴你這可以按,但是因為過去內化的經驗,又或者是與現實生活對應的設計,讓你知道說:「這個圖案按了就可以打開我要用的 App」。

想像手機一片黑,你要怎麼知道點哪裡可以撥放 Spotify 的音樂?

在這部分,我們可以看成手機向使用者傳遞資訊,傳遞的內容是「甚麼樣的操作,會得到甚麼樣的結果」,教學是我們比較常想到的。但但好的介面設計會設計的更加直覺或隱晦一點,所以在這邊稱作為「指示」我想會準確一點。

雖然在手機上大部分都是利用螢幕來操作,但也不一定是螢幕(像是 siri),現在大家對於智慧型手機的操作都很熟悉了。而且智慧型手機基於人性化的操作,大部分的教學都會直接帶你操作或者是放在手機裡面。但是有時候當我們摸到新的手機、或者是跳到不同系統時,我們還是會看看說明書,這時候傳遞資訊的媒介就不是手機的螢幕,而是紙本的說明書。

更有時候不以文字或圖形來傳達,當我們拿著手機看到按鈕,我們會很直覺的知道擺在一起的兩個按鈕,上面的就是調整音量變大、另一個按鈕就是變小。白白的螢幕上有著圓角矩形的小方框,我們就知道那可以點擊,如果是紅色,我們就會知道就會是比較危險的操作。這些我們都可以看成是「指示」。

扯遠了,談到很多有點像是 UI/UX 的內容。簡單來說,第一個步驟手機會:

告訴你可以做甚麼?要怎麼做

2. 操作手機

知道了怎麼操作之後,當然就是要操作手機嘛。

使用者要操作手機,可能是利用觸控面板,或者是利用按鈕,有或者很酷的直接使用手勢操作(超想買 Pixel 的)。

手機上面的操作有很多種,像是螢幕的點擊、長按、滑動,或者是按鈕的按壓,甚至是用聲音(siri, google assistant)。追根究柢這些都是一種操作,只是操作的媒介不一樣,但同樣都是操作手機來幫我們完成我們想做的事情。

在這第二個步驟。不論媒介、方式,我們做的都是:

操作我們的目標

3. 得到想要的結果

當你依照手機給的指示做出對應的動作,手機就必須有對應的行動。如果沒有做出對應的行動我們就會稱之為「當機」。然後就會把手機拿來敲一敲

對應的行動講起來很簡單,其實手機的 CPU 已經不知道執行了多少的程式,必須去解析你的操作,可能是手指停留的時間長度,或者是滑動位移的距離、方向。

現在的觸控螢幕有很多不同的操控方式,單一隻手指可以做到空間(位置)還有時間(速度、停留的時間長短)的變化就很多,如果有多隻手指就有更多的組合了。

手機在我們操作背後到底幹了啥不是我們需要理解的事情,那些交給硬體工程師還有 app 工程師去處理。最後一個階段,手機對於我們:

做了我們想要做的事情

簡單的小整理一下

  1. 手機 => 我們:手機我們可以做些甚麼?如何操作
  2. 我們 => 手機:我們對手機執行操作
  3. 手機 => 我們:手機給予我們對應的結果

當我們把「手機」換成「目標」,「我們」變成「使用者」這兩個比較抽象、廣泛的名詞,我們就可以知道所謂的「界面」到底能幹些啥。

  1. 讓目標告訴使用者可以做些甚麼?如何操作
  2. 讓使用者對目標執行操作
  3. 讓目標能給予使用者對應的動作

舉些其他例子,「手機的觸控螢幕」可以說是很複雜的界面,我們來講個簡單的:檯燈的開關。

開關可以說是最為基礎的界面,就連手機的介面都是以開關為基礎設計的。

開關這個的界面也只有「開」還有「關」這兩種狀態,我們可以藉由按下開關來操做,也對應到檯燈就只有「亮燈」和「關燈」兩種狀態(先以最基本的檯燈來看啦,不要調整亮度或者是色溫之類的)。

開關的構造以及我們對於「燈」的認識告訴了我們開關應該如何操作,並會得到什麼樣的結果。而當我們按下開關,也就是操作「開關」這個「界面」,最後亮起燈,給予我們一開始想要做的結果--開燈。

好,剛剛講了那麼多,其實我們還只是在認識介面 Interface 這個概念而已,還沒講到 API 呢。不過當你了解了 Interface 這個概念之後,那我們在看看 API 這個詞。

"Appication Programming" Interface

「應用程式」介面

就像硬體上的介面我們會稱為硬體介面(兩個不同的硬體互相交流的方式,例如 USB 接口是就是隨身碟與電腦之間聯絡的一種硬體介面),那使用者和程式之間的介面我們就會稱為使用者介面(User Interface),人類與機器就稱為人機介面,如果只用腦就可以操作而不使用其他控制方式就稱作腦機介面。

API ,就只是在應用程式上的介面而已,就像這篇長文一開始講的。

你照別人給的規定做事情,別人會執行對應的的操作

那這樣的概念套用在 Appication Programming ,就是兩個不同的程式之間的控制方式,要處理兩程式間的控制當然就是我們工程師啦。那麼 Interface 這個概念在程式上會是甚麼樣的實現方式呢?

1. 讓目標告訴使用者可以做些甚麼?如何操作

我們通常會有一份 Document 可以看有那些東西可以用。

2. 讓使用者對目標執行操作

各種不同的領域有不同的操作方式。如果是軟體工程師可能就要使用 OS 提供的 API,前端就要使用 Web API。像是我們在 Coding 時使用的內建函式,或者是下載的 Package 中提供的 function 也是一種 API,所以我們才會看到有時候一些 Package 的 Docs 裡面會寫到 API 這個詞

這個是 node.js 的 Document,可以看到把他們的 docs 稱作 API Reference Documentation。

3. 讓目標能給予使用者對應的動作

也就是得到我們想要的資料,或者是執行我們要的操作。在 OS 可能是在記憶體中儲存或抹去資料。那在 Web API 可能就是從 Server 操作特定的內容。那如果是 Package 的話最直接的就是使用提供的函式。

結語

當我們站在使用者的角度,也就是從我們要使用某個程式的 API,其實概念也就這樣而已,一句話來說。

照著開發者給的指示,讓我們去執行操作,讓程式做出對應的動作

當我們在講要使用 node.js 的 API,我們基本上就是,照著 node.js 給的指示去寫 code,就能做我們要的操作,裡面的文件就告訴你 fs.readfile(path[, flags[, mode]], callback) 可以讀取檔案然後執行 callback 的操作,但只有 node.js 的環境上。

要連 google map 的 API,就會是引入一段 script ,然後可以用 JS 做對應的操作。提到 restful API,就是那些利用 http method 搭配特定的 url 格式來執行對應操作的一個慣例(或者說方法)。

老闆說要後端開發一套 API,指的就是開發一套操作方法,讓其他人可以透過這套 API,然後來使用公司的服務。

從上面就可以看出,API 這個名詞使用的地方很廣泛,可能是語言,可能是環境,可能是服務。只要有應用程式的開發方與使用方,就會有 API 的存在。

希望這篇可以不要讓 API 這個名詞這麼複雜。Big guy is John


#frontend







Related Posts

[day 02] new & factory: 如何建立一個新物件

[day 02] new & factory: 如何建立一個新物件

有空的話來學一下 Tailwind CSS - Week 4

有空的話來學一下 Tailwind CSS - Week 4

HTML - 基本標籤介紹&SEO

HTML - 基本標籤介紹&SEO


Comments