STAGE 01不使用 AI
基礎技術 · 20 小時
先親手理解一個完整網站由畫面、伺服器到資料庫的運作方式。
- ReactJS：JSX、Component、State、表單、Router 及 API 串接
- NodeJS：Express、REST API、驗證、錯誤處理及資料庫
- 真正能力：能閱讀、執行、測試及手動除錯自己的程式
IT專才培訓 - 技術與學術兼備
使用 AI 開發之前，你需要先掌握程式碼的基礎，學會閱讀、理解及判斷前端、後端、API 與資料庫如何運作；然後才使用 AI 協助產生程式碼、尋找錯誤及提出改善方案。課程亦提供 AI 整理的時間章節和課後測驗，讓你按需要跳到任何重點，並檢查自己是否真正掌握所學。
從基礎技術，到可控制、可驗證的 AI 輔助開發
整個學習路徑分為兩個清楚階段。第一階段刻意不依賴 AI，第二階段才把 AI 加入真實開發流程。
先親手理解一個完整網站由畫面、伺服器到資料庫的運作方式。
有了基礎後，再以 AI 作為開發助手，提高速度而不失去控制。
如果不明白程式碼，便無法判斷 AI 是否製造了錯誤、漏洞或不適合的設計。完成兩個階段後，你不只懂得叫 AI 寫 Code，更懂得審查、修正及延伸它。
免費觀看 6 段實際教學內容，了解講解方式、技術深度，以及 ReactJS、NodeJS、API 和資料庫的實作流程。
按播放鍵即可觀看；選擇右方片段可切換內容。
先用 ReactJS、NodeJS 與資料庫建立真正的開發基礎，再學習如何運用 AI 產生、檢查、除錯及改善程式碼。AI 可以加速工作，但理解程式的人才有能力判斷結果是否正確。
ReactJS 前端與 NodeJS／資料庫後端，先學懂程式、資料及系統如何真正運作。
4 LESSONS · 10 HOURS
由 ReactJS 基礎、JSX、Component 與 useState 開始，逐步掌握表單、CRUD、React Router、Bootstrap，以及串接 NodeJS API 的完整前端開發流程。
以下內容直接取自每段完整課堂錄影及已建立的 AI 學習資料。
本課程為 React.js 的基礎入門實作教學，帶領學員從零建立前端開發環境並掌握元件化設計邏輯。課程首先釐清 React.js (前端) 與 Node.js (後端) 的差異，並實地演練如何檢查 Node 環境、安裝全域套件，以及透過指令建立全新的 React 專案。隨後，講師引導學員熟悉 VS Code 專案架構，進行基礎的程式碼清理，並實作文字與圖片的網頁渲染。接著進入核心重點，解析普通變數與 React 狀態變數 (useState) 的根本差異，讓學員理解唯有更新狀態變數，畫面才會自動重新渲染。透過計數器、圖片顯示與隱藏，以及多張圖片切換等練習，學員也熟練了 onClick 事件綁定與三元運算子的條件渲染應用。課程後半段加入了陣列與物件的資料結構觀念，學習如何運用狀態變數儲存多筆資料 (如水果清單)，並示範結合 AI 工具 (如 Poe) 快速生成精確的 React 程式碼，透過 map 函式將資料集轉換為 HTML 表格。整體課程結合了手動除錯觀念與 AI 輔助，建立起穩固的 React 程式設計邏輯。
介紹 React.js 用於前端開發，並說明建立其專案前須具備 Node.js 環境。
示範全域安裝 React 工具套件，並透過指令建立第一個 React 應用程式。
開啟 VS Code 認識專案檔案架構，並清理預設程式碼以撰寫最簡單的結構。
教學如何將圖片放進 public 資料夾，並使用 img 標籤顯示於網頁上。
實作 JavaScript 函式，並透過按鈕的 onClick 屬性綁定觸發事件。
示範如何在瀏覽器按 F12 打開開發人員工具，利用 console.log 觀察程式運作。
介紹 React 開發中最核心的 useState 鉤子，並說明它與普通變數的不同。
實作計數器功能，驗證狀態變數更新後能帶動網頁畫面自動更新的特性。
利用狀態變數 (Flag) 控制數值，達到點擊按鈕隱藏或顯示特定圖片的效果。
講解如何使用問號與冒號構成的三元運算子，在畫面渲染時進行條件判斷。
應用剛學到的條件渲染與狀態變數，實作按鈕點擊後可於兩張圖片間切換顯示的功能。
運用生成式 AI 輔助撰寫元件，示範如何提供精確提示語以取得所需程式碼。
準備水果陣列資料，將名稱、價格與圖片對應的檔名封裝為物件格式。
建立裝載陣列的狀態變數，撰寫函式來寫入水果資料或傳入空陣列清空資料。
課程回顧，強調先掌握 React 底層邏輯與觀念，才能正確駕馭並引導 AI 開發工具。
答案：A
講師示範打開 CMD 後，輸入 node -v 來查看電腦是否已安裝 Node.js 以及目前的版本號。
答案：C
講師指出，如果只說大致功能，AI 容易加上複雜的 CSS；加上明確變數、元件名稱並指令不須樣式，程式碼會更精簡易懂。
答案：B
講師解釋在 useState 的小括號內傳入的數值，即為該狀態變數一開始的初始值。
本堂課深入探討了前端網頁基礎與 React.js 的核心應用，並帶領學員完成前後端串接的完整流程。課程前半段指導學員透過 XAMPP 建立本地伺服器，將網頁檔案放置於 C:/xampp/htdocs 目錄中，並實作 HTML 靜態網頁與 CSS 樣式設計，涵蓋文字置中、內外距調整、圖片紋繞圖及外部樣式表整合等技巧。接著，課程過渡至 React.js，學員學習了使用 npx create-react-app 建立專案、透過 className 套用樣式，並利用 JavaScript 的 map 函數動態渲染陣列清單與表格資料。同時，課程詳細解說了 useState 的狀態變數控制，以實作畫面中清單的顯示與隱藏功能。最後階段，學員學習執行 npm run build 打包專案進行佈署，並進階實作 Node.js 後端環境，利用 Express 建立 API 伺服器，再於 React 前端透過 useEffect 呼叫 API 獲取資料，同時安裝 cors 套件解決跨網域請求問題，完成前後端資料互動的基礎架構。
講師示範使用命令列建立 React 專案，並指導下載安裝 XAMPP 伺服器軟體。
在 C:/xampp/htdocs 資料夾下建立基本的 HTML 靜態網頁並插入圖片元素。
學習設定網頁背景顏色、字體大小、圖片邊框以及使用浮動屬性製作文字紋繞圖效果。
利用無序清單與超連結標籤，實作不同網頁間跳轉的導覽列菜單。
將分散的行內樣式集中至 Style.css 檔案中，並在 HTML 檔頭進行外部引入，方便統一管理風格。
清理 React 專案預設程式碼，並在 React 中套用自定義的 className 與 CSS 檔案。
不再手動逐行撰寫 HTML，改用陣列結合 .map() 方法迴圈渲染出動態名單。
利用 React 的 useState 宣告狀態變數，綁定按鈕點擊事件以切換 true 與 false 狀態。
透過三元運算子與狀態變數，依據條件判斷來決定畫面上區塊的顯示或隱藏。
將簡單的字串陣列改為包含姓名、圖片與分數的物件陣列，並建立 HTML 表格結構來呈現。
將動態資料綁定至表格的欄位中，並解決圖片路徑的正確讀取方式。
示範如何向 AI 工具提供指令，快速獲取現代化的表格與按鈕樣式，並貼入 CSS 檔案中。
執行 npm build 將 React 專案打包，並將生成的靜態檔案複製至 htdocs 資料夾供 Apache 伺服器運行。
初始化新的 Node.js 專案並安裝 Express 與 Nodemon，編寫伺服器腳本提供 API 介面。
在 React 端使用 useEffect 在組件載入時向後端發送 fetch 請求，並在後端安裝 cors 套件以解決跨網域限制。
答案：B
講師提到設定 body 或 container 顏色時，使用的 CSS 屬性是 background-color。
答案：A
為了讓文字包圍相片（紋繞圖），講師將相片加入 float: left 的 CSS 命令，並將其放在文字段落中間。
答案：C
講師表示在 JavaScript 世界中，可以使用 .map 函數逐個抽出來並生成對應的清單元素。
本次課程是 React.js 的第三堂課，導師帶領學員從基礎的環境建置開始，使用終端機指令建立名為 test3 的 React 專案，並深入講解 Component 的三大架構與 JSX 的語法特性。課程前半段著重於表單處理與狀態管理，示範如何運用 useState Hook 來收集使用者輸入的人名與電郵，並將資料儲存於陣列中，透過 map 函數動態渲染出使用者資料表格。課程中段詳細教學如何實作 CRUD 功能，包含利用 spread operator 與 splice 方法來新增、刪除及更新表格內的特定使用者資料。進入後半段，導師引導學員進行 Component 重構，將原本龐大的應用程式拆分為 UserForm 與 UserTable 兩個獨立的組件，並講解如何在父子組件間傳遞 props 與狀態。最後，課程介紹了 react-router-dom 套件，實作基礎的路由 (Routing) 切換，讓學員能夠打造具備動態頁面導覽功能的應用程式。
導師示範使用 npx create-react-app 指令建立名為 test3 的全新 React 專案。
講解 Component 必須包含的 Import、Body 與 Export 三部分，以及 JSX 語法的基本應用。
介紹如何匯入與宣告 useState，並利用狀態變數即時控制網頁畫面的改變。
在 app.js 中建立基本的註冊表單結構，並將樣式屬性綁定到 app.css 以將元件置中。
示範如何利用 onChange 事件擷取輸入框的值，並自動更新至對應的 State 中。
教導學員透過 map 函數將 State 陣列中的使用者資料動態轉換成 Table Row 渲染至畫面上。
介紹從 map 中取得陣列索引值，並透過 splice 函數刪除特定位置的使用者資料。
實作點擊 Update 按鈕後，將選定使用者的資料反向填入輸入框內的機制。
為了共用 Save 按鈕，使用一個變數旗標 (Flag) 來判斷當下是執行新增資料還是更新資料的動作。
宣告一個 updateIndex 狀態，確保在更新模式下系統能記住哪一筆陣列索引正在被修改。
為了解決程式碼過於肥大的問題，建立 UserForm 與 UserTable 兩個獨立的組件檔案。
將 app.js 中的表單及表格程式碼，分別剪下並貼入對應的新組件之中，進行介面分離。
學習將父組件 (app.js) 的狀態變數與處理函式，當作 Props 傳遞給子組件使用。
透過終端機指令安裝 react-router-dom，準備實作 React 專案的路由切換功能。
使用 BrowserRouter 與 Routes 定義多條路徑，並透過 Link 標籤實現動態導覽跳頁。
答案：B
導師解釋第一條路徑 Path 等於 /Form 時 Element 等於 UserForm，代表網址列符合該路徑便會顯示對應組件。
答案：B
導師說明若要畫面跟隨變數移動，就必須從 React 引入 UseState 來設定狀態變數。
答案：D
課程中反覆示範使用 map 函數搭配大括號來遍歷陣列，動態渲染表格與清單。
本堂課為 React Fundamentals 的第四堂，主要教授如何使用 React 建立一個包含多個頁面的單頁應用程式 (SPA)。課程首先引導學生透過 npx create-react-app 建立專案，並安裝 react-router-dom 及 react-bootstrap 工具。接著透過 AI 輔助建立 Home、About Us、Contact Us 與 Products 四個頁面的元件結構。課程詳細示範如何在 app.js 中配置 BrowserRouter、Routes 以及 Link，實現動態路由跳轉。隨後進行各個頁面的實作，包含利用 public 資料夾載入圖片、運用 useState 綁定聯絡表單的輸入狀態，以及使用 map 函數動態渲染產品清單表格。為了增強網頁視覺效果，課程導入了 React Bootstrap，實作 Navbar 導覽列以及排版樣式。在進階應用部分，課程解說了如何實作帶有參數的產品詳情頁，並運用 useNavigate 與 useParams 來處理導航，同時示範將狀態提升 (Lifting state up) 到最高層級以達成元件間的資料共用。後端整合環節中，講師利用 Node.js 與 Express 建立後端 API 伺服器，並安裝 cors 解決跨域問題，再從 React 透過 useEffect 在頁面載入時 fetch 獲取伺服器資料。最後，課程展示如何執行編譯指令打包專案，將靜態檔案部署至 XAMPP 的 htdocs 中，並針對部署後的圖片路徑問題提出將圖片移至 src 搭配 import 的解決方案，完整串聯全端開發與部署的流程。
回顧上堂課內容並使用 create-react-app 指令建立名為 Test4 的新專案。
示範安裝 react-router-dom 與 react-bootstrap 套件以支援路由跳轉及美化頁面。
利用 AI 工具生成單頁應用程式所需的 Home, About Us, Contact Us, Products 四個基本元件。
在 app.js 中引入路由元件，並利用 path 與 element 屬性連結網址路徑與自訂頁面。
將背景圖片放入 public 資料夾中，並於首頁元件透過相對路徑直接載入呈現畫面。
實作聯絡表單功能，使用 useState 來儲存並更新使用者的名稱、電話與電郵資料。
在產品清單頁面中，利用 map 函數將產品陣列資料動態渲染成表格，並插入網路圖庫連結測試。
在專案中全面導入 React Bootstrap 語法，加入 Container 等容器並在 index.js 引入 CSS 樣式檔案。
將原本簡單的文字連結替換為 Bootstrap 的 Navbar 組件，實作響應式導覽選單。
在產品清單加入按鈕，並利用 useNavigate Hook 撰寫按鈕點擊後控制畫面跳轉至詳情頁的功能。
透過 useParams 抓取網址上的產品 ID，並將產品資料的狀態提升至 app.js 以便跨元件共享資料。
開啟另一個專案資料夾撰寫 Node.js 與 Express 伺服器程式碼，提供 JSON 格式的產品 API。
在 React 專案中加入 useEffect Hook，使得網頁載入時能自動從後端伺服器取得產品資料。
開啟 XAMPP 伺服器，將 React 執行 npm run build 打包後的靜態檔案放置於 htdocs 中進行部署。
將 public 中的圖片轉移至 src/assets 目錄下並透過 import 語法載入，以修正編譯部署後圖片無法顯示的問題。
答案：B
講師為了處理打包後靜態資料夾 URL 解析的問題，將原本放在 public 的圖片移到了 src 下的 assets 資料夾，改用 import 變數的方式引入，讓 Webpack 幫助處理正確路徑。
答案：B
講師強調 Browser Router (課程中簡稱 Router) 是一個必需品，要用來包含並裝載所有路由相關的元件。
答案：A
為了進行部署，講師在終端機輸入 npm run build，指令執行後會產生一個 build 資料夾，裡面裝載了可用於正式環境的靜態檔案。
4 LESSONS · 10 HOURS
從 Node.js、Express 與 REST API 開始，連接 MongoDB、Mongoose 及 MySQL，掌握 CRUD、Postman、使用者管理、MVC 架構與完整 E-Shop 後端開發。
以下內容直接取自每段完整課堂錄影及已建立的 AI 學習資料。
本節課是Node.js開發的基礎入門，主要涵蓋了後端伺服器與資料庫的初步建構。課程從安裝Node.js與設定開發環境開始，介紹如何使用VS Code編寫並執行第一支Node.js程式。隨後講解透過npm安裝Express框架，建立基礎的Web Server，並實作GET API來接收與回應前端表單的數據。課程也教授使用nodemon自動重啟伺服器，以及設定靜態資料夾提供HTML網頁。最後半段進入資料庫準備，分別安裝並介紹關聯式資料庫MySQL與非關聯式資料庫MongoDB，示範建立資料庫、資料表與基礎的資料新增指令，為後續全端開發奠定基礎。
介紹Node.js開發環境並示範下載與基礎安裝流程。
啟動VS Code編輯器並建立server.js檔案來編寫伺服器代碼。
撰寫Express應用程式監聽特定Port並設定基礎的API路由。
建立public資料夾並實作靜態表單網頁供使用者填寫資料。
設定表單action屬性，將GET請求發送至指定的後端路徑處理。
介紹JavaScript中的反引號語法，用以跨行並嵌入變數至字串中。
安裝nodemon套件以簡化修改程式碼後必須手動重啟伺服器的繁瑣流程。
在首頁加入背景圖片與導覽超連結，並透過CSS屬性調整圖片寬度。
講解在備份或轉移專案時，只需打包程式碼而不需打包node_modules資料夾。
示範從官網下載MongoDB伺服器與Shell工具並進行安裝。
透過Appserv組合包安裝包含Apache與MySQL的網頁開發環境。
比較MySQL與MongoDB在資料庫、資料表與文件結構上的術語及概念差異。
透過圖形化介面在MySQL中建立Student資料表並設定各欄位的資料型態。
示範撰寫SQL語法 (INSERT INTO) 將學生資料寫入至MySQL資料表中。
在MongoDB Shell中建立Collection並利用insert指令插入JSON格式的Document。
答案：B
課程中示範了使用 express 這個最受歡迎的Node.js網頁伺服器框架來建立服務。
答案：C
使用反引號 (Backtick / 數字1鍵左側) 可以宣告樣板字面值，直接跨行並用 ${變數} 插入值。
答案：D
表單的 action 屬性決定了使用者點擊送出後，資料要被發送到哪一個後端路徑。
本節課主要教導學生如何從零開始建立一個 Node.js 伺服器並連接 MongoDB 資料庫，同時學習利用 AI 工具來加速程式碼開發。課程從環境準備與專案初始化開始，介紹如何透過命令提示字元建立基本 Node.js 環境。隨後講師示範如何設定靜態資料夾提供 HTML 網頁，建立註冊表單，並設定後端 API 使用 GET 方法及 Query 來接收前端資料。接著課程進入資料庫階段，引導學生在 MongoDB Shell 中建立資料庫與集合，並手動插入測試資料。為了讓 Node.js 能與資料庫互動，課程中安裝了 Mongoose 模組，詳細講解連接本地資料庫、定義 Schema 與 Model 的步驟。最終，學生透過實作 API 完成新增使用者資料、讀取所有使用者清單顯示於網頁、刪除特定使用者以及更新使用者資料的完整流程，並在實作過程中學習了基礎的除錯技巧與非同步操作概念。
回顧 Node.js 伺服器引擎與資料庫概念，並請學生開啟命令提示字元確認開發環境。
介紹如何利用 POE 等 AI 工具撰寫提示詞來自動生成 Node.js 專案程式碼。
撰寫基本的 Express 伺服器程式碼，並學習透過 Nodemon 啟動伺服器監聽通訊埠。
向 AI 查詢並實作設定 static folder，以便讓伺服器能提供靜態的 HTML 網頁。
透過 AI 生成 HTML 註冊表單，讓使用者能夠在網頁上輸入名稱與電子郵件。
在後端設定接收資料的 API，並學習使用 Query 參數來取得 GET 請求中的表單內容。
開啟 MongoDB 終端機介面，並撰寫指令來建立新的資料庫與使用者集合。
練習使用 insert 指令將多筆不同的使用者文件手動寫入 MongoDB 集合中。
為了解決應用程式連接資料庫的需求，在專案中執行安裝 Mongoose 模組的指令。
在 Node.js 中載入 Mongoose 並撰寫連接至本機通訊埠 27017 資料庫的程式碼。
為無結構的 MongoDB 定義 Mongoose Schema，並建立對應的操作 Model 實體。
結合非同步函數 async 與 await，將從前端表單收集到的資料儲存至資料庫中。
撰寫新的 API 使用 find 方法取得資料庫所有紀錄，並生成前端網頁來展示清單。
利用 AI 輔助建立刪除 API，並在前端表格中加入刪除按鈕進行前後端整合。
簡單帶過更新使用者資料的 API 實作，並勉勵學生善用工具減輕開發負擔與練習除錯。
答案：D
在 (00:37:56) 提到：「我們有一個靜態folder，是專裝一些index file或者什麼的」。
答案：B
在 (00:54:21) 指出表單的目的是將「人名和密碼電郵 (name and email) send給註冊收的」。
答案：C
在 (00:55:20) 示範送出表單後會出現「cannot get register，因為我們還沒設定API去修件」。
本節課主要講解如何利用AI工具輔助進行Node.js後端開發與全棧系統搭建。課程首先介紹了初始化Node.js項目，安裝Express框架並建立基本伺服器。隨後引導學生使用Postman測試GET、POST、PUT與DELETE四種API請求。在資料庫階段，示範了操作MongoDB，並透過Mongoose套件將Node.js與資料庫連接以實現數據持久化。完成後端API後，課程進一步利用AI生成包含HTML與Bootstrap的前端靜態網頁，實作產品管理的CRUD介面功能。最後段落引入了使用者管理與登入機制的概念，示範建立Users資料表與對應的API，為後續完整的系統權限管控打下基礎。
導師介紹如何透過AI工具輔助建立Node.js專案，並提醒開發環境需預先準備好相關套件。
解說建立 server.js 檔案，並貼上由AI生成的程式碼來監聽埠號與建立基礎伺服器。
引導學生下載並安裝Postman，用於後續後端API的請求測試。
說明POST方法的功能為新增資料，並示範如何在Postman中輸入JSON格式資料送給伺服器。
開啟全新的終端機畫面進入 mongosh，建立產品的資料庫與資料表，手動插入範例資料。
透過安裝mongoose套件，並將連接語法與Schema/Model設定加入伺服器，讓Node.js連上MongoDB。
示範如何複製產品ID放入網址，透過PUT請求將新的價格資料更新進資料庫中。
建立 public 資料夾與 index.html，為全端應用的網頁前端介面做準備。
針對伺服器無法找到path模組的錯誤，示範將錯誤訊息餵給AI獲取解法並修正程式碼。
向AI要求引入Bootstrap，讓原本簡陋的HTML列表變為排版整齊的現代網頁。
為了加入系統保安機制，在MongoDB中建立專門存放帳號密碼的使用者集合。
運用AI產生四組針對User資料表進行新增、讀取、更新、刪除的後端API並放入伺服器。
要求AI生成同時具備Product和User管理選項的切換選單網頁，提升系統實用性。
要求AI生成登入頁面(login.html)，並加上負責檢驗帳號登入的後端API Endpoint。
嘗試讓系統先顯示登入頁，登入成功才顯示主選單，並對下次的雲端部署課程做預告。
答案：C
課程中特別請學生開啟瀏覽器下載 Postman，因為所有 API 測試都需要靠它來協助執行。
答案：C
導師說明 update 的 API 已經做好了叫做 PUT，並示範在 Postman 中使用 PUT 方法搭配產品 ID 來更新資料。
答案：B
導師解釋，無論是產品或使用者資料，每一個 Collection 都必定會有一個 schema 加 model 跟著定義。
本節課堂繼續教授如何使用 AI 工具輔助開發 Node.js 網頁應用程式，以建立一個結構更完整的電子商務 (E-Shop) 項目。課程首先引導學生從零開始建立 Express 伺服器，並設立 public 資料夾以存放圖片等靜態檔案。接著，利用 MongoDB 建立名為 products 的資料庫，透過 Mongoose 連接後端伺服器與資料庫，將產品資訊與圖片順利顯示在前端網頁上。課堂中段著重於建立後台管理介面 (Admin Page)，並示範如何優化程式碼架構，將原本全部集中在單一檔案的程式碼拆分為 MVC 架構，分別建立 models 和 routes 資料夾來管理資料庫模型與 API 路由，以利後續維護。隨後，課程示範了如何透過 Postman 工具來獨立測試 GET、POST、UPDATE 及 DELETE 等 API 端點的運作狀態，確保資料庫的增刪查改功能正常。最後階段，課程教授如何建立使用者帳號 (User Collection)，引入 bcrypt 套件為密碼進行加密保護，並實作 Login Page 及 Middleware (中介軟體) 來保護後台管理介面的路由，確保只有成功登入的使用者才能進入後台進行產品管理。整節課強調透過向 AI 下達精確提示來生成程式碼，並從實際發生的路徑與伺服器錯誤中學習除錯技巧。
導師介紹如何使用 AI 工具輔助建立全新的 Node.js 專案與 Express 伺服器。
在專案中建立 public 資料夾，專門用來存放前端網頁需要的靜態檔案與圖片。
透過終端機指令建立 MongoDB 資料庫與產品資料集合，並插入範例資料。
安裝 Mongoose 套件，連接後端伺服器與資料庫，將產品資訊顯示在網頁上。
示範從網路下載測試用的產品圖片，統一格式後放入伺服器的 image 資料夾中。
指導學生如何透過 AI 修正程式碼中的圖片路徑，確保產品照片能正確顯示於網頁。
初步建立後台管理頁面，準備實作新增、更新與刪除產品的管理功能。
為解決主程式碼過於龐大的問題，建立 models 與 routes 資料夾分離資料庫與路由邏輯。
將後台產品以表格形式呈現，並隱藏不必要的欄位以保持版面整潔。
透過 AI 將原本直接顯示的表單改為點擊按鈕後彈出的對話框形式。
介紹如何使用 Postman 軟體來獨立測試各個 API 路由的運作是否正常。
在 MongoDB 中建立獨立的使用者集合，並預先準備測試用的管理員帳號。
為了帳號安全性，安裝 bcrypt 套件來將使用者的密碼進行加密處理。
建立 Login Page 與 Middleware，確保只有授權使用者能存取 Admin Page。
答案：C
導師在課堂多次提及並示範打開 Poe 來發送 Prompt 獲取程式碼。
答案：C
導師指示創建 public 資料夾，用以存放對外公開的靜態檔案與網頁。
答案：C
導師開啟了 Postman 工具，教導學生如何模擬前端發送 API 請求。
把已掌握的技術結合 ChatGPT、Claude、Copilot 與 Gemini，生成、檢查和改善程式碼。
4 LESSONS · 10 HOURS
運用 AI 輔助建立 HTML、CSS、JavaScript、Node.js、MySQL 與 ReactJS 全端網頁系統，並完成實用 CRUD 專案。
以下內容直接取自每段完整課堂錄影及已建立的 AI 學習資料。
本課程為AI與網頁開發的基礎入門。導師首先指導安裝開發必備的 Node.js、VSCode 與 XAMPP 套件，並講解網頁前後端架構。實作部分從基礎 HTML 標籤開始，包含標題、超連結與圖片，接著使用 CSS 進行樣式與排版設定。過程中示範了如何利用 AI 工具快速生成、統一網頁風格並建立表單。隨後介紹 JavaScript 的點擊事件與資料讀取，示範如何在前端收集使用者輸入。後端部分則涵蓋透過 phpMyAdmin 建立 MySQL 資料庫，以及使用 Node.js 與 Express 框架架設 API 伺服器。最後運用 mysql2 套件成功連接資料庫並讀取數據，完整示範了前後端串接的基本流程。
導師帶領學員前往官網下載並安裝 Node.js，作為後續課程的執行環境。
介紹並下載免費的開發工具 VSCode，並展示如何調整背景主題顏色。
指導下載與安裝包含 Apache、PHP 和 MySQL 的 XAMPP 套件，為建立本機伺服器作準備。
解說 Web Development 中前端 (HTML, CSS, JS) 與後端 (Apache, Node.js, Database) 的基本運作原理。
利用 VSCode 在 htdocs 資料夾內建立 index.html，並練習使用 H1 與 P 標籤。
透過設定內部 CSS 風格，修改網頁背景、文字顏色以及標題置中等視覺效果。
介紹如何使用 PoE 或 Copilot 等 AI 工具，快速將網頁原始碼進行排版與風格優化。
實作一個收集人名、電郵與留言問題的表單，包含各欄位的 input 標籤與發送按鈕。
將寫好的三頁 HTML 交給 AI 生成統一的視覺風格，並自動加入網頁導覽選單。
在網頁中加入 JavaScript，利用按鈕的 onClick 事件觸發並跳出 alert 警告視窗或輸出除錯訊息。
示範透過 document.getElementById().value 讀取使用者輸入的資料，並在提交後清空輸入框。
進入 phpMyAdmin 建立 contactdb 資料庫，並透過 AI 產生的 SQL 語法建立資料表及測試資料。
使用 npm init 指令建立 Node.js 專案，並安裝 Express 模組作為 API 伺服器基礎。
撰寫簡單的 server.js 程式碼，啟動監聽 3000 埠口的 Express API 伺服器並進行測試。
安裝 mysql2 套件並結合 AI 生成的連線設定，讓 Node.js 成功讀取資料庫數據，完成前後端串接演示。
答案：B
導師說明 Class 是自己創造的，必須在名稱前加上 Full stop (點)，例如 .ImageStyle 以便系統識別。
答案：C
導師說明打 npm init -y 可以一步到位地建立 package.json，-y 代表自動回答所有問題為 yes。
答案：C
課程說明前端主要使用 HTML、CSS 與 JavaScript，而 Apache 屬於後端的 Web Server。
本課堂詳細講解了如何使用 Node.js、Express 與 MySQL 構建 API 伺服器並進行前端整合。課程首先引導學生初始化專案、安裝 Express 套件建立伺服器及路由，並引入 Postman 工具進行各項請求測試。隨後介紹 nodemon 實現自動重啟與設定靜態資料夾。中段進入資料庫實作，教授建立 MySQL 產品資料表，安裝 mysql2 讓 Node.js 連接資料庫，並實作完整的 CRUD API 端點。最後階段涵蓋前端網頁整合，在 Apache 伺服器使用 fetch 呼叫 API，並安裝 cors 套件解決跨網域請求限制，成功打造具備產品管理功能的前端應用。
使用 npm init 指令建立新的 Node.js 專案，並準備後續套件安裝。
建立伺服器變數，設定接受 GET 請求的路徑與回傳回應。
介紹測試 API 專用的 Postman 軟體，並指導下載與執行基本測試。
介紹全域安裝 nodemon 工具，以實現伺服器程式碼變更後自動重啟。
透過程式碼設定 Public 資料夾作為靜態檔案的存放位置以提供網頁。
準備連接資料庫的新專案，並安裝 Express 及 MySQL 互動套件。
使用 AI 輔助產生 SQL 語法，建立產品資料表與設定自動遞增的主鍵。
加入 json 中介軟體以解析傳入的資料，準備實作新增產品功能。
撰寫 SQL Select 語法從資料庫獲取所有產品資料，並回傳 JSON 結果。
透過 URL query 接收產品 ID 參數，並查詢與回傳特定產品資訊。
根據傳入的產品 ID 執行 Delete SQL 指令，將產品從資料庫移除。
接收新的產品內容，並使用 Update 語法將資料庫內的紀錄進行更新。
建立 HTML 網頁並使用 fetch 指令向 Node.js 伺服器請求產品清單。
講解網頁跨網域請求的限制，並安裝與設定 cors 套件來解決此問題。
在網頁上實際測試新增、刪除及更新按鈕，成功串接前端與後端資料庫。
答案：D
課程中提到在數字 1 左邊的按鈕可以解決多行字串報錯的問題，讓網頁 HTML 得以分行顯示。
答案：A
導師介紹安裝 lookmon (nodemon 讀音) 讓大家不用經常 restart 伺服器，它會自動套用變更。
答案：C
課程提到安裝套件後，package.json 會多了一行設定告訴別人已經安裝了相關套件。
本節課主要介紹了 ReactJS 的基礎知識及實戰應用。課程首先指導學生使用指令建立 React 專案，並解析了專案的目錄結構與 app.js 的核心作用。接著詳細講解了 JSX 語法規則，強調多個元素必須有一個根元素包覆，並示範了引入 CSS 樣式的方法。課程進而教授如何在按鈕上綁定帶有參數的 onClick 事件，以及利用 map 函數動態渲染陣列資料至表格中。在處理非同步資料方面，導師介紹了狀態變數的概念，示範如何引入 useState 定義狀態，並運用 fetch 函數從外部 API 獲取 JSON 數據來即時更新網頁畫面。課程後半段帶領學生快速搭建一個基於 Node.js、Express 和 CORS 的後端伺服器，並成功將 React 前端與自建的後端 API 連接，實現了前後端分離的資料串接，為後續更深入的 CRUD 操作奠定基礎。
介紹如何使用指令建立 React 專案並啟動開發環境伺服器。
解析專案的目錄架構，說明 app.js 與 src 資料夾供應內容的作用。
強調所有回傳的元素必須包裹在單一的父節點標籤中。
講解如何在 onClick 事件中使用箭頭函數呼叫帶有參數的函數。
示範如何利用 map 函數有效率地動態產生列表與表格結構。
介紹透過 fetch 函數從網際網路上抓取開放 API 的資料。
指導學生開啟開發者工具在 Console 檢查成功下載回來的資料。
說明普通變數無法更新畫面，必須引入 useState 定義狀態變數。
示範將狀態更新與鉤子函數搬回元件內部以解決呼叫錯誤。
練習串接相片資料的 API 並嘗試在前端網頁渲染出圖文表格。
利用 Express 建立自家的 Node.js 後端伺服器並提供自訂 API。
解釋為何必須使用 cors 套件來允許 React 前端存取不同 Port 的後端資料。
利用 AI 除錯，確保後端 API 回傳正確的 JSON 格式而非 CSV。
完成前後端串接，讓 React 應用程式讀取自建 Node.js 伺服器提供的產品清單。
為完成的應用程式加上樣式表設計，並總結當日進度與未來 CRUD 實作預告。
答案：B
導師在示範建立 project 時使用了 npx create-react-app 指令。
答案：C
導師示範處理清單和表格時，都是使用 map function 將陣列內的水果或學生資料逐個抽出印出。
答案：C
導師向 AI 提示要求加上 cors，解釋這是要幫助解決跨 domain calling 的問題，不然前端會 call 不到後端 API。
本課程詳細示範如何從零開始構建一個完整的全端書店管理系統，涵蓋了資料庫設計、後端 API 開發以及前端使用者介面建置。首先，課程引導學員透過 MySQL 建立名為 bookstore 的資料庫，並設計包含書本 (books)、使用者 (user) 與借閱紀錄 (loan) 三個資料表的關聯式結構，同時示範如何透過 AI 工具生成 SQL 語法與測試用假資料。接著，進入 Node.js 與 Express 框架的後端開發階段，逐步設定伺服器並實作針對使用者、書本及借閱功能完整的 CRUD (新增、讀取、更新、刪除) RESTful API，並利用 Postman 進行 API 的測試與除錯，確保資料互動正確無誤。最後，課程轉向使用 React.js 進行前端介面開發，示範如何透過 fetch 指令串接後端 API，運用 useState 與 useEffect 等 Hooks 進行狀態管理與資料載入。為提升程式碼可讀性與維護性，課程進一步將龐大的 app.js 拆分為獨立的 user、book 與 loan 管理組件 (Components)，並加入簡易的對話框與 UI 樣式設計，最終完成一個具備基本切換與操作功能的現代化網頁應用程式，大幅提升了學員運用 AI 輔助開發的效率與實作能力。
介紹建立 Finance 與 Bank 資料夾並準備開發環境。
使用 AI 提示詞設計包含 books、user、loan 的資料庫架構。
透過 XAMPP 啟動資料庫並執行 SQL 腳本建立資料表與假資料。
在後端資料夾執行 npm init 並安裝 Express 與 MySQL 相關套件。
透過 AI 生成針對使用者資料的各項 RESTful API 功能。
示範如何透過 Postman 工具進行 GET、POST 等 API 請求測試。
使用 create-react-app 建立前端專案並啟動開發伺服器。
在 App.js 中使用 fetch 呼叫後端並透過 useState 儲存資料。
設定網頁初次渲染時自動向後端獲取資料庫內容。
在前端清單加入按鈕並綁定刪除與更新的 API 呼叫。
加入對話框機制讓使用者能輸入新資料並傳送至後端儲存。
將原本龐大的 App.js 邏輯拆分出獨立的 User Manager 組件。
延續拆分概念，利用 AI 協助生成獨立的書本與借閱管理組件。
為各個組件加上基本 UI 樣式並回顧專案的整體開發流程。
答案：C
講師建議全域安裝 nodemon (用 -g)，以便隨時監聽程式碼修改並重啟伺服器。
答案：C
這樣可以讓使用者基於舊資料進行修改，避免不必要的重新輸入或錯誤清空。
答案：C
使用 useState 宣告 user 變數來儲存從 API 取得的資料。
不只是跟隨影片完成練習，而是真正理解技術、獨立解決問題，並把 AI 變成可控制和可驗證的工作助手。
理解 ReactJS 前端、NodeJS 後端、REST API 與資料庫如何組成完整網頁系統。
能夠完成介面、表單、CRUD、路由、驗證及資料庫連接等核心功能。
能追蹤資料與程式執行流程，定位前端、後端、API 及資料庫問題。
運用 AI 產生、檢查、重構及改善程式碼，而不是在不理解的情況下直接複製。
把 ReactJS、NodeJS、資料庫與 AI 輔助流程整合成可展示、可維護的實戰專案。
擁有豐富的商業網頁及應用程式系統開發經驗，以及超過 25 年教學經驗。教學方式清晰直接，擅長把複雜技術拆解成容易理解、可以實際應用的步驟。
曾為知名企業、政府部門及本地大學提供培訓，涵蓋辦公室自動化、數據科學、數據分析，以及商業網頁和 Apps 系統開發；並擔任 NCC Education 及 University of Greenwich 的主要講師。
完整涵蓋 ReactJS 前端、NodeJS／Express／MongoDB 後端，以及 AI 輔助 MySQL、REST API 與全端系統實作，共 12 節、30 小時錄影課程。
本頁所有課程均為錄影課程；報名後即可開始，無需等待開課。
Below are parts of our client list
Copyright © 2025 Unisoft Education Centre. All Rights Reserved