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

GIỚI THIỆU ĐỀ TÀI

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ững thá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ệc tổ 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 đa dạ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ới sự 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ệc mà 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ành viê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ông minh, 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 trong việ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ài nà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ường khả 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ẫn về 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ệc và 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ông nghệ 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ột cá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.

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

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ấp dẫn và thân thiện, tạo ra trải nghiệm thuận tiện và dễ dàng cho người dùng.

 Các phương pháp như nghiên cứu người dùng để hiểu rõ hơn về đối tượng người sử dụng trang web, tối ưu hóa tốc độ trang web, sử dụng màu sắc hài hòa và phù hợp, … đã được nghiên cứu và áp dụng để cải thiệ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ình quả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ầu tà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ăng của từng cá nhân Ngoài ra, công việc được phân chia đều, tránh tình trạ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ă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êm tú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.

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ại tí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ên cứ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ực quan, bởi vì đó là căn cứ để người dùng đưa ra những quyết định quan trọng cũ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ác thô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ười dùng có được một cái nhìn tổng quan về dòng thời gian của toàn bộ những công việc Người dùng có thể xác định công việc nào quan trọng và đòi hỏi sự ưu tiên cao, ước lượng thời gian cho các công việc và dự báo chính xác hơ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ắc nhở 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ền tả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à linh hoạt Bạn có thể hỏi về bất kỳ vấn đề gì mà bạn đang gặp phải trong công việc, trở lý ảo sẽ cung cấp thông tin chính xác và liên quan Trong làn sóng và 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.

Mục đích đề tài

‒ Hiểu về NextJS, ReactJS, Golang cũng như những công nghệ mới, có thể áp dụng chúng 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ười dùng, có khả năng mở rộng cao.

‒ Giải quyết, cải thiện và nâng cao hiệu quả cho quá trình quản lý công việc của 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ế.

Phạm vi nghiên cứu

 Ứng dụng có thể hoạt động trên nền tảng Web.

 Đă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ý Nhiệm vụ trong bảng.

 Gợi ý thành viên phù hợp với nhiệm vụ.

 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

 Quản lý thông tin cá nhân.

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

 Ngôn ngữ lập trình: Javascript, Typescript, Go.

 Các công nghệ khác: WebSocket (SocketIO).

‒ Đối tượng trong phạm vi đề tài hướng đến:

 Người dùng cá nhân hoặc một nhóm người có nhu cầu quản lý quá trình,tiến độ thực hiện công việc.

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ính nă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.

CÔNG NGHỆ SỬ DỤNG

Next.js

‒ Next.js là một framework phổ biến trong cộng đồng phát triển web, được sử dụng để xây dựng ứng dụng web React Nó giúp đơn giản hóa quá trình phát triển ứng dụng web bằng cách cung cấp một cấu trúc dự án tự động, hỗ trợ routing, và tích hợp các tính năng như server-side rendering (SSR) và static site generation (SSG)

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 server thay vì client NextJS sẽ pre-render trang, chuẩn bị toàn bộ dữ liệu cần thiết cho một trang Khi một request được gửi đến server, một trang hoàn chỉnh sẽ được cấp phát tới user và search engine crawlers, user sẽ không phải chờ đến khi việc lấy dữ liệu hoàn thành và search engine crawlers cũng có thể thấy được nội dung bên trong trang.

 Đối với các React app thông thường chúng ta cần phải dùng đến React Router và config từng route tương ứng với từng trang Nhưng đối với NextJS 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 React Component được export từ file js, jsx, ts, hoặc tsx Đối với app, một trang sẽ được tạo ra dựa theo file đặc biệt được đặt tên là page.

 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ấy dữ liệu từ database, thì cần phải có API và xây dựng một REST API project độc lập Nhưng với NextJS, tất cả chỉ xảy ra trong một project duy nhất, chúng ta vừa có client code, vừa có backend code được gói gọn và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 được render 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ập NextJS 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 load trang.

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

ReactJS

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook để xây dựng User Interface (UI) cho các ứng dụng web Nó được ra mắt lần đầu vào năm 2013 và đã nhận được sự yêu thích và sự lan rộng rãi từ đó

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ên component, trong đó giao diện người dùng được chia thành các component nhỏ, có thể tái sử dụng Mỗi component đóng gói logic và giao diện của riêng nó, và chúng có thể được kết hợp và lồng nhau để xây dựng giao diện phứ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ần thiết của UI.

‒ JSX: JSX (JavaScript XML) là một cú pháp mở rộng được sử dụng trong React để viết mã tương tự HTML trực tiếp trong JavaScript JSX cho phép kế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ột luồ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ác hàm cho phép sử dụng trạng thái và các tính năng React khác trong các functional component Hooks cho phép các functional component có trạng thái cục bộ, quản lý các hiệu ứng phụ (side effects) và tận dụng các lifecycle method 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 định tuyến (routing) khai báo cho các ứng dụng React Nó cho phép định nghĩa các đường dẫn khác nhau và các thành phần tương ứng của chúng, giúp điều hướ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 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ần

UI để 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 linh hoạ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 ứng dụng Dữ liệu trong ReactJS được truyền xuống các component con thông qua props, và bất kỳ thay đổi nào đều được xử lý thông qua hàm gọi

‒ Cộng đồng lớn: ReactJS có một cộng đồng rộng lớn và năng động Hiện nay có 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

‒ Redux là một thư viện quản lý trạng thái ứng dụng trong JavaScript Nó được sử dụng chủ yếu trong các ứng dụng React, nhưng cũng có thể được sử dụng trong các framework JavaScript khác hoặc ngữ cảnh không liên quan đến React.

‒ 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ến trúc Flux, nơi dữ liệu trong ứng dụng được lưu trữ trong một "store" duy nhấ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 ứng dụng Redux nào Có thể access các state được lưu, update state, và đăng ký 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 user vs 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ưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong 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

‒ 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 ứng dụng một cách rõ ràng và có cấu trúc Trạng thái được lưu trữ trong một nguồn duy nhất gọi là "store", giúp đơn giản hóa việc theo dõi và cập nhật trạ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 ứng dụng đều được ghi lại trong các hành động (actions) Điều này giúp dễ dàng theo 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 nhau trong ứng dụng.

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

MongoDB

‒ MongoDB là một hệ quản trị cơ sở dữ liệu phi quan hệ, mã nguồn mở, hướng tài liệu (Document-Oriented) MongoDB được phát triển bởi MongoDB Inc và 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ột Schema 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ộngtheo chiều ngang (Horizontal Scalability), nghĩa là khi cần nâng cao hiệu năng lư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 truy vấ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 trị cơ sở dữ liệu sẽ tương thích tốt với lại server được xây dựng bằng JavaScript, 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ển khai 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.

Golang

Hình 2.6 Logo ngôn ngữ lập trình Go

‒ Go là một ngôn ngữ lập trình được thiết kế dựa trên tư duy lập trình hệ thống Go được phát triển bởi Robert Griesemer, Rob Pike và Ken Thompson tại Google vào năm 2007.

‒ Đ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ệu vào năm 2009 và được sử dụng hầu hết trong các sản phẩm của Google.

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

‒ Go có goroutines thay cho threads:

 Goroutine có ngăn xếp phân khúc có thể mở rộng (growable segmented stacks) Đ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ới nhau.

 Goroutines có khóa mutex (mutex locking) để đảm bảo việc đọc và ghi và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 cao hơ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

‒ Amazon Simple Storage Service (S3) là một dịch vụ lưu trữ đám mây được cung cấp bởi Amazon Web Services (AWS) Nó là một dịch vụ lưu trữ đối tượng, cho phép người dùng lưu trữ và truy xuất dữ liệu từ bất kỳ đâu trên internet thông qua giao thức HTTP hoặc HTTPS.

‒ 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ộng dung 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ũng hỗ 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ác trong 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ầu lư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ưu trữ 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ụng và 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ép lư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ệu trướ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ền truy cập đối với các đối tượng thông qua IAM policies và Access Control Lists (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ảo rằ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ấu hình sự kiện để tự động kích hoạt các hành động như triển khai Lambda function, thông báo SNS, hoặc ghi log vào Amazon CloudWatch khi có sự

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át triể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ồn tạinhiều nhược điểm như chậm, tốn tài nguyên Do đó, Socket.IO đã được phá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ính thờ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 Client và Server.

‒ Hiện nay các website về diễn đàn cộng đồng đang có xu hướng phát triển với cá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ống thời gian thực sử dụng Socket.IO.

‒ Dù là một module trong NodeJS nhưng hiện nay Socket.IO đã có package cho 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ạy phương thức Long-polling đầu tiên, sau đó sẽ tới những phương thức kết nối tố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ối bảo mật như: Proxy,

THIẾT KẾ HỆ THỐNG

Xây dựng 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

Giao diện của ứng dụng, chịu trách nhiệm hiển thị thông tin và tiếp nhận hành vi người dù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ừ

Controller Nơi tiếp nhận các yêu cầu của Front-End

6 Service Là Business Logic Layer, đóng vai trò xử lí logic của ứng dụng

7 Repository Là Data Access Layer, đóng vai trò dữ liệu

(lấy dữ liệu từ DB, lưu trữ dữ liệu…)

Là nơi lưu trữ dữ liệu, ở đây sử dụng MongoDB, một Database lưu dữ liệu dưới dạng Documents

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

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

‒ Người dùng dùng email và mật khẩu để đăng ký, kèm với đó là những thông tin 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ý.

‒ Người dùng dùng email và mật khẩu đã được đăng ký để đăng nhập vào hệ thống và sử dụng ứng dụng.

‒ Ngoài ra, người dùng có thể dùng tài khoản Google để trực tiếp đăng nhập vào ứng dụng.

‒ 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ác bả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ạo mớ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ệm vụ 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ệm vụ 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.5 Tìm kiếm bảng, thẻ, workspace

‒ Người dùng có thể tìm kiếm bảng, thẻ, workspace dựa trên tên hoặc nội dung của các thành phần đó.

‒ Kết quả tìm kiếm sẽ được phân loại theo mức liên quan từ trên xuống dưới,được chia ra theo từng thành phần bao gồm bảng, thẻ, workspace.

‒ 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ững chi 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ày sinh, 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ý ảo vớ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 trong xử 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ác nhau giúp người dùng có thêm nhiều góc nhìn với dự án đang thực hiện.

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

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

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

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

1 Người dùng chưa đăng nhập Người dùng sử dụng phần mềm nhưng chưa đăng nhập

2 Người dùng đã đăng nhập Người dùng sử dụng phần mềm và đã đăng nhập vào hệ thống

Bảng 3.3 Danh sách Use Case

T Use Case Actor Mô tả

1 Đăng ký Người dùng chưa đăng nhập Tạo tài khoản mới

2 Đăng nhập Người dùng chưa đăng nhập Đăng nhập bằng tài khoản đã đăng ký

Người dùng chưa đăng nhập Đăng nhập bằng tài khoản Google

4 Quên mật khẩu Người dùng chưa đăng nhập

Người dùng quên mật khẩu và cần đặt lại mật khẩu mới

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

Người dùng đã đăng nhập

Xem thông tin tài khoản đang đăng nhập

6 Sửa thông tin tài khoản

Sửa thông tin tài khoản đang đăng nhập

7 Đổi mật khẩu Người dùng đã đăng nhập Đổi mật khẩu của tài khoản đang đăng nhập

Người dùng đã đăng nhập Xem danh sách workspace

9 Tạo workspace Người dùng đã đăng nhập Tạo workspace mới

Người dùng đã đăng nhập Sửa thông tin workspace

11 Quản lý thành viên workspace

Quản lý thành viên của workspace

12 Quản lý bảng Người dùng đã đăng nhập Xem danh sách bảng

13 Tạo bảng Người dùng đã đăng nhập Tạo bảng mới

14 Chỉnh sửa bảng Người dùng đã đăng nhập Chỉnh sửa thông tin bảng

15 Xoá bảng Người dùng đã đăng nhập Xoá bảng

16 Quản lý thành viên bảng

Người dùng đã đăng nhập Quản lý thành viên của bảng

17 Xem thống kê dữ liệu bảng

Xem các biểu đồ thống kê dữ liệu của bảng theo nhiều mục

18 Quản lý cột Người dùng đã đăng nhập Xem danh sách cột trong bảng

19 Tạo cột Người dùng đã đăng nhập Tạo cột mới

20 Chỉnh sửa cột Người dùng đã đăng nhập Chỉnh sửa thông tin cột

21 Xoá cột Người dùng đã đăng nhập Xoá cột

22 Quản lý thẻ Người dùng đã đăng nhập Xem danh sách thẻ trong bảng

23 Tạo thẻ Người dùng đã đăng nhập Tạo thẻ mới

24 Chỉnh sửa thẻ Người dùng đã đăng nhập Chỉnh sửa thông tin thẻ

25 Xoá thẻ Người dùng đã đăng nhập Xoá thẻ

26 Thông báo Người dùng đã đăng nhập Thông báo

27 Chat với trợ lý ảo Người dùng đã đăng nhập Chat với trợ lý ảo thông minh

28 Tóm tắt nội dung bảng

Tóm tắt dữ liệu của bảng một cách ngắn gọn

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

Bảng 3.4 Use Case Đăng ký

Tên Use Case Đăng ký

Tóm tắt Chức năng đăng ký tài khoản mới.

Dòng sự kiện chính 1 Người dùng nhập thông tin tài khoản và nhấn “Đăng ký".

2 Hệ thống kiểm tra thông tin đăng ký.

3 Hệ thống gửi link để xác nhận tài khoản qua email đã đăng ký.

4 Người dùng nhấn vào link xác nhận để xác nhận tài khoản và hoàn tất đăng ký tài khoản.

Dòng sự kiện khác Không có

Dòng sự kiện ngoại lệ

1 Thông tin đăng ký không đạt yêu cầu:

Hệ thống hiển thị thông báo thông tin đăng ký không hợp lệ.

Các yêu cầu đặc biệt

Trạng thái hệ thống trước khi thực thiện use case

Actor: Người dùng chưa đăng nhập Điều kiện: Không có

Trạng thái hệ thống sau khi thực hiện use case

Người dùng tạo thành công tài khoản và xác thực để đăng nhập vào hệ thống Điểm mở rộng Không có

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

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

Tên Use Case Đăng nhập

Tóm tắt Chức năng đăng nhập vào hệ thống.

Dòng sự kiện chính 1 Hệ thống hiển thị form đăng nhập.

2 Người dùng nhập tên đăng nhập và mật khẩu (cả 2 trường này đều bắt buộc nhập) và nhấn “Đăng nhập”.

3 Hệ thống kiểm tra thông tin đăng nhập

4 Hệ thống hiển thị màn hình chính.

1 Thông tin đăng nhập sai:

Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp lệ.

Người dùng đăng nhập thành công vào hệ thống, có thể sử dụng các quyền mà hệ thống cho phép Điểm mở rộng Không có

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

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

Tên Use Case Đăng nhập với Google

Tóm tắt Chức năng đăng nhập vào hệ thống bằng tài khoản

Dòng sự kiện chính 1 Người dùng nhấn vào nút Login with Google, hệ thống hiển thị cửa sổ cho phép người dùng đăng nhập bằng tài khoản Google.

2 Sau khi đăng nhập Google thành công, hệ thống sẽ chuyển về trang chủ với trạng thái đã đăng nhập.

Dòng sự kiện ngoại 1 Thông tin đăng nhập sai: lệ Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp lệ.

Người dùng đăng nhập thành công vào hệ thống, có thể sử dụng các quyền mà hệ thống cho phép Điểm mở rộng Không có

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

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

Tên Use Case Đăng nhập

Tóm tắt Chức năng lấy lại mật khẩu mà người dùng quên.

Dòng sự kiện chính 1 Người dùng nhập email của tài khoản cần lấy lại mật khẩu và nhấn “Lấy lại mật khẩu”.

2 Hệ thống kiểm tra email có tồn tại hay không.

3 Hệ thống gửi link để đặt lại mật khẩu qua email đã nhập.

4 Người dùng nhấn vào link và nhập mật khẩu mới, xác nhận mật khẩu mới, sau đó nhấn “Đặt lại mật khẩu” để hoàn tất việc đặt lại mật khẩu.

1 Email không hợp lệ hoặc không tồn tại trong hệ thống:

Hệ thống thông báo email không hợp lệ

Hệ thống cung cấp mã xác thực qua email để người dùng lấy lại mật khẩu. Điểm mở rộng Không có

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

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

Tên Use Case Quản lý thông tin tài khoản

Tóm tắt Quản lý được thông tin tài khoản, bài viết

Dòng sự kiện chính 1 Hệ thống hiển thị thông tin của tài khoản

1 Dữ liệu không hợp lệ:

Hệ thống hiển thị thông báo thay đổi thông tin không thành công do dữ liệu không hợp lệ.

Actor: Người dùng đã đăng nhập Điều kiện: Không có

Trạng thái hệ thống sau khi thực

Bình thường Điểm mở rộng Không có

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

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

Tên Use Case Sửa thông thông tin tài khoản

Tóm tắt Sửa thông tin của tài khoản cá nhân

Dòng sự kiện chính 1 Người dùng nhập tên, ngày sinh, … cần thay đổi vào các ô tương ứng và nhấn “Cập nhật thông tin”.

2 Hệ thống kiểm tra tính hợp lệ của dữ liệu.

3 Thông tin tài khoản được thay đổi và hiển thị trên màn hình.

Thông tin người dùng được cập nhật theo dữ liệu đã nhập. Điểm mở rộng Không có

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

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

Tên Use Case Đổi mật khẩu

Tóm tắt Đổi mật khẩu của tài khoản hiện tại

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Đổi mật khẩu”.

2 Hệ thống hiển thị Dialog Đổi mật khẩu.

3 Người dùng nhập mật khẩu cũ và mật khẩu mới.

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu và cập nhật mật khẩu mới.

Mật khẩu mới của người dùng được cập nhật Điểm mở rộng Không có

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

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

Tên Use Case Quản lý workspaces

Tóm tắt Xem danh sách các workspaces

Dòng sự kiện chính 1 Hệ thống hiển thị sẵn danh sách workspaces mà người dùng là thành viên.

2 Người dùng bấm vào workspace.

3 Hệ thống hiển thị thông tin chi tiết của workspace đó.

Actor: Tất cả Điều kiện: Không có

Người dùng có thể xem thông tin các workspaces mà người dùng là thành viên. Điểm mở rộng Không có

3.3.4.8 Đặc tả Use Case Tạo workspace

Bảng 3.12 Use Case Tạo workspace

Tên Use Case Tạo workspace

Tóm tắt Tạo workspace mới

Dòng sự kiện chính 1 Người dùng nhấn nút “Create” bên trên thành menu

2 Nhập tên của workspace cần tạo.

3 Tạo thành công, hệ thống hiển thị danh sách workspace mới.

1 Workspace mới có tên trùng với workspace đã có.

2 Hệ thống hiển thị thông báo lỗi trùng tên.

Hệ thống hiển thị danh sách workspaces mới có chứa workspace vừa tạo. Điểm mở rộng Không có

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

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

Tên Use Case Chỉnh sửa workspace

Tóm tắt Chỉnh sửa thông tin workspace

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Edit” bên cạnh tên của workspace.

2 Nhập tên mới cho workspace.

3 Hệ thống hiển thị cập nhật thành công.

4 Hệ thống hiển thị workspace có tên mới cập nhật.

1 Workspace mới cập nhật có tên trùng với workspace đã có.

Actor: Tất cả Điều kiện: Người dùng phải là admin của workspace

Hệ thống hiển thị thông tin mới cập nhật của workspace. Điểm mở rộng Không có

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

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

Tên Use Case Quản lý thành viên workspace

Tóm tắt Xem thông tin và thêm bớt thành viên của workspace

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Members” của workspace

2 Hệ thống hiển thị danh sách thành viên của workspace.

3 Người dùng nhấn nút “Add” để thêm thành viên.

4 Người dùng tìm kiếm người dùng muốn thêm bằng email và chọn “Add”.

5 Hệ thống hiển thị danh sách thành viên viên mới.

Dòng sự kiện khác 1 Người dùng nhấn nút “Remove” bên cạnh tên thành viên muốn xoá.

2 Hệ thống hiển thị xoá thành công và hiển thị danh sách thành viên mới cập nhật sau khi xoá

Người dùng có thể xem danh sách thành viên và thực hiện các thao tác thêm bớt thành viên của workspace. Điểm mở rộng Không có

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

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

Tên Use Case Quản lý bảng

Tóm tắt Xem danh sách các bảng

Dòng sự kiện chính 1 Người dùng nhấn vào workspace.

2 Hệ thống hiển thị sẵn danh sách bảng mà người dùng là thành viên.

3 Người dùng bấm vào bảng.

4 Hệ thống hiển thị thông tin chi tiết của bảng đó.

Người dùng có thể xem thông tin các bảng mà người dùng là thành viên. Điểm mở rộng Không có

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

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

Tên Use Case Tạo bảng

Dòng sự kiện chính 1 Người dùng nhấn nút “Create” bên trên thành menu của workspace.

2 Nhập tên của bảng cần tạo.

3 Tạo thành công, hệ thống hiển thị danh sách bảng mới.

1 Bảng mới có tên trùng với bảng đã có.

Hệ thống hiển thị danh sách workspaces mới có chứa workspace vừa tạo. Điểm mở rộng Không có

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

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

Tên Use Case Chỉnh sửa bảng

Tóm tắt Chỉnh sửa thông tin bảng

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Edit” bên cạnh tên của bảng.

2 Nhập tên mới cho bảng.

4 Hệ thống hiển thị bảng có tên mới cập nhật.

1 Bảng mới cập nhật có tên trùng với bảng đã có.

Hệ thống hiển thị thông tin mới cập nhật của bảng. Điểm mở rộng Không có

3.3.4.14 Đặc tả Use Case Xoá bảng

Bảng 3.18 Use Case Xoá bảng

Tên chức năng Xoá bảng

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Delete” bên cạnh thông tin bảng.

2 Hệ thống hiển thị xoá thành công.

Actor: Người dùng đã đăng nhập Điều kiện: Người dùng là admin của bảng

Dữ liệu của bảng bị xoá đi. Điểm mở rộng Không có

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

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

Tên Use Case Quản lý thành viên bảng

Tóm tắt Xem thông tin và thêm bớt thành viên của bảng

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Members” của bảng.

2 Hệ thống hiển thị danh sách thành viên của bảng.

3 Người dùng nhấn nút “Add” để thêm thành viên.

4 Người dùng tìm kiếm người dùng muốn thêm bằng email và chọn “Add”.

5 Hệ thống hiển thị danh sách thành viên viên mới.

Dòng sự kiện khác 1 Người dùng nhấn nút “Remove” bên cạnh tên thành viên muốn xoá.

2 Hệ thống hiển thị xoá thành công và hiển thị danh sách thành viên mới cập nhật sau khi xoá

Người dùng có thể xem danh sách thành viên và thực hiện các thao tác thêm bớt thành viên của bảng. Điểm mở rộng Không có

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

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

Tên chức năng Xem thống kê dữ liệu bảng

Tóm tắt Xem thống kê dữ liệu bảng

Dòng sự kiện chính 1 Người dùng nhấn biểu tượng biểu đồ bên phải bảng.

2 Hệ thống hiển thị biểu đồ thống kê dữ liệu bảng.

Dòng sự kiện khác 1 Người dùng nhấn chọn kiểu biểu đồ.

2 Hệ thống hiển thị dữ liêu theo loại biểu đồ được chọn.

Actor: Người dùng đã đăng nhập (Member) Điều kiện: Không có

Hệ thống hiển thị dữ liệu theo biểu đồ được chọn. Điểm mở rộng Không có

Actor: Người dùng đã đăng nhập Điều kiện: Là Moderator hoặc Admin

Hiển thị danh sách bài viết của chủ đề Điểm mở rộng Không có

3.3.4.17 Đặc tả Use Case Quản lý cột

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

Tên Use Case Quản lý cột

Tóm tắt Xem danh sách các cột

Dòng sự kiện chính 1 Người dùng nhấn vào bảng.

2 Hệ thống hiển thị sẵn danh sách cột của bảng.

Người dùng có thể xem thông tin các các cột của bảng. Điểm mở rộng Không có

3.3.4.18 Đặc tả Use Case Tạo cột

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

Tên Use Case Tạo cột

Dòng sự kiện chính 1 Người dùng nhấn nút “Create” bên cạnh danh sách cột.

2 Nhập tên của cột cần tạo.

3 Tạo thành công, hệ thống hiển thị danh sách cột mới.

Hệ thống hiển thị danh sách cột mới có chứa cột vừa tạo. Điểm mở rộng Không có

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

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

Tên Use Case Chỉnh sửa cột

Tóm tắt Chỉnh sửa thông tin cột

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Edit” bên cạnh tên của cột.

2 Nhập tên mới cho cột.

4 Hệ thống hiển thị cột có tên mới cập nhật.

Hệ thống hiển thị thông tin mới cập nhật của cột. Điểm mở rộng Không có

3.3.4.20 Đặc tả Use Case Xoá cột

Bảng 3.24 Use Case Xoá cột

Tên chức năng Xoá cột

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Delete” bên cạnh thông tin cột.

Dữ liệu của cột bị xoá đi. Điểm mở rộng Không có

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

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

Tên Use Case Quản lý thẻ

Tóm tắt Xem danh sách các thẻ

Dòng sự kiện chính 1 Người dùng nhấn vào bảng.

2 Hệ thống hiển thị sẵn danh sách thẻ theo cột.

Người dùng có thể xem thông tin các các thẻ của cột. Điểm mở rộng Không có

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

Bảng 3.26 Use Case Tạo thẻ

Tên Use Case Tạo thẻ

Dòng sự kiện chính 1 Người dùng nhấn nút “Create” bên dưới danh sách thẻ của cột.

2 Nhập tên của thẻ cần tạo.

3 Tạo thành công, hệ thống hiển thị danh sách thẻ mới.

Hệ thống hiển thị danh sách thẻ mới có chứa thẻ vừa tạo. Điểm mở rộng Không có

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

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

Tên Use Case Chỉnh sửa thẻ

Tóm tắt Chỉnh sửa thông tin thẻ

Dòng sự kiện chính 5 Người dùng nhấn vào nút thẻ.

6 Người dùng có thể chỉnh sửa thông tin thẻ: ngày tháng, thành viên, ảnh bìa, nhãn dán

8 Hệ thống hiển thị thẻ có thông tin mới cập nhật.

Hệ thống hiển thị thông tin mới cập nhật của thẻ. Điểm mở rộng Không có

3.3.4.24 Đặc tả Use Case Xoá thẻ

Bảng 3.28 Use Case Xoá thẻ

Tên chức năng Xoá thẻ

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Delete” bên cạnh tên thẻ.

Dữ liệu của thẻ bị xoá đi. Điểm mở rộng Không có

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

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

Tên Use Case Thông báo

Dòng sự kiện chính 1 Người dùng nhấn vào biểu tượng chuông trên thanh menu.

2 Hệ thống hiển thị danh sách thông báo theo thời gian thực.

3 Người dùng nhấn vào thông báo.

4 Hệ thống hiển thị chi tiết bảng mà thông báo đề cập.

Hiển thị danh sách thông báo theo thời gian thực. Điểm mở rộng Không có

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

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

Tên Use Case Chat với trợ lý ảo

Tóm tắt Chat với trợ lý ảo GPT

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Chat GPT” của bảng.

2 Hệ thống hiển thị khung chat.

3 Nhập câu hỏi hoặc thông tin để trao đổi trực tiếp với trợ lý ảo.

Hiển thị khung chat với trợ lý ảo Điểm mở rộng Không có

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

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

Tên Use Case Tóm tắt nội dung bảng

Tóm tắt Tóm tắt nội dung bảng

Dòng sự kiện chính 1 Người dùng nhấn vào nút “Chat GPT” của bảng.

2 Hệ thống hiển thị khung chat.

3 Người dùng nhấn vào nút “Sumary”.

4 Hệ thống hiển thị nội dung bảng được tự động tóm tắt bởi AI.

Hiển thị dữ liệu bảng được tóm tắt. Điểm mở rộng Không có

Thiết kế dữ liệu

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

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

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

Tên bảng dữ liệu Mô tả

1 users Lưu trữ thông tin người dùng.

2 workspaces Lưu trữ thông tin các không gian làm việc.

3 boards Lưu trữ thông tin các bảng.

4 columns Lưu trữ thông tin các cột

5 cards Lưu trữ thông tin các thẻ.

6 labels Lưu trữ thông tin của nhãn.

7 workspace_member Lưu trữ thông tin quan hệ thành viên của người s dùng và không gian làm việc.

8 board_members Lưu trữ thông tin quan hệ thành viên của người dùng và bảng.

9 card_attachments Lưu trữ thông tin tệp đính kèm của thẻ.

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

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

Tên thuộc tính Kiểu dữ liệu Ràng buộc Mô tả thuộc tính

1 _id ObjectId PK, Not null Mã người dùng.

2 name String Not null Tên người dùng.

5 password String Not null Mật khẩu người dùng.

6 birthday Time Not null Ngày sinh người dùng.

7 avatar String Not null Ảnh đại diện người dùng.

8 isVerified Boolean Not null Điều kiện kiểm tra người dùng đã xác thực hay chưa.

9 type String Không Lưu loại người dùng.

10 phoneNumber String Không Lưu số điện thoại người dùng.

11 createdAt Time Not null Lưu thời điểm dữ liệu được tạo

12 updatedAt Time Not null Lưu thời điểm gần nhất dữ liệu được cập nhật

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

1 _id ObjectId PK, Not null Mã workspace.

3 ownerUserId ObjectId FK, Not null

Mã chủ sở hữu workspace

4 image String Not null Ảnh đại diện của workspace

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

1 _id ObjectId PK, Not null Mã bảng.

2 workspaceId ObjectId FK, Not null Mã workspace.

3 adminId ObjectId FK, Not null Mã admin bảng.

4 status Boolean Not null Trạng thái bảng

7 name String Not null Tên bảng

8 orderedColumnId s Array Not null Danh sách mã cột theo thứ tự trong bảng

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

1 _id ObjectId PK, Not null Mã cột null

3 title String Not null Tên cột

4 orderedCardIds Array Not null Danh sách mã thẻ theo thứ tự trong cột

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

1 _id ObjectId PK, Not null

2 boardId ObjectId FK, Not null

3 columnId ObjectId FK, Not null

4 labelIds Array Not null Danh sách mã nhãn dán gắn trong thẻ

Not null Danh sách mã thành viên của bảng được gắn trong thẻ

6 title String Not null Tên thẻ

7 description String Not null Mô tả thẻ

8 checklists Array Not null Danh sách checklist có trong thẻ

9 comments Array Not null Danh sách bình luận có trong thẻ

10 startDate Time Không Thời điểm bắt đầu task

11 endDate Time Không Thời điểm kết thúc task

12 cover String Không Ảnh cover của thẻ

13 isDone Boolean Not null Trạng thái hoàn thành của thẻ

14 status Boolean Not null Trạng thái của thẻ

16 updatedAt Time Not null Lưu thời điểm gần nhất

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

2 title String String Tên nhãn dán.

Mã bảng mà nhãn dán thuộc về.

4 color String Not null Mã màu hex của nhãn dán

5 status Boolean Not null Trạng thái nhãn dán

Bảng 3.39 Mô tả chi tiết bảng workspace_members

2 workspaceId ObjectId FK, Not null

3 userId ObjectId FK, Not null

Mã người dùng là thành viên của workspace

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

3 userId ObjectId FK, Not null

Mã người dùng là thành viên của bảng

3 cardId ObjectId FK, Not null

4 filename String Not null Tên tệp

5 extension String Not null Đuôi mở rộng của tệp

6 status Boolean Not null Trạng thái của tệp

XÂY DỰNG ỨNG DỤNG

Danh sách màn hình

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

STT Tên màn hình Ý nghĩa

1 Màn hình Đăng nhập Form đăng nhập để người dùng đăng nhập vào trang web

2 Màn hình Đăng ký Form đăng ký để người dùng tạo tài khoản mới

3 Màn hình Khôi phục mật khẩu

Form gửi email xác nhận để người dùng khôi phục mật khẩu

4 Màn hình Thay đổi mật khẩu Form thay đổi mật khẩu tài khoản

Workspace Quản lý các Workspace

6 Màn hình Quản lý Board Quản lý các Board

7 Màn hình Quản lý Card Quản lý các Card

8 Màn hình Quản lý tài khoản Quản lý thông tin tài khoản

9 Màn hình Tìm kiếm Tìm kiếm Workspace, Board, Card

10 Màn hình Thông báo Hiển thị danh sách thông báo

11 Màn hình Light/Dark mode Điều chỉnh chế độ hiển thị sáng hoặc tối

12 Màn hình Trợ lý ảo Tóm tắt công việc và chat với ChatGPT

Chi tiết màn hình

‒ Người dùng có thể sử dụng tài khoản với Email và Mật khẩu để đăng nhập vào trang web.

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

‒ Ngoài ra, người dùng có thể lựa chọn đăng nhập bằng tài khoản Google

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

‒ Người dùng cần cung cấp đầy đủ thông tin để tạo tài khoản mới.

‒ Nếu người dùng đã có tài khoản trước đó, họ có thể bấm vào “Đăng nhập” để chuyển đến trang đăng nhập.

Hình 4.16 Màn hình Đăng ký

4.2.3 Màn hình Khôi phục mật khẩu

‒ Khi người dùng quên mật khẩu, họ có thể cung cấp email đã đăng ký với tài khoản, sau đó hệ thống sẽ gửi một email xác thực yêu cầu khôi phục mật khẩu

Hình 4.17 Màn hình Khôi phục mật khẩu

4.2.4 Màn hình Thay đổi mật khẩu

- Khi người dùng bấm vào đường link được đính kèm trong email xác nhận khôi phục mật khẩu, họ sẽ được chuyển đến trang thay đổi mật khẩu.

Hình 4.18 Màn hình Thay đổi mật khẩu

4.2.5 Màn hình Quản lý Workspace

‒ Ở trang chủ, người dùng sẽ nhìn thấy danh sách các Workspace được hiển thị ở cột bên trái, đồng thời những Board của Workspace đó sẽ được hiển thị ở bên phải.

Hình 4.19 Màn hình Quản lý Workspace

‒ Người dùng có thể bấm vào nút dấu cộng của cột bên trái hoặc nút “Create” trên app bar để tạo Workspace mới

Hình 4.20 Màn hình Tạo Workspace

‒ Danh sách Board được chia ra thành các phần “Your boards”, là những boards mà người dùng là admin, hoặc “All boards in this Workspace”, là những boards mà người dùng tham gia.

‒ Ngoài ra, người dùng có thể chọn “Create new board” để tạo board mới

Hình 4.21 Màn hình Tạo Board

‒ Riêng đối với admin của Workspace, họ sẽ có thể xem thời gian biểu chi tiết của tất cả các công việc nằm trong Workspace đó theo từng khung thời gian cụ thể

Hình 4.6 Màn hình Xem thời gian biểu của Workspace

4.2.6 Màn hình Quản lý Board

‒ Ở trang Quản lý Board, người dùng sẽ thấy một giao diện được chia làm 2 phần (không tính phần app bar dành cho toàn ứng dụng): thanh Board Bar và Board Content.

‒ Thanh Board Bar là nơi hiển thị tên Board cũng như cho phép người dùng thực hiện tùy chỉnh và xem một số thông tin, dữ liệu.

‒ Đối với phần Board Content, đây là nơi chứa các Column, trong mỗi Column sẽ bao gồm nhiều Card.

Hình 4.22 Màn hình Quản lý Board

‒ Người dùng có thể lọc Board theo các Label của Board để chỉ hiển thị những Card tương ứng.

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

‒ Trang web cho phép theo dõi thời gian biểu của các công việc trong Board.

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

‒ Người dùng có thể nắm được các số liệu về công việc thông qua các biểu đồ, mỗi biểu đồ phục vụ cho một mục đích cụ thể

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

‒ Người dùng có thể bấm vào nút “Invite” để mời thành viên mới vào trongBoard.

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

‒ Người dùng có thể xem danh sách thành viên hiện tại của Board.

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

‒ Người dùng có thể kéo thả để thay đổi thứ tự các Column.

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

‒ Người dùng cũng có thể thay đổi thứ tự của các Card trong Column hoặc giữa các Column với nhau

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

4.2.7 Màn hình Quản lý Card

‒ Khi người dùng bấm vào một Card bất kỳ, giao diện sẽ hiển thị thông tin chi tiết của Card.

‒ Người dùng có thể thay đổi tên Card, thêm thành viên, label, checklist, ngày bắt đầu và kết thúc, ảnh đại diện cho Card, tệp đính kèm, những kỹ năng liên quan đến Card.

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

4.2.8 Màn hình Quản lý tài khoản

‒ Ở trang Quản lý tài khoản, người dùng có thể thay đổi thông tin về tài khoản của mình.

‒ Người dùng được phép thay đổi ảnh đại diện, họ có thể lựa chọn hình ảnh và tải lên, sau trang web sẽ lưu lại ảnh đại diện của tài khoản.

‒ Bên cạnh đó, người dùng cũng có thể thay đổi thông tin cá nhân.

‒ Trang web hỗ trợ tính năng thay đổi tài khoản khi người dùng đã đăng nhập, người dùng cần cung cấp đầy đủ và đúng các thông tin để cập nhật lại mật khẩu.

‒ Đối với mỗi tài khoản có thể được thêm nhiều kỹ năng mà người dùng có, để hệ thống có thể dựa vào đó làm cơ sở để đề xuất thành viên phù hợp choCard.

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

‒ Trên thanh app bar, giao diện có hiển thị một ô input, người dùng có thể nhập từ khóa cần tìm và hệ thống sẽ trả về kết quả bao gồm các Workspace, Board, Card nếu tìm thấy.

Hình 4.32 Màn hình Tìm kiếm

‒ Nếu không tìm được bất kỳ thông tin liên quan nào, trang web hiển thị “No results found”

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

‒ Khi người dùng bấm vào nút cái chuông trên thanh app bar, một giao diện sẽ được hiển thị chưa danh sách các thông báo.

‒ Người dùng có thể bật sang chế độ “Only show unread” để chỉ hiển thị những thông báo chưa đọc hoặc tắt đi để hiển thị tất cả các thông báo.

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

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

4.2.11 Màn hình Light/Dark mode

‒ Trên thanh app bar, trang web cho phép chọn chế độ hiển thị là Light hoặc Dark.

‒ Khi người dùng thay đổi, toàn bộ ứng dụng sẽ thay đổi màu sắc tương ứng.

Hình 4.36 Màn hình Light mode

Hình 4.37 Màn hình Dark mode

4.2.12 Màn hình Trợ lý ảo

‒ Trong màn hình quản lý Board, người dùng có thể bấm vào nút “AIAssistant”, một giao diện sẽ hiển thị cho phép người dùng trò chuyện với

‒ Người dùng nhập câu hỏi cần giải đáp, ChatGPT sẽ hiển thị câu trả lời tương ứng.

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

‒ Bên cạnh đó, người dùng có thể tổng hợp các công việc hiện tại nhờ AI mà không cần mất quá nhiều công sức.

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

TỔNG KẾT

Đánh giá

‒ Các thành viên nhóm tích cực tham gia bàn luận, trao đổi để giải quyết vấn đề.

‒ Sử dụng những công cụ như Github, Notion… để quản lý dự án được hiệu quả hơn.

‒ Các thành viên trong nhóm đã từng hợp tác với nhau trong quá khứ nên việc hoà nhập và trao đổi thông tin trở nên dễ dàng, thuận tiện hơn.

‒ Trên thị trường có nhiều website với đề tài tương tự nên tiết kiệm được nhiều thời gian trong việc tìm hiểu và nghiên cứu.

‒ Nhận được sự quan tâm, giúp đỡ nhiệt tình của giảng viên hướng dẫn để cải thiện chất lượng của đồ án.

‒ Đồ án này là lần đầu tiên nhóm quyết định áp dụng những công nghệ mới như Golang, Gin framework, Socket.IO… vào đồ án và gặp nhiều trở ngại khó khăn trong quá trình tìm hiểu cũng như sửa chữa lỗi khi sử dụng.

‒ Sự phân chia thời gian chưa hợp lý nên nhóm đã bị hụt hơi trong giai đoạn cuối Bù lại thì các thành viên phải làm việc nhiều hơn.

‒ Kết thúc đồ án 2, nhóm đã xây dựng được hoàn chỉnh một website quản lý công việc và các chức năng hoạt động ổn định.

‒ Hoàn thành được tất cả các tính năng đã đề ra theo kế hoạch và mở rộng thêm tính năng.

‒ Hiểu được nghiệp vụ của một trang web quản lý công việc.

‒ Hiểu biết thêm về cách hoạt động của những công nghệ phát triển web và ứng dụng chúng vào đồ án.

‒ Cải thiện thêm được kỹ năng lập trình.

‒ Biết cách giao tiếp, phân chia công việc, phối hợp với nhau trong quá trình làm việc nhóm.

Ưu điểm

‒ Hoàn thành các yêu cầu, đáp ứng đầy đủ các chức năng mà nhóm đã đặt ra từ trước.

‒ Phần server của ứng dụng viết bằng Go nên cho hiệu suất ứng dụng trở nên tối ưu hơn.

‒ Giao diện được thiết kế theo dạng động, cho phép người dùng kéo thả để tùy chỉnh theo mục đích sử dụng một cách linh hoạt, giúp gia tăng trải nghiệm người dùng.

‒ Cho phép tóm tắt, tổng hợp công việc bằng AI, giúp tiết kiệm thời gian và công sức ChatGPT sẽ dựa vào thông tin của các công việc đang có và tóm tắt lại một cách trực quan, từ đó người dùng có thể có được một cái nhìn tổng thể về công việc.

‒ Người dùng có thể tương tác trực tiếp với chatbot trong quá trình sử dụng. Khi người dùng có vấn đề cần giải đáp, họ có thể gửi câu hỏi cho chatbot và chatbot sẽ đưa ra câu trả lời tương ứng.

‒ Cung cấp các biểu đồ thể hiện số liệu trực quan, từ đó người dùng có thể đánh giá chất lượng công việc hiện tại.

‒ Cho phép xem thời gian biểu theo thứ thời gian của mỗi công việc, giúp cho quá trình quản lý công việc trở nên đơn giản hơn, từ đó dễ dàng đưa ra các quyết định, kế hoạch trong tương lai.

‒ Trang web bán hàng sử dụng công nghệ NextJS, do đó nâng cao về mặt tối ưu bộ máy tìm kiếm và trải nghiệm người dùng.

‒ Giao diện trang web đơn giản, dễ sử dụng, tương thích trên nhiều thiết bị,nhiều kích thước màn hình Người dùng có thể truy cập và sử dụng trang web bằng bất kỳ thiết bị nào có kết nối internet.

‒ Trang web có hỗ trợ light/dark mode, tùy vào điều kiện sử dụng hoặc sở thích mà người dùng có thể điều chỉnh linh hoạt, từ đó nâng cao trải nghiệm người dùng trong quá trình sử dụng hay thậm chí là tối ưu hiệu quả công việc.

Nhược điểm

‒ Các Column, Card chưa cho phép thay đổi vị trí bằng cách click chuột và chọn ví trí thay vì kéo thả, người dùng có thể sẽ gặp khó khăn nếu như Board có quá nhiều Columns.

‒ Chưa hỗ trợ tạo đường liên kết để mời thành viên mới.

‒ Chưa hỗ trợ giao diện quản lý công việc theo dạng lịch.

Hướng phát triển

‒ Phát triển thêm chức năng mời thành viên bằng đường liên kết.

‒ Phát triển giao diện quản lý công việc dưới dạng lịch.

‒ Hỗ trợ chức năng thay đổi vị trí Column, Card bằng cách chọn vị trí.

Định dạng
Số trang	97
Dung lượng	7,1 MB