IT專才培訓 - 技術與學術兼備
每課均根據完整約 2.5 小時課堂逐字稿整理，展示實際摘要、時間章節及測驗題目。
本課程為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 成功讀取資料庫數據，完成前後端串接演示。
本課堂詳細講解了如何使用 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 套件來解決此問題。
在網頁上實際測試新增、刪除及更新按鈕，成功串接前端與後端資料庫。
本節課主要介紹了 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 實作預告。
本課程詳細示範如何從零開始構建一個完整的全端書店管理系統，涵蓋了資料庫設計、後端 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 樣式並回顧專案的整體開發流程。
本課程帶領學員了解如何利用AI輔助工具（如Poe與Copilot）大幅提升Android應用程式的開發效率。課程初期詳細示範了Android Studio的介面、建立Empty Views Activity專案的流程，以及XML介面檔與Kotlin程式檔的基礎架構與關聯。隨後，導師講解了虛擬機（Emulator）的設定方法與Logcat除錯工具的使用，並實作自定義的Student與Teacher類別，學習物件實體化的概念。課程後半段著重於AI提示詞的撰寫技巧，示範如何讓AI快速生成程式碼以及指定的介面佈局（如LinearLayout）。最後，學員學習了UI元件在ConstraintLayout的定位原理、設定元件ID，以及使用findViewById與setOnClickListener將介面按鈕與程式邏輯進行綁定，並透過AI進一步完成按鈕的Toggle切換狀態功能，完整體驗從無到有的AI輔助開發流程。
介紹透過AI輔助進行Android開發的全新模式，並示範正確選擇Empty Views Activity建立專案。
講解如何使用Android內建的模擬器或實體手機測試開發中的應用程式。
說明Class類別的結構，包含變數區與Function區，以及覆寫(Override)等基本概念。
示範如何手動建立一個Student類別，定義名稱、年紀與電郵等變數及列印函式。
在MainActivity中呼叫建立好的Student類別，宣告變數並寫入實體資料。
說明如何過濾標籤並使用Logcat來查看程式中Log.d印出的Debug資訊。
介紹Poe.com與Copilot等AI工具，為後續生成程式碼做準備。
示範提供範例給AI，讓其快速生成Teacher類別的完整程式碼，並貼回專案執行。
開新專案開始學習UI介面設計，認識Test View等元件與畫面的縮放。
學習在UI介面中拉定位線，避免元件在執行時全部集中在左上角。
編寫提示詞讓AI自動生成包含特定顏色、字體大小與線性佈局(LinearLayout)的程式碼。
將AI生成的XML程式碼貼入Code View中，並觀察Design View的變化與除錯。
替畫面上每個Button與Test View設定唯一ID，以便在程式端進行呼叫綁定。
撰寫程式碼透過findViewById綁定介面，並加入setOnClickListener來觸發文字變更。
向AI提出新需求，利用布林值變數將按鈕升級為可在兩種狀態間切換的Toggle功能。
本堂課程主要教授Android應用程式開發，涵蓋介面設計、頁面跳轉與資料庫建立。首先，導師指導學生在Android Studio中開啟新專案，並示範如何清理多餘的程式碼以保持專案整潔。接著，介紹如何使用介面編輯器建立包含文字輸入框、按鈕及文字顯示區的表單，並完成元件的ID命名與版面定位。課程重點講解了如何在程式碼中宣告變數並使用findViewById綁定介面元件，以及設定按鈕監聽器來收集使用者輸入的資料。隨後，導師示範了如何建立第二個Activity，並利用Intent物件實現頁面之間的跳轉與資料傳遞。在課程後半段，教學重點轉向SQLite資料庫的應用。導師引導學生建立SQLiteOpenHelper與資料模型類別，學習撰寫SQL指令來建立資料表，並實作新增與查詢功能。最後，課程展示了如何結合使用者輸入表單與資料庫，將收集到的姓名與電子郵件存入SQLite，並透過Logcat工具過濾與驗證資料是否成功儲存，為後續的資料庫進階操作打下基礎。
建立新專案並調整API版本與清理多餘的預設程式碼以保持專案整潔。
在Layout加入文字輸入框、按鈕與文字顯示區並進行排版與定位。
在MainActivity宣告變數並利用findViewById找出介面元件。
設定OnClickListener以擷取使用者輸入的文字並顯示於畫面上。
將版面與程式碼提供給AI工具，快速產生包含多種輸入欄位的介面。
新增DataActivity與設計對應的介面以準備接收從主頁傳來的資料。
編寫Intent程式碼讓按鈕觸發後能切換至第二個頁面。
在第二頁使用finish方法關閉當前頁面，讓畫面返回至主頁。
使用putExtra將收集到的人名資料打包，準備傳送至第二個頁面。
利用getIntent和getStringExtra解析傳入的資料並顯示在畫面上。
開啟全新的資料庫專案，修正API版本問題並清理多餘程式碼。
解說資料庫基礎結構並撰寫Create Table的SQL指令來定義資料表。
繼承SQLiteOpenHelper並實作onCreate與onUpgrade等必要方法。
新增Staff類別以明確定義資料庫內每一筆紀錄的結構與屬性。
利用AI修改MainActivity以收集姓名及電郵並寫入SQLite，透過Logcat驗證。
本堂課詳細講解了在Android Studio中開發應用程式的進階功能，主要涵蓋三個核心部分。首先，教授如何建立及運用出名難處理的RecyclerView，包含設定Data Class、Item Layout以及Adapter Class，將資料以清單方式呈現，並介紹將圖片放入drawable資料夾的處理技巧。接著，教學深入探討結合SQLite資料庫進行CRUD（新增、讀取、更新、刪除）操作，示範如何建立DBManager管理資料，以及設計新增與更新資料的介面，並處理頁面跳轉與生命週期。最後，引入網路連線概念，指導學員使用Volley函式庫從遠端伺服器（如JSONPlaceholder）下載JSON資料，設定網路權限，並將擷取到的真實網路數據整合至RecyclerView中顯示。
介紹 RecyclerView 這個用來呈現資料清單的重要介面與其建立專案的流程。
講解 RecyclerView 需要配備的三樣基礎檔案：Data Class、Item Layout 與 Adapter Class。
手把手示範如何利用 TextView 與 ImageView 等元件排版每一行資料的外觀，並設定合適的元件屬性。
進入最困難的步驟，透過 AI 輔助建立 Adapter，將資料源與排版物件進行綁定及生成。
解說如何從網路下載相片素材，並提醒命名規範，將檔案放入專案的 drawable 資料夾中。
使用 AI 輔助工具快速生成員工清單系統所需的各種檔案與程式碼，提升開發效率。
將 AI 生成的 Data Class、Layout 及 Adapter 程式碼依序貼入 Android Studio 專案並解決錯誤。
使用 SQLite 替換靜態資料，建立 DBManager 來管理新增、讀取、更新與刪除 (CRUD) 的操作。
建立全新的 Activity，包含填寫表單的介面，用以將新的員工資料儲存進資料庫。
解說如何點擊清單進入詳細資料頁面，並在該頁面實作附帶確認對話框的刪除與更新功能。
解決資料修改後主畫面未及時更新的問題，透過 Android 生命週期 onResume 重新讀取資料庫。
介紹透過 Google 提供的 Volley 函式庫，輕鬆解決 Android 應用程式的網路連線與資料下載需求。
示範如何利用免費的測試 API (JSONPlaceholder) 來取得遠端的 JSON 格式假資料。
在 AndroidManifest 設定網路權限，完成資料下載並於 Logcat 中確認回傳的網路數據。
本節課程主要教授如何在Android Studio中整合Firebase服務，並透過AI輔助生成Kotlin程式碼來開發應用程式。前半部重點在於Firebase Realtime Database的實作，涵蓋建立專案、設定測試模式權限、寫入單純字串，以及使用push()方法寫入具備自動產生ID的產品物件（包含名稱、數量與價錢）。隨後引導學生使用AI設計輸入介面，並透過RecyclerView即時顯示資料庫內容，進而實作更新與刪除功能，同時強調Realtime Database即時更新的優勢。後半部則轉入Firebase Cloud Storage，指導學員建立新專案以準備上傳相片，說明如何在AndroidManifest中開啟相機權限、設定FileProvider機制，處理Android新版的執行時權限(Runtime Permission)問題，並比較模擬器與實體機在硬體測試上的差異。
導師介紹Firebase Realtime Database並引導學員登入Google帳號建立新的Firebase專案。
示範在Android Studio建立新的Empty Views Activity專案，並提醒選擇Kotlin作為程式語言。
說明預設資料庫權限為鎖定狀態，為了開發測試必須將權限放寬為Test Mode以允許讀寫。
撰寫程式碼取得Firebase Reference，並成功將Hello World與自訂名稱寫入雲端資料庫。
利用AI產生程式碼，在專案中建立一個包含名稱、數量與價錢等欄位的Product資料類別。
解說並示範使用push()方法將產品資料寫入資料庫，由Firebase自動產生唯一的資料ID。
透過向AI輸入Prompt，快速生成包含產品名稱、數量、價錢欄位及儲存按鈕的UI佈局檔與程式碼。
請AI協助建立RecyclerView、Adapter與ItemLayout，將儲存在Firebase的產品清單顯示在畫面上。
示範在雲端直接修改產品數值，手機端App畫面會立刻同步更新，展示即時資料庫的優勢。
要求AI在每筆資料旁加入更新與刪除按鈕，並在刪除前加入確認對話方塊(Dialog Box)。
解決刪除時清空整個資料庫的錯誤，原因是缺少ID，需將Firebase ID加入Data Class中。
關閉原專案，建立全新的Cloud Storage專案，準備學習如何呼叫相機拍照並上傳檔案。
在AndroidManifest.xml中加入相機使用權限，並新增FileProvider以支援較新的相機呼叫機制。
針對較新Android版本，實作在應用程式執行時動態跳出視窗詢問使用者是否授予相機權限。
導師強烈建議針對相機拍照等硬體功能，使用透過Wi-Fi連線的實體手機進行測試會比模擬器穩定。
試學影片用作示範學習體驗，內容未必與本課程相同
Copyright © 2025 Unisoft Education Centre. All Rights Reserved
