昨天有說明Vue.js的練習與應用，今天會用有限的篇幅來說一下API是什麼。

API是什麼？

API(Application Programming Interface)，wiki的中文是應用程式介面，wiki裡面的定義如下：

「是一種計算介面，它定義多個軟體中介之間的互動，以及可以進行的呼叫（call）或請求（request）的種類，如何進行呼叫或發出請求，應使用的資料格式，應遵循的慣例等。」

翻譯成白話大概就是有一個介面，當我們給他呼叫或請求時，他就會從別的地方給我想要的結果。例如Skyscanner的網站，給出發地、目的地、去程日期、回程日期、人數等資訊，該API就會去每間航空公司的資料庫中尋找符合條件的機票，最終把結果呈現在你面前。也有影片說就像在餐廳點餐(request)，服務生(API)告訴廚師(database)要出什麼餐，然後廚師出餐(response)，服務生(API)再把餐(response)拿給客人。

前端工程師要做到什麼？

簡單的說，前端工程師至少要把有特定功能的API放到網頁中指定的位置，並且透過閱讀API文件讓功能正常運作。然而正常的功能運作往往會牽涉到資料庫部分的知識，還要會需要透過JavaScript串接資料，最終讓整個網頁介面正常顯示。

帥帥前輩的手寫稿字好好看，幫助新人簡單理解API運作模式

在網頁中放入API的運作實例

最常見的API就是Google Map了，可以參考google官方API文件，請點選這裡。

Google Map的API可以在地圖上做標記、標示區域、多點標記、路線等功能，但這些功能需要申請金鑰，部分功能需要收費，相關收費標準可以參考這裡。

超簡單嵌入Google Map

如果使用情境不需要做到太複雜的操作，其實用Google Map本身內建服務即可完成將地圖放入網頁中的目的。

當輸入想納入的地點後，點選紅框的位置

接著再點選分享或嵌入地圖

接著選擇嵌入地圖，可以將地圖縮放到想要的範圍即可，其中地圖尺寸可以調整為小、中、大和自訂大小

範例參考

以下範例為今天簡單嵌入Google Map的範例，請參考：
https://codepen.io/hamagawa76/pen/RwyJQvb

是不是很簡單！過了這三十天後也只是學到前端的基礎而已，後續也要不斷的精進喔！

賽後心得

時間過得很快，三十天一下子就過了。有時候實務上不會太常使用某些功能例如 Vue.js，不過還是花一天的篇幅強迫讓自己複習一下也是很有成就感呢！在整理筆記和做範例的時候同時複習，感覺也是滿充實的。也成功把第一天設定的內容全部寫進這三十天的文章中了。

當初被半強迫參加鐵人賽，很擔心自己懶癌爆發會中斷，還好還是很堅持的完賽啦！感謝Cinna、Mars、虎虎和閃光一起互相傷害共同努力。