آموزش کلون بعدی JS ChatGPT با Next.JS و OpenAI (NextJS 13 2023)

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

معرفی Introduction

• مهم! قبل از شروع دوره این را بخوانید! ( مخزن Github و غیره) Important! Read this before you start the course! (Github repo etc)

• معرفی Introduction

• راه اندازی پروژه Project setup

• رتبه بندی و بررسی Udemy Udemy ratings & reviews

• مسیر/صفحه چت را تنظیم کنید Set up the chat route / page

احراز هویت و مجوز با Auth0 Authentication & authorization with Auth0

• auth0 را برای احراز هویت تنظیم کنید Set up auth0 for authentication

• مسیرهای api aut را ایجاد کنید Create auth api routes

• وضعیت ورود و خروج را تنظیم کنید Set up the login and logout state

• صفحه اصلی را با tailwind css سبک کنید Style the homepage with tailwind css

• اجرای قابلیت ثبت نام Implement signup functionality

• در صورت ورود به صفحه چت تغییر مسیر دهید Redirect to chat page if logged in

صفحه چت را بسازید Build out the chat page

• طرح بندی اصلی صفحه چت را ایجاد کنید Create the basic chat page layout

• مولفه ChatSidebar را ایجاد کنید و پیوند خروج را اضافه کنید Create the ChatSidebar component and add the logout link

• فوتر و فرم پیام را ایجاد کنید Create the footer and message form

قابلیت پخش OpenAI را بسازید Build the OpenAI streaming functionality

• یک کلید OpenAI API ایجاد کنید Create an OpenAI API key

• مسائل مربوط به OPENAI ISSUES WITH OPENAI

• نقطه پایانی sendMessage را ایجاد کنید Create the sendMessage endpoint

• تماس OpenAI API را تنظیم کنید Set up the OpenAI API call

• پاسخ OpenAI را در قسمت جلویی پخش کنید Stream the OpenAI response on the front end

• مولفه Message را ایجاد کنید و پیام های جدید را در پنجره چت نمایش دهید Create the Message component and display new messages in chat window

• اجرای سبک‌ها و منطق مؤلفه پیام را به پایان برسانید Finish implementing the Message component styles and logic

• از مسیرها و صفحات چت محافظت کنید تا فقط کاربرانی که وارد سیستم شده اند بتوانند به آن دسترسی داشته باشند Protect the chat routes and pages so only logged in users can access

• حالت بارگذاری را به فرم اضافه کنید Add the loading state to the form

• درخواست OpenAI را اصلاح کنید Refine the OpenAI prompt

• موقعیت فرم فوتر را اصلاح کنید و پنجره چت را قابل پیمایش کنید Fix the footer form position and make chat window scrollable

ذخیره چت با MongoDB Storing chats with MongoDB

• نمای کلی عملکردهای لبه Overview of edge functions

• حساب MongoDB Atlas را تنظیم کنید Set up MongoDB Atlas account

• نقطه پایانی createChat را تنظیم کنید Set up the createChat endpoint

• نقطه پایانی createChat را تست کنید Test the createChat endpoint

• نقطه پایانی getChats را ایجاد کنید Create the getChats endpoint

• لیست چت ها را در نوار کناری رندر کنید Render the list of chats in the sidebar

• به لیست چت در نوار کناری استایل بدهید Style the chat list in the sidebar

• ایجاد یک چت در نقطه پایانی sendMessage را پیاده سازی کنید Implement creating a chat in the sendMessage endpoint

• نقطه پایانی addMessageToChat را ایجاد کنید Create the addMessageToChat endpoint

• به صفحه چت تازه ایجاد شده بروید Navigate to newly created chat page

• بارگیری مجدد لیست چت در تغییر مسیر Reload chat list on route change

• پیام های چت را برای یک چت خاص بارگیری کنید Load chat messages for a particular chat

• پیام های چت را برای یک چت خاص ارائه دهید Render chat messages for a particular chat

• نقطه پایانی sendMessage را برای پاسخگویی به چت های موجود تغییر دهید Modify the sendMessage endpoint to cater for existing chats

• پیاده سازی تاریخچه مکالمه در OpenAI Implement conversation history in OpenAI

به روز رسانی UI UI Updates

• رفع جریان در چت های اشتباه Fix streaming on wrong chats

• هنگامی که یک پیام دریافتی وجود دارد، به صورت خودکار پیمایش کنید Auto-scroll when there's an incoming message

• فونت Google را برای برنامه ما اضافه کنید Add Google font for our app

• سبک های گم شده را برای صفحه اصلی اضافه کنید Add missing styles for homepage

• برای چت جدید رابط کاربری اضافه کنید Add UI for new chat

اعتبار سنجی Validation

• شناسه چت را برای صفحه شناسه چت اعتبار سنجی کنید Validate chat id for chat id page

• اعتبارسنجی را به نقطه پایانی sendMessage اضافه کنید Add validation to sendMessage endpoint

• اعتبارسنجی را به نقطه پایانی createNewChat اضافه کنید Add validation to createNewChat endpoint

• اعتبار سنجی را به نقطه پایانی addMessageToChat اضافه کنید Add validation to addMessageToChat endpoint

مستقر کنید Deploy

• استقرار به vercel Deploy to vercel

• جایزه! BONUS!