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

# 第八堂：API 開發流程
* [報到](https://rpg.hexschool.com/training/24/calendar) Code：`tdHkeIMUdy6V`
* 公布加碼項目，請學員提醒洧杰老師
* [Vue 雙人成團方案](https://chalk-freedom-ec6.notion.site/Vue-f9b6bda7b6a64c1d983a064d1cd5efd6)將於 11/28(日) 停止團報，週六日填寫的，將於週一提供酷朋，下週三截止報名。需登入後點擊右上角的「Comment」
### 70-80% 獎品取得方式：The F2E 直播班

- 12/3(五) 最後一堂課
- 12/5(日) 23:59:59 前有提交到第 6 週主線任務，可提前獲得 80% 獎品，參與全程直播
- 12/6(一) 透過 Email 發送新的直播網址
- 12/19(日) 23:59:59 作業截止日，
- 12/26(日)23:59:59 心得牆、100% 獎狀表單截止日
- 12/31(五) 前陸續發送獎品

**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/api-service/swagger) 服務，取得景點資料
* 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. 可以在瀏覽器端讀取使用，不需申請帳號：[2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)
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

## API 複習
* [高雄市充電站](https://data.kcg.gov.tw/dataset/electric-moto-station、高雄旅遊)、[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. 在此[連結](https://hexschool-share.slack.com/archives/C02B2Q8RF6E/p1637926660126500)簽到自己有練習所有 API 操作，並附上兩張截圖
a. 有[註冊帳號](https://livejs-api.hexschool.io/)，並申請個人的網址路徑
b. 有嘗試操作 [swagger 測試文件](https://hexschool.github.io/hexschoolliveswagger/)，並 fork [codepen 範例程式碼](https://codepen.io/hexschool/pen/JjERgYq?editors=0010)，新增一筆訂單，在後台上有看到一筆訂單資料

## 獎品加碼
### 70-80% 獎品取得方式：The F2E 直播班

- 12/3(五) 最後一堂課
- 12/5(日) 23:59:59 前有提交到第 7 週主線任務，可提前獲得 80% 獎品，參與全程直播
- 12/6(一) 透過 Email 發送新的直播網址
- 12/17(日) 23:59:59 作業截止日，
- 12/24(日)23:59:59 心得牆、100% 獎狀表單截止日
- 12/28(五) 前陸續發送獎品

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

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

## 加碼：直播時間

會以純講課為主，QA 會變少。

1. 12/7(二) 全天：純講解觀光旅遊網、腳踏車旅遊網，後面可 QA
2. 12/21(二) 全天：公車 API、C3.js 圖表，後面可 QA
3. 1/8 (六)全天：洧杰 Live Demo，後面可 QA

## 80% 加碼再送
* 上面三堂直播課，會設計成影音課程，名稱為 **The F2E 前端 JS 攻略包**

教的大綱如下：

### 第一章 觀光旅遊 API 開發 (12/12 釋出)

1. 滿版式 Banner 輪播設計
2. Swiper 輪播效果
3. 下拉選單切換縣市 JS 功能
4. TDX filter API 優化篩選流程
5. 旅遊詳細資訊換頁功能
6. 旅遊資訊搭配 Bootstrap 設計 Modal 彈跳效果
7. 分頁功能設計

### 第二章 自行車道景點導覽功能(12/19 釋出)

1. Leaflet 實用 API 大全
2. 個人座標定位，搭配 Leaflet marker 標記效果
3. 畫線顯示自行車道路線
4. 自行車租借、規劃資料處理
5. 圖文列表+地圖整合資料流規劃

### 第三章 全台公車動態時刻查詢應用服務(12/30 釋出)

1. 公車 API 講解
2. 搭配站位+即時動態之 API 整合
3. JS setTimeout 定期更新網頁內容
4. 整合外部 Google Map 功能進行路線規劃
5. 設計網址參數，外部網頁連結分享功能

### 第四章 前端 / UI 薪資圖表設計(1/9 釋出)

1. 詳解 C3.js 圖表設計 API
2. 陣列篩選方法，整合實用資訊
3. 長條圖設計
4. 折線圖設計
5. 圓餅圖設計

### 第五章 洧杰校長全天 Live Demo (1/14 釋出)
1. 上午場直播錄影
2. 下午場直播錄影
3. 晚上直播錄影

## 下週四開賣的 The F2E 前端 JS 攻略包 售價
- 預購價 1,850，12/16 感謝祭開跑後將恢復原價 1,999

## 給 JS 直播班的提醒
- **拜託別跑去買，你好好上課就直接送！**
- 因是贈品，所以此品項無法參加感謝祭資格。