AI應用網站開發入門 HTML CSS React 結合 OpenAI

AI應用網站開發入門 HTML CSS React 結合 OpenAI

從構建個人網站到開發複雜的AI應用網路服務，本課程將引領您進入HTML、CSS和React的世界，並結合最新的OpenAI技術。在當今的AI人工智慧時代，能否透過AI人工智慧輔助設計開發相關應用以及掌握其技術已成為相當重要的成功關鍵。

本課程將展示如何使用HTML、CSS、Tailwind CSS開發出吸引人的響應式動態效果網頁設計，並利用React提高前端開發的效率和互動性。此外，我們還將探索如何利用OpenAI的創新應用，整合AI Function來提升網站功能和用戶體驗。

課程中，我們將示範如何搭配ChatGPT與GitHub Copilot作為程式設計學習與開發輔助工具。Copilot是一個AI程式設計助手，能夠透過理解你的意圖來提供程式建議，減輕初學者的學習壓力並提高開發效率。

隨著AI技術的進步，將OpenAI融入網站開發中已成為前沿趨勢。本課程將教您如何實現這一整合，從而讓您的網站在市場中脫穎而出。無論是創建互動式網頁聊天機器人、AI瀏覽器外掛還是圖像內容生成平台，您將學習如何利用AI加強網站功能。

課程大綱

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

- 網站開發基礎知識與技術概覽
- 認識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

實體課程注意事項

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

校園防疫措施詳情連結

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

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

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

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

近期班次

  • 第436期 招生中

    課程類別：假日班上午

    開課日期：2025.02.22 ~ 2025.03.30

    上課時間：

    每 週 (六)(日) 9:00 AM ~ 12:00 PM

    學費：新生新台幣6500元整

    注意事項：
    1. 3月系上定期洗水塔時間尚未公告故上課時間之後會再異動，請靜待通知
    2. 3/1-3/2連假不上課，課程日期已順延
    3. 提供同步直播上課，詳情說明

    • 講師介紹

    黃安聖

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

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