# 什麼是API ## 目的 讓非程式背景或剛開始接觸程式的人可以理解什麼是API(Application Program Interface)應用程式介面 --- ## 前言 當我 30 歲半路出家開始學程式（2020~2021），已是前後端分離的時代。前後端分離的架構中，**API 是不可或缺的一部分**。 當時為了理解這個神祕單字背後的意義，我搜尋了許多文章（當時還沒有 ChatGPT 等 AI 工具），但閱讀之後還是似懂非懂。只知道設計一串網址，可以用來執行某些功能，這就是 API。 進入職場後，撰寫更多程式碼、閱讀更多文件，對 API 有了更深入的理解。同時，面對非程式背景部門同事的提問，我也發展出了一套自己的解釋方式。 有些概念對程式設計師來說「懂的人自然懂」，但重點是：**如何讓不懂的人也能懂**。 （~~畢竟即使是程式設計師，也常常在看技術文件時覺得「這到底在公X小」。~~） 我本身是第一屆學員，發現後幾屆的學員中強者比例很高，大家可以對內容給予更多回饋與建議。 --- ## 進入主題 > 每次有非程式背景的人問起，我都會將重點放在 API 的 I（Interface，介面），強調它是： > 透過 1.*觸發* 2.*介面* 3.*達成* 4.*目的*。 > 至於背後如何實現功能，並不需要了解。 ### 用一些簡單 *非應用程式* 舉例 1. 開瓦斯爐 伸出你的你的手去旋轉旋鈕，火就出現了 * 介面: 旋鈕 * 觸發方式: "旋轉"旋鈕 * 目的: 點火 * 如何達成: 透過噴出瓦斯並產生火花點燃(機構細節不提...) 2. 開電風扇 伸出手指按開關，實現開關電風扇 * 介面: 開關 * 觸發方式: "按壓" 開關 * 目的: 控制電風扇開關 * 如何達成: 完成電路迴路，驅動馬達運作。 3. 餐廳吃飯 坐在餐廳座位上，向服務生點餐，餐點會送上來。 * 介面: 服務生 * 觸發方式: 對服務生說話 * 目的: 享用餐點 * 如何達成: 廚房完成餐點製作後，由服務生送達（製作細節無需了解）。 --- ### 將上述概念套用到「應用程式」中的 API 1. 註冊帳號 在網頁上填寫表單，按下「註冊」按鈕，完成帳號註冊。 * 介面: https://xxx.xxx.xx/api/register * 觸發方式: 前端發送 HTTP POST * 目的: 註冊會員 * 如何達成: 1. 檢查參數（如漏填欄位、Email 格式是否正確）。 2. 確認是否已有重複 Email。 3. 將密碼進行 Hash。 4. 將資料寫入資料庫。 5. 返回成功訊息。 2. 取得未來天氣預報 你在網頁首頁看到現在到未來7天的天氣預報 * 介面: https://xxx.xxx.xx/api/weather?limit=7 * 觸發方式: 前端 發送 HTTP GET * 目的: 取得7天天氣預報 * 如何達成: 前端需要知道嗎(~~不需要~~) ### 既然有前後端的API，有沒有其他類型的 API > 當你開始接觸文件時，會遇到各式各樣的 API docs，但它們不一定是網址。 > 然而，它們一定是一種「介面」。 1. Axios API（JS 程式設計中常用的發送請求套件） 執行一個 HTTP GET 請求的例子： * 介面: axios.get(url) * 觸發方式: 執行 axios.get() * 目的: 發送 HTTP GET 請求 * 如何達成: 可深入 Axios 的 source code 了解。 2. 服務之間溝通也不一定要透過 HTTP，有其他的方式，這邊就不多提。 --- ## 結論 在整個服務的運作中，功能的實現都透過各種 介面（Interface）。 * 透過網頁取得未來天氣預報 1. 使用 Web User Interface（如表格與按鈕）。 2. 使用 Axios API（axios.get(url)）發送 HTTP 請求。 3. 與 後端 API https://xxx.xxx.xx/api/weather?limit=7 溝通以取得資料。 * 回到開發上 1. 每個專案都有各種 需求（目的）。 2. 後端設計出能達成需求的功能。 3. 設定觸發方式。 4. 設計一個 介面（API），方便開發者使用。 --- 以上內容是我在解釋「什麼是 API」時，對非程式背景或程式新手的說明方式。希望這樣的例子能幫助剛接觸的人更好地理解 API 的概念！ ## 參考資料 * [API 到底是什麼？ 用白話文帶你認識](https://medium.com/codingbar/api-%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E9%BA%BC-%E7%94%A8%E7%99%BD%E8%A9%B1%E6%96%87%E5%B8%B6%E4%BD%A0%E8%AA%8D%E8%AD%98-95f65a9cfc33) * [API是什麼？淺談API概念與運用案例｜天矽科技客製化網頁設計](https://www.tsg.com.tw/blog-detail4-120-1-api.htm) * 使用ChatGPT校稿