# 第八堂：API 開發流程

## 開課提醒
1. 錄影
2.
重要時間提醒
12/1（五）：課程結束
12/10（日）：助教批改截止，截止繳交主線任務作業
12/17（日）：專題成果發表會
3. 中場休息公布完整獎品項目

**10 個任務連結，每通過一個任務增加 10%，共 100 %**
- 報到任務
- 第一週任務
- 第二週任務
- 第三週任務
- 第四週任務
- 第五週任務
- 第六週任務
- 第七週任務
- 第九週任務
- JS 直播班心得牆

## 今日上課知識點
1. API
2. 最終關卡任務
---

## [API](https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3) 介紹
Application Programming Interface 應用程式介面
透過介面來發網路請求，與伺服器交換資料

**API 文件**：串接API的使用說明書
* [2021 年前端/UI 從業人員現況問卷調查 API](https://github.com/hexschool/2021-ui-frontend-job)
* [TDX API](https://tdx.transportdata.tw/data-service/basic)
* [NEWS API](https://newsapi.org/)
* [Google Map API](https://developers.google.com/maps/documentation/javascript/get-api-key?authuser=2)
* [最終任務 API](https://hexschool.github.io/hexschoolliveswagger/)

**API KEY 金鑰 / Token 令牌**
某些 API 會需要經過審核才可以串接，因此 API KEY / Token 的設計就是用來通過的鑰匙，實務上通常用於識別和授權使用者權限

送出種類
1. 放在網址上：例如：[Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)、[NEWS API](https://newsapi.org/)
2. 放在 request headers 裡面，例如：[故宮 OPEN DATA API](https://openapiweb.npm.gov.tw/APP_Prog/cht/overview_cht.aspx)、六角最終關卡管理者端 API

**API 四種種類**
1. 可以在瀏覽器端(JS)讀取使用，不需申請帳號：[2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
2. 可以在瀏覽器端(JS)讀取使用，需要申請帳號獲得金鑰： [Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)
3. 只能在**後端伺服器**讀取，不需申請帳號： [台南旅遊人數](https://data.tainan.gov.tw/dataset/tourists-statis)
4. 只能在**後端伺服器**讀取，需要申請帳號獲得金鑰： [NEWS API](https://newsapi.org/)

> 1.用 [text-cors](https://www.test-cors.org/) 觀察是否能介接
> 2. response headers 裡面的屬性 Access-Control-Allow-Origin: *

**API 複習**
* [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
* [台南旅遊人數](https://data.tainan.gov.tw/dataset/tourists-statis)
* [故宮 OPEN DATA API](http://210.69.170.105/popendata/APP_Prog/cht/overview_cht.aspx)
* [旅館訂房網 API](https://challenge.thef2e.com/news/17)
* [最終任務 API](https://hexschool.github.io/hexschoolliveswagger/) 是屬於哪一種？

**為什麼有些 API 資料有 ID 資訊？**
* 避免資料撞名，以身份證為例子
* 最終關卡有三種 ID
* 產品 ID
* 購物車 ID
* 訂單 ID

## 最終關卡 API 例子
* [API 教學文件](https://www.notion.so/API-8b5b74eb052b451faf28013d76811fac#7598a1040d4f4c4aab5dec30f621d2b8)
* [API 申請平台](https://livejs-api.hexschool.io/)
* [API 線上測試文件](https://hexschool.github.io/hexschoolliveswagger/)
* [最終關卡 XD 設計稿](https://xd.adobe.com/view/a48b8617-4588-4817-9062-b62130dce916-f1d8/)
* [codepen 範例程式碼](https://codepen.io/hexschool/pen/JjERgYq?editors=0010)
* [API 前台產生訂單的流程圖](https://whimsical.com/Eg1f7MCzy9UcBJjkpq8TLP)

1. 註冊平台帳號
2. 登入平台帳號
3. 申請 api path (要全小寫)
4. 試用 api 文件
5. 沒問題後開始串接 api

**步驟一：初始化，取得產品與購物車列表**

* [取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products](https://hexschool.github.io/hexschoolliveswagger/#/%E7%94%A2%E5%93%81%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__products)
* [取得購物車列表(Get)：：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/get_api_livejs_v1_customer__api_path__carts)

//取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products
{
  "status": true,
  "products": [
    {
      "category": "產品分類 (String)",
      "image": "產品圖片 (String)",
      "id": "產品ID  (String)",
      "title": "產品名稱  (String)",
      "origin_price": "產品原始價錢 (Number)",
      "price": "產品銷售價錢 (Number)"
    }
  ]
}

>新帳號預設購物車會有一筆資料

**步驟二：新增購物車品項，並再次初始化購物車列表**
* [加入購物車(POST)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__carts)

**步驟三：修改購物車狀態(刪除全部、刪除單筆)，並再次初始化購物車列表**
* [清除購物車內全部產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts)
* [刪除購物車內特定產品(DELETE)：/api/livejs/v1/customer/{api_path}/carts/{id}](https://hexschool.github.io/hexschoolliveswagger/#/%E8%B3%BC%E7%89%A9%E8%BB%8A%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/delete_api_livejs_v1_customer__api_path__carts__id_)

**步驟四：送出購買訂單，並再次初始化購物車列表**
* [送出購買訂單(POST)：/api/livejs/v1/customer/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E5%AE%A2%E6%88%B6)/post_api_livejs_v1_customer__api_path__orders)

**步驟五：觀看後台訂單**
* [取得訂單列表(GET)：/api/livejs/v1/admin/{api_path}/orders](https://hexschool.github.io/hexschoolliveswagger/#/%E8%A8%82%E5%96%AE%E7%9B%B8%E9%97%9C(%E7%AE%A1%E7%90%86%E8%80%85)/get_api_livejs_v1_admin__api_path__orders)
* [Codepen 範例](https://codepen.io/hexschool/pen/yLgaBWV?editors=1010)
---

## 本週任務
1. 小組任務
2. 週末任務

在此連結簽到自己有練習所有 API 操作，並附上兩張截圖
a. 有[註冊帳號](https://livejs-api.hexschool.io/)，並申請個人的網址路徑
b. 有嘗試操作 [swagger 測試文件](https://hexschool.github.io/hexschoolliveswagger/)，並 fork [codepen 範例程式碼](https://codepen.io/hexschool/pen/JjERgYq?editors=0010)，新增一筆訂單，在後台上有看到一筆訂單資料