---
title: Sprint 19 Education
tags: MeLoop
---

# Sprint 19 Education

## API (Application Programming Interface)
### what's API
API也就是應用程式介面，是應用程式之間的橋樑，API就像介面一樣，幫助開發者快速達到目的。

* interface
* input
* scope
* Output

使用API時，不需要了解其中處理運算的演算法案過程，只需要給API所需要的資訊(input)，API便會回傳你想要的結果(output)。

* API != Function

* 不是只有Frontend to Backend，也可以Frontend to Frontend 或 Backend to Backend

* Backend to Backend的應用

* api switch
* Micro service
* API gateway
### 為什麼用API
* Sync(Local/Remote)
* 資料同步
* share (Different Device/Sensor)
* Communication (Different People)

### API type (various type)
* RESTFUL
* GRAPHQL
* COAP
* Router
* DNS
* MQQT

## RESTFUL API
Representational State Transfer( 表現層狀態轉移)
* HTTP
* 過去處理(十分麻煩)
* domain/getUser?_id=1[get]
* domain/getUserByid/1[get]
(太冗長)

* HTTP Methods
對應到資料庫基本操作 CRUD
---CRUD => Create(新增)、Read(讀取)、Update(更新)與Delete(刪除)
* Get ---- 讀取
* Post ---- 新增
* Patch ----部分更新
* Put ----整段更新
* Delete ----刪除
* HTTP Status code
* 2XX ---success
* 3XX --- Redirect（重定向）
* 4XX ---client error
* 5XX ---server error

* naming convention
* resource: 名詞
* 單數-只能一個人使用 ex.auth
* 複數-可能會共享 ex. users
* Action: HTTP Method
* Parameters:
/resource/parameter=>/users/:id
* query
* type
* /resource?type=xxx
* /resource?order=正序
* /resource?type=xxx＆order=正序

* API route
* Resource[users]
* 讀取
domain/users/:id -> domain/users/1[GET]
* 新增
domain/users->[Post]+body

* 更新
domain/users/:id->[Patch]+body
* 刪除
domain/users/:id->[Delete]
* Resource[users/Pictures]
* 讀取
domain/users/:id/pictures
domain/users/:id/pictures/:pid

相較於過去的命名方法來的簡潔很多，可以經由action來決定要使用CRUD的哪一種。
資源位置由唯一的URL表示，統一的 API 接口。

## GraphQL

* Why
* Social Media Background
* ex.Facebook page
* 要call一堆API 而且async(users/posts/notifications等)
* 結果: 久到不行

* API Data Fields -> 如果有不需要的資料就需要多開API / 多做Filter
* 結果: 延長response的時間
* Graph?
* 樹狀結構 -> 可以選擇內容
* pros
* 大幅減少來回 request 的次數
相較之下 RESTful API 就需要多趟來回才能拿足資料且缺乏彈性
* easy
* clean
* 高度自由的實作方式，可以整合 ex.graphQL+RESTFUL API /microservice
* cons
* refactor system
* deep path cause longer time
* not support cache
* sometimes slow
* Schema
* Resource
* Query: GET
* Mutation: POST+DELETE+PATCH
* Subscription: WebSocket(資料同步 listener)
* Library
* Apollo
* server: Nodejs
* client: Vue/React(main)/Angular

## Web Flow

### web1.0
* 軍事目的
* 普及化後成為提供資訊的地方

### web2.0
* yahoo
* 可以互動（搜尋和回饋）
### Static
* html+css+js(ES4-)
* 後來衍生出jQuery(js懶人包)
### MVC
* Model(資料庫)
* view（網頁）
* controller（商業邏輯）用於控制應用程式的流程
* Library
* 問題
互動多後，容易白屏，重新loading( UX 不好)
### MVVM
* Model(資料庫)
* API
* AJAX
-Fetch
-Axios
-GraphQL
* AXAX
-XML(過去)
* view
* viewModel
* view=f(model)
* framework
* 前後端分離
* SPA
SEO robot 基本上會從 HTML 抓取數據，因此前端渲染的頁面無法被抓取資料，SEO差
* SSR
* 為了SEO
* 判斷SEO的基準: [PageSpeed Insight](https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW)
* 每年會改SEO規則，所以需要時常維護
* Pre Render
* HTML Structure

[Allen's note](https://hackmd.io/@qwe661234/SyIbQxeAu)
[Jacky's note](https://hackmd.io/D4yVQSPeSc2zp4gngnIzfQ)
[Jimmy's note](https://hackmd.io/i-QmNhhMTp6JRml9qcfBpg)
[David's note](https://hackmd.io/6qqxWwOdSNmWrixgkQEjVA)
[Willie's note](https://hackmd.io/@Th4jMJaRQqC9Uw8islmWrw/H1RLQglCd)