新增充電站 UI 介面邏輯新增 | 六角學院

自動播放
自動完成

上一堂課程完成並繼續課程

1497558

火箭隊培訓營

2020 VS Code 網頁編輯器、HTML 基礎教學

安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:28)
撰寫 h1 標籤、 p 段落 (8:11)
CodePen 教學 - 將你的程式碼分享給別人 (4:20)
建立 HTML 環境 (7:40)
HTML 環境語法
Emmet 載入環境語法 (6:29)
插入圖片，了解圖片路徑規則 (8:48)
載入外部圖片方式 (4:30)
在網頁上加上 a 連結標籤 (6:18)
段落 p 與連結 a 的混合應用 (3:08)
認識 ul li 列表標籤 (8:26)
HTML 標籤教學 - 小節作業 (3:55)

2020 CSS 常用語法

HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:44)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
2020 CSS 樣式小節作業

2020 使用 CSS 變更 HTML 標籤特性

網頁容器介紹 (6:50)
CSS Reset - 清空瀏覽器預設樣式 (11:42)
display: block 區塊元素介紹 (12:39)
display: inline 行內元素介紹 (12:15)
display 容器特性 - 區塊跟行內 (5:49)
div 與後代選擇器運用 (14:44)
margin 產生外邊界距離 (11:52)
padding 產生留白距離 (6:17)
margin、padding 投影片介紹 (2:04)
Box Model（盒模型）詳細介紹 (10:54)
margin 0 auto 區塊水平置中 (10:15)
text-align 文字水平調整 (5:16)
2020 優化 CSS 作業小節作業
2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:18)

第一關 - 新手切版任務

第一關 - 新手切版任務

Flex 網頁排版技巧

Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
flex-direction - 決定 flex 軸線 (6:16)
justify-content - 決定主軸對齊方式 (11:45)
設計一個 Flex 並排選單吧！ (8:10)
flex-wrap - 決定換行屬性 (4:29)
align-items - 交錯軸對齊方式 (7:07)
透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
Flex 練習前置作業 (9:26)
Flex 小節作業 (16:50)

Flex 精神時光屋

Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:34)
Flex column 運用 (7:42)

網頁排版技巧 Part II

使用絕對定位 / 相對定位設計版型 (9:06)
相對定位、絕對定位元素技巧：z-index - relative、absolute (5:27)
簡報呈現相對定位跟絕對定位的技巧 (3:49)
position: fixed 技巧 (5:14)

第二關 - Flexbox 切版任務

第二關 - Flexbox 切版任務

RWD 手機版網頁設計

RWD - 伸縮自如的RWD 排版術(上) (46:32)
RWD - 伸縮自如的RWD 排版術(下) (79:59)

第三關 - RWD 切版任務

第三關 - RWD 切版任務

Sass 環境教學 - 一起掌握最世界最多人用的 CSS 管理語言！

何謂 Sass？ (3:28)
Sass 與 CSS 的不同之處 (7:11)
SCSS 與 Sass 格式差異 (3:32)
SCSS 格式教學 (7:15)
Sass 格式教學 (7:14)
Sass 編譯方式 (5:22)
VS CODE 編譯 Sass 教學 (5:58)
prepros 教學 (5:22)
& 連結詞教學 (2:57)

Sass 變數 - 常用語法一鍵設定

為什麼要學變數？ (3:53)
變數教學 (5:20)
常見變數編譯錯誤 - 讓你不害怕各種錯誤訊息 (3:52)
變數搭配加減乘除好方便 (2:43)
字串管理，將常見字串統一整合的小技巧 (2:22)
調出想要的顏色，藉由 darken、lighten 顏色功能就能輕鬆達到 (2:57)
從基礎到進階的變數管理技巧 (7:08)
變數常見問題集

Sass import - 切分檔案好工具，維護管理更方便

import - 要將 Sass 學得淋漓盡致，你不能不會 import (3:19)
import + 變數雙向管理 (3:52)
主要 CSS 拆開管理 (3:17)
常見問題解析 (3:08)
CSS Reset - 你知道 meyerweb 與 Normalize 的差異嗎？ (5:58)
整合 Reset 流程 (4:46)
import 總結 (3:24)
import 小試身手

Sass Mixin - 讓你不會回想原理，而中斷思緒

為什麼你一定要學 Mixin？ (3:13)
Mixin 輕鬆寫 (4:23)
掌握 Mixin 的各種好處，你不能不知道！ (5:37)
Mixin + import 組合技 (3:05)
搭配參數，讓 Mixin 更加靈活！ (5:07)

熟悉 Mixin 後，搭配 RWD 宛如天衣無縫

掌握 Mixin 後，寫 RWD 再也不是痛苦事 (5:51)
核心語法 @Mixin + content (6:41)
Sass 響應式網頁心得總結 (4:47)

Sass/CSS 設計模式 - 教您最實用的網頁收納術！

OOCSS - 讓結構更加乾淨 (5:18)
OOCSS - 容器與內容分離 (5:13)
OOCSS - 容器與內容分離 - 以格線系統設計為例 (5:51)
OOCSS - 樣式與結構分離 (6:44)

Bootstrap5

Bootstrap 5 影片內容

css background 背景圖案設計

background 在 html 元素上載入背景圖片，設定寬高 (6:59)
background-repeat：將圖片重複顯示，repeat-x (13:42)
background-color：與背景圖片的混用 (9:24)
background-position：移動 background 的位置 (4:28)
background 縮寫教學 (2:37)

第四關 - SCSS 版型管理任務

第四關 - SCSS 版型管理任務

JavaScript 課前知識與環境介紹

安裝 Chrome 網頁瀏覽器 (3:02)
安裝 VSCode 程式編輯器 (6:55)

變數與資料型別

變數大綱簡介 (6:40)
透過 Chrome 開發人員工具來寫 JavaScript (4:57)
如何宣告變數 (6:06)
設定變數，如同在 excel 設定欄位般容易！ (6:06)
number 型別 - 讓您擁有簡易計算機功能 (5:43)
number 型別 - 各種數字的支援程度大解密 (2:20)
number 型別 - 變數如何帶變數 (6:27)
課前最終作業二提交 (8:12)

let、const、var 介紹

let 變數詳細介紹 (3:56)
const 詳細介紹 (6:56)
var 歷史的眼淚詳細介紹 (3:04)
宣告變數一次讓你知！ (6:24)

網頁與 Code 環境建立流程教學

VSCode 撰寫 JS 環境建立 (8:23)
console.log 印出你想顯示的資訊！ (3:47)
如何撰寫優雅的註解 (5:22)
Codepen - 透過它來提交您的程式碼 (6:24)

數字型別與賦值運算子

賦值運算子+=、-= (5:56)
a++、a-- 一次搞懂！ (3:45)
課前最終作業三提交 (5:56)
課前最終作業四提交 (6:36)

字串型別

宣告字串流程 (3:42)
一次搞懂字串相加 (5:34)
透過 typeof 瞭解當前變數型別 (2:39)
數字與字串相加 (5:21)
NaN 產生時機 (5:20)
字串處理實用方法 (5:04)
變數記憶體指向講解 (7:26)
樣版字面值教學 (4:54)

變數：布林、undefined、null

布林介紹 (5:01)
undefined 介紹 (3:54)
null 介紹 (5:10)
字串轉數字方法 (5:34)
數字轉字串方法 (3:57)

比較與邏輯運算子

比較與邏輯運算子簡介 (2:31)
比較運算子： >、=、<= (5:45)
比較運算子搭配變數方法 (5:54)
=、== 差異講解 (2:46)
==、=== 差異講解 (4:23)
邏輯運算子介紹 (5:11)
邏輯運算子範例情境 (5:01)
邏輯運算子增加多條件作法 (2:53)

流程判斷 - if、else if、else

為什麼要理解流程判斷？ (7:53)
if、else、else if 講解 (7:12)
if 詳細講解 (一) (5:56)
if 詳細講解 (二) (10:29)

if 流程圖規劃流程

if 圖表介紹 (4:43)
圖表服務註冊流程 (2:08)
流程圖符號簡介 (1:48)
流程圖 let code 講解 (12:44)
流程圖 if code 講解 (15:26)
課前最終作業五

if 中階運用

if 包 if 腰圍判斷流程圖設計 (10:10)
if 包 if 腰圍判斷 Code 設計 (13:24)
看圖說故事 - if 練習一 (4:34)
看圖說故事 - if、else if 練習二 (1:51)
看圖說故事 - if、else if 練習三 (9:59)

陣列教學

為什麼要學陣列物件？ (4:04)
筆刷工具介紹 (1:01)
陣列寫法教學 (4:29)
陣列不只能放字串，也能放數字與混合資料 (4:02)
陣列讀取教學 (3:25)
讀取陣列資料，並賦予新變數流程 (4:21)
length 讀取陣列長度流程 (2:13)
陣列預設寫入資料 (5:18)
push 寫入資料流程 (4:18)
unshift 寫入資料流程 (2:10)
pop 與 shift 刪除資料 (3:21)
splice 刪除指定資料 (4:56)
其他陣列總結 (1:08)

物件教學

為什麼要有物件 (1:21)
物件格式教學 (6:58)
如何讀取物件的值 (5:47)
新增物件屬性 (3:14)
修改物件值 (3:36)
刪除物件資料 (2:13)
另一種讀取物件屬性方法 (2:11)
物件讀取資料判斷時間 (2:36)

陣列與物件整合運用

陣列與物件混合應用 (5:57)
一次搞懂陣列與物件混合讀取教學 (6:45)
JSON 格式介紹 (2:29)
安裝 JSON 檢視 Chrome 套件 (2:03)
下載 JSON 格式資料 (7:12)
JSON 讀取方式教學 - 以充電站為例 (5:25)
物件裡面還能包物件 (4:02)
物件包物件讀取流程 - 以活動公告 open data 為例 (10:03)
如何篩選出自己想要的資料格式，並賦予到特定變數上 (3:53)
小魔王題目：複雜 JSON 格式，你/妳撈得到嗎？ (6:29)
物件搭配 if 練習 (4:29)
陣列物件搭配 if 流程判斷練習 (5:02)
小節作業 (1:55)

函式 function

為什麼需要學函式？ (1:48)
函式寫法教學 (4:32)
註冊多組函式流程 (4:23)
函式裡面仍可以執行函式 (4:47)
函式參數介紹 (5:24)
參數寫法-參數只存活在大括號 (2:31)
參數寫法-兩個數字相加工具 (3:25)
輸入跟輸出的重要性 (3:09)
return 寫法教學 (6:47)
return 宣告 let (2:40)
return 可以有多個 (2:26)
return 可以有多個-範例Code (5:11)
判斷是否為偶數 - 畫流程圖 (6:45)
判斷是否為偶數-寫Code流程(上) (9:04)
判斷是否為偶數-寫Code流程(中) (12:19)
let 全域與區域變數邏輯 (4:13)
判斷是否為偶數-寫Code流程(下) (3:59)

DOM - 選取網頁元素

為什麼要瞭解 DOM？ (2:48)
瞭解 document 的重要性 (3:54)
DOM 環境配置 (2:22)
querySelector 選擇器 (6:22)
textContent 寫入文字資料 (5:29)
innerHTML 插入 HTML 標籤 (6:41)
innerHTML 加入變數 (7:09)
textContent 與 innerHTML 運用差異 (4:21)
setAttribute 增加 HTML 標籤屬性 (4:40)
querySelectorAll 可重複選取多個元素 (5:57)
.innerHTML、.textContent、.getAttribute 取值方法 (6:07)
表單元素取值方式 (5:41)

Event 事件 - 讓您的網頁具有互動效果

什麼是 event？ (2:22)
addeventListener 註冊事件監聽教學 (8:25)
如何觀看 DOM 有註冊事件監聽 (2:58)
來寫一個加法器吧！ (6:34)
event 物件 - 告訴你當下元素資訊 (6:43)
DOM 複習 - 透過 nodeNmae 瞭解目前 DOM 的 HTML 位置 (1:54)
e.target - 了解目前所在元素位置 (4:44)
e.target 搭配 nodeName 節點，抓到你預期要做的事情 (6:48)
preventDefault - 取消預設觸發行為 (4:11)

陣列 forEach 資料處理方法

為什麼要學陣列資料處理？ (3:32)
forEach 寫法介紹 (9:24)
陣列數字累加與變數作用域講解 (8:00)
搭配 if，篩選出陣列裡面有幾個偶數 (6:22)
forEach 讀取資料 (4:35)
男女人數計算機-透過物件整合資料 (5:29)
高雄 OPEN DATA-觀看免費與投幣式充電站有幾處 (7:39)
高雄 OPEN DATA-陣列物件處理 (10:27)

forEach 題型練習

範例功能講解 (1:27)
如何整合 innerHTML 資料 (8:43)
搭配網頁初始化狀態 (1:53)
免費與投幣式事件監聽設計 (5:55)
事件監聽搭配 if 流程判斷 (8:32)
DOM 拉出全域變數進行管理 (2:10)
篩選條件增加流程 (3:46)
新增充電站 UI 介面邏輯新增 (13:29)

第七週需理解的知識點影片

從 Wireshark、Fiddler 深入了解網路請求 (136:22)
計算機網路總結 (116:14)

AJAX - 網路請求

什麼是 AJAX？它如何改善網頁使用體驗？ (5:11)
什麼是網路請求？ (7:04)
從網頁架構瞭解網頁請求-上集 (8:17)
從網頁架構瞭解網頁請求-下集 (3:40)
網頁請求狀態碼 (9:06)
request、response 講解 (6:48)
用 Node.js 開啟伺服器，更加瞭解 request、response 的差異 (11:13)

AJAX - axios 套件教學

各種發出網路請求的 JS 寫法種類介紹 (4:56)
axios 環境安裝 (3:11)
axios-嘗試串接外部資料 (2:53)
axios-response 參數詳細講解 (4:22)
axios-將外部資料寫入到網頁上 (3:50)
axios-非同步觀念 (6:30)
透過函式設計處理非同步 (8:34)

第六堂 AJAX 直播錄影檔

第六堂錄影檔 - 上半部 (57:53)
第六堂錄影檔 - 下半部 (95:56)
助教分享 (55:54)

AJAX POST API 講解

網路請求種類介紹 (2:07)
post 網路請求文件介紹 (7:53)
四種常見的 POST 請求 content-type 介紹 (5:02)
透過 axios 實做註冊 post 網路請求 (8:38)
從 chrome 觀察 post 請求 (7:19)
實做 axios DOM 表單註冊流程 (15:26)
AJAX POST 小節作業 (3:37)

第七堂錄影檔

第七堂錄影檔 - 上半部 (45:04)
第七堂錄影檔 - 下半部 (101:42)
助教直播 (61:39)

todolist 待辦事項

todolist 經典題目介紹 (1:20)
取值複習 getAttribute (4:37)
範圍內容取值 (7:26)
監聽大範圍內容取值 (8:30)
data- 屬性妙用 (4:24)
HTML 結構設計 (3:57)
資料初始化渲染 (6:29)
待辦新增功能 (8:09)
待辦刪除功能-前置解說 (3:14)
待辦刪除功能 (14:20)

第八週直播錄影檔

第八週錄影檔 - 上半部 (58:00)
第八週錄影檔 - 下半部 (108:12)
助教直播 - 後台 (75:57)

第九堂最終關卡錄影檔

第九堂錄影檔 - 上半部 (49:01)
第九堂錄影檔 - 下半部 (124:20)
助教直播 (71:06)

最終關卡 - 洧杰 Live Demo 馬拉松直播

最終關卡 - 上午場 (78:15)
最終關卡 - 下午場 (221:27)
最終關卡 - 午夜場 (134:56)
助教直播 - 串接 Imgur 服務 (48:13)

直播課

1px 也不差的網頁切版術 (43:40)
7/13 JWT todolist 登入 (81:05)

認識 React

課程相關資源
建立 React 環境 (9:23)
JSX 章節回顧作業（下） (6:25)
JSX 開發中常見的錯誤 (6:33)
React 行內樣式 (7:39)
JSX 與 HTML 的標籤屬性 (14:07)
表達式與 React 的關係 (7:57)
JSX 是如何運作的 (8:30)
資料驅動 React - 資料抽離練習 (7:45)
JSX 章節回顧作業（上） (15:14)
資料驅動 React - 建立版型 (6:39)
JS 型別與 JSX (8:29)
什麼是 JavaScript 表達式（運算式、expression） (12:27)
課程使用的文字編輯器 VSCode (6:23)
課程介紹 (3:02)

JavaScript 必學觀念

Async function 實戰運用 (12:58)
模組化 JavaScript：ESModule (14:48)
JavaScript 常見縮寫 (15:17)
陣列迴圈處理手法 (17:30)
Async function 與 await (13:03)
解構 (11:33)
箭頭函式 (9:12)
非同步與 Promise (13:02)
JSX 章節作業優化 (3:23)
物件傳參考特性 (16:02)
Promise 實戰運用 (8:27)
更多陣列方法介紹與 JS 相關資源

React 元件基礎

key 值很重要 (6:43)
建立元件 (12:21)
元件介紹 (6:48)
巢狀元件 (6:51)
建立版型 layout (7:01)
元件章節 - 串接資料 (6:49)
元件章節 - 套用天氣資料 (9:19)
元件章節 - 套用時間資料 (8:18)
元件章節 - 版型說明 (11:27)
巢狀元件與 Children props (4:44)
資料驅動元件 (5:22)
props 解構 (2:29)
元件章節 - 將程式碼拆分成元件 (7:25)
元件基礎練習 (8:41)

React hooks

元件化 input 與狀態管理 (7:38)
使用 useState 更新資料狀態 (21:18)
Bootstrap 中的方法介紹 (38:04)
非同步與元件渲染 (9:32)
useEffect 的生命週期 (23:00)
取得 Unsplash 遠端資料 (7:06)
關於 useState 的原理與運作 1 (66:12)
input 與 useState (10:24)
關於 useState 的原理與運作 2 (6:50)
使用 useEffect 取得遠端資料 (43:04)
useEffect 與非同步 (4:49)
useState 的狀態更新問題 (9:30)
React Hook 章節挑戰：讀取視覺效果 (12:32)
在 React 中運行 Bootstrap (5:15)
React Hook 章節挑戰：搜尋功能調整 (7:54)
useRef 取得 DOM (6:32)
React Hook 章節挑戰：Bootstrap Modal 取得單張圖片 (13:16)
React Hook 章節挑戰：滾動取得新的圖片 (18:47)
React Hook 章節挑戰：更新滾動監聽 (6:09)
React Hook 章節挑戰：useState 與監聽事件的問題 (4:55)
Unsplash API 使用限制 (2:05)
useRef 進階觀念 (5:34)
React Hook 章節挑戰：剩餘請求次數呈現 (7:11)
關於 React hook (2:06)
React Hook 章節挑戰 - 額外補充項目

React 表單開發

React Hook Form：元件化 (9:37)
React Hook Form：官方表單產生器 (2:55)
HTML 表單基本介紹 (16:48)
React 與表單送出 (13:24)
React Hook Form：挑戰使用 React Hook Form 完成表單 (2:31)
React Hook Form：錯誤樣式 (12:21)
React 與常見表單元素 (15:24)
常見表單監聽方法 (5:38)
React Hook Form 簡介 (6:44)
React 與 Checkbox (8:40)
React Hook Form：驗證方法 (8:51)
React Hook Form：狀態監聽 (13:46)
React Hook Form 官方文件

React hooks 進階

使用 useReducer 進行狀態管理 (13:29)
另一種生命週期：useLayoutEffect (10:01)
追蹤滑鼠位置的自訂 hook 運用方法 (3:51)
使用現成的 hook 範例：debounce (5:54)
自訂屬於自己的 hook (5:43)
解決函式傳參考問題：useCallback (10:25)
使用 useContext 做到跨元件狀態 (11:46)
useReducer 實戰範例 (14:55)
useMemo 實戰常見運用 (47:00)
使用 useMemo 進行運算 (16:30)
memo 元件 (7:26)
自訂 hook 除錯方法 (5:08)
React 生命週期補充說明 (7:36)
跨元件狀態說明 (4:35)
useContext 進階 (6:08)
React 自定義 Hook 範例網站

Create React App

Create React App 相關資源
安裝 Bootstrap 樣式庫 (8:02)
環境變數說明 (8:44)
載入外部套件 (6:17)
編譯完整的版本 (2:35)
使用 CRA 進行開發 (11:24)
React Create App 是什麼 (4:20)
啟用 Sass 功能 (3:26)
安裝 CRA (15:10)
快速部署專案至 GitHub Pages (10:03)

Create React App 整合製作簡易購物車

簡易購物車：版型製作 (23:16)
簡易購物車：跨元件加入購物車 (5:59)
簡易購物車：元件拆分 (6:42)
簡易購物車：使用 useContext 製作跨元件通訊 (7:53)
簡易購物車：完成 (4:02)
簡易購物車：相同品項累加 (6:29)
簡易購物車：計算總金額 (9:39)
簡易購物車：產品列表製作 (6:28)
簡易購物車：修改購物車品項數量 (7:34)
簡易購物車：移除購物車品項 (5:12)
簡易購物車：樣式調整 (11:30)
簡易購物車：章節目標介紹 (2:15)
產品資料內容

Router

React Router 基本介紹 (3:38)
React Router：程式碼微調 (4:32)
React Router：巢狀路由與 Outlet (9:16)
React Router：React 專案中的 import 手法 (5:04)
React Router：動態路由 (11:57)
React Router：加入前端路由 (7:10)
React Router：環境準備 (5:31)
React Router：搜尋功能製作 (10:25)
React Router：串接 Unsplash API (10:00)
React Router：導覽連結優化 (4:54)
React Router：NotFound 頁面與 useNavigate (5:46)
React Router：搜尋及網址參數 (8:31)
React Router：Browser Router 與 Hash Router (5:28)
React Router：課程資源

最終挑戰

最終挑戰：建立新商品 (14:11)
最終挑戰：顯示產品列表 (5:59)
最終挑戰：申請個人 API Path (4:32)
最終挑戰：加入環境變數 (5:29)
最終挑戰：加入 ProductModal 彈出視窗 (10:55)
最終挑戰：後台功能完成 (0:52)
最終挑戰：編輯產品資訊 (11:08)
最終挑戰：開發登入畫面 (11:54)
最終挑戰：介紹 (9:47)
最終挑戰：登入畫面微調 (4:28)
最終挑戰：優惠券到期日 (9:04)
最終挑戰：重新取得遠端資料 (2:42)
最終挑戰：路由保護 (11:27)
最終挑戰：後台版型導入 (9:35)
最終挑戰：為專案加入 Bootstrap (8:36)
最終挑戰：套用前台版型 (12:05)
最終挑戰：刪除單一商品 (11:20)
最終挑戰：介紹 Toast 元件 (6:46)
最終挑戰：準備 useContext 與 useReducer (9:13)
最終挑戰：分頁功能製作 (12:47)
最終挑戰：Cookie 的運作概念 (7:02)
最終挑戰：優惠券頁面製作 (15:18)
最終挑戰：跨元件訊息 (11:26)
最終挑戰：下半場解說 (2:02)
最終挑戰：編輯商品微調 (3:54)
最終挑戰：移除餐點品項 (4:32)
最終挑戰：加入購物車 (9:41)
最終挑戰：表單驗證製作 (9:44)
最終挑戰：最終作業結語 (1:12)
最終挑戰：更新餐點數量 (9:12)
最終挑戰：跨元件購物車資訊更新 (8:41)
最終挑戰：前台單一餐點頁面 (9:53)
最終挑戰：付款成功頁面 (8:37)
最終挑戰：Navbar 導覽列元件 (7:15)
最終挑戰：購物車頁面製作 (9:46)
最終挑戰：讀取效果製作 (6:44)
最終挑戰：前台餐點列表 (10:33)
課程 API 文件及相關資源
課程範例與 Commit 對照
常見 API 問題解決方式
Cookie 存取語法
最終作業提交規則
最終作業任務說明
補充：檔案上傳 (8:45)

Redux Toolkit

Todo 整合 Redux 範例：加入 Actions (8:24)
最終作業整合 Redux：整合錯誤訊息 (9:27)
Todo 整合 Redux 範例：移除 Todo (3:35)
Todo 整合 Redux 範例：建立 Redux Toolkit 環境 (10:23)
最終作業整合 Redux：非同步移除訊息 (11:30)
最終作業整合 Redux：調整說明 (1:24)
Redux Toolkit 小結 (0:32)
Todo 整合 Redux 範例：移除 Todo 範例 2 (4:47)
最終作業整合 Redux：將 Message Toast 元件加入到畫面上 (3:41)
最終作業整合 Redux：加入 Redux Toolkit (9:18)
Todo 整合 Redux 範例：更新 Todo 資料 (4:03)
最終作業整合 Redux：建立訊息 (6:51)
Redux Toolkit 簡介 (3:19)
Redux Toolkit 章節資源

2022 JS 全修練新增課鋼 - todolist API - 環境安裝

為什麼會有 todolist API 作業？ (2:00)
API介紹 (4:40)
POSTMAN 安裝教學 (8:55)

2022 JS 全修練新增課鋼 - todolist API 規則講解

透過註冊 API 瞭解 Swagger 文件操作 (6:14)
透過 axios 搭配 API 設計註冊功能 (22:20)
抽出網址變數 (2:26)
透過 postman 設計網址請求 (16:12)
何謂網址請求，並觀察 request、response 的 headers、body 資料 (12:58)
觀察 API 是否支援瀏覽器 CORS 跨網域 (8:44)
介接 login 登入 API (8:12)
從 headers 取出 token 資訊 (5:20)
透過 postman、swagger 去戳 get todo api (4:54)
透過 axios 夾帶 token 觸發 get todo api (16:00)
client 瀏覽器端關掉，token 保持效用的方式 (6:04)
透過 postman、swagger 新增待辦作法 (6:14)
透過 axios 新增待辦作法 (4:47)
編輯 todo API 設計 (8:25)
刪除 todo API 設計 (5:31)
更新 todo 待辦狀態 API 設計 (33:16)
優化 axios headers 設計 (15:21)

2022 JS 全修練新增課鋼 - todolist API 開發方向

設計稿介紹 (1:05)
是否會提供官方範例程式？ (2:14)
頁面切換作法 (5:06)
登入跟註冊作法 (8:31)
顯示與新增待辦資料 (8:15)
刪除與編輯待辦資料 (4:41)
刪除全部作法 (3:23)

環境建置

Node.js、NPM 環境安裝 (3:25)
將 Vite 專案打包並部署 (10:57)
安裝 Vite 並建立 React 開發環境 (14:37)
如何在 Vite 環境中，使用 Bootstrap function (7:34)
Vite 開發環境中加入環境變數 (10:12)
客製化 Bootstrap (8:59)
在 Vite 中載入外部套件（axios） (8:54)
在 Vite React 中，加入 Sass (3:47)

新增充電站 UI 介面邏輯新增

/courses/1497558/lectures/34320922/hotmart_lecture_video_download_link/61757275

1497558

本章節 Codepen 範例程式碼網址：網址

完成並繼續課程