# API 可以怎麼玩？從串接到應用該注意的事
###### tags: `大神來六角`
---
## 時間&主講者
- 影片:　https://www.youtube.com/watch?v=hJPlFWYsfJA
- 時間: 20211118
- 主講者: 張維元
- tags: #The F2E 3rd
---
## 01 網頁開發的前世今生
### 角色
* Client: 使用者/客戶端
* Server: 伺服器/伺服端
### 過程
1. User透過Browser來造訪網址 => 發送Requst到Web Server
2. Web Server收到Requst後，產生對應的網頁
3. Web Server再把輸出的網頁當成Response回傳給Browser
4. Browser收到Response後，把收到的網頁轉換成畫面給使用者
* 網頁輸出順序
1. HTML
2. CSS 樣式
3. JavaScrpit
### 前/後端
- 前端(Front-End): 在使用者(Client)下執行
- 後端(Back-End): 在伺服器下執行
### 網頁架構三元素
- 結構
- 樣式(表現)
- 運作
### 網頁的型式
- 早期-純靜態
* 組成: 網頁
* 瀏覽器會解析網頁內容
* 不同的瀏覽器/版本，則會有不同的實做
- 現在-動態
* 組成: 網頁+動態網頁程式+資料庫
- MVC架構
---
## 02 關注點分離 => 職責分離

---
## 03 API串接&應用時該注意的事
### API 介面
- 依"需求"定義
* 所需功能: 回傳指定的資料
* 人的直覺: 能較快了解此API的功能
- HTTP RESTFul
* 傳送方式
| 意思 | HTTP |
|:--------------:|:------:|
| C(建立,Create) | POST |
| R(讀取,Read) | GET |
| U(更新,Update) | PUT |
| D(刪除,Delete) | DELETE |
* 適合對像: 寫API的人
- GraphQL
* 把資料的需求交由使用者決定
* 適合對像: 使用API的人
---
## 04 從前端到後端，動手打造更好的API
### 交換機制
- HTTP規範
* 請求(Request)
* 回應(Response)
- 缺點: 回傳的資料不一定能符合需求
1. 格式
2. 狀態
### 改進方式

---
## 今晚講義
<https://www.dropbox.com/s/gv70jr116j7upit/thef2e.pdf?dl=0>