آموزش کلون ChatGPT با React، SocketIO و OpenAI API

سرفصل ها و درس ها

معرفی Introduction

• پیش نمایش ویژگی ها Features Preview

• Tech Stack مقدمه Tech Stack Introduction

ایجاد رابط کاربری Creating UI

• معرفی سمت مشتری Client Side Introduction

• نصب گره Node installation

• ساخت React Application Creating React Application

• تمیز کردن Cleaning up

• ایجاد داشبورد Creating dashboard

• ایجاد بخش های نوار کناری و چت Creating Sidebar and Chat Sections

• دکمه چت جدید New Chat Button

• نمادها Icons

• ایجاد آیتم های فهرست Creating List Items

• دکمه حذف مکالمات Delete Conversations Button

رابط کاربری چت Chat UI

• ایجاد لوگو Creating Logo

• کانتینرهای چت Chat Containers

• ورودی پیام جدید New Message Input

• نمایش پیام های ساختگی Displaying Dummy Messages

• ایجاد انیمیشن متنی Creating Text Animation

• کد بعد از بخش را کامل کنید Complete Code After Section

سرور اکسپرس با Socket.IO Express Server with Socket.IO

• معرفی سمت سرور Server Side Introduction

• ایجاد اپلیکیشن اکسپرس Creating Express Application

• اتصال اپلیکیشن Express با سرور Socket.IO Connecting Express App with Socket.IO Server

• تست اتصال از پستچی (اختیاری) Testing Connection from Postman (Optional)

• اتصال با سرور Socket.IO از سمت کلاینت Connecting with Socket.IO Server from Client Side

• کد بعد از بخش را کامل کنید Complete code after section

ارسال پیام به سرور Sending Messages to Server

• مدیریت ورودی پیام جدید Handling New Message Input

• افزودن React Redux به برنامه ما Adding React Redux to our App

• کار با فروشگاه Working with the store

• افزودن پیام به فروشگاه Adding Messages to Store

• نمایش مکالمات واقعی در نوار کناری Displaying Real Conversations on Sidebar

• نمایش پیام های واقعی Displaying Real Messages

• ارسال پیام چت به سرور Sending Chat Messages to Server

جلسات Sessions

• مدیریت جلسه Session Management

• جلسات تست Testing Sessions

• در حال بارگذاری اسپینر Loading Spinner

• کد بعد از بخش را کامل کنید Complete Code After Section

چت قسمت دوم - ارسال پیام از سرور به سمت مشتری Chat Part Two - Sending Messages From Server to Client Side

• ذخیره پیام ها در سمت سرور Storing Messages at Server Side

• انتخاب مکالمه از قبل موجود Selecting Already Existing Conversation

• تست تاریخچه چت Testing Chat History

• حذف مکالمات Removing Conversations

• کد بعد از بخش را کامل کنید Complete Code After Section

کار با OpenAI API Working with OpenAI API

• معرفی پلتفرم OpenAI OpenAI Platform Introduction

• ایجاد ارتباط با OpenAI API Creating Connection with OpenAI API

• ارسال درخواست به OpenAI API Sending Request to OpenAI API

• رفع اشکال و تست Bug Fixing and Testing

• ارسال مکالمه به OpenAI API Sending Conversation to OpenAI API

• عملکرد پیمایش Scrolling Functionality

• غیرفعال کردن ورودی هنگام Awating برای پیام AI Disabling Input When Awating for AI Message

• کد برنامه کامل Complete Application Code