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

進修課程

Advancde Studies

國立臺灣大學資訊工程學系

課程總時數

課程費用

6500

上課時間

週一 ~ 週五 / 上午

開課日期

2024-07-15

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

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

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

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

我想了解更多

上課地點

106台北市羅斯福路四段一號國立台灣大學資訊工程學系系館(德田館)

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

- 網站開發基礎知識與技術概覽
- 認識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程式設計課程講師