(Đồ án hcmute) xây dựng website quản lý và phân chia công việc sử dụng vue3 và nestjs

PHẠM VI NGHIÊN CỨU Đề tài tập trung vào xử lý các tác vụ cơ bản của một website quản lý công việc như: Xem danh sách công việc, chi tiết công việc, lọc danh sách công việc, xem danh sác

S K L 0 0 9 5 0 4

XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA CÔNG

VIỆC SỬ DỤNG VUE3 VÀ NESTJS

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA

CÔNG VIỆC SỬ DỤNG VUE3 VÀ NESTJS

TS LÊ VĂN VINH KHÓA 2018-2022 NGUYỄN TRƯỜNG THỊNH – 18110372 NGUYỄN QUANG DUY – 18110261

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

-🙞🙜🕮🙞🙜 -

NGUYỄN TRƯỜNG THỊNH – 18110372 NGUYỄN QUANG DUY – 18110261

Đề Tài:

XÂY DỰNG WEBSITE QUẢN LÝ VÀ PHÂN CHIA

CÔNG VIỆC SỬ DỤNG VUE3 VÀ NESTJS

KHÓA LUẬN TỐT NGHIỆP GIẢNG VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH KHÓA 2018-2022

ĐH SƯ PHẠM KỸ THUẬT TP HCM

KHOA CNTT

*******

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Nguyễn Trường Thịnh MSSV 1: 18110372

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website quản lý và phân chia công việc sử dụng Vue3 và NestJs

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 2022

Giáo viên hướng dẫn (Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT TP HCM

KHOA CNTT

*******

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Trường Thịnh MSSV 1: 18110372

Ngành: Công nghệ Thông tin

Tên đề tài: Xây dựng website quản lý và phân chia công việc sử dụng Vue3 và NestJs

Họ và tên Giáo viên phản biện: ThS Nguyễn Hữu Trung

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 2022

Giáo viên phản biện (Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đế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 học tập, phát triển nền tảng kiến thức sâu sắc và thực hiện đề tài này

Bên cạnh đó nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn sâu sắc nhất Trải qua một quá trình dài học tập và thực hiện đề tài trong thời gian qua Thầy đã tận tâm chỉ bảo nhiệt tình 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 Lê Văn Vinh

đã tặng 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!

Nhóm thực hiện

Nguyễn Trường Thịnh - 18110372 Nguyễn Quang Duy – 18110261

Trường ĐH Sư Phạm Kỹ Thuật TP.HCM

Khoa Công nghệ Thông tin

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Họ và tên Sinh viên 1: Nguyễn Trường Thịnh MSSV 1: 18110372

Chuyên ngành: Công nghệ phần mềm

Tên khóa luận: Xây dựng website quản lý và phân chia công việc sử dụng Vue3 và

NestJs

Thời gian làm khóa luận: Từ 23/03/2022 đến 10/07/2022 (15 tuần)

Họ và tên Giáo viên hướng dẫn: TS Lê Văn Vinh

Nhiệm vụ của khóa luận:

1 Lý thuyết:

Các công nghệ về Restful APIs, NestJS, Vue3, Postgresql

2 Thực hành:

● Sử dụng NestJS, Restful APIs để viết các module, APIs trong hệ thống

● Sử dụng Postgresql để lưu trữ dữ liệu trong hệ thống

● Vue3 để thiết kế giao diện và xử lý tác vụ người dùng trong hệ thống

● Sử dụng Json Web Token để xác thực người dùng trong hệ thống

● Tích hợp kết nối và đồng bộ với lịch của người dùng trên Google Calendar

3 Đề cương viết khóa luận:

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

2 ĐỐI TƯỢNG NGHIÊN CỨU

3 PHẠM VI NGHIÊN CỨU

4 MỤC TIÊU CỦA ĐỀ TÀI

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN PHẦN NỘI DUNG

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

1 NESTJS

2 RESTFUL APIs

3 VUEJS

4 TYPESCRIPT

5 POSTGRESQL CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

1 KẾT QUẢ ĐẠT ĐƯỢC

2 ƯU ĐIỂM

3 NHƯỢC ĐIỂM

4 HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO

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

3 + 4 + 5 7/4 – 29/4 - Tìm hiểu về VueJS cho Website

- Tìm hiểu về NestJS để phát triển API

6 + 7 + 8 30/4 – 20/5 - Tìm hiểu cách xây dựng Restful API

- Tìm hiểu về Postgresql để áp dụng lưu trữ dữ liệu của hệ thống

9 + 10 21/5 – 4/6 - Tiến hành phát triển API cho hệ thống

dựa trên các kiến thức đã tìm hiểu được

11 + 12 5/6 – 18/6 - Kết hợp những phần đã xây dựng lại

với nhau (UI, API, Database)

13 19/6 – 25/6 - Tìm hiểu sửa đổi hoàn thiện hệ thống

14 26/6 – 2/7 - Kiểm thử chương trình và tiến hành

sửa lỗi (nếu có)

- Chỉnh sửa tổng hợp báo cáo

15 3/7 – 10/7 - Hoàn tất hệ thống

Giáo viên hướng dẫn

(Ký và ghi rõ họ tên)

Tp Hồ Chí Minh, ngày tháng năm 2022

Người viết đề cương (Ký và ghi rõ họ tên)

MỤC LỤC

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 6

KẾ HOẠCH THỰC HIỆN 8

MỤC LỤC 9

DANH SÁCH BẢNG BIỂU 12

DANH SÁCH HÌNH 14

PHẦN MỞ ĐẦU 16

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 16

2 ĐỐI TƯỢNG NGHIÊN CỨU 16

3 PHẠM VI NGHIÊN CỨU 16

4 MỤC TIÊU CỦA ĐỀ TÀI 16

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 17

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 17

PHẦN NỘI DUNG 18

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

1.1 NestJS 18

1.1.1 NodeJS là gì? 18

1.1.2 Kiến trúc cơ bản của NodeJS 19

1.1.3 Cách thức hoạt động của NodeJS 21

1.1.4 NestJS là gì ? 25

1.1.5 Lý do sử dụng NestJS: 25

1.2 RESTFUL APIs 26

1.2.1 Các khái niệm 26

1.2.2 Cách thức hoạt động 27

1.3 VueJS 27

1.3.1 Khái niệm 27

1.3.2 Tại sao nên dùng VueJs ? 28

1.3.3 Ưu, nhược điểm 28

1.4 TypeScript 29

1.4.1 Khái niệm 29

1.4.2 Các kiểu dữ liệu 29

1.4.3 Ưu, nhược điểm 30

1.5 Postresql 30

1.5.1 Khái niệm 30

1.5.2 Ưu, nhược điểm 31

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 32

2.1 KHẢO SÁT HIỆN TRẠNG 32

2.1.1 ClickUp 32

2.1.2 Monday.com 34

2.1.3 Jira 37

2.2 XÁC ĐỊNH YÊU CẦU 38

2.2.1 Yêu cầu chức năng 38

2.2.2 Yêu cầu phi chức năng 38

2.3 MÔ HÌNH HOÁ YÊU CẦU 39

2.3.1 Lược đồ usecase 39

2.3.2 Mô hình hoá yêu cầu 40

CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 47

3.1 LƯỢC ĐỒ LỚP 47

3.2 CHI TIẾT BẢNG DỮ LIỆU 47

3.3 LƯỢC ĐỒ TUẦN TỰ 59

3.3.1 Đăng nhập 59

3.3.2 Đăng ký 60

3.3.3 Thay đổi thông tin cá nhân 61

3.3.4 Tạo bảng 62

3.3.5 Tạo trạng thái 63

3.3.6 Tạo công việc 64

3.3.7 Xoá công việc 65

3.3.8 Lấy danh sách công việc theo người dùng 66

3.3.9 Xem chi tiết công việc 67

3.3.10 Cập nhật công việc 68

3.4 THIẾT KẾ GIAO DIỆN 69

3.4.1 Giao diện đăng nhập 69

3.4.2 Giao diện đăng ký 70

3.4.3 Giao diện trang chủ của người dùng 71

3.4.4 Giao diện thanh điều hướng bên trái của người dùng 72

3.4.5 Giao diện bảng công việc 73

3.4.6 Giao diện cài đặt người dùng 74

3.4.7 Giao diện thanh điều hướng bên trái của người quản trị 75

3.4.8 Giao diện mô tả công việc 75

3.4.9 Giao diện lịch sử hoạt động của công việc 77

3.4.10 Giao diện lịch của người dùng 78

3.4.11 Giao diện tạo công việc bằng của sổ mở lên 79

3.4.12 Giao diện quản lý người dùng của người quản lý 80

3.4.13 Giao diện quên mật khẩu 81

3.4.14 Giao diện thay đổi ảnh đại diện 82

3.4.15 Giao diện phân quyền cho người dùng trong bảng của người quản trị 83

3.4.16 Giao diện danh sách lỗi 84

3.4.17 Giao diện báo lỗi 85

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 86

4.1 CÀI ĐẶT ỨNG DỤNG 86

4.2 KIỂM THỬ ỨNG DỤNG 87

4.2.1 Kế hoạch kiểm thử 87

4.2.2 Quy trình thiết kế kiểm thử 87

PHẦN KẾT LUẬN 89

1 KẾT QUẢ ĐẠT ĐƯỢC 89

1.1 Kiến thức tìm hiểu được 89

1.2 Chương trình đã làm được 89

2 ƯU ĐIỂM 89

3 NHƯỢC ĐIỂM 89

4 HƯỚNG PHÁT TRIỂN 90

TÀI LIỆU THAM KHẢO 91

DANH SÁCH BẢNG BIỂU

Bảng 1: Usecase Đăng nhập 40

Bảng 2: Usecase Quản lý người dùng 40

Bảng 3: Usecase Quản lý bảng 40

Bảng 4: Usecase Quản lý trạng thái của công việc 41

Bảng 5: Usecase Quản lý người dùng trong bảng 41

Bảng 6: Usecase Quản lý công việc 42

Bảng 7: Usecase Quản lý tệp tin đính kèm 42

Bảng 8: Usecase Quản lý bình luận 42

Bảng 9: Usecase Quản lý người dùng trong công việc 43

Bảng 10: Usecase Quản lý phản hồi lỗi 43

Bảng 11: Usecase Thay đổi thông tin tài khoản 43

Bảng 12: Usecase Thay đổi mật khẩu 43

Bảng 13: Usecase Đăng xuất 44

Bảng 14: Usecase Đăng nhập 44

Bảng 15: Usecase Đăng xuất 45

Bảng 16: Usecase Quản lý công việc 45

Bảng 17: Usecase Lấy lại mật khẩu 45

Bảng 18: Usecase Gửi phản hồi 46

Bảng 19: Usecase Thay đổi thông tin tài khoản 46

Bảng 20: Chi tiết dữ liệu bảng User 47

Bảng 21: Chi tiết dữ liệu bảng Board 50

Bảng 22: Chi tiết dữ liệu bảng BoardStatus 51

Bảng 23: Chi tiết dữ liệu bảng Comment 52

Bảng 24: Chi tiết dữ liệu bảng Media 53

Bảng 25: Chi tiết dữ liệu bảng Task 53

Bảng 26: Chi tiết dữ liệu bảng TaskHistory 55

Bảng 27: Chi tiết dữ liệu bảng Ticket 56

Bảng 28: Chi tiết dữ liệu bảng OtherDetail 57

Bảng 29: Chi tiết dữ liệu bảng UserOnTask 58

Bảng 30: Mô tả giao diện đăng nhập 69

Bảng 31: Mô tả giao diện đăng ký 71

Bảng 32: Giao diện trang chủ của người dùng 71

Bảng 33: Mô tả giao diện thanh điều hướng bên trái của người dùng 72

Bảng 34: Mô tả giao diện bảng công việc 73

Bảng 35: Mô tả giao diện cài đặt người dùng 74

Bảng 36: Mô tả giao diện thanh điều hướng bên trái của người quản trị 75

Bảng 37: Mô tả giao diện mô tả công việc 76

Bảng 38: Mô tả giao diện lịch sử hoạt động của công việc 77

Bảng 39: Mô tả giao diện lịch của người dùng 78

Bảng 40: Mô tả giao diện tạo công việc bằng cửa sổ mở lên 80

Bảng 41: Mô tả giao diện quản lý người dùng của người quản lý 80

Bảng 42: Mô tả giao diện quên mật khẩu 81 Bảng 43: Mô tả giao diện thay đổi ảnh đại diện 82 Bảng 44: Mô tả giao diện phân quyền cho người dùng trong bảng của người quản trị 83 Bảng 45: Mô tả giao diện danh sách lỗi 84 Bảng 46: Mô tả giao diện báo lỗi 85

DANH SÁCH HÌNH

Hình 1: Các thành phần quan trọng trong NodeJS 19

Hình 2: Code lấy dữ liệu từ cơ sở dữ liệu 20

Hình 3: Ví dụ về hoạt động của NodeJs 20

Hình 4: Cách thức hoạt động của NodeJS 21

Hình 5: Cơ chế EventLoop trong NodeJS 23

Hình 6: Cách thức hoạt động của Restful APIs 27

Hình 7: Trang chính của ClickUp 32

Hình 8: Ví dụ về Spaces 33

Hình 9: Ví dụ về Space của ClickUp 33

Hình 10: Danh sách tác vụ ở ClickUp 33

Hình 11: Màn hình mô tả công việc ở ClickUp 34

Hình 12: Trang chủ của Monday.com 34

Hình 13: Minh hoạ về workspace của Monday.com 35

Hình 14: Danh sách bảng công việc ở Monday.com 35

Hình 15: Danh sách công việc trong bảng ở Monday.com 36

Hình 16: Chi tiết công việc trong bảng ở Monday.com 36

Hình 17: Màn hình chính của dự án ở Jira 37

Hình 18: Backlog ở Jira 37

Hình 19: Danh sách công việc cần làm ở Jira 38

Hình 20: Usecase cho người dùng 39

Hình 21: Usecase cho người quản trị 39

Hình 22: Lược đồ lớp 47

Hình 23: Lược đồ tuần tự chức năng đăng nhập 59

Hình 24: Lược đồ tuần tự chức năng đăng ký 60

Hình 25: Lược đồ tuần tự chức năng thay đổi thông tin cá nhân 61

Hình 26: Lược đồ tuần tự chức năng tạo bảng 62

Hình 27: Lược đồ tuần tự chức năng tạo trạng thái 63

Hình 28: Lược đồ tuần tự chức năng tạo công việc 64

Hình 29: Lược đồ tuần tự chức năng xoá công việc 65

Hình 30: Lược đồ tuần tự chức năng lấy danh sách công việc theo người dùng 66

Hình 31: Lược đồ tuần tự chức năng xem chi tiết công việc 67

Hình 32: Lược đồ tuần tự chức năng cập nhật công việc 68

Hình 33: Giao diện đăng nhập 69

Hình 34: Giao diện đăng ký 70

Hình 35: Giao diện trang chủ của người dùng 71

Hình 36: Giao diện thanh điều hướng bên trái của người dùng 72

Hình 37: Giao diện bảng công việc 73

Hình 38: Giao diện cài đặt người dùng 74

Hình 39: Giao diện thanh điều hướng bên trái của người quản trị 75

Hình 40: Giao diện mô tả công việc 75

Hình 41: Giao diện lịch sử hoạt động của công việc 77

Hình 42: Giao diện lịch của người dùng 78

Hình 43: Giao diện tạo công việc bằng cửa sổ mở lên 79

Hình 44: Giao diện quản lý người dùng của người quản lý 80

Hình 45: Giao diện quên mật khẩu 81

Hình 46: Giao diện thay đổi ảnh đại diện 82

Hình 47: Giao diện phân quyền cho người dùng trong bảng của người quản trị 83

Hình 48: Giao diện danh sách lỗi 84

Hình 49: Giao diện báo lỗi 85

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ở Việt Nam ta nói riêng và thế giới nói chung, trong thập kỉ vừa qua, ngành Công nghệ thông tin trong đã và đang đóng vai trò thiết yếu trong cuộc sống hằng ngày của con người, áp dụng trên mọi lĩnh vực của cuộc sống giúp tổ chức quản lý, sắp xếp, phân loại

và xử lý công việc hiệu quả

Theo thống kê [1] vào năm 2021, có hơn 68,72 triệu người Việt Nam sử dụng Internet, chiếm 70.3% dân số với thời lượng sử dụng trung bình là 6 giờ 47 phút Trong đó, với sự phát triển của các công nghệ hiện đại, nhằm cung cấp sự tiện lợi khi quản lý dự án cũng như cung cấp 1 giải pháp cho từng doanh nghiệp, tập thể muốn quản lý công việc theo

xu hướng hiện đại, công nghệ mới Nhóm em đã chọn đề tài “Xây dựng website quản lý

và phân chia công việc sử dụng Vue3 và NestJs” để tạo một giải pháp cơ bản cho các doanh nghiệp muốn quản lý dự án và phân chia công việc theo xu hướng kỹ thuật số

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu của nhóm em dựa trên nhu cầu quản lý công việc của người dùng, tạo ra 1 website thân thiện với người dùng, dễ dàng tạo các công việc cho từng dự án và quản lý Áp dụng các công nghệ mới để tiện lợi cho việc bảo trì và mở rộng chức năng, cụ thể:

● Nghiên cứu NestJs, Restful APIs để chuyển dữ liệu

● Postgresql để lưu dữ liệu của hệ thống

● Sử dụng VueJS và các thư viện hỗ trợ để thiết kế giao diện và xử lý giao diện cho người dùng

3 PHẠM VI NGHIÊN CỨU

Đề tài tập trung vào xử lý các tác vụ cơ bản của một website quản lý công việc như: Xem danh sách công việc, chi tiết công việc, lọc danh sách công việc, xem danh sách dự

án, xem danh sách người dùng, quản lý quyền của người dùng trong dự án

4 MỤC TIÊU CỦA ĐỀ TÀI

Tạo ra một website với khả năng tạo các dự án với mỗi dự án sẽ có danh sách trạng thái để quản lý công việc trong từng dự án, kiểm soát tiến độ công việc, mô tả công việc

rõ ràng, có lịch sử chỉnh sửa để đối chiếu, rà soát

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Xây dựng một website quản lý công việc với các chức đáp ứng được các nhu cầu

cơ bản và tạo ra sự tiện lợi khi sử dụng cho người dùng

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Đề tài hướng đến khả năng học hỏi, tìm hiểu, nâng cao khả năng lập trình với công nghệ mới, đáp ứng nhu cầu quản lý, phân chia công việc trong dự án của người dùng Tạo ra 1 website thân thiện với người dùng

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

Ngoài việc chạy trên JavaScript thì Node có những tính năng đi kèm sau:

- Có trình CLI (giao diện dòng lệnh)

- Chạy theo mô hình REPL

Dưới đây là sơ đồ về các thành phần quan trọng trong NodeJS:

Hình 1: Các thành phần quan trọng trong NodeJS

Ta có thể sử dụng NodeJS để thực hiện các giao thức mạng cấp độ thấp một cách dễ dàng Chẳng hạn như với module HTTP của NodeJs cho phép xây dựng một webserver chỉ với vài dòng code, tuy nhiên vì thế mà chúng ta sẽ phải học nhiều thứ hơn như học

về các header của một gói tin HTTP, không như PHP vốn chỉ là một module mở rộng của một webserver có sẵn (như Apache hay NginX) – tức là PHP dễ dùng hơn NodeJS nhưng lại không cho phép các lập trình viên thực hiện các công việc ở cấp độ thấp Tuy nhiên

vì NodeJS là một framework mã nguồn mở, các tài liệu về nó cũng như thư viện hỗ trợ viết webserver rất nhiều, giúp đỡ cho các lập trình viên

1.1.2 Kiến trúc cơ bản của NodeJS

NodeJS sử dụng kiến trúc lập trình hướng sự kiện bất đồng bộ, và đây là một tính năng làm cho các ứng dụng NodeJS có thể chạy với hiệu suất cao, phản hồi nhanh chóng Chẳng hạn như đối với một chương trình viết bằng C++ thì khi ta viết chương trình để đọc dữ liệu, sẽ phải dừng lại ở đoạn code đọc dữ liệu xong, nếu muốn chương trình tiếp tục vừa chạy các công việc khác vừa đọc dữ liệu thì phải dùng đến đa luồng (multi-threading), tuy nhiên việc dùng đa luồng rất phức tạp và có thể làm chậm server nếu quản

lý đa luồng không tốt Trong khi đó, NodeJS chỉ sử dụng một luồng duy nhất, các câu lệnh nhập xuất không cần phải chờ mà được thực hiện ngay lập tức bằng cách sử dụng Event Loop, cứ mỗi lần có sự kiện xảy ra thì chuyển dữ liệu của sự kiện đó đến các hàm

xử lý tương ứng, và trong khi các hàm xử lý đang chạy thì vòng lặp sự kiện vẫn tiếp tục nhận sự kiện và chuyển đến các hàm xử lý tương ứng khác

Ví dụ giả sử chúng ta có dòng code lấy dữ liệu từ cơ sở dữ liệu như sau:

Hình 2: Code lấy dữ liệu từ cơ sở dữ liệu

Đối với các chương trình bình thường thì khi chạy đến dòng code trên, luồng chạy chương trình đó sẽ phải dừng lại để đợi quá trình xử lý từ cơ sở dữ liệu thực hiện xong

và trả về rồi mới tiếp tục được, trong quá trình đợi đó sẽ có nhiều yêu cầu khác có thể xảy ra và hiệu suất phần mềm sẽ giảm do lãng phí tài nguyên, để giải quyết tình trạng đó thì ta có thể dùng cơ chế đa luồng để xử lý, tuy nhiên đa luồng có một nhược điểm làm tiêu tốn nhiều bộ nhớ và CPU và nếu chúng ta quản lý không tốt việc xử lý đa luồng có thể làm chậm server

Thay vì dùng đa luồng thì NodeJS sử dụng cơ chế Event Loop để giải quyết việc này, nói một cách đơn giản thì Node sẽ đưa các câu lệnh chờ trên vào một luồng khác là Event Loop để xử lý riêng, trong khi luồng chính vẫn sẽ chạy các công việc của riêng nó, và khi nào luồng chính “rảnh” rỗi thì luồng Event Loop sẽ chuyển các công việc đã thực hiện xong trở về lại luồng chính Và chính vì NodeJS chỉ sử dụng 2 luồng nên tài nguyên

hệ thống sẽ không bị chiếm nhiều như khi dùng cơ chế đa luồng, ngoài ra việc viết mã sử dụng Event Loop đơn giản hơn nhiều, ví dụ:

Hình 3: Ví dụ về hoạt động của NodeJs

Trong đoạn mã trên, kết quả trả về từ hàm query() thay vì được gán vào một biến thì

sẽ được truyền vào một hàm khác là function(err, result), và hàm này sẽ được chuyển

vào luồng Event Loop và chờ cho đến khi luồng chính trống thì mới được chuyển qua

1.1.3 Cách thức hoạt động của NodeJS

Ý tưởng chính của NodeJS là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời

Hình 4: Cách thức hoạt động của NodeJS

Tính toán nhanh như sau: giả sử mỗi một luồng đính kèm 2MB dữ liệu được gửi lên server chạy trong hệ thống với 8GB RAM hệ thống, thì có tối đa khoảng 4000 kết nối đồng thời Tuy nhiên với NodeJS thì nó có khả năng mở rộng ra cả hàng triệu kết nối cùng lúc Thật vậy, cơ chế của NodeJS Application xử lý Model như sau:

- Client gửi request đến Web Server

- NodeJS Web Service duy trì trong nội bộ một luồng giới hạn để cung cấp dịch vụ cho Client Request

- NodeJS Web Service nhận tất cả các request và đặt chúng vào một trong Queue Nó được gọi là một Event Queue

- NodeJS Web Service nội bộ có một thành phần được gọi là "Event Loop"

- Event Loop chỉ sử dụng một luồng đơn để xử lý Model

- Event Loop kiểm tra tất cả các Request đặt trong Event Queue Nếu không

có request nào thì chờ request đến vô thời hạn

- Nếu có request thì sẽ lấy một request từ Event Queue:

- Khởi động quá trình xử lý tiến trình từ client request

- Nếu Client Request không chứa nhiều Blocking I/O thì xử lý tất cả mọi thứ

và chuẩn bị cho quá trình gửi lại phản hồi cho phía client

- Nếu Client Request chứa nhiều Blocking I/O như việc tương tác với cơ sở

dữ liệu, tập tin hệ thống, dịch vụ mở rộng, thì nó sẽ thực hiện theo các phương pháp tiếp cận khác nhau

1 Kiểm tra các luồng sẵn có từ nội bộ bên trong của request gửi lên

2 Chọn một luồng và chỉ định cho client request tương ứng với luồng

đó

3 Luồng đó phải có trách nhiệm với request đó, xử lý nó, thực thi các hoạt động Blocking I/O, chuẩn bị các phản hồi và gửi lại cho Event Loop

4 Event Loop gửi lại phản hồi tương ứng cho client

Hình 5: Cơ chế EventLoop trong NodeJS

Mô tả sơ đồ như sau:

- Có n số lượng client gửi request lên web service Chúng ta giả định rằng chúng đều truy cập đồng thời vào ứng dụng Web của chúng ta

- Chúng ta giả định client của chúng ta là Client-1, Client-2, Client-n

- Web server của chúng ta duy trì một vùng các luồng có giới hạn và giả định rằng m là số luồng của vùng luồng đó

- NodeJS Web service nhận các request từ client-1, client-2, Client-n và đặt chúng vào trong Event Queue

- NodeJS Event Loop chọn các request theo dạng một đối một:

▪ Event Loop chọn client-1 request-1

o Kiểm tra trong client-1 request-1 có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp

o Request này thì đơn giản và Non-blocking I/O, nó không có đòi hỏi một xử lý nào riêng biệt

o Event Loop xử lý tất cả các giai đoạn để cung cấp cho hoạt động của client-1 request-1 (hoạt động ở đây nghĩa là các function của javascript)

và chuẩn bị response-1

o Event Loop gửi Response-1 đến Client-1

▪ Event Loop chọn client-2 request-2

o Kiểm tra trong client-2 request-2 có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp

o Request này thì đơn giản và Non-blocking I/O, nó không có đòi hỏi một xử lý nào riêng biệt

o Event Loop xử lý tất cả các giai đoạn để cung cấp cho hoạt động của client-2 request-2 và chuẩn bị response-2

o Event Loop gửi Response-2 đến Client-2

▪ Event Loop chọn client-n request-n

o Kiểm tra trong client-n request-n có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp

o Request này thì phức tạp và nhiệm vụ Blocking I/O Event Loop thì không thể xử lý request này ngay được

o Event Loop lựa chọn Thread T-1 từ nội bộ khu vực Thread và chỉ định Client-n Request-n này ánh xạ với Thread T-1

o Thread T-1 đọc và xử lý Request-n, thực hiện Blocking IO cần thiết hoặc tính toán nhiệm vụ, và hoàn tất để chuẩn bị Response-n

o Thread T-1 gửi Response-n này đến Event Loop

o Event Loop trong công đoạn này gửi Response-n này tới Client-n

Tại đây Client Request thì gọi đến một hoặc nhiều function javascript Các function Javascript có thể gọi tới các function khác hoặc có thể sử dụng chức năng callback đặc thù

1.1.4 NestJS là gì ?

NestJS[3] là một framework Node.JS cho phép xây dựng ứng dụng phía server Nest mở rộng các framework Node.js như Express hay Fastify để bổ sung thêm nhiều module hay thư viện hỗ trợ việc xử lý tác vụ Đây là một framework mã nguồn mở,

sử dụng TypeScript và rất linh hoạt để xây dựng các hệ thống backend

• Sử dụng TypeScript, cho phép thích ứng nhanh chóng với các thay đổi

khi JavaScript đang ngày càng phát triển mạnh mẽ

• Nguồn tài liệu hướng dẫn phong phú, chi tiết

• Quá trình unit testing trở nên đơn giản hơn

• Được xây dựng chuyên dùng cho các ứng dụng doanh nghiệp có quy

mô lớn

• Cung cấp kiến trúc ứng dụng độc lập, cho phép các lập trình viên tạo ra

những ứng dụng dễ kiểm tra, dễ mở rộng và dễ bảo trì

• Cho phép xây dựng ứng dụng Restful APIs, MVC, microservices,

GraphQL, Web Socket hay CRON job

• Cấu trúc chủ yếu dựa vào Angular – rất đơn giản và cho phép tập trung

vào việc thiết kế điểm cuối thay vì cấu trúc của ứng dụng

• Cung cấp các module, dịch vụ và controller giống Angular, cho phép

ứng dụng có khả năng mở rộng và kiểm tra tốt hơn so với Express hay Koa

1.2 RESTFUL APIs

1.2.1 Các khái niệm

• API (Application Programming Interface) là một tập các quy tắc và cơ chế mà

theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML

• REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu,

một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một

số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE đến một URL để xử lý dữ liệu

• RESTful APIs là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng

dụng web để quản lý các resource RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile) khác nhau giao tiếp với nhau

• Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method

(như GET, POST, PUT, DELETE) và cách định dạng các URL cho ứng dụng web

để quản các resource RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng

có thể sử dụng để thiết kế một RESTful API

1.2.2 Cách thức hoạt động

Hình 6: Cách thức hoạt động của Restful APIs

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên

sẽ sử dụng những phương thức HTTP riêng:

• GET (SELECT): Trả về một Resource hoặc một danh sách Resource

• POST (CREATE): Tạo mới một Resource

• PUT (UPDATE): Cập nhật thông tin cho Resource

• DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

1.3 VueJS

1.3.1 Khái niệm

Vue.js[4] là một framework javascript linh động, được tạo ra bởi Evan You, ra mắt vào tháng 2 năm 2014, dùng để xây dựng giao diện người dùng Khác với các framework nguyên khối, Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước Khi phát triển lớp giao diện, người dùng chỉ cần dùng thư viện lõi của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự

án có sẵn Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA - Single-Page Applications) với độ phức tạp cao hơn nhiều Phiên bản ổn định mới nhất của Vue là phiên bản 3.2.33 được phát hành vào ngày 14 tháng 4 năm 2022

1.3.2 Tại sao nên dùng VueJs ?

Hiện nay, trong các javascript framework được đánh giá trên Github, Vue đang giữ số sao đánh cao nhất trên 197 nghìn, theo sau đó là React với 191 nghìn sao Dưới đây là các lý do nên dùng VueJs:

• Không cần trải qua quá nhiều bước để build: Nếu sử dụng Vue thì bạn sẽ không cần phải trải qua quá nhiều bước để build mà có thể đi thẳng vào vấn

đề một cách dễ dàng Bởi vì, Vue không cần sử dụng build tool quá phức tạp mới có thể xây dựng ứng dụng, bạn chỉ cần khai báo một script là có thể phát triển một ứng dụng bằng Vue

• Vue có thể tạo cấu trúc project nhanh chóng hơn nhờ vào command line interface

• Hiện nay, tài liệu về Vue ngày càng đa dạng, rõ ràng về ngôn ngữ nên bạn

có thể dễ dàng trở thành chuyên gia về nó

• Vue sở hữu một hệ sinh thái vững chắc nên có thể cung cấp một số add-ons rất hữu ích cho việc xây dựng một ứng dụng fontend điển hình nhất Nó có thể bao gồm: vue-router, vuex, vue-test-utils, vue-dev-tools, vue-cli,…

• Core Vue sở hữu tính năng tối thiểu bởi khả năng tập trung vào việc render giao diện cho người dùng và các tương tác của nó Chính vì vậy, nó sẽ cung cấp tối thiểu những tính năng cần thiết cho việc thiết kế và xây dựng kiến trúc Nó sẽ giúp bạn loại bỏ được các tính năng không cần thiết ra khỏi thư viện trong lõi VueJs và đảm bảo cho framework nhỏ gọn và mềm dẻo hơn

1.3.3 Ưu, nhược điểm

1.3.3.1 Ưu điểm

Vue.js sử dụng kiến trúc MVC (Model-View-Controller) và có thể được sử dụng đồng bộ với các kiến trúc khác nhau như CBA (Component-Based Architecture)

Một số ưu điểm:

• Thư viện và công cụ hỗ trợ nhiều

• Yêu cầu lưu trữ thấp

• Đơn giản, dễ học

• Tài liệu đầy đủ

• Component và khả năng tái sử dụng

• Kiến trúc dựa trên thành phần (CBA)

• Dễ đọc, dễ bảo trì

• Tính thích ứng, thoải mái trong việc code

1.3.3.2 Nhược điểm

Một số nhược điểm của VueJS:

• Buông lỏng việc tích hợp dẫn đến cái gì cũng có thể sử dụng, gây ra lỗi

• Thiếu hỗ trợ tài chính cho các dự án quy mô lớn do vị thế chưa thể bằng Angular hay React

• Nguồn tài nguyên giới hạn

1.4 TypeScript

1.4.1 Khái niệm

TypeScript[5] là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh

và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng

để phát triển các ứng dụng chạy ở client-side và server-side TypeScript sử dụng tất

cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules

1.4.2 Các kiểu dữ liệu

• Any: Một biến với kiểu này có thể có giá trị là một string, number hoặc bất

kỳ kiểu nào

• String: Giống chức năng của string trong JavaScript, có thể được bao

quanh bởi ‘dấu nháy đơn’ hoặc “dấu nháy kép”

• Number: Tất cả giá trị số trong hàm đều được biểu diễn bởi kiểu number,

không có định nghĩa riêng cho số nguyên (interger), số thực (float) cũng như các kiểu khác

• Boolean: true hoặc false, sử dụng 0 và 1 sẽ gây ra lỗi biên dịch

• Arrays: Có 2 kiểu cú pháp: my_arr: number[]; hoặc my_arr: Array

<number>

• Void: sử dụng khi hàm không trả lại bất kỳ giá trị nào

1.4.3 Ưu, nhược điểm

từ các máy tính cá nhân đến kho dữ liệu hoặc dịch vụ Web có nhiều người dùng đồng thời

• PostgreSQL được phát triển bởi PostgreSQL Global Development Group, Phát hành lần đầu: 08/07/1996

• PostgreSQL linh động có thể chạy được trên nhiều nền tảng khác nhau như Mac

OS X, Solaris và Windows

• PostgreSQL là một phần mềm mã nguồn mở miễn phí bởi vậy PostgreSQL có thể được dùng, sửa đổi và phổ biến bởi bất kỳ ai cho bất kỳ mục đích nào

• Tính toàn vẹn của các giao dịch

• Việc kiểm tra truy cập đồng thời đa phiên bản

• Truy vấn xử lý song song

• Sao chép dữ liệu dạng luồng

1.5.2 Ưu, nhược điểm

1.5.2.1 Ưu điểm:

• Có khả năng chạy trang web, ứng dụng web động

• Lưu lại nhật ký, hình thành cơ sở dữ liệu hỗ trợ sửa lỗi

• Mã nguồn PostgreSQL luôn sẵn sàng để người dùng chỉnh sửa nâng cấp

• Hỗ trợ khách hàng theo từng vùng địa lý

• Cách thức sử dụng đơn giản

1.5.2.2 Nhược điểm:

• PostgreSQL không chịu sự quản lý của bất kỳ tổ chức nào gây khó

khăn để người tiếp cận với đầy đủ tính năng

• Có vô số ứng dụng ứng dụng mã nguồn mở không phải ứng dụng nào

cũng được hỗ trợ tốt

• Hiệu suất hoạt động chậm hơn so với MySQL

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

2.1 KHẢO SÁT HIỆN TRẠNG

Chúng em đã khảo sát thực tế trên 3 trang quản lý dự án thông dụng nhất trong thị trường hiện nay như ClickUp, Monday, Jira để qua đó xác định phạm vi đề tài

2.1.1 ClickUp

- Giao diện cơ bản của ClickUp:

ClickUp quản lí hệ thống các dự án với tên gọi là: “Spaces” Các “Spaces” này có thể được chia sẻ với nhiều người dùng khác nhau Mỗi người dùng sẽ có một vai trò cụ thể trong dự án và có thể thực hiện các chức năng được phân công theo vai trò

Hình 7: Trang chính của ClickUp

- Ví dụ về Spaces:

Hình 8: Ví dụ về Spaces

- Trong space có thể tạo các danh sách công việc hoặc các thư mục chứa các danh sách công việc:

Hình 9: Ví dụ về Space của ClickUp

- Trong 1 danh sách có thể tạo các công việc có trong kế hoạch của dự án, ở giao diện này, ta có thể thực hiện lọc theo tên, trạng thái, mức độ ưu tiên, người được phân công của các tác vụ

Hình 10: Danh sách tác vụ ở ClickUp

- Màn hình miêu tả chi tiết của 1 công việc: Gồm chi tiết về tác vụ, những người dùng được phân công, lịch sử chỉnh sửa tác vụ và danh sách các công việc phụ đính kèm

Hình 11: Màn hình mô tả công việc ở ClickUp

2.1.2 Monday.com

- Giao diện cơ bản có thư mục công việc (workspace), trong các thư mục chứa các bảng công việc, trong bảng công việc chứa thông tin các công việc cần làm

Hình 12: Trang chủ của Monday.com

- Workspace:

o Có thể tạo các thư mục công việc khác nhau

Hình 13: Minh hoạ về workspace của Monday.com

- Bảng công việc:

o Bảng công việc chứa công việc cần làm:

Hình 14: Danh sách bảng công việc ở Monday.com

- Danh sách công việc (Task):

o Danh sách công việc với các thông tin về người được phân công, trạng thái, ngày bắt đầu và các công việc được chia vào các nhóm khác nhau

Hình 15: Danh sách công việc trong bảng ở Monday.com

- Chi tiết bảng công việc:

o Gồm có mô tả công việc, danh sách tệp đính kèm và lịch sử chỉnh sửa công việc

Hình 16: Chi tiết công việc trong bảng ở Monday.com

2.1.3 Jira

- Jira cho phép người dùng tạo dự án và mời những người dùng khác vào các dự án Trong đó có các bảng công việc để kiểm soát tiến độ công việc với 3 trạng thái chính ban đầu và các trạng thái phụ có thể tuỳ chỉnh

Hình 17: Màn hình chính của dự án ở Jira

- Ở Jira, các tác vụ cần được tạo ở Backlog và cần được đưa vào 1 sprint đang hoạt động để có thể thấy được ở bảng công việc:

Hình 18: Backlog ở Jira

Hình 19: Danh sách công việc cần làm ở Jira

2.2 XÁC ĐỊNH YÊU CẦU

2.2.1 Yêu cầu chức năng

o Lưu trữ thông tin

● Lưu thông tin của người dùng trên hệ thống

● Lưu thông tin của các bảng

● Lưu thông tin của các công việc

● Lưu thông tin phản hồi lỗi

o Tìm kiếm/ Tra cứu

● Tìm kiếm, tra cứu công việc

o Quản lý công việc

● Lọc thông tin công việc theo từng người dùng

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

● Nâng cao trải nghiệm người dùng: đơn giản, hiệu quả, nhanh

● Tìm kiếm nhanh và chính xác

● Có thể thiết kế thêm chức năng theo yêu cầu

2.3 MÔ HÌNH HOÁ YÊU CẦU

2.3.1 Lược đồ usecase

2.3.1.1 Usecase cho người dùng

Hình 20: Usecase cho người dùng

2.3.1.2 Usecase cho người quản trị

Hình 21: Usecase cho người quản trị