主題一：網站開發基礎與環境設置

- 網站開發基礎知識與技術概覽
- 認識AI輔助程式設計工具 ChatGPT 與 Github Copilot 使用方法與問答技巧
- Visual Studio Code 與 Node.js 開發環境設定
- HTML標籤、CSS屬性與選擇器
- 響應式網頁設計
- 認識 Tailwind CSS
- 認識 JavaScript 程式設計基礎概念

主題二：React.js 與 Next.js
- React 基礎：元件、狀態與生命週期
- React 應用實作：建立動態互動式網頁
- 透過 Next.js 路由系統建立和管理網站應用程式路由
- 串接API取得外部資料

主題三：OpenAI 應用與整合
- 整合 OpenAI 至 React 網站應用程式
- 實作案例(一)：設計一個AI網站語音與文字客服機器人
- 實作案例(二)：設計一個AI內容生成網站平台

主題四：整合資料庫使用Firebase Firestore雲端資料庫
- 在 React 應用中整合 Firestore
- 實作CRUD(Create, Read, Update, Delete) 讓網站可管理或取得來自資料庫中的資料
- Firebase Firestore 存取權限設計

主題五：部署網站
- 將應用程式部署至 Vercel 雲端平台使網站可被客戶看見

在本課程中您將會接觸到的技術：HTML, CSS, Tailwind CSS,JavaScript, React.js, Next.js
在本課程中您將會接觸到的軟體與服務：ChatGPT, Github Copilot, OpenAI, Firebase, Git, Github, Vercel

本課程為入門班，無需有任何網頁設計或程式設計開發經驗。

使用跨平台編輯器 Visual Studio Code 與 Node.js 做為主要開發環境，搭配第三方服務平台Firebase、OpenAI、Github與Vercel。

上述環境可輕鬆安裝於 Windows 及 MacOS 的作業系統下使用。
安裝與設置方式將會於課程中教學，學員不必煩惱上課前須自行安裝任何軟體。

部分課程中會使用的服務如：OpenAI、Github Copilot 為付費服務，同學可於課程中自由決定是否需購買相關服務內容。

OpenAI 模型計費可參考：OpenAI Pricing

國立臺灣科技大學工商業設計系學士學位

(一) 個人網站：
https://enn.design

(二) 經歷：
共生智能股份有限公司 Kyosei.ai 共同創辦人兼前端工程師
Soundscape 前端開發工程師
112年網站無障礙專家學者座談會暨檢測焦點平台會議座談委員
111年網站無障礙座談暨檢測焦點平台會議座談委員
110年網站無障礙規範座談會座談委員
Uninus 合一智聯科技 前端工程師
香港 THE Education Academy Group HK 前端工程師
台北市政府春遊補助管理系統開發
LINE HACK 2018 入選前十強
FMTaiwan線上收聽網站開發者
緯創資通股份有限公司價值創新中心
京尚股份有限公司
微星科技工業設計中心

(三) 教學經歷：
1.2016年至本班教學，授課時數累計至2024年4月21日為6,000小時；
擔任：AI應用網站開發入門 HTML CSS React 結合 OpenAI講師、Python程式設計課程講師、HTML5,CSS3,Bootstrap,jQuery網頁設計基礎班課程講師、Python Flask動態網站與聊天機器人實作班課程講師、React Native開發入門班課程講師、Sketch 3 基礎專題班課程講師
2.緯創軟體股份有限公司：Vue.js前端應用程式設計、React.js前端應用程式設計、Python程式設計課程講師
3.國立臺灣大學：文學數位應用與實作課程合作講師
4.國立臺灣大學：文學編輯的當代型態與數位實作網頁開發技術課程合作講師
5.國立宜蘭大學：微學分課程Python程式設計與網頁爬蟲應用程式實作課程講師
6.國立宜蘭大學：RWD網頁設計與專題實作研習課程講師
7.國立宜蘭大學：Python程式設計與專題實作研習課程講師
8.哈瑪星科技：jQuery基礎程式設計應用與開發、Sass & Scss網頁設計切版課程講師
9.中華民國國防部：React Natvie程式設計課程講師

(四) 興趣領域：
使用者介面設計、使用者經驗設計、HTML5、CSS3、JavaScript、React.js網頁應用程式開發、React Native手機應用開發、Python、Node.js、股票投資與期權交易。

(五) 特殊經歷：

2021年經濟日報第12屆權民搶百萬權證交易競賽 - 年度績效獎

(六) 影音創作：

(七) 專欄文章：

1. 使用ChatGPT解決CSS Filter模糊效果在手機瀏覽器上的遲鈍問題
2. 使用Node.js建置你的第一個LINE BOT
3. 使用VSCode外掛自動編譯SASS/SCSS
4. 更新EXPO SDK 47遇上ViewPropTypes問題處理紀錄
5. iOS 16.1版本，使用 Firebase GoogleAuthProvider 透過 getRedirectResult 獲得登入憑證的處理辦法
6. 使用 Lottie React Native 將設計師使用 After Effect 製作的動畫無痛轉移至原生App內呈現
7. Designing an OpenAI-Enhanced LINE Bot with the Neru Server Framework
8. Put a Spinning Donut in React