# [Live-log]_Week8
###### tags: `draft`, `real-time`

-  [](/jd-cqyC_TnOMnjjfuCF4Ig?both)

---

[TOC]

---

:::info
:::spoiler **主要連結**
- <span style="color: #000;
font-weight: bold;
background: #76b0f3;
border-radius: 8px;
padding: 3px 2px;">【Week8】</span>
- **【課堂講義】**
https://hackmd.io/@hexschool/BJhYXpnut [target=_blank]
- **【小組任務】**
https://hackmd.io/@hexschool/SJXx2a2ut [target=_blank]
:::

:::warning
- **預計 tag**
- [ ] 待補充項目：`#TODO`
- [ ] 需要練習的部分：`#practice`
- [ ] 課堂小問題：`#Quiz`

:::

---
---

## Summary

### 加碼獎品
- 
- 時間： 
- https://hackmd.io/@hexschool/BJhYXpnut#加碼：直播時間
- ==**把作業寫完就有送、不要花錢買**==

### 最終關卡講解：[#key-point](#key-point)

- 週末先熟悉玩 API
- 可以不用急著寫 code

### [10:42] 講解週末任務
1. 申請完截圖貼到 slsck
2. API 操作熟悉之後才去練習範例的 code

#### 最終作業: 有 3weeks
- 要把 API 練到熟
- 未來後端不一定會提供文件

- ==截止日==：17 日

- 題目已經釋出了

---
---

## 上半堂

- [08:00] 說明時程
- 主線作業 deadline
- 超時未繳請不要為難助教QQ

- 最終關卡：前後端

### [08:07] START

#### 什麼是 API？

- 整合多個服務，搭建出自己的專屬作品

- ~~官方文件很難懂？~~
- 老師用翻譯蒟篛講給你聽

- 輸入網址 -> 獲得 JSON 格式的資料

- 每個 API 有各自的申請流程

- [08:15] 示範交通部 API

- chat: 
- 老師：我也 4

### key: 接 API 一直出錯怎麼辦？
- 常見錯誤：
1. 檢查 URL 格式有沒有錯字、圈錯XD
- 不是你沒天份啦、眼睛看清楚QQ
2. ?
- ==#TODO:==

- [08:22] 示範 News-API
- `API_KEY`
- 有些服務會埋 key 當作身分識別

- [08:25] Google
- `YOUR_API_KEY`

- 通常都有收費
- 免費版有流量限制、不能戳太多次
- 重新整理就算 1 次

- ex. 口罩地圖
- Google Map API
- 1 夜燒了 2 萬美元QQ

- 不一定都很嚴謹
- 歡迎大家來用就不會收錢
- TDX => 國家出錢，所以不收費

### [08:30] code
- 

- [講義] 種類 2 ：金鑰 => key

- `Access-Control-Allow-Origin: *`
- 解法：後端寫設定每 24hr 去撈 1 次

- 
- 一定要有才可以直接用 js 撈資料

### QA

- Q：
- A：可以
- 可以，因為他是用來模擬網路請求

- ==#TODO:==
- Q：

- Q: 

### API 種類快問快答

- https://hackmd.io/@hexschool/BJhYXpnut#API-種類

- [08:40] ==#Quiz==：故宮 API的種類是什麼？
- Ans: 2, 4

- [08:45] ==#Quiz==：ubike 2.0
- Ans: 3

- [08:47] ==#Quiz==： THE-F2E-2rd-06
- Ans: 2

- [08:50] hackMD - imgur - API
- FREE、佛心

---

## [08:52] QK-time

- Q: 
- 等隔日
- 課金

- Q: 
- 放 get 還是會看到

---

## [08:55] 下半堂

- 講解加碼 DEMO 時間
> *edit: 已置頂到 [#Summary](#Summary)*

## key-point

### [09:08] 最終關卡講解

- https://hackmd.io/@hexschool/BJhYXpnut#最終關卡任務練習步驟-API-網址

- JS 班：API x10
- VUE： x30
- THE-F2E： x50

- API 申請：
- API 路徑 -> copy it -> try -> Execute

- [09:15] 產品資料 json 講解：
- `id`：絕對不會重複
- 資料庫概念：避免品名互撞

- [09:20] 加入購物車講解
- https://codepen.io/hexschool/pen/JjERgYq
- ==#practice==

- [09:25] catch-eror
- 

### [09:35] `POST`

- ==#Quiz:== Execute VS axios
- Ans: 一樣的東西

- 可以用測試文件的編輯區送資料試試看
- 跟 axios 做的事情一樣

### [09:45] `DELETE`

- web code
- delete btn listener

- 重申：每個 API 都有其規則

### [09:50] `DELETE` + `id`

- 功能：刪除品項
- ==用購物車的 id==
- 因為某些情境偶爾會有 coupon 或贈品綁在購物車上面
- 其他功能通常要跟 PM、後端去討論

- Q: 為什麼重新整理還在
- A: `POST` 可以幫忙把資料存進去

### [10:05] 示範如何測試新增訂單、購物車

- 函式：`function createOrder`

- 測試發現：購物車要先有東西才可以送出訂單

---

## [10:12] QK-time

### [10:14] QA

- A1:
- 瀏覽器輸入只是 get
- 要寫程式才會刪除

-Q2: 
- A2: 建議還是用 Bootstrap、業界愛用

- A3: github
- ==#TODO:==

- A?
- 後端寫好規則

---

## 下下半堂

- [10:20] 怎麼網址都一樣？
- 
- MDN
- 同個網址寫函式讓他可以支援不同的請求
- 

---

### [10:25] 講解後台 x4

- `function getOrderList`

- 先測試 -> 沒有東西？

- 觀察函式：需要第 2 個參數
- `headers: `

- 丟出請求之後
- 觀察 F12 -> Network
- `Response`
- 伺服器回傳
- `Request`
- 瀏覽器發請求給伺服器

- 驗證身分
- 

- 前台、後台的 API 不一樣

- 瀏覽器請求資料 -> 帶著 token 給伺服器驗證
- token 正確才會回傳資料

- `token` 位置放哪裡？
- 跟後端討論

#### [10:37] 刪除單筆訂單

- `POST` 像 add

- `PUT` 像 edit

- 測試訂單 `token` -> click locker icon

- 測試成功之後：`paid: true`