---
# System prepended metadata

title: Sprint 19 Education
tags: [MeLoop]

---

---
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)