آموزش Node.js و React: ساخت یک برنامه کامل چت وب - آخرین آپدیت

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

نصب و پیکربندی Node و تنظیم پایگاه داده Installing and configuring Node and setting up Database

• مقدمه فصل Chapter Introduction

• نصب گره و npm Installing node and npm

• ایجاد پروژه گره Creating node project

• نصب اکسپرس Installing express

• نصب nodemon Installing nodemon

• هنگام اجرای دستورات ، مشکلات دسترسی به کد تصویری استودیو را برطرف کنید Resolve visual studio code access rights problems when executing commands

• ایجاد پرونده های env و پیکربندی Creating env and config files

• ایجاد ساختار اساسی پروژه Creating basic project structure

• نصب PostgreSQL ، pgAdmin و Sequelize Installing PostgreSQL, pgAdmin, and Sequelize

ایجاد مدل کاربر ، مهاجرت و seeder Creating user model, migration, and seeder

• مقدمه فصل Chapter Introduction

• ایجاد مدل کاربر و مهاجرت Creating user model and migration

• ایجاد فایل seeder کاربر Creating user seeder file

• هش کردن رمزهای عبور کاربر با bcrypt Hashing user passwords with bcrypt

عیب یابی مجدد روتر گره و افزودن احراز هویت Refactoring node router and adding Authentication

• مقدمه فصل Chapter Introduction

• روتر اولیه Initial router

• آزمایش مسیرها با پستچی و متن درخواست تجزیه Testing routes with Postman and parsing request body

• ایجاد کنترل کننده های Auth و ورود به سیستم در کاربران Creating Auth controllers and loging in users

• تولید JWT (توکن وب json) Generating JWT (json web token)

• اتمام عملکرد ثبت و ایجاد کلید مخفی مناسب Finishing register functionality and creating proper secret key

• افزودن اعتبار درخواست فرم سمت سرور Adding server side form request validation

ایجاد برنامه واکنش و تنظیم ساختار پروژه Creating react application and setting project structure

• مقدمه فصل Chapter Introduction

• نصب React App و تنظیم ساختار پروژه Installing React App and setting project structure

ایجاد اجزای Auth و کاربر احراز هویت Creating Auth components and authentication user

• مقدمه فصل Chapter Introduction

• سبک ها و دارایی های برنامه App styles and assets

• ایجاد م initialلفه های اولیه و افزودن React Router Creating initial components and adding React Router

• ایجاد م componentلفه ورود به سیستم Creating login component

• سبک کردن م componentلفه ورود به سیستم و نصب تجزیه کننده scss Styling login component and installing scss parser

• ایجاد و یک ظاهر طراحی کردن جز register ثبت Creating and styling register component

• پاسخگو بودن سبک های م componentلفه Making component styles responsive

• احراز هویت کاربر با بدیهیات Authenticating user with axios

• افزودن پیکربندی پایه axios و ایجاد خدمات API Adding axios base configuration and creating API services

افزودن Redux و کار روی ویژگیهای Auth Adding Redux and working on Auth features

• مقدمه فصل Chapter Introduction

• بررسی اجمالی Redux Redux overview

• نصب Redux و ایجاد اقدامات Auth Installing Redux and creating auth actions

• ایجاد کاهش دهنده خودکار Creating auth reducer

• ایجاد فروشگاه Redux Creating Redux store

• ذخیره اطلاعات کاربر در داخل فروشگاه Saving user details inside store

• ثبت نام کاربر را تمام کنید Finish user registration

• افزودن مسیر محافظت شده Adding protected route

ایجاد نوار گفتگوی چت و به روزرسانی مشخصات کاربر Creating chat navbar and updating user profile

• ایجاد چت Navbar با سبک Creating chat Navbar with style

• افزودن تصویر پیش فرض آواتار کاربر Adding user default avatar image

• افزودن نمادهای عالی قلم Adding font awesome icons

• ایجاد لیست کشویی و خروج از سیستم Creating dropdown and logout

• مداوم ورود کاربر در فضای ذخیره سازی محلی Persisting logged in user in local storage

• ایجاد م componentلفه سفارشی Creating custom modal component

• در حال تکمیل ملفه سفارشی Finishing custom modal component

• در حال به روزرسانی فرم مشخصات کاربر Updating user profile form

• ایجاد میان افزار خودکار در Node Creating auth middleware in Node

• ایجاد روش بروزرسانی در کنترل کننده و آزمایش با پستچی Creating update method in controller and testing with Postman

• ایجاد بارگذاری پرونده Node Creating Node file upload

• ایجاد و تکمیل و آزمایش بارگذاری پرونده Node Creating Node file upload finishing and testing

• در حال بارگذاری آواتار کاربر از فرم مدال Uploading user avatar from modal form

• ایجاد رهگیر axios Creating axios interceptor

ایجاد مدل های گپ و کنترل کننده Creating chat models and Controller

• مقدمه فصل Chapter Introduction

• بررسی اجمالی پایگاه داده Database overview

• ایجاد چت ، ChatUser ، مدل پیام و مهاجرت ها Creating Chat, ChatUser, Message model and migrations

• ایجاد فایل seeder چت Creating chat seeder file

• ایجاد کنترل کننده چت و عملکرد فهرست Creating chat controller and index function

• ایجاد عملکرد جدید چت Creating new chat function

• ایجاد صفحه بندی پیام های چت Creating chat messages pagination

• ایجاد عملکرد حذف چت Creating delete chat function

ایجاد م chatلفه های گپ Creating chat components

• مقدمه فصل Chapter Introduction

• واکشی چت ها و ذخیره در فروشگاه Fetching chats and saving in store

• ایجاد UI اولیه گپ Creating chat initial UI

• در حال تکمیل ملفه لیست دوستان Finishing Friend List component

• افزودن پیام رسان Adding messenger

• کار بر روی هدر چت و نمایش اطلاعات کاربر Working on chat header and displaying user information

• ارائه پیام های گپ Rendering chat messages

• ایجاد ورودی پیام Creating message input

پیاده سازی سوکت های وب Implementing Web Sockets

• مقدمه فصل Chapter Introduction

• مقدمه فصل Chapter Introduction

• اضافه کردن سوکت در Node Adding sockets in Node

• افزودن سوکت در React و اتصال اتصال Adding sockets in React and testing connection

• افزودن سوکت در رویداد پیوستن Adding socket on join event

• ایجاد پرس و جو برای گفتگو Creating get chatters query

• پریز کاربر را جدا کنید Disconnect user socket

• در حال آزمایش رویدادهای جدید سوکت Testing new socket events

• به روزرسانی وضعیت همه دوستان آنلاین Updating state of all online friends

• به روزرسانی وضعیت دوست وقتی آنلاین می شوند یا آفلاین می شوند Updating friend status when they come online or go offline