Phát triển ứng dụng web quản lý công việc

PHẦN MỞ ĐẦU

ĐẶT VẤN ĐỀ

1.1.1 Tính cấp thiết của đề tài

Làm việc nhóm là kỹ năng mềm thiết yếu trong mọi ngành nghề, với quản lý nhóm hiệu quả là chìa khóa thành công Một trưởng nhóm giỏi biết cách phân công công việc và độ khó phù hợp cho từng thành viên, trong khi một thành viên xuất sắc cần quản lý thời gian hoàn thành nhiệm vụ một cách hợp lý và đúng hạn.

Hiện nay, việc quản lý và phân công công việc chủ yếu diễn ra qua các ứng dụng chat như Messenger, Zalo, Telegram, hoặc thông qua các tài liệu như file PDF, Word Nhiều người cũng sử dụng Excel và Google Sheet để ghi chép và phân công nhiệm vụ.

Mặc dù các phương pháp ghi việc và phân việc hiện tại mang lại nhiều lợi ích, nhưng chúng cũng tồn tại một số hạn chế Việc chat qua các ứng dụng có thể khiến tin nhắn dễ bị trôi mất, trong khi các file text cần phải được cập nhật bằng cách sửa đổi hoặc tạo thêm file mới, dẫn đến việc lưu trữ nhiều tài liệu Điều này làm cho việc theo dõi lịch sử thay đổi, deadline và mức độ hoàn thành trở nên khó khăn hơn.

Có nhiều công cụ thương mại hỗ trợ quản lý nhóm, nhưng chúng thường yêu cầu người dùng trả phí để sử dụng Tại Khoa Công nghệ thông tin, việc tìm kiếm nguồn kinh phí để chi trả cho các ứng dụng này gặp nhiều khó khăn.

Trong quá trình làm việc, việc ghi chép các công việc cần làm và phân bổ thời gian hợp lý là rất quan trọng Thay vì chỉ dựa vào trí nhớ hoặc ghi chú, việc sử dụng các công cụ quản lý nguồn như Git hay SVN sẽ giúp theo dõi và quản lý công việc hiệu quả hơn Các ứng dụng quản lý công việc không chỉ hỗ trợ các nhóm trong việc nắm bắt nhiệm vụ, thời hạn và mức độ hoàn thành, mà còn giúp những người làm việc độc lập tự quản lý công việc của mình tốt hơn Với những giải pháp này, chúng ta có thể nâng cao hiệu suất làm việc và quản lý thời gian hiệu quả.

- Giao việc nhanh gọn với đầy đủ thông tin giúp người được giao việc đơn giản hơn trong việc xem lại và làm rõ nhiệm vụ

- Lưu trữ dễ dàng công việc đã giao và có thể đem ra đối ứng mọi lúc

- Lưu trữ các miêu tả, thay đổi về công việc và trao đổi của những người được giao việc

- Theo dõi dễ dàng tiến độ và tình hình công việc

Đề tài “Phát triển ứng dụng web quản lý công việc dành cho giảng viên trường Cao Đẳng Công Nghệ Thủ Đức” được thực hiện nhằm đơn giản hóa việc nắm bắt tình trạng công việc và thống kê thông qua các biểu đồ.

1.1.2 Mục đích của đề tài

Nghiên cứu các giải pháp nhằm cải thiện quy trình giao, nhận và quản lý công việc, giúp cho công việc trở nên gọn gàng, rõ ràng và thú vị hơn.

Phạm vi nghiên cứu là các công nghệ phát triển website gồm:

1.1.4 Định hướng phát triển của đề tài Ứng dụng được định hướng phát triển theo giai đoạn như sau:

1 Giai đoạn A, phát triển hệ thống cơ bản để giao và nhận việc

2 Giai đoạn B, phát triển thêm giúp hệ thống có thể thông báo khi người dùng được giao việc và khi công việc gần tới hạn chót

3 Giai đoạn C, xây dựng dữ liệu chặt chẽ để thống kê và tạo ra các biểu đồ giúp dễ dàng trong việc nắm bắt tình hình dự án

4 Giai đoạn D, vận hành và bảo trì hệ thống

- Phân tích các Model của hệ cơ sở dữ liệu không quan hệ để xây dựng nên một hệ thống lưu trữ và quản lý công việc

- Sử dụng React để tạo ra một frontend riêng biệt không phụ thuộc vào server

- Dựng server API bằng NodeJS, Express để giao tiếp với frontend

- Tạo cơ sở dữ liệu không quan hệ bằng MongoDB để lưu trữ

- Dùng SocketIO để tạo nên các thay đổi realtime với nhiều người dùng cùng lúc

CÁC CÔNG NGHỆ, KỸ THUẬT SỬ DỤNG TRONG ĐỀ TÀI

Các công nghệ và kỹ thuật áp dụng

Sử dụng React sẽ tạo nên một trải nghiệm mượt mà cho người dùng ở phía giao diện

NodeJS và Express là một lựa chọn tuyệt vời trong việc xây dựng một server API

MongoDB là một cơ sở dữ liệu không quan hệ nên nó sẽ chẳng có một ràng buộc hay quy định nào trong việc xây dựng database

SocketIo là một thư viện hỗ trợ realtime được lựa chọn hàng đầu.

Những ưu điểm và các lý do áp dụng công nghệ

Sử dụng React để xây dựng Frontend mang lại sự độc lập cho cả Frontend và Backend, giúp việc thay đổi một trong hai dễ dàng hơn trong tương lai Hiện nay, React là một trong những thư viện Frontend phổ biến nhất nhờ vào tốc độ, tính mượt mà và tiện lợi, cùng với sự hỗ trợ từ Facebook.

NodeJS nổi bật với khả năng xử lý đa tác vụ nhanh chóng, trong khi Express là lựa chọn hàng đầu cho việc thiết kế API nhờ vào sự đơn giản và sức mạnh trong việc xây dựng các route Mongoose là thư viện tuyệt vời hỗ trợ đầy đủ các thao tác từ cơ bản đến nâng cao khi truy xuất dữ liệu từ cơ sở dữ liệu MongoDB.

MongoDB cho phép xây dựng hệ thống cơ sở dữ liệu một cách linh hoạt mà không gặp phải các ràng buộc phức tạp Thay vì lo lắng về cách thức đưa dữ liệu vào, người dùng chỉ cần tập trung vào cách thức tối ưu hóa quá trình này Sự linh hoạt này cũng giúp cho việc thay đổi cấu trúc dữ liệu trở nên dễ dàng hơn.

Database sau này cũng trở nên đơn giản và ít ảnh hưởng đến cấu trúc ban đầu

SocketIo is a leading NodeJS library for real-time applications, built on WebSockets and utilizing an easy-to-use event-based communication method.

Tất cả các công nghệ này đều được phát triển bằng JavaScript, một ngôn ngữ lập trình phổ biến, và hoạt động trên nền tảng NodeJS.

Tiếng Việt là ngôn ngữ được ưa chuộng trong tuyển dụng và sử dụng rộng rãi, đồng thời giữ vị trí top 1 trên Github trong nhiều năm nhờ sự bình chọn của các lập trình viên.

ĐẶC TẢ YÊU CẦU PHẦN MỀM

Mô tả yêu cầu

Yêu cầu xây dựng một trang web quản lý công việc cần đảm bảo tính dễ sử dụng và minh bạch trong công việc Giao diện người dùng nên thân thiện và có biểu đồ thống kê để nâng cao trải nghiệm người dùng Ngoài ra, hệ thống cũng cần thông báo cho người dùng khi có công việc mới hoặc khi hạn chót công việc đang đến gần.

Hệ thống cũng cần xử lý realtime để mọi dữ liệu về công việc và các trao đổi được đồng bộ và kịp thời

Giúp các giáo viên là các người dùng quản lý công việc nhanh gọn và minh bạch hơn

Phần mềm này được phát triển dựa trên ý tưởng từ Trello, mang đến những chức năng cơ bản tương tự Tuy nhiên, giao diện và tính năng đã được tối ưu hóa để dễ sử dụng hơn, đồng thời tích hợp thêm các biểu đồ thống kê hữu ích.

Khi các phòng Khoa và giáo viên đã thành thạo trong việc sử dụng và quản lý, họ có thể mở rộng ứng dụng cho sinh viên Việc này giúp giáo viên dễ dàng quản lý các đội nhóm trong lớp trong quá trình giảng dạy.

1 Quản lý viên hệ thống Xóa user, project, truy cập vào các Project với quyền cao nhất

2 Người dùng Tạo project, quản lý project của mình và tham gia các project khác

Lấy yêu cầu phần mềm

3.2.1.1 Quy trình tạo Project mới

A Mô hình quy trình nghiệp vụ

Sơ đồ 1: Quy trình tạo Project

 Khi mở hệ thống, người dùng sẽ cần đăng nhập vào hệ thống

 Sau khi đăng nhập vào, người dùng sẽ nhập tên Project ở mục Create tại trang chủ

 Sau khi nhập xong tên Project người dùng ấn nút Create, project sẽ được tạo và người dùng được dẫn đến page Project vừa được tạo

3.2.1.2 Quy trình tham gia một Project

Sơ đồ 2: Quy trình tham gia Project

 Sau khi đăng nhập vào, người dùng sẽ nhập ID của Project muốn vào ở mục Join tại trang chủ

 Sau khi nhập xong ID Project người dùng ấn nút Join và người dùng sẽ được dẫn đến page Project với ID vừa nhập

Page Project sẽ kiểm tra xem người dùng có nằm trong danh sách đen hay không Nếu có, người dùng sẽ không được phép truy cập; ngược lại, họ sẽ được thêm vào Project và được cấp một vai trò mặc định.

3.2.1.3 Quy trình thêm người dùng vào Project

Sơ đồ 3: Quy trình thêm người dùng khác vào Project

 Người dùng vào Project mà muốn thêm người dùng khác vào

 Ấn vào icon thêm người dùng ở góc trên phải một Dialog sẽ hiện lên

 Nhập email người dùng muốn thêm vào

Page Project sẽ xác minh xem người dùng có nằm trong danh sách đã bị đuổi hay không Nếu có, người dùng sẽ không được phép truy cập; ngược lại, họ sẽ được thêm vào Project và được cấp một vai trò mặc định.

3.2.1.4 Quy trình tạo Lane mới

Sơ đồ 4: Quy tạo Lane mới trong Project

 Người dùng vào Project mà muốn tạo thêm Lane

 Ấn vào nút Add New Lane một Dialog sẽ hiện lên

 Nhập tên Lane và chọn màu sắc cho Lane

 Dialog sẽ tắt đi và một cột mới sẽ được tạo ra với tên và màu sắc được người dùng chọn

3.2.1.5 Quy trình tạo một công việc mới

Sơ đồ 5: Quy trình thêm một công việc mới vào Lane

 Người dùng vào Project mà muốn tạo thêm Công việc

 Nhấn vào icon dấu cộng ở góc trên phải của Lane mà bạn muốn thêm công việc thì một Dialog sẽ hiện

 Người dùng sẽ nhập tên công việc, chú thích, người nhận công việc, độ khó và hạn chót của công việc

 Sau khi nhập xong Ấn vào nút ADD

 Dialog sẽ đóng lại và một công việc mới sẽ được thêm vào cuối Lane người dùng chọn

3.2.1.6 Quy trình thêm danh sách các công việc nhỏ trong công việc

Sơ đồ 6: Quy trình thêm công việc nhỏ trong công việc

 Người dùng vào Project mà muốn tạo thêm Công việc nhỏ

 Nhấn vào tiêu đề của công việc muốn thêm công việc nhỏ bên trong

 Sau khi nhấn vào một Dialog với thông tin công việc sẽ hiện lên, người dùng vào mục CHECKLIST nhập tên công việc nhỏ muốn thêm

 Sau khi nhập xong Ấn icon dấu cộng hoặc ấn enter ngay tại ô input

 Một công việc nhỏ sẽ được tạo ra ở mục CHECKLIST

3.2.1.7 Quy trình Bình luận một công việc

Sơ đồ 7: Quy trình bình luận về một công việc

 Người dùng vào Project có công việc muốn bình luận

 Nhấn vào tiêu đề của công việc muốn đăng bình luận

 Sau khi nhấn vào một Dialog với thông tin công việc sẽ hiện lên, người dùng vào mục ACTIVITY nhập bình luận vào textarea

 Sau khi nhập xong bình luận ấn vào nút Add Comment bên dưới

 Một bình luận mới sẽ được tạo ra trên đầu danh sách bình luận

3.2.1.8 Quy trình xem công việc theo dạng Bảng

Sơ đồ 8: Quy trình xem các công việc theo dạng Bảng

 Người dùng vào Project muốn xem các công việc theo dạng bảng

 Sau khi vào trang Project thì nhấn vào menu Table

 Người dùng sẽ được đưa vào tab có một Table lớn hiển thị tất cả công việc trong Project

3.2.1.9 Quy trình kiểm tra biểu đồ của Dự án

Sơ đồ 9: Quy trình kiểm tra biểu đồ

 Người dùng vào Project muốn xem biểu đồ

 Sau khi vào trang Project thì nhấn vào menu Chart

 Người dùng sẽ được đưa vào tab có 4 biểu đồ thông tin về dự án

3.2.1.10 Quy trình kiểm tra thông báo dự án

Sơ đồ 10: Quy kiểm tra thông báo dự án

 Người dùng vào Project có thông báo cần xem

 Sau khi vào trang Project thì nhấn vào menu Notification

Khi người dùng nhấn vào thông báo, họ sẽ được chuyển đến tab thông báo, nơi có danh sách các thông báo liên quan Điều này giúp người dùng dễ dàng truy cập vào công việc mà thông báo đề cập.

3.2.1.11 Quy trình chỉnh sửa thông tin công việc

Sơ đồ 11: Quy trình chỉnh sửa thông tin công việc

 Người dùng vào Project có công việc cần chỉnh sửa

 Nhấn vào tiêu đề của công việc muốn chỉnh sửa

 Sau khi nhấn vào một Dialog với thông tin công việc sẽ hiện lên, Người dùng có thể chỉnh sửa những thông tin trong Dialog

 Sau khi chỉnh sửa xong người dùng ấn vào nút SAVE Các thông tin vừa điền sẽ được lưu lại

Sơ đồ 12: Quy trình xóa Lane của Project

 Người dùng vào Project mà xóa Lane

 Nhấn vào icon dấu x ở góc trên phải của Lane mà bạn muốn xóa

 Một Dialog Cofirm sẽ hiện lên, người dùng ấn vào nút Confirm để xóa

3.2.1.13 Quy trình Xóa công việc

Sơ đồ 13: Quy trình xóa công việc

 Người dùng vào Project mà xóa Công việc

 Nhấn vào icon thùng rác ở góc trên phải của công việc mà bạn muốn xóa

 Một Dialog Cofirm sẽ hiện lên, người dùng ấn vào nút Confirm để xóa

3.2.1.14 Quy trình sửa level thành viên trong Project

Sơ đồ 14: Quy trình đổi level thành viên

 Người dùng vào Project muốn đổi level thành viên

 Nhập level mới vào ô input field kế bên thành viên cần đổi

 Ấn nút SAVE để lưu level thành viên

3.2.1.15 Quy trình đánh dấu hoàn thành công việc

Sơ đồ 15: Quy trình đánh dấu hoàn thành công việc

 Người dùng vào Project mà muốn đánh dấu hoàn thành công việc

 Nhấn vào tiêu đề của công việc muốn đánh dấu hoàn thành

 Sau khi nhấn vào một Dialog với thông tin công việc sẽ hiện lên, người dùng nhấn vào checkbox DueDate để đánh dấu đã hoàn thành công việc

3.2.1.16 Quy trình chỉnh sửa người dùng

Sơ đồ 16: Quy trình thay đổi thông tin người dùng

 Người dùng truy cập vào trang Admin

 Sau khi vào trang Admin, chọn menu Users

 Nhấn vào icon bút chì ở cột cuối của hàng người dùng muốn chỉnh sửa

Một hộp thoại xuất hiện cho phép nhập email, tên người dùng và tích chọn checkbox isAdmin để thiết lập quyền admin cho người dùng Tại đây, người dùng có thể chỉnh sửa tên và quyền admin của các tài khoản khác.

 Ấn nút SAVE để lưu sau khi chỉnh sửa xong người dùng

3.2.1.17 Quy trình xóa người dùng khỏi hệ thống

Sơ đồ 17: Quy trình xóa người dùng khỏi hệ thống

 Sau khi vào trang Admin, chọn menu Users

 Nhấn vào icon thùng rác ở cột cuối của hàng người dùng muốn xóa

 Một Dialog sẽ hiện lên và hỏi người dùng có thật sự muốn xóa, lúc này người dùng chỉ cần ấn vào nút Confirm để xác nhận xóa

3.2.1.18 Quy trình xóa dự án khỏi hệ thống

Sơ đồ 18: Quy trình xóa một dự án

 Sau khi vào trang Admin, chọn menu Projects

 Nhấn vào icon thùng rác ở cột cuối của hàng dự án muốn xóa

 Một Dialog sẽ hiện lên và hỏi người dùng có thật sự muốn xóa, lúc này người dùng chỉ cần ấn vào nút Confirm để xác nhận xóa

3.2.2 Yêu cầu chức năng của người dùng Đối với Admin

1 Xem thông tin tất cả người dùng

2 Xem thông tin tất cả dự án

4 Cấp quyền admin cho người dùng khác

9 Xóa dự án của mình tạo

15 Thêm danh sách công việc nhỏ bên trong công việc

16 Xóa các công việc nhỏ bên trong công việc

17 Bình luận về công việc

18 Đánh dấu hoàn thành công việc

19 Di chuyển công việc từ Lane này sang Lane khác

20 Đăng nhập dễ dàng với gmail

21 Ứng dụng phải được cập nhật nhanh chóng dễ dàng

22 Dễ dàng thay đổi quy trình nghiệp vụ trong tương lai

23 Tất cả người dùng cần đăng nhập để sử dụng

24 Chỉ có người tạo ra dự án và admin mới có quyền xóa dự án.

Chức năng của hệ thống

Sơ đồ 19: Usecase hệ thống

# Mã UC Tên Usecase Mô tả

Quản lý người dùng Cho phép Actor xem danh sách cũng như xóa, sửa những người dùng

Quản lý dự án Cho phép Actor xem danh sách cũng như xóa các dự án

Toàn quyền truy cập các dự án

Cho phép Actor vào các dự án với quyền owner

Tạo, xóa dự án Cho phép Actor tạo dự án cũng như xóa dự án mình tạo ra

Tham gia dự án Cho phép Actor tham gia vào một dự án khác

Thêm, xóa, sửa công việc

Cho phép Actor thêm công việc và xóa, sửa các công việc đó

Bình luận về công việc

Cho phép Actor tham gia bình luận về công việc

Thêm công việc nhỏ bên trong công việc

Cho phép Actor nhập thêm các danh sách công việc nhỏ bên trong công việc

06 Đánh dấu hoàn thành công việc

Cho phép Actor đánh dấu hoàn thành công việc được giao

Di chuyển công việc từ Lane này sang Lane khác

Cho phép Actor di chuyển công việc của mình từ Lane này sang Lane khác

3.3.3.1 UC- AD-01: Quản lý người dùng

Tên Quản lý người dùng Mã UC-AD-01

Mô tả Cho phép Actor xem danh sách cũng như xóa, sửa những người dùng

Actor Admin Trigger Actor mở trang

Pre-condition Đăng nhập dưới quyền admin

Thông tin người dùng khác bị sửa hoặc xóa

Basic Flow 1 Người dùng đăng nhập vào hệ thống

2 Hệ thống kiểm tra quyền admin

3 Hệ thống xác thực quyền admin và cho phép người dùng vào trang admin

4 Người dùng chọn menu Users

5 Người dùng xem danh sách users và chọn chỉnh sửa hoặc xóa user khác

1 Người dùng đăng nhập vào hệ thống

3 Hệ thống xác thực người dùng không phải admin và đưa về trang chủ

Hình 1: Trang quản lý Users

Hình 2: Form chỉnh sửa user

3.3.3.2 UC-AD-02: Quản lý dự án

Tên Quản lý dự án Mã UC- AD -02

Mô tả Cho phép Actor xem danh sách cũng như xóa các dự án

Actor Admin Trigger Actor mở trang

Pre-condition Đăng nhập dưới quyền admin

Một dự án bị xóa

3 Hệ thống xác thực quyền admin và cho phép người dùng vào trang admin

4 Người dùng chọn menu Projects

5 Người dùng xem danh sách dự án hoặc xóa dự án

3 Hệ thống xác thực người dùng không phải admin và đưa về trang chủ

Hình 3: Trang quản lý dự án

3.3.3.3 UC-US-01: Tạo, xóa dự án

Tên Tạo, xóa dự án Mã UC-US-01

Mô tả Cho phép Actor tạo dự án cũng như xóa dự án mình tạo ra

Actor User, Admin Trigger Actor nhập tên dự án và ấn nút “CREATE” ở trang chủ

Pre-condition Người dùng cần đăng nhập

Chuyển tới trang Dự án vừa tạo Đồng thời người tạo được set quyền owner cho dự án

2 Người dùng nhập tên Project

3 Sau khi nhập tên Project người dùng nhấn Enter hoặc ấn vào nút CREATE

4 Hệ thống sẽ tạo một dự án cho người dùng

5 Sau khi tạo thành công dự, án hệ thống sẽ dẫn người dùng đến trang dự án vừa tạo và set quyền owner cho người tạo

6 Sau khi tạo owner có quyền vào setting và ấn nút xóa

2 Người dùng không nhập tên Project hoặc chỉ nhập dấu cách rồi nhấn Enter hoặc ấn nút CREATE

3 Hệ thống alert tạo thất bại

Hình 4: Trang chủ mục tạo dự án mới

Hình 5: Dự án sau khi tạo

3.3.3.4 UC-US-02: Tham gia công việc

Tên Tham gia công việc Mã UC-US-02

Mô tả Cho phép Actor tham gia vào một dự án khác

Actor User, Admin Trigger Actor nhập id dự án và nhấn nút JOIN

Hệ thống sẽ đưa người dùng tới trang dự án với ID tương ứng

2 Người dùng nhập ID Project

3 Sau khi nhập ID Project người dùng nhấn Enter hoặc ấn vào nút JOIN

4 Hệ thống sẽ đưa người dùng tới trang dự án với ID tương ứng

5 Hệ thống sẽ kiểm tra người dùng có trong danh bị đuổi của project và cho phép người dùng truy cập với role mặc định

2 Người dùng nhập ID một Project không tồn tại

3 Hệ thống Alert không tìm thấy

Hình 6: Nhập ID để tham gia dự án

3.3.3.5 UC-US-02: Thêm, xóa, sửa công việc

Tên Thêm, xóa, sửa công việc Mã UC-US-02

Mô tả Cho phép Actor thêm công việc và xóa, sửa các công việc đó

Actor User, Admin Trigger Actor vào trang dự án

Hệ thống sẽ update dữ liệu công việc tất cả người dùng đang connect

7 Người dùng truy cập vào một dự án

8 Người dùng nhấn vào icon dấu cộng để tạo công việc, nhấn vào icon thùng rác để sửa và nhấn vào tiêu đề để chỉnh sửa

9 Sau khi thao tác, danh sách các công việc sẽ được hệ thống update và chạy socket đồng bộ lại dữ liệu giữa các người dùng đang kết nối

3.3.3.6 UC-US-03: Bình luận về công việc

Tên Bình luận về công việc Mã 3.3.3.5 UC-US-03

Mô tả Cho phép Actor tham gia bình luận về công việc

Actor User, Admin Trigger Người dùng vào công việc và bình luận

Bình luận mới sẽ được Socket cập nhật realtime với tất cả người dùng đang connect

3 Người dùng nhấn vào tiêu đề của một công việc muốn bình luận

4 Người dùng nhập bình luận và ấn nút Add Comment

5 Hệ thống sẽ cập nhật bình luận realtime trên tất cả người dùng đang kết nối

3 Người dùng nhấn vào tiêu đề của một công việc muốn bình luận

4 Người dùng không nhập bình luận hoặc chỉ nhập dấu cách

5 Hệ thống không làm gì cả

Hình 8: Bình luận về dự án

3.3.3.7 UC-US-04: Thêm công việc nhỏ bên trong công việc

Tên Thêm công việc nhỏ bên trong công việc

Mô tả Cho phép Actor nhập thêm các danh sách công việc nhỏ bên trong công việc

Actor User, Admin Trigger Actor vào chi tiết công việc và thêm công việc nhỏ

3 Người dùng nhấn vào tiêu đề của một công việc muốn thêm công việc nhỏ

4 Người dùng nhập nội dung các công việc nhỏ và ấn nút SAVE để lưu

Hình 9: các công việc nhỏ bên trong công việc

3.3.3.8 UC-US-05: Đánh dấu hoàn thành công việc

Tên Sinh viên điểm danh Mã UC-US-05

Mô tả Cho phép Actor đánh dấu hoàn thành công việc được giao

Actor User, Admin Trigger Actor nhấn vào checkbox kế bên DueDate

Công việc sẽ có label complete

3 Người dùng nhấn vào tiêu đề của một công việc muốn đánh dấu hoàn thành

4 Check vào checkbox ở DueDate rồi ấn nút SAVE

Hình 10: Đánh dấu hoàn thành công việc

Hình 11: Label complete cho công việc đã hoàn thành

3.3.3.9 UC-US-06: Di chuyển công việc từ Lane này sang Lane khác

Tên Di chuyển công việc từ

Lane này sang Lane khác

Mô tả Cho phép Actor xin nghỉ có phép tại một lớp học nào đó

Actor User, Admin Trigger Actor nhấn giữ một công việc và kéo sang Lane khác

Hệ thống realtime đồng bộ dữ liệu giữa các người dùng

3 Người dùng nhấn giữ một công việc ở Lane này và kéo sang Lane khác hoặc thay đổi vị trí trong Lane

4 Hệ thống sẽ realtime update lại thay đổi tới tất cả người dùng khác đang kết nối

Hình 12: Nắm giữ di chuyển vị trí công việc

3.3.4 Yêu cầu phi chức năng

Hệ thống cần hướng dẫn và demo cho giảng viên tầm 15-20 phút là có thể sử dụng tốt được toàn bộ chức năng mà hệ thống cung cấp

Thời gian đáp ứng dưới 1 giây

Hỗ trợ trọn đời ứng dụng

 Sử dụng Chrome/Firefox (Phiên bản mới nhất nếu có thể)

 Không hỗ trợ Internet Explorer

Bản quyền ứng dụng thuộc người phát triển, mọi sao chép phải nhận được sự đồng ý

XÂY DỰNG CHƯƠNG TRÌNH

Ràng buộc kỹ thuật

Hệ thống

Hình 13: Sơ đồ miêu tả hệ thống

Hệ thống gồm có 4 phần:

 (1) - Client giao diện hiển thị của trang web sẽ do React đảm nhận

 (2) – Server giao tiếp API với Frontend chính là Express

 (3) – Database cung cấp dữ liệu là MongoDB được đặt trên Cloud

 (4) – Server SocketIo sẽ đảm nhận các tác vụ Realtime, đồng bộ dữ liệu hiển thị với nhiều Client

Thiết kế, mô tả database

Hình 14: Các collections của Database

Database gồm những collection sau:

Tên field Mô tả Kiểu dữ liệu Ghi chú id Được tạo tự động ObjectId name Tên hiển thị của

String required owner Chủ sở hữu

ObjectId required members Danh sách thành viên trong Project

Array of ObjectId lanes Danh sách các cột chứa công việc trong Project

41 roles Các quyền của các thành viên trong Project

Array of ObjectId removedMembers Danh sách các member bị đuổi khỏi Project

Array of ObjectId createAt Ngày Project được tạo ra

Date Mặc định là thời gian hiện tại

4.2.2.2 Lane (Cột chứa công việc)

Tên field Mô tả Kiểu dữ liệu Ghi chú id Được tạo tự động ObjectId title Tiêu đề của cột String required color Màu sắc trên header của cột

Có giá trị default tasks Danh sách các công việc

Array of ObjectId createAt Ngày Project được tạo ra

4.2.2.3 Task (Công việc được giao)

Tên field Mô tả Kiểu dữ liệu Ghi chú id Được tạo tự động

ObjectId creator Người giao công việc

ObjectId required assignees Lớp của giáo viên nào

Array of Object name Tên của công việc

String required description Miêu tả, chú thích công việc

String deliveryDate Ngày công việc được giao

Date required mặc định lấy ngày hiện tại dateAccept Ngày công việc được nhận

Date dueDate Ngày hết hạn công việc

Date required difficult Độ khó của công việc

1: Rất dễ 2: Dễ 3: Bình thường 4: Khó

5: Rất khó list List các mini task bên trong Công việc

Array complete Hoàn thành Boolean required

4.2.2.4 Roles (Quyền, vai trò trong Project)

The article outlines a data structure with key fields: "id," which is an automatically generated ObjectId; "user," representing the user as an ObjectId and marked as required; "level," indicating the role's level as a Number; and "createAt," which denotes the creation date of the project.

Tên field Mô tả Kiểu dữ liệu Ghi chú id Được tạo tự động ObjectId oauth2Id Id Oauth2 String required email email String password Mật khẩu String

43 username Tên người dùng String required avatar Ảnh đại diện người dùng

String pushSubscription Subscription để đẩy thông báo

Object notifications Danh sách các thông báo cho người dùng

Object isAdmin Có phải là

Boolean Mặc định là false createAt Ngày Project được tạo ra

4.2.2.6 Comment (Bình luận của công việc)

ObjectId sender Người bình luận ObjectId content Nội dung bình luận

String required time Thời gian bình luận

Mặc định là thời gian hiện tại taskId ID của công việc được bình luận

4.2.2.7 History (Lịch sử xóa của dự án)

ObjectId user Người dùng thực hiện việc xóa

ObjectId required content Nội dung về việc xóa

String required time Thời gian bình luận

Mặc định là thời gian hiện tại projectId ID của dự án ObjectId required

4.2.3 Danh sách các route API xử lý tại Server Đây là các route API để cho Frontend gửi request để lấy dữ liệu

The project routes handle requests related to various components, including projects, lanes, tasks, roles, users, and subscriptions Specifically, the /project route manages project-related requests, while the /lane route addresses lane-specific inquiries The /task route processes requests concerning tasks, and the /role route deals with role-related matters Additionally, the /user route is dedicated to user-related requests, and the /subscription route manages subscription inquiries Each route is designed to efficiently receive and process relevant requests within its specific domain.

Phát triển hệ thống

01/2021 Phân tích và dựng các Model cho cơ sở dữ liệu

02/2021 Phát triển các API cơ bản thêm, xóa, sửa các Model

03/2021 Xây dựng giao diện Frontend cho trang quản lý công việc 04/2021 Phát triển thêm các chức năng đẩy thông báo, tạo biểu đồ thống kê

05/2021 Tính hợp SocketIo để xử lý realtime đồ bộ dữ liệu giữa nhiều người dùng 06/2021 Kiểm thử, sửa lỗi và viết báo cáo.

Trải nghiệm hệ thống thực tế

Một vài ảnh chụp màn hình hệ thống khi sử dụng thực tế

Hình 15: Màn hình đăng nhập

Hình 16: Giao diện trang chủ

Hình 17: Giao diện trang Admin

Hình 18: Giao diện Board của dự án

Hình 19: Giao diện thêm công việc

Hình 20: Giao diện thêm Lane

Hình 21: Giao diện chi tiết công việc

Hình 22: Màn hình xem danh sách công việc dạng Table

Hình 23: Màn hình Chart của dự án

Hình 24: Màn hình thông báo

Hình 25: Màn hình Setting của owner

Hình 26: Màn hình lịch sử xóa của dự án

Kiểm thử ứng dụng

Việc kiểm thử hệ thống được tiến hành như sau:

4.5.1 Kiểm thử chức năng ứng dụng

Kiểm thử được tiến hành sau khi hoàn thành từng chức năng và được kiểm tra tổng quát trước khi thực hiện các tính năng realtime Các chức năng này sẽ được kiểm tra trên 2-3 trình duyệt cùng lúc.

- Tạo Task và check push notification

- Tạo task và check notification 1 có task mới

- Tạo task và check notification 1 ngày trước khi hết hạn

- Tạo task và check notification 1 giờ trước khi hết hạn

- Tạo các mini task trong Task

- Check hoàn thành Task và xem biểu đồ hiển thị đúng

- Thay đổi quyền admin User

4.5.2 Kiểm thử hiệu năng ứng dụng

Quá trình kiểm tra hiệu năng hệ thống như sau:

- Kiểm tra tốc độ xử lý của thêm, xóa, sửa các project, lane, task, user bảo đảm dưới 1s (điều kiện ổn định)

- Kiểm tra các xử lý realtime đồng bộ dữ liệu dưới 3s

Tiêu đề	Phát Triển Ứng Dụng Web Quản Lý Công Việc
Tác giả	Nguyễn Minh Triết
Người hướng dẫn	ThS. Nguyễn Huy Hoàng
Trường học	Trường Cao Đẳng Công Nghệ Thủ Đức
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Nghiên Cứu Khoa Học
Năm xuất bản	2021
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	64
Dung lượng	1,49 MB