HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP CƠ SỞ

ĐỀ TÀI: BẢNG VẼ TRỰC TUYẾN THỜI GIAN THỰC

Giảng viên: Đỗ Thị Liên

Sinh viên: Đỗ Minh Khôi
Số điện thoại: 0965651947
Mã sinh viên: B21DCCN070
Lớp: D21CQCN010-B
 Lời cảm ơn

Để hoàn thành chuyên đề báo cáo thực tập này trước tiên em xin gửi đến các quý
thầy, cô giáo Học viện Bưu Chính Viễn Thông lời cảm ơn chân thành và sâu sắc
nhất.

Đặc biệt, em xin gởi đến cô Đỗ Thị Liên– người đã tận tình hướng dẫn, giúp đỡ em
hoàn thành chuyên đề báo cáo thực tập này lời cảm ơn sâu sắc nhất.

Vì kiến thức bản thân còn hạn chế, trong quá trình thực tập, hoàn thiện chuyên đề
này em không tránh khỏi những sai sót, kính mong nhận được những ý kiến đóng
góp từ cô.

Em xin chân thành cảm ơn.

Mục lục

1. TỔNG QUAN VỀ LĨNH VỰC NGHIÊN CỨU.................................................

1.1. Giới thiệu về ứng dụng bảng vẽ................................................................

1.2. Một số ứng dụng nổi tiếng.............................................................................

2.PHƯƠNG PHÁP TIẾP CẬN VÀ GIẢI QUYẾT BÀI TOÁN.............................

2.1. Mô tả ứng dụng..............................................................................................

2.2. Tính năng chính.............................................................................................

2.3. Đối tượng sử dung.......................................................................................=

3.PHÁT TRIỂN HỆ THỐNG..................................................................................

3.1. Xác định yêu cầu............................................................................................

3.2. Lựa chọn công nghệ.......................................................................................

3.3. Thiết kế giao diện..........................................................................................

3.4. Xây dựng cơ sở dữ liệu..................................................................................

3.5. Kiến trúc phần mềm.......................................................................................

IV. GIAO DIỆN CHỨC NĂNG..............................................................................

VII. TÀI LIỆU THAM KHẢO................................................................................

CHƯƠNG 1: TỔNG QUAN VỀ LĨNH VỰC NGHIÊN CỨU

1.1. Giới thiệu về ứng dụng bảng vẽ trực tuyến

1.1.1. Định nghĩa
- Ứng dụng bảng vẽ trực tuyến là một ứng dụng web cho phép người dùng
tạo, chỉnh sửa và chia sẻ các tác phẩm nghệ thuật trực tuyến. Ứng dụng
này sử dụng công nghệ web hiện đại như HTML5, CSS3, JavaScript để
cung cấp cho người dùng các công cụ vẽ đa dạng và trải nghiệm mượt
mà.

1.1.2. Lịch sử phát triển

- Ứng dụng vẽ tranh trực tuyến bắt đầu xuất hiện từ đầu những năm 2000.
Ban đầu, các ứng dụng này còn đơn giản với chức năng hạn chế. Tuy
nhiên, với sự phát triển của công nghệ web, các ứng dụng bảng vẽ trực
tuyến ngày nay ngày càng trở nên mạnh mẽ và có thể đáp ứng nhu cầu
của cả những người dùng chuyên nghiệp.

1.1.3. Ưu điểm
- So với các phần mềm vẽ truyền thống, ứng dụng vẽ tranh trực tuyến có
nhiều ưu điểm như:
o Tiện lợi: Người dùng có thể truy cập và sử dụng ứng dụng mọi lúc
mọi nơi chỉ cần có kết nối internet.
o Miễn phí: Nhiều ứng dụng vẽ tranh trực tuyến cung cấp các chức
năng cơ bản miễn phí.
o Dễ sử dụng: Giao diện của các ứng dụng vẽ tranh trực tuyến
thường đơn giản và dễ sử dụng.
o Tính tương tác: Nhiều ứng dụng vẽ tranh trực tuyến cho phép
người dùng cùng sử dụng trong thời gian thực và nhận phản hồi.
1.2. Một số ứng dụng nổi tiếng trên thị trường.
- Miro (https://miro.com/)
- Sketch (https://www.sketch.com/)
- Krita (https://krita.org/en/)
- Adobe Fresco (https://www.adobe.com/products/fresco.html)
- Procreate (https://procreate.com/)
---------------------------------------------------------------------------------------

CHƯƠNG 2: NGHIÊN CỨU PHƯƠNG PHÁP TIẾP CẬN VÀ

GIẢI QUYẾT BÀI TOÁN

2.1. Mô tả ứng dụng:

- VisualizeHub là một không gian làm việc trực quan mang tính hợp tác được thiết kế
để truyền cảm hứng sáng tạo, hợp lý hóa hoạt động làm việc nhóm và nâng cao cách
biến các ý tưởng thành hiện thực. VisualizeHub cung cấp một khung vẽ vô hạn, nơi
trí tưởng tượng không có giới hạn, thoát khỏi những ràng buộc về không gian để thúc
đẩy một môi trường hợp tác và mở rộng các ý tưởng giữa các thành viên trong cùng
một đội.

2.2. Các chức năng chính:

- Infinite Creativity: Cung cấp một khung vẽ canvas vô tận cho các cá nhân và nhóm
để lên ý tưởng, lập kế hoạch.

- User Authentication and Profiles: Triển khai hệ thống xác thực người dùng để bảo
mật bảng và cho phép người dùng tạo hồ sơ để có trải nghiệm được cá nhân hóa.

- Real-Time Collaboration: Cho phép tương tác theo thời gian thực, cho phép các
thành viên trong nhóm làm việc cùng nhau một cách liền mạch, chia sẻ thông tin chi
tiết và chứng kiến mọi hành động diễn ra một cách đồng bộ.

- Responsive Design: Đảm bảo rằng nền tảng có thiết kế đáp ứng để thích ứng với các
kích thước màn hình và thiết bị khác nhau.

- Navigation and Search: Bao gồm chức năng tìm kiếm để dễ dàng định vị cácbảng
và cung cấp các tùy chọn điều hướng trực quan.
3.3 Đối tướng sử dụng:
- Chuyên gia sáng tạo: Các nhà thiết kế đồ họa, nghệ sĩ và nhóm sáng tạo
đang tìm kiếm một không gian kỹ thuật số để trực quan hóa và biến ý tưởng
của họ thành hiện thực.

- Người quản lý dự án: Các nhóm tham gia lập kế hoạch dự án, quản lý nhiệm
vụ và ra quyết định hợp tác.

- Giáo viên và Học sinh: Giáo viên và học sinh đang tìm kiếm một nền tảng
để học tập hợp tác, động não và hợp tác dự án.

- Nhóm kinh doanh: Các công ty và tổ chức nhằm tăng cường hợp tác nhóm,
đổi mới và lập kế hoạch dự án trong không gian làm việc kỹ thuật số.

- Nhóm làm việc từ xa: Các nhóm phân tán yêu cầu không gian ảo để cộng tác
và lên ý tưởng theo thời gian thực.

----------------------------------------------------------------------------------------------------

CHƯƠNG 3: PHÁT TRIỀN HỆ THỐNG

3.1. Xác định yêu cầu của ứng dụng

3.1.1. Yêu cầu chức năng
- Vẽ các hình dạng cơ bản: Bao gồm các đường thẳng, hình tròn, hình
vuông, hình chữ nhật.
- Sử dụng các công cụ vẽ đa dạng: bút vẽ màu, công cụ chọn vùng, công
cụ xóa.
- Điều chỉnh thuộc tính vẽ: Thay đổi màu sắc, độ dày nét vẽ, độ trong suốt,
kiểu đường viền, v.v.
- Thao tác chỉnh sửa: Hoàn tác, làm lại, di chuyển, xoay, thu phóng các đối
tượng vẽ.
- Tương tác thời gian thực: Người dung có thể tương tác với nhau trên
bảng vẽ trong thời gian thực.
 3.1.2. Yêu cầu phi chức năng
- Giao diện: Thân thiện, dễ sử dụng, bố cục hợp lý, trực quan, mang tính
thẩm mỹ cao.
- Khả năng tương thích: Hỗ trợ các trình duyệt web phổ biến như Chrome,
Firefox, Safari, Edge, v.v.
- Hiệu năng: Hoạt động ổn định, mượt mà, thời gian phản hồi nhanh
chóng.
- Bảo mật: Đảm bảo an toàn dữ liệu người dùng, bảo vệ quyền riêng tư và
chống truy cập trái phép.

3.2. Lựa chọn công nghệ phát triển ứng dụng:

- Frontend: NextJS/ReactJS, HTML5, TailwindCSS, RoughJS, Typescript,
Shadcn/UI.
- Backend: Convex, Liveblocks, Clerk.

3.3. Thiết kế giao diện người dùng (UI/UX)

3.3.1. Nguyên tắc thiết kế
- Thân thiện: Giao diện dễ sử dụng, dễ hiểu cho mọi đối tượng người dùng,
bao gồm cả người mới bắt đầu.
- Trực quan: Bố cục hợp lý, các thành phần được sắp xếp khoa học, sử
dụng biểu tượng và hình ảnh trực quan.
- Thẩm mỹ: Màu sắc hài hòa, font chữ phù hợp, mang lại trải nghiệm đẹp
mắt và chuyên nghiệp.
- Phản hồi: Giao diện tương thích và hiển thị tốt trên nhiều thiết bị khác
nhau như máy tính, máy tính bảng, điện thoại thông minh.

3.4. Xây dựng cơ sở dữ liệu

2.4.1. Thiết kế cấu trúc database
3.5 Kiến trúc phần mềm
Kiến trúc phần mềm: Component-Based Architecture (Công nghệ phần mềm dựa trên các
thành phần)
 Ưu điểm:
o Khả năng tái sử dụng: Các thành phần có tính mô-đun và có thể được tái sử
dụng trên các phần khác nhau trong ứng dụng nâng cao hiệu quả mã và giảm
trùng lặp.

o Tính mô đun: Chia giao diện người dùng thành các thành phần nhỏ hơn, dễ quản
lý hơn sẽ giúp code dễ hiểu, duy trì và cập nhật hơn.

o Khả năng bảo trì: Các thành phần gói gọn chức năng của chúng, giúp việc xác
định và khắc phục sự cố dễ dàng hơn. Việc bảo trì trở nên đơn giản hơn vì mỗi
thành phần có một trách nhiệm cụ thể.

o Khả năng mở rộng: Khi dự án phát triển, kiến trúc dựa trên thành phần cho phép
khả năng mở rộng dễ dàng hơn. Các tính năng mới có thể được thêm vào bằng
cách tạo và tích hợp các thành phần mới mà không ảnh hưởng đến cơ sở code
hiện có.

o Hợp tác: Các nhóm có thể làm việc độc lập trên các thành phần khác nhau, thúc
đẩy sự hợp tác và phát triển song song. Điều này có thể dẫn đến tăng năng suất và
phát triển tính năng nhanh hơn.

o Kiểm tra: Các thành phần có thể được tách biệt và chạy độc lập, tạo điều kiện
thuận lợi cho việc kiểm tra . Điều này giúp việc xác định và sửa lỗi dễ dàng hơn,
đảm bảo độ tin cậy cho ứng dụng

o Tính nhất quán: Cách tiếp cận dựa trên thành phần thúc đẩy tính nhất quán trong
thiết kế trong toàn bộ ứng dụng, vì các thành phần có thể được tạo kiểu và theo
chủ đề một cách thống nhất.

 Nhược điểm:
o Khó tiếp cận cho người mới tham gia dự án: Các nhà phát triển mới tham gia
dự án có thể phải làm quen với cấu trúc thành phần và cách các thành phần khác
nhau tương tác.

o Thiết lập ban đầu: Việc thiết lập cấu trúc ban đầu của các thành phần và sự
tương tác của chúng có thể yêu cầu một số nỗ lực và lập kế hoạch trước.

o Khó kiểm soát: Trong một số trường hợp, việc tạo quá nhiều thành phần nhỏ có
thể gây ra việc khó kiểm soát, đặc biệt nếu các thành phần quá chi tiết hoặc nếu
có sự lồng ghép quá mức.
 o Quản lý trạng thái chung: Việc quản lý trạng thái chung trong kiến trúc dựa trên
thành phần có thể trở nên phức tạp

o Ảnh hưởng hiệu suất: Trong một số trường hợp nhất định, nếu không được tối
ưu hóa chính xác thì việc có số lượng lớn thành phần có thể ảnh hưởng đến hiệu
suất. Điều này có thể được giảm thiểu thông qua các kỹ thuật tối ưu hóa thích
hợp.

o Tổ chức tập tin: Nếu không có chiến lược tổ chức tệp được cân nhắc kỹ lưỡng,
thư mục dự án có thể trở nên lộn xộn khi số lượng thành phần tăng lên.

o Quản lý phụ thuộc: Sự phụ thuộc giữa các thành phần có thể yêu cầu quản lý cẩn
thận để tránh sự phụ thuộc vòng tròn hoặc các mối quan hệ quá phức tạp.

CHƯƠNG 4: GIAO DIỆN CHỨC NĂNG

1, Landing page:
 Trước khi người dùng đăng nhập:

 Người dùng bấm nút SignIn => Giao diện đăng nhập :
 Người dùng ấn Get Visualize Free => Giao diện đăng ký tài khoản:

 Sau khi đăng nhập:

  Giao diện khi sử dụng trên điện thoại:

2, Trang Dashboard:
 Sau khi đăng nhập, người dùng được phép truy cập trang dashboard:
o Giao diện sáng:

o Giao diện tối:

 Nếu người dùng không đăng xuất nhưng vẫn cố truy cập trang dashboard thì người dùng
sẽ được điều hướng đến trang đăng nhập:

 Người dùng chọn dấu cộng bên phía trái để tạo nhóm mới:
 Sau khi tạo nhóm, người dùng có thể chọn/tạo các nhóm hoặc vào trang cá nhân:
 Xem thông tin hoặc thích 1 bảng vẽ bằng cách di chuột trên bảng vẽ tương ứng

 Giao diện tìm kiếm không có kết quả:

  Giao diện không có bảng vẽ nào được thích

 Người dùng sau khi tạo nhóm hoặc có quyền là admin sẽ có nút Invite member để mời
người dùng khác tham gia nhóm:
 Giao diện mời người dùng khác tham gia nhóm

 Sau khi gửi lởi mời thành công, người dùng được mời sẽ nhận được mail xác nhận tham
gia nhóm
 Sauk hi xác nhận tham gia, người dùng sẽ được thêm vào nhóm

 Người dùng bấm vào hình đại diện để xem thông tin cá nhân:
 Giao diện trang dashboard trên điện thoại:

 Người dùng chọn ký hiệu menu để truy cập thông tin tài khoản hoặc đăng xuất:
  Giao diện chính của bảng vẽ

 Nhiều người dùng cùng tương tác với bản vẽ

---------------------------------------------------------------------------------------------------
CHƯƠNG 5. TÀI LIỆU THAM KHẢO

- Collaborative whiteboard: https://liveblocks.io/examples/collaborative-

whiteboard-advanced/nextjs-whiteboard-advanced
- Connection status:
https://liveblocks.io/examples/connection-status/nextjs-connection-status
- Live avatar stack: https://liveblocks.io/examples/live-avatar-stack-
advanced/nextjs-live-avatars-advanced
- Live cursor chat: https://liveblocks.io/examples/live-cursors-chat/nextjs-
live-cursors-chat
- How to make a drawboard by Redhwannacef:
https://github.com/redhwannacef/youtube-tutorials/tree/main/excalidraw-
tutorial
- Miro clone by Antonio Edeljac:
https://github.com/AntonioErdeljac/next14-miro-clone

- Design inspired by Miro, Excalidraw and Notion:

o Miro: https://miro.com/
o Excalidraw: https://excalidraw.com/
o Notion: https://www.notion.so/

Video demo project: Demo project - YouTube

Source code: khoido2003/Visualize-Hub-v2: Bringing some new features to the V1 (github.com)