آموزش Electron & React JS: ساخت برنامه چت دسکتاپ با جاوا اسکریپت

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

معرفی Introduction

• معرفی Introduction

• بخش جدید اضافه شد New Section Added

• چگونه مسائل را حل کنیم How to solve issues

مبانی الکترون Electron Basics

• بخش مقدمه Section Introduction

• Electron را راه اندازی کنید Initialize Electron

• ایجاد پنجره مرورگر Create browser window

• ویژگی های الکترون Features of electron

• اطلاعات بیشتر درباره Electron & Notifications More about Electron & Notifications

• کروم در مقابل الکترون Chrome vs Electron

• یکپارچه سازی گره Node integration

• پاکسازی کد Code cleanup

• React را نصب کنید Install React

• بسته وب Webpack

• نقشه منبع + اشکال زدایی Source Map + Debugging

• بارگذاری مجدد الکترون Electron reload

• ارتباط اصلی و رندر Main & Renderer communication

• پیش بارگیری کنید Preload

• پل زمینه Context bridge

کار بر روی Layout Working on Layout

• بخش مقدمه Section Introduction

• طرح اولیه Initial layout

• جداسازی به اجزا Separation to components

• روتر Router

• دکمه برگشت + بازدیدهای بیشتر Back button + More views

• نمای چت Chat view

• پیوند به چت Link to the chat

• Firebase Firebase

• داده ها را از Firestore دریافت کنید Get data from Firestore

• Dotenv Dotenv

• فروشگاه اولیه Initial store

• اقدامات ایجاد کنید Create actions

• کاهش دهنده چت Chat reducer

• نمایش چت ها در لیست Display chats in the list

احراز هویت Authentication

• بخش مقدمه Section Introduction

• نمای خوش آمد گویی Welcome view

• جابجایی بین فرم ها Toggling between forms

• ارزش را از فرم دریافت کنید Get value from the form

• ثبت نام کاربر Register a user

• پروفایل کاربری ایجاد کنید Create user profile

• به تغییرات auth گوش دهید Listen to auth changes

• کاهش دهنده احراز هویت Auth reducer

• خروج Logout

• وارد شدن Login

• در حال بارگذاری نمای Loading view

• کاربر در نوار ناوبری User in the navbar

• احیاء کننده احراز هویت Auth reducer refactor

• نمایش خطاها Displaying errors

• ورود و ثبت نام ایجاد کننده کاهش دهنده Login & Register reducer creator

• کاهش دهنده خطای قابل استفاده مجدد Reusable error reducer

• کاهش دهنده واکشی قابل استفاده مجدد Reusable fetching reducer

• ارائه عمل به کاربر Provide user to action

• بازساز برنامه و ارائه دهنده فروشگاه App refactor and store provider

• مسیر احراز هویت Auth route

• بهبودهای UX UX Improvements

• رفع مشکل پس از خروج Fix after logout

• چیدمان HOC Layout HOC

میان افزارها و اعلان ها Middlewares & Notifications

• بخش مقدمه Section Introduction

• بررسی کنید که آیا برنامه متصل است یا خیر Check if application is connected

• اقدام برای بررسی اتصال Action to check connection

• کاهش دهنده اتصال Connection reducer

• میان افزارها Middlewares

• ابزار اطلاع رسانی Notification util

• نمایش اعلان Display notification

مدیریت چت Chat Management

• بخش مقدمه Section Introduction

• چت ایجاد نمای Chat create view

• چت ایجاد فرم Chat create form

• یک چت ایجاد کنید Create a chat

• پس از ایجاد به چت بپیوندید Join the chat after create

• چت ها را مرتب کنید Sort chats

• نمایش چت های مرتب شده Display sorted chats

• پس از خروج، حالت را مجدداً راه اندازی کنید Restart the state after logout

• به چت بپیوندید Join chat

• به کاهش دهنده چت بپیوندید Join the chat reducer

• در چت مشترک شوید Subscribe to the chat

• کاربران را از چت استخراج کنید Extract users from the chat

• چت فعال را روی کاهش دهنده تنظیم کنید Set active chat to reducer

• نمایش کاربران ملحق شده Display joined users

• مشترک شدن در نمایه Subscribe to profile

• لغو اشتراک از کاربر Unsubscribe from user

• اتصال کاربر را بررسی کنید Check user connection

• ذخیره وضعیت آنلاین کاربر در FS Save user online status to FS

• رفع وضعیت آنلاین پس از خروج Fixing online status after logout

• نمایش تغییرات حالت Displaying state changes

• بهبودهای چت را بارگیری کنید Load chat improvements

پیام رسانی Messaging

• بخش مقدمه Section Introduction

• جزء پیام رسان Messenger component

• شیء پیام با مهر زمان Message object with timestamp

• اقدام ارسال پیام Send message action

• مشترک شدن در پیام Subscribe to message

• نمایش پیام ها Display messages

• استخراج پیام با نویسنده Extract message with author

• ثبت اشتراک پیام Register message subscription

• بهبود پیام های UX UX messages improvements

• در پایین اسکرول کنید Scroll on bottom

• پاکسازی پس از خروج از سیستم Cleanup after logout

• لغو اشتراک از چت Unsubscribe from chat

• نمای تنظیمات Settings view

• کاهش دهنده تنظیمات Settings reducer

• داده ها را در حافظه محلی ذخیره کنید Store data in local storage

• تنظیمات اولیه را بارگیری کنید Load initial settings

• ذخیره سازی سفارشی Custom storage

• نمایش تغییرات استایل Display styling changes

• تنظیمات به پایان می رسد Settings wrap up

• رفع اتصال Connection fix

ویژگی های Electron Native Electron Native Features

• بخش مقدمه Section Introduction

• منوی برنامه App menu

• پنجره های متعدد Multiple windows

• نماد داک Dock icon

• منوی سینی Tray menu

• صفحه معرفی Splash screen

• بهبود صفحه نمایش اسپلش Splash screen improvements

• تولید پک وب Webpack production

• برنامه را بسازید Build the app

• تست برنامه و پایان دوره App testing & Course Ending

پاداش: برنامه ChatGPT Bonus: ChatGPT App

• برنامه Init Init App

• نگرانی های امنیتی Security Concerns

• React را ادغام کنید Integrate React

• به‌روزرسانی‌های برنامه React React App Updates

• طرح اولیه + توضیح مدل Basic Layout + Model Explanation

• دریافت ارزش سریع Get Prompt Value

• رسیدگی به ارسال Handle Submit

• پیام ها Messages

• نوع پیام Message Type

• شبیه سازی پاسخ Simulate response

• جزء مورد پیام Message item component

• جلوه ماشین تحریر Typewriter effect

• ماشین تحریر فقط برای هوش مصنوعی Typewriter only for AI

• پل زمینه Context Bridge

• نوع الکترون را شرح دهید Describe electron type

• ارزش فرآیند اصلی را دریافت کنید Get value to main process

• پاسخ را پس بگیرید Get response back

• پیام خالی را بررسی کنید Check empty message

• راه اندازی حساب AI باز Setup Open AI Account

• توضیحات ChatGPT ChatGPT Explanations

• پاسخ از هوش مصنوعی دریافت کنید Get response from AI

• رسیدگی به خطاها Handle Errors

• نمایش پیام خطا Display Error Message

• اعلان بهتر ایجاد کنید Create beter prompt

• اپلیکیشن را منتشر کنید Publish the app