1. 認識如何使用 GenAI 工具
- 介紹生成式 AI 工具與應用場景：了解生成式 AI 如何協助開發網站應用程式
- 熟悉 Cursor 編輯器：探索 Cursor 的界面與功能，如何使用其 AI 編輯與自動生成代碼的特性
- 指令（prompt）設計基礎：教學如何撰寫精準的指令，讓 Cursor 能產出精確的程式碼結果

2. 透過 GenAI 學習程式語言與高效編程的技巧
- GenAI 助攻的程式語言入門：不需程式設計知識，輕鬆掌握 HTML、CSS、JavaScript、React.js 的基礎
- 高效程式碼生成技巧：使用 AI 優化程式碼、解決錯誤，並進行程式碼重構
- 最佳化開發流程：學會讓 AI 分擔重複性任務，專注在創意與設計

3. 案例一：設計一個作品集網站
- 需求分析與指令設計：如何編寫指令，讓 AI 生成適合展示作品的網站布局
- 建立網頁結構：運用生成式 AI 生成基本的 HTML 和 CSS 結構
- 設計與調整介面：利用 AI 的幫助快速實現設計樣式的微調和頁面佈局的優化

4. 案例二：設計屬於你自己的筆記與待辦事項軟體
- 功能需求定義：定義筆記管理與待辦事項的基本功能
- 利用 GenAI 建構應用邏輯：生成 JavaScript 程式碼來實現各種互動功能
- 界面設計與用戶體驗：生成簡單且直觀的使用者介面，實現筆記與待辦的管理系統

5. 案例三：結合 OpenAI 設計一個屬於你自己的聊天機器人
- 設定 OpenAI API 串接：教學如何取得 OpenAI API 密鑰並實現基本串接
- 設計聊天功能與對話流程：定義指令，生成基本對話邏輯，打造互動流暢的聊天體驗
- 優化聊天機器人的反應：根據使用者需求，持續調整指令來改善回應準確性

6. 學員案例成果展示與優化建議回饋

本課程不需要參與者有任何程式設計基礎，適合任何想使用AI打造自己網站應用程式的人。

Cursor AI Code Editor、Trae AI Code Editor、免付費伺服器架站方案

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

(一) 個人網站：
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小時；
擔任：GenAI 助攻：輕鬆開發網站應用程式講師、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程式設計課程講師

(四) 興趣領域：
AI應用程式與No-Code提示詞輔助開發、使用者介面設計、使用者經驗設計、網站應用程式開發、手機應用開發、股票投資與期權交易。

(五) 特殊經歷：

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