---
tags: JS 直播班 - 2021 春季班
---
# 第八堂：API 開發流程
* [報到](https://rpg.hexschool.com/training/17/calendar) Code：`klFuAn7Gy0yQ`
* 每日助教提問時，請務必附上 codepen，方便修改。GitHub Pages 比較難改 Code
* 公布加碼項目，請學員提醒洧杰老師

## 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：我要用 [BMI kaka API](https://raw.githubusercontent.com/hexschool/js-traninging-week6API/main/data.json)，取得所有人的 BMI 練功資訊
* JSON：我要用 [MOTC API](https://ptx.transportdata.tw/MOTC?t=Tourism&v=2#!/Tourism/TourismApi_ScenicSpot_0) 服務，取得景點資料
* JSON：我要**申請** [NEWS API](https://newsapi.org/)，獲得相關新聞資訊
* 介面服務：我要**申請** [Google Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key) 服務，取得地圖資訊，[定價](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. 可以在瀏覽器端讀取使用，不需申請帳號：[MOTC API](https://ptx.transportdata.tw/MOTC?t=Tourism&v=2#!/Tourism/TourismApi_ScenicSpot_0)
2. 可以在瀏覽器端讀取使用，需要申請帳號獲得金鑰： [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](http://210.69.170.105/popendata/APP_Prog/cht/overview_cht.aspx)、[六角最終關卡管理者端 API](https://codepen.io/hexschool/pen/yLgaBWV?editors=1010)

## API 複習
* [BMI kaka API](https://raw.githubusercontent.com/hexschool/js-traninging-week6API/main/data.json)、[高雄市充電站](https://data.kcg.gov.tw/dataset/electric-moto-station、高雄旅遊)
* [台南旅遊人數](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 資訊？([MOTC 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://hexschoollivejs.herokuapp.com/)
* [API 線上測試文件](https://hexschoollivejs.herokuapp.com/api-docs/)
* [最終關卡 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://hexschoollivejs.herokuapp.com/api-docs/#/))
> 前台一隻 app.js，後台為 admin.js，前後台拆開
### 步驟一：初始化，取得產品與購物車列表

* [取得產品列表(Get)：/api/livejs/v1/customer/{api_path}/products](https://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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://hexschoollivejs.herokuapp.com/api-docs/#/%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)