AI應用網站開發入門 HTML CSS React 結合 OpenAI (假日班上午)

開課日期:2024-12-14 課程費用:6500 備註:早鳥折扣1千
上課時間:週六,週日 / 上午 學習時程:30
上課地點: 台北市大安區106台北市羅斯福路四段一號國立台灣大...看完整 map
適用對象:
本課程為入門班,無需有任何網頁設計或程式設計開發經驗。
收藏課程
課程特色
從構建個人網站到開發複雜的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
師資介紹

黃安聖

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

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

報名方式
如您對本課程有興趣,或需相關諮詢,請於下方留下您的聯絡資訊,我們將派專人與您聯繫,為您安排上課事宜,或回覆問題,感謝您!
備註
詳細課程資訊,請參考資訊系統訓練班【最新課程】連結:
https://train.csie.ntu.edu.tw/train/course.php?id=4971&bid=426

本課程為數位混成課程(是實體也可直播!)
我對課程有興趣
  • code
    換一個
若您有進修網會員帳號,建議您登入進修網,省去填表部份欄位的填寫!
巨電_水號1264 聯電_水號1273_課頁內回函下
相似課程推薦
  課程名稱 認證機構(分校) 上課地點 費用 開課日期
索取課程資料
收藏課程資料
training AI數據應用人才養成班第 01期 緯育股份有限公司 線上課程 線上洽詢 2024-12-23
索取課程資料
收藏課程資料
Node.js 和 MongoDB 網站後端開... 國立臺灣大學... 台北市大安區 4500 2024-11-17
索取課程資料
收藏課程資料
▲線上遠距教學▲Web全端應用開發... 艾鍗學院 線上課程 線上洽詢 隨時開課
索取課程資料
收藏課程資料
【免費】Java Web程式設計師養... 恆逸教育訓練中心 線上課程 免費 隨時開課
索取課程資料
收藏課程資料
Java 企業培訓班 巨匠電腦新店認證 新北市新店區 線上洽詢 隨時開課
聯電好康_水號1265_全區495
尚進_水號1267_全區495

登入1111進修網

1
2
提示
3
從facrbook登入
我無法登入、忘記密碼?
註冊成為進修會員