آموزش ساخت اپلیکیشن مشابه واتساپ با تماس ویدیویی با استفاده از MERN stack و Socket.IO - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• لینک‌های کد منبع Source code links

راه‌اندازی بک‌اند Setup backend

• بیایید بک‌اند خود را راه‌اندازی کنیم Let's setup our backend

• بیایید یک برنامه اکسپرس اولیه ایجاد کنیم Let's create a basic express app

• ارسال کد منبع به گیت‌هاب Push source code to github

• کراس اِنو (Cross-env) Cross-env

• بیایید چند میان‌افزار (کارکرد، امنیت و سرعت) اضافه کنیم Let's add some middlwares (Functionality, Security and Speed)

• اضافه کردن یک لاگر سفارشی با وینستون به جای console.log Add a custom logger with winston instead of console.log

• مدیریت خطاهای uncaughtException، unhandledRejection و بستن سیگنال SIGTERM Handling uncaughtException, unhandledRejection errors and SIGTERM signal closing

• مدیریت خطاهای http Handling http errors

• راه‌اندازی روت‌ها، اصلاح درخواست‌ها و اضافه کردن کنترلرها Setup routes, trim requests and add controllers

• ایجاد یک کلاستر Mongodb Create a Mongodb cluster

• اتصال به Mongodb، مدیریت خطاهای اتصال و حالت دیباگ Connect to Mngodb, handle connection errors and debug mode

راه‌اندازی فرانت‌اند Setup frontend

• ایجاد برنامه react Create react app

• راه‌اندازی tailwind css، توضیح متغیرها، کلاس‌های سفارشی حالت تاریک و غیره... Setup tailwind css, explain variables, dark mode custom classes etc...

• راه‌اندازی react router dom Setup react router dom

• راه‌اندازی فروشگاه Redux Toolkit و توضیح نحوه ارسال اکشن‌ها Setup redux toolkit store and explain how dispatch actions

• استفاده از Redux Persist برای احیای مجدد مقادیر خاص (هوشمندانه) Use redux persist to rehydrate only certain values (smart)

احراز هویت - بک‌اند Authentication - backend

• ایجاد مدل کاربر Creating the user model

• ثبت نام کاربر با اعتبار سنجی Register a user with validation

• استفاده از Bcrypt برای هش کردن رمز عبور در زمان ذخیره در مدل کاربر Using Bcrypt to hash password on presave in user model

• تولید توکن‌های دسترسی و رفرش، ذخیره توکن رفرش در کوکی‌ها در سرور Generate access and refresh tokens, store refresh token in cookies in the server

• توابع ورود و خروج Login and logout functions

• تولید یک توکن دسترسی جدید با استفاده از توکن رفرش Generate a new access token using refresh token

• توضیح دقیق میان‌افزار Auth Auth middleware explained in details

احراز هویت - فرانت‌اند Authentication - Frontend

• بیایید صفحه ثبت نام و ورود و اجزای فرم آن را راه‌اندازی کنیم Let's setup the register and login page and it's form components

• اضافه کردن و توضیح react hook form و استفاده از آن با yup Adding and explaining react hook form and use it with yup

• ایجاد ورودی‌های سفارشی با اعتبار سنجی Create custom inputs with validation

• تکمیل نشانه‌گذاری و استایل‌های فرم ثبت نام Finishing sign up form markup and styles

• ارسال اکشن ثبت نام با AsyncThunk و مدیریت وضعیت، خطا Submit register action with AsyncThunk and handling status, error

• مدیریت تصویر، مدیریت خطاها در تغییر Handling picture , handling errors on change

• آپلود تصویر به cloudinary Upload image to cloudinary

• کار بر روی ورود Working on the login

• مسیرهای محافظت شده Protected routes

مکالمات - بک‌اند Conversations - backend

• مدل مکالمه Conversation model

• باز کردن یا ایجاد یک مکالمه 1 Open or create a conversation 1

• باز کردن یا ایجاد یک مکالمه 2 Open or create a conversation 2

• دریافت مکالمات کاربر Get user conversations

پیام‌ها - بک‌اند Messages - backend

• ایجاد مدل و روت‌های پیام Create message model and routes

• ارسال یک پیام Send a message

• دریافت پیام‌های مکالمه Get conversation messages

راه‌اندازی صفحه اصلی، نوار کناری: مکالمات و جستجو Home setup, Sidebar : conversations and search

• طرح‌بندی صفحه اصلی، سربرگ نوار کناری Home layout, Sidebar header

• اعلان‌های نوار کناری Sidebar notifications

• کامپوننت جستجوی نوار کناری Sidebar search component

• برش چت Chat slice

• دریافت مکالمات get conversations

• ایجاد چند تغییر در بک‌اند مکالمه making few changes in conversation backend

• فهرست مکالمات list conversations

• نمایش تاریخ‌های مناسب از پیام‌ها در مکالمه Show the proper dates from messages in conversation

• جستجوی کاربران: منطق بک‌اند Search users : backend logic

• جستجوی کاربران: فرانت‌اند Search users : frontend

• فهرست نتایج جستجو List Search results

• منوی نوار کناری و قابلیت خروج Sidebar menu and logout functionality

چت و پیام‌ها Chat and messages

• کامپوننت اصلی واتساپ Whatsapp main component

• باز کردن یا ایجاد یک مکالمه Open or create a conversation

• رفع چند مورد در مورد مکالمات (بدون پیام و طول پیام) Fixing few thing about conversations (no message and message length)

• نمایش کامل مکالمه: سربرگ Full Conversation dispaly : header

• راه‌اندازی کامپوننت پیام‌ها و دریافت پیام‌های مکالمه Messages component setup and get conversation messages

• فهرست پیام‌ها List messages

• طرح‌بندی و کامپوننت Chat Actions Chat Actions component layout and component

• ارسال یک پیام Send a message

• به‌روزرسانی مکالمات پس از ارسال پیام و حذف مکالمات خالی Updating conversations after sending message and remove empty conversations

• ایموجی‌های چت Chat emojis

• منوی فایل‌های چت Chat files menu

• اسکرول خودکار و روان به انتهای مکالمه و رفع لودر ارسال Automatic smooth scroll to the end of conversation and fixing submit loader

• رفع برخی از مشکلات استایل‌دهی (مهم) Fixing some styling problems (important)

Socket io بلادرنگ: پیام‌های بلادرنگ، وضعیت آنلاین، تایپ کردن... Realtime socket io : realtime messages, online status, typing...

• ایجاد یک اتصال socket.io امن بین فرانت‌اند و بک‌اند Establish a secure socket.io connection between frontend and backend

• توضیح socket.io با مثال، ایجاد یک متن socket سراسری برای استفاده در هر کجا Explaining socket.io by example, create a global socket context to use anywhere

• پیوستن کاربر و پیوستن به مکالمه Join user and join conversation

• ارسال و دریافت پیام‌ها به صورت بلادرنگ 1 + رفع یک اشتباه بزرگ که مرتکب شدم Send and receive messages realtime 1 + fixing a huge mistake i made

• ارسال و دریافت پیام‌ها به صورت بلادرنگ (به‌روزرسانی پیام‌ها و مکالمات) Send and receive messages realtime (update messages and conversations)

• وضعیت آنلاین Online status

• در حال تایپ... Typing...

ارسال فایل‌ها Sending files

• کامپوننت پیوست عکس و مدیریت تصاویر Photo attachment component and handling images

• کامپوننت پیوست سند و مدیریت اسناد، فیلم‌ها، فایل‌های صوتی Document attachment component and handling documents, videos, audio files

• راه‌اندازی پیش‌نمایش فایل‌ها Preview files setup

• سربرگ پیش‌نمایش فایل‌ها Preview files -header

• پیش‌نمایش فایل File preview

• ورودی پیام Message input

• فهرست تمام تصاویر کوچک فایل‌ها List all files thumbnails

• اضافه کردن فایل‌های دیگر Add other files

• آپلود فایل‌ها به cloudinary و ارسال پیام Upload files to cloudinary and send message

• لودر و حذف فایل‌ها loader and remove files

• ارسال پیش‌نمایش فایل‌های ویدیویی Send video files preview

• فهرست فایل‌ها با پیام: تصویر و ویدیو List files with message : image and video

• فهرست فایل‌ها با پیام: بقیه موارد List files with message : all the rest

تماس‌های ویدیویی Video calls

• در حال زنگ خوردن Ringing

• سربرگ تماس Call header

• محدوده تماس call area

• رابط کاربری اکشن‌های تماس Call actions ui

• رابط کاربری ویدیوهای تماس call videos ui

• جریان ویدیو و دریافت شناسه سوکت video stream and get socket id

• تماس با کاربر و دریافت زنگ خوردن Call user and receive ringing

• رفع مشکلات کامپوننت دریافت زنگ خوردن Fixing receive ringing component issues

• تماس با یک کاربر و پاسخ دادن به تماس Call a user and answer the call

• تغییر وضعیت ویدیو و صدای زنگ toggle video and ringing sound

• پایان دادن به تماس End call

• شمارنده زمان تماس call time counter

چت‌های گروهی Group chats

• ایجاد گروه: بیایید شروع کنیم Create group : lets start

• جستجو و انتخاب چند کاربر Search and select multiple users

• مدیریت کننده جستجو و استایل‌های سفارشی Search handler and custom styles

• ایجاد یک گروه: منطق بک‌اند و ارسال درخواست Create a group : backend logic and send request

• رفع کنترلر چت گروهی باز و فرانت‌اند fixing the open group chat controller ad frontend

• تصاویر شرکت‌کنندگان گروه Group participants pictures