Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website quản lý công việc với công nghệ Mern Stack

Với những ưu điểm của việc quản lý dự án và đây là một yếu tố mang đến thành công của một dự án nên nhóm chúng em quyết định chọn đề tài “Xây dựng website quản lý công việc” để hỗ trợ

Kết quả dự kiến đạt được

Chương 1: Cơ sở lý thuyết

Chương 2: Khảo sát và phân tích hiện trạng

Chương 3: Mô hình hóa yêu cầu

Chương 4: Thiết kế phần mềm

Chương 5: Thiết kế và xử lý giao diện

Chương 6: Cài đặt và kiểm thử hệ thống

1 Kết quả thực hiện được

STT Thời gian Công việc

+ Cải thiện những chức năng

+ Lên kế hoạch xây dựng những chức năng mới

+ Xây dựng chức năng tùy chỉnh quyền trong Không gian làm việc và trong Dự án

4 02/05/2024 đến ngày + Xây dựng chức năng liên quan đến quy

+ Xây dựng chức năng tạo báo cáo, quản lý dữ liệu cài đặt, viết báo cáo

+ Khảo sát và phân tích đề tài

+ Phụ trách cơ sở lý thuyết front-end

+ Phụ trách hệ thống front-end

+ Viết hướng dẫn cài đặt front-end

+ Viết báo cáo phần Mở đầu, chương Lý thuyết, Khảo sát, Mô hình hóa yêu cầu, Thiết kế giao diện và xử lý, Cài đặt và kiểm thử, phần Kết luận

+ Khảo sát và phân tích đề tài

+ Phụ trách cơ sở lý thuyết back-end

+ Vẽ lược đồ Usecase và viết đặc tả Usecase, lược đồ hoạt động và lược đồ tuần tự

+ Thiết kế cơ sở dữ liệu

+ Phụ trách hệ thống back-end

+ Viết hướng dẫn cài đặt back-end

+ Kiểm thử front-end và back-end

+ Viết báo cáo phần Mở đầu, chương Lý thuyết, Khảo sát, Mô hình hóa yêu cầu, Thiết kế phần mềm, Cài đặt và kiểm thử, phần Kết luận

LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN 2

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

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

3 Đối tượng nghiên cứu đề tài 15

4 Phạm vi nghiên cứu đề tài 15

5 Phương pháp thực hiện đề tài 16

6 Kết quả dự kiến đạt được 16

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 17

1.1 Các công nghệ sử dụng cho các Frontend và Backend 17

1.2 Các công nghệ sử dụng ở Frontend 21

1.3 Các công nghệ sử dụng ở Backend 25

1.4 Tổng quan về các phương pháp quản lý dự án 31

CHƯƠNG 2 KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG 42

2.2 Khảo sát một số phần mềm 43

2.3 Phân tích yêu cầu dự án 45

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 48

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 83

4.1 Thiết kế cơ sở dữ liệu 83

CHƯƠNG 5 THIẾT KẾ VÀ XỬ LÝ GIAO DIỆN 125

5.1 Giao diện Trang Đăng nhập 125

5.2 Giao diện Trang Xác thực email 126

5.3 Giao diện Trang Đăng ký 126

5.4 Giao diện Trang Khôi phục mật khẩu 127

5.5 Giao diện Trang Tổng quan 128

5.6 Giao diện Trang Không gian làm việc 130

5.7 Giao diện Quản lý thành viên Không gian làm việc 132

5.8 Giao diện Trang tạo không gian làm việc 133

5.9 Giao diện Trang Mời thành viên vào Không gian làm việc 133

5.10 Giao diện Trang thêm thành viên vào Dự án 134

5.11 Giao diện Trang Chi tiết dự án 135

5.12 Giao diện Trang Chi tiết công việc 137

5.13 Giao diện Trang thêm thành viên vào công việc 139

5.14 Giao diện Thêm/chỉnh sửa nhãn công việc 140

5.15 Giao diện Thêm nhóm quyền dự án 142

5.16 Giao diện quản lý loại công việc 143

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG 144

6.1 Cài đặt và triển khai hệ thống 144

1 Kết quả thực hiện được 157

2 Ưu điểm và nhược điểm 158

Hình 1 2 Luồng hoạt động của JWT [6] 19

Hình 1 5 Các thành phần của Redux [8] 23

Hình 1 6 Giới thiệu Material-UI [17] 24

Hình 1 7 Kiến trúc Node.js [5] 26

Hình 1 11 Lợi ích của Agile [13] 33

Hình 1 12 Các phương pháp Agile [13] 34

Hình 1 13 Thành phần trong Kanban Board [14] 36

Hình 1 14 Vai trò trong mô hình Scrum [15] 38

Hình 1 15 Tạo tác trong Scrum [15] 39

Hình 1 16 Giai đoạn cơ bản trong Scrum [15] 40

Hình 3 2 Usecase phần Dự án 48

Hình 3 3 Usecase phần Không gian làm việc 49

Hình 4 4 SD Cập nhật thông tin cá nhân 104

Hình 4 5 SD Thay đổi mật khẩu 105

Hình 4 6 SD Tạo không gian làm việc 106

Hình 4 7 SD Mời thành viên vào không gian làm việc 107

Hình 4 8 SD Tạo nhóm quyền Không gian làm việc 108

Hình 4 9 SD Cập nhật nhóm quyền không gian làm việc 109

Hình 4 10 SD Tạo dự án nhóm 110

Hình 4 11 SD Tạo nhóm quyền trong Dự án 111

Hình 4 12 SD Cập nhật nhóm quyền Dự án 112

Hình 4 14 SD Cập nhật sprint 114

Hình 4 15 SD Thêm loại công việc 115

Hình 4 16 SD Cập nhật loại công việc 116

Hình 4 17 SD Thêm độ ưu tiên 117

Hình 4 18 SD Cập nhật độ ưu tiên 118

Hình 4 19 SD Tạo loại liên kết 119

Hình 4 20 SD Cập nhật loại liên kết 120

Hình 4 21 SD Thêm cột công việc 121

Hình 4 22 SD Di chuyển cột công việc 122

Hình 4 23 SD Thêm công việc vào cột 123

Hình 4 24 SD Cập nhật công việc 124

Hình 5 1 Giao diện Trang Đăng nhập 125

Hình 5 2 Giao diện Trang Xác thực email 126

Hình 5 3 Giao diện Trang Đăng ký 126

Hình 5 4 Giao diện Trang Khôi phục mật khẩu 127

Hình 5 5 Giao diện Trang Tổng quan 128

Hình 5 6 Giao diện Trang Không gian làm việc 130

Hình 5 7 Giao diện Trang quản lý thành viên không gian làm việc 132

Hình 5 8 Giao diện Trang tạo không gian làm việc 133

Hình 5 9 Giao diện trang mời thành viên 133

Hình 5 10 Giao diện Trang thêm thành viên vào dự án 134

Hình 5 11 Giao diện Trang Chi tiết dự án 135

Hình 5 12 Giao diện Trang Chi tiết công việc 137

Hình 5 13 Giao diện Trang thêm thành viên vào công việc 139

Hình 5 14 Giao diện Thêm/chỉnh sửa nhãn công việc 140

Hình 5 15 Giao diện Thêm/chỉnh sửa nhãn công việc 140Hình 5 16 Giao diện Thêm nhóm quyền dự án 142Hình 5 17 Giao diện Quản lý loại công việc 143

Bảng 2 1 Bảng ưu, nhược điểm Trello 44

Bảng 2 2 Bảng ưu, nhược điểm Jira 45

Bảng 2 3 Bảng phân tích yêu cầu dự án 46

Bảng 3 1 Đặc tả usecase “Đăng ký” 52

Bảng 3 2 Đặc tả usecase “Đăng nhập” 54

Bảng 3 3 Đặc tả usecase “Cập nhật thông tin cá nhân” 55

Bảng 3 4 Đặc tả usecase “Thay đổi mật khẩu” 56

Bảng 3 5 Đặc tả usecase "Tạo Không gian làm việc" 57

Bảng 3 6 Đặc tả usecase "Mời thành viên vào Không gian làm việc" 59

Bảng 3 7 Đặc tả usecase "Tạo nhóm quyền trong Không gian làm việc" 60

Bảng 3 8 Đặc tả usecase “Chỉnh sửa nhóm quyền trong Không gian làm việc” 61 Bảng 3 9 Đặc tả usecase "Tạo Dự án nhóm" 63

Bảng 3 10 Đặc tả usecase "Tạo nhóm quyền trong Dự án" 64

Bảng 3 11 Đặc tả usecase "Chỉnh sửa nhóm quyền trong Dự án" 66

Bảng 3 12 Đặc tả usecase "Tạo Sprint" 67

Bảng 3 13 Đặc tả usecase "Chỉnh sửa Sprint" 68

Bảng 3 14 Đặc tả usecase “Thêm loại công việc” 69

Bảng 3 15 Đặc tả usecase “Cập nhật loại công việc” 71

Bảng 3 16 Đặc tả usecase "Thêm độ ưu tiên" 72

Bảng 3 17 Đặc tả usecase “Cập nhật độ ưu tiên” 73

Bảng 3 18 Đặc tả usecase "Tạo loại liên kết công việc" 75

Bảng 3 19 Đặc tả usecase “Cập nhật loại liên kết công việc” 76

Bảng 3 20 Đặc tả usecase “Thêm cột công việc” 77

Bảng 3 21 Đặc tả usecase “Di chuyển cột công việc” 78

Bảng 3 22 Đặc tả usecase "Tạo công việc trong Dự án" 79

Bảng 3 23 Usecase “Cập nhật công việc” 82

Bảng 5 1 Mô tả giao diện Trang Đăng nhập 125

Bảng 5 2 Mô tả giao diện Trang Xác thực email 126

Bảng 5 3 Mô tả giao diện Trang Đăng ký 127

Bảng 5 4 Mô tả giao diện Trang Khôi phục mật khẩu 128

Bảng 5 5 Mô tả giao diện Trang Tổng quan 129

Bảng 5 6 Mô tả giao diện Trang Không gian làm việc 131

Bảng 5 7 Mô tả giao diện Trang quản lý thành viên không gian làm việc 132

Bảng 5 8 Mô tả giao diện Trang tạo không gian làm việc 133

Bảng 5 9 Mô tả giao diện Trang Mời thành viên 134

Bảng 5 10 Mô tả giao diện Trang thêm thành viên vào dự án 135

Bảng 5 11 Mô tả giao diện Trang Chi tiết dự án 136

Bảng 5 12 Mô tả giao diện Trang Chi tiết công việc 138

Bảng 5 13 Giao diện Trang thêm thành viên vào công việc 139

Bảng 5 14 Mô tả giao diện Thêm/chỉnh sửa nhãn công việc 141

Bảng 5 15 Mô tả giao diện Thêm nhóm quyền trong dự án 142

Bảng 5 16 Bảng mô tả giao diện Quản lý loại công việc 143

Bảng 6 1 Các trường hợp kiểm thử 145

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

Trong thời đại bùng nổ Công nghệ thông tin hiện nay, những yêu cầu về chất lượng công việc ngày càng được đề cao và sự cạnh tranh ngày càng được thúc đẩy chính vì thế số lượng công việc cần làm cũng tăng dần Do đó việc “Quản lý khối lượng công việc” không chỉ là một thách thức mà đó còn được xem như là một yếu tố cần thiết để quyết định chất lượng công việc hoàn thành của mỗi cá nhân hay mỗi tổ chức

Quản lý dự án đóng vai trò quan trọng như đảm bảo tiến độ hoàn thành và nâng cao chất lượng dự án giúp giảm thiểu các rủi ro và giúp sản phẩm đầu ra đạt yêu cầu về chất lượng Quản lý dự án giúp thúc đẩy việc giao tiếp giữa các thành viên, đảm bảo mọi thành viên đều hiểu mục tiêu và nhiệm vụ trong dự án Việc theo dõi quá trình của dự án cũng đảm bảo việc sử nguồn lực hiệu quả giúp điều chỉnh các kế hoạch thích ứng với các sự thay đổi cần thiết

Với những ưu điểm của việc quản lý dự án và đây là một yếu tố mang đến thành công của một dự án nên nhóm chúng em quyết định chọn đề tài “Xây dựng website quản lý công việc” để hỗ trợ mọi người có thể dễ dàng quản lý công việc cá nhân và công việc nhóm

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

Xây dựng một website quản lý công việc có đầy đủ những tính năng cơ bản để phân công, theo dõi và cập nhật các công việc đem đến sự tiện lợi giúp tiết kiệm thời gian và tăng hiệu suất quy trình làm việc

Thiết kế giao diện đơn giản, gần gũi phù hợp với trải nghiệm người dùng

Thiết kế hệ thống thông báo những khi công việc được cập nhật và hệ thống nhắc nhở ngày tới hạn

Thiết kế hệ thống xử lý hoạt động, phản hồi chính xác, nhanh chóng đến cho người dùng Áp dụng những công nghệ, kỹ thuật hiện đại để đáp ứng những yêu cầu cơ bản và nâng cao hiện tại của đề tài

3 Đối tượng nghiên cứu đề tài Đối với đề tài Quản lý công việc, đối tượng nghiên cứu dựa trên nhu cầu của người dùng trong việc quản lý các công việc cá nhân và quản lý công việc nhóm, đồng thời hỗ trợ những chức năng trao đổi, thông báo, nhắc nhở về sự thay đổi trong công việc Bên cạnh đó là các công nghệ áp dụng để thực hiện hóa các chức năng như

+ Xây dựng, nghiên cứu RESTful API, Node.js, Express.js nhằm xây dựng hệ thống APIs hỗ trợ trong việc truy xuất, trao đổi dữ liệu một cách chính xác, nhanh chóng

+ Cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dữ liệu trên hệ thống

+ Về phần giao diện hiển thị đến người dùng cuối, nhóm chúng em sử dụng framework ReactJS, Redux và một số thư viện liên quan để xây dựng, xử lý dữ liệu hiển thị đến người dùng

+ Về phần bảo mật hệ thống, nhóm chúng em sử dụng Json Web Token (JWT) để giúp xác thực người dùng và bảo mật thông tin Ngoài ra còn sử dụng một số gói và thư viện của Node.js để cải thiện bảo mật cho trang web

4 Phạm vi nghiên cứu đề tài

Phạm vi nghiên cứu của đề tài bao gồm:

+ Thiết kế giao diện người dùng: giao diện trực quan, hiện đại và gần gũi với người dùng cuối, tập trung xác định yêu cầu thông tin của người dùng, đảm bảo về mặt trải nghiệm của người dùng trên website

+ Xử lý nghiệp vụ: nhóm tập trung vào những nghiệp vụ cơ bản như tạo không gian làm việc, tạo dự án, tạo danh sách công việc, tạo các đầu việc, quản lý tiến độ công việc, hỗ trợ trao đổi trên từng công việc như bình luận, đính kèm tài liệu, hỗ trợ thông báo các sự thay đổi của công việc, hỗ trợ nhắc nhở khi gần công việc gần đến hạn,…

+ Lõi xử lý: xây dựng đầy đủ các APIs phục vụ cho phần hiển thị cuối cùng

5 Phương pháp thực hiện đề tài

Các bước thực hiện đề tài bao gồm:

+ Thu thập và xác định các yêu cầu của đề tài: khảo sát nhu cầu sử dụng website để quản lý công việc, khảo sát các trang web có hỗ trợ chức năng quản lý công việc, nghiên cứu các nghiệp vụ và chức năng liên quan

+ Tìm hiểu các kiến thức liên quan cần thiết để thực hiện đề tài: o Quy trình phát triển phần mềm o Kỹ thuật lập trình, kiến thức về Lập trình hướng đối tượng o Các kiến thức liên quan về lập trình web o Các kỹ năng phân tích thiết kế hệ thống (thiết kế giao diện, thiết kế hệ thống, thiết kế cơ sở dữ liệu) o Tìm hiểu các framework, thư viện hỗ trợ o Mô hình client – server o Các dịch vụ bên thứ ba (Google Cloud, Gmail) o Kiểm thử và sửa lỗi hệ thống o Triển khai hệ thống

6 Kết quả dự kiến đạt được

Giao diện người dùng trực quan hấp dẫn, dễ thao tác

Hệ thống cung cấp các chức năng quản lý không gian làm việc, quản lý dự án, quản lý công việc, quản lý thành viên, hỗ trợ thông báo những thay đổi liên quan đến công việc và quản lý thông tin cá nhân

CƠ SỞ LÝ THUYẾT

Các công nghệ sử dụng cho các Frontend và Backend

JavaScript là một ngôn ngữ đa nền tảng, là một trong những ngôn ngữ được sử dụng phổ biến nhất hiện nay JavaScript có thể hỗ trợ để phát triển cho cả Frontend và

TypeScript là một ngôn ngữ lập trình được phát triển bởi Microsoft TypeScript phát triển dựa trên JavaScript và là phần mở rộng của JavaScript Mục tiêu của

TypeScript là kiểm tra kiểu dữ liệu tĩnh tại thời điểm biên dịch, giúp phát hiện lỗi trước khi chạy chương trình Đặc điểm của TypeScript:

+ Cho phép khai báo kiểu dữ liệu cho biến, giúp nhanh chóng phát hiện lỗi ngay tại thời điểm biên dịch

+ Hỗ trợ lập trình hướng đối tượng để định nghĩa cấu trúc cho đối tượng

+ Hỗ trợ kiểu dữ liệu Enum giúp đảm bảo các biến chỉ nhận giá trị mong đợi

+ Cho phép sử dụng kiểu dữ liệu Union để đại diện cho một giá trị có thể thuộc nhiều kiểu dữ liệu khác

+ Hỗ trợ Generics, cho phép tạo ra các hàm và lớp sử dụng được với nhiều kiểu dữ liệu khác nhau

Giảm tỷ lệ mắc lỗi: Khả năng cảnh báo lỗi ngay tại thời điểm biên dịch giúp người dùng tiết kiệm thời gian sửa lỗi

Tái cấu trúc tốt hơn: Khi thay đổi code, hệ thống kiểm tra dữ liệu và có thể cảnh báo rằng những đoạn code khác có thể bị lỗi Được nhiều phần mềm biên tập code hỗ trợ như VSCode, Webstorm

Quá trình thiết lập khó khăn bởi vì các đoạn code sẽ không chạy nếu những module chưa được cài đặt

Vấn đề về chuyển đổi kiểu dữ liệu: TypeScript sẽ không bằng các ngôn ngữ khác như Java, C++ hay C# về kiểu dữ liệu tĩnh

TypeScript cũng chỉ biên dịch về JavaScript nên nó sẽ bị giới hạn bởi chức năng của JavaScript

Token-based authentication là phương thức xác thực bằng chuỗi mã hóa, hệ thống sử dụng phương thức này cho phép người dùng nhập username, password để nhận về một chuỗi token dùng để xác minh quyền truy cập vào ứng dụng mà không cần phải nhập lại username và password

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa các phương thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON Thông tin được xác thực và đánh dấu nhờ vào signature (chữ ký) của nó Phần chữ ký có thể được mã hóa bằng HMAC hoặc RSA

JWT bao gồm 3 thành phần:

• Header bao gồm 2 thành phần: typ - loại token (mặc định là JWT – cho biết đây là một token JWT); alg – thuật toán dùng để mã hóa (thường hay sử dụng là HMAC SHA256 – HS256 hoặc RSA)

• Payload: là nơi chứa nội dung thông tin (claim), thông tin truyền đi có thể là một thực thể (ví dụ như thông tin người dùng) hoặc có thể là thông tin bổ sung cho phần header Payload chia làm 3 loại: reserved, public và private o Reserved: Đây là những thông tin đã được quy định ở IANA JSON

Web Token Claims registry Những thông tin trong đây không bắt buộc nhưng có thể ràng buộc thêm yêu cầu đối với những thông tin cần thiết o Public: Khóa có thể được định nghĩa theo tùy ý muốn của người sử dụng JWT o Private: Phần thông tin thêm dùng để truyền qua giữa client

• Signature: Phần chữ ký được tạo bằng cách kết hợp 2 phần Header +

Payload, rồi mã hóa lại bằng giải thuật encode bất kỳ

Hình 1 2 Luồng hoạt động của JWT [6]

• Người dùng đăng nhập bằng username và password hoặc sử dụng đăng nhập bằng tài khoản bên thứ ba như Google, Facebook

• Authentication Server tiếp nhận các dữ liệu mà người dùng gửi lên để xác thực Nếu thành công, Authentication Server sẽ tạo một JWT và gửi về cho người dùng thông qua response

• Người dùng nhận được JWT trả về để thực hiện lệnh tiếp theo đối với

• Application Server sẽ xác thực JWT của người dùng trước khi thực hiện yêu cầu từ người dùng

WebSocket là công nghệ hỗ trợ giao tiếp hai chiều giữa client và server Giao thức được sử dụng là TCP (Transmission Control Protocol) để kết nối thông tin trên môi trường internet

1.1.3.2 Ưu, nhược điểm Ưu điểm: Độ trễ thấp và dễ sửa lỗi Thông tin được trả về nhanh chóng được sử dụng trong trong các trường hợp cần thời gian thực như chat, hiển thị biểu đồ hay thông tin chứng khoán Bên cạnh đó, hệ thống không cần nhiều kết nối như long- polling

Nhược điểm: Websocket chưa được hỗ trợ trên tất cả trình duyệt Trong những trường hợp kết nối mạng không ổn định, có thể xảy ra tình trạng mất kết nối đột ngột

Khả năng triển khai khó khăn trong một số môi trường hạn chế về an toàn và quản lý mạng.

Các công nghệ sử dụng ở Frontend

React là một thư viện JavaScript được sử dụng để phát triển xây dựng giao diện trong lập trình ứng dụng Frontend Đặc điểm nổi bật của React là khả năng tái sử dụng code và render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở phía client

Hai khái niệm quan trọng trong React:

+ JSX: React extension hỗ trợ viết các phần tử giống như HTML trực tiếp vào mã nguồn JavaScript

+ Virtual DOM: Nếu không sử dụng React, khi có sự thay đổi trên giao diện thì cây DOM sẽ cập nhật lại cho chính DOM đó Tuy nhiên, đối với những website có xu hướng tương tác nhiều với người dùng thì điều này lại làm ảnh hưởng đến hiệu năng vì toàn bộ cây DOM sẽ phải reload lại mỗi khi người dùng nhấn vào tính năng yêu cầu tải lại trang Nếu sử dụng JSX, React sẽ khởi tạo Virtual DOM (DOM ảo) là bản sao chép của DOM thật trên trang đó, React sử dụng bản copy này để tìm đúng phần cần cập nhật trên DOM thật khi có bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi Việc cập nhật đúng chỗ sẽ giúp tiết kiệm tài nguyên và thời gian xử lý

Phù hợp với đa dạng thể loại website: Việc tạo website sẽ dễ dàng hơn vì không cần phải code nhiều như khi tạo những trang web chỉ dùng HTML và Javascript

Tái sử dụng các Component: Nếu xây dựng các Component đủ tốt, bạn có thể dụng nó cho các yêu cầu dự án khác nhau, chỉ tốn thời gian khi xây dựng Component ban đầu

Sử dụng được cho cả ứng dụng di động: React Native là một framework khác cũng được phát triển bởi Facebook, hỗ trợ chia sẻ các Component hoặc sử dụng lại các

Business Logic có trong ứng dụng

Thân thiện với SEO: React là một thư viện của JavaScript và hiện nay Google

Search Engine đã crawl và index được code của JavaScript hỗ trợ đưa thông tin website lên top đầu tìm kiếm của Google

Debug dễ dàng: Facebook đã phát hành một Chrome Extension dùng trong việc debug của ứng dụng giúp quá trình coding được dễ dàng và nhanh chóng

Redux là một công cụ để quản lý trạng thái có thể dự đoán được cho ứng dụng sử dụng JavaScript hoặc TypeScript Redux hỗ trợ ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau và dễ dàng để kiểm tra Redux sử dụng kiến trúc uni-direction data flow, nghĩa là dữ liệu trong ứng dụng chuyển động theo một hướng duy nhất và từ một nguồn duy nhất

Các ứng dụng ngày càng trở nên phức tạp và có nhiều state hơn, chính vì thế

Redux giúp hỗ trợ quản lý state của ứng dụng Với Redux, state của ứng dụng được lưu trữ tại cùng một nơi gọi là store, và mỗi component đều có thể truy cập vào các state trong store đó

1.2.2.2 Các thành phần của Redux

Store: là các sự kiện mà chúng ta gửi dữ liệu từ ứng dụng đến Redux store

Những dữ liệu có thể là sự tương tác giữa người dùng và ứng dụng, gọi APIs, hoặc cũng có thể là từ việc sử dụng biểu mẫu (form) Redux chỉ dùng một store duy nhất làm Single Source of Truth

Reducer: là hàm xử lý action, lấy state hiện tại của ứng dụng, thực hiện một action và trả về một state mới Các state được lưu như những object và chúng giúp chúng ta xác định được cách thay đổi state của một ứng dụng trong việc phản hồi từ một action được gửi đến store

Actions: Là một javascript object, thực hiện trên một state luôn trả về state mới

Vì thế nên state này có thể dự đoán được Action có một thuộc tính “types” để xác địng loại hành động và có thể chứa dữ liệu bổ sung

Hình 1 5 Các thành phần của Redux [8]

Redux Toolkit là một thư viện của Redux cung cấp một số tiện ích và các quy tắc khi thực hiện Redux Redux Toolkit giúp dễ dàng tiếp cận với những người mới bắt đầu sử dụng Redux và cải thiện hiệu suất dành cho những nhà phát triển có nhiều kinh nghiệm

Redux Toolkit giải quyết một số vấn đề như:

• Việc cấu hình đơn giản hơn so với Redux, không cần cài nhiều gói như

Redux mà hỗ trợ tích hợp sẵn như Redux Devtool, Redux Thunk và

• Redux Toolkit giảm đáng kể số lượng code cần phải viết khi Redux có nhiều đoạn code lặp lại nhiều lần

1.2.4 Các thư viện hỗ trợ khác

Một số thư viện hỗ trợ xây dựng website phía Front-end:

- Axios: là một HTTP client được phát triển dựa trên Javascript Promise, được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js

- dnd-kit: bộ công cụ hỗ trợ kéo thả mạnh mẽ và nhẹ dành cho React, hỗ trợ các tình huống phức tạp như kéo và thả giữa các danh sách

- dayjs: là thư hiện Javascript hỗ trợ xử lý thời gian với cú pháp đơn giản, hỗ trợ đa quốc gia và đa ngôn ngữ

- react-hook-form và yup: hỗ trợ xử lý và thao tác với form một cách thuận tiện và dễ dàng hơn.

- react-color-palette: hỗ trợ xử lý màu sắc cho người dùng tuỳ chỉnh

- react-icons: cung cấp đa dạng các icon

Hình 1 6 Giới thiệu Material-UI [17]

Material UI (hay còn gọi là MUI) là một thư viện mã nguồn mở với các thành phần thư viện người dùng (UI) được xây dựng với ReactJS, triển khai thiết kế dựa trên

MUI cung cấp gần như đầy đủ các thành phần mà trang web cần có Từ nút, hộp thoại cho đến ô nhập liệu, bảng dữ liệu và rất nhiều các thành phần khác với giao diện đẹp, khả năng tùy chỉnh và thích ứng cao Ưu điểm của MUI:

- Các thành phần chuẩn hóa: các thành phần được xây dựng theo chuẩn

Material Design, đảm bảo thống nhất và thẩm mỹ

- Tuỳ chỉnh linh hoạt: MUI cho phép tùy chỉnh các thành phần theo nhu cầu cụ thể của ứng dụng và nhu cầu của người dùng

- Cộng đồng phong phú: được tin sử dụng bơi nhiều tổ chức lớn, có cộng đồng người sử dụng đông đảo, mang lại nhiều khả năng phát triển

Các công nghệ sử dụng ở Backend

Node.js được xây dựng và phát triển từ năm 2009, là một nền tảng được phát triển độc lập dựa trên V8 JavaScript Engine Node.js

Node.js có thể sử dụng trên nhiều nền tảng hệ điều hành khác nhau như Window,

Linux và OS X Node.js cung cấp một thư viện phong phú đa dạng các mô-đun

JavaScript khác nhau giúp đơn giản việc lập trình và tiết kiệm thời gian Ý tưởng chính của Node.js là sử dụng non-blocking, giúp nhanh chóng định tuyến đầu vào / đầu ra dữ liệu theo thời gian thực Node.js sử dụng luồng đơn là Single

Threaded cho phép hỗ trợ nhiều kết nối đồng thời, là giải pháp đối với các web truyền thống sử dụng nguồn tài nguyên kém hiệu quả

1.3.1.2 Kiến trúc của Node.js [5]

Hình 1 7 Kiến trúc Node.js [5]

V8 (Javascript Engine): Một thành phần quan trọng trong Node.js, dùng để biên dịch mã JavaScript thành mã máy mà máy tính có thể hiểu được và chạy được trên

LIBUV: Một thư viện mã nguồn mở của JavaScript, cung cấp vòng lặp sự kiện

(event loop), các API không đồng bộ để xử lý I/O như đọc/ghi file, kết nối mạng,

LIBUV gồm ba thành phần: Event Queue, Event Loop và Thread Pool

+ Event loop: Một thành phần quan trọng trong hệ thống runtime, xử lý các sự kiện và callback trong ứng dụng Node.js Nó cũng điều khiển các tác vụ khác như đọc, ghi từ các I/O, gửi và nhận dữ liệu qua mạng Có hai loại sự kiện trong Event Loop: sự kiện đồng bộ được xử lý ngay lập tức trong event loop và sự kiện bất đồng bộ được đưa vào hàng đợi và sẽ xử lý sau khi sự kiện đồng bộ đã xử lý xong [5]

+ Thread pool: Những luồng riêng biệt độc lập với luồng chính ở Event Loop

Khi yêu cầu từ Event Queue sang Event Loop, nếu các tác vụ thuộc loại tác vụ nặng

(hoạt động xử lý file, các yêu cầu mạng, các hoạt động liên quan đến thời gian) thì chúng sẽ được tải xuống Thread Pool để xử lý Điều này sẽ giúp giảm tải ở Event

Node.js Standard Library: bao gồm các thư viện, chức năng liên quan đến hệ điều hành: setTimeout, fs, http

Ngoài ra trong kiến trúc của Node.js còn có: http-parser, c-ares, OpenSSL, zlib,…

Express.js là một framework được xây dựng trên nền tảng của Node.js, cung cấp các tính năng để phát triển web hoặc xây dựng API Hỗ trợ phát triển ứng dụng theo mô hình MVC, cho phép định nghĩa các middleware, các request methods trong route và hỗ trợ RESTful API [7T]

1.3.2.2 Cách thành phần trong ứng dụng Express.js

Express Application: Một instance của Express framework và chứa tất cả các cài đặt và các middleware cần thiết để xử lý các yêu cầu HTTP

Middleware: Đây là các hàm trung gian dùng để tiền xử lý các request trước khi trả về response cho người dùng Nếu các request thỏa điều kiện thì chương trình chạy tiếp Trong một hàm middleware có 3 tham số: request, response và next() Tham số thứ ba là một NextFucntion khi next() được gọi thì những xử lý phía sau mới được chạy Middleware có thể được dùng để xử lý xác thực, xử lý lỗi, ghi log và nhiều nhiệm vụ khác

Routing: Giúp ứng dụng xác định các yêu cầu từ người dùng đối với các endpoint cụ thể Mỗi route có thể được kết hợp với một hoặc nhiều middleware Một số lựa chọn để thao tác như GET, POST, PUT, PATCH, DELETE,…

Controller: Nhận request và gửi lên server (thông qua models) sau đó trả về response Controller tương tác với cả views và models Một số ứng dụng có thể tách các xử lý các nghiệp vụ tương ứng với các request trong controller thành Service

Models: Đại diện cho đối tượng trong Cơ sở dữ liệu Model tương tác với

Views: Chứa các file/engine template cho ứng dụng Trong Node.js, để render được file HTML ta dùng sendFile() trên đối tượng response Do đó, một số engine template như pug, hbs, jade được sử dụng để hỗ trợ render

NoSQL hay None-Relational SQL là cơ sở dữ liệu được xây dựng dành riêng cho mô hình dữ liệu và có sơ đồ linh hoạt để xây dựng các ứng dụng hiện đại Nó cho phép mở rộng dữ liệu mà không cần khóa ngoại, khóa chính hay kiểm tra tính ràng buộc điều này giúp tăng khả năng xử lý linh hoạt cho các dữ liệu không có cấu trúc hoặc thay đổi thường xuyên

MongoDB là thuộc loại NoSQL, là một cơ sở dữ liệu hướng tài liệu (document), được thiết kế để lưu trữ và truy xuất các tài liệu dưới dạng Document JSON nên mỗi

Collection sẽ có các kích cỡ và các Document khác nhau

Một số thuật ngữ trong MongoDB:

+ Document: Một Document trong MongoDB có cấu trúc như kiểu dữ liệu

JSON, là một tập hợp các key-value, đại diện cho mỗi bản ghi Document có schema động, các Document trong một Collection không nhất thiết phải đồng nhất về các trường hoặc cấu trúc và các trường chung trong Document có thể là các kiểu dữ liệu khác nhau

+ Collection: Là một tập hợp các Document tương tự nhau hoặc có cùng mục đích liên quan, tương đương với Bảng trong hệ quản trị cơ sở dữ liệu quan hệ Một

Collection tồn tại bên trong cơ sở dữ liệu là duy nhất Các Collection không có ràng buộc như các quan hệ giữa các Bảng trong hệ quản trị cơ sở dữ liệu quan hệ nên truy xuất nhanh và linh động

Truy vấn: Đây là tính năng được đánh giá cao nhất, hỗ trợ các trường truy vấn phạm vi, giúp tìm kiếm biểu thức, trả về kết quả tài liệu với kích thước nhất định

Tổng quan về các phương pháp quản lý dự án

Agile là một triết lý để nói về khả năng sáng tạo và thích ứng với những thay đổi nhằm đạt được thành công cuối cùng trong một môi trường không chắc chắn và đầy sự biến động

Agile xuất phát từ lĩnh vực công nghệ và được mô tả bằng 4 giá trị và 12 nguyên lý cốt lõi trong Tuyên ngôn phát triển phần mềm linh hoạt

Agile Software Development là một thuật ngữ chung về tất cả các kỹ thuật và phương pháp phát triển theo Agile Các phương pháp đều hướng tới việc lập kế hoạch thích ứng, phát triển tăng dần, chuyển giao sớm và cải tiến liên tục nhằm thích ứng nhanh trong một môi trường đầy sự thay đổi

Tập trung vào giá trị: Một trong những nguyên tắc cơ bản của Agile chính là

“phần mềm chạy tốt là thước đo của tiến độ” Nguyên tắc này giúp bỏ đi những công việc dư thừa không trực tiếp đem lại giá trị cho sản phẩm Sản phẩm được chia thành nhiều phần, có thể sử dụng được, và phát triển liên tục dựa trên phản hồi của khách hàng

Phát triển lặp đi lặp lại: Khi thực hiện dự án, các phân đoạn sẽ được lặp đi lặp lại theo cách chu kỳ ngắn (Sprint) với mục tiêu hoàn thành một số chức năng được lên kế hoạch thực hiện trong Sprint Trong mỗi Sprint, nhóm phát triển thực hiện đầy đủ các công việc cần thiết như lập kế hoạch, phân tích yêu cầu, thiết kế, triển khai, kiểm thử để có được phần nhỏ của sản phẩm

Hợp tác: Trong nhóm Agile luôn đề cao sự giao tiếp thường xuyên và trực diện hơn là việc trao đổi qua giấy tờ Các nhóm thường ở quy mô nhỏ (từ 3 đến 9 người) giúp đơn giản hóa quá trình giao tiếp và thúc đẩy hợp tác hiệu quả hơn

Phản hồi liên tục: Do các phân đoạn chỉ kéo dài trong thời gian ngắn, việc lập kế hoạch hay có những thay đổi đều có thể được đáp ứng kịp thời Khách hàng và các bên liên quan cùng tham gia vào quá trình phát triển, cung cấp phản hồi liên tục để cải thiện sản phẩm

Cải tiến liên tục: Cuối mỗi Sprint, nhóm phát triển thường cho ra các phần nhỏ của sản phẩm cuối cùng, có khả năng chạy tốt sau quá trình kiểm thử chất lượng và liên tục xem xét và cải thiện quy trình để nâng cao hiệu quả và chất lượng sản phẩm

Theo thời gian, sản phẩm của Agile sẽ phát triển lớn dần, tăng trưởng cho đến khi đạt đủ các trạng thái để phát hành

Hình 1 11 Lợi ích của Agile [13]

Cải thiện chất lượng: Kiểm thử là phần không thể thiếu của giai đoạn Executing

(thực thi) trong dự án giúp đảm bảo đầu ra của sản phẩm đạt chuẩn Agile là vòng lặp liên tục, giúp cho đội nhóm phát triển sau mỗi quy trình và cải thiện phương pháp và chất lượng làm việc

Tăng độ hài lòng khách hàng: Thay vì chỉ tham gia giai đoạn lập kế hoạch

(Planning) thì khách hàng có thể tham gia mọi giai đoạn của dự án Việc đưa ra những đổi dựa trên yêu cầu của khách hàng sẽ giúp tăng độ hài lòng khi trải nghiệm sản phẩm

Kiểm soát dự án: Agile cho phép nhà quản lý phản hồi và kiểm tra chất lượng thông qua các công cụ hay kỹ thuật tiên tiến

Cải thiện khả năng dự đoán của Dự án: Đội ngũ Agile làm việc trong một thời gian ngắn (short period) hay còn gọi là sprint (khoảng 2 tuần) Điều này giúp dễ đo lường, dự đoán các khả năng hơn

Cải thiện khả năng thích ứng của Dự án: Đội ngũ Agile có thể thích ứng với sự thay đổi ngay cả khi nó diễn ra ngay phút chót mà không bị gián đoạn quá nhiều

Giảm thiểu rủi ro: Các nhà phát triển thường xuyên đánh giá tiến độ trong thời gian chạy nước rút, có nghĩa là họ có tầm nhìn tốt hơn về dự án và có thể phát hiện những trở ngại tiềm ẩn một cách nhanh chóng Những vấn đề này có thể được giải quyết trước khi chúng leo tháng, tạo ra một quy trình giảm thiểu rủi ro hiệu quả và mang lại dự án cơ hội thành công cao hơn

Giao tiếp tốt hơn: Đội ngũ Agile thường xuyên duy trì việc họp mặt và giao tiếp trực tiếp, điều này giảm thiểu những hiểu nhầm trong quá trình làm việc

Hình 1 12 Các phương pháp Agile [13]

Scrum: Một phương pháp Agile phổ biến và quan trọng nhất sử dụng cơ chế lặp lại và tăng trưởng với chu kỳ ngắn (Sprint) để tối ưu hóa hiệu quả cũng như kiểm soát rủi ro

Kanban: Một phương pháp Agile tập trung quản lý luồng công việc và hạn chế số lượng công việc đang làm (Work In Progress - WIP) dựa trên phương thức sản xuất của Toyota với bốn nguyên lý: Trực quan hóa công việc, giới hạn công việc đang làm, tập trung vào luồng làm việc, cải tiến liên tục

KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG

Phân tích hiện trạng

Lập kế hoạch và quản lý tiến độ công việc là một phần quan trọng trong quản lý dự án Nó giúp đảm bảo các nhiệm vụ được hoàn thành đúng hạn, sử dụng hiệu quả thời gian và tài nguyên

Thành công của một dự án phụ thuộc vào 80% của việc lập kế hoạch và quản lý công việc Tuy nhiên để quản lý công việc hiệu quả, chúng ta không tránh khỏi những khó khăn trong quá trình quản lý Những khó khăn trong quá trình quản lý công việc có thể kể đến như thiếu sự giao tiếp hiệu quả, mọi người trong nhóm không biết chính xác khi nào cần phải hoàn thành công việc, thiếu nơi để trao đổi trực tiếp những khó khăn, thắc mắc liên quan đến công việc được giao Bên cạnh đó là khó khăn trong kỹ năng làm việc nhóm, nhiều thành viên có thể bị xao lãng khi làm việc nhóm vì tập trung cho những công việc cá nhân, họ khó khăn trong việc ưu tiên đầu việc nào nên làm trước Khó khăn thứ ba là không có một quy trình làm việc hiệu quả, nhóm thiếu quy trình để quan sát tình trạng công việc, phân chia công việc cũng như việc quản lý thành viên Cuối cùng, quản lý thời gian cũng là một khó khăn không chỉ đối với cá nhân mà còn đối với nhóm, mọi người thường gặp khó trong việc cân bằng các nhiệm vụ được giao để hoàn thành đúng tiến độ, khó khăn trong việc theo dõi thời gian, cập nhật tiến độ giữa các nhiệm vụ

Xuất phát từ những khó khăn kể trên và với tốc độ phát triển của công nghệ thông tin, mọi người thường xuyên sử dụng máy tính hay laptop để làm việc nên nhóm chúng em quyết định chọn đề tài “Xây dựng website quản lý công việc” để hỗ trợ mọi người có thể dễ dàng quản lý công việc cá nhân và công việc nhóm

Khảo sát một số phần mềm

- Giới thiệu: Trello là ứng dụng giúp bạn quản lý công việc cá nhân hoặc nhóm

Với Trello bạn có thể tạo được nhiều không gian làm việc, và trong mỗi không gian bạn có thể tạo được nhiều dự án khác nhau Bạn có thể thêm thành viên vào các dự án và tạo bảng, phân chia và theo dõi tiến độ công việc Phần mềm miễn phí với những chức năng cơ bản, để có sử dụng những chức năng nâng cao bạn cần phải trả phí

- Đánh giá ưu và nhược điểm: Ưu điểm Nhược điểm

- Giao diện thân thiện dễ sử dụng, các thao tác không quá phức tạp Bên cạnh đó, Trello cung cấp các mẫu bảng với các chủ đề khác nhau

- Nhiều chức năng miễn phí được cung cấp để người dùng có thể trải nghiệm Với các tính năng nâng cao, mức phí khoảng

5$/tháng đối với cá nhân

- Hỗ trợ theo dõi công việc trực quan,

- Không phân cấp quyền quản trị viên: mọi thành viên đều có thể thực hiện quyền chỉnh sửa hoặc xóa bỏ

- Tương tác giữa các thành viên trong team kém, thiếu không gian trao đổi chung, thao tác bình luận trong từng thẻ cũng chưa thân thiện

- Việc quản lý thời gian trong Trello kém hiệu quả, bạn không biết việc nào làm

44 giúp người dùng nắm bắt được tiến độ công việc

- Khả năng tích hợp lớn khi sử dụng bản trả phí, ngoài ra còn có những tiện ích không giới hạn trước, việc nào làm sau) Muốn tối ưu phải cần trả phí

- Thiếu báo cáo công việc, ứng dụng thiếu phần theo dõi ngay được công việc đã hoàn thành được bao nhiêu % sao với dự kiến

Bảng 2 1 Bảng ưu, nhược điểm Trello 2.2.2 Jira

- Giới thiệu: Jira là một ứng dụng theo dõi và quản lý dự án Ứng dụng được phát triển bởi Atlassian của Australia Một vài tính năng có thể kể đến của Jira như: quản lý và theo dõi tiến độ dự án; quản lý task, bugs, cải tiến tính năng mới hay một vài vấn đề có thể xảy ra; xây dựng quy trình làm việc phù hợp với từng dự án; cung cấp nhiều loại báo cáo thống kê với các loại biểu đồ phù hợp với nhiều đối tượng và dự án khác nhau

- Đánh giá ưu và nhược điểm: Ưu điểm Nhược điểm

- Chức năng phân quyền chi tiết giúp bảo vệ thông tin

- Tích hợp với các hệ thống khác như

- Có nhiều plugin cho phép mở rộng và tích hợp vào Jira

- Khả năng chạy trên hầu hết các phần cứng và hệ điều hành

- Cung cấp nhiều mẫu để có thể áp dụng cho nhiều loại dự án khác nhau

- Chi phí cao nếu có nhu cầu sử dụng cao

- Bước thiết lập ban đầu tốn thời gian và công sức nên không thích hợp cho những dự án vừa và nhỏ

- Nhiều thuật ngữ tiếng anh chuyên môn

- Quy trình làm việc phức tạp yêu cầu người dùng phải tìm hiểu kỹ.

Phân tích yêu cầu dự án

Xây dựng website quản lý công việc trong đó người dùng có thể tạo không gian làm việc, tạo dự án, tạo thẻ công việc, theo dõi tiến độ công việc, thêm thành viên, quản lý thành viên,… Đồng thời hệ thống phải đảm bảo hoạt động ổn định, bảo mật thông tin người dùng, logic xử lý chặt chẽ, dữ liệu đúng và nhất quán, tuân theo các quy chuẩn thiết kế phần mềm và lập trình phổ biến và nâng cao hiện nay Các chức năng chính của hệ thống bao gồm Đối tượng sử dụng Các chức năng thực hiện

- Quản lý thông tin tài khoản

- Thay đổi ảnh đại diện

- Tạo không gian làm việc

Người quản trị không gian làm việc

- Quản lý nhóm quyền trong không gian làm việc: tạo, cập nhật xóa nhóm quyền

- Quản lý thành viên: xóa thành viên, mời thành viên vào không gian làm việc

Thành viên của không gian làm việc

Nếu thành viên được cấp quyền có thể:

- Xem tất cả các dự án của không gian làm việc

- Tham gia vào dự án của không gian làm việc

Quản trị viên dự án

- Quản lý dự án: Cập nhật thông tin dự án, xóa dự án

- Quản lý nhóm quyền dự án: tạo, cập nhật, xóa nhóm quyền

- Quản lý thành viên: Xóa thành viên quản dự án

- Quản lý công việc: tạo, cập nhật, xóa công việc Nếu thành viên được cấp quyền có thể

- Quản lý nhãn công việc: thêm, cập nhật, xóa

- Quản lý cột công việc: thêm, cập nhật, xóa

- Quản lý độ ưu tiên: thêm, cập nhật, xóa

- Quản lý công việc: thêm, cập nhật, xóa

- Quản lý liên kết công việc: thêm, cập nhật, xóa

- Quản lý sprint – chu kỳ nước rút: thêm, cập nhật, xóa

Bảng 2 3 Bảng phân tích yêu cầu dự án 2.3.1 Yêu cầu chức năng

2.3.1.1 Danh sách yêu cầu chức năng nghiệp vụ

- Quản lý không gian làm việc

• Hiển thị dự án theo chế độ truy cập của dự án

• Thực hiện các lựa chọn tạo dự án

• Thực hiện mời thành viên vào không gian làm việc

• Hiển thị danh sách thành viên theo vai trò

• Thực hiện quản lý nhóm quyền không gian làm việc

• Thực hiện quản lý thành viên trong không gian làm việc

• Hiển thị danh sách các thành viên tham gia Dự án

• Thực hiện quản lý thành viên trong Dự án

• Thực hiện quản lý công việc

• Thực hiện quản lý độ ưu tiên

• Thực hiện quản lý loại công việc

• Thực hiện quản lý nhãn công việc

• Thực hiện quản lý loại liên kết công việc

• Thực hiện quản lý sprint – chu kỳ nước rút của Scrum

• Thực hiện quản lý cột công việc

2.3.1.2 Danh sách yêu cầu chức năng hệ thống

- Xác thực người dùng: Hệ thống đảm bảo chỉ người dùng đã xác thực mới có quyền truy cập

- Phân quyền trong việc quản lý không gian làm việc và Dự án

- Quản lý các file phương tiện: Các file hình ảnh hay tài liệu khi đưa vào hệ thống sẽ được kiểm tra, sau đó sẽ sử dụng dịch vụ bên thứ 3 là Google Cloud Storage để lưu trữ và quản lý

- Gửi mã OTP Gmail: Hệ thống dùng dịch vụ là NodeMailer để gửi mã OTP qua

- Lọc, tìm kiếm dữ liệu: Hệ thống sử dụng mongoose giúp việc trả về kết quả với thời gian nhanh và độ chính xác cao

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

- Hệ thống có chức năng bảo mật và phân quyền

- Mật khẩu, thông tin nhạy cảm của người dùng được mã hóa trước khi lưu vào

MÔ HÌNH HÓA YÊU CẦU

Lược đồ Usecase

Hình 3 2 Usecase phần Dự án

Đặc tả Usecase

Mô tả Usecase Usecase cho phép User đăng ký tài khoản

Tiền điều kiện Người dùng chưa có tài khoản trong hệ thống

Thông báo đăng ký thành công Thông tin người dùng lưu vào Cơ sở dữ liệu Chuyển về trang Đăng nhập

Usecase bắt đầu khi người dùng vào Trang xác thực Email

2 Hệ thống kiểm tra định dạng Email

3 Người dùng chọn “Continue” để tiến hành gửi mã OTP xác thực Email

4 Dịch vụ bên thứ ba gửi mã OTP về Email được người dùng nhập

5 Hệ thống hiển thị gửi mã OTP thành công

6 Hệ thống hiển thị trang Nhập mã OTP

7 Người dùng nhập mã OTP

8 Người dùng chọn “Verify” để xác thực OTP

9 Hệ thống kiểm tra mã OTP

10 Hệ thống hiển thị trang Đăng ký thông tin

11 Người dùng nhập “First name”

12 Hệ thống xác thực thông tin “First name” với điều kiện “First name” có ít nhất hai ký tự và nhiều nhất

13 Người dùng nhập “Last name”

14 Hệ thống xác thực thông tin “Last name” với điều kiện “Last name” có ít nhất hai ký tự và nhiều nhất

16 Hệ thống xác thực thông tin “Password”

17 Người dùng nhập “Confirm Password”

18 Hệ thống xác thực thông tin “Confirm Password”

20 Hệ thống xác thực thông tin “Phone” với điều kiện

“Phone” chính xác 10 chữ số

22 Hệ thống xác thực thông tin “Birthdate”

24 Hệ thống xác thực thông tin “Address”

26 Hệ thống lưu thông tin người dùng vào Cơ sở dữ liệu

27 Hệ thống thông báo “Sign up successfully! Please sign in to access.”

28 Hệ thống chuyển đến trang Đăng nhập

26a Hệ thống chuyển đến trang “Welcome”, usecase kết thúc

Luồng ngoại lệ 2b Hệ thống thông báo “Email must be a valid email”.

3b Người dùng quay lại bước 3.

10c Hệ thống thông báo “Invalid code passed Check your inbox”.

11c Người dùng quay lại bước 9 để nhập lại OTP.

12d Hệ thống thông báo “First name must be at least 2 characters” hoặc “First name can have at most 20 characters”.

13d Người dùng quay lại bước 13 để nhập lại “First name”.

14e Hệ thống thông báo “Last name must be at least 2 characters” hoặc “Last name can have at most 20 characters”.

15e Người dùng quay lại bước 15 để nhập lại “Last name”.

18f Hệ thống thông báo “Passwords don’t match”.

20f Người dùng quay lại bước 19 để nhập lại “Confirm password”.

20g Hệ thống thông báo “Phone must have 10 digit number”.

21g Người dùng quay lại bước 21 để nhập lại “Phone”.

22h Hệ thống thông báo “Invalid birthdate”.

23h Người dùng quay lại bước 23 để nhập lại

24i Hệ thống thông báo “Address is required”.

25i Người dùng quay lại bước 25 để nhập lại “Address”.

Bảng 3 1 Đặc tả usecase “Đăng ký”

Usecase cho phép người dùng đăng nhập vào ứng dụng.

Người dùng đã có tài khoản trong hệ thống.

Hậu điều kiện Thông báo đăng nhập thành công

Usecase bắt đầu khi người dùng vào Trang đăng nhập

2 Hệ thống kiểm tra định dạng “Email”

5 Hệ thống kiểm tra thông tin người dùng trong Cơ sở dữ liệu

6 Hệ thống thông báo “Welcome, ”

7 Hệ thống chuyển đến trang Dashboard, usecase kết thúc

Luồng thay thế 1a Người dùng chọn “Login with Google”

2a Hệ thống chuyển sang trang đăng nhập Google

3a Khách hàng đăng nhập tài khoản Google

4a Google gửi thông tin đăng nhập thành công về hệ thống

4a1 Google Auth thông báo đăng nhập thất bại 5a1 Hệ thống chuyển về trang Chào đón, usecase kết thúc

2b Hệ thống thông báo “Must be a valid email”.

3b Người dùng quay lại bước 3 để nhập lại “Email”.

3c Người dùng không nhập “Password”.

5c Hệ thống thông báo “Password is required”.

6c Người dùng quay lại bước 5 để nhập lại “Password”.

6d Hệ thống kiểm tra thấy email và mật khẩu không khớp

7d Hệ thống hiển thị thông báo “Wrong credentials! Please check your email and password.”

8d Người dùng quay lại bước 3 để nhập lại thông tin.

6e Hệ thống kiểm tra thấy email không tồn tại tài khoản nào7e Hệ thống hiển thị thông báo “Email at is not exist Please check your email.”

8e Người dùng quay lại bước 3 để nhập lại thông tin.

7f Hệ thống gặp lỗi, thông báo “Something went wrong! Please try later.”, usecase kết thúc.

Bảng 3 2 Đặc tả usecase “Đăng nhập”

3.2.3 Usecase “Cập nhật thông tin cá nhân”

Tên Usecase Cập nhật thông tin cá nhân

Mô tả Usecase Usecase cho phép người

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống

Hậu điều kiện Thông tin người dùng được cập nhật vào hệ thống thành công

Luồng hoạt động Usecase bắt đầu khi người dùng vào Trang thông tin cá nhân

1 Người dùng chỉnh sửa các thông tin như first name, last name, phone, birthdate, address

2 Hệ thống xác thực định dạng dữ liệu

4 Hệ thống xác thực dữ liệu

5 Hệ thống lưu thông tin vào cơ sở dữ liệu, thông báo cho người dùng cập nhật thông tin thành công, usecase kết thúc

Luồng thay thế 3a Người dùng chọn “Cancel”, usecase kết thúc

Luồng ngoại lệ 2b Hệ thống thông báo dữ liệu không chính xác, người dùng quay lại bước 1 để nhập dữ liệu

4c Hệ thống thông báo dữ liệu không hợp lệ, usecase kết thúc

Bảng 3 3 Đặc tả usecase “Cập nhật thông tin cá nhân”

3.2.4 Usecase “Thay đổi mật khẩu”

Tên Usecase Thay đổi mật khẩu

Mô tả Usecase Usecase cho phép người dùng thay đổi mật khẩu

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống

Hậu điều kiện Mật khẩu người dùng được cập nhật thành công vào Cơ sở dữ liệu

Hệ thống chuyển người dùng về trang Đăng nhập

Luồng hoạt động Usecase bắt đầu khi người dùng vào Trang thay đổi mật khẩu

1 Người dùng nhập “Current password”

2 Hệ thống xác thực dữ liệu “Current password”

3 Người dùng nhập “New password”

4 Hệ thống xác thực dữ liệu “New password”

5 Người dùng nhập “Repeat new password”

6 Hệ thống xác thực dữ liệu “Repeat new password”

8 Hệ thống kiểm tra thông tin

9 Hệ thống lưu thông tin vào Cơ sở dữ liệu

10 Hệ thống thông báo cập nhật mật khẩu thành công, chuyển người dùng về trang Đăng nhập, usecase kết thúc

Luồng ngoại lệ 2b Hệ thống thông báo “Current password” không đúng định dạng

3b Người dùng quay lại bước 1

4c Hệ thống thông báo “New password” không đúng định dạng 5c Người dùng quay lại bước 5

6d Hệ thống thông báo “Repeat new password” không đúng định dạng

7d Người dùng quay lại bước 5

9e Xảy ra lỗi ở quá trình cập nhật thông tin vào Cơ sở dữ liệu, hệ thống thông báo lỗi, usecase kết thúc

Bảng 3 4 Đặc tả usecase “Thay đổi mật khẩu”

3.2.5 Usecase “Tạo Không gian làm việc”

Tên Usecase Tạo Không gian làm việc

Mô tả Usecase Usecase cho phép User tạo Không gian làm việc

Tiền điều kiện Người dùng đã đăng nhập thành công vào hệ thống

Hậu điều kiện Không gian làm việc được tạo

Nhóm Admin Group (Nhóm quản trị viên) và Viewer Group (Nhóm người xem) được tạo

Luồng hoạt động 1 User chọn nút “Add new” trên trang Dashboard

3 Hệ thống hiện form tạo Không gian làm việc

4 User nhập tên Không gian làm việc

6 Hệ thống hiển thị thông báo “Create successfully workspace”

7 Hệ thống chuyển về trang Dashboard, Usecase kết thúc

Luồng thay thế 5a Người dùng chọn “Cancel”

6a Hệ thống ẩn form tạo Không gian làm việc, Usecase kết thúc

Luồng ngoại lệ 4b User để trống tên

5b Hệ thống hiển thị cảnh bảo “Workspace name is required”

6b User quay lại bước 4 để nhập tên Không gian làm việc

6c Hệ thống hiển thị thông báo “Create workspace failed”

Bảng 3 5 Đặc tả usecase "Tạo Không gian làm việc"

3.2.6 Usecase “Mời thành viên vào Không gian làm việc”

Tên Usecase Mời thành viên vào Không gian làm việc

Mô tả Usecase Usecase cho phép người dùng tạo Không gian làm việc

Actor chính Workspace Member (Thành viên trong Không gian làm việc)

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống Người dùng thuộc Admin

Group (Nhóm quản trị viên) hoặc người dùng có quyền mời thành viên

Hậu điều kiện Thư mời gửi thành công đến người dùng được mời

Luồng hoạt động 1 Người dùng vào trang chi tiết của Không gian làm việc

2 Người dùng chọn “Invite new member”

3 Hệ thống hiển thị form mời thành viên

4 Người dùng nhập email thành viên được mời

5 Người dùng chọn quyền mà thành viên được mời sẽ có khi tham gia Không gian làm việc

6 Người dùng chọn “Send invitation”

7 Hệ thống xác thực email thành viên được mời

8 Dịch vụ bên thứ 3 gửi thư mời tham gia vào Không gian làm việc tới email của thành viên được mời

9 Hệ thống thông báo gửi thư mời thành công, usecase kết thúc

Luồng thay thế 6a Người dùng chọn “Cancel”

7a Hệ thống ẩn form mời thành viên, usecase kết thúc

Luồng ngoại lệ 4b Người dùng không nhập email

6b Hệ thống thông báo “Email is required”

7b Người dùng quay lại bước 4 để nhập lại thông tin

8c Dịch vụ Bên thứ ba có lỗi không gửi được email.

9c Hệ thống thông báo “Something went wrong! Please try later.”,

59 usecase kết thúc, usecase kết thúc.

8d Hệ thống gửi thông báo “Account for this email is not exist!”

9d Người dùng quay lại bước 4 để nhập lại thông tin

Bảng 3 6 Đặc tả usecase "Mời thành viên vào Không gian làm việc"

3.2.7 Usecase “Tạo nhóm quyền trong Không gian làm việc”

Tên Usecase Tạo nhóm quyền trong không gian làm việc

Mô tả Usecase Usecase cho phép người dùng tạo Nhóm quyền trong Không gian làm việc

Actor chính Workspace Member (Thành viên trong không gian làm việc)

Group (Nhóm quản trị viên)

Hậu điều kiện Nhóm quyền mới được tạo và có trong danh sách nhóm quyền của

Luồng hoạt động 1 Người dùng vào trang “Permission” của Không gian làm việc

2 Người dùng chọn “Add new”

3 Hệ thống hiển thị form Tạo nhóm quyền

4 Người dùng nhập các thông tin liên quan như tên, mô tả, màu, danh sách thành viên được thêm, các quyền liên quan như quyền quản lý thành viên (mời thành viên), quyền quản lý dự án (tạo dự án)

5 Hệ thống xác thực thông tin

7 Hệ thống thông báo tạo nhóm quyền thành công, usecase kết thúc

Luồng thay thế 6a Người dùng chọn “Cancel” Hệ thống đóng form Tạo nhóm quyền

Luồng ngoại lệ 5b Hệ thống thông báo thông tin không hợp lệ

6b Người dùng quay lại bước 4 để cập nhật lại thông tin

7c Hệ thống thông báo tạo nhóm quyền không thành công, usecase kết thúc

Bảng 3 7 Đặc tả usecase "Tạo nhóm quyền trong Không gian làm việc"

3.2.8 Usecase “Chỉnh sửa nhóm quyền trong Không gian làm việc”

Tên Usecase Chỉnh sửa nhóm quyền trong Không gian làm việc

Mô tả Usecase Usecase cho phép người dùng chỉnh sửa nhóm quyền trong Không gian làm việc

Group (Nhóm quản trị viên) Nhóm quyền quản trị (Admin Group) và nhóm quyền xem (Viewer Group) chỉ được cập nhật các thông

61 tin về danh sách thành viên, mô tả, màu

Hậu điều kiện Thông tin nhóm quyền được cập nhật

Luồng hoạt động 1 Người dùng vào trang “Permission” của Không gian làm việc

2 Người dùng chọn nhóm quyền cần chỉnh sửa

3 Hệ thống hiển thị form Chỉnh sửa nhóm quyền

4 Người dùng cập nhật các thông tin liên quan như tên, mô tả, màu, danh sách thành viên được thêm, các quyền liên quan như quyền quản lý thành viên (mời thành viên), quyền quản lý dự án (tạo dự án)

7 Hệ thống thông báo cập nhật nhóm quyền thành công, usecase kết thúc

7c Hệ thống thông báo Cập nhật thông tin không thành công, usecase kết thúc

Bảng 3 8 Đặc tả usecase “Chỉnh sửa nhóm quyền trong Không gian làm việc”

3.2.9 Usecase “Tạo Dự án nhóm”

Tên Usecase Tạo dự án nhóm

Mô tả Usecase Usecase cho phép người dùng tạo Dự án nhóm

Group (Nhóm quản trị viên) hoặc người dùng có quyền tạo dự án trong Không gian làm việc

Hậu điều kiện Dự án tạo thành công và có trong Không gian làm việc và tạo thành công các thông tin ban đầu trong Dự án gồm: Backlog (Danh sách các việc cần làm), Cột công việc, Loại công việc, Nhóm quyền, Liên kết công việc

Luồng hoạt động 1 Người dùng vào trang “Dashboard”, chọn “Add new”

2 Người dùng chọn “Add project”

3 Hệ thống hiển thị form tạo Dự án nhóm

4 Người dùng nhập các thông tin liên quan gồm: tên (từ 3 đến 30 ký tự), mô tả (từ 3 đến 100 ký tự), loại dự án (kanban hoặc scrum)

5 Hệ thống xác thực thông tin nhập

6 Người chọn “Create project” để tạo Dự án nhóm

7 Hệ thống thông báo tạo Dự án nhóm thành công, usecase kết thúc

Luồng thay thế 1a Người dùng vào trang chi tiết Không gian làm việc

2a Người dùng chọn “Create New”

7b Hệ thống ẩn form tạo Dự án nhóm, usecase kết thúc

Luồng ngoại lệ 5c Hệ thống thông báo thông tin nhập không hợp lệ

6c Người dùng quay lại bước 4 để nhập lại thông tin

7c Hệ thống thông báo tạo dự án không thành công, usecase kết thúc

Bảng 3 9 Đặc tả usecase "Tạo Dự án nhóm"

3.2.10 Usecase “Tạo nhóm quyền trong Dự án”

Tên Usecase Tạo nhóm quyền trong dự án

Mô tả Usecase Usecase cho phép người dùng tạo Nhóm quyền trong Dự án

Actor chính Board Member (Thành viên trong dự án)

Group (Nhóm quản trị viên) hoặc người dùng có quyền tạo Dự án

Hậu điều kiện Nhóm quyền mới được tạo và có trong danh sách nhóm quyền của

Luồng hoạt động 1 Người dùng vào trang “Permission” của Dự án

2 Người dùng chọn “Add new”

3 Hệ thống hiển thị form Tạo nhóm quyền

4 Người dùng nhập các thông tin liên quan như tên, mô tả, màu, danh sách thành viên được thêm, các quyền liên quan như quản lý cột (thêm, sửa, xóa), quản lý công việc (thêm, xóa, sửa), quản lý thành viên (mời thành viên), quản lý loại công việc (thêm, xóa, sửa), quản lý độ ưu tiên (thêm, xóa, sửa), quản lý nhãn công việc (thêm, xóa, sửa)

7 Hệ thống thông báo tạo nhóm quyền thành công, usecase kết thúc

Bảng 3 10 Đặc tả usecase "Tạo nhóm quyền trong Dự án"

3.2.11 Usecase “Chỉnh sửa nhóm quyền trong Dự án”

Tên Usecase Chỉnh sửa nhóm quyền trong Dự án

Mô tả Usecase Usecase cho phép người dùng chỉnh sửa nhóm quyền trong Dự án

Group (Nhóm quản trị viên) Nhóm quyền quản trị (Admin Group) và nhóm quyền xem (Viewer Group) của Dự án chỉ được cập nhật các thông tin về danh sách thành viên, mô tả, màu

Hậu điều kiện Thông tin nhóm quyền được cập nhật

Luồng hoạt động 1 Người dùng vào trang “Permission” của Dự án

2 Người dùng chọn nhóm quyền cần chỉnh sửa

3 Hệ thống hiển thị form Chỉnh sửa nhóm quyền

4 Người dùng cập nhật các thông tin liên quan như tên, mô tả, màu, danh sách thành viên được thêm, các quyền liên quan như quản lý cột (thêm, sửa, xóa), quản lý công việc (thêm, xóa, sửa), quản lý thành viên (mời thành viên), quản lý loại công việc (thêm, xóa, sửa), quản lý độ ưu tiên (thêm, xóa, sửa), quản lý nhãn công việc (thêm, xóa, sửa)

7 Hệ thống thông báo cập nhật thông tin thành công, usecase kết thúc

Luồng thay thế 6a Người dùng chọn “Cancel” Hệ thống đóng form Tạo nhóm quyền Luồng ngoại lệ 5b Hệ thống thông báo thông tin không hợp lệ

7c Hệ thống thông báo Cập nhật thông tin không thành công, usecase kết thúc

Bảng 3 11 Đặc tả usecase "Chỉnh sửa nhóm quyền trong Dự án"

3.2.12 Usecase “Tạo Sprint – Phân đoạn nước rút trong Scrum”

Tên Usecase Tạo Sprint – Phân đoạn nước rút trong Scrum

Mô tả Usecase Usecase cho phép người dùng tạo Sprint

Actor chính Board Member (Thành viên trong Dự án)

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền tạo Sprint

Dự án là loại dự án Scrum

Hậu điều kiện Sprint mới được thêm vào dự án

Luồng hoạt động Usecase bắt đầu khi người dùng vào trang Backlog của Dự án

1 Người dùng chọn “Add Sprint”

2 Hệ thống hiển thị form tạo Sprint,

3 Người dùng nhập các thông tin gồm: tên (từ 2 đến 50 ký tự), khoảng thời gian (1 tuần, 2 tuần, 3 tuần, 4 tuần hoặc tùy chỉnh), ngày bắt đầu, ngày kết thúc và mục tiêu

4 Người dùng chọn nút “Add”

6 Hệ thống thông báo thêm Sprint thành công

Luồng ngoại lệ 6b Hệ thống thông báo thêm Sprint không thành công, usecase kết thúc

Bảng 3 12 Đặc tả usecase "Tạo Sprint"

3.2.13 Usecase “Chỉnh sửa Sprint – Phân đoạn nước rút trong Scrum”

Tên Usecase Chỉnh sửa Sprint – Phân đoạn nước rút trong Scrum

Mô tả Usecase Usecase cho phép người chỉnh sửa Sprint

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền chỉnh sửa Sprint Dự án là loại dự án Scrum

Hậu điều kiện Thông tin Sprint được cập nhật

Luồng hoạt động Usecase bắt đầu khi người dùng vào trang Backlog của Dự án

1 Người dùng chọn Sprint cần chỉnh sửa

2 Hệ thống hiển thị form chỉnh sửa Sprint,

3 Người dùng cập nhật các thông tin gồm: tên (từ 2 đến 50 ký tự), khoảng thời gian (1 tuần, 2 tuần, 3 tuần, 4 tuần hoặc tùy chỉnh), ngày bắt đầu, ngày kết thúc và mục tiêu

4 Người dùng chọn nút “Save”

6 Hệ thống thông báo chỉnh sửa Sprint thành công

Luồng ngoại lệ 6b Hệ thống thông báo chỉnh sửa Sprint không thành công, usecase kết thúc

Bảng 3 13 Đặc tả usecase "Chỉnh sửa Sprint"

3.2.14 Usecase “Thêm loại công việc trong Dự án”

Tên Usecase Thêm loại công việc trong Dự án

Mô tả Usecase Usecase cho phép người dùng thêm loại công việc trong dự án

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền thêm loại công việc

Hậu điều kiện Danh sách loại công việc trong dự án được cập nhật

Luồng hoạt động Usecase bắt đầu khi người dùng vào trang “Data Setting” của Dự án

1 Người dùng chọn mục “Issue Type” (Loại công việc)

2 Hệ thống hiển thị danh sách các loại công việc

3 Người dùng chọn “Add” để thêm loại công việc

5 Hệ thống hiển thị form tạo loại công việc

6 Người dùng nhập các thông tin gồm: tên, mô tả, biểu tượng, phân cấp

8 Hệ thống kiểm tra thông tin nhập

9 Hệ thống thông báo tạo loại công việc thành công, danh sách công việc được cập nhật

Luồng ngoại lệ 8b Hệ thống thông báo thông tin nhập không hợp lệ

9c Hệ thống thông báo tạo loại công việc không thành công, usecase kết thúc

Bảng 3 14 Đặc tả usecase “Thêm loại công việc”

3.2.15 Usecase “Cập nhật loại công việc trong Dự án”

Tên Usecase Cập nhật loại công việc trong Dự án

Mô tả Usecase Usecase cho phép người dùng cập nhật loại công việc trong Dự án

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền cập nhật loại công việc

Hậu điều kiện Danh sách loại công việc trong dự án được cập nhật

1 Người dùng chọn mục “Issue Type” (Loại công việc)

2 Hệ thống hiển thị danh sách các loại công việc

3 Người dùng chọn biểu tượng chỉnh sửa trên loại công việc muốn cập nhật

5 Hệ thống hiển thị form cập nhật loại công việc

6 Người dùng nhập các thông tin gồm: tên, mô tả, biểu tượng, phân cấp

9 Hệ thống thông báo cập nhật loại công việc thành công, danh sách công việc được cập nhật

9c Hệ thống thông báo cập nhật loại công việc không thành công, usecase kết thúc

Bảng 3 15 Đặc tả usecase “Cập nhật loại công việc”

3.2.16 Usecase “Thêm độ ưu tiên trong Dự án”

Tên Usecase Thêm độ ưu tiên trong Dự án

Mô tả Usecase Usecase cho phép người dùng thêm độ ưu tiên trong dự án

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền thêm độ ưu tiên

Hậu điều kiện Danh sách độ ưu tiên trong dự án được cập nhật

1 Người dùng chọn mục “Priority” (Độ ưu tiên công việc)

2 Hệ thống hiển thị danh sách độ ưu tiên

3 Người dùng chọn “Add” để thêm độ ưu tiên

5 Hệ thống hiển thị form tạo độ ưu tiên

6 Người dùng nhập các thông tin gồm: tên, mô tả, màu sắc

9 Hệ thống thông báo tạo độ ưu tiên thành công, danh sách công việc được cập nhật

9c Hệ thống thông báo tạo độ ưu tiên không thành công, usecase kết thúc

Bảng 3 16 Đặc tả usecase "Thêm độ ưu tiên"

3.2.17 Usecase “Cập nhật độ ưu tiên trong Dự án”

Tên Usecase Cập nhật độ ưu tiên trong Dự án

Mô tả Usecase Usecase cho phép người dùng cập nhật độ ưu tiên trong Dự án

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền cập nhật độ ưu tiên

Hậu điều kiện Danh sách độ ưu tiên trong dự án được cập nhật

1 Người dùng chọn mục “Priority” (Loại công việc)

2 Hệ thống hiển thị danh sách các độ ưu tiên

3 Người dùng chọn biểu tượng chỉnh sửa trên độ ưu tiên muốn cập nhật

5 Hệ thống hiển thị form cập nhật độ ưu tiên

6 Người dùng nhập các thông tin gồm: tên, mô tả, màu sắc

9 Hệ thống thông báo cập nhật độ công việc thành công, danh sách độ ưu tiên được cập nhật

9c Hệ thống thông báo cập nhật độ ưu tiên không thành công, usecase kết thúc

Bảng 3 17 Đặc tả usecase “Cập nhật độ ưu tiên”

3.2.18 Usecase “Tạo loại liên kết công việc trong Dự án”

Tên Usecase Tạo loại liên kết công việc trong Dự án

Mô tả Usecase Usecase cho phép người dùng toại loại liên kết công việc trong dự án

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người dùng là quản trị viên của dự án (Admin group) hoặc người dùng có quyền thêm loại liên kết công việc

Hậu điều kiện Danh sách liên kết công việc trong dự án được cập nhật

1 Người dùng chọn mục “Issue Link Type” (Loại liên kết công việc)

2 Hệ thống hiển thị danh sách loại liên kết công việc

3 Người dùng chọn “Add” để thêm loại liên kết công việc

5 Hệ thống hiển thị form tạo loại liên kết công việc

THIẾT KẾ PHẦN MỀM

Thiết kế cơ sở dữ liệu

Hình 4 1 Lược đồ ERD 4.1.2 Chi tiết bảng dữ liệu

STT Thuộc tính Kiểu Ý nghĩa Ghi chú

1 _id ObjectId Mã người dùng Khóa chính

3 lastName String Họ, tên đệm

4 email String Email người dùng

6 phone String Số điện thoại

8 avatar String Ảnh đại diện

9 passwordChangedAt Date Ngày thay đổi mật khẩu

10 refreshToken String Mã làm mới

11 profileLogin Object Thông tin đăng nhập

12 providerToken Object Thông tin nhà cung cấp đăng nhập

13 isActive Boolean Biến xác định tài khoản kích hoạt

15 updatedAt Date Ngày chỉnh sửa gần đây

Bảng 4 1 Bảng User 4.1.2.2 Bảng Schedule

1 _id ObjectId Mã lịch biểu Khóa chính

3 color String Màu lịch biểu

4 type String Loại lịch biểu

5 isActive Boolean Biến xác định tài khoản kích hoạt

Bảng 4 2 Bảng Schedule 4.1.2.3 Bảng OTP

1 _id ObjectId Mã OTP Khóa chính

4 expireAt Date Thời gian hết hạn

Bảng 4 3 Bảng OTP 4.1.2.4 Bảng EmailVerification

3 isVerified Boolean Biến xác thực email xác minh

4 isActive Boolean Biến xác thực còn tồn tại

Bảng 4 4 Bảng EmailVerification 4.1.2.5 Bảng Notification

3 targetType String Mục tiêu thông báo

4 message String Nội dung thông báo

5 type String Loại thông báo

6 contextUrl String Đường dẫn của thông báo

8 isRead Boolean Biến nhận biết thông

9 isTrash Boolean Biến nhận biết thông đã xóa

Bảng 4 5 Bảng Notification 4.1.2.6 Bảng Invitation

1 _id ObjectId Mã thư mời Khóa chính

Mã không gian làm việc

5 status String Trạng thái thư mời

Mã nhóm quyền Không gian làm việc

Bảng 4 6 Bảng Invitation 4.1.2.7 Bảng Workspace

1 _id ObjectId Mã không gian làm việc

2 name String Tên không gian làm việc

Người chủ không gian làm việc

Thành viên không gian làm việc

Bảng 4 7 Bảng Workspace 4.1.2.8 Bảng WorkspacePermission

1 _id ObjectId Mã nhóm quyền không gian làm việc

2 name String Tên nhóm quyền không gian làm việc

7 board Object Quyền quản lý

8 member Object Quyền quản lý thành viên (Mời)

9 isWSAdmin Boolean Biến xác định nhóm quyền quản trị

10 isWSViewer Boolean Biến xác định nhóm quyền xem

Bảng 4 8 Bảng WorkspacePermission 4.1.2.9 Bảng Board

1 _id ObjectId Mã Dự án Khóa chính

3 title String Tên dự án

4 key String Khóa dự án

7 template String Loại dự án

8 columnOrderIds ObjectIds[], Ref(Column) Danh sách thứ tự cột công việc

9 ownerId String Chủ sở hữu Dự án

10 memberIds ObjectId[], Ref(User) Thành viên Dự án

11 dueDate Date Ngày đến hạn dự án

12 defaultAssigneeId ObjectId, Ref(User) Thành viên mặc định được gán công việc

13 initColumnId ObjectId, Ref(Column) Cột công việc mặc định

14 nextAutoIncrement Int Số đếm của thẻ công việc

15 workingDays Int[] Ngày làm việc trong tuần

1 _id ObjectId Mã Cột công việc

2 boardId ObjectId, Ref(Board) Mã Dự án

3 title String Tên cột công việc

5 cardOrderIds ObjectIds[] Thứ tự công việc

6 isResolved Boolean Biến xác định công việc hoàn thành

Bảng 4 10 Bảng Column 4.1.2.11 Bảng IssueType

1 _id ObjectId Mã Cột công việc

3 name String Tên loại công việc

4 cardOrderIds ObjectIds[] Thứ tự công việc

6 creatorID ObjectId, Ref(User) Người tọa sprint

7 startDate Date Ngày bắt đầu

8 endDate Date Ngày dự kiến kết thúc

9 goal String Mục tiêu của sprint

11 dailyStoryPoints Object Số điểm đánh giá ghi lại hàng ngày

12 actualCompleteDate Date Ngày kết thúc thực tế

Bảng 4 11 Bảng IssueType 4.1.2.12 Bảng IssueLinkType

1 _id ObjectId Mã loại liên kết

3 name String Tên loại liên kết

4 inwardName String Tên mối quan

5 outwardName String Tên mối quan hệ bổ trợ liên kết

Bảng 4 12 Bảng IssueLinkType 4.1.2.13 Bảng IssueLink

1 _id ObjectId Mã liên kết Khóa chính

3 sourceIssue ObjectId, Ref(Epic | Card |

Mã công việc liên kết

4 targetIssue ObjectId, Ref(Epic | Card |

Mã công việc được liên kết

Bảng 4 13 Bảng IssueLink 4.1.2.14 Bảng TaskLog

1 _id ObjectId Mã thay đổi công việc

2 userId ObjectId, Ref(User) Người thực thi thay đổi

3 target String Thành phần được thay đổi

4 msg String Nội dung thay đổi

5 oldVal String Giá trị trước khi thay đổi

6 newVal String Giá trị sau khi thay đổi

7 issueModel String Loại phân cấp công việc

8 issueId ObjectId, Ref(Epic | Card |

Bảng 4 14 Bảng TaskLog 4.1.2.15 Bảng Epic

3 name String Tên công việc lớn

6 dueDate Date Ngày kết thúc

7 cardOrderIds ObjectId[], Ref(Card) Thứ tự danh sách công việc

10 columnId ObjectId, Ref(Column) Mã cột công việc

11 assigneeId ObjectId, Ref(User) Mã người đảm nhận

12 labelId ObjectId, Ref(Label) Mã nhãn công việc

13 comments Object[] Danh sách bình luận

14 attachments Object[] Danh sách tệp đính kèm

15 issueTypeId ObjectId, Ref(IssueType) Mã loại công việc

16 priorityId ObjectId, Ref(Priority) Mã độ ưu tiên

20 issueTag String Thẻ công việc

6 endDate Date Ngày kết thúc

7 subCardIds ObjectId[], Ref(Card) Thứ tự danh sách công việc con

11 memberId ObjectId, Ref(User) Mã người đảm nhận

13 comments Object[] Danh sách bình luận

14 attachments Object[] Danh sách tệp đính kèm

21 sprintId ObjectId, Ref(Sprint) Mã Sprint

22 epicId ObjectId, Ref(Epic) Mã epic

23 reporterId ObjectId, Ref(User) Người tạo công việc

24 resolvedAt Date Ngày hoàn thành công việc

25 storyPoint Int Điểm đánh giá công việc

26 watcherIds ObjectIds, Ref(User) Nhóm người được thông báo liên quan tới công việc

Bảng 4 16 Bảng Card 4.1.2.17 Bảng SubCard

6 endDate Date Ngày kết thúc

8 assignTo ObjectId, Ref(User) Mã người đảm nhận

15 reporterId ObjectId, Ref(User) Người tạo công việc

Bảng 4 17 Bảng SubCard 4.1.18 Bảng Sprint (Dành cho dự án Scrum)

1 _id ObjectId Mã sprint Khóa chính

5 icon String Biểu tượng loại công việc

6 hierarchy Int Phân cấp loại công việc

Bảng 4 18 Bảng Sprint 4.1.2.19 Bảng BoardPermission

1 _id ObjectId Mã sprint Khóa chính

3 name String Tên nhóm quyền Dự án

6 memberIds ObjectId[], Ref(User) Thành viên trong nhóm quyền

7 column Object Quyền quản lý cột công việc (Thêm, sửa xóa)

8 card Object Quyền quản lý công việc (Thêm, sửa,

9 member Object Quyền quản lý thành viên (Thêm)

10 issueType Object Quyền quản lý loại công việc (Thêm, sửa, xóa)

11 priortiry Object Quyền quản lý độ ưu tiên (Thêm, sửa, xóa)

12 label Object Quyền quản lý nhãn (Thêm, sửa, xóa)

13 sprint Quyền quản lý sprint (Thêm, sửa, xóa)

14 epic Object Quyền quản lý công việc lớn (Thêm, sửa, xóa)

15 issueLinkType Object Quyền quản lý loại liên kết (Thêm, sửa, xóa)

16 report Object Quyền quản lý báo cáo (Tạo)

17 isAdmin Boolean Biến xác định nhóm quyền

18 isViewer Boolean Biến xác định nhóm quyền xem

Bảng 4 19 Bảng BoardPermission 4.1.2.20 Bảng Label

Lược đồ tuần tự

4.2.3 Cập nhật thông tin cá nhân

Hình 4 4 SD Cập nhật thông tin cá nhân

Hình 4 5 SD Thay đổi mật khẩu

4.2.5 Tạo không gian làm việc

Hình 4 6 SD Tạo không gian làm việc

4.2.6 Mời thành viên vào không gian làm việc

Hình 4 7 SD Mời thành viên vào không gian làm việc

4.2.7 Tạo nhóm quyền trong không gian làm việc

Hình 4 8 SD Tạo nhóm quyền Không gian làm việc

4.2.8 Cập nhật nhóm quyền không gian làm việc

Hình 4 9 SD Cập nhật nhóm quyền không gian làm việc

Hình 4 10 SD Tạo dự án nhóm 4.2.10 Tạo nhóm quyền trong Dự án

Hình 4 11 SD Tạo nhóm quyền trong Dự án

4.2.11 Cập nhật nhóm quyền trong Dự án

Hình 4 12 SD Cập nhật nhóm quyền Dự án

4.2.12 Tạo sprint – chu kỳ nước rút trong Scrum

4.2.13 Cập nhật sprint – chu kỳ nước rút trong Scrum

Hình 4 14 SD Cập nhật sprint

Hình 4 15 SD Thêm loại công việc

4.2.15 Cập nhật loại công việc

Hình 4 16 SD Cập nhật loại công việc

Hình 4 17 SD Thêm độ ưu tiên

4.2.17 Cập nhật độ ưu tiên

Hình 4 18 SD Cập nhật độ ưu tiên

Hình 4 19 SD Tạo loại liên kết

4.2.19 Cập nhật loại liên kết

Hình 4 20 SD Cập nhật loại liên kết

Hình 4 21 SD Thêm cột công việc

4.2.21 Di chuyển cột công việc

Hình 4 22 SD Di chuyển cột công việc

4.2.22 Thêm công việc vào cột

Hình 4 23 SD Thêm công việc vào cột

Hình 4 24 SD Cập nhật công việc

THIẾT KẾ VÀ XỬ LÝ GIAO DIỆN

Giao diện Trang Đăng nhập

Hình 5 1 Giao diện Trang Đăng nhập

STT Tên Loại Ghi chú

1 Email Input text Nhập email

2 Password Input text Nhập mật khẩu

3 Forgot password Button Khi nhấn vào sẽ chuyển đến Trang Xác thực email

4 Sign in Button Nút đăng nhập

5 Sign in with Google Button Nút đăng nhập với

6 Sign up now Button Khi nhấn vào sẽ chuyển đến Trang Xác thực email

Bảng 5 1 Mô tả giao diện Trang Đăng nhập

Giao diện Trang Xác thực email

Hình 5 2 Giao diện Trang Xác thực email

1 Email Input text Nhập email

2 Continue Button Khi nhấn vào sẽ chuyển tới Trang Xác thực OTP

3 Login Button Khi nhấn vào sẽ chuyển đến Trang Đăng nhập

Giao diện Trang Đăng ký

Hình 5 3 Giao diện Trang Đăng ký

1 First name Input text Nhập tên

2 Last name Input text Nhập họ và tên đệm

3 Password Input text Nhập mật khẩu

4 Repeat Password Input text Nhập mật khẩu xác nhận

5 Phone Input text Nhập số điện thoại

6 Birthday Date Picker Chọn ngày sinh

7 Address Input text Nhập địa chỉ

8 Cancel Button Khi nhấn sẽ chuyển về

9 Submit Button Nút đăng ký

Giao diện Trang Khôi phục mật khẩu

Hình 5 4 Giao diện Trang Khôi phục mật khẩu

1 OTP Input text Nhập OTP

2 New password Input text Nhập mật khẩu mới

3 Repeat new password Input text Nhập mật khẩu xác nhận

4 Cancel Button Nhấn vào sẽ chuyển về

5 Reset password Button Nút Khôi phục mật khẩu

Giao diện Trang Tổng quan

Hình 5 5 Giao diện Trang Tổng quan

1 Novertask Button Nhấn vào sẽ chuyển đến

2 Pin Button Thay đổi phần của cố định của sidebar

3 Dashboard Button Nhấn vào sẽ chuyển đến

4 Workspace list Button Nhấn sẽ hiện danh sách không gian làm việc

5 My task Button Nhấn vào sẽ chuyển đến

Trang Công việc cá nhân

6 FAQs Button Nhấn vào sẽ chuyển đến

Trang Hỗ trợ người dùng

7 Settings Button Nhấn vào sẽ chuyển đến

8 Profile Button Nhấn vào sẽ chuyển đến

Trang Thông tin cá nhân

9 Sign out Button Nút đăng xuất

10 Search Input text Nhập tên dự án

Nút hiển thị các tùy chọn: tạo không gian làm việc, tạo dự án, tạo công việc

12 Add workspace Button Nút tạo không gian làm việc

13 Add project Button Nút tạo dự án

14 Add task Button Nút tạo công việc

Nhấn vào sẽ chuyển đến Trang không gian làm việc

16 Project card Card Nhấn vào Trang Dự án

Nhấn vào hiển thị các lựa chọn cho không gian làm việc

18 Grid view Button Chọn chế độ hiển thị lưới

19 List view Buttonq Chọn chế độ hiển thị danh sách

Bảng 5 5 Mô tả giao diện Trang Tổng quan

Giao diện Trang Không gian làm việc

Hình 5 6 Giao diện Trang Không gian làm việc

Nhấn vào sẽ chuyển đến Trang Không gian làm việc

2 Workspace icon Button Nhấn vào chuyển đến

Nhấn vào sẽ chuyển đến Trang Thành viên không gian làm việc

Hiển thị số lượng dự án trong không gian làm việc

5 Create new Button Nút tạo dự án

6 Workspace options Button Nút tùy chỉnh không gian làm việc

Nhấn vào sẽ chuyển đến trang Thành viên không gian làm việc

8 Member count Label Hiển thị số lượng thành viên không gian làm việc

Hiển thị số lượng quản trị viên của không gian làm việc

10 Member avatars Avatar group Hiển thị số lượng thành viên không gian làm việc

11 Invite new people Button Nút mời thành viên vào không gian làm việc

12 Search project Input text Tìm kiếm dự án

13 Project grid view Button Hiển thị dự án theo dạng lưới

14 Project list view Button Hiển thị dự án theo dạng danh sách

15 Project card Card Nhấn vào sẽ chuyển đến

16 Project option Button Hiển thị tùy chọn cho dự án

Bảng 5 6 Mô tả giao diện Trang Không gian làm việc

Giao diện Quản lý thành viên Không gian làm việc

Hình 5 7 Giao diện Trang quản lý thành viên không gian làm việc

Nhấn vào sẽ là danh sách của từng quyền trong Không gian làm việc

2 Invite more member Button Mời thành viên vào

Hiển thị thông tin cơ bản của thành viên như ảnh, tên, mail, vai trò và các thao tác quản lý thành viên nếu là SuperAdmin

4 Assign Workspace member to Admin Workspace Button

Gán quyền Admin Workspace chỉ hiện đối với Super Admin

Xóa thành viên ra khỏi Không gian làm việc (chỉ hiển thị đối với

Bảng 5 7 Mô tả giao diện Trang quản lý thành viên không gian làm việc

Giao diện Trang tạo không gian làm việc

Hình 5 8 Giao diện Trang tạo không gian làm việc

1 Workspace name Input Text Nhập tên Không gian làm việc

2 Create workspace Button Tạo Không gian làm việc

3 Cancel Button Thoát thao tác tạo Không gian làm việc

Giao diện Trang Mời thành viên vào Không gian làm việc

Hình 5 9 Giao diện trang mời thành viên

1 User email address Input Text Nhập email thành viên muốn mời

2 Send invitation Button Nút mời thành viên vào

Nút thoát thao tác mời thành viên vào Không gian làm việc

4 Current members List Danh sách thành viên hiện tại

Giao diện Trang thêm thành viên vào Dự án

Hình 5 10 Giao diện Trang thêm thành viên vào dự án

1 Member name input Input Text Nhập tên thành viên muốn thêm

2 Select box Check box Tick chọn thành viên muốn thêm

3 Member list Lisy Danh sách thành viên trong Không gian làm

4 Total member Label Số lượng thành viên được chọn

5 Add Button Nút thêm thành viên vào

6 Cancel Button Nút hủy thao tác thêm thành viên vào Dự án

Bảng 5 10 Mô tả giao diện Trang thêm thành viên vào dự án

Giao diện Trang Chi tiết dự án

Hình 5 11 Giao diện Trang Chi tiết dự án

1 Cover Image Ảnh bìa Không gian làm việc

2 Show cover Button Nút ẩn/hiện ảnh bìa

3 Board name Label Tên Dự án

4 Mode Label Chế độ hiển thị

5 Board description Label Mô tả Dự án

6 Category Tab Tab Loại hiển thị dự án

7 Column List Danh sách công việc

9 Card members Avatar group Danh sách thành viên được gán công việc

10 Card priority Label Độ ưu tiên của công việc

11 Card Id Label Mã công việc

12 Card name Label Tên công việc

13 Card due date Label Thời hạn công việc

14 Add card Button Thêm công việc

15 Add column Button Thêm danh sách công việc

16 Invite Button Nút thêm thành viên vào dự án

17 Board Members Avatar Group Danh sách thành viên dự án

18 Board Name Input Input text Nhập tên dự án

19 Workspace Label Tên Không gian làm việc của dự án

20 Board due date Input text Thời hạn của dự án

21 Mode selects Radio Button Thay đổi chế độ hiển thị dự án

22 Board description input Input text Mô tả dự án

23 Board owner Label Chủ sở hữu dự án

24 Search input Input text Tìm kiếm công việc

Bảng 5 11 Mô tả giao diện Trang Chi tiết dự án

Giao diện Trang Chi tiết công việc

Hình 5 12 Giao diện Trang Chi tiết công việc

1 Breadcrum Button Đường dẫn đến Công việc hiện tại

2 Link to card Button Nút sao chép đường dẫn đến Công việc hiện tại

3 Cover Image Ảnh bìa của Công việc

4 Delete cover Button Xóa ảnh bìa của Công việc

5 Edit cover Button Chỉnh sửa ảnh bìa của

6 Card name Input text Tên Công việc

7 Card description Input text Mô tả Công việc

8 Add subcard Button Thêm công việc con

9 Subcard Subcard Công việc con

10 Link to subcard Button Nút sao chép đường dẫn

138 đến công việc con hiện tại

11 Subcard Assignee Select Thành viên được gán cho công việc con

12 Subcard status Select Tình trạng thực hiện của công việc con

13 Card owner Group Người tạo Công việc

14 Add assignee Button Thêm thành viên cho

15 Assignee Avatar group Thành viên của Công việc

Ngày tới hạn của Công việc

17 Priority Select Độ ưu tiên của công việc

18 Edit label Button Mở popup chỉnh sửa label của Công việc

19 Label Label Nhãn được gán cho Công việc

20 More Button Các thao tác khác trên

21 Close Button Đóng trang Chi tiết Công việc

Bảng 5 12 Mô tả giao diện Trang Chi tiết công việc

Giao diện Trang thêm thành viên vào công việc

Hình 5 13 Giao diện Trang thêm thành viên vào công việc

1 Assignee Popup Popup Cửa sổ thêm thành viên vào Công việc

2 Close Button Đóng popup thêm thành viên

3 Member Group Thành viên hiện tại trong

4 Check icon Icon Đánh dấu thành viên đã được thêm vào Công việc

5 Add Button Thêm thành viên vào

Bảng 5 13 Giao diện Trang thêm thành viên vào công việc

Giao diện Thêm/chỉnh sửa nhãn công việc

Hình 5 14 Giao diện Thêm/chỉnh sửa nhãn công việc

Hình 5 15 Giao diện Thêm/chỉnh sửa nhãn công việc

1 Label Popup Popup Cửa sổ Thêm/chỉnh nhãn cho Công việc

2 Back Button Quay về giao diện chọn nhãn

3 Close Button Đóng popup thêm/chỉnh nhãn

4 Preview Label Label Xem trước nhãn công việc

5 Label text Input text Chỉnh sửa nội dung của nhãn

6 Custom mode Switch Chuyển sang chế độ tuỳ chỉnh màu

7 Color group Group Các màu được cung cấp sẵn trong hệ thống

8 Color Color Màu cho nhãn

9 Add color Button Chuyển sáng chế độ tuỳ chỉnh màu

10 Cancel Button Huỷ thêm/chỉnh sửa nhãn

11 Save Button Lưu nhãn đã thêm/ chỉnh sửa

12 Color picker Color picker Chọn màu theo ý thích

13 Color hue Progress bar Chỉnh màu của color picker

14 Color transparency Progress bar Chỉnh độ trong suốt của màu sắc

15 Color hex Input text Nhập mã màu (hệ HEX)

16 Color RGB Input text Nhập mã màu (hệ RGB)

Bảng 5 14 Mô tả giao diện Thêm/chỉnh sửa nhãn công việc

Giao diện Thêm nhóm quyền dự án

Hình 5 16 Giao diện Thêm nhóm quyền dự án

1 Permission title Input text Tên nhóm quyền

2 Permission color Button Màu nhóm quyền

3 Permission description Input text Mô tả nhóm quyền

4 Add user Button Thêm thành viên

5 Permission group Checkbox Các quyền trong nhóm

6 Transition Button Di chuyển giữa các cột

7 Cancel button Button Hủy thao tác

8 Save button Button Thêm nhóm quyền

Bảng 5 15 Mô tả giao diện Thêm nhóm quyền trong dự án

Giao diện quản lý loại công việc

Hình 5 17 Giao diện Quản lý loại công việc

1 Issue type title Label Tên loại dữ liệu

2 Sort Button Sắp xếp (tăng, giảm)

3 Column Cell Cột dữ liệu

4 Data Cell Cell Ô dữ liệu

5 Search input Input Ô tìm kiếm

6 New button Button Nút tạo dữ liệu

7 Refresh button Button Làm mới dữ liệu

8 Edit button Button Nút chỉnh sửa

9 Delete button Button Nút xóa

Bảng 5 16 Bảng mô tả giao diện Quản lý loại công việc

CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG

Kiểm thử hệ thống

3 Đối tượng nghiên cứu đề tài

Ưu điểm và nhược điểm

4 Đề nghị cho bảo vệ hay không?

TP Hồ Chí Minh, ngày tháng năm 2024

(Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XHCN VIỆT NAM Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Hoàng Vũ Trường Giang MSSV 1: 20110237

Họ và tên Sinh viên 2: Lê Duy Khiêm MSSV 2: 20110661

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website Quản lý công việc với công nghệ MERN Stack

Họ và tên giảng viên hướng dẫn: ThS Nguyễn Trần Thi Văn

1 Về nội dung đề tài và khối lượng thực hiện:

9 Đề nghị cho bảo vệ hay không?

TP Hồ Chí Minh, ngày tháng năm 2024

(Ký & ghi rõ họ tên)

Lời đầu tiên, nhóm xin phép được gửi lời cảm ơn chân thành đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được trau dồi, học tập và phát triển nền tảng kiến thức vững chắc để thực hiện đề tài này

Bên cạnh đó, nhóm chúng em xin gửi đến thầy Nguyễn Hữu Trung lời cảm ơn chân thành và sâu sắc nhất Thầy đã tận tâm hướng dẫn nhiệt tình và đưa ra những góp ý quý báu cho nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này

Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nghiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Nguyễn Hữu Trung đã đem đến cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc chúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộc sống mới

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Chúng em hi vọng nhận được sự góp ý tận tình của quý thầy (cô) qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể

Chúng em xin chân thành cảm ơn!

TP Hồ Chí Minh, ngày 11 tháng 07 năm 2024

Trường ĐH Sư Phạm Kỹ thuật TP.HCM

Khoa: Công nghệ thông tin

Bộ môn: Công nghệ phần mềm ĐỀ CƯƠNG LUẬN VĂN

Họ và tên sinh viên thực hiện 1: Lê Duy Khiêm MSSV: 20110661

Họ và tên sinh viên thực hiện 2: Hoàng Vũ Trường Giang MSSV: 20110237 Thời gian làm luận văn: Từ ngày 01/03/2024 đến ngày 12/07/2024

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website Quản lý công việc với công nghệ MERNSTACK Giáo viên hướng dẫn: ThS Nguyễn Hữu Trung

Nhiệm vụ của luận văn:

- Tìm hiểu về các công nghệ: ReactJS, Node.js, Express.js, JSON Web Token, Websocket

- Tìm hiểu các phương pháp quản lý dự án, quy trình làm việc Scrum

- Sử dụng Node.js và Express.js để xây dựng Backend, viết API cho các module trong hệ thống

- Sử dụng MongoDB để lưu trữ dữ liệu người dùng của hệ thống

- Sử dụng JSON Web Token để xác thực và ủy quyền cho hệ thống API hoạt động hiệu quả

- Sử dụng thư viện React để thiết kế và xử lý giao diện website cho người dùng thao tác

- Sử dụng Websocket cho các hoạt động xử lý dữ liệu trong thời gian thực giúp việc cập nhật trở nên nhanh chóng

- Sử dụng mô hình Scrum trong việc quản lý dự án

- Hỗ trợ người dùng tùy chỉnh quyền trong quy trình làm việc

- Tích hợp Google Calendar cho việc theo dõi công việc cá nhân

- Hố trợ tạo báo cáo trong dự án giúp người dùng có thể trực quan và tổng quát về tiến độ công việc Hỗ trợ tự động hóa một số công việc trong quản lý dự án

3 Đối tượng nghiên cứu đề tài

1 Kết quả thực hiện được

Tiêu đề	Xây Dựng Website Quản Lý Công Việc Với Công Nghệ MERN Stack
Tác giả	Hoàng Vũ Trường Giang, Lê Duy Khiêm
Người hướng dẫn	ThS. Nguyễn Hữu Trung
Trường học	Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	167
Dung lượng	12,07 MB