
課程展示
如何註冊Open AI帳號
Ajax如何連結API
同步執行Sync & 異步執行Async
JS如何執行異步
Promise
Async 與 Await
HTTP Reuqest Method
如何授權訪問API
實作-連結OpenAI API
實作-使用chatGPT模型
實作-chatGPT左側邊欄製作
實作-chatGPT主欄框架佈局
實作-chatGPT主欄框輸入框CSS外觀
實作-chatGPT生成聊天記錄
實作-chatGPT聊天記錄CSS外觀
實作-Chat Bubble合併聊天記錄及CSS外觀
實作-再次連結ChatGPT API完善功能
安裝與運行NodeJS代碼
NPM的使用
實作2-WebScraper-NodeJS連結本地伺服器
實作2-WebScraper-爬取紐約時報網信息
實作2-WebScraper-把爬取數據做成API
實作2-WebScraper-前端數據顯示
如何創建第一個React App
什么是React Components
如何添加變數&如何添加CSS Class
React中的判斷語句 & 如何添加圖片到React中
React如何顯示Array或者List
React如何響應Event事件
useState Hooks的應用
useEffect Hooks的應用
最終實作-React Clone ChatGPT-項目簡介
最終實作-React Clone ChatGPT-移植HTML&CSS
最終實作-React Clone ChatGPT-修復嚴重漏洞
最終實作-React Clone ChatGPT-伺服器端連結API數據
最終實作-React Clone ChatGPT-前端網頁獲取伺服器API數據
最終實作-React Clone ChatGPT-前端直接與API對話
最終實作-React Clone ChatGPT-如何保存雙方通話紀錄
最終實作-React Clone ChatGPT-添加按鈕清空功能
最終實作-React Clone ChatGPT-歸類同一主題的紀錄
最終實作-React Clone ChatGPT-滾動條CSS設定
最終實作-React Clone ChatGPT-側邊欄紀錄標題顯示
最終實作-React Clone ChatGPT-隱藏API Key
課程介紹:使用JavaScript、React、Node.js和HTML、CSS連結OpenAI API製作ChatGPT網頁應用
歡迎參加我們的課程,這是一個令人興奮的機會,讓您學習如何使用JavaScript、React、Node.js和HTML、CSS連結OpenAI API,並製作一個功能強大的ChatGPT網頁應用。在本課程中,您將學習如何建立一個具有智能聊天功能的應用,讓用戶可以與AI進行自然對話並獲得豐富的回應。
在這個課程中,您將獲得以下學習:
React基礎知識:您需要對React進行基本了解,這是建立ChatGPT網頁應用的主要技術。
Node.js和伺服器設置:我們將使用Node.js來建立伺服器,以便與OpenAI API進行通訊並處理請求。
OpenAI API:您將學習如何在OpenAI平台上註冊並獲得API金鑰,這將允許您訪問OpenAI的ChatGPT模型。
ChatGPT功能:您將學習如何使用OpenAI API的ChatGPT功能,使您的應用能夠產生智能回答,讓用戶體驗更豐富。
課程特點:
適合程式設計初學者:我們將從基本的React知識開始,讓任何程度的學生都能輕鬆參加。
實踐導向:課程將以實際的編碼練習和實際應用為主,讓您能夠動手建立ChatGPT網頁應用。
專業指導:我們的專業教師將提供詳細的指導和支援,確保您在學習過程中取得成功。
獨立專案:在課程結束後,您將擁有一個完整的ChatGPT網頁應用,可以展示給朋友和家人。
這個課程將讓您在JavaScript、React、Node.js和HTML、CSS的世界中增加更多技能,同時讓您深入了解如何使用OpenAI API來創建智能聊天應用。無論您是新手還是有經驗的開發者,這個課程都將帶領您進入新的技術領域,豐富您的程式設計經驗。
加入我們的課程,探索人工智慧的魅力,一起創建令人驚豔的ChatGPT網頁應用吧!