آموزش React AI Chatbot ساخته شده با ChatGPT و Gemini AI

دانلود React AI Chatbot built with ChatGPT and Gemini AI new

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره: با React یک چت ربات هوش مصنوعی بیدرنگ بسازید که ChatGPT و هوش مصنوعی Gemini را برای مکالمات پویا ادغام می کند. چگونه با استفاده از React اپلیکیشن چت بات هوش مصنوعی بسازیم. JS نحوه ادغام Google AI (Chat GPT) و Open AI (Gemini) API نحوه فعال کردن جریان پیام در زمان واقعی نحوه اضافه کردن پشتیبانی از حالت روشن و تاریک به رابط کاربری ربات چت نحوه تنظیم فیلد متنی با قابلیت تغییر اندازه خودکار برای تجربه کاربری روانتر نحوه نمایش یک حالت بارگیری برای بهبود بازخورد کاربر در طول پردازش هوش مصنوعی. چگونه می توان از پشتیبانی Markdown برای قالب بندی پیام های غنی تر استفاده کرد. نحوه بهبود رفتار پیمایش خودکار برای حفظ نمایان بودن چت در طول به‌روزرسانی و موارد دیگر برای افزایش مهارت‌ها در React. js و ادغام هوش مصنوعی پیش نیازها: دانش اولیه React. js دانش پایه جاوا اسکریپت (ما مطالب خواندنی را برای کسانی که با جاوا اسکریپت آشنایی ندارند ارائه می دهیم) دانش اولیه HTML/CSS

توضیحات

قفل قدرت هوش مصنوعی را برای ایجاد برنامه‌های کاربردی هوشمند و تعاملی که کاربران را در زمان واقعی درگیر می‌کند و در بازار امروز برجسته می‌شود، باز کنید.

سلام، نام من Dmytro Vasyliev است و به دوره من خوش آمدید: "React AI Chatbot ساخته شده با ChatGPT و Gemini AI"! من به شما نشان خواهم داد که چگونه با استفاده از React، ChatGPT و Google Gemini یک چت ربات هوش مصنوعی بیدرنگ بسازید.

می‌آموزید که چگونه بسیاری از ویژگی‌های ربات چت مانند پخش جریانی پیام در زمان واقعی، فیلد متنی با قابلیت تغییر اندازه خودکار، پیمایش خودکار به آخرین پیام، پشتیبانی از علامت‌گذاری و حالت تاریک و موارد دیگر را بسازید.

این دوره عملی است، بنابراین می‌توانید فوراً چیزهایی را که یاد می‌گیرید اعمال کنید. این دوره آموزشی به شما کمک می‌کند تا یک چت ربات هوش مصنوعی کاربردی بسازید، خواه توسعه‌دهنده‌ای با تجربه React باشید یا کسی که می‌خواهد عمیق‌تر در ادغام هوش مصنوعی با React غواصی کند.

یادگیری این دوره آسان است. من به شما نشان خواهم داد که چگونه با استفاده از بهترین شیوه های React، ویژگی ها را ایجاد کنید، هوش مصنوعی را یکپارچه کنید و تجربه کاربری را بهبود بخشید. شما می‌دانید که چگونه می‌توانید هر دو جنبه front-end و AI را مدیریت کنید، بنابراین می‌توانید برنامه‌های مبتنی بر هوش مصنوعی خود را بسازید.

این دوره برای چه کسانی است؟

توسعه دهندگان و دانش آموزان با دانش اولیه React.js به دنبال کشف و یادگیری چیزهای جدید هستند
افرادی که می‌خواهند یاد بگیرند که چگونه هوش مصنوعی باز (ChatGPT) و هوش مصنوعی Google (Gemini) را در برنامه‌های کاربردی ادغام کنند

در این دوره آموزشی چیست؟

شروع به کار : اصول اولیه راه اندازی محیط توسعه خود را بیاموزید، از جمله پیکربندی مرورگر، ویرایشگر کد و Node.js با npm. اهمیت آماده سازی فضای کاری خود را برای یک پروژه موفق React درک کنید.
ایجاد رابط کاربری چت بات : نحوه طراحی و پیاده سازی ساختار اصلی رابط چت بات را بیاموزید. این شامل ایجاد طرح‌بندی برنامه، نمایش پیام‌های چت، افزودن فیلد ورودی متن، و مدیریت تعاملات پیام در مؤلفه چت است.
پیاده‌سازی چت با هوش مصنوعی: نحوه اتصال ربات چت خود را به هوش مصنوعی Google (جمینی) و OpenAI (ChatGPT) کشف کنید. با نحوه به دست آوردن و مدیریت کلیدهای API، ادغام APIها برای عملکرد چت هم‌زمان، و جداسازی منطق برای قابلیت استفاده مجدد آشنا شوید.
پخش جریانی پیام‌ها با هوش مصنوعی: بر فرآیند تنظیم جریان پیام در زمان واقعی با Google AI (Gemini) و OpenAI (ChatGPT) مسلط شوید. نحوه رسیدگی به پاسخ‌های تاخیری را بدانید و تجربه‌ای روان را برای کاربرانی که با ربات چت تعامل دارند، ارائه دهید.
بهبود تجربه کاربر با چت: رابط چت بات را با افزودن ویژگی‌هایی مانند وضعیت‌های بارگیری، پشتیبانی از پیام Markdown، فیلدهای متنی قابل تغییر اندازه خودکار، و رفتار پیمایش خودکار، بهبود بخشید. پشتیبانی از حالت تاریک را اجرا کنید تا برنامه خود را همه کاره تر و کاربر پسندتر کنید.
خلاصه: نکات کلیدی دوره را مرور کنید و یاد بگیرید که چگونه برای بازخورد نظر بگذارید. نحوه دریافت گواهی پایان کار خود را بدانید و مهارت‌های جدید خود را برای ساخت برنامه‌های React در دنیای واقعی با هوش مصنوعی یکپارچه به کار ببرید.

این دوره شامل

است

تئوری و عمل: حدود 2 ساعت سخنرانی با مثال های عملی فراوان. دروس بین 3 تا 10 دقیقه است و به راحتی قابل پیگیری است.
نمونه‌های کد منبع: دسترسی کامل به کد منبع برای همه پروژه‌ها و تمرین‌ها، به شما کمک می‌کند تا خودتان دنبال کنید و تمرین کنید.
دسترسی مادام العمر به دوره و هرگونه به روز رسانی آینده.
گواهینامه Udemy: که پس از اتمام دوره دریافت خواهید کرد.
پشتیبانی: اگر سؤالی دارید، ما همیشه آماده پاسخگویی به آنها خواهیم بود.

با مربی خود آشنا شوید!

Dmytro Vasyliev یک مهندس ارشد Front-end با بیش از 9 سال تجربه حرفه ای در توسعه برنامه های کاربردی وب است. من تجربه گسترده ای با React و سایر فریم ورک ها دارم و از آن در پروژه های مختلف برای ساخت رابط های کاربری پویا و کارآمد استفاده کرده ام.

در طول دوره، Dmytro شما را در ساختن یک ربات چت هوش مصنوعی با React.js راهنمایی می‌کند که هم OpenAI (ChatGPT) و هم Google AI (Gemini) را ادغام می‌کند. او مثال‌های عملی، درس‌های گام به گام و منابع اضافی را ارائه می‌کند که به ساده‌سازی موضوعات پیچیده کمک می‌کند و به شما این امکان را می‌دهد تا به راحتی مهارت‌های خود را در پروژه‌های دنیای واقعی به کار ببرید.

آیا باید نگران باشید؟

این دوره با 30 روز ضمانت بازگشت وجه ارائه می‌شود.

امروز به دوره ما بپیوندید تا یاد بگیرید چگونه اولین برنامه خود را در React بسازید!

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

مقدمه Introduction

به دوره خوش آمدید Welcome to the course
الزامات دوره Course Requirements

شروع به کار Getting Started

بررسی اجمالی پروژه Project Overview
مقدمه ای بر هوش مصنوعی مولد Introduction to Generative AI
راه اندازی محیط Setting Up Environment
ساخت React Application Creating React Application
برنامه پاکسازی Cleaning Up Application

ساخت رابط کاربری چت بات Building Chatbot UI

ساخت طرح بندی برنامه Building the App Layout
نمایش پیام های چت Displaying Chat Messages
نمایش پیام های چت Displaying Chat Messages
مدیریت پیام ها در چت Handling Messages in the Chat

پیاده سازی چت با هوش مصنوعی Implementing Chat with AI

مروری بر API های محبوب AI Overview of Popular AI APIs
دریافت کلید API برای هوش مصنوعی گوگل Getting API Key for Google AI
Google AI (Gemini) را برای چت وصل کنید Connect Google AI (Gemini) for Chatting
جداسازی منطق هوش مصنوعی گوگل برای قابلیت استفاده مجدد Isolating Google AI logic for Reusability
دریافت کلید API برای Open AI Getting API Key for Open AI
AI باز (ChatGPT) را برای چت وصل کنید Connect Open AI (ChatGPT) for Chatting

بهبود تجربه کاربری با چت Improving User experience with Chat

نمایش وضعیت بارگیری Displaying Loading State
افزودن پشتیبانی Markdown به پیام ها Adding Markdown Support to Messages
ساخت فیلد متن با قابلیت تغییر اندازه خودکار Making Text Field Auto-Resizable
در حین بارگذاری، کنترل های چت را غیرفعال کنید Disable Chat Controls during Loading
اعمال فوکوس خودکار در فیلد متن Applying Auto-Focus to Text Field
افزودن پیمایش خودکار به پایین Adding Auto-Scrolling to Bottom
بهبود رفتار پیمایش خودکار Improving Auto-Scrolling Behaviour
اضافه کردن پشتیبانی از حالت تاریک Adding Dark Mode Support

پخش جریانی پیام ها با هوش مصنوعی Streaming Messages with AI

هوش مصنوعی گوگل را وصل کنید Connect Google AI
فعال کردن جریان چت در زمان واقعی Enabling Real-Time Chat Streaming
برای پخش جریانی، هوش مصنوعی باز (ChatGPT) را وصل کنید Connect Open AI (ChatGPT) for Streaming