آموزش ساخت چت‌بات‌های هوش مصنوعی با React و APIهای AI - آخرین آپدیت

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

شروع و مقدمات Beginning

• خوش‌آمدگویی به دوره Welcome to the Course

• خلاصه پروژه Summary of the Project

• مقدمه‌ای بر هوش مصنوعی مولد Intro to Generative AI

• ساختار هزینه‌ای APIهای هوش مصنوعی AI APIs Cost Structure

• آماده‌سازی محیط کاری Preparing Your Workspace

• ساخت یک اپلیکیشن React Building a React Application

• نحوه پاک‌سازی اپلیکیشن How to Clean Up Your Application

ایجاد رابط کاربری برای چت‌بات‌ها Creating a User Interface for Chatbots

• ایجاد لایوت برنامه Creating the App Layout

• نمایش پیام‌های چت Showing Chat Messages

• درج باکس متن و دکمه ارسال Inserting Text Box and Send Button

• مدیریت پیام‌ها در چت Managing Messages in the Chat

راه‌اندازی چت با هوش مصنوعی Setting Up Chat with AI

• خلاصه APIهای محبوب هوش مصنوعی Summary of Popular AI APIs

• نحوه دریافت کلید API برای Google AI How to Obtain an API Key for Google AI

• اتصال Google AI (Gemini) برای گفتگوها Link Google AI (Gemini) for Conversations

• جداسازی منطق Google AI برای قابلیت استفاده مجدد Separating Google AI logic for Reusability

• نحوه دریافت کلید API برای OpenAI How to Obtain an API Key for Open AI

• اتصال OpenAI (ChatGPT) برای گفتگو Linking Open AI (ChatGPT) for Conversation

بهبود تعامل کاربر با چت Enhancing User Interaction with Chat

• نمایش وضعیت در حال بارگذاری (Loading) Showing Loading Status

• فعال‌سازی پشتیبانی از Markdown در پیام‌ها Enabling Markdown Support in Messages

• نحوه تغییر اندازه خودکار فیلد متنی How to Make a Text Field Resize Automatically

• غیرفعال کردن کنترل‌های چت هنگام بارگذاری Turn Off Chat Controls While Loading

• استفاده از Auto Focus در فیلد متنی Using Auto-Focus in a Text Field

• پیاده‌سازی اسکرول خودکار به پایین Incorporating Auto-Scroll to the Bottom

• بهبود عملکرد اسکرول خودکار Enhancing Auto-Scrolling Performance

• سازگاری با حالت تاریک (Dark Mode) Including Dark Mode Compatibility

ارسال پیام‌ها با استفاده از هوش مصنوعی Transmitting Messages Using AI

• اتصال Google AI (Gemini) برای استریمینگ زنده Link Google AI (Gemini) for Live Streaming

• فعال‌سازی استریمینگ لحظه‌ای چت Activating Live Chat Streaming

• اتصال OpenAI (ChatGPT) برای استریمینگ زنده Linking Open AI (ChatGPT) for Live Streaming

اتصال به API دیپ‌سیک (DeepSeek) DeepSeek API Connection

• خلاصه مدل‌های DeepSeek R1 و V3 Summary of DeepSeek R1 and V3 Models

• دریافت کلید API برای DeepSeek Obtaining an API Key for DeepSeek

• اتصال DeepSeek برای پیام‌رسانی Link DeepSeek for Messaging

مدیریت مشکلات هنگام استفاده از API Managing Problems When Using API

• محدودیت‌های کاربردی و سرعت در APIهای هوش مصنوعی Application and Speed Restrictions of AI API’s

• کد درست اجرا نمی‌شود؟ یاد بگیرید چگونه عیب‌یابی کنید Code Not Running Properly? Discover How to Troubleshoot

• مدیریت مشکلات API در پلتفرم‌های هوش مصنوعی Handling API Issues from AI Platforms

• کار با کتابخانه جدید Google AI (Gemini) Working with the New Google AI (Gemini) Library

• مدیریت و نمایش پیام‌های خطای کاربرپسند Manage and Show User-Friendly Error Messages

نحوه اتصال به API آنتروپیک (Claude) How to Connect the Anthropic (Claude) API

• خلاصه مدل‌های Anthropic (Claude) Summary of Anthropic (Claude) Models

• نحوه دریافت کلید API برای Anthropic (Claude) How to Obtain an API Key for Anthropic (Claude)

• اتصال Anthropic (Claude) برای گفتگو Linking Anthropic (Claude) for Conversation

اتصال به API ایکس‌-ای‌آی (Grok) xAI (Grok) API Connection

• خلاصه مدل‌های xAI (Grok) Summary of xAI (Grok) Models

• دریافت کلید API برای xAI (Grok) Obtaining an API Key for xAI (Grok)

• اتصال xAI (Grok) برای گفتگو Linking xAI (Grok) for Conversation

انتخاب دستیار AI و بهبودهای چت‌بات AI Assistant Choice and Improvements for Chatbots

• جابجایی بین دستیارهای AI در رابط کاربری چت‌بات Alternating Among AI Assistants in a Chatbot Interface

• افزایش قابلیت‌های چت‌بات با افزودن مدل‌های AI بیشتر Increase Chatbot Capabilities to Include Additional AI Models

• افزودن انتخابگر تم روشن و تاریک به رابط کاربری Include Light Dark Theme Selector in Chatbot User Interface

ساخت سایدبار مدیریت چت‌ها Constructing the Sidebar with Chats

• خلاصه سایدبار جدید برای مدیریت چندین چت Summary of the New Sidebar for Managing Multiple Chats

• طراحی سایدبار برای نمایش تمامی گفتگوها Build a Sidebar Design to Show All Conversations

• تبدیل سایدبار به منوی همبرگری برای دستگاه‌های موبایل Transform Sidebar into a Hamburger Menu for Mobile Devices

• نحوه استخراج منطق مدیریت پیام‌ها از کامپوننت App How to Derive Message Handling Logic from the App Component

• فعال‌سازی جابجایی بین چت‌ها با استفاده از سایدبار Activate Chat Switching Using a Sidebar

• نمایش تاریخچه کامل پیام‌ها برای چت فعلی Display Complete Message History for the Current Chat

• افزودن پیام‌های جدید به چت‌های در حال اجرا Add New Messages to Ongoing Chats

ایجاد قابلیت «چت جدید» Creating the "New Chat" Feature

• افزودن دکمه «چت جدید» برای شروع گفتگوهای تازه Include a “New Chat” Button to Begin Fresh Conversations

• جلوگیری از ایجاد چندین گفتگوی خالی Avoid Generating Multiple Empty Conversations

• ایجاد خودکار عنوان چت بر اساس ورودی کاربر Automatically Create Chat Titles Based on User Input

• پشتیبانی از تاریخچه مجزای هر چت برای Google AI Support Individual Chat History for Google AI

• ادامه پاسخ‌دهی هنگام جابجایی بین گفتگوها Continue Responding While Moving Between Conversations

• حذف داده‌های چت تستی و اصلاح صفحه خوش‌آمدگویی Delete Fake Chat Data and Correct Welcome Screen

• مدیریت بخش‌های کد و بهبود لایوت Manage Code Sections and Enhance Layout

خطاهای رایج در سینتکس JSX Common Errors - JSX syntax

• مقدمه: در این بخش چه خواهید آموخت Intro: What You’ll Learn Here

• برگرداندن چندین المان (Multiple Elements) Returning Several Elements

• عدم ایجاد کلیدهای منحصر به فرد (Unique Keys) Failing to Create Unique Keys

• رندر اشتباه مقدار صفر Mistakenly Rendering Zero

• فراموش کردن فاصله بین المان‌ها در JSX Missing Space Between Elements in JSX

• حذف کروشه در استایل‌های CSS Omitting Curly Brackets in CSS Styles

• استفاده از attribute class به جای className Using class attribute instead of className

• نادیده گرفتن عملکرد Virtual DOM Overlooking the Functionality of Virtual DOM

خطاهای رایج در هوک useState Common Errors with the useState Hook

• ترکیب State و Props Combining State and Props

• تغییر فوری State Changing State Immediately

• درک وضعیت State بلافاصله پس از به‌روزرسانی Understanding State Immediately Following an Update

• نادیده گرفتن به‌روزرسانی‌های تابعی (Functional Updates) Overlooking Functional Updates

• استفاده از هوک‌ها داخل حلقه‌ها یا دستورات شرطی Applying Hooks Within Loops or Conditional Statements

• انتقال از Uncontrolled به Controlled Moving from Uncontrolled to Controlled

خطاهای رایج در هوک useEffect Common Errors with the useEffect Hook

• نادیده گرفتن آرایه وابستگی‌ها (Dependency Arrays) در useEffect Overlooking Dependency Arrays in useEffect

• فراموش کردن وابستگی‌ها در useEffect Missing Dependencies in useEffect

• ایجاد حلقه‌های بی‌نهایت با استفاده از useEffect Building Endless Loops Using useEffect

• قرار دادن تمام موارد در آرایه وابستگی‌ها Including All Items in the Dependency Array

• مدیریت صحیح Cleanup در افکت‌ها Properly Managing Effects Cleanup

• نحوه استفاده از توابع Async در useEffect How to Use Async Functions Within useEffect