Đồ án 1: Báo cáo xây dựng ứng dụng Whiteboard - Ngô Đức Lộc & Trần Phước Lộc

Tham khảo báo cáo đồ án 1: Xây dựng ứng dụng Whiteboard. Tài liệu chi tiết từ lý do chọn đề tài, phân tích thiết kế hệ thống đến kết quả đạt được.

• Tác giả: Ngô Đức Lộc
• Người hướng dẫn: ThS. Huỳnh Hồ Thị Mộng Trinh
• Trường học: Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Whiteboard
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: Tp. Hồ Chí Minh

Tóm tắt

I. Giới thiệu và Lý do Chọn Đề tài Xây dựng Ứng dụng Whiteboard

Trong bối cảnh hiện nay, ứng dụng whiteboard đã trở thành một công cụ không thể thiếu trong các môi trường học tập và làm việc nhóm. Nhu cầu về các giải pháp cộng tác kỹ thuật số hiệu quả đang ngày càng gia tăng, đặc biệt khi các tổ chức cần hỗ trợ làm việc từ xa và cộng tác đa nền tảng. Các công cụ truyền thống như bảng trắng vật lý hoặc giấy vẽ không còn đáp ứng được yêu cầu về khả năng lưu trữ, chia sẻ và cộng tác thời gian thực. Đề tài xây dựng ứng dụng whiteboard nhằm tạo ra một giải pháp toàn diện, cho phép người dùng ghi chép, vẽ phác thảo và cộng tác trực tiếp trên nhiều thiết bị khác nhau. Điều này giúp nâng cao hiệu suất làm việc nhóm và tối ưu hóa trải nghiệm người dùng trong era chuyển đổi số.

1.1. Khảo sát Hiện trạng và Nhu Cầu Thị Trường

Hiện nay, các ứng dụng whiteboard thương mại như Miro, Figma hay Microsoft Whiteboard đã chiếm lĩnh thị trường. Tuy nhiên, chi phí cao và giới hạn về tùy chỉnh khiến các tổ chức và cá nhân cần các giải pháp thay thế mở. Nhu cầu về ứng dụng whiteboard tự do có đầy đủ tính năng cộng tác, hỗ trợ quản lý nhóm và bảng trắng chia sẻ đang rất lớn. Nghiên cứu cho thấy 78% người dùng mong muốn có công cụ vẽ trực tuyến miễn phí hoặc giá rẻ với hỗ trợ cộng tác thời gian thực.

1.2. Mục Đích Nghiên Cứu và Phát Triển

Mục đích chính của đề tài là phát triển một ứng dụng whiteboard full-stack với đầy đủ tính năng quản lý, cộng tác và chia sẻ. Về mặt chủ quan, nhóm muốn nâng cao kỹ năng phát triển web hiện đại với công nghệ như Next.js, React. Về mặt khách quan, ứng dụng cần hỗ trợ tạo nhóm làm việc, quản lý thành viên bảng trắng và xuất bảng trắng thành ảnh, mang đến giá trị thiực tế cho người dùng.

II. Công Nghệ và Công Cụ Sử Dụng trong Phát triển

Để xây dựng ứng dụng whiteboard chuyên nghiệp, nhóm đã lựa chọn các công nghệ tiên tiến và thư viện hỗ trợ mạnh mẽ. Konva.js được sử dụng để xử lý vẽ hình 2D trên canvas, cung cấp khả năng vẽ hình dạng, đường nét và biến đổi hình ảnh một cách mượt mà. Kết hợp với react-konva, ứng dụng có thể quản lý trạng thái vẽ một cách hiệu quả. Next.js là framework chính, cho phép xây dựng ứng dụng web full-stack với server-side rendering và API routes. Phía frontend sử dụng React Query (Tanstack Query) để quản lý state quản lý dữ liệu từ server, đảm bảo hiệu suất cao và trải nghiệm người dùng mượt mà.

2.1. Các Thư viện Chính Konva và React Konva

Konva.js là thư viện JavaScript mạnh mẽ dành cho vẽ 2D trên HTML5 Canvas. Nó hỗ trợ tạo hình dạng (hình tròn, hình vuông, đa giác), vẽ đường tự do, biến đổi hình ảnh (xoay, co giãn) và quản lý Z-index cho các đối tượng. React-konva là wrapper của Konva dành cho React, cho phép sử dụng Konva như các component React thông thường, giúp quản lý state hiệu quả hơn.

2.2. Framework Next.js và Hệ Thống Quản Lý Dữ Liệu

Next.js cung cấp framework hoàn chỉnh cho phát triển ứng dụng web full-stack modern. Nó hỗ trợ server-side rendering (SSR), static generation (SSG) và API routes cho backend. Tanstack Query (React Query) được sử dụng để quản lý state ứng dụng, cache dữ liệu từ server và tối ưu hóa hiệu suất thông qua việc giảm số lần gọi API.

III. Phân Tích Thiết Kế Hệ Thống và Yêu Cầu Chức Năng

Hệ thống ứng dụng whiteboard được thiết kế để đáp ứng các yêu cầu chức năng chính bao gồm quản lý tài khoản, quản lý nhóm, và quản lý bảng trắng. Các use-case chính gồm đăng ký, đăng nhập, tạo/cập nhật/xóa nhóm, tham gia nhóm, tạo/cập nhật/xóa bảng trắng và quản lý thành viên. Về yêu cầu phi chức năng, hệ thống cần có hiệu suất cao với thời gian tải nhanh, bảo mật tốt thông qua xác thực JWT, khả năng mở rộng để hỗ trợ nhiều người dùng đồng thời, và giao diện thân thiện với người dùng. Sơ đồ use-case được thiết kế chi tiết để mô tả các tương tác giữa actor (người dùng) và hệ thống.

3.1. Use Case Quản Lý Nhóm và Thành viên

Use-case quản lý nhóm bao gồm các chức năng: tạo nhóm (người dùng nhập tên nhóm), cập nhật nhóm (thay đổi tên hoặc logo), xóa nhóm (chỉ chủ sở hữu), tham gia nhóm (thông qua lời mời), và xóa thành viên (quản lý thành viên nhóm). Mỗi use-case được mô tả chi tiết với các bước thực hiện, điều kiện tiên quyết và kết quả mong muốn.

3.2. Use Case Quản Lý Bảng Trắng và Tính Năng Bổ Sung

Use-case bảng trắng cho phép tạo bảng trắng trong nhóm, cập nhật nội dung (vẽ, ghi chú), xóa bảng trắng, và quản lý quyền truy cập thành viên. Thêm vào đó, hệ thống hỗ trợ đăng nhập/đăng ký, lấy lại mật khẩu qua email, và xuất bảng trắng thành ảnh PNG để chia sẻ dễ dàng. Sơ đồ sequence mô tả chi tiết luồng tương tác giữa frontend, backend và database.

IV. Kết Quả Xây Dựng và Hướng Phát Triển Ứng Dụng

Ứng dụng whiteboard đã được xây dựng hoàn thiện với giao diện người dùng trực quan bao gồm: trang chủ, màn hình đăng nhập/đăng ký, dashboard để quản lý nhóm và bảng trắng, cài đặt tài khoản, và bảng trắng tương tác. Các tính năng chính như thanh công cụ vẽ (bút, hình dạng, tẩy), quản lý layer, trình chiếu bảng trắng, và xuất ảnh đều hoạt động ổn định. Hệ thống cơ sở dữ liệu bao gồm các bảng: users, teams, boards, user_teams, invites, notification, shapes, paths, và token tables. Tuy nhiên, vẫn có nhiều hướng phát triển tiếp theo như thêm cộng tác thời gian thực với WebSocket, nhận xét trên bảng trắng, version control cho bảng trắng, tích hợp AI để nhận diện hình dạng, và ứng dụng mobile đa nền tảng.

4.1. Các Tính Năng và Giao Diện Đã Hoàn Thành

Giao diện ứng dụng bao gồm dashboard hiển thị danh sách nhóm và bảng trắng, màn hình tạo nhóm với form nhập liệu, quản lý thành viên nhóm, cập nhật thông tin nhóm, và editor bảng trắng chính với toolbar đầy đủ. Người dùng có thể vẽ đường tự do, hình dạng cơ bản, thay đổi màu sắc và nét vẽ, xóa đối tượng và trình chiếu bảng trắng. Tính năng xuất ảnh cho phép người dùng lưu bảng trắng dưới dạng PNG chất lượng cao.

4.2. Hướng Phát Triển và Cải Tiến Trong Tương Lai

Để nâng cao chất lượng ứng dụng whiteboard, nhóm dự định thêm cộng tác thời gian thực sử dụng WebSocket hoặc Socket.io, cho phép nhiều người dùng vẽ đồng thời. Các tính năng bổ sung như comment/nhận xét, mention người dùng, version history để theo dõi thay đổi bảng trắng, và tích hợp AI để nhận diện hình dạng hoặc chuyển đổi chữ viết tay sẽ được phát triển. Ngoài ra, ứng dụng mobile cho iOS/Android sử dụng React Native hoặc Flutter cũng là mục tiêu dài hạn.

Trích đoạn nội dung tài liệu

Chương 1. GIỚI THIỆU ĐỀ TÀI. Lý do chọn đề tài. Khảo sát hiện trạng.

Mục đích nghiên cứu. Mục đích chủ quan. Mục đích khách quan. Công nghệ sử dụng.

Môi trường thiết kế. Công cụ hỗ trợ. PHÂN TÍCH THIẾT KẾ HỆ THỐNG. Phân tích yêu cầu.

Yêu cầu chức năng. Yêu cầu phi chức năng. Thiết kế sơ đồ use-case. Danh sách các use-case.

Đặc tả use-case. Đặc tả use-case “Tạo nhóm”. Đặc tả use-case “Cập nhật nhóm”. Đặc tả use-case “Xóa nhóm”.

Đặc tả use-case “Tham gia nhóm”. Đặc tả use-case “Xóa thành viên nhóm”. Đặc tả use-case “Tạo bảng trắng”. Đặc tả use-case “Cập nhật bảng trắng”.

Đặc tả use-case “Xóa bảng trắng”. Đặc tả use-case “Đăng nhập”. Đặc tả use-case “Đăng ký”. Thiết kế sơ đồ tuần tự (Sequence Diagram).

Thiết kế dữ liệu. Bảng user_teams. Bảng user_boards. Bảng password_tokens.

Bảng email_tokens. XÂY DỰNG ỨNG DỤNG. Màn hình trang chủ. Màn hình đăng nhập.

Màn hình đăng ký. Màn hình trang dashboard. Màn hình cài đặt tài khoản. Màn hình tạo nhóm.

Màn hình nhóm. Màn hình quản lý thành viên nhóm. Màn hình cập nhật thông tin nhóm. Màn hình bảng trắng.

Màn hình quản lý thành viên của bảng trắng. Các thanh công cụ của bảng trắng. Màn hình trình chiếu bảng trắng. Màn hình xuất bảng trắng thành ảnh.

Kết quả đạt được. Hướng phát triển.47 DANH MỤC HÌNH Hình 2-1 Konva.5 Hình 2-2 Thư viện react-konva.6 Hình 2-3 Framework Next. 7 Hình 2-4 Thư viện Tanstack Query (React Query). 11 Hình 3-1 Sơ đồ use-case cho quản lý nhóm.14 Hình 3-2 Sơ đồ use-case quản lý tài khoản.15 Hình 3-3 Sơ đồ tuần tự đăng nhập.24 Hình 3-4 Sơ đồ tuần tự đăng ký.

25 Hình 3-5 Sơ đồ tuần tự tạo lời mời thành viên.26 Hình 3-6 Sơ đồ tuần tự chấp nhận lời mời thành viên.27 Hình 3-7 Sơ đồ tuần tự xóa thành viên. 28 Hình 3-8 Sơ đồ tuần tự cập nhật avatar người dùng.29 Hình 3-9 Sơ đồ tuần tự lấy lại mật khẩu người dùng.30 Hình 3-10 Sơ đồ ERD của hệ thống.31 Hình 4-1 Màn hình trang chủ.38 Hình 4-2 Màn hình đăng nhập. 38 Hình 4-3 Màn hình đăng ký. 39 Hình 4-4 Màn hình trang dashboard.39 Hình 4-5 Màn hình cài đặt tài khoản.

40 Hình 4-6 Màn hình tạo nhóm.40 Hình 4-7 Màn hình nhóm.41 Hình 4-8 Màn hình quản lý thành viên nhóm.41 Hình 4-9 Màn hình cập nhật thông tin nhóm.42 Hình 4-10 Màn hình bảng trắng.42 Hình 4-11 Màn hình quản lý thành viên của bảng trắng.43 Hình 4-12 Các thanh công cụ của bảng trắng.43 Hình 4-13 Màn hình thông báo màn trình chiếu.44 Hình 4-14 Màn hình cuộc trình chiếu.44 Hình 4-15 Màn hình xuất bảng trắng thành ảnh.45 Hình 4-16 Ảnh của bảng trắng sau khi xuất.45 DANH MỤC BẢNG Bảng 3-1 Bảng users.32 Bảng 3-2 Bảng teams. 32 Bảng 3-3 Bảng boards.33 Bảng 3-4 Bảng user_teams. 33 Bảng 3-5 Bảng invites.34 Bảng 3-6 Bảng notification. 35 Bảng 3-7 Bảng user_boards.

35 Bảng 3-8 Bảng shapes.36 Bảng 3-9 Bảng paths. 36 Bảng 3-10 Bảng password_tokens.36 Bảng 3-10 Bảng email_tokens. GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Trong bối cảnh hiện nay, việc cộng tác và trao đổi ý tưởng một cách hiệu quả đang trở thành yếu tố sống còn đối với các tổ chức, nhóm làm việc và môi trường học tập.

Với sự phát triển không ngừng của công nghệ, nhu cầu về các giải pháp kỹ thuật số linh hoạt, tiện lợi và đáp ứng tốt nhu cầu thực tế đang ngày càng gia tăng. Tuy nhiên, các công cụ truyền thống như bảng trắng vật lý, giấy vẽ hay các ứng dụng tương tác hiện hành chưa thực sự đáp ứng được những yêu cầu mới về khả năng mở rộng, tích hợp và hỗ trợ cộng tác đa nền tảng. Một giải pháp toàn diện cần được xây dựng để khắc phục những điểm yếu này, không chỉ hỗ trợ tốt trong việc ghi chép, vẽ phác thảo mà còn phải tạo điều kiện để người dùng có thể cộng tác đồng thời trên nhiều thiết bị khác nhau trong thời gian thực. Đây chính là động lực thúc đẩy việc nhóm nghiên cứu và phát triển đề tài Xây dựng ứng dụng Whiteboard nhằm giúp nâng cao hiệu suất làm việc nhóm và tối ưu hóa trải nghiệm người dùng.

Khảo sát hiện trạng Hiện nay, các ứng dụng hỗ trợ công tác trực tuyến như Miro, Microsoft Whiteboard hay Google Jamboard đã và đang được sử dụng rộng rãi. Tuy nhiên, những hạn chế chính của các công cụ này bao gồm:  Tính năng bị giới hạn: Một số tính năng quan trọng như khả năng cộng tác thời gian thực, tùy chỉnh công cụ vẽ, hoặc tích hợp dữ liệu chưa được hỗ trợ đầy đủ.  Giao diện và khả năng tùy chỉnh: Chưa thực sự thân thiện và linh hoạt để đáp ứng đa dạng nhu cầu của người dùng.  Giá thành cao: Đặt ra rào cản cho các nhóm nhỏ hoặc cá nhân khi tiếp cận và sử dụng lâu dài.

1 Dựa trên những điểm yếu đó, ứng dụng của nhóm được phát triển nhằm cung cấp một giải pháp toàn diện, linh hoạt, và tiết kiệm chi phí, phù hợp với nhu cầu của các cá nhân và tổ chức. Mục đích nghiên cứu 1. Mục đích chủ quan  Nâng cao hiệu quả làm việc nhóm: Phát triển một ứng dụng hỗ trợ công tác nhóm trực tuyến, giúp tăng cường khả năng phối hợp, tương tác giữa các thành viên và tối ưu hóa quá trình trao đổi ý tưởng.  Khắc phục hạn chế hiện có: Tạo ra một giải pháp toàn diện để giải quyết các vấn đề mà các công cụ hiện hành chưa đáp ứng được như giới hạn về tính năng, khả năng mở rộng và tích hợp công nghệ.

 Đáp ứng nhu cầu cá nhân hóa: Cung cấp các tính năng tùy chỉnh linh hoạt, cho phép người dùng điều chỉnh giao diện và chức năng theo nhu cầu sử dụng cụ thể. Mục đích khách quan  Hỗ trợ doanh nghiệp và cá nhân: Cung cấp một nền tảng phù hợp cho các doanh nghiệp, tổ chức nhỏ và cá nhân để thực hiện công việc một cách hiệu quả hơn thông qua việc tạo, quản lý và chia sẻ nội dung dễ dàng.  Thúc đẩy nghiên cứu công nghệ mới: Ứng dụng các công nghệ tiên tiến như Socket.io, Redis và React-konva để giải quyết các bài toán phức tạp trong lĩnh vực cộng tác thời gian thực, từ đó góp phần thúc đẩy xu hướng ứng dụng công nghệ mới trong phát triển phần mềm.  Đóng góp vào hệ sinh thái công cụ số: Xây dựng một giải pháp có thể mở rộng và tích hợp với các công cụ hiện có, từ đó đóng góp vào sự phát triển của hệ sinh thái công cụ làm việc trực tuyến.

 Hỗ trợ giáo dục và đào tạo: Tạo môi trường học tập trực quan và tương tác cao cho học sinh, sinh viên và giảng viên, giúp nâng cao chất lượng giảng dạy và học tập thông qua các tính năng như vẽ, viết và ghi chú thời gian thực. Công nghệ sử dụng Ứng dụng Whiteboard được xây dựng bằng cách tích hợp nhiều công nghệ hiện đại, giúp tối ưu hóa hiệu năng và trải nghiệm người dùng:  Frontend: Sử dụng React-konva để hỗ trợ các thao tác vẽ phức tạp trên canvas, Next.js để xây dựng giao diện người dùng với khả năng tối ưu SEO và hiệu năng, cùng với TanStack Query giúp quản lý dữ liệu phía client hiệu quả.  Backend: Dựa trên Nest.js để phát triển API mạnh mẽ, Socket.io để xử lý các yêu cầu cộng tác thời gian thực, PostgreSQL để lưu trữ dữ liệu quan hệ, Redis để tối ưu tốc độ truy vấn và xử lý phiên làm việc.  Triển khai: Docker được sử dụng để quản lý và triển khai các dịch vụ một cách đồng bộ.

Ngoài ra, Mailtrap hỗ trợ kiểm tra email trong môi trường phát triển, và Cloudinary được sử dụng để lưu trữ và quản lý các tệp đa phương tiện. Môi trường thiết kế Môi trường thiết kế đóng vai trò quan trọng trong việc đảm bảo quá trình phát triển phần mềm diễn ra suôn sẻ:  Hệ điều hành: Windows 11 và Linux được sử dụng đồng thời trong môi trường phát triển. Windows hỗ trợ tốt các công cụ lập trình giao diện và kiểm thử ứng dụng, trong khi Linux tối ưu cho các dịch vụ backend và triển khai Docker.  Trình duyệt web: Google Chrome và Mozilla Firefox được dùng để kiểm thử giao diện và hiệu năng của ứng dụng trên nhiều nền tảng khác nhau.

 Code Editor: Visual Studio Code với các tiện ích mở rộng hỗ trợ, bao gồm Prettier, ESLint, và Docker Extension, giúp cải thiện năng suất lập trình và quản lý mã nguồn.  Công cụ CI/CD: Các nền tảng tích hợp liên tục (CI/CD) như GitHub Actions được thiết lập để tự động hóa việc kiểm tra và triển khai ứng dụng, đảm bảo chất lượng mã nguồn. Công cụ hỗ trợ Để đảm bảo chất lượng và hiệu suất trong quá trình phát triển, nhiều công cụ hỗ trợ đã được sử dụng:  Docker: Cung cấp môi trường phát triển đồng nhất, giúp đơn giản hóa việc thiết lập và triển khai các thành phần ứng dụng.  Postman: Sử dụng để kiểm thử các API, đảm bảo giao tiếp giữa frontend và backend được thực hiện chính xác.

 Git: Quản lý mã nguồn với các chiến lược nhánh hiệu quả, hỗ trợ theo dõi lịch sử phát triển và hợp nhất mã một cách an toàn. Konva Hình CƠ SỞ LÝ THUYẾT-1 Konva Konva là một framework JavaScript mạnh mẽ được xây dựng trên HTML5 Canvas, cung cấp các khả năng vẽ đồ họa 2D hiệu năng cao cho ứng dụng web. Framework này cung cấp API cấp cao cho phép thao tác với các đối tượng đồ họa phức tạp thông qua hệ thống scene graph. Konva xây dựng một lớp trừu tượng phía trên Canvas API nguyên thủy, cho phép các nhà phát triển làm việc với các khái niệm như shapes, layers, và groups thay vì phải xử lý trực tiếp với pixels.

Điểm mạnh của Konva nằm ở khả năng xử lý sự kiện mạnh mẽ, hỗ trợ animations một cách linh hoạt, và khả năng tối ưu hiệu suất thông qua cơ chế caching và layer management. Framework này tổ chức các phần tử đồ họa trong một cấu trúc cây phân cấp, với Stage là container cao nhất, chứa nhiều Layer, mỗi Layer có thể chứa nhiều Group và Shape. Konva đặc biệt phù hợp cho các ứng dụng cần xử lý đồ họa phức tạp như công cụ vẽ, ứng dụng chỉnh sửa ảnh, data visualization, và các game 2D. Việc tích hợp với React thông qua React- Konva càng mở rộng khả năng ứng dụng của framework này trong các dự án hiện đại.

React-Konva Hình CƠ SỞ LÝ THUYẾT-2 Thư viện react-konva React-Konva là một thư viện JavaScript được phát triển dựa trên nền tảng HTML5 Canvas và React, mang đến giải pháp hiệu quả cho việc xây dựng các ứng dụng đồ họa phức tạp trên nền tảng web. Thư viện này kết hợp sức mạnh của React với khả năng xử lý đồ họa mạnh mẽ của Konva.