đồ án 2 xây dựng nền tảng hỗ trợ 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 (4.46 MB, 97 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>

<b>KHOA CƠNG NGHỆ PHẦN MỀM</b>

<b>ĐỒ ÁN 2</b>

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

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

<b>Sinh viên thực hiện:</b>

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

<b>TP.HCM, Tháng 12 năm 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>

<b>KHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>ĐỒ ÁN 2</b>

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

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

<b>Sinh viên thực hiện:</b>

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

<b>TP.HCM, Tháng 12 năm 2023</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>LỜI CẢM ƠN</b>

Đồ á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 để hồn thiện. Bên cạnh đó, khơng thể khơng nhắc đếnnhững sự hỗ trợ, đóng góp từ q 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ể hồn thành đồ án.Chúng em sẽ ln biết ơn và ghi nhớ những bài học đó.

Ngồ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 q trình thực hiện đồ án.

Trong q 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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

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

<b>TRƯỜNG ĐẠI HỌCCƠNG NGHỆ THƠNG TIN</b>

<b>CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAMĐộc Lập - Tự Do - Hạnh Phúc</b>

<b>ĐỀ CƯƠNG CHI TIẾT</b>

<b>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</b>

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

<b>Nội dung đề tài:1. Giới thiệu đề tài</b>

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ả. Ngồ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 ngồ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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

- 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ế.

<b>‒ Phạm vi môi trường</b>

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

 Đă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 hồn thành, cơng việc nào cần hồn thành)

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>‒ 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</b>

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

<b>‒ Back-End: Go, framework Gin.</b>

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

‒ 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.

<b>Kế hoạch thựchiện:</b>

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

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

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

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

<b>STTTên công việc<sup>Thời gian dự</sup></b>

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

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

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

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

Trần Đình Khơi

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>Trần Đình KhơiTrần Quang Phúc</b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>1.5. Đối tượng nghiên cứu...25</b>

<b>1.6. Phương pháp nghiên cứu...25</b>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

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

<b>3.3. Thiết kế hệ thống...41</b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

<b>3.4. Thiết kế dữ liệu...73</b>

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>DANH MỤC BẢNG</b>

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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 hồ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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>TÓM TẮT ĐỒ ÁN</b>

Đồ á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:

<b>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</b>

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

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

dụng trong đề tài.

<b>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</b>

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.

<b>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</b>

hình vẽ.

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

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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

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.

Ngồ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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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.

<b>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</b>

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 q 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ự đốn nhu cầutài ngun để ướ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. Ngồ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ả tồn bộnhóm.

‒ Tính bảo mật:

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

 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.

<b>1.2.2. Giải quyết vấn đề</b>

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ư:

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

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 đã hồn thành,đang tiến hành, hay đang gặp khó khăn.

<b>‒ 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</b>

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 tồ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.

<b>‒ 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</b>

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á.

<b>‒ 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</b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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 hồn thành, cơng việc nào cần hồn thành).

 Chat với ChatGPT.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>1.6. Phương pháp nghiên cứu</b>

‒ 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.

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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ị tồ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:

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

 Đố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.

‒ 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ể.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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).

‒ 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 tồ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 q trình phát triển.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

‒ 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.

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

<i>Hình 2.4. Kiến trúc của Redux</i>

‒ 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.

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

<b>2.4. MongoDB2.4.1. Giới thiệu</b>

<i>Hình 2.5. Logo MongoDB</i>

‒ 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.

‒ 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

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

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.

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

‒ 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.

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

‒ 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.

‒ 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 tồ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ự

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

<b>2.7. Socket.IO2.7.1. Giới thiệu</b>

<i>Hình 2.8. Logo Socket.IO</i>

‒ 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ó 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.

‒ 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 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,...

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

<b>Chương 3: THIẾT KẾ HỆ THỐNG</b>

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

<i>Hình 3.9. Kiến trúc hệ thống</i>

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

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

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

<b>API (Application Programming Interface) </b>

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 <sup>Nơi lắng nghe các thông báo sự kiện từ </sup>

Cloud Storage(Cloudinary,

AWS S3)

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

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

‒ 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 để hồn tất q trình đăng ký.

<b>3.2.3. Xem danh sách workspace</b>

‒ 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 đó.

‒ 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…

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

‒ 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

‒ 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…

<b>3.2.8. Quản lý thông tin tài khoản cá nhân</b>

‒ 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.

‒ 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.

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

<b>3.3. Thiết kế hệ thống</b>

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

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

</div>