# 第二週
本頁連結：https://hackmd.io/bVkAgvVTRke6qyPsPo_SJw
## 課前說明
- 上週的挑戰抽出名單
- 本週新的活動！
## 本週目標
- Async/Await
- 課程 API
- Vite 環境說明
- ESM
- 外部套件 axios
- 在 Vite 環境中
## 主題一：非同步與 Axios
知識點：事件佇列
- JS 是屬於同步語言，基本上都是依序執行
- 但非同步的行為會先放在事件佇列內，等所有程式執行完後才執行
- 補圖：事件佇列
### Promise
- 過去非同步可能會使用 callback 進行串接
- 非同步程式碼更有一致的結構性
- then, catch 用法說明
- Promise 結構，[參考](https://wcc723.github.io/development/2020/02/16/all-new-promise/
)
### async/await
- `async function` 可以用來定義一個非同步函式，讓這個函式本體是屬於非同步，但其內部以“**同步的方式運行非同步**”程式碼。
- `await` 則是可以暫停非同步函式的運行（中止 `Promise` 的運行），直到非同步進入 `resolve` 或 `reject`，當接收完回傳值後繼續非同步函式的運行。
- Async / Await：[參考](https://www.casper.tw/development/2020/10/16/async-await/)
## 主題二：課程 API 說明
課程準備
- 申請：https://ec-course-api.hexschool.io/
- API 文件：https://hexschool.github.io/ec-courses-api-swaggerDoc/
- MDN 上的 Cookie：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
- 為什麼要使用 API？
串接 AJAX
- 串接示範
- 需補上誰是「管理者」、「一般用戶」
- 現場示範驗證說明
#### 考題：哪些 API 是後台？哪些 API 屬於前台
情境詢問：以下 API 可以在哪邊找到
- 用戶將一個品項加入購物車
- 管理者新增一個品項
- 管理者查看特定的訂單內容
- 用戶建立訂單
- 用戶結帳
## 主題三：Vite 環境說明
### 為什麼要用 Vite
- 不需從零建構環境，幾個選項後快速開發
- 快速建立「應用服務」 -> 單頁式應用程式
- 整合性的工具，開發更容易
- 從 CDN 改為 NPM 統一管理
### Vite 環境建立
```html
npm create vite@latest
```
✔ Project name: … vite-react
✔ Select a framework: › React
✔ Select a variant: › JavaScript
運行方式：
- dev：運行開發環境
- build：編譯程式碼並釋出
資料夾結構說明：
- public：公開的檔案資料夾，可以放入不會被編譯的內容，裡面除了 index.html 外，其他都是直接被搬移的
- src：主要的開發環境
### ESM
- 關鍵點：如何匯出影響如何匯入
- ESMoudle 在實戰中的運用情境
- 預設匯出：單一模組、元件開發
- 具名匯出：函式庫、自訂方法集
> **哪邊會用到？**
1. JavaScript 模組化
2. React 的元件拆分管理
>
### 外部套件
1. npm 網站上搜尋：https://www.npmjs.com/
- axios：https://www.npmjs.com/package/axios
2. 依據形式，決定哪一種方式進行匯入
```html
import axios from 'axios'
```
### 在 React 中操作 API
> 示範如何將 Async Function 的程式碼移動到 React 中
>
額外補充：React 表單操作
```jsx
const handleInputChange = (e) => {
const { name, value } = e.target
setFormData({
...formData,
[name]: value,
})
}
```
關於 input 操作可以觀看這幾個章節：
## 本週額外挑戰
- 預習章節閱讀：[連結](https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962890)
- React 元件基礎
- React hooks
- 作業：
- 作業連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649528289302
- 助教作業解說（週日上午 10:00）
- 團隊任務：
- https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962878_12062543649513962902
## 隱藏挑戰：第二週作業追追追～
本次共兩個挑戰，兩個挑戰各 3 杯星巴克（名單不重複）
## Part 1 基本挑戰
課程 API 資料建構，完成以下條件並分享至 Discord 頻道，分享內容：
```
序號：0
我是 xxx
作品主題：卡伯3C商店
類型： React 直播班 or React 專題班
連結： HackMD or 課程 API 連結
心得（可選）：
```
#### React 直播班
1. 參考課程 API [文件](https://hexschool.github.io/ec-courses-api-swaggerDoc/#/%E7%AE%A1%E7%90%86%E6%8E%A7%E5%88%B6%E5%8F%B0%20-%20%E7%94%A2%E5%93%81%20(Products)/get_v2_api__api_path__admin_products)，其中的產品資料，結構如下：
```
[
{
"category": "衣服2",
"content": "這是內容",
"description": "Sit down please 名設計師設計",
"id": "-L9tH8jxVb2Ka_DYPwng",
"is_enabled": 1,
"origin_price": 100,
"price": 600,
"title": "[賣]動物園造型衣服3",
"unit": "個",
"num": 1,
"imageUrl": "主圖網址",
"imagesUrl": [
"圖片網址一",
"圖片網址二",
"圖片網址三",
"圖片網址四",
"圖片網址五"
]
}
]
```
3. 建構至少 10 筆資料，類型不限（美食、實體物品、旅遊皆可）
4. 將資料獨立儲存至 HackMD ([範例](/6os4PVPqRRKx-Uu0Gwu-rw)，可不需要 `id`、`num` 欄位) 或直接上傳至課程 [API](https://ec-course-api.hexschool.io/v2/api/casper-hexschool/products/all) 中
5. 審核條件：
- 上傳至 HackMD、課程 API 均可
- 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
- 圖片建議尺寸寬度小於 1024
- 至少包 10 筆資料
- 可使用 AI 服務協助產出
- **不可複製其他人資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**
#### 框架專題班
框架專題班同學，可使用：
1. 上述 React 直播班的資料集
2. 或依據專題主題建構資料集
接下來將資料獨立儲存至 HackMD ([範例](/6os4PVPqRRKx-Uu0Gwu-rw)，可不需要 `id`、`num` 欄位) 或直接上傳至課程 [API](https://ec-course-api.hexschool.io/v2/api/casper-hexschool/products/all) 中
審核條件：
- 團隊每個人獨立上傳至 Discord 貼文中
- 上傳至 HackMD、團隊 API、課程 均可
- 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
- 至少包 10 筆資料
- 可使用 AI 服務協助產出
- **不可複製其他團隊、其他同學的資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**
## Part 2 加值挑戰
完成課程 API 上傳，並將作業連結貼至 Discord 之中
```
序號：0
我是 xxx
作品主題：卡伯3C商店
連結： 課程 API 作業連結
心得（可選）：
```
審核條件：
- 必要使用課程 API
- 可以 Part 1 挑戰同時進行
- 至少包 10 筆資料，且內容描述完整（不可以看起來論述都不齊全）
- 必要包含 "圖片" 連結，可由 [Unsplash](https://unsplash.com/) 網站搜集
- 可使用 AI 服務協助產出
- **不可複製其他人資料內容（依據上傳時間而定，違者將取消最終作業批改資格）**
Sign in with Wallet
Connect another wallet