Tải bản đầy đủ (.pdf) (84 trang)

Khóa luận xây dựng website quản lý công việc

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.48 MB, 84 trang )

“ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM”

Bùi Như Phước - Nguyễn Tấn Thành

KHÓA LUẬN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ CÔNG VIỆC
BUILDING A TASK MANAGEMENT WEBSITE

“KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM”

TP. HỒ CHÍ MINH, 2023


“ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM”

BÙI NHƯ PHƯỚC - NGUYỄN TẤN THÀNH

“KHÓA LUẬN TỐT NGHIỆP”

XÂY DỰNG WEBSITE QUẢN LÝ CÔNG VIỆC
BUILDING A TASK MANAGEMENT WEBSITE

KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM


“GIẢNG VIÊN HƯỚNG DẪN”
ThS. Trần Thị Hồng Yến

TP. HỒ CHÍ MINH, 2023


“THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP”

“Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ……………………
ngày ...............................của Hiệu trưởng Trường Đại học Công nghệ Thông tin.”
1. Chủ tịch
2. Thư ký
3. Ủy viên
4. Ủy viên


ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG
NGHỆ THƠNG TIN

CỘNG HỊA XÃ HỘI CHỦ NGHĨA
VIỆT NAM
Độc Lập - Tự Do - Hạnh Phúc
TP. HCM, ngày......tháng......năm.......

“NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP
(CỦA CÁN BỘ HƯỚNG DẪN)”
Tên khóa luận:

XÂY DỰNG WEBSITE QUẢN LÝ CƠNG VIỆC

BUILDING A TASK MANAGEMENT WEBSITE

Nhóm SV thực hiện:

Cán bộ hướng dẫn:

Bùi Như Phước

19522052

Nguyễn Tấn Thành

19522239

ThS. Trần Thị Hồng Yến

Đánh giá Khóa luận



1. Về cuốn báo cáo:
Số trang: 86

Số chương: 4

Số bảng số liệu: 30

Số hình vẽ: 32

Số tài liệu tham khảo: 9


Sản phẩm: 1

Một số nhận xét về hình thức cuốn báo cáo:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................


2. Về nội dung nghiên cứu:
.......................................................................................................................................
.......................................................................................................................................
......................................................................................................................................
3. Về chương trình ứng dụng:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
4. Về thái độ làm việc của sinh viên:
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
Đánh giá chung:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................”
Điểm của sinh viên:
Bùi Như Phước: ………/10
Nguyễn Tấn Thành: ………/10


Người nhận xét
(Ký và ghi rõ họ tên)


ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG
NGHỆ THƠNG TIN

CỘNG HỊA XÃ HỘI CHỦ NGHĨA
VIỆT NAM
Độc Lập - Tự Do - Hạnh Phúc
TP. HCM, ngày......tháng......năm.......

NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP
(CỦA CÁN BỘ PHẢN BIỆN)
Tên khóa luận:

XÂY DỰNG WEBSITE QUẢN LÝ CƠNG VIỆC
BUILDING A TASK MANAGEMENT WEBSITE

“Nhóm SV thực hiện:
Bùi Như Phước
Nguyễn Tấn Thành

Cán bộ phản biện:
19522052
19522239

Đánh giá Khóa luận
1. Về cuốn báo cáo:

Số trang: 86

Số chương: 4

Số bảng số liệu: 30

Số hình vẽ: 32

Số tài liệu tham khảo: 9

Sản phẩm: 1

Một số nhận xét về hình thức cuốn báo cáo:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................


2. Về nội dung nghiên cứu:
.......................................................................................................................................
.......................................................................................................................................
......................................................................................................................................
3. Về chương trình ứng dụng:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
4. Về thái độ làm việc của sinh viên:
......................................................................................................................................
......................................................................................................................................

......................................................................................................................................
Đánh giá chung:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
Điểm của sinh viên:”
Bùi Như Phước: ………/10
Nguyễn Tấn Thành: ………/10

Người nhận xét
(Ký và ghi rõ họ tên)


“LỜI CẢM ƠN”
Đầu tiên, chúng em xin phép gửi lời cảm ơn đến cô Trần Thị Hồng Yến và các
quý thầy cô Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP. Hồ Chí
Minh đã tận tâm dẫn dắt, giảng dạy và giúp đỡ chúng em trong quá trình học tập và
rèn luyện để đạt được những kiến thức và kĩ năng cần có cho một khóa luận tốt nghiệp
cũng như bắt đầu sự nghiệp lập trình viên trong tương lai.
Website quản lý cơng việc chính là sản phẩm đúc kết những kiến thức được tích
lũy và đồng thời kết hợp với nhiều kiến thức mới mà nhóm chúng em đã cố gắng xây
dựng hết mình trong thời gian qua. Tuy nhiên, nhóm nhận thấy đề tài vẫn cịn nhiều
nhược điểm và khó khăn bởi kinh nghiệm và kiến thức hạn chế của mình. Vì vậy,
chúng em rất mong nhận được những đóng góp, ý kiến từ quý thầy cô để giúp cho
sản phẩm tâm huyết cũng như khóa luận tốt nghiệp của chúng em được củng cố và
hoàn thiện hơn.
Chúng em xin được chân thành cảm ơn các q thầy cơ.

Thành phố Hồ Chí Minh, tháng 07 năm 2023
Nhóm sinh viên thực hiện

Bùi Như Phước và Nguyễn Tấn Thành


“MỤC

LỤC

TÓM TẮT KHÓA LUẬN ................................................................................... 1
Chương 1. TỔNG QUAN ĐỀ TÀI ........................................................................ 2
1.1.

Lí do chọn đề tài ..................................................................................... 2

1.2.

Mục đích của dự án ................................................................................. 2

1.3.

Khảo sát hiện trạng ................................................................................. 3

1.3.1. Khảo sát các trang sản phẩm tương tự .................................................... 3
1.3.2. Đánh giá hiện trạng và hướng giải quyết ................................................ 5
1.4.

Đối tượng sử dụng .................................................................................. 7

1.5.

Công nghệ sử dụng ................................................................................. 7


Chương 2. CƠ SỞ LÝ THUYẾT ........................................................................... 8
2.1.

Các công nghệ sử dụng ........................................................................... 8

2.1.1. ReactJS.................................................................................................... 8
2.1.2. Giới thiệu về NestJS ............................................................................... 9
2.1.3. Ant Design ............................................................................................ 10
2.1.4. OpenAI Library .................................................................................... 11
2.2.

Tổng quan về hệ cơ sở dữ liệu. ............................................................. 13

2.2.1. Hệ quản trị cơ sở dữ liệu MySQL ........................................................ 13
2.2.2. Google Firebase Database .................................................................... 14
Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ....................................... 15
3.1.

Phân tích yêu cầu hệ thống ................................................................... 15

3.1.1. Danh sách các yêu cầu chức năng ........................................................ 15
3.1.2. Danh sách các yêu cầu phi chức năng .................................................. 15


3.2.

Xác định yêu cầu................................................................................... 16

3.2.1. Danh sách các biểu mẫu ....................................................................... 16

3.2.2. Danh sách biểu mẫu và quy định của biểu mẫu.................................... 17
3.3.

Đặc tả use-case...................................................................................... 24

3.3.1. Danh sách các Actor ............................................................................. 24
3.3.2. Danh sách các Use-case ........................................................................ 25
3.3.3. Đặc tả yêu cầu ....................................................................................... 28
3.4.

Sơ đồ hoạt động .................................................................................... 41

3.4.1. Đăng ký ................................................................................................. 41
3.4.2. Quản lý công việc (task) ....................................................................... 42
3.4.3. Quản lý dự án ........................................................................................ 43
3.4.4. Quản lý group chat ................................................................................ 44
CHƯƠNG 4. XÂY DỰNG ỨNG DỤNG ........................................................... 45
4.1.

Thiết kế dữ liệu ..................................................................................... 45

4.1.1. Sơ đồ thiết kế ........................................................................................ 45
4.1.2. Danh sách các bảng dữ liệu trong sơ đồ ............................................... 45
4.1.3. Mô tả từng bảng dữ liệu ........................................................................ 46
4.2.

Thiết kế giao diện xử lý ........................................................................ 50

4.2.1. Sơ đồ liên kết màn hình ........................................................................ 50
4.2.2. Danh sách các màn hình ....................................................................... 50

4.2.3. Chi tiết các màn hình ............................................................................ 54
4.3.

Thiết kế kiến trúc .................................................................................. 63

4.3.1. Kiến trúc hệ thống ................................................................................ 63


4.3.2. Các thành phần chính trong hệ thống ................................................... 63
5. TỔNG KẾT ...................................................................................................... 65
5.1.

Kết quả đạt được ................................................................................... 65

5.2.

Ưu điểm ................................................................................................ 65

5.3.

Nhược điểm .......................................................................................... 66

5.4.

Hướng phát triển ................................................................................... 67

TÀI LIỆU THAM KHẢO .................................................................................... 68


DANH MỤC HÌNH ẢNH

Hình 2.1 ReactJS Framework ............................................................................ 8
Hình 2.2 NestJS Framework .............................................................................. 9
Hình 2.3 Ant Design UI tool kit ......................................................................... 10
Hình 2.4 OpenAI Library ................................................................................... 11
Hình 3.1 Sơ đồ use-case tổng quát ..................................................................... 26
Hình 3.2 Sơ đồ use-case đăng nhập ................................................................... 30
Hình 3.3 Sơ đồ use-case đăng ký ....................................................................... 31
Hình 3.4 Sơ đồ use-case chỉnh sửa thơng tin tài khoản ..................................... 32
Hình 3.5 Sơ đồ use-case quản lý dự án .............................................................. 33
Hình 3.6 Sơ đồ use-case quản lý cơng việc ....................................................... 35
Hình 3.7 Sơ đồ use-case thống kê tổng qt ...................................................... 38
Hình 3.8 Sơ đồ use-case xem lịch cơng việc ..................................................... 39
Hình 3.9 Sơ đồ use-case nhắn tin cho nhóm ...................................................... 41
Hình 3.10 Sơ đồ hoạt động đăng ký .................................................................. 43
Hình 3.11 Sơ đồ quản lý cơng việc .................................................................... 44
Hình 3.12 Sơ đồ quản lý dự án........................................................................... 45
Hình 3.13 Sơ đồ quản lý group chat .................................................................. 46
Hình 4.1 Sơ đồ dữ liệu ....................................................................................... 47
Hình 4.2 Sơ đồ liên kết màn hình....................................................................... 52
Hình 4.3 Màn hình đăng nhập ............................................................................ 56
Hình 4.4 Màn hình đăng ký................................................................................ 57
Hình 4.5 Màn hình dashboard ............................................................................ 57


Hình 4.6 Màn hình Calendar .............................................................................. 58
Hình 4.7 Màn hình TaskList .............................................................................. 58
Hình 4.8 Màn hình Add Task ............................................................................. 59
Hình 4.9 Màn hình Update Task ........................................................................ 60
Hình 4.10 Màn hình Project ............................................................................... 60
Hình 4.11 Màn hình Add Project ....................................................................... 61

Hình 4.12 Màn hình Update Project .................................................................. 62
Hình 4.13 Màn hình AI support ......................................................................... 62
Hình 4.14 Màn hình quản lý group chat ............................................................ 63
Hình 4.15 Sơ đồ kiến trúc hệ thống ................................................................... 64


DANH MỤC BẢNG
Bảng 3.1 Bảng danh sách các yêu cầu chức năng .............................................. 19
Bảng 3.2 Biểu mẫu đăng nhập tài khoản ........................................................... 20
Bảng 3.3 Biểu mẫu đăng ký tài khoản ............................................................... 20
Bảng 3.4 Biểu mẫu cập nhật tài khoản cá nhân ................................................. 21
Bảng 3.5 Biểu mẫu đổi mật khẩu ....................................................................... 21
Bảng 3.6 Biểu mẫu tạo dự án mới ...................................................................... 21
Bảng 3.7 Biểu mẫu xem chi tiết dự án ............................................................... 22
Bảng 3.8 Biểu mẫu chỉnh sửa thông tin dự án ................................................... 22
Bảng 3.9 Biểu mẫu tạo dự án mới ...................................................................... 23
Bảng 3.10 Biểu mẫu xem chi tiết công việc ...................................................... 24
Bảng 3.11 Biểu mẫu chỉnh sửa thông tin công việc........................................... 24
Bảng 3.12 Biểu mẫu thống kê tổng quát ............................................................ 25
Bảng 3.13 Biểu mẫu xem lịch công việc ........................................................... 25
Bảng 3.14 Biểu mẫu nhắn tin cho nhóm ............................................................ 26
Bảng 3.15 Biểu mẫu nhắn tin cho AI chatbot .................................................... 26
Bảng 3.16 Bảng danh sách các Actor ............................................................... 27
Bảng 3.17 Bảng danh sách các Use-case .......................................................... 27
Bảng 3.18 Use-case đăng nhập ......................................................................... 30
Bảng 4.1 Danh sách các bảng dữ liệu trong database ........................................ 47
Bảng 4.2 Bảng user ............................................................................................ 48
Bảng 4.3 Bảng task ............................................................................................ 48
Bảng 4.4 Bảng project ........................................................................................ 49



Bảng 4.5 Bảng project category ......................................................................... 50
Bảng 4.6 Bảng comment .................................................................................... 50
Bảng 4.7 Bảng role ............................................................................................. 50
Bảng 4.8 Bảng message ..................................................................................... 51
Bảng 4.9 Bảng chat room ................................................................................... 51
Bảng 4.10 Bảng message ................................................................................... 51
Bảng 4.11 Danh sách các bảng màn hình .......................................................... 52
Bảng 4.12 Bảng các thành phần chính trong hệ thống....................................... 64


“DANH MỤC TỪ VIẾT TẮT”


Từ viết tắt

API

Từ đầy đủ
Application Programming

Giải thích
Giao diện lập trình ứng dụng

Interface
CSDL

Cơ sở dữ liệu

Cơ sở dữ liệu cho ứng dụng


MVC

Model - View - Controller

Mơ hình lập trình 3 lớp: model,
view, controller”


TĨM TẮT KHĨA LUẬN
“Khóa luận với đề tài: “Xây dựng website quản lý công việc” nhằm tạo một
website hỗ trợ người dùng một cách thông minh và trực quan trong việc quản lý các
cơng việc của mình. Ngồi ra, đề tài cịn cung cấp nhiều tiện ích khác như thống kê
công việc bằng biểu đồ, hỗ trợ tập trung với đồng hồ Pomodoro, bổ sung AI hỗ trợ
quản lý công việc, nhắn tin giữa các thành viên. Với sự tổng hợp nhiều ưu điểm từ
các trang web quản lý dự án phổ biến và hỗ trợ nhiều tính năng, đề tài này sẽ là một
công cụ đắc lực giúp đỡ người dùng trong quá trình thực hiện và phát triển dự án của
mình.
Báo cáo khóa luận với đề tài “Xây dựng website quản lý công việc” bao gồm
04 chương và mục tổng kết:
• Chương 1 - Tổng quan đề tài: Giới thiệu lí do chọn đề tài, phát biểu bài tốn,
mục đích, đối tượng sử dụng và phạm vi đề tài.
• Chương 2 – Cơ sở lý thuyết: Trình bày các kiến thức nền tảng, các công
nghệ được sử dụng để xây dựng đề tài.
• Chương 3 – Phân tích và thiết kế: Phân tích yêu cầu, thiết kế các các sơ đồ
đặc tả, sơ đồ hoạt động để áp dụng tạo tiền đề xây dựng ứng dụng.
• Chương 4 – Xây dựng ứng dụng: Trình bày sơ đồ cơ sở dữ liệu, danh sách
màn hình và cách sử dụng cho từng trang trong ứng dụng.
• Tổng kết: Trình bày kết quả đạt được, ưu điểm, nhược điểm sau khi hoàn
thành và hướng phát triển cho đề tài.”


1


Chương 1. TỔNG QUAN ĐỀ TÀI
1.1. Lí do chọn đề tài
“Trong môi trường kinh tế ngày càng phát triển, quản lý công việc hiệu quả luôn
là một vấn đề quan trọng đối với bất kì cá nhân, tổ chức hay doanh nghiệp nào. Hiện
nay, các công cụ hộ trợ quản lý công việc trực tuyến đang trở nên thông dụng hơn
bao giờ hết với sự hỗ trợ của công nghệ thơng tin. Thơng qua những sản phẩm và
cơng nghệ đó, chúng ta có thể thấy rõ về tầm quan trọng và sự cần thiết của việc xây
dựng website quản lý công việc.
Đáng chú ý hơn, trong bối cảnh sau đại dịch Covid-19, các tổ chức và cơng ty
đã phải thích nghi với mơ hình làm việc từ xa và tăng cường sự linh hoạt trong quản
lý công việc. Việc sử dụng website quản lý công việc đã trở thành một giải pháp để
giúp các cá nhân và nhóm làm việc, theo dõi và hoàn thành các nhiệm vụ một cách
hiệu quả. Nó cung cấp một nền tảng trực tuyến để quản lý thơng tin cơng việc, lịch
trình, tiến độ và tài liệu liên quan đến dự án.
Xây dựng một website quản lý công việc cho phép các thành viên trong nhóm
làm việc có thể truy cập và cập nhật thơng tin công việc từ bất kỳ thời gian, địa điểm
nào và bất kỳ thiết bị nào có kết nối Internet. Nó tạo ra một mơi trường làm việc đồng
nhất, giúp cải thiện hiệu suất làm việc, tăng tính tổ chức và sự cộng tác trong nhóm.
Các tính năng như theo dõi tiến độ công việc, giao tiếp trực tuyến, phân công nhiệm
vụ và quản lý tài liệu giúp đơn giản hóa q trình làm việc và tối ưu hóa sự phân công
và phối hợp công việc.
Với nhận thức về những thách thức và lợi ích của việc xây dựng website quản
lý cơng việc, nhóm chúng em đã quyết định chọn đề tài này cho khóa luận tốt nghiệp
của mình. Chúng em hy vọng rằng việc nghiên cứu và triển khai một hệ thống quản
lý cơng việc trực tuyến sẽ đóng góp vào sự hiệu quả và tăng cường khả năng cạnh
tranh của các cá nhân, nhóm và các tổ chức trong thời đại kỹ thuật số ngày nay.”

1.2. Mục đích của dự án


Website quản lý công việc là một ứng dụng web được phát triển để hỗ trợ quản

lý và tổ chức các công việc và nhiệm vụ trong môi trường làm việc. Tác dụng của
một website quản lý công việc là:
2


• Tối ưu hố quy trình làm việc: Website quản lý công việc cung cấp một giao
diện trực tuyến giúp quản lý, theo dõi và phân chia công việc giữa các thành
viên trong tổ chức. Nó giúp cải thiện tính tổ chức, tăng khả năng giao tiếp và
giảm tỷ lệ sai sót trong quy trình làm việc.
• Tương tác thân thiện với người sử dụng: Website quản lý công việc cung cấp
các chức năng tương tác với hệ thống thông báo và chat online, giúp tạo ra một
môi trường làm việc thống nhất và thuận lợi cho sự trao đổi và cộng tác của
các thành viên trong tổ chức.
• Quản lý công việc một cách hiệu quả: Từ việc lập kế hoạch, phân công và theo
dõi tiến độ đến thống kê, website quản lý công việc cung cấp những công cụ
và tính năng giúp quản lý và theo dõi cơng việc một cách tồn diện và chính
xác.
• Tăng cường hiệu suất làm việc: Website quản lý công việc giúp tăng cường
hiệu suất làm việc của tổ chức thông qua việc quản lý và theo dõi tiến độ công
việc, phân công và hỗ trợ tập trung với phương pháp đồng hồ Pomodoro.
• Tiết kiệm thời gian và tài nguyên: Việc sử dụng website quản lý công việc
giúp tổ chức tiết kiệm thời gian và tài nguyên, từ việc truy cập thông tin cơng
việc một cách nhanh chóng, tổ chức lịch trình, đến chia sẻ tài liệu và thông tin
liên quan đến cơng việc.”
1.3. Khảo sát hiện trạng

Sau q trình khảo sát hiện trạng bằng việc tham khảo các trang web quản lý
cơng việc như Trello, Jira, Poromo.io thì chúng em đã tổng hợp được một số thông
tin:
1.3.1. Khảo sát các trang sản phẩm tương tự
1.3.1.1. Trello
Ưu điểm:


Giao diện đơn giản và trực quan: Trello sử dụng hệ thống bảng và
danh sách để tổ chức công việc, giúp người dùng dễ dàng thao tác và
hiểu rõ cấu trúc cơng việc.



Tính tương tác cao: Người dùng có thể thêm, sắp xếp và di chuyển
3


thẻ công việc một cách linh hoạt, cũng như giao tiếp và chia sẻ thông
tin với thành viên khác trong nhóm.


Tích hợp đa nền tảng: Trello hỗ trợ trên nhiều nền tảng và thiết bị,
cho phép người dùng truy cập và quản lý cơng việc từ bất kỳ đâu.



Có nhiều mẫu quản lý dự án cho người dùng tự do lựa chọn.

Nhược điểm:



Hạn chế trong quản lý dự án lớn: Trello thích hợp cho các dự án nhỏ
và quản lý cơng việc cá nhân, nhưng có thể gặp khó khăn trong việc
quản lý dự án lớn với nhiều thành viên và tác vụ phức tạp.



Thiếu tính năng tiên tiến: Trello khơng cung cấp nhiều tính năng quản
lý dự án phức tạp như lập lịch, theo dõi thời gian hoặc phân phối
cơng việc tự động.



Chưa có chatbot hỗ trợ người dùng.



Chưa có chức năng nhắn tin giữa các thành viên trong một dự án.

1.3.1.2. Jira
Ưu điểm:


Quản lý dự án mạnh mẽ: Jira cung cấp các tính năng quản lý dự án
phức tạp như lập lịch, theo dõi tiến độ, phân phối cơng việc và báo
cáo chi tiết.




Tính tương tác và cộng tác cao: Người dùng có thể giao tiếp, chia sẻ
thơng tin và làm việc cùng nhau trên các công việc trong Jira.



Phù hợp cho các dự án phần mềm: Jira được thiết kế đặc biệt cho
quản lý dự án phần mềm, với khả năng tích hợp với các cơng cụ phát
triển phổ biến như Git và Confluence.

Nhược điểm:


Giao diện phức tạp: Giao diện của Jira có thể phức tạp và khó hiểu
đối với người dùng mới, địi hỏi thời gian và học hỏi để làm quen và
sử dụng hiệu quả.



Giá thành cao: Jira có mức giá cao đối với các phiên bản cao cấp có
thể hạn chế đối với các nhóm và tổ chức có ngân sách hạn chế.
4


1.3.1.3. Pomofocus
Ưu điểm:


Tập trung vào phương pháp Pomodoro: Pomofocus.io tập trung vào
kỹ thuật Pomodoro, giúp người dùng quản lý thời gian và tập trung
cơng việc một cách hiệu quả.




Giao diện đơn giản và dễ sử dụng: Website có giao diện đơn giản và
thân thiện với người dùng, cho phép người dùng dễ dàng thiết lập
thời gian và sử dụng kỹ thuật Pomodoro.

Nhược điểm:


Hạn chế tính năng: Pomofocus.io tập trung chủ yếu vào kỹ thuật
Pomodoro, do đó hạn chế trong việc cung cấp các tính năng quản lý
dự án phức tạp hoặc tích hợp giao tiếp và cộng tác.

1.3.2. Đánh giá hiện trạng và hướng giải quyết
Ưu điểm: “Qua quá trình khảo sát thì em thấy hầu hết các web quản lý cơng việc
và dự án đều có những tính năng mà em có thể áp dụng:


Quản lý cơng việc, dự án theo các mơ hình quản lý dự án như Waterfall,
Agile,.... tiến độ của các công việc trong dự án được thể hiện một các rõ
ràng, trực quan.



Chi tiết dự án, các công việc trong dự án được mô tả rõ ràng, trực quan,
giúp người dùng dễ sử dụng và nắm được thơng tin.




Trang quản trị dành cho người quản lý công việc hoặc dự án đầy đủ thông
tin và các chức năng cơ bản như: thêm, xóa, sửa, tìm kiếm, bộ lọc và
thống kê,…

Nhược điểm: Bên cạnh đó, vẫn cịn một số hạn chế mà chúng em có thể khắc
phục:


Một số trang web thiếu đi tính năng tương tác giữa các thành viên trong
nhóm và phải dùng bên thứ ba để có thể nhắn tin cho nhau.

5




Giao diện phức tạp và khó sử dụng đối với những người mới làm quen
với các mơ hình quản lý dự án như Scrum.



Chưa có nhiều trang web hỗ trợ thống kê dự án bằng biểu đồ.



Chi phí sử dụng các phần mềm này khá cao, phiên bản miễn phí chỉ hỗ
trợ rất ít tính năng hữu ích.




Ít có sự tuỳ chỉnh cho người dùng như thay đổi theme, màu sắc, hình nền.

Hướng giải quyết:


Tích hợp chức năng nhắn tin nhóm, tạo Group chat để người dùng làm
việc nhóm dễ dàng hơn và có sự tương tác giữa các thành viên của dự án.



Đơn giản hố giao diện quản lý dự án để người dùng dễ dàng làm quen
hơn với các thao tác quản lý và tiết kiệm thời gian tìm hiểu cách sử dụng.



Hỗ trợ thống kê các thơng tin quan trọng của các dự án.



Hỗ trợ người dùng, hướng dẫn sử dụng và giới thiệu ứng dụng với AI
chatbot tích hợp nhiều cơng nghệ hiện đại và được huấn luyện với các
nội dung liên quan đến quản lý dự án và quản lý công việc.”

6


1.4. Đối tượng sử dụng
Đối tượng chính của website quản lý cơng việc của nhóm bao gồm:



Cá nhân: Các cá nhân có thể sử dụng các cơng cụ này để quản lý công việc
cá nhân của họ, lập kế hoạch, theo dõi tiến độ và tổ chức các nhiệm vụ.



Nhóm làm việc: Các công cụ quản lý công việc này thường được sử dụng
bởi các nhóm làm việc để cùng nhau quản lý và theo dõi tiến trình cơng
việc chung. Các thành viên trong nhóm có thể tạo cơng việc theo danh
sách, nhiệm vụ phân công, giao tiếp và theo dõi tiến độ.



Doanh nghiệp: Các cơng cụ quản lý cơng việc có thể được sử dụng trong
doanh nghiệp để quản lý dự án, phân công công việc cho các thành viên
trong tổ chức, theo dõi tiến độ và tăng cường hiệu suất làm việc.



Người quản lý dự án: Các cơng cụ này cung cấp các tính năng quản lý dự
án, cho phép người quản lý dự án xác định và theo dõi các nhiệm vụ và
tương tác với các thành viên khác trong dự án.



Người làm việc theo phương pháp Pomodoro: Các cơng cụ quản lý cơng
việc có tích hợp phương pháp Pomodoro giúp người dùng quản lý thời
gian và tập trung vào cơng việc.

1.5. Cơng nghệ sử dụng



Front-end: Ant Design, ReactJS , HTML, CSS, ChartJS, EmailJS.



Back-end: NestJS, Firebase Admin.



Hệ quản trị CSDL: MySQL, Firebase Realtime Database.



Nền tảng triển khai: Website.



Hệ điều hành: Windows, MacOS.



Các phần mềm hỗ trợ khác: draw.io, Figma, Notion, MySQL Workbench,
VSCode, Github, Postman, OpenAI Library.

7


Chương 2. CƠ SỞ LÝ THUYẾT
2.1. Các công nghệ sử dụng
2.1.1.


ReactJS

Hình 2.1 ReactJS Framework
Nguồn: Truy cập ngày: 4/7/2023
“ReactJS

là một cơng nghệ phát triển ứng dụng web phía client (frontend) được

phát triển bởi Facebook. Với đặc điểm mạnh là khả năng tạo giao diện người dùng
(UI) tương tác và linh hoạt, ReactJS đã trở thành một trong những công nghệ phổ
biến nhất trong lĩnh vực phát triển web hiện đại.
Với cơ chế hoạt động dựa trên thành phần (component-based), ReactJS cho phép
xây dựng giao diện người dùng theo cách module hóa, tách biệt thành các thành phần
độc lập và có thể tái sử dụng. Điều này giúp tăng tính linh hoạt và hiệu quả trong quá
trình phát triển và bảo trì ứng dụng web.
Một trong những ưu điểm nổi bật của ReactJS là việc sử dụng Virtual DOM
(Document Object Model). Virtual DOM cho phép ReactJS cập nhật và hiển thị các
thay đổi trên giao diện người dùng một cách nhanh chóng và hiệu quả, chỉ tập trung
vào những thành phần cần thay đổi thực sự. Điều này giúp cải thiện hiệu suất ứng
dụng và tối ưu hóa trải nghiệm người dùng.[7]
Ngoài ra, ReactJS cũng hỗ trợ việc quản lý trạng thái ứng dụng một cách dễ
dàng thông qua khái niệm "state". State trong ReactJS cho phép lưu trữ và điều khiển
dữ liệu có sự đổi thay trên giao diện người dùng theo một hướng linh hoạt và có cấu
trúc. Việc quản lý trạng thái này giúp giảm thiểu lỗi và tăng tính nhất qn trong q
trình phát triển ứng dụng.

8



Một điểm mạnh khác của ReactJS là hệ sinh thái phong phú của các thư viện và
công cụ hỗ trợ. ReactJS đi kèm với React Router để quản lý định tuyến, Redux để
quản lý trạng thái ứng dụng, và nhiều thư viện khác để hỗ trợ việc xử lý các tác vụ
phức tạp. Điều này giúp phát triển ứng dụng web với ReactJS trở nên thuận tiện và
linh hoạt.
Tóm lại, với nhiều ưu điểm hệ sinh thái phong phú, nhiều framework hỗ trợ,
cộng đồng phát triển mạnh mẽ, rộng lớn, cung cấp nhiều tiện ích và cơ hội việc làm
trong tương lai, nhóm chúng em đã quyết định áp dụng ReactJS để xây dựng phần
Front-end của trang web.
2.1.2.

Giới thiệu về NestJS

Hình 2.2 NestJS Framework
Nguồn: Truy cập ngày: 4/7/2023


NestJS là một framework phát triển ứng dụng web phía server (backend) được

xây dựng trên cơ sở TypeScript và sử dụng kiến trúc cấu trúc dựa trên module. Với
sự kết hợp giữa khả năng mạnh mẽ của TypeScript và thiết kế module hóa, NestJS
giúp đơn giản hóa việc xây dựng và quản lý ứng dụng web phức tạp.
Một trong những ưu điểm chính của NestJS là khả năng hỗ trợ mã nguồn mở và
tuân thủ nguyên tắc SOLID (Single Responsibility, Open-Closed, Liskov
Substitution, Interface Segregation và Dependency Inversion). Điều này giúp cho
việc phát triển ứng dụng linh hoạt, dễ dàng bảo trì và mở rộng trong tương lai.
NestJS cung cấp một hệ sinh thái mạnh mẽ bao gồm các thành phần như
controllers, providers, modules, middlewares và pipes. Controllers chịu trách nhiệm
xử lý các yêu cầu và phản hồi HTTP, providers cung cấp các dịch vụ và logic cho
9



×