NỘI DUNG
1.1 Giới thiệu về Bảng Kanban
Bảng Kanban là công cụ hiệu quả để quản lý công việc cho cả cá nhân và tổ chức Nó giúp mô tả trực quan các giai đoạn khác nhau của quy trình làm việc thông qua việc sử dụng thẻ để biểu thị các mục công việc và cột để thể hiện từng giai đoạn.
Hình 6 Hình minh hoạ cho Bảng Kanban
1.2 Giới thiệu về Google Calendar
Google Calendar là ứng dụng quản lý thời gian miễn phí của Google, giúp người dùng theo dõi các hoạt động hàng ngày như cuộc hẹn, sự kiện và sinh nhật bạn bè Ứng dụng này đa nền tảng, cho phép truy cập dễ dàng từ máy tính, điện thoại và máy tính bảng.
CƠ SỞ LÝ THUYẾT
Giới thiệu về Bảng Kanban
Bảng Kanban là công cụ hiệu quả để quản lý công việc cá nhân hoặc tổ chức Nó cung cấp một cái nhìn trực quan về tiến trình công việc thông qua việc sử dụng thẻ để đại diện cho các mục công việc và cột để chỉ ra các giai đoạn khác nhau trong quy trình.
Hình 6 Hình minh hoạ cho Bảng Kanban
Giới thiệu về Google Calendar
Google Calendar là ứng dụng quản lý thời gian miễn phí của Google, giúp người dùng theo dõi các hoạt động hàng ngày như cuộc hẹn, sự kiện và sinh nhật bạn bè Ứng dụng này đa nền tảng, cho phép truy cập từ máy tính, điện thoại và máy tính bảng.
Hình 7 Hình minh hoạ cho ứng dụng Google Calendar
Giới thiệu về công nghệ MERN Stack
1.3.1 Khái niệm về công nghệ MERN Stack
The MERN Stack is a free, open-source software suite used for developing web applications and dynamic websites It consists of four key technologies: MongoDB, Express, React.js, and Node.js.
Phần 2: Nội dung – Chương 1: Cơ sở lý thuyết
Hình 8 Hình minh hoạ cấu trúc của công nghệ MERN Stack
1.3.2 Khái niệm về Node.js
Node.js là một môi trường chạy JavaScript phổ biến, thường được sử dụng để phát triển ứng dụng web Được xây dựng trên nền tảng V8 JavaScript engine của Chrome, Node.js áp dụng kiến trúc hướng sự kiện và mô hình I/O không chặn, giúp tăng hiệu suất và tính nhẹ nhàng cho ứng dụng.
NPM (Node Package Manager) là công cụ quan trọng để tạo và quản lý thư viện JavaScript cho Node.js Nó giúp đơn giản hóa quá trình tải về và quản lý các thư viện trong dự án, cho phép người dùng chỉ cần sử dụng vài dòng lệnh cơ bản để tải về các thư viện mã nguồn mở cần thiết.
Express.js, hay còn gọi là Express, là một framework back-end mã nguồn mở dùng để phát triển RESTful API trên nền tảng Node.js Framework này được thiết kế nhằm xây dựng các ứng dụng web và API hiệu quả Bên cạnh đó, Express cung cấp nhiều tính năng quan trọng cho một web framework như routing, middlewares và template engines.
Hình 9 Hình minh hoạ các tính năng của Express
1.3.5 Khái niệm về React.js
ReactJs là thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013, nhằm xây dựng giao diện người dùng Thư viện này phổ biến trong việc phát triển các trang web SPA (Single Page Application) và ứng dụng di động ReactJs dễ sử dụng, cho phép người dùng tạo ra các component một cách hiệu quả.
UI có thể tái sử dụng
Phần 2: Nội dung – Chương 1: Cơ sở lý thuyết
Hình 10 Hình minh hoạt một số ưu điểm của React.js
1.3.6 Khái niệm về RESTful API
RESTful API là tiêu chuẩn thiết kế API cho ứng dụng web, giúp quản lý tài nguyên hiệu quả Nó tập trung vào các tài nguyên hệ thống như tệp văn bản, hình ảnh, âm thanh, video và dữ liệu động, với các trạng thái tài nguyên được định dạng và truyền tải qua HTTP Chức năng chính của RESTful API là quy định cách sử dụng các phương thức HTTP (GET, POST, PUT, DELETE) và cách định dạng URL để quản lý tài nguyên RESTful không quy định logic code ứng dụng và không bị giới hạn bởi ngôn ngữ lập trình, cho phép bất kỳ ngôn ngữ hoặc framework nào cũng có thể thiết kế RESTful API.
Hình 11 Hình minh hoạ cách hoạt động của RESTful API
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
PHÁT TRIỂN WEBSITE QUẢN LÝ CÔNG VIỆC NHÓM
Giới thiệu về website quản lý công việc nhóm
Hệ thống website quản lý công việc nhóm là ứng dụng web phát triển trên nền tảng MERN Stack, nhằm tối ưu hóa quy trình quản lý công việc nhóm Ứng dụng này giúp người dùng nâng cao hiệu quả làm việc nhóm, từ đó mang lại kết quả tốt hơn trong học tập và công việc.
Xác định và mô hình hoá yêu cầu
2.2.1 Danh sách các yêu cầu
– Các yêu cầu chức năng:
Yêu cầu chức năng đăng ký, đăng nhập
Yêu cầu chức hiển thị thông tin công việc ở trang chủ
Yêu cầu chức năng quản lý thông tin cá nhân của tài khoản
Chức năng theo dõi tiến độ công việc cho phép người dùng giám sát các công việc nhóm một cách linh hoạt với nhiều hình thức khác nhau, bao gồm danh sách, bảng kanban và lịch.
Chức năng quản lý công việc cần cho phép người dùng theo dõi thông tin công việc và cập nhật tiến độ cá nhân Ngoài ra, người dùng cũng có thể thêm ghi chú vào từng công việc để ghi lại các thông tin quan trọng.
Yêu cầu chức năng trò chuyện nhóm: cho phép các thành việc nhóm có thể trò chuyện theo thời gian thực
Yêu cầu chức năng quản lý nhóm: cho phép chủ nhóm mời thành viên mới, xoá thành viên cũ, thêm, sửa, xoá các công việc trong nhóm
Yêu cầu chức năng quản trị viên: cho phép quản trị viên quản lý (thêm, sửa, xoá) các nhóm, người dùng, công việc trong hệ thống
– Các yêu cầu phi chức năng:
Yêu cầu bảo mật: có sử dụng các yếu tố bảo mật thông tin cho người dùng
Yêu cầu thiết kế giao diện: giao diện trực quan, dễ sử dụng
Yêu cầu tốc độ phản hồi: tốc độ phản hồi thông tin không quá 1 giây (đối với kết nối mạng ổn định)
2.2.2 Danh sách các tác nhân và chức năng của hệ thống
Bảng danh sách các tác nhân và chức năng của hệ thống
STT Tác nhân Chức năng
01 Quản trị viên – Quản lý tài khoản người dùng
– Quản lý nhóm người dùng – Quản lý các bảng
– Quản lý các công việc – Các chức năng còn lại tương tự như người dùng thông thường
(chưa đăng nhập vào tài khoản)
– Đăng ký tài khoản – Đăng nhập
– Đặt lại mật khẩu – Đăng nhập qua mạng xã hội (Google, Facebook)
– Mời thành viên khác vào nhóm – Xoá thành viên ra khỏi nhóm – Xem các thông tin công việc, bảng trong nhóm – Tạo bảng mới trong nhóm
Tạo công việc mới trong nhóm, chỉnh sửa thông tin công việc đã tạo, cập nhật thông tin nhóm đã tạo, điều chỉnh thông tin bảng đã tạo và xóa nhóm đã tạo là những thao tác quan trọng trong quản lý dự án.
– Xoá bảng đã tạo – Xoá công việc đã tạo – Các chức năng còn lại tương tự như người dùng thông thường
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Người dùng có thể tạo nhóm mới, với người tạo nhóm trở thành chủ nhóm Thành viên trong nhóm có quyền xem thông tin công việc và bảng trong nhóm, cập nhật trạng thái công việc đã được giao, cũng như xem và thêm ghi chú vào công việc đó Ngoài ra, họ còn có khả năng gửi và xem tin nhắn trong nhóm chat.
– Đồng bộ các công việc được giao đến Google Calendar (nếu đã đăng nhập với Google) – Xem các thông báo hiện có
– Thay đổi thông tin tài khoản – Thay đổi mật khẩu
Bảng 1 Bảng danh sách tác nhân và chức năng của hệ thống
Mô tả chức năng của hệ thống
Các chức năng được thiết kế của hệ thống được mô tả dưới dạng lược đồ chức năng như sau:
Hình 12 Lược đồ chức năng của hệ thống
Phân tích và thiết kế cơ sở dữ liệu
The system's database is built on a NoSQL platform, utilizing MongoDB as its database management system It is organized into six collections: User, Group, Table, Task, ChatGroup, and Notification.
– Collection User: là collection đại diện cho các thông tin của người dùng được lưu trong hệ thống bao gồm các trường sau: name, role, status, email, password,
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Trong bài viết này, các trường dữ liệu quan trọng của người dùng được trình bày rõ ràng Trường "name" thể hiện tên hiển thị của người dùng, trong khi "role" chỉ định vai trò của họ (user hoặc admin) Trường "status" cho biết trạng thái tài khoản người dùng, như còn hoạt động hay đã bị khoá Thông tin email mà người dùng sử dụng để đăng ký tài khoản được lưu trong trường "email" Cuối cùng, trường "password" chứa mật khẩu đã được mã hoá của người dùng và được bảo mật trong hệ thống.
“token” đại diện cho mã JWT của người dùng để duy trì việc đăng nhập; trường
Trường "phone" biểu thị số điện thoại của người dùng đã nhập vào hệ thống (không bắt buộc), trong khi trường "avatarUrl" chứa đường link đến hình đại diện mà người dùng đã tải lên Cuối cùng, trường "verifiedAt" ghi lại thời điểm người dùng xác nhận email đăng ký tài khoản.
The Collection Group represents a set of information about user groups stored in the system, including fields such as name, description, owner, members, createdDate, and privacy Specifically, the "name" field indicates the group's title, while the "description" field provides details about the group's purpose.
Trường "owner" thể hiện thông tin về chủ nhóm, trong khi trường "members" cung cấp thông tin của các thành viên trong nhóm Trường "createdDate" ghi lại thời điểm nhóm được thành lập, và trường "privacy" chỉ rõ mức độ riêng tư của nhóm, có thể là công khai (public) hoặc riêng tư (private).
The Collection Table serves as a representation of information regarding tables used to manage tasks It includes essential fields such as name, description, groupId, members, and tasks Specifically, the "name" field indicates the title of the table, providing a clear identification for task organization.
Trường "description" cung cấp thông tin mô tả về bảng, trong khi trường "groupId" xác định nhóm mà bảng thuộc về Trường "members" chứa thông tin về các thành viên trong bảng, và trường "tasks" cung cấp thông tin chi tiết về các nhiệm vụ có trong bảng.
The Collection Task represents a set of jobs organized within a table, encompassing fields such as name, description, startDate, endDate, status, and tableId Specifically, the "name" field indicates the title of the job, while the "description" field provides detailed information about the job Additionally, the "startDate" field signifies the commencement date of the task.
33 việc bắt đầu; trường “endDate” đại diện cho thời điểm công việc kết thúc; trường
“status” đại diện cho trạng thái của công việc; trường “tableId” đại diện cho thông tin của bảng mà công việc này thuộc về
Collection ChatGroup là bộ sưu tập thông tin về các nhóm chat và ghi chú công việc, bao gồm các trường như tên nhóm (name), mã công việc (taskId), mã nhóm (groupId), tin nhắn (messages) và tổng số tin nhắn (totalMessages) Trường "name" thể hiện tên của nhóm chat, trong khi "taskId" cung cấp thông tin về công việc mà nhóm ghi chú liên quan đến.
Trường "groupId" thể hiện thông tin về nhóm mà nhóm chat thuộc về, trong khi trường "messages" chứa thông tin các tin nhắn trong nhóm chat hoặc ghi chú trong nhóm ghi chú Ngoài ra, trường "totalMessages" cho biết tổng số tin nhắn đã được gửi trong nhóm chat hoặc nhóm ghi chú.
Thiết kế mô hình Class Diagram của hệ thống:
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Hình 13 Mô hình Class Diagram của hệ thống
Thiết kế mô hình ERD của hệ thống:
Hình 14 Mô hình ERD của hệ thống
Đặc tả chức năng của một số chức năng chính
Bảng đặc tả chức năng tạo nhóm
Tên chức năng Chức năng tạo nhóm
Mô tả Cho phép tác nhân tạo một nhóm mới mà tác nhân đó sẽ là chủ nhóm Dòng sự kiện – Tác nhân chọn chức năng tạo nhóm
Tác nhân nhập thông tin tên nhóm và mô tả nhóm, trong khi hệ thống sẽ kiểm tra tính hợp lệ của thông tin đăng nhập cùng với thông tin nhóm của tác nhân.
– Nếu không trả về lỗi, hệ thống sẽ lấy thông tin của tác nhân làm thông tin chủ nhóm và lưu nhóm vào hệ thống
– Nếu trả về lỗi hoặc tác nhân chọn huỷ, hệ thống sẽ trả về trang trước đó
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
– Kết thúc quá trình tạo nhóm Điều kiện tiên quyết
Tác nhân đã đăng nhập vào hệ thống
Bảng 2 Bảng đặc tả chức năng tạo nhóm
Hình 15 Sơ đồ hoạt động của chức năng tạo nhóm
2.5.2 Chức năng mời thành viên vào nhóm
Bảng đặc tả chức năng mời thành viên vào nhóm
Tên chức năng Chức năng mời thành viên vào nhóm
Mô tả Cho phép tác nhân mời các người dùng khác vào nhóm đã tạo
Dòng sự kiện – Tác nhân chọn chức năng mời thành viên vào nhóm
Hệ thống cho phép nhập email của người dùng để gửi lời mời tham gia nhóm Sau khi nhập, một email mời sẽ được gửi đến những người dùng đã được chỉ định Quá trình mời thành viên vào nhóm sẽ hoàn tất khi các điều kiện tiên quyết được đáp ứng.
Tác nhân đã đăng nhập vào hệ thống, tác nhân là chủ nhóm
Bảng 3 Bảng đặc tả chức năng mời thành viên vào nhóm
Hình 16 Sơ đồ hoạt động của chức năng mời thành viên vào nhóm
2.5.3 Chức năng tạo công việc
Bảng đặc tả chức năng tạo công việc
Tên chức năng Chức năng tạo công việc
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Mô tả Cho phép tác nhân tạo công việc trong nhóm
Dòng sự kiện – Tác nhân chọn chức năng tạo task
– Tác nhập nhập đầy đủ thông tin mà form yêu cầu – Hệ thống sẽ kiểm tra xem tác nhân có nhập các thông tin hợp lệ không
– Nếu không trả về lỗi, hệ thống sẽ lưu thông tin công việc vào hệ thống và thông báo tạo thành công
Nếu có lỗi xảy ra hoặc tác nhân chọn thoát, hệ thống sẽ đưa tác nhân trở lại trang trước Đây là điều kiện tiên quyết để kết thúc quá trình tạo công việc.
Tác nhân đã đăng nhập vào hệ thống, và là chủ nhóm
Bảng 4 Bảng đặc tả chức năng tạo công việc
Hình 17 Sơ đồ hoạt động của chức năng tạo công việc
Bảng đặc tả chức năng chat nhóm
Tên chức năng Chức năng chat nhóm
Mô tả Cho phép các tác nhân nhắn tin với nhau thông qua một nhóm chat Dòng sự kiện – Tác nhân chọn nhóm chat
– Tác nhân nhập tin nhắn và nhấn gửi – Hệ thống kiểm tra những thành viên trong nhóm có đang hoạt động không
– Hệ thống gửi tin nhắn đến những thành viên đang hoạt động – Đối với các thành viên không hoạt động, hệ thống sẽ gửi thông báo
– Kết thúc quá trình chat nhóm Điều kiện tiên quyết
Tác nhân đã đăng nhập vào hệ thống, tác nhân đã tham gia ít nhất một nhóm
Bảng 5 Bảng đặc tả chức năng chat nhóm
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Hình 18 Sơ đồ hoạt động của chức năng chat nhóm
2.5.5 Chức năng đăng nhập qua mạng xã hội
Bảng đặc tả chức năng đăng nhập qua mạng xã hội
Tên chức năng Chức năng đăng nhập qua mạng xã hội
Mô tả Cho phép tác nhân có thể login bằng các tài khoản mạng xã hội Google,
Facebook Dòng sự kiện – Tác nhân chọn chức năng đăng nhập bằng Google hoặc Facebook
Hệ thống sẽ gửi cho tác nhân các điều khoản dịch vụ và yêu cầu xác nhận sự đồng ý sử dụng dịch vụ trong lần đầu đăng nhập.
– Nếu tác nhân không đồng ý, hệ thống sẽ chuyển tác nhân về lại trang đăng nhập
– Nếu tác nhân đồng ý, hoặc đã đồng ý trước đó, hệ thống sẽ lưu thông tin đăng nhập và chuyển đến trang chủ
– Kết thúc quá trình đăng nhập qua mạng xã hội Điều kiện tiên quyết
Bảng 6 Bảng đặc tả chức năng đăng nhập qua mạng xã hội
Hình 19 Sơ đồ hoạt động của chức năng đăng nhập qua mạng xã hội
2.5.6 Chức năng đồng bộ công việc vào Google Calendar
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Bảng đặc tả chức năng đồng bộ công việc vào Google Calendar
Tên chức năng Chức năng đồng bộ công việc vào Google Calendar
Mô tả Cho phép tác nhân đồng bộ công việc từ trang web vào Google Calendar Dòng sự kiện – Tác nhân chọn chức năng đồng bộ qua Calendar
Hệ thống kiểm tra xem tác nhân đã liên kết với Google hay chưa Nếu tác nhân chưa được liên kết, hệ thống sẽ thông báo rằng tác nhân chưa liên kết với Google và sẽ trả về trang trước đó.
– Nếu đã liên kết với Google, hệ thống thực hiện đồng bộ công việc vào Google Calendar
– Kết thúc quá trình đồng bộ công việc vào Google Calendar Điều kiện tiên quyết
Tác nhân đã đăng nhập vào hệ thống, và tác nhân đã tham gia ít nhất một nhóm
Bảng 7 Bảng đặc tả chức năng đồng bộ công việc qua Google Calendar
Hình 20 Sơ đồ hoạt động của chức năng đồng bộ công việc vào Google Calendar
Thiết kế giao diện hệ thống
Hình 21 Các thiết kế giao diện của toàn bộ hệ thống
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Hình 22 Thiết kế giao diện đăng nhập
Hình 23 Thiết kế giao diện trang chủ
Hình 24 Thiết kế giao diện trang nhóm
Phần 2: Nội dung – Chương 2: Phát triển website quản lý công việc nhóm
Hình 25 Thiết kế giao diện theo dõi công việc theo kiểu lịch
Hình 26 Thiết kế giao diện theo dõi công việc theo dạng bảng Kanban
Hình 27 Thiết kế giao diện theo dõi danh sách thành viên nhóm
Phần 2: Nội dung – Chương 3: Cài đặt và triển khai hệ thống
CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG
Các công nghệ và công cụ sử dụng
3.1.1 Các công nghệ sử dụng
– Ngôn ngữ lập trình: JavaScript
– Công nghệ dùng cho Frontend: ReactJS
– Công nghệ dùng cho Backend: NodeJS, ExpressJS
– Cơ sở dữ liệu: MongoDB
3.1.2 Các công cụ sử dụng
– Các công cụ quản lý phiên bản: GitHub, GitLab
– Công cụ thiết kế giao diện: Figma
– Công cụ IDE: Visual Studio Code
– Hệ quản trị cơ sở dữ liệu: MongoDB Atlas
– Các nền tảng dùng trong việc triển khai trang web: Vercel, Render
Kiến trúc hệ thống
Hệ thống hoạt động dựa trên kiến trúc Client – Server và RESTful API, được mô tả theo hình minh hoạ sau:
Hình 28 Hình minh hoạ cách hoạt động của hệ thống
Khi người dùng gửi yêu cầu API, hệ thống sẽ xử lý và cung cấp thông tin cần thiết dưới dạng tài nguyên JSON Các thông tin này sau đó được trình duyệt web xử lý và hiển thị cho người dùng.
Phần 2: Nội dung – Chương 4: Các vấn đề và giải pháp được sử dụng trong khoá luận
CÁC VẤN ĐỀ VÀ GIẢI PHÁP ĐƯỢC SỬ DỤNG TRONG KHOÁ LUẬN
Các vấn đề đặt ra
Để xây dựng một website quản lý công việc nhóm hiệu quả, cần phân tích và chia nhỏ vấn đề thành các phần cụ thể Một trong những vấn đề quan trọng là theo dõi tiến độ công việc trong nhóm, nhằm đảm bảo mọi thành viên đều nắm bắt được tình hình và tiến trình thực hiện nhiệm vụ.
– Vấn đề giao tiếp giữa các thành viên trong nhóm
– Vấn đề theo dõi các thay đổi một cách nhanh chóng nhất.
Các giải pháp được sử dụng trong khoá luận
Để hoàn thành mục tiêu đặt ra trong khoá luận, nhóm tác giả đã sử dụng các giải pháp sau để giải quyết các vấn đề nêu trên:
4.2.1 Vấn đề theo dõi tiến độ công việc của nhóm
Về vấn đề theo dõi tiến độ công việc của nhóm, nhóm tác giả đã sử dụng các giải pháp như sau:
Người dùng có thể theo dõi thông tin công việc theo nhiều hình thức khác nhau như danh sách, bảng Kanban, lịch và timeline, giúp dễ dàng quản lý và theo dõi tiến độ công việc một cách hiệu quả.
– Cho phép người dùng thay đổi trạng thái công việc bằng cách kéo thả, giúp người dùng dễ dàng chỉnh sửa công việc
– Có hệ thống thông báo (qua trang web và cả email) khi có thay đổi đối với các công việc được giao
Người dùng có thể đồng bộ công việc qua Google Calendar, giúp theo dõi lịch trình mọi lúc, mọi nơi, nhờ vào tính năng đa nền tảng của ứng dụng này, được cài đặt mặc định trên hầu hết các điện thoại di động.
4.2.2 Vấn đề theo dõi các thay đổi một cách nhanh chóng
Cập nhật nhanh chóng các thay đổi là một yêu cầu thiết yếu cho mọi trang web Nhóm tác giả đã triển khai các giải pháp nhằm giải quyết vấn đề này hiệu quả.
– Tích hợp chức năng Real-time vào hệ thống thông báo và chat nhóm, giúp cho người dùng có thể cập nhật được thông tin một cách nhanh chóng
Tích hợp chức năng gửi email cho người dùng khi có cập nhật trong công việc được giao giúp họ nhận thông tin nhanh chóng mà không cần đăng nhập vào trang web.
Các vấn đề khác và giải pháp
Ngoài những vấn đề kể trên, việc xây dựng một website cũng có những vấn đề khác cần kể đến như sau:
Vấn đề bảo mật thông tin là một yếu tố quan trọng trong việc xây dựng trang web Để bảo vệ thông tin người dùng, nhóm tác giả đã áp dụng một số giải pháp như mã hóa mật khẩu trước khi lưu trữ, sử dụng mã hóa JWT cho thông tin đăng nhập khi truyền tải, và thiết lập chế độ bảo mật cho cookies để lưu trữ thông tin đăng nhập trên máy khách.
Để đảm bảo website có thể truy cập mọi lúc mọi nơi, nhóm tác giả đã triển khai trang web lên hệ thống cloud Người dùng chỉ cần nhập tên miền của trang web vào trình duyệt để truy cập dễ dàng.