---
# System prepended metadata

title: 第八堂：API 開發流程
tags: [JS 直播班 - 2022 秋季班]

---

---
tags: JS 直播班 - 2022 秋季班
---

# 第八堂：API 開發流程

* 任務突破 2,000 份！！
* 公布加碼獎品項目與影音，請學員提醒洧杰老師

### 時間軸

1. 11/25（五）：課程結束
2. 12/9（五）：**線上助教服務截止，截止繳交主線任務作業**
3. 12/18（日）：專題成果發表會
4. 12/23(五)：履歷提交截止日
5. 12/28(三)：廠商交流時間

**10 個任務連結，每通過一個任務增加 10%，共 100 %**

- 報到任務
- 第一週任務
- 第二週任務
- 第三週任務
- 第四週任務
- 第五週任務
- 第六週任務
- 第七週任務
- 第九週任務
- JS 直播班心得牆

## API 介紹
* [API Wiki 介紹](https://zh.wikipedia.org/wiki/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%8E%A5%E5%8F%A3)
* **發出網路請求 web API ，獲得你要的資訊**，例：
    * JSON：我要用  [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)、[來源](https://github.com/hexschool/2021-ui-frontend-job)，取得所有人的 薪資 練功資訊
    * JSON：我要用 [TDX API](https://tdx.transportdata.tw/data-service/basic) 服務，取得景點資料
    * JSON：我要**申請** [NEWS API](https://newsapi.org/)，獲得相關新聞資訊
    * 介面服務：我要**申請** [Google Map](https://developers.google.com/maps/documentation/javascript/get-api-key?authuser=2) 服務，取得地圖資訊，[定價](https://cloud.google.com/maps-platform/pricing?hl=zh-tw)、[限制方式](https://mile.cloud/zh/resources/blog/195/Google%20Maps%20Platform%20%E7%9A%84%E6%9C%80%E4%BD%B3%E5%81%9A%E6%B3%95%EF%BC%9A%E9%99%90%E5%88%B6%20API%20%E9%87%91%E9%91%B0%20)
    * 前後端介接：我要介接後端 API，開發前端介面功能

## 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.瀏覽器端讀取關鍵 header 參數：Access-Control-Allow-Origin: *

## 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 header，例如：[故宮 OPEN DATA API](https://openapiweb.npm.gov.tw/APP_Prog/cht/overview_cht.aspx)、六角最終關卡管理者端 API

## API 複習
* [高雄市輕軌](https://data.kcg.gov.tw/dataset/lightrail-trafficvolume/resource/30dfc2cf-17b5-4a40-8bb7-c511ea166bd3)、[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 資料都會有 ID 資訊？([TDX API](https://ptx.transportdata.tw/MOTC?t=Tourism&v=2#!/Tourism/TourismApi_ScenicSpot_0) )
* 避免資料撞名，以身份證為例子
* 最終關卡有三種 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 介紹

* [API 前台規則流程圖](https://whimsical.com/Eg1f7MCzy9UcBJjkpq8TLP)


## axios 網路請求

* [MDN HTTP 請求方法](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)
* 同個網址可以擁有多個方法請求

### axios 請求規則
1. axios.request(config)
1. axios.get(url[, config])
1. axios.delete(url[, config])
1. axios.head(url[, config])
1. axios.options(url[, config])
1. axios.post(url[, data[, config]])
1. axios.put(url[, data[, config]])
1. axios.patch(url[, data[, config]])

> [request config 規則](https://github.com/axios/axios#request-config)




## 最終關卡任務練習步驟 ([API 網址](https://hexschool.github.io/hexschoolliveswagger/))
> 前台一隻 app.js，後台為 admin.js，前後台拆開
### 步驟一：初始化，取得產品與購物車列表

* [取得產品列表(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. 在此連結簽到自己有練習所有 API 操作，並附上兩張截圖
    a. 有[註冊帳號](https://livejs-api.hexschool.io/)，並申請個人的網址路徑
    b. 有嘗試操作 [swagger 測試文件](https://hexschool.github.io/hexschoolliveswagger/)，並 fork [codepen 範例程式碼](https://codepen.io/hexschool/pen/JjERgYq?editors=0010)，新增一筆訂單，在後台上有看到一筆訂單資料
    
![](https://i.imgur.com/khrnae2.png)
![](https://i.imgur.com/xacvijv.png)
