Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Socket.IO
Collaborative Whiteboard 2023 with React Canvas and SocketIO

Collaborative Whiteboard 2023 with React Canvas and SocketIO

Loại khoá học: Web Development

Create Collaborative Whiteboard App with React and SocketIO. Learn how to create, move and resize elements on Canvas

image
50.000 VND
1.499.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

Let's create amazing Application - Collaborative Whiteboard. Course is designed in the practical way. We will start from scratch and finish with complete application. Main goal of this course is to play with technologies like React, Redux, JavaScript, SocketIO  and learn how to work with HTML Canvas in React. Thanks to SocketIO we will add some realtime effects to our application. We will share our moves with other Users which will give us effect of Collaborative Whiteboard. At the end we will add tracking system for Cursors of all connected users to our App.

What we will learn through the course:

  • Creating React Application from scratch

  • Working with Redux State Management

  • Adding HTML Canvas to React Application

  • Handle Mouse Events to create new shapes

  • Use hooks to manage state of the Canvas

  • Creating Rectangles, Lines, Freehand drawings and Text

  • Adding functionality of moving and resizing elements

  • Creating SocketIO Server

  • EXTRA Collaborative part of sharing our actions on canvas with other Users

  • Sharing cursors with all connected users

Who this course is for:

  • New beginners to create amazing project

  • Anyone who wants to learn how to create basics shapes on Canvas

  • Anyone who wants to learn how to share your actions with other users thanks to SocketIO

  • Anyone who wants to work with Canvas in React

  • Adding HTML Canvas to React Application

Bạn sẽ học được gì

Create Collaborative Whiteboard

Display Data On Canvas

Learn About HTML Canvas

Resize Element On Canvas

Move Elements On Canvas

Share Your Actions With Other Users Thanks To SocketIO

Create Sharing Cursor Functionality

Handle Mouse Events

Create UI With React

Create React Application From Scratch

Yêu cầu

  • Basic Programming Knowledge
  • JavaScript knowledge

Nội dung khoá học

12 sections

Introduction

9 lectures
Node installation
01:42
Creating React Application
03:32
Redux Introduction
05:13
Cleaning Redux Template
09:37
Creating Whiteboard Component
02:06
Creating Tools Menu
04:32
Creating Add Rectangle Button
09:22
Connecting Action To Rectangle Button
09:56
Complete code after section
00:02

Drawing Rectangle

9 lectures
Preparing Canvas And Drawing Simple Elements
14:42
Handling Mouse Move Event
09:13
Creating Rectangle Element
13:54
Adding New Element To Elements Array
11:42
Handling Mouse Up Event
02:24
Updating Element On Mouse Move
23:36
Drawing Rectangle
08:50
Coordinates Adjustments
14:00
Complete Code After Section
00:02

Implementing Collaborative Feature with SocketIO

5 lectures
Introduction to SocketIO
02:43
Creating Express Server
07:02
Connecting With SocketIO Server From Client Side
09:21
Exchanging Data through SocketIO Server With Other Connected Clients
12:42
Complete Code After Section
00:02

Creating Line Element

6 lectures
Adding Line Menu Button
02:46
Creating Line Element
04:34
Handling Mouse Move Event When Drawing Line
04:51
Drawing Line
03:47
Adjusting Line Coordinates
06:58
Complete Code After Section
00:02

Rubber Feature

3 lectures
Creating Menu Button and Clearing Local State
04:46
Clearing Elements State At Server Side And All Connected Clients
04:10
Complete Code After Section
00:02

Pencil Feature

7 lectures
Adding Pencil Button To Menu
02:21
Perfect Freehand Introduction
03:29
Creating New Pencil Element
03:55
Updating Array Of Points
05:08
Drawing Pencil Element
12:26
Fixing Console Error
01:40
Complete Code After Section
00:02

Text Feature

9 lectures
Creating Text Button
02:15
Small Refactor Of Handle Mouse Down Handler
05:18
Updating Text Element
02:11
Rendering Text Area
06:36
Drawing Text Element
04:27
Handling Blur Event
08:10
Fixing Console Error
01:11
Fixing Jumping Effect
03:58
Complete Code After Section
00:02

Selection Feature (Resizing And Moving Rectangle)

10 lectures
Creating Selection Button
03:05
Getting Element At Position
20:40
Fixing Bug With Position
02:46
Getting Correct Cursor Depending On Position
07:35
Setting Action Type Depending On Position On Rectangle
07:26
Calculating Offset And Setting Element
03:59
Calculating Coordinates After Moving Element
06:02
Fixing Bug And Testing Moving Functionality
03:35
Resizing Functionality And Testing
14:29
Complete Code After Section
00:02

Moving Text Element

2 lectures
Moving Text Element
07:26
Complete Code After Section
00:02

Resizing And Moving Line

3 lectures
Resizing Line
08:25
Moving The Line
13:01
Complete Code After Section
00:02

Selecting And Moving Pencil Element

5 lectures
Selecting Pencil Element
10:55
Fixing Bug With Selection
01:31
Adding Login On Move
09:07
Fixing Bug With Moving
03:20
Complete Code After Section
00:02

Sharing Cursor Positions Functionality

6 lectures
Preparing Cursor Slice (Redux)
07:00
Preparing Events To Send Cursor Data
03:55
Sharing Cursor Position With Other Users
11:11
Rendering Cursors
06:27
Removing Disconnected User Cursor
04:16
Comple Code After Section
00:02

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

How To Create 2D Defender Game With Unity & C#

How To Create 2D Defender Game With Unity & C#

749.000 VND
50.000 VND
The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi