آموزش یک کلون توییتر با Node.js، Socket.IO و MongoDB ایجاد کنید

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

Node JS Basic Overview Node JS Basic Overview

• ویدیوی تبلیغاتی دوره (از صفحه اصلی دوره) Course promo video (from course home page)

• راه اندازی و ایجاد اولین برنامه ما Setup and creating our first app

• راه اندازی و ایجاد اولین برنامه ما Setup and creating our first app

• ایجاد سرور Creating a server

• چگونه برنامه را ترک یا متوقف کنیم How to quit/stop the app from running

• چگونه برنامه را ترک یا متوقف کنیم How to quit/stop the app from running

• ارائه محتوا در صفحه وب Rendering content on the web page

• پشتیبانی از صفحات اضافی Supporting additional pages

• افزودن فایل مسیریابی Adding a routing file

• رسیدگی به درخواست های POST/GET (ارسال فرم) Handling POST/GET requests (form submissions)

Node JS Basic Overview Node JS Basic Overview

• ویدیوی تبلیغاتی دوره (از صفحه اصلی دوره) Course promo video (from course home page)

• ایجاد سرور Creating a server

• ارائه محتوا در صفحه وب Rendering content on the web page

• پشتیبانی از صفحات اضافی Supporting additional pages

• افزودن فایل مسیریابی Adding a routing file

• رسیدگی به درخواست های POST/GET (ارسال فرم) Handling POST/GET requests (form submissions)

با استفاده از NPM Using NPM

• npm init npm init

• در حال نصب اولین بسته npm ما Installing our first npm package

• در حال نصب اولین بسته npm ما Installing our first npm package

• npm نصب کنید npm install

• npm نصب کنید npm install

• به git می‌گوییم node_modules را نادیده بگیرد (اگر از git استفاده نمی‌کنید، رد شوید) Telling git to ignore node_modules (skip if not using git)

با استفاده از NPM Using NPM

• npm init npm init

• به git می‌گوییم node_modules را نادیده بگیرد (اگر از git استفاده نمی‌کنید، رد شوید) Telling git to ignore node_modules (skip if not using git)

موتورهای قالب (Pug) Template Engines (Pug)

• راه اندازی پروژه ما Setting up our project

• راه اندازی پروژه ما Setting up our project

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

• ارائه برخی از مطالب در صفحه وب Rendering some content on the web page

• ایجاد اولین قالب Pug ما Creating our first Pug template

• ایجاد اولین قالب Pug ما Creating our first Pug template

• ارائه عنوان صفحه پویا Rendering a dynamic page title

• ارائه عنوان صفحه پویا Rendering a dynamic page title

• در حال گسترش فایل الگوی پاگ دیگر Extending another pug template file

• در حال گسترش فایل الگوی پاگ دیگر Extending another pug template file

• بهبود سریع html Quick html improvements

موتورهای قالب (Pug) Template Engines (Pug)

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

• ارائه برخی از مطالب در صفحه وب Rendering some content on the web page

• بهبود سریع html Quick html improvements

سیستم ثبت نام/ورود Registration/Login System

• Middleware: تغییر مسیر کاربر در صورت عدم ورود به سیستم Middleware: Redirecting the user if not logged in

• Middleware: تغییر مسیر کاربر در صورت عدم ورود به سیستم Middleware: Redirecting the user if not logged in

• افزودن مسیر ورود Adding the login route

• ایجاد صفحه ورود Creating the login page

• ایجاد صفحه ورود Creating the login page

• اضافه کردن بوت استرپ Adding Bootstrap

• ارائه فایل های استاتیک Serving static files

• ارائه فایل های استاتیک Serving static files

• وارد CSS شوید Login CSS

• ایجاد صفحه ثبت نام Creating the register page

• ایجاد صفحه ثبت نام Creating the register page

• بررسی مطابقت گذرواژه‌ها Checking that the passwords match

• بررسی مطابقت گذرواژه‌ها Checking that the passwords match

• اضافه کردن تجزیه کننده بدن Adding body parser

• اضافه کردن تجزیه کننده بدن Adding body parser

• بررسی فیلدهای خالی Checking for empty fields

• شروع کار با MongoDB Getting started with MongoDB

• شروع کار با MongoDB Getting started with MongoDB

• اتصال به پایگاه داده Connecting to the database

• اتصال به پایگاه داده Connecting to the database

• ایجاد یک اتصال پایگاه داده قابل استفاده مجدد Creating a reusable database connection

• ایجاد یک اتصال پایگاه داده قابل استفاده مجدد Creating a reusable database connection

• ایجاد طرحواره کاربری (مانگوس) Creating the User Schema (mongoose)

• ایجاد طرحواره کاربری (مانگوس) Creating the User Schema (mongoose)

• بررسی اینکه آیا نام کاربری یا ایمیل ها از قبل در حال استفاده هستند یا خیر Checking if username or emails are already in use

• Async و Await توضیح Async and Await explanation

• بررسی اینکه آیا نام کاربری یا ایمیل از قبل در حال استفاده است یا خیر Checking if the username or email are already in use

• بررسی اینکه آیا نام کاربری یا ایمیل از قبل در حال استفاده است یا خیر Checking if the username or email are already in use

• درج کاربر در مجموعه Inserting a user into the collection

• اضافه کردن مهر زمانی به داده های ما Adding timestamps to our data

• هش کردن رمز عبور Hashing the password

• جلسات Sessions

• جلسات Sessions

• ارسال کاربر وارد شده به مشتری Passing the logged in user to the client

• ارسال کاربر وارد شده به مشتری Passing the logged in user to the client

• ورود به سیستم در Logging in

سیستم ثبت نام/ورود Registration/Login System

• افزودن مسیر ورود Adding the login route

• اضافه کردن بوت استرپ Adding Bootstrap

• وارد CSS شوید Login CSS

• بررسی فیلدهای خالی Checking for empty fields

• بررسی اینکه آیا نام کاربری یا ایمیل ها از قبل در حال استفاده هستند یا خیر Checking if username or emails are already in use

• Async و Await توضیح Async and Await explanation

• درج کاربر در مجموعه Inserting a user into the collection

• اضافه کردن مهر زمانی به داده های ما Adding timestamps to our data

• هش کردن رمز عبور Hashing the password

• ورود به سیستم در Logging in

ایجاد طرح اصلی سایت Creating the site's main layout

• معرفی شبکه بوت استرپ Bootstrap grid intro

• معرفی شبکه بوت استرپ Bootstrap grid intro

• یک طرح پاسخگو ایجاد کنید Creatig a responsive layout

• اضافه کردن FontAwesome Adding FontAwesome

• اضافه کردن FontAwesome Adding FontAwesome

• انتخاب نمادهای نوار ناوبری ما Choosing our navigation bar icons

• حالت دادن به نوار پیمایش Styling the navigation bar

• رنگ های نماد ناوبری Navigation icon colours

• رنگ های نماد ناوبری Navigation icon colours

• خروج از سیستم Logging out

• خروج از سیستم Logging out

• اضافه کردن عنوان صفحه Adding the page title

ایجاد طرح اصلی سایت Creating the site's main layout

• یک طرح پاسخگو ایجاد کنید Creatig a responsive layout

• انتخاب نمادهای نوار ناوبری ما Choosing our navigation bar icons

• حالت دادن به نوار پیمایش Styling the navigation bar

• اضافه کردن عنوان صفحه Adding the page title

ایجاد فرم پست Creating the post form

• مخلوط ها Mixins

• مخلوط ها Mixins

• تنظیم عکس نمایه پیش فرض Setting the default profile picture

• حالت دادن به ظرف فرم پست Styling the post form container

• حالت دادن به ناحیه بافت Styling the textarea

• حالت دادن به ناحیه بافت Styling the textarea

• افزودن یک فایل جاوا اسکریپت رایج Adding a common javascript file

• دریافت متن وارد شده از جعبه متن Getting the entered text from the textbox

• فعال کردن دکمه ارسال در هنگام تایپ کاربر Enabling the submit button when the user types

• فعال کردن دکمه ارسال در هنگام تایپ کاربر Enabling the submit button when the user types

ایجاد فرم پست Creating the post form

• تنظیم عکس نمایه پیش فرض Setting the default profile picture

• حالت دادن به ظرف فرم پست Styling the post form container

• افزودن یک فایل جاوا اسکریپت رایج Adding a common javascript file

• دریافت متن وارد شده از جعبه متن Getting the entered text from the textbox

استایل دادن به پست ها Styling the posts

• افزودن یک کنترل کننده کلیک به دکمه پست Adding a click handler to the post button

• افزودن یک کنترل کننده کلیک به دکمه پست Adding a click handler to the post button

• توضیح اولیه Rest API Rest API basic explanation

• توضیح اولیه Rest API Rest API basic explanation

• ارسال مسیر API Post API route

• ارسال مسیر API Post API route

• ارسال یک درخواست بد زمانی که داده نامعتبر است Sending a bad request when the data is invalid

• ارسال یک درخواست بد زمانی که داده نامعتبر است Sending a bad request when the data is invalid

• ایجاد طرحواره پست ها Creating the posts Mongoose schema

• ایجاد طرحواره پست ها Creating the posts Mongoose schema

• درج پست در پایگاه داده Inserting the post into the database

• درج پست در پایگاه داده Inserting the post into the database

• رسیدگی به پاسخ سرور Handling the response from the server

• رسیدگی به پاسخ سرور Handling the response from the server

• خروجی محتوای پست Outputting the post content

• خروجی محتوای پست Outputting the post content

• خروجی اطلاعات کاربر از پست Outputting the user info from the post

• خروجی اطلاعات کاربر از پست Outputting the user info from the post

• استایل دادن به بدنه پست Styling the post body

• استایل دادن به دکمه‌های نظر، ریتوییت و لایک Styling the comment, retweet and like buttons

• استایل دادن به دکمه‌های نظر، ریتوییت و لایک Styling the comment, retweet and like buttons

• استایل‌های کامنت، ریتوییت و دکمه‌های لایک را نگه دارید Hover styles of the comment, retweet and like buttons

استایل دادن به پست ها Styling the posts

• استایل دادن به بدنه پست Styling the post body

• استایل‌های کامنت، ریتوییت و دکمه‌های لایک را نگه دارید Hover styles of the comment, retweet and like buttons

خروجی پست ها در فید خبری Outputting posts onto the newsfeed

• ایجاد فایل جاوا اسکریپت صفحه اصلی Creating the home page JavaScript file

• ایجاد فایل جاوا اسکریپت صفحه اصلی Creating the home page JavaScript file

• دریافت پست ها از پایگاه داده Getting posts from the database

• دریافت پست ها از پایگاه داده Getting posts from the database

• خروجی پست ها در صفحه Outputting posts on the page

• پر کردن اطلاعات ارسال شده توسط داده ها Populating the posted by data

• پر کردن جزئیات ورود به سیستم برای صرفه جویی در وقت Populating our login details to save us time

• پر کردن جزئیات ورود به سیستم برای صرفه جویی در وقت Populating our login details to save us time

• محاسبه مهر زمانی پست ها Calculating the timestamp of the posts

• محاسبه مهر زمانی پست ها Calculating the timestamp of the posts

• ابتدا سفارش پست ها بر اساس جدیدترین ها Ordering the posts by newest first

• ابتدا سفارش پست ها بر اساس جدیدترین ها Ordering the posts by newest first

خروجی پست ها در فید خبری Outputting posts onto the newsfeed

• خروجی پست ها در صفحه Outputting posts on the page

• پر کردن اطلاعات ارسال شده توسط داده ها Populating the posted by data

دکمه لایک The like button

• افزودن فیلد لایک به طرحواره ها Adding the likes field to the schemas

• افزودن فیلد لایک به طرحواره ها Adding the likes field to the schemas

• مانند کنترل کننده کلیک دکمه Like button click handler

• دریافت شناسه پست از عنصر کلیک شده Getting the post id from the clicked element

• دریافت شناسه پست از عنصر کلیک شده Getting the post id from the clicked element

• نمای کلی انواع درخواست API Rest Rest API request types overview

• نمای کلی انواع درخواست API Rest Rest API request types overview

• درخواست PUT Making a PUT request

• درخواست PUT Making a PUT request

• بررسی اینکه آیا کاربر قبلاً پست را دوست داشته است یا خیر Checking if if the user has already like the post

• درج موارد مشابه Inserting the like

• درج موارد مشابه Inserting the like

• لغو لایک کردن پست ها Unliking posts

• لغو لایک کردن پست ها Unliking posts

• برگرداندن نتیجه مشابه به مشتری Returning the like result to the client

• برگرداندن نتیجه مشابه به مشتری Returning the like result to the client

• در حال به روز رسانی دکمه برای نمایش تعداد لایک های جدید Updating the button to show the new number of likes

• در حال به روز رسانی دکمه برای نمایش تعداد لایک های جدید Updating the button to show the new number of likes

• انتقال اطلاعات ورود کاربر به مشتری Passing the user logged in info to the client

• انتقال اطلاعات ورود کاربر به مشتری Passing the user logged in info to the client

• تغییر رنگ دکمه هنگام پسند شدن پست Changing button colour when post is liked

• تغییر رنگ دکمه هنگام پسند شدن پست Changing button colour when post is liked

• نمایش رنگ صحیح دکمه هنگام بارگیری صفحه Showing correct button colour when page loads

دکمه لایک The like button

• مانند کنترل کننده کلیک دکمه Like button click handler

• بررسی اینکه آیا کاربر قبلاً پست را دوست داشته است یا خیر Checking if if the user has already like the post

• نمایش رنگ صحیح دکمه هنگام بارگیری صفحه Showing correct button colour when page loads

بازتوییت کردن پست ها Retweeting posts

• راه اندازی مسیر ریتوییت Setting up the retweet route

• افزودن فیلدهای ریتوییت به طرحواره Adding the retweet fields to the schema

• بازتوییت کردن پست ها Retweeting posts

• بازتوییت کردن پست ها Retweeting posts

• بازتوییت کردن پست ها - رفع کنید Retweeting posts - Fix

• نمایش تعداد ریتوییت ها در کنار دکمه Showing the number of retweets next to the button

• نمایش تعداد ریتوییت ها در کنار دکمه Showing the number of retweets next to the button

• تنظیم رنگ دکمه ریتوییت هنگام بارگذاری صفحه Setting retweet button colour when page is loaded

• تنظیم رنگ دکمه ریتوییت هنگام بارگذاری صفحه Setting retweet button colour when page is loaded

• در حال ارائه ریتوییت Rendering the retweet

• پر کردن فیلد postedBy ریتوییت Populating the retweet's postedBy field

• پر کردن فیلد postedBy ریتوییت Populating the retweet's postedBy field

• افزودن نشانگر پیام بازتوییت Adding the retweet message indicator

بازتوییت کردن پست ها Retweeting posts

• راه اندازی مسیر ریتوییت Setting up the retweet route

• افزودن فیلدهای ریتوییت به طرحواره Adding the retweet fields to the schema

• بازتوییت کردن پست ها - رفع کنید Retweeting posts - Fix

• در حال ارائه ریتوییت Rendering the retweet

• افزودن نشانگر پیام بازتوییت Adding the retweet message indicator

پاسخ دادن به پست ها Replying to posts

• باز کردن بازشو مودال پاسخ Opening the reply modal popup

• افزودن فرم پست در حالت Adding the post form in the modal

• فعال کردن دکمه ارسال پاسخ هنگام تایپ کاربر Enabling the submit reply button when the user types

• فعال کردن دکمه ارسال پاسخ هنگام تایپ کاربر Enabling the submit reply button when the user types

• درخواست دریافت پست هنگام باز شدن مدال Making the request to get the post when modal opens

• بازسازی تابع دریافت پست Refactoring the get posts function

• بازسازی تابع دریافت پست Refactoring the get posts function

• دریافت یک پست واحد با شناسه Getting a single post by ID

• دریافت یک پست واحد با شناسه Getting a single post by ID

• خروجی پست در حالت پاسخ Outputting the post into the reply modal

• خروجی پست در حالت پاسخ Outputting the post into the reply modal

• پاک کردن مدال پاسخ وقتی بسته است Clearing the reply modal when it is closed

• پاک کردن مدال پاسخ وقتی بسته است Clearing the reply modal when it is closed

• ارسال پاسخ به سرور Sending the reply to the server

• درج پاسخ در پایگاه داده Inserting the reply into the database

• درج پاسخ در پایگاه داده Inserting the reply into the database

• بارگذاری مجدد صفحه پس از ارسال پاسخ Reloading the page after a reply is submitted

• خروجی پاسخ Outputting the reply

• خروجی پاسخ Outputting the reply

پاسخ دادن به پست ها Replying to posts

• باز کردن بازشو مودال پاسخ Opening the reply modal popup

• افزودن فرم پست در حالت Adding the post form in the modal

• درخواست دریافت پست هنگام باز شدن مدال Making the request to get the post when modal opens

• ارسال پاسخ به سرور Sending the reply to the server

• بارگذاری مجدد صفحه پس از ارسال پاسخ Reloading the page after a reply is submitted

ایجاد صفحه پست ها Creating the posts page

• ارسال کاربر به صفحه پست ها با کلیک Sending the user to the posts page on click

• ارسال کاربر به صفحه پست ها با کلیک Sending the user to the posts page on click

• ایجاد مسیر پست ها Creating the posts route

• ایجاد مسیر پست ها Creating the posts route

• در حال بارگیری پست در صفحه پست Loading the post on the post page

• در حال بارگیری پاسخ‌ها به پست در صفحه پست Loading the replies to the post on the post page

• در حال بارگیری پاسخ‌ها به پست در صفحه پست Loading the replies to the post on the post page

• رفع اشکال در پاسخ ها Fixing a bug in the replies

• رفع اشکال در پاسخ ها Fixing a bug in the replies

• اندازه فونت بزرگ برای پستی که در حال مشاهده آن هستیم Large font size for the post we're viewing

• اندازه فونت بزرگ برای پستی که در حال مشاهده آن هستیم Large font size for the post we're viewing

ایجاد صفحه پست ها Creating the posts page

• در حال بارگیری پست در صفحه پست Loading the post on the post page

حذف پست ها Deleting posts

• افزودن دکمه حذف به پست های خودمان Adding the delete button to our own posts

• حالت دادن به دکمه حذف Styling the delete button

• حالت دادن به دکمه حذف Styling the delete button

• دریافت شناسه پستی که می خواهیم حذف کنیم Getting the id of the post we want to delete

• دریافت شناسه پستی که می خواهیم حذف کنیم Getting the id of the post we want to delete

• برقراری تماس ajax برای حذف یک پست Making the ajax call to delete a post

• برقراری تماس ajax برای حذف یک پست Making the ajax call to delete a post

• در حال حذف پست Deleting the post

حذف پست ها Deleting posts

• افزودن دکمه حذف به پست های خودمان Adding the delete button to our own posts

• در حال حذف پست Deleting the post

صفحه نمایه Profile Page

• ایجاد فایل مسیر پروفایل Creating the profile route file

• ایجاد فایل پاگ صفحه پروفایل Creating the profile page pug file

• دسترسی به صفحه پروفایل با نام کاربری Accessing the profile page by username

• پیغام خطا کاربر پیدا نشد User not found error message

• دسترسی به صفحه نمایه با شناسه Accessing the profile page by ID

• استایل دادن به تصویر پروفایل + عکس روی جلد Styling the profile image + cover photo

• استایل دادن به تصویر پروفایل + عکس روی جلد Styling the profile image + cover photo

• سبک دکمه پیام Message button style

• سبک دکمه پیام Message button style

• حالت دادن به دکمه دنبال کردن Styling the follow button

• حالت دادن به دکمه دنبال کردن Styling the follow button

• خروجی اطلاعات کاربر Outputting the user details

• سبک دادن به جزئیات کاربر Styling the user details

• سبک دادن به جزئیات کاربر Styling the user details

• ایجاد تب های پروفایل Creating the profile tabs

• ایجاد تب های پروفایل Creating the profile tabs

• بارگیری پست ها در صفحه نمایه Loading posts on the profile page

• بارگیری پست ها در صفحه نمایه Loading posts on the profile page

• شامل/غیر از پاسخ ها Including/excluding the replies

• در حال پیاده سازی برگه پاسخ ها Implementing the replies tab

صفحه نمایه Profile Page

• ایجاد فایل مسیر پروفایل Creating the profile route file

• ایجاد فایل پاگ صفحه پروفایل Creating the profile page pug file

• دسترسی به صفحه پروفایل با نام کاربری Accessing the profile page by username

• پیغام خطا کاربر پیدا نشد User not found error message

• دسترسی به صفحه نمایه با شناسه Accessing the profile page by ID

• خروجی اطلاعات کاربر Outputting the user details

• شامل/غیر از پاسخ ها Including/excluding the replies

• در حال پیاده سازی برگه پاسخ ها Implementing the replies tab

فالوور و فالوور Following and followers

• طرحواره فالوورها و فالوورها تغییر می کند Following and followers schema changes

• طرحواره فالوورها و فالوورها تغییر می کند Following and followers schema changes

• وقتی دکمه فالو را فشار می دهیم شناسه کاربری را دریافت می کنیم Getting the user ID when we press the follow button

• وقتی دکمه فالو را فشار می دهیم شناسه کاربری را دریافت می کنیم Getting the user ID when we press the follow button

• ایجاد نقطه پایان فالو Creating the follow endpoint

• ایجاد نقطه پایان فالو Creating the follow endpoint

• بررسی اینکه آیا کاربر قبلاً شخص را دنبال می کند یا خیر Checking if the user is already following the person

• فالو کردن و لغو فالو کردن کاربر Following and unfollowing the user

• فالو کردن و لغو فالو کردن کاربر Following and unfollowing the user

• زمانی که کاربر را فالو/آنفالو می کنیم، دکمه را به روز می کنیم Updating the button when we follow/unfollow a user

• زمانی که کاربر را فالو/آنفالو می کنیم، متن دکمه را به روز می کنیم Updating the text of the button when we follow/unfollow a user

• زمانی که کاربر را فالو/آنفالو می کنیم، متن دکمه را به روز می کنیم Updating the text of the button when we follow/unfollow a user

• به روز رسانی تعداد زیر/فالوورها Updating the following/followers count

• ایجاد صفحه زیر/فالوور Creating the following/followers page

• دریافت داده های زیر/فالوورها از پایگاه داده Getting the following/followers data from the database

• دریافت داده های زیر/فالوورها از پایگاه داده Getting the following/followers data from the database

• خروجی گرفتن از کاربران Outputting the users

• خروجی گرفتن از کاربران Outputting the users

• سبک دادن به لیست کاربران Styling the users list

• افزودن دکمه فالو به لیست کاربران Adding the follow button to the user list

• فقط نمایش پست‌های افرادی که ما آنها را دنبال می‌کنیم Only showing posts from people we're following

• فقط نمایش پست‌های افرادی که ما آنها را دنبال می‌کنیم Only showing posts from people we're following

• رفع اشکال شمارش زیر Following count bug fix

فالوور و فالوور Following and followers

• بررسی اینکه آیا کاربر قبلاً شخص را دنبال می کند یا خیر Checking if the user is already following the person

• زمانی که کاربر را فالو/آنفالو می کنیم، دکمه را به روز می کنیم Updating the button when we follow/unfollow a user

• به روز رسانی تعداد زیر/فالوورها Updating the following/followers count

• ایجاد صفحه زیر/فالوور Creating the following/followers page

• سبک دادن به لیست کاربران Styling the users list

• افزودن دکمه فالو به لیست کاربران Adding the follow button to the user list

• رفع اشکال شمارش زیر Following count bug fix

آپلود عکس پروفایل Uploading profile pictures

• افزودن دکمه آپلود عکس نمایه Adding the profile picture upload button

• افزودن دکمه آپلود عکس نمایه Adding the profile picture upload button

• ایجاد حالت آپلود تصویر Creating the image upload modal

• افزودن Cropper JS (کتابخانه برش) Adding Cropper JS (the cropping library)

• بارگیری پیش‌نمایش تصویر در مدال Loading the image preview into the modal

• بارگیری پیش‌نمایش تصویر در مدال Loading the image preview into the modal

• افزودن قابلیت برش دهنده Adding the cropper functionality

• افزودن قابلیت برش دهنده Adding the cropper functionality

• تبدیل داده های آپلود تصویر به یک لکه Converting the image upload data to a blob

• تبدیل داده های آپلود تصویر به یک لکه Converting the image upload data to a blob

• تماس آپلود تصویر آژاکس Image upload ajax call

• تماس آپلود تصویر آژاکس Image upload ajax call

• دسترسی به تصویر روی سرور Accessing the image on the server

• دسترسی به تصویر روی سرور Accessing the image on the server

• ذخیره تصویر آپلود شده در محل صحیح Storing the uploaded image in the correct location

• ذخیره تصویر آپلود شده در محل صحیح Storing the uploaded image in the correct location

• به روز رسانی تصویر پروفایل کاربر در پایگاه داده Updating the user's profile picture in the database

آپلود عکس پروفایل Uploading profile pictures

• ایجاد حالت آپلود تصویر Creating the image upload modal

• افزودن Cropper JS (کتابخانه برش) Adding Cropper JS (the cropping library)

• به روز رسانی تصویر پروفایل کاربر در پایگاه داده Updating the user's profile picture in the database

در حال آپلود عکس روی جلد Uploading a cover photo

• افزودن دکمه آپلود به قسمت عکس جلد Adding the upload button to the cover photo section

• بازشو آپلود عکس روی جلد Cover photo upload modal popup

• بازشو آپلود عکس روی جلد Cover photo upload modal popup

• برش عکس روی جلد Cover photo cropping

• در حال آپلود عکس جلد Uploading the cover photo

در حال آپلود عکس روی جلد Uploading a cover photo

• افزودن دکمه آپلود به قسمت عکس جلد Adding the upload button to the cover photo section

• برش عکس روی جلد Cover photo cropping

• در حال آپلود عکس جلد Uploading the cover photo

پین کردن پست ها Pinning posts

• پین پست مدال Pin post modal

• پین کردن پست ها Pinning posts

• تغییر رنگ نماد برای پست پین شده Changing the icon colour for the pinned post

• برچسب پست پین شده Pinned post label

• برچسب پست پین شده Pinned post label

• نمایش پست پین شده در نمایه Displaying the pinned post on the profile

• برداشتن پین پست ها Unpinning posts

پین کردن پست ها Pinning posts

• پین پست مدال Pin post modal

• پین کردن پست ها Pinning posts

• تغییر رنگ نماد برای پست پین شده Changing the icon colour for the pinned post

• نمایش پست پین شده در نمایه Displaying the pinned post on the profile

• برداشتن پین پست ها Unpinning posts

صفحه جستجو Search page

• ایجاد صفحه جستجو Creating the search page

• ایجاد صفحه جستجو Creating the search page

• شکل دادن به کادر جستجو Styling the search box

• ایجاد تایمر جستجو Creating the search timer

• ایجاد تایمر جستجو Creating the search timer

• جستجو برای پست ها Searching for posts

• خروجی گرفتن از پست های جستجو Outputting the search posts

• خروجی گرفتن از پست های جستجو Outputting the search posts

• جستجو برای کاربران Searching for users

• خروجی گرفتن از کاربران جستجو Outputting the search users

صفحه جستجو Search page

• شکل دادن به کادر جستجو Styling the search box

• جستجو برای پست ها Searching for posts

• جستجو برای کاربران Searching for users

• خروجی گرفتن از کاربران جستجو Outputting the search users

ایجاد چت گروهی Creating group chats

• ایجاد مسیرهای صفحه صندوق ورودی Creating the inbox page routes

• ایجاد دکمه پیام جدید Creating the new message button

• عناصر صفحه پیام جدید New message page elements

• عناصر صفحه پیام جدید New message page elements

• سبک دادن به عناصر صفحه پیام جدید Styling the new message page elements

• افزودن تایمر جستجوی کاربر Adding the user search timer

• افزودن تایمر جستجوی کاربر Adding the user search timer

• خروجی کاربران قابل انتخاب Output selectable users

• خروجی کاربران قابل انتخاب Output selectable users

• انتخاب کاربران Selecting users

• انتخاب کاربران Selecting users

• حذف کاربران منتخب از نتایج جستجو Leaving selected users out of the search results

• حذف کاربران منتخب از نتایج جستجو Leaving selected users out of the search results

• خروجی گرفتن از کاربران انتخاب شده Outputting the selected users

• استایل دادن به کاربران انتخاب شده Styling the selected users

• حذف کاربر انتخاب شده Removing the selected user

• حذف کاربر انتخاب شده Removing the selected user

• ایجاد طرح چت Creating the chat schema

• ایجاد طرح چت Creating the chat schema

• ایجاد مسیرهای چت Creating the chat routes

• ایجاد مسیرهای چت Creating the chat routes

• ایجاد چت Creating chats

ایجاد چت گروهی Creating group chats

• ایجاد مسیرهای صفحه صندوق ورودی Creating the inbox page routes

• ایجاد دکمه پیام جدید Creating the new message button

• سبک دادن به عناصر صفحه پیام جدید Styling the new message page elements

• خروجی گرفتن از کاربران انتخاب شده Outputting the selected users

• استایل دادن به کاربران انتخاب شده Styling the selected users

• ایجاد چت Creating chats

لیست چت Chat list

• دریافت چت ها Getting the chats

• خروجی عناصر چت Outputting the chat elements

• خروجی عناصر چت Outputting the chat elements

• سبک دادن به موارد چت Styling the chat items

• سبک دادن به موارد چت Styling the chat items

• دریافت نام چت Getting the chat name

• دریافت نام چت Getting the chat name

• نمایش تصاویر چت Showing the chat images

• نمایش تصاویر چت Showing the chat images

• استایل دادن به تصاویر چت Styling the chat images

• بیضی برای متن پر شده Ellipsis for overflowing text

• بیضی برای متن پر شده Ellipsis for overflowing text

لیست چت Chat list

• دریافت چت ها Getting the chats

• استایل دادن به تصاویر چت Styling the chat images

دسترسی به چت ها Accessing chats

• ایجاد صفحه چت Creating the chat page

• ایجاد صفحه چت Creating the chat page

• دریافت داده های چت برای صفحه Getting the chat data for the page

• دریافت داده های چت برای صفحه Getting the chat data for the page

• بررسی وجود چت Checking that the chat exists

• دسترسی به چت با شناسه کاربری Accessing the chat by user ID

• ابتدا چت ها را بر اساس جدیدترین ها مرتب کنید Sorting the chats by most recent first

• ابتدا چت ها را بر اساس جدیدترین ها مرتب کنید Sorting the chats by most recent first

دسترسی به چت ها Accessing chats

• بررسی وجود چت Checking that the chat exists

• دسترسی به چت با شناسه کاربری Accessing the chat by user ID

رابط کاربری صفحه چت Chat page UI

• افزودن عناصر صفحه چت Adding the chat page elements

• افزودن عناصر صفحه چت Adding the chat page elements

• باعث می شود صفحه ارتفاع پنجره پر شود Making the page take up the fill window height

• باعث می شود صفحه ارتفاع پنجره پر شود Making the page take up the fill window height

• حالت دادن به نوار عنوان چت Styling the chat title bar

• شکل دادن به جعبه متن پیام Styling the message text box

• حالت دادن به محفظه پیام های چت Styling the chat messages container

• حالت دادن به محفظه پیام های چت Styling the chat messages container

• تصاویر چت گروهی Group chat images

• تصاویر چت گروهی Group chat images

• استایل دادن به تصاویر چت گروهی Styling the group chat images

• استایل دادن به تصاویر چت گروهی Styling the group chat images

• محدود کردن تعداد تصاویر چت نمایش داده شده Limiting the number of displayed chat images

رابط کاربری صفحه چت Chat page UI

• حالت دادن به نوار عنوان چت Styling the chat title bar

• شکل دادن به جعبه متن پیام Styling the message text box

• محدود کردن تعداد تصاویر چت نمایش داده شده Limiting the number of displayed chat images

تغییر نام چت Changing the chat name

• افزودن پنجره بازشو نام چت Adding the chat name modal popup

• افزودن پنجره بازشو نام چت Adding the chat name modal popup

• برقراری فراخوانی ajax برای تغییر نام Making the ajax call to change the name

• برقراری فراخوانی ajax برای تغییر نام Making the ajax call to change the name

• به روز رسانی نام چت در پایگاه داده Updating the chat name in the database

• به روز رسانی نام چت در پایگاه داده Updating the chat name in the database

• دریافت مسیر چت Get chat route

• دریافت مسیر چت Get chat route

• داده های چت را با شناسه چت دریافت کنید Get chat data by chat ID

• داده های چت را با شناسه چت دریافت کنید Get chat data by chat ID

تغییر نام چت Changing the chat name

ارسال پیام Sending messages

• گردانندگان رویداد پیام ارسال شده Message submitted event handlers

• گردانندگان رویداد پیام ارسال شده Message submitted event handlers

• تابع ارسال پیام Send message function

• ایجاد طرحواره پیام Creating the message schema

• ارسال پیام به پایگاه داده Sending the message to the database

ارسال پیام Sending messages

• تابع ارسال پیام Send message function

• ایجاد طرحواره پیام Creating the message schema

• ارسال پیام به پایگاه داده Sending the message to the database

خروجی پیام ها Outputting messages

• ایجاد پیام html Creating the message html

• اضافه کردن سبک اصلی برای پیام ها Adding the main style for the messages

• اضافه کردن سبک اصلی برای پیام ها Adding the main style for the messages

• سبک کردن پیام های خودمان Styling our own messages

• سبک کردن پیام های خودمان Styling our own messages

• رسیدگی به خطای ارسال پیام Handling a send message failure

• رسیدگی به خطای ارسال پیام Handling a send message failure

• خروجی آخرین پیام Outputting the latest message

• دریافت پیام ها از پایگاه داده Getting the messages from the database

• دریافت پیام ها از پایگاه داده Getting the messages from the database

• خروجی تمام پیام های چت Outputting all the chat messages

• خروجی تمام پیام های چت Outputting all the chat messages

• افزودن کلاس به اولین و آخرین پیام در یک گروه از پیام ها Adding classes to the first and last messages in a group of messages

• افزودن کلاس به اولین و آخرین پیام در یک گروه از پیام ها Adding classes to the first and last messages in a group of messages

• تنظیم شعاع مرزی پیام های ما Setting the border radius of our messages

• تنظیم شعاع مرزی پیام های آنها Setting the border radius of their messages

• تنظیم شعاع مرزی پیام های آنها Setting the border radius of their messages

• خروجی نام فرستنده Outputting the sender name

• خروجی تصویر نمایه فرستنده Outputting the sender profile picture

• رفع اشکال در اسکرول پیام ها Fixing a bug in the scrolling of messages

• رفع اشکال در اسکرول پیام ها Fixing a bug in the scrolling of messages

• پیمایش خودکار پیام ها به پایین Scrolling messages to the bottom automatically

• نمایش اسپینر در حال بارگیری در حین بارگیری پیام ها Showing a loading spinner while messages are loading

• نمایش اسپینر در حال بارگیری در حین بارگیری پیام ها Showing a loading spinner while messages are loading

خروجی پیام ها Outputting messages

• ایجاد پیام html Creating the message html

• خروجی آخرین پیام Outputting the latest message

• تنظیم شعاع مرزی پیام های ما Setting the border radius of our messages

• خروجی نام فرستنده Outputting the sender name

• خروجی تصویر نمایه فرستنده Outputting the sender profile picture

• پیمایش خودکار پیام ها به پایین Scrolling messages to the bottom automatically

پیام های زمان واقعی (Socket.IO) Real time messages (Socket.IO)

• نصب سوکت io Installing socket io

• اتصال به سوکت io از مشتری Connecting to socket io from the client

• ایجاد کنترل کننده رویداد سوکت راه اندازی ما Creating our setup socket event handler

• پیوستن به اتاق گفتگو Joining a chat room

• پیوستن به اتاق گفتگو Joining a chat room

• ارسال اعلان‌های تایپ Sending typing notifications

• رفع اشکال پیام های سافاری Safari messages bug fix

• رفع اشکال پیام های سافاری Safari messages bug fix

• نمایش نقاط تایپ gif هنگام تایپ کاربر Showing the typing dots gif when user is typing

• نمایش نقاط تایپ gif هنگام تایپ کاربر Showing the typing dots gif when user is typing

• پنهان کردن نقاط تایپ هنگامی که کاربر تایپ را متوقف می کند Hiding the typing dots when the user stops typing

• پنهان کردن نقاط تایپ هنگامی که کاربر تایپ را متوقف می کند Hiding the typing dots when the user stops typing

• پنهان کردن نقاط تایپ هنگام ارسال پیام Hiding the typing dots when a message is sent

• ارسال یک رویداد پیام جدید Sending a new message event

• ارسال یک رویداد پیام جدید Sending a new message event

• مدیریت پیام های دریافتی Handling incoming messages

• مدیریت پیام های دریافتی Handling incoming messages

پیام های زمان واقعی (Socket.IO) Real time messages (Socket.IO)

• نصب سوکت io Installing socket io

• اتصال به سوکت io از مشتری Connecting to socket io from the client

• ایجاد کنترل کننده رویداد سوکت راه اندازی ما Creating our setup socket event handler

• ارسال اعلان‌های تایپ Sending typing notifications

• پنهان کردن نقاط تایپ هنگام ارسال پیام Hiding the typing dots when a message is sent

ارسال نوتیفیکیشن Sending notifications

• ایجاد صفحه اطلاع رسانی Creating the notification page

• ایجاد صفحه اطلاع رسانی Creating the notification page

• ایجاد طرح اعلان Creating the notification schema

• ایجاد طرح اعلان Creating the notification schema

• درج اعلان ها Inserting notifications

• درج اعلان ها Inserting notifications

• ارسال اعلان فالو Sending a follow notification

• ارسال اعلان فالو Sending a follow notification

• ارسال اعلان برای لایک، ریتوییت و پاسخ Sending notifications for likes, retweets and replies

• ارسال اعلان برای لایک، ریتوییت و پاسخ Sending notifications for likes, retweets and replies

• ارسال اعلان برای پیام ها Sending notifications for messages

• ارسال اعلان برای پیام ها Sending notifications for messages

ارسال نوتیفیکیشن Sending notifications

نمایش اعلان ها Displaying notifications

• ایجاد مسیر api اعلان ها Creating the notifications api route

• ایجاد مسیر api اعلان ها Creating the notifications api route

• بازیابی اعلان ها از پایگاه داده Retrieving notifications from the database

• ایجاد اعلانات html Creating the notifications html

• ایجاد اعلانات html Creating the notifications html

• ایجاد متن اعلان Creating the notification text

• ایجاد متن اعلان Creating the notification text

• ایجاد لینک های اطلاع رسانی Creating the notification links

• تنظیم کلاس فعال در اعلان ها Setting the active class on the notifications

• تنظیم کلاس فعال در اعلان ها Setting the active class on the notifications

• علامت گذاری یک اعلان به عنوان باز شده Marking a notification as opened

• علامت گذاری یک اعلان به عنوان باز شده Marking a notification as opened

• کنترل کننده های کلیک اعلان Notification click handlers

• کنترل کننده های کلیک اعلان Notification click handlers

• علامت گذاری همه اعلان ها به عنوان خوانده شده Marking all notifications as read

• علامت گذاری همه اعلان ها به عنوان خوانده شده Marking all notifications as read

نمایش اعلان ها Displaying notifications

• بازیابی اعلان ها از پایگاه داده Retrieving notifications from the database

• ایجاد لینک های اطلاع رسانی Creating the notification links

نشان های اعلان/پیام خوانده نشده Unread notification/messages badges

• افزودن نشان اعلان‌ها/پیام‌ها به نوار ناوبری Adding the notifications/messages badge to the nav bar

• افزودن نشان اعلان‌ها/پیام‌ها به نوار ناوبری Adding the notifications/messages badge to the nav bar

• دریافت تعداد چت های خوانده نشده Getting the number of unread chats

• دریافت تعداد چت های خوانده نشده Getting the number of unread chats

• افزودن شماره به نشان پیام های خوانده نشده Adding the number to the unread messages badge

• افزودن شماره به نشان پیام های خوانده نشده Adding the number to the unread messages badge

• افزودن شماره به نشان اعلان‌های خوانده نشده Adding the number to the unread notifications badge

• افزودن شماره به نشان اعلان‌های خوانده نشده Adding the number to the unread notifications badge

نشان های اعلان/پیام خوانده نشده Unread notification/messages badges

اعلان های زمان واقعی Real time notifications

• ارسال رویداد سوکت اعلان Sending the notification socket event

• رسیدگی به اعلان های دریافتی Handling incoming notifications

• خروجی اعلان پاپ آپ Outputting the popup notification

• حالت دادن به لیست اعلان های بازشو Styling the popup notification list

• حالت دادن به لیست اعلان های بازشو Styling the popup notification list

• نمایش اسلاید اعلان ها Making the notifications slide into view

• خروجی پیام های بازشو Outputting the popup messages

• خروجی پیام های بازشو Outputting the popup messages

• علامت گذاری همه پیام ها به عنوان خوانده شده Marking all messages as read

• علامت گذاری همه پیام ها به عنوان خوانده شده Marking all messages as read

• ایجاد پیام های خوانده نشده دارای پس زمینه آبی است Making unread messages have a blue background

• ایجاد پیام های خوانده نشده دارای پس زمینه آبی است Making unread messages have a blue background

• رفع پیام های دریافتی Incoming message fix

• رفع پیام های دریافتی Incoming message fix

اعلان های زمان واقعی Real time notifications

• ارسال رویداد سوکت اعلان Sending the notification socket event

• رسیدگی به اعلان های دریافتی Handling incoming notifications

• خروجی اعلان پاپ آپ Outputting the popup notification

• نمایش اسلاید اعلان ها Making the notifications slide into view