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

* [學員心得回饋表單](https://docs.google.com/forms/d/e/1FAIpQLSdo7jJazn_yW3-53KssNfe7lcnUKNvqrDorvpS8hjCDv7fL-g/viewform?usp=sf_link)
* 先講<a href="https://rpg.hexschool.com/training/32/task?type=detail&id=319" target="_top">最終關卡</a>、<a href="https://rpg.hexschool.com/training/32/task?type=detail&id=320" target="_top">心得牆任務</a>
* [Vue 學長姐專屬優惠酷朋](https://chalk-freedom-ec6.notion.site/Vue-8ae1e80f65d0429dbd7c3592089f56d9)、[測驗門檻(7題以上就 ok)](https://forms.gle/Q3z9MqcDFPBPXSg36)

# 第九堂：最終關卡 DOM+API 操控

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

- 報到任務
- 第一週任務
- 第二週任務
- 第三週任務
- 第四週任務
- 第五週任務
- 第六週任務
- 第七週任務 - 最後一波獎品，若要獲得 The F2E 課程需要做到這裡
- 第九週任務
- JS 直播班心得牆

## DOM 範例
* [todoList](https://codepen.io/hexschool/pen/OJWRqrN)

## 最終關卡 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/dom-api-ULyBu5TbMJG9v2tvnkgCFf)
* [API 前台規則流程圖](https://whimsical.com/Eg1f7MCzy9UcBJjkpq8TLP)

## 最終關卡 kata
* 請壓在 6hr 內，能用自己的邏輯寫出來

## 最終關卡任務練習步驟 ([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://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://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)
* [Codepen 範例](https://codepen.io/hexschool/pen/yLgaBWV?editors=1010)

## DOM 與 API 規劃
* [最終關卡前台](https://codepen.io/hexschool/pen/qBRPByd)
* [最終關卡後台](https://codepen.io/hexschool/pen/PoWJoBK)

## 重新複習

1. **變數**：基礎型別
2. **流程判斷**：流程圖設計
3. **陣列與物件**：資料定義
4. **函式設計**：讓程式能重複呼叫執行、消除重複的程式碼
5. **資料處理**：陣列與物件資料處理，例如 ForEach 、Object.keys
6. **AJAX 取得資料**： Axios 取得網路請求
7. **套件整合**： C3 資料處理
8. **第三方線上服務串接**：API 服務

## 下方服務有用到哪幾個編號？
1. [swiper](https://swiperjs.com/)
2. [SUANKAN - 算算看要上線多久](https://superawei.github.io/SUANKAN/)
3. [六角學院](https://www.hexschool.com/)
4. 小明想做口罩地圖，他去查 [OPEN DATA](https://data.gov.tw/dataset/116285)，發現是 csv 格式，於是到網路查到有佛心工程師提供 [CORS JSON API](https://g0v.hackmd.io/@kiang/mask-info#%E9%96%8B%E7%99%BC%E8%B3%87%E6%BA%90%EF%BC%9A)，小明很高興，於是他用 axios 接了他的口罩剩餘數量 API，並搭配 Google Map 顯示地圖資訊
5. 小華的老師出了個題目給他，他希望小華寫個「離線版的高雄停車場」網頁，於是小華到 [高雄 OPEN DATA](https://data.kcg.gov.tw/dataset/department-of-transportation30) 下載 JSON 檔案，因為會用到圖表，所以他用了 C3.js 服務。方便老師能夠離線就能開啟小華的程式，看到高雄市停車場的網頁資訊。


## 下一步？
* 學 SPA 框架，整合 API 資訊 (Vue、React、Angular)
* [深入 JS 核心(常見面試題目)](https://www.hexschool.com/courses/js-core.html)
* [【2021轉職前端工程師之旅】面試篇：為自己選的路堅持下去](https://ithelp.ithome.com.tw/articles/10256018?sc=rss.qu)