Bối cảnh và vấn đề nghiên cứu

Trong môi trường làm việc và quản trị hiện đại, công tác quản trị công việc đóng vai trò then chốt nhằm duy trì tính tổ chức, nâng cao hiệu suất và kiểm soát tiến độ của từng dự án. Việc thiếu hụt các công cụ trực quan hóa tiến trình thường dẫn đến tình trạng sai sót, chậm tiến độ và giảm khả năng phối hợp giữa các thành viên.

Đề tài "Xây Dựng Ứng Dụng Quản Lý Công Việc" (Đồ án: Website Quản lý công việc) được nhóm sinh viên ngành Công nghệ thông tin, Trường Đại học Ngoại ngữ - Tin học Thành phố Hồ Chí Minh (HUFLIT) thực hiện dưới sự hướng dẫn của ThS. Trần Phương Tuấn, hoàn thành vào ngày 05/06/2023.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:

  1. Khảo sát nghiệp vụ và hiện trạng: Khảo sát nhu cầu quản lý dự án trực tuyến dựa trên mô hình bảng làm việc (Board), danh sách (Column/List) và thẻ công việc (Card).
  2. Xây dựng giải pháp kỹ thuật: Nghiên cứu và lựa chọn công nghệ phát triển web hiện đại (JavaScript, React, Node.js, Express.js, MongoDB, Socket.IO).
  3. Phân tích và thiết kế hệ thống: Đặc tả các ca sử dụng (Use Case), xây dựng sơ đồ quy trình xử lý, thiết kế cơ sở dữ liệu phi quan hệ và thiết kế giao diện tương tác người dùng.
  4. Hiện thực hóa mã nguồn (Implementation): Lập trình các mô-đun chức năng phía máy chủ (Back-end) và giao diện người dùng (Front-end), tích hợp các dịch vụ xác thực và lưu trữ ngoài.

Phạm vi nghiên cứu tập trung vào hệ thống ứng dụng web quản lý công việc nội bộ dành cho các cá nhân và nhóm làm việc, thực hiện triển khai theo mô hình Single-Page Application (SPA) kết hợp kiến trúc dịch vụ phân tách Client - Server.

Cơ sở lý thuyết và phương pháp

Khung công nghệ và nền tảng kỹ thuật

Đồ án ứng dụng toàn diện hệ sinh thái JavaScript cho cả hai tầng Front-end và Back-end, cụ thể:

  • Kiến trúc phần mềm: Mô hình Client - Server kết hợp mô hình kiến trúc MVC (Model - View - Controller) ở tầng ứng dụng máy chủ.
  • Tầng giao diện (Front-end):
    • React: Thư viện xây dựng giao diện người dùng tương tác, hoạt động dựa trên cơ chế Virtual DOM phục vụ ứng dụng đơn trang (SPA).
    • Redux: Thư viện quản lý trạng thái tập trung cho ứng dụng theo mô hình Store - Action - Reducer.
    • Bootstrap 5 & Sass (SCSS): Framework và ngôn ngữ mở rộng CSS hỗ trợ hệ thống lưới (grid system), biến tùy chỉnh và khả năng hiển thị đáp ứng (responsive).
  • Tầng máy chủ (Back-end):
    • Node.js: Môi trường thực thi JavaScript đa nền tảng phía máy chủ xây dựng trên nền V8 runtime của Google, hoạt động theo cơ chế xử lý bất đồng bộ, non-blocking I/O.
    • Express.js: Framework phát triển API và định tuyến phía máy chủ.
  • Tầng dữ liệu (Database):
    • MongoDB: Hệ quản trị cơ sở dữ liệu phi quan hệ (NoSQL) lưu trữ dữ liệu dưới định dạng tài liệu JSON/BSON linh hoạt.
  • Giao tiếp và bảo mật:
    • Socket.IO: Thư viện hỗ trợ truyền tải dữ liệu sự kiện thời gian thực (real-time) giữa máy chủ và trình duyệt.
    • JSON Web Token (JWT): Tiêu chuẩn xác thực và phân quyền không trạng thái (stateless authentication) với cơ chế cặp mã thông báo: accessToken và refreshToken.
    • Thư viện & Dịch vụ phụ trợ: bcryptjs (mã hóa mật khẩu), uuid (tạo mã token xác thực ngẫu nhiên), SendInBlueProvider (dịch vụ gửi email kích hoạt), CloudinaryProvider (lưu trữ tệp hình ảnh/ảnh bìa thẻ).

Phương pháp tiếp cận và kỹ thuật mô hình hóa

Nhóm tác giả sử dụng phương pháp phân tích thiết kế hướng đối tượng (OOAD) kết hợp mô hình hóa bằng ngôn ngữ UML:

  • Xây dựng 14 đặc tả ca sử dụng chi tiết (từ IUC01 đến IUC14).
  • Xây dựng 23 sơ đồ trình tự/quy trình hoạt động của hệ thống.
  • Thiết kế mô hình dữ liệu tài liệu (Document Schema) cho 5 bộ sưu tập (Collections) trong MongoDB.

Thiết kế và triển khai hệ thống

Mô hình cơ sở dữ liệu (Database Schema)

Hệ thống tổ chức dữ liệu thành 5 thực thể chính trong MongoDB, liên kết với nhau thông qua định danh _id dạng String hoặc ObjectID:

Bộ sưu tập (Collection) Các thuộc tính chính Mô tả chức năng
User _id, email, password, username, displayName, avatar, role, isActive, verifyToken, createdAt, updatedAt, _destroy Quản lý tài khoản, thông tin định danh, trạng thái kích hoạt và phân quyền người dùng.
Board _id, title, description, ownerIds, memberIds, columnOrder, createdAt, updatedAt, _destroy Quản lý không gian làm việc tổng thể, danh sách sở hữu và thứ tự các cột công việc.
Column _id, boardId, title, cardOrder, createdAt, updatedAt, _destroy Quản lý danh sách các trạng thái hoặc phân nhóm công việc trong bảng, lưu mảng thứ tự thẻ cardOrder.
Card _id, boardId, columnId, title, cover, description, memberIds, comments, createdAt, updatedAt, _destroy Quản lý chi tiết từng đầu mục công việc, tệp đính kèm, ảnh bìa, thành viên thực hiện và bình luận.
Invitation _id, inviterId, inviteeId, type, boardInvitation (boardId, status), createdAt, updatedAt, _destroy Quản lý trạng thái các lời mời tham gia bảng (PENDING, ACCEPTED, REJECTED).

Thiết kế giao diện người dùng

Giao diện của hệ thống được tổ chức thành 6 cụm màn hình chức năng chính:

  1. Giao diện Đăng nhập (Sign In): Tiếp nhận thông tin định danh (email/tài khoản và mật khẩu) để cấp phát token.
  2. Giao diện Đăng ký (Sign Up): Tiếp nhận thông tin người dùng mới và kích hoạt quy trình gửi email xác thực tài khoản.
  3. Giao diện Trang chủ (Home/Boards Dashboard): Hiển thị danh sách các bảng công việc do người dùng sở hữu hoặc được mời tham gia, kèm thanh tìm kiếm bảng (Search boards).
  4. Giao diện Quản lý công việc (Board Detail): Không gian làm việc chính hiển thị các cột trạng thái, cho phép kéo thả cột và thẻ công việc.
  5. Giao diện Chi tiết công việc (Card Detail Modal): Hiển thị mô tả chi tiết (Description), danh sách hoạt động, bình luận (Activity & Comments) và đính kèm ảnh bìa.
  6. Giao diện Thông tin cá nhân (Account Settings): Quản lý thông tin hồ sơ người dùng (General Information), cập nhật ảnh đại diện và thay đổi mật khẩu.

Nội dung chính theo từng chương

Chương 1: Mở đầu

Chương 1 thiết lập cơ sở hình thành đề tài, trình bày lý do chọn đề tài dựa trên nhu cầu tối ưu hóa năng suất làm việc nhóm trong các tổ chức. Nội dung mục tiêu đề tài xác định rõ việc xây dựng phần mềm cung cấp công cụ theo dõi tiến độ, phân công nhiệm vụ và tăng cường tương tác nội bộ. Phần khảo sát hiện trạng định hình ứng dụng theo cơ chế bảng (board) trực quan, cho phép người dùng phân rã dự án thành các danh sách và thẻ công việc độc lập.

Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng

Chương 2 trình bày chi tiết về cơ sở lý thuyết và các công nghệ cấu thành hệ thống:

  • JavaScript & Kiến trúc Client - Server: Phân tích khả năng xử lý kịch bản đa nền tảng, cơ chế tách biệt tầng giao diện và logic xử lý máy chủ.
  • React & Redux: Trình bày nguyên lý Virtual DOM, khả năng tái sử dụng thành phần giao diện và quản lý trạng thái theo luồng dữ liệu một chiều.
  • Node.js, Express.js & MongoDB: Làm rõ cơ chế non-blocking I/O, hệ thống định tuyến middleware và ưu điểm lưu trữ tài liệu JSON linh hoạt của MongoDB.
  • Bootstrap 5, Sass, Socket.IO & JWT: Phân tích phương pháp thiết kế giao diện đáp ứng, giao tiếp thời gian thực hai chiều và cơ chế bảo mật xác thực phiên làm việc không trạng thái qua cấu trúc token 3 phần (Header, Payload, Signature).

Chương 3: Thiết kế

Chương 3 là phần trọng tâm về kỹ thuật phân tích và mô hình hóa hệ thống:

  • Khảo sát nghiệp vụ: Đặc tả các yêu cầu chức năng về tạo lập bảng, cấu hình danh sách, gán nhãn phân loại, phân quyền thành viên, bình luận và ghi nhận lịch sử thao tác.
  • Hệ thống Use Case: Xây dựng biểu đồ Use Case tổng quan và 14 bảng đặc tả chi tiết từ IUC01 đến IUC14:
    • IUC01: Đăng nhập; IUC02: Đăng ký; IUC03: Thay đổi mật khẩu; IUC04: Tạo bảng.
    • IUC05: Thêm thành viên chỉnh sửa bảng; IUC06: Thêm cột; IUC07: Xóa cột; IUC08: Thêm thẻ.
    • IUC09: Thay đổi vị trí cột; IUC10: Thay đổi vị trí thẻ; IUC11: Xóa thẻ (Archive thẻ).
    • IUC12: Xem thông báo tham gia bảng công việc; IUC13: Từ chối tham gia bảng; IUC14: Chấp nhận tham gia bảng.
  • Quy trình hoạt động (Sequence Workflows): Đặc tả luồng xử lý từ Client qua Server đến Database cho 23 quy trình tương ứng (Đăng ký, Đăng nhập, Tìm kiếm bảng, Kéo thả đổi vị trí cột/thẻ, Bình luận, Xác thực quyền truy cập...).
  • Cơ sở dữ liệu & Giao diện: Thiết kế cấu trúc 5 collections và 6 giao diện trực quan của hệ thống.

Chương 4: Code các chức năng ứng dụng

Chương 4 cung cấp mã nguồn hiện thực hóa các hàm xử lý logic nghiệp vụ cốt lõi ở tầng dịch vụ (Service/Controller) của hệ thống:

  • Quản lý Bảng (Board Service):
    • createNew: Tạo mới bảng và khởi tạo quyền sở hữu.
    • getFullBoard: Truy vấn toàn bộ cấu trúc dữ liệu của bảng, lọc các cột đã bị xóa mềm (!column._destroy), kiểm tra quyền truy cập của người dùng (ownerIds, memberIds) và chuẩn hóa dữ liệu thẻ/cột.
    • update & getListBoards: Cập nhật metadata của bảng và thực hiện phân trang danh sách bảng làm việc (DEFAULT_CURRENT_PAGE, DEFAULT_ITEMS_PER_PAGE).
  • Quản lý Cột và Thẻ (Column & Card Service):
    • createNew (Card/Column): Khởi tạo thực thể mới và cập nhật mảng liên kết thứ tự cardOrder, columnOrder.
    • update (Card): Hỗ trợ cập nhật đa dạng trạng thái bao gồm đẩy bình luận mới (pushNewComment), cập nhật thành viên (incomingMember) và tải ảnh bìa lên Cloudinary (CloudinaryProvider.uploadResult.secure_url).
    • update (Column): Xử lý xóa mềm cột và đồng bộ xóa các thẻ liên thuộc thông qua CardModel.cardOrder.
  • Hệ thống Lời mời và Xác thực (Invitation & Auth Service):
    • createNewBoardInvitation: Kiểm tra sự tồn tại của người mời (inviter), người được mời (invitee) và bảng để khởi tạo bản ghi với trạng thái PENDING.
    • updateBoardInvitation: Tiếp nhận phản hồi accept hoặc reject; nếu chấp nhận, tự động bổ sung userId vào mảng memberIds của bảng.
    • createNew (User) & verifyAccount: Băm mật khẩu bằng bcryptjs, sinh mã verifyToken qua thư viện uuidv4, kích hoạt gửi email qua SendInBlueProvider và cập nhật cờ isActive = true.
    • signIn: So khớp mật khẩu đã mã hóa, khởi tạo và cấp phát đồng thời accessToken (thời hạn ngắn) và refreshToken (thời hạn dài) chứa _id và email.
// Minh họa trích xuất hàm xử lý xác thực đăng nhập từ tài liệu
const signIn = async (data) => {
  try {
    const existUser = await UserModel.findOneByEmail(data.email)
    if (!existUser) { throw new Error('Email khong ton tai!') }
    if (!existUser.isActive) { throw new Error('Your account is not active!') }
    
    // So khớp mật khẩu với bcryptjs
    if (!bcryptjs.compareSync(data.password, existUser.password)) {
      throw new Error("Your email or password is incorrect!")
    }
    
    const userInfoToStoreInJwtToken = { _id: existUser._id, email: existUser.email }
    
    // Cấp phát cặp token xác thực
    const accessToken = await JwtProvider.generateToken(
      userInfoToStoreInJwtToken, 
      env.ACCESS_TOKEN_SECRET_SIGNATURE, 
      env.ACCESS_TOKEN_SECRET_LIFE
    )
    const refreshToken = await JwtProvider.generateToken(
      userInfoToStoreInJwtToken, 
      env.REFRESH_TOKEN_SECRET_SIGNATURE, 
      env.REFRESH_TOKEN_SECRET_LIFE
    )
    
    return { accessToken, refreshToken, ...pickUser(existUser) }
  } catch (error) {
    throw new Error(error)
  }
}

Chương 5: Kết luận và hướng phát triển

Chương 5 tổng kết lại toàn bộ khối lượng công việc đã hoàn thành và đề ra các định hướng nâng cấp hệ thống trong tương lai.

Kết quả và đóng góp

Kết quả triển khai

  1. Hoàn thiện giải pháp phần mềm: Đồ án đã hiện thực hóa thành công ứng dụng quản lý công việc trên nền tảng web với đầy đủ các phân hệ từ xác thực tài khoản, quản lý không gian làm việc cá nhân/nhóm đến tương tác thẻ chi tiết.
  2. Xử lý nghiệp vụ tương tác phức tạp:
    • Triển khai cơ chế kéo thả thay đổi vị trí linh hoạt cho cả cột (columnOrder) và thẻ công việc (cardOrder).
    • Xây dựng quy trình mời thành viên vào bảng với cơ chế phản hồi chấp nhận/từ chối, đồng bộ danh sách thành viên trực tiếp vào dữ liệu bảng.
    • Tích hợp thành công các nhà cung cấp dịch vụ ngoài: gửi email xác thực qua SendInBlue và lưu trữ đa phương tiện qua Cloudinary.
  3. Mô hình bảo mật và phân quyền: Triển khai cơ chế xác thực kép thông qua JWT (accessToken và refreshToken), mã hóa an toàn mật khẩu người dùng với thuật toán băm của bcryptjs và kiểm soát quyền truy cập tài nguyên bảng dựa trên mảng định danh (ownerIds, memberIds).

Hạn chế và hướng nghiên cứu tiếp

Hạn chế được ghi nhận

  • Nhóm tác giả tự đánh giá do giới hạn về mặt thời gian và kiến thức nên quá trình hiện thực hóa đồ án khó tránh khỏi những thiếu sót nhất định trong vận hành thực tế.
  • Các tính năng phục vụ theo dõi thời gian và phân tích dữ liệu chuyên sâu chưa được tích hợp trong phiên bản hiện tại.

Hướng phát triển của đề tài

Tài liệu chỉ rõ 3 hướng nghiên cứu và mở rộng tiếp theo:

  1. Tích hợp tiện ích thời gian và công cụ quản trị nâng cao: Bổ sung tính năng lịch biểu (calendar view), tích hợp ứng dụng hẹn giờ và liên kết với các công cụ quản lý dự án bên ngoài.
  2. Mở rộng tương tác và cộng tác nhóm: Xây dựng hệ thống trao đổi tin nhắn trực tiếp, chia sẻ tệp tin đa định dạng, tích hợp các công cụ giao tiếp âm thanh/video hội thoại trực tuyến.
  3. Phân tích và báo cáo quản trị: Phát triển hệ thống báo cáo tổng quan, biểu đồ thống kê trực quan nhằm theo dõi hiệu suất công việc, đánh giá tiến độ thực hiện dự án và hỗ trợ cải tiến quy trình.

Giá trị tham khảo

Đồ án là tài liệu tham khảo thực tiễn đối với sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm và các nhà phát triển ứng dụng web:

  • Tài liệu tham khảo mẫu về quy trình phân tích thiết kế: Cung cấp mẫu đặc tả Use Case chi tiết và hệ thống sơ đồ quy trình nghiệp vụ rõ ràng cho bài toán quản lý công việc dạng Kanban.
  • Tham khảo cấu trúc mã nguồn Fullstack JavaScript: Là tài liệu học tập phù hợp để triển khai kiến trúc ứng dụng web kết hợp React - Redux ở Front-end và Node.js - Express - MongoDB ở Back-end.
  • Kỹ thuật xác thực và tích hợp dịch vụ: Cung cấp mã nguồn thực tế về quy trình xác thực tài khoản qua email token, xử lý xác thực người dùng không trạng thái với JWT và tích hợp các dịch vụ đám mây (Cloudinary, SendInBlue).

Câu hỏi thường gặp

1. Cơ chế xác thực tài khoản người dùng trong hệ thống được thực hiện như thế nào?

Hệ thống sử dụng quy trình xác thực 2 bước:

  • Khi người dùng đăng ký, hệ thống băm mật khẩu bằng bcryptjs, sinh mã verifyToken ngẫu nhiên qua uuidv4() với trạng thái tài khoản isActive = false, sau đó gửi liên kết kích hoạt qua dịch vụ SendInBlueProvider.
  • Khi người dùng nhấp vào liên kết xác thực, hàm verifyAccount kiểm tra tính hợp lệ của token, xóa verifyToken và cập nhật isActive = true để cho phép đăng nhập.

2. Hệ thống quản lý quyền truy cập của người dùng vào từng bảng công việc dựa trên nguyên lý nào?

Quyền truy cập được kiểm soát thông qua hai mảng định danh lưu trữ trong tài liệu Board là ownerIds (chủ sở hữu) và memberIds (thành viên được mời). Trong hàm getFullBoard, hệ thống kiểm tra nếu userId gửi yêu cầu không nằm trong các mảng này thì sẽ chặn truy cập và ném lỗi thông báo người dùng không có quyền truy cập bảng.

3. Quy trình mời một thành viên tham gia vào bảng làm việc diễn ra ra sao?

Quy trình gồm 3 giai đoạn:

  1. Chủ bảng gửi yêu cầu mời thông qua email; hệ thống tạo một bản ghi trong collection Invitation với trạng thái PENDING.
  2. Người được mời nhận thông báo và có quyền lựa chọn chấp nhận (accept) hoặc từ chối (reject).
  3. Nếu người dùng chọn accept, hệ thống cập nhật trạng thái lời mời sang ACCEPTED và tự động bổ sung userId của người đó vào mảng memberIds của bảng công việc tương ứng.

4. Hệ thống lưu trữ và quản lý ảnh bìa (cover) của các thẻ công việc bằng giải pháp nào?

Hệ thống tích hợp với dịch vụ lưu trữ đám mây Cloudinary thông qua nhà cung cấp CloudinaryProvider. Khi có yêu cầu cập nhật ảnh bìa thẻ kèm tệp nhị phân (cardCoverFile), hệ thống thực hiện tải tệp lên Cloudinary theo thư mục card-covers, lấy đường dẫn liên kết an toàn (uploadResult.secure_url) và cập nhật vào trường cover của tài liệu Card.

Kết luận

Đồ án "Xây Dựng Ứng Dụng Quản Lý Công Việc" của nhóm sinh viên Trường Đại học Ngoại ngữ - Tin học TP.HCM đã hoàn thành đầy đủ các mục tiêu đề ra về mặt phân tích nghiệp vụ, thiết kế hệ thống và hiện thực hóa phần mềm. Ứng dụng cung cấp giải pháp trực quan hóa quy trình quản lý dự án theo mô hình bảng - cột - thẻ công việc linh hoạt, đồng thời hỗ trợ hiệu quả tương tác làm việc nhóm thông qua cơ chế phân quyền và lời mời cộng tác. Toàn bộ mã nguồn và tài liệu thiết kế của đồ án thể hiện tính thực tiễn cao, đóng vai trò là tài liệu tham khảo giá trị cho các nghiên cứu và triển khai ứng dụng web Fullstack JavaScript.