GenAI 助攻：輕鬆開發網站應用程式

GenAI 助攻：輕鬆開發網站應用程式

在這門課程中，您不需要精通程式碼。我們將帶您探索如何使用生成式 AI 工具來實現開發目標。本課程著重於撰寫精準的指令（prompt），讓 AI 成為您的開發夥伴，自動產出所需的程式結果，無論是設計介面還是實現網站功能，並製作出一套屬於你自己的網站應用程式。

進入 GenAI 的世界，您將學會如何透過有效的指令讓 AI 執行繁重的程式工作，並專注於設計和創意的發揮。這不僅是技術的進步，更是創新的方式，讓開發變得輕鬆且高效。

課程大綱

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. 學員案例成果展示與優化建議回饋

適合對象

不需要有任何程式設計基礎，本課程適合任何對於GenAI輔助設計網站應用程式有興趣的人

開發環境

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

實體課程注意事項

本班為實體課程，常見QA詳情連結

校園防疫措施詳情連結

公務員全程參與課程學習後可於課程結束後申請登錄公務人員學習時數

課程影片觀看期限至課程結束後一週關閉

(一)退費期限：開課日後⅓時數內，詳情連結

(二)查詢結業狀況：結業名單連結

近期班次

  • 第435期 招生中

    課程類別：114年寒假兩日全天班1

    開課日期：2025.02.04 ~ 2025.02.05

    上課時間：

    每 週 (二)(三) 9:30 AM ~ 4:00 PM

    學費：新生新台幣4500元整

    注意事項：
    1. 每日上午09:30~12:30與下午14:00~16:00 (午休時間1.5小時)
    2. 不供餐

  • 第435期 招生中

    課程類別：114年寒假兩日全天班2

    開課日期：2025.02.06 ~ 2025.02.07

    上課時間：

    每 週 (四)(五) 9:30 AM ~ 4:00 PM

    學費：新生新台幣4500元整

    注意事項：
    1. 每日上午09:30~12:30與下午14:00~16:00 (午休時間1.5小時)
    2. 不供餐

    • 講師介紹

    黃安聖

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

    (一) 個人網站：
    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