đồ án 2 xây dựng nền tảng hỗ trợ quản lý công việc

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

XÂY DỰNG NỀN TẢNG HỖ TRỢQUẢN LÝ CÔNG VIỆC

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

Trần Đình KhôiMSSV: 20520224Trần Quang PhúcMSSV: 20520279

TP.HCM, Tháng 12 năm 2023

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

XÂY DỰNG NỀN TẢNG HỖ TRỢQUẢN LÝ CÔNG VIỆC

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

Trần Đình KhôiMSSV: 20520224Trần Quang PhúcMSSV: 20520279

TP.HCM, Tháng 12 năm 2023

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Đồ án “Xây dựng nền tảng hỗ trợ quản lý công việc” là một sản phẩm mà nhómđã bỏ nhiều tâm huyết để hoàn thiện Bên cạnh đó, không thể không nhắc đếnnhững sự hỗ trợ, đóng góp từ quý thầy cô

Nhóm muốn gửi lời cảm ơn sâu sắc đến Ths.Trần Thị Hồng Yến đã tận tìnhhướng dẫn, đưa ra những góp ý, định hướng để nhóm có thể hoàn thành đồ án.Chúng em sẽ luôn biết ơn và ghi nhớ những bài học đó.

Ngoài ra, nhóm cũng xin gửi lời cảm ơn đến quý thầy cô trường Đại học Côngnghệ Thông tin - những người đã mang đến cho chúng em những kỹ năng, kiến thứccần thiết góp phần không nhỏ vào quá trình thực hiện đồ án.

Trong quá trình thực hiện đồ án, nhóm có thể gặp những sai sót, vì thế chúng emrất mong nhận được những góp ý, hỗ trợ từ cô để có thể hoàn thiện đồ án hơn.

Chúng em xin chân thành cảm ơn cô.

TP.HCM, ngày 21 tháng 12 năm 2023Nhóm sinh viên thực hiện Trần Đình Khôi – Trần Quang Phúc

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

TRƯỜNG ĐẠI HỌCCÔ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

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Xây dựng Website hỏi đáp cho lập trình viênCán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 11/9/2023 đến ngày 31/12/2023Sinh viên thực hiện:

Trần Đình Khôi – 20520224Trần Quang Phúc - 20520279

Nội dung đề tài:1 Giới thiệu đề tài

Quản lý công việc là một vấn đề quan trọng trong thời đại số hóa ngày nay.Trong môi trường kinh doanh đang ngày càng phát triển, việc theo dõi và quản lýcông việc một cách hiệu quả là vô cùng quan trọng để đảm bảo chất lượng côngviệc của từng cá nhân, cũng như sự thành công và sự cạnh tranh của các tổ chứcvà doanh nghiệp Để đáp ứng nhu cầu này, nền tảng quản lý công việc đã trởthành một công cụ hữu ích.

Đề tài này nhằm mục đích nghiên cứu và phát triển một nền tảng quản lý côngviệc đáp ứng đầy đủ các yêu cầu của tổ chức, từ việc giao việc, theo dõi tiến độ,đánh giá hiệu suất, và tạo ra báo cáo chi tiết Nền tảng này sẽ được phát triển dựatrên công nghệ web để đảm bảo tính tiện lợi trong việc quản lý công việc trựctuyến.

Mục tiêu của đề tài là tạo ra một sản phẩm hoàn chỉnh, dễ sử dụng và tùy chỉnhtheo từng yêu cầu cụ thể, giúp tổ chức nâng cao năng suất, tối ưu hóa tài nguyên,và quản lý công việc một cách hiệu quả Ngoài ra, nền tảng này cũng sẽ giúpgiảm thiểu sự phụ thuộc vào các công cụ quản lý công việc từ bên ngoài và tạo ramột hệ thống quản lý công việc toàn diện và an toàn cho các tổ chức và doanh

2 Mô tả chi tiết mục tiêu

- Hiểu về NextJS, ReactJS, Golang cũng như có thể áp dụng những công nghệnày vào đồ án.

- Tạo nên một ứng dụng có giao diện trực quan, dễ sử dụng, dễ tiếp cận ngườidùng, có khả năng mở rộng cao.

- Xây dựng được nền tảng hỗ trợ quản lý công việc hiệu quả giúp mang lại trảinghiệm tốt cho người dùng.

- Sản phẩm tạo ra có tính ứng dụng cao, có khả năng đưa vào sử dụng thực tế.

3 Phạm vi

‒ Phạm vi môi trường

 Ứng dụng hoạt động trên nền tảng Website.

‒ Phạm vi chức năng

 Đăng nhập, đăng ký, đặt lại mật khẩu

 Tìm kiếm Không gian làm việc, Bảng và Thẻ Quản lý Không gian làm việc

 Quản lý Bảng

 Quản lý Nhiệm vụ trong bảng

 Gợi ý thành viên phù hợp với nhiệm vụ Đánh giá công việc

 Tóm tắt các công việc (công việc nào chưa hoàn thành, công việc nào cần hoàn thành)

‒ Tiến hành khảo sát hiện trạng các website hỗ trợ quản lý công việc phổ biến

như Notion, Trello, Jira, … để từ đó có cái nhìn tổng quan và định hướng sắptới cho đề tài.

‒ Back-End: Go, framework Gin.

‒ Database: MongoDB, AWS S3, Cloudinary.‒ Quản lý Source code: Git, Github.

7 Kết quả mong đợi

‒ Hiểu rõ và áp dụng được các công nghệ để hiện thực đề tài.‒ Hiểu rõ được thiết kế của một hệ thống hỗ trợ quản lý công việc.

‒ Xây dựng được một website đáp ứng được các yêu cầu và chức năng đã đề ra,mang đến sự tiện lợi và trải nghiệm tốt cho người dùng.

‒ Sản phẩm có tính thực tiễn cao, đồng thời có khả năng mở rộng trong tươnglai.

Kế hoạch thựchiện:

Xác nhận của CBHD

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

TP HCM, ngày….tháng … năm… Sinh viên 1

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

Sinh viên 2

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

STTTên công việcThời gian dự

Triển khai chức năng Quản lý

Không gian làm việc 2/10/2023 8/10/2023

-Trần Đình KhôiThiết kế API quản lý Không

thành viên phù hợp 23/10/2023 5/11/2023

Trần Đình Khôi

Trần Đình KhôiTrần Quang Phúc

1.5 Đối tượng nghiên cứu 25

1.6 Phương pháp nghiên cứu 25

3.1.2 Mô tả các thành phần trong kiến trúc hệ thống 38

3.2 Phân tích yêu cầu 39

3.2.1 Đăng ký 39

3.2.2 Đăng nhập 39

3.2.3 Xem danh sách workspace 39

3.2.4 Xem chi tiết bảng 39

3.2.5 Tìm kiếm bảng, thẻ, workspace 40

3.2.6 Tạo bảng 40

3.2.7 Tạo thẻ 40

3.2.8 Quản lý thông tin tài khoản cá nhân 40

3.2.9 Chat với trợ lý ảo 40

3.3 Thiết kế hệ thống 41

3.3.1 Sơ đồ Use-case tổng quát 41

3.3.1.1 Sơ đồ Use Case của người dùng chưa đăng nhập 41

3.3.1.2 Sơ đồ Use Case của người dùng đã đăng nhập 42

3.3.2 Danh sách Actor 42

3.3.3 Danh sách Use Case 43

3.3.4 Đặc tả Use Case 45

3.3.4.1 Đặc tả Use Case Đăng ký 45

3.3.4.2 Đặc tả Use Case Đăng nhập 46

3.3.4.3 Đặc tả Use Case Đăng nhập với Goole 47

3.3.4.4 Đặc tả Use Case Quên mật khẩu 48

3.3.4.5 Đặc tả Use Case Quản lý thông tin tài khoản 49

3.3.4.6 Đặc tả Use Case Sửa thông tin tài khoản 50

3.3.4.7 Đặc tả Use Case Đổi mật khẩu 51

3.3.4.8 Đặc tả Use Case Quản lý workspaces 52

3.3.4.9 Đặc tả Use Case Tạo workspace 53

3.3.4.10 Đặc tả Use Case Chỉnh sửa workspace 54

3.3.4.11 Đặc tả Use Case Quản lý thành viên workspace 55

3.3.4.12 Đặc tả Use Case Quản lý bảng 56

3.3.4.13 Đặc tả Use Case Tạo bảng 57

3.3.4.14 Đặc tả Use Case Chỉnh sửa bảng 58

3.3.4.15 Đặc tả Use Case Xoá bảng 59

3.3.4.16 Đặc tả Use Case Quản lý thành viên bảng 60

3.3.4.17 Đặc tả Use Case Xem thống kê dữ liệu bảng 61

3.3.4.19 Đặc tả Use Case Tạo cột 63

3.3.4.20 Đặc tả Use Case Chỉnh sửa cột 64

3.3.4.21 Đặc tả Use Case Xoá cột 65

3.3.4.22 Đặc tả Use Case Quản lý thẻ 66

3.3.4.23 Đặc tả Use Case Tạo thẻ 67

3.3.4.24 Đặc tả Use Case Chỉnh sửa thẻ 68

3.3.4.25 Đặc tả Use Case Xoá thẻ 69

3.3.4.26 Đặc tả Use Case Thông báo 70

3.3.4.27 Đặc tả Use Case Chat với trợ lý ảo 71

3.3.4.28 Đặc tả Use Case Tóm tắt nội dung bảng 72

3.4 Thiết kế dữ liệu 73

3.4.1 Sơ đồ Logic 73

3.4.2 Danh sách các bảng trong cơ sở dữ liệu 73

3.4.3 Mô tả chi tiết các bảng 74

DANH MỤC BẢNG

Bảng 3.1 Bảng mô tả các thành phần của kiến trúc hệ thống 38

Bảng 3.2 Bảng danh sách Actor 42

Bảng 3.3 Danh sách Use Case 43

Bảng 3.4 Use Case Đăng ký 45

Bảng 3.5 Use Case Đăng nhập 46

Bảng 3.6 Use Case Đăng nhập với Google 47

Bảng 3.7 Use Case Quên mật khẩu 48

Bảng 3.8 Use Case Quản lý thông tin tài khoản 49

Bảng 3.9 Use Case Sửa thông tin tài khoản 50

Bảng 3.10 Use Case Đổi mật khẩu 51

Bảng 3.11 Use Case Quản lý workspaces 52

Bảng 3.12 Use Case Tạo workspace 53

Bảng 3.13 Use Case Chỉnh sửa workspace 54

Bảng 3.14 Use Case Quản lý thành viên workspace 55

Bảng 3.15 Use Case Quản lý bảng 56

Bảng 3.16 Use Case Tạo bảng 57

Bảng 3.17 Use Case Chỉnh sửa bảng 58

Bảng 3.18 Use Case Xoá bảng 59

Bảng 3.19 Use Case Quản lý thành viên bảng 60

Bảng 3.20 Use Case Xem thống kê dữ liệu bảng 61

Bảng 3.21 Use Case Quản lý cột 62

Bảng 3.22 Use Case Tạo cột 63

Bảng 3.23 Use Case Chỉnh sửa cột 64

Bảng 3.24 Use Case Xoá cột 65

Bảng 3.25 Use Case Quản lý thẻ 66

Bảng 3.26 Use Case Tạo thẻ 67

Bảng 3.27 Use Case Chỉnh sửa thẻ 68

Bảng 3.28 Use Case Xoá thẻ 69

Bảng 3.29 Use Case Thông báo 70

Bảng 3.30 Use Case Chat với trợ lý ảo 71

Bảng 3.31 Use Case Tóm tắt nội dung bảng 72

Bảng 3.32 Danh sách các bảng trong cơ sở dữ liệu 73

Bảng 3.33 Mô tả chi tiết bảng users 74

Bảng 3.34 Mô tả chi tiết bảng workspaces 75

Bảng 3.35 Mô tả chi tiết bảng boards 75

Bảng 3.36 Mô tả chi tiết bảng columns 76

Bảng 3.37 Mô tả chi tiết bảng cards 76

Bảng 3.38 Mô tả chi tiết bảng labels 77

Bảng 4.1 Bảng danh sách các màn hình 80

Hình 3.2 Sơ đồ Use Case của người dùng chưa đăng nhập 41

Hình 3.3 Sơ đồ Use Case của người dùng đã đăng nhập 42

Hình 3.4 Sơ đồ Logic hoàn chỉnh 73

Hình 3.6 Mô tả chi tiết bảng board_members 78

Hình 4.1 Màn hình Đăng nhập với email và mật khẩu 81

Hình 4.2 Màn hình Đăng nhập với Google 81

Hình 4.10 Màn hình lọc Board theo label 86

Hình 4.11 Màn hình Xem thời gian biểu của Board 87

Hình 4.12 Màn hình Đánh giá công việc 87

Hình 4.13 Màn hình Thêm thành viên vào Board 88

Hình 4.14 Màn hình Xem danh sách thành viên của Board 88

Hình 4.15 Màn hình Kéo thả Column 89

Hình 4.16 Màn hình Kéo thả Card 89

Hình 4.17 Màn hình Quản lý Card 90

Hình 4.18 Màn hình Quản lý tài khoản 91

Hình 4.19 Màn hình Tìm kiếm 92

Hình 4.20 Màn hình Tìm kiếm không có kết quả 92

Hình 4.21 Màn hình Thông báo (thông báo chưa đọc) 93

Hình 4.22 Màn hình Thông báo (tất cả thông báo) 93

Hình 4.23 Màn hình Light mode 94

Hình 4.24 Màn hình Dark mode 94

Hình 4.25 Màn hình chat với ChatGPT 95

Hình 4.26 Màn hình Tổng hợp công việc 95

TÓM TẮT ĐỒ ÁN

Đồ án "Xây dựng nền tảng hỗ trợ công việc" nhằm tạo ra một ứng dụng trựctuyến giúp người dùng quản lý công việc một cách thuận tiện và hiệu quả Ứngdụng này được xây dựng để cung cấp một nền tảng linh hoạt cho người dùng tổchức công việc cá nhân hoặc nhóm, theo dõi tiến độ và tương tác dễ dàng với cáccông việc đã được giao.

Ứng dụng được thiết kế với các tính năng chính như tạo, chỉnh sửa, và di chuyểncác thẻ công việc trên bảng, gán người dùng vào các thẻ công việc, thiết lập thờihạn, đính kèm tập tin và bình luận để tương tác nhanh chóng Các bảng là một phầnquan trọng, cho phép người dùng tổ chức công việc theo các danh mục khác nhauvà chia sẻ chúng với thành viên trong nhóm làm việc Cụ thể, phần trình bày của đồán được nhóm em thực hiện qua 5 chương dưới đây:

1 Chương 1: Giới thiệu chung Chương này sẽ giới thiệu về đề tài, lý do chọn

đề tài, hiện trạng thực tế, phạm vi, mục đích nghiên cứu….

2 Chương 2: Công nghệ sử dụng Chương này giới thiệu các công nghệ sử

dụng trong đề tài.

3 Chương 3: Thiết kế hệ thống Mô tả các thành phần trong hệ thống và cách

hoạt động, mô tả chi tiết các Use case của đề tài, mô tả thiết kế dữ liệu với sơđồ logic và mô tả chi tiết các bảng trong database.

4 Chương 4: Xây dựng ứng dụng Mô tả chi tiết giao diện của ứng dụng với

hình vẽ.

5 Chương 5: Tổng kết Chương này tổng kết lại những gì đạt được trong đề

tài, ưu điểm, nhược điểm và hướng phát triển.

Chương 1: GIỚI THIỆU ĐỀ TÀI

1.1 Lý do chọn đề tài

Xây dựng một nền tảng hỗ trợ quản lý công việc là một đề tài thú vị và mangđến nhiều giá trị, đặc biệt trong bối cảnh công nghệ thông tin phát triển mạnh mẽhiện nay Lựa chọn của nhóm đối với đề tài này đến từ việc nhận thức về nhữngthách thức mà chúng ta đang phải đối mặt trong quá trình quản lý công việc, và cơhội mà công nghệ cung cấp để giải quyết những vấn đề này.

Trước hết, quản lý công việc truyền thống thường gặp nhiều khó khăn trong việctổ chức thông tin, giao tiếp và theo dõi tiến độ công việc Môi trường làm việc đadạng và phức tạp yêu cầu một hệ thống linh hoạt có thể thích ứng nhanh chóng vớisự thay đổi Một nền tảng trực tuyến không chỉ giúp tối ưu hóa quy trình làm việcmà còn tạo điều kiện cho sự tích hợp thông tin và tương tác linh hoạt giữa các thànhviên trong nhóm.

Hơn nữa, thách thức về quản lý thời gian và tài nguyên là một vấn đề nổi bật.Một nền tảng hiệu quả sẽ giúp theo dõi và phân phối công việc một cách thôngminh, từ đó tối ưu hóa nguồn lực và giảm thiểu rủi ro sai sót Công nghệ thông tin,đặc biệt là trí tuệ nhân tạo và phân tích dữ liệu, sẽ đóng vai trò quan trọng trongviệc đưa ra các đề xuất, tiến độ, và cung cấp thông tin một cách trực quan.

Ngoài ra, yếu tố của sự linh hoạt và tiện lợi cũng là một lý do lớn khi chọn đề tàinày Sự linh động của môi trường làm việc hiện đại yêu cầu một nền tảng có thểtruy cập từ mọi thiết bị, bất kỳ nơi nào và bất kỳ lúc nào Điều này giúp tăng cườngkhả năng làm việc của nhóm, đặc biệt là khi họ cần phải làm việc từ xa hoặc khi cósự thay đổi bất ngờ trong kế hoạch.

Việc xây dựng nền tảng hỗ trợ quản lý công việc không chỉ là một đề tài hấp dẫnvề mặt kỹ thuật mà còn mang lại giá trị lớn trong việc cải thiện hiệu suất làm việcvà quản lý tài nguyên trong môi trường làm việc ngày nay Sự kết hợp giữa côngnghệ thông tin và các giải pháp quản lý công việc sẽ giúp tạo ra một công cụ mạnh

mẽ, đáp ứng đa dạng và linh hoạt, giúp chúng ta đạt được mục tiêu của mình mộtcách hiệu quả và bền vững.

Từ những lợi ích to lớn, sự hiệu quả và sức ảnh hưởng kể trên, nhóm đã quyếtđịnh chọn đề tài “Xây dựng nền tảng hỗ trợ quản lý công việc” để phát triển trongđồ án 2.

1.2 Hiện trạng thực tế và cách giải quyết vấn đề1.2.1 Hiện trạng

Trong lĩnh vực xây dựng website hỗ trợ quản lý công việc hiện nay đã có khôngít các hướng nghiên cứu phong phú, đa dạng, một trong số đó có thể kể đến như:

‒ Giao diện và trải nghiệm người dùng:

 Nhiều nghiên cứu đã tập trung vào việc thiết kế giao diện người dùng hấpdẫn và thân thiện, tạo ra trải nghiệm thuận tiện và dễ dàng cho ngườidùng.

 Các phương pháp như nghiên cứu người dùng để hiểu rõ hơn về đốitượng người sử dụng trang web, tối ưu hóa tốc độ trang web, sử dụngmàu sắc hài hòa và phù hợp, … đã được nghiên cứu và áp dụng để cảithiện hiệu quả làm việc trên các nền tảng.

‒ Nhu cầu về quản lý tài nguyên:

 Đối với một trang web hỗ trợ quản lý công việc, việc tối ưu quá trìnhquản lý tài nguyên luôn là một trong những ưu tiên hàng đầu.

 Các nghiên cứu cũng đã tận dụng quá trình phân tích và dự đoán nhu cầutài nguyên để ước tính mức độ tăng trưởng trong tương lai.

‒ Sự phối hợp giữa các thành viên trong nhóm:

 Đa số các nền tảng ngày nay đều ra sức mang đến sự phối hợp mượt màgiữa các thành viên trong nhóm, giúp tối ưu hóa nguồn lực và kỹ năngcủa từng cá nhân Ngoài ra, công việc được phân chia đều, tránh tìnhtrạng chồng chéo hoặc thiếu sót, từ đó tăng cường hiệu quả toàn bộnhóm.

‒ Tính bảo mật:

 Tăng cường tính bảo mật cho trang web là một quy trình không ngừng vàđòi hỏi sự chú ý đặc biệt từ phía các nhà phát triển.

 Có thể nói, các trang web ngày nay đã chú ý hơn về vấn đề này, nghiêmtúc đầu tư thời gian và nguồn nhân lực để tăng cường độ bảo mật vềthông tin, dữ liệu.

1.2.2 Giải quyết vấn đề

Cùng với những hướng nghiên cứu nổi bật và những hướng đi mới mẻ mang lạitính đột phá cho đề tài, đi kèm với đó vẫn còn một số vấn đề cần tập trung nghiêncứu giải quyết như:

‒ Thông tin và số liệu trực quan: một trong những vấn đề quan trọng trong

quản lý công việc là đảm bảo thể hiện thông tin chính xác và số liệu một trựcquan, bởi vì đó là căn cứ để người dùng đưa ra những quyết định quan trọngcũng như hiểu rõ tình hình công việc Hơn nữa, các nền tảng nên đưa ra cácthông tin và số liệu giúp đánh giá hiệu suất của từng thành viên trong nhóm,hay theo dõi tiến độ của các công việc, xác định công việc đã hoàn thành,đang tiến hành, hay đang gặp khó khăn.

‒ Theo dõi thời gian biểu của các công việc: bên cạnh việc cung cấp những

số liệu thể hiện tình hình công việc, việc theo dõi thời gian biểu giúp ngườidùng có được một cái nhìn tổng quan về dòng thời gian của toàn bộ nhữngcông việc Người dùng có thể xác định công việc nào quan trọng và đòi hỏisự ưu tiên cao, ước lượng thời gian cho các công việc và dự báo chính xáchơn về thời gian hoàn thành.

‒ Tổng hợp số liệu: các nền tảng hiện chỉ dừng lại ở việc đưa ra số liệu, nhưng

chưa chú ý đến việc tổng hợp chúng sao cho dễ đọc, dễ hiểu, hơn nữa là nhắcnhở người dùng cần tập trung, ưu tiên vào những công việc nào Các nềntảng cần chú ý vào vấn đề này, cung cấp những giải pháp hiệu quả và cónhững hướng đi mới đột phá.

‒ Trợ lý ảo: trong quá trình làm việc, người dùng sẽ luôn gặp phải những vấn

câu trả lời phù hợp và nhanh chóng Nó cung cấp một giao diện tương tác tựnhiên, giúp người dùng tương tác với hệ thống một cách dễ dàng và linhhoạt Bạn có thể hỏi về bất kỳ vấn đề gì mà bạn đang gặp phải trong côngviệc, trở lý ảo sẽ cung cấp thông tin chính xác và liên quan Trong làn sóngvà nhiều sự chú ý đổ dồn về AI, đây có thể nói là một hướng nghiên cứu thúvị trong thời gian tới.

 Đăng nhập, đăng ký, đặt lại mật khẩu.

 Tìm kiếm Không gian làm việc, Bảng và Thẻ. Quản lý Không gian làm việc.

 Quản lý Bảng.

 Quản lý Nhiệm vụ trong bảng.

 Gợi ý thành viên phù hợp với nhiệm vụ. Đánh giá công việc.

 Xem thời gian biểu của các công việc.

 Tóm tắt các công việc (công việc nào chưa hoàn thành, công việc nào cần hoàn thành).

 Chat với ChatGPT.

1.6 Phương pháp nghiên cứu

‒ Nghiên cứu từ những website đang có trên thị trường hiện nay như:Stackoverflow, Reddit, Voz,… Từ đó rút ra những ưu, nhược điểm về cả tínhnăng lẫn giao diện và đưa ra giải pháp cho phần mềm của mình.

‒ Tìm hiểu những công nghệ cần thiết và phù hợp với nhu cầu của đề tài.‒ Tìm hiểu và áp dụng những kiến trúc, mẫu thiết kế cho từng phần của dự án

để đạt hiệu quả tối đa có thể.

‒ Tham khảo ý kiến đóng góp của giảng viên hướng dẫn để phát triển đề tài đạtđược kết quả tốt nhất.

Những điểm nổi bật của NextJS:‒ Server-side Page (Pre-)Rendering:

 Server-side rendering là việc chuẩn bị dữ liệu cho một trang ở phía serverthay vì client NextJS sẽ pre-render trang, chuẩn bị toàn bộ dữ liệu cầnthiết cho một trang Khi một request được gửi đến server, một trang hoànchỉnh sẽ được cấp phát tới user và search engine crawlers, user sẽ khôngphải chờ đến khi việc lấy dữ liệu hoàn thành và search engine crawlerscũng có thể thấy được nội dung bên trong trang.

‒ File-based routing:

 Đối với các React app thông thường chúng ta cần phải dùng đến ReactRouter và config từng route tương ứng với từng trang Nhưng đối vớiNextJS nó định nghĩa các trang dựa vào các files được đặt trong 1 thưmục đặc biệt là pages hoặc app Đối với pages, một trang là một ReactComponent được export từ file js, jsx, ts, hoặc tsx Đối với app, mộttrang sẽ được tạo ra dựa theo file đặc biệt được đặt tên là page.

‒ Fullstack React Apps:

 NextJS được xem là một fullstack framework, bởi vì chúng ta có thể dễdàng thêm backend code vào project Trước đây nếu chúng ta muốn lấydữ liệu từ database, thì cần phải có API và xây dựng một REST APIproject độc lập Nhưng với NextJS, tất cả chỉ xảy ra trong một projectduy nhất, chúng ta vừa có client code, vừa có backend code được gói gọnvào một project.

2.1.2 Lý do sử dụng

‒ Hỗ trợ SSR tích hợp để tăng hiệu suất và SEO

‒ Ứng dụng Next.js tải nhanh hơn đáng kể so với ứng dụng React do đượcrender phía Server.

‒ Hỗ trợ các tính năng cho static web.

‒ Đối với những ai đã có kinh nghiệm làm việc với React thì việc tiếp tậpNextJS sẽ là một việc dễ dàng.

‒ Tự động code splitting cho các page nhằm tối ưu hoá performance khi loadtrang.

‒ Dễ dàng xây dựng các API internal thông qua các API routes tích hợp sẵn vàtạo các endpoint API.

‒ Hỗ trợ tích hợp cho route cho page, CSS, JSX và TypeScript.

‒ Nhanh chóng thêm các plugin để tùy chỉnh Next.js theo nhu cầu của trang cụthể.

Một số điểm nổi bật của ReactJS:

‒ Component-Based Architecture: React tuân theo một kiến trúc dựa trêncomponent, trong đó giao diện người dùng được chia thành các componentnhỏ, có thể tái sử dụng Mỗi component đóng gói logic và giao diện củariêng nó, và chúng có thể được kết hợp và lồng nhau để xây dựng giao diệnphức tạp.

‒ DOM ảo (Virtual DOM): React sử dụng một DOM ảo (Virtual DOM) để tốiưu hóa hiệu suất hiển thị DOM ảo là một phiên bản nhẹ của DOM thực tế,và React sử dụng nó để theo dõi các thay đổi và cập nhật chỉ các phần cầnthiết của UI.

‒ JSX: JSX (JavaScript XML) là một cú pháp mở rộng được sử dụng trongReact để viết mã tương tự HTML trực tiếp trong JavaScript JSX cho phépkết hợp HTML và JavaScript một cách khai báo và trực quan hơn.

‒ Luồng dữ liệu một chiều (Uni-directional Data Flow): React tuân theo mộtluồng dữ liệu một chiều, còn được gọi là one-way data binding Điều này cónghĩa là dữ liệu chảy từ các component cha tới các component con thông qua

các thuộc tính (props), và bất kỳ thay đổi trong các thành phần con khôngảnh hưởng trực tiếp đến các thành phần cha.

‒ React Hooks: Được giới thiệu từ phiên bản React 16.8, React Hooks là cáchàm cho phép sử dụng trạng thái và các tính năng React khác trong cácfunctional component Hooks cho phép các functional component có trạngthái cục bộ, quản lý các hiệu ứng phụ (side effects) và tận dụng các lifecyclemethod của React mà không cần sử dụng các class component.

‒ React Router: React Router là một thư viện phổ biến cung cấp tính năng địnhtuyến (routing) khai báo cho các ứng dụng React Nó cho phép định nghĩacác đường dẫn khác nhau và các thành phần tương ứng của chúng, giúp điềuhướng giữa các giao diện khác nhau trong một ứng dụng đơn trang (single-page application).

2.2.2 Lý do sử dụng

‒ Hiệu suất cao: ReactJS sử dụng cơ chế gọi là Virtual DOM (DOM ảo) đểquản lý các thay đổi trong giao diện người dùng Thay vì cập nhật toàn bộDOM, ReactJS chỉ cập nhật những phần cần thiết, giúp tăng hiệu suất vàtăng tốc độ tải trang.

‒ Tính tái sử dụng cao: ReactJS khuyến khích việc xây dựng các thành phầnUI để có thể tái sử dụng Bằng cách sử dụng các component độc lập và cókhả năng tái sử dụng, chúng ta có thể xây dựng giao diện người dùng linhhoạt và dễ bảo trì.

‒ Quản lý trạng thái dễ dàng: ReactJS sử dụng khái niệm "one-way data flow"(luồng dữ liệu một chiều), điều này giúp dễ dàng quản lý trạng thái của ứngdụng Dữ liệu trong ReactJS được truyền xuống các component con thôngqua props, và bất kỳ thay đổi nào đều được xử lý thông qua hàm gọi"setState".

‒ Cộng đồng lớn: ReactJS có một cộng đồng rộng lớn và năng động Hiện naycó rất nhiều tài liệu, ví dụ và thư viện hữu ích trong quá trình phát triển.

‒ Redux giúp quản lý trạng thái ứng dụng một cách dễ dàng Nó áp dụng kiếntrúc Flux, nơi dữ liệu trong ứng dụng được lưu trữ trong một "store" duynhất Trạng thái của ứng dụng chỉ có thể được thay đổi thông qua các"actions", và các hành động này được xử lý bởi các "reducers".

‒ Dưới đây là một số khái niệm quan trọng trong Redux:

 Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứngdụng Redux nào Có thể access các state được lưu, update state, và đăngký or hủy đăng ký các listeners thông qua helper methods.

 Action: đơn giản là các events Chúng là cách mà chúng ta send data từapp đến Redux store Những data này có thể là từ sự tương tác của uservs app, API calls hoặc cũng có thể là từ form submission.

 Reducer: là các function nguyên thủy chúng lấy state hiện tại của app,thực hiện một action và trả về một state mới Những states này được lưunhư những objects và chúng định rõ cách state của một ứng dụng thay đổitrong việc phản hồi một action được gửi đến store.

Hình 2.4 Kiến trúc của Redux

2.3.2 Lý do sử dụng

‒ Quản lý trạng thái ứng dụng dễ dàng: Redux giúp quản lý trạng thái của ứngdụng một cách rõ ràng và có cấu trúc Trạng thái được lưu trữ trong mộtnguồn duy nhất gọi là "store", giúp đơn giản hóa việc theo dõi và cập nhậttrạng thái của ứng dụng.

‒ Dễ dàng theo dõi và gỡ lỗi: Với Redux, mọi thay đổi trạng thái trong ứngdụng đều được ghi lại trong các hành động (actions) Điều này giúp dễ dàngtheo dõi và xác định nguyên nhân của các thay đổi trong trạng thái ứng dụng,tạo điều kiện thuận lợi cho việc gỡ lỗi.

‒ Tái sử dụng code: Redux khuyến khích việc tách biệt logic xử lý dữ liệu vàgiao diện người dùng Điều này giúp tạo ra các hàm reducers có thể tái sửdụng, đồng thời giảm thiểu sự phụ thuộc giữa các thành phần khác nhautrong ứng dụng.

‒ Cộng đồng mạnh mẽ và hỗ trợ tốt: Redux có một cộng đồng lớn và phongphú, với nhiều tài liệu, ví dụ và các thư viện hỗ trợ phát triển.

2.4 MongoDB2.4.1 Giới thiệu

Hình 2.5 Logo MongoDB

‒ MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ, mã nguồn mở, hướngtài liệu (Document-Oriented) MongoDB được phát triển bởi MongoDB Incvà ra mắt vào tháng hai năm 2009.

‒ MongoDB lưu trữ dữ liệu trong document kiểu JSON (Binary JSON) thay vìdạng bảng như các hệ sở dữ liệu quan hệ nên công việc truy vấn sẽ rất nhanh.‒ Những điểm mạnh của MongoDB bao gồm:

 Linh hoạt: Các document của MongoDB không yêu cầu phải có mộtSchema cố định như các hệ quản trị cơ sở dữ liệu quan hệ.

 Dễ dàng mở rộng: MongoDB hỗ trợ tốt trong khả năng mở rộngtheochiều ngang (Horizontal Scalability), nghĩa là khi cần nâng cao hiệu nănglưu trữ và truy xuất, chúng ta chỉ cần bổ sung thêm server.

 Hiệu năng cao: MongoDB lưu trữ dữ liệu dưới dạng Bson và truy vấn sửdụng ngôn ngữ MQL (MongoDB Query Language) nên có hiệu suất truyvấn cao.

2.4.2 Lý do sử dụng

‒ MongoDB lưu trữ dữ liệu dưới dạng Bson, được xây dựng dựa trên Json vàsử dụng ngôn ngữ MQL, được xây dựng dựa trên JavaScript Vì thế hệ quản

trị cơ sở dữ liệu sẽ tương thích tốt với lại server được xây dựng bằngJavaScript, từ đó nâng cao tốc độ phát triển.

‒ MongoDB dễ dàng cài đặt, tương thích mọi nền tảng, từ đó dễ dàng triểnkhai MongoDB trên bất kỳ hệ điều hành nào.

‒ MongoDB cho hiệu suất đọc ghi cao, dễ dàng mở rộng khi phát triển.

‒ Điểm mạnh của Go là bộ thu gom rác và hỗ trợ lập trình đồng thời (tương tựnhư đa luồng – multithreading)

‒ Go là một ngôn ngữ biên dịch như C/C++, Java, Pascal… Go được giới thiệuvào năm 2009 và được sử dụng hầu hết trong các sản phẩm của Google.‒ Một số đặc điểm:

 Hỗ trợ khai báo kiểu dữ liệu động. Tốc độ biên dịch nhanh.

 Hỗ trợ các tác vụ đồng thời. Ngôn ngữ đơn giản, ngắn gọn. Hỗ trợ Generic.

2.5.2 Lý do sử dụng

‒ Go có goroutines thay cho threads:

 Goroutine có ngăn xếp phân khúc có thể mở rộng (growable segmentedstacks) Điều này có nghĩa là nó sẽ sử dụng nhiều bộ nhớ RAM hơn nếuđiều đó là cần thiết.

 Goroutines có thời gian khởi động nhanh hơn là threads.

 Goroutines có các channel và giữa các channel này có thể giao tiếp vớinhau.

 Goroutines có khóa mutex (mutex locking) để đảm bảo việc đọc và ghivào một cấu trúc dữ liệu hay một biến chung không xảy ra xung đột.‒ Go là ngôn ngữ lập trình biên dịch (compiled programing language) Go giao

tiếp trực tiếp với vi xử lý bằng mã nhị phân (binaries) nên cho hiệu suất caohơn hẳn so với Java hay Python.

‒ Code Go rất dễ dàng bảo trì và mở rộng.‒ Google là nhà phát triển của Go.

‒ AWS S3 là một phần quan trọng của dịch vụ lưu trữ đám mây của Amazon,mang lại khả năng mở rộng linh hoạt và đáng tin cậy cho các tổ chức và cánhân.

‒ S3 cung cấp khả năng lưu trữ không giới hạn, giúp người dùng mở rộngdung lượng lưu trữ một cách dễ dàng theo nhu cầu của họ Dịch vụ này cũnghỗ trợ các tính năng như quản lý phiên bản (versioning), mã hóa dữ liệu, vàquản lý quyền truy cập chi tiết thông qua chính sách quyền (IAM policies) vàcơ chế chữ ký số.

‒ AWS S3 không chỉ là nơi lưu trữ dữ liệu mà còn là một phần của nền tảng đểxây dựng các ứng dụng và dịch vụ Nó tích hợp tốt với các dịch vụ kháctrong hệ sinh thái của AWS, như AWS Lambda, Amazon Glacier, vàAmazon CloudFront, để tạo ra các giải pháp đầy đủ và linh hoạt cho nhu cầulưu trữ và phân phối dữ liệu.

2.6.2 Lý do sử dụng

‒ Khả năng mở rộng và đáng tin cậy: AWS S3 cung cấp khả năng mở rộng lưutrữ không giới hạn, giúp đảm bảo sẵn sàng và đáng tin cậy cho các ứng dụngvà dịch vụ trên nền tảng AWS.

‒ Quản lý phiên bản (Versioning): AWS S3 hỗ trợ quản lý phiên bản, cho phéplưu trữ và theo dõi nhiều phiên bản của một đối tượng, giúp bảo vệ dữ liệutrước các lỗi người dùng hoặc sự mất mát không mong muốn.

‒ Quản lý quyền truy cập chi tiết: S3 cho phép xác định và kiểm soát quyềntruy cập đối với các đối tượng thông qua IAM policies và Access ControlLists (ACLs), giúp bảo vệ tính toàn vẹn và bảo mật dữ liệu.

‒ Mã hóa dữ liệu: AWS S3 hỗ trợ các tùy chọn mã hóa dữ liệu để đảm bảorằng dữ liệu được bảo vệ trong quá trình truyền và lưu trữ.

‒ Quản lý sự kiện (Event Management): S3 cho phép người dùng định cấuhình sự kiện để tự động kích hoạt các hành động như triển khai Lambdafunction, thông báo SNS, hoặc ghi log vào Amazon CloudWatch khi có sự

2.7 Socket.IO2.7.1 Giới thiệu

Hình 2.8 Logo Socket.IO

‒ Khi làm việc về vấn đề giao tiếp giữa Server và Client, đặc biệt là vấn đềServer, Client có thể nhận biết sự thay đổi của đối phương, những nhà pháttriển thường sử dụng rất nhiều phương pháp mà có thể kể đến như: AJAX,HTML5, server-sent events, Tuy nhiên các phương pháp này đều tồntạinhiều nhược điểm như chậm, tốn tài nguyên Do đó, Socket.IO đã đượcphát triển để giải quyết vấn đề này, đặc biệt là các ứng dụng có yêu cầu tínhthời gian thực.

‒ Socket.IO là 1 module trong NodeJS, được phát triển vào năm 2010 Mụcđích lớn nhất để Socket.io ra đời là việc giao tiếp ngay tức khắc giữa Clientvà Server.

2.7.2 Lý do sử dụng

‒ Hiện nay các website về diễn đàn cộng đồng đang có xu hướng phát triển vớicác tính năng yêu cầu thời gian thực như bình luận, thông báo…Nên nhómđã xem xét và đưa những tính năng này vào đồ án với việc cài đặt hệ thốngthời gian thực sử dụng Socket.IO.

‒ Dù là một module trong NodeJS nhưng hiện nay Socket.IO đã có packagecho ngôn ngữ Go.

‒ Bảo mật cao: SocketIO được xây dựng dựa trên Engine.IO, nó sẽ khởi chạyphương thức Long-polling đầu tiên, sau đó sẽ tới những phương thức kết nốitốt hơn Bên cạnh việc thiết lập chặt chẽ đó, Socket.IO còn tự tạo các kết nốibảo mật như: Proxy,

Chương 3: THIẾT KẾ HỆ THỐNG

3.1 Xây dựng hệ thống3.1.1 Kiến trúc hệ thống

Hình 3.9 Kiến trúc hệ thống

3.1.2 Mô tả các thành phần trong kiến trúc hệ thống

Bảng 3.1 Bảng mô tả các thành phần của kiến trúc hệ thống

API (Application Programming Interface)

là giao diện lập trình ứng dụng giúp tạo ra các phương thức kết nối với các thư viện vàứng dụng khác nhau.

RestAPI là một tiêu chuẩn để viết API (Web Services), nó chú trọng vào tài nguyên hệ thống và các tài nguyên được truyền tải qua các HTTP Method (GET, POST, PUT, PATCH, DELETE…)4 Socket.IO Nơi lắng nghe các thông báo sự kiện từ

Cloud Storage(Cloudinary,

AWS S3)

Là nơi lưu trữ các file tệp (hình ảnh, âmthanh)

3.2 Phân tích yêu cầu3.2.1 Đăng ký

‒ Người dùng dùng email và mật khẩu để đăng ký, kèm với đó là những thôngtin khác như ngày sinh, họ tên.

‒ Email được sử dụng phải chưa tồn tại trong hệ thống.‒ Phải xác nhận email để hoàn tất quá trình đăng ký.

3.2.3 Xem danh sách workspace

‒ Người dùng được xem danh sách workspace với tư cách là thành viên.

‒ Trong mỗi workspace sẽ có chứa danh sách thành viên và danh sách cácbảng của workspace đó.

3.2.4 Xem chi tiết bảng

‒ Người dùng xem chi tiết bảng khi nhấn vào bảng trong workspace hoặc tạomới một bảng.

‒ Trong một bảng chứa nhiều cột thể hiện các trạng thái khác nhau của nhiệmvụ trong dự án.

‒ Trong một cột chứa các thẻ có cùng trạng thái, mỗi thẻ thể hiện một nhiệmvụ của dự án.

‒ Trong mỗi thẻ có các chi tiết thể hiện tính chất của nhiệm vụ như nhãn dán,thời gian, người được giao, checklist, bình luận…

3.2.6 Tạo bảng

‒ Bảng chỉ được tạo khi người tạo bảng là một thành viên của workspace.‒ Bảng tạo mới sẽ chỉ có tên bảng, không có cột hoặc thẻ trong bảng

3.2.7 Tạo thẻ

‒ Thẻ được tạo khi người tạo thẻ là một thành viên của bảng.

‒ Sau khi tạo thẻ, người dùng có thể nhấn trực tiếp vào thẻ để chỉnh sửa nhữngchi tiết thẻ như nhãn dán, ảnh cover, gán người dùng, tên thẻ, mô tả chi tiết,bình luận…

3.2.8 Quản lý thông tin tài khoản cá nhân

‒ Người dùng được phép chỉnh sửa thông tin cá nhân bao gồm: họ tên, ngàysinh, mật khẩu,…Nhưng không cho phép sửa email.

3.2.9 Chat với trợ lý ảo

‒ Trong quá trình sử dụng ứng dụng, có thể chọn tuỳ chọn chat với trợ lý ảovới dữ liệu lấy từ GPT 3.5 sẽ giúp người dùng thuận lợi hơn rất nhiều trongxử lý công việc.

‒ Bên cạnh đó còn có tuỳ chọn tóm tắt nội dung của bảng theo nhiều mục khácnhau giúp người dùng có thêm nhiều góc nhìn với dự án đang thực hiện.

3.3 Thiết kế hệ thống

3.3.1 Sơ đồ Use-case tổng quát

3.3.1.1 Sơ đồ Use Case của người dùng chưa đăng nhập

Hình 3.10 Sơ đồ Use Case của người dùng chưa đăng nhập