آموزش تخته سفید مشترک 2023 با React Canvas و SocketIO

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

معرفی Introduction

• نصب گره Node installation

• ساخت React Application Creating React Application

• معرفی Redux Redux Introduction

• تمیز کردن قالب Redux Cleaning Redux Template

• ایجاد کامپوننت تخته سفید Creating Whiteboard Component

• ایجاد منوی ابزار Creating Tools Menu

• ایجاد دکمه افزودن مستطیل Creating Add Rectangle Button

• اتصال اکشن به دکمه مستطیل Connecting Action To Rectangle Button

• کد بعد از بخش را کامل کنید Complete code after section

رسم مستطیل Drawing Rectangle

• آماده سازی بوم نقاشی و طراحی عناصر ساده Preparing Canvas And Drawing Simple Elements

• مدیریت رویداد حرکت ماوس Handling Mouse Move Event

• ایجاد عنصر مستطیل Creating Rectangle Element

• افزودن عنصر جدید به آرایه عناصر Adding New Element To Elements Array

• رسیدگی به رویداد Mouse Up Handling Mouse Up Event

• به روز رسانی عنصر در حرکت ماوس Updating Element On Mouse Move

• رسم مستطیل Drawing Rectangle

• تنظیمات مختصات Coordinates Adjustments

• کد بعد از بخش را کامل کنید Complete Code After Section

پیاده سازی ویژگی مشارکتی با SocketIO Implementing Collaborative Feature with SocketIO

• مقدمه ای بر SocketIO Introduction to SocketIO

• ایجاد سرور اکسپرس Creating Express Server

• اتصال با سرور SocketIO از سمت مشتری Connecting With SocketIO Server From Client Side

• تبادل داده از طریق سرور SocketIO با سایر مشتریان متصل Exchanging Data through SocketIO Server With Other Connected Clients

• کد بعد از بخش را کامل کنید Complete Code After Section

ایجاد عنصر خط Creating Line Element

• اضافه کردن دکمه منوی خط Adding Line Menu Button

• ایجاد عنصر خط Creating Line Element

• مدیریت رویداد حرکت ماوس هنگام کشیدن خط Handling Mouse Move Event When Drawing Line

• خط رسم Drawing Line

• تنظیم مختصات خط Adjusting Line Coordinates

• کد بعد از بخش را کامل کنید Complete Code After Section

ویژگی لاستیک Rubber Feature

• ایجاد دکمه منو و پاک کردن حالت محلی Creating Menu Button and Clearing Local State

• پاک کردن وضعیت عناصر در سمت سرور و همه مشتریان متصل Clearing Elements State At Server Side And All Connected Clients

• کد بعد از بخش را کامل کنید Complete Code After Section

ویژگی مداد Pencil Feature

• اضافه کردن دکمه مداد به منو Adding Pencil Button To Menu

• مقدمه بی نقص Perfect Freehand Introduction

• ایجاد عنصر مداد جدید Creating New Pencil Element

• به روز رسانی آرایه از نقاط Updating Array Of Points

• طراحی عنصر مداد Drawing Pencil Element

• رفع خطای کنسول Fixing Console Error

• کد بعد از بخش را کامل کنید Complete Code After Section

ویژگی متن Text Feature

• ایجاد دکمه متن Creating Text Button

• Refactor کوچک دسته پایین موس Small Refactor Of Handle Mouse Down Handler

• به روز رسانی عنصر متن Updating Text Element

• منطقه متن رندر Rendering Text Area

• طراحی عنصر متن Drawing Text Element

• مدیریت رویداد Blur Handling Blur Event

• رفع خطای کنسول Fixing Console Error

• رفع افکت جامپینگ Fixing Jumping Effect

• کد بعد از بخش را کامل کنید Complete Code After Section

ویژگی انتخاب (تغییر اندازه و متحرک مستطیل) Selection Feature (Resizing And Moving Rectangle)

• ایجاد دکمه انتخاب Creating Selection Button

• به دست آوردن عنصر در موقعیت Getting Element At Position

• رفع اشکال با موقعیت Fixing Bug With Position

• دریافت مکان‌نمای صحیح بسته به موقعیت Getting Correct Cursor Depending On Position

• تنظیم نوع عمل بسته به موقعیت روی مستطیل Setting Action Type Depending On Position On Rectangle

• محاسبه افست و تنظیم عنصر Calculating Offset And Setting Element

• محاسبه مختصات پس از حرکت عنصر Calculating Coordinates After Moving Element

• رفع اشکال و تست عملکرد حرکت Fixing Bug And Testing Moving Functionality

• تغییر اندازه عملکرد و آزمایش Resizing Functionality And Testing

• کد بعد از بخش را کامل کنید Complete Code After Section

متحرک عنصر متن Moving Text Element

• متحرک عنصر متن Moving Text Element

• کد بعد از بخش را کامل کنید Complete Code After Section

تغییر اندازه و حرکت خط Resizing And Moving Line

• تغییر اندازه خط Resizing Line

• حرکت دادن خط Moving The Line

• کد بعد از بخش را کامل کنید Complete Code After Section

انتخاب و حرکت عنصر مداد Selecting And Moving Pencil Element

• انتخاب عنصر مداد Selecting Pencil Element

• رفع اشکال با انتخاب Fixing Bug With Selection

• افزودن ورود به سیستم در حرکت Adding Login On Move

• رفع اشکال با حرکت Fixing Bug With Moving

• کد بعد از بخش را کامل کنید Complete Code After Section

قابلیت اشتراک گذاری موقعیت های مکان نما Sharing Cursor Positions Functionality

• آماده سازی برش مکان نما (Redux) Preparing Cursor Slice (Redux)

• آماده سازی رویدادها برای ارسال داده های مکان نما Preparing Events To Send Cursor Data

• به اشتراک گذاری موقعیت مکان نما با سایر کاربران Sharing Cursor Position With Other Users

• نمایش مکان نماها Rendering Cursors

• حذف مکان نما کاربر قطع شده Removing Disconnected User Cursor

• کد کامل بعد از بخش Comple Code After Section