Thiết kế Class Diagram để phát triển Dashboard hiện thông tin từ API

[DucHien0643]

Để vẽ Class Diagram cho các chức năng đã cho, ta có thể thiết kế các lớp sau:

• [x] Task1: Xác định các thành phần chính của ứng dụng.
• [x] Task2: class User: Đây là lớp đại diện cho người dùng sử dụng ứng dụng Dashboard. Lớp này sẽ chứa các thuộc tính như tên đăng nhập, mật khẩu và quyền hạn.
• [x] Task3: class APIManager: Lớp này quản lý việc truy xuất dữ liệu từ API. Lớp này bao gồm các phương thức để lấy dữ liệu từ API và gửi yêu cầu API.
• [x] Task4: class Dashboard: Đây là lớp chính của ứng dụng Dashboard, nó sẽ quản lý việc hiển thị thông tin và tương tác với người dùng. Lớp này có các thuộc tính như bộ lọc, cài đặt và các yêu cầu để truy xuất dữ liệu từ API.
• [x] Task5: class DataModel: Đây là lớp đại diện cho dữ liệu trả về từ API. Lớp này sẽ định nghĩa cấu trúc dữ liệu và các phương thức để truy cập dữ liệu.
• [x] Task6: class UIComponent: Lớp này đại diện cho các thành phần giao diện người dùng trên Dashboard như bộ lọc, nút tìm kiếm, nút cập nhật, v.v.
• [x] Task7: Merge các class lại với nhau

[DucHien0643]

Task 2: class User Trong hệ thống phần mềm, lớp User được sử dụng để đại diện cho người dùng (user) của hệ thống. Lớp này chứa thông tin liên quan đến người dùng như tên đăng nhập, mật khẩu, thông tin cá nhân, quyền truy cập, v.v. Lớp User được sử dụng để xác thực người dùng khi họ đăng nhập vào hệ thống, kiểm soát quyền truy cập và quản lý các hoạt động của người dùng trong hệ thống.

• Các thuộc tính của lớp User có thể bao gồm: ID: định anh user username: tên đăng nhập của người dùng password: mật khẩu của người dùng email: địa chỉ email của người dùng full_name: họ và tên đầy đủ của người dùng role: quyền hạn của người dùng trong hệ thống

• Các phương thức của lớp User có thể bao gồm:

  login(username, password): phương thức xác thực đăng nhập của người dùng logout(): phương thức đăng xuất khỏi hệ thống has_permission(permission): phương thức kiểm tra quyền hạn của người dùng

[DucHien0643]

Task1: Xác định các thành phần chính của ứng dụng.

• User
• APIManager
• Dashboard
• DataModel
• UIComponent

[DucHien0643]

Task3: class APIManager: Lớp này quản lý việc truy xuất dữ liệu từ API. Lớp này bao gồm các phương thức để lấy dữ liệu từ API và gửi yêu cầu API.

• Các thuộc tính của lớp APIManagercó thể bao gồm: baseURL: URL cơ sở của API apiToken: mã xác thực cung cấp bởi API để sử dụng khi gửi yêu cầu API
• Các phương thức của lớp APIManagercó thể bao gồm: sendRequest(requestMethod, endpoint, requestData): phương thức gửi yêu cầu API và trả về dữ liệu nhận được processResponse(responseData): phương thức xử lý dữ liệu nhận được từ API trước khi trả về cho hệ thống sử dụng lớp APIManager

[DucHien0643]

Task4: class Dashboard: Đây là lớp chính của ứng dụng Dashboard, nó sẽ quản lý việc hiển thị thông tin và tương tác với người dùng. Lớp này có các thuộc tính như bộ lọc, cài đặt và các yêu cầu để truy xuất dữ liệu từ API.

• Các thuộc tính của lớp Dashboard có thể bao gồm:

  dataSources: danh sách các nguồn dữ liệu được sử dụng để lấy dữ liệu cho dashboard filters: danh sách các bộ lọc được sử dụng để lọc dữ liệu trên dashboard displaySettings: các cài đặt hiển thị cho dashboard, bao gồm cả cài đặt kích thước và vị trí của các phần tử trên dashboard

• Các phương thức của lớp Dashboard có thể bao gồm:

  loadData(): phương thức để tải dữ liệu từ các nguồn dữ liệu và hiển thị nó trên dashboard applyFilters(): phương thức để áp dụng bộ lọc cho dữ liệu trên dashboard và hiển thị lại kết quả changeDisplaySettings(): phương thức để thay đổi cài đặt hiển thị trên dashboard

[DucHien0643]

Task5: class DataModel: Đây là lớp đại diện cho dữ liệu trả về từ API. Lớp này sẽ định nghĩa cấu trúc dữ liệu và các phương thức để truy cập dữ liệu.

• Các thuộc tính của lớp DataModel có thể bao gồm:

  dataStructure: định dạng cấu trúc của dữ liệu, bao gồm các thuộc tính và kiểu dữ liệu tương ứng dataSource: nguồn dữ liệu mà lớp này đại diện cho

• Các phương thức của lớp DataModel có thể bao gồm:

  getData(): phương thức để lấy dữ liệu từ nguồn dữ liệu mà lớp này đại diện cho setData(): phương thức để thiết lập dữ liệu cho lớp này updateData(): phương thức để cập nhật dữ liệu cho lớp này từ nguồn dữ liệu

[DucHien0643]

Task6: class UIComponent: Lớp này đại diện cho các thành phần giao diện người dùng trên Dashboard như bộ lọc, nút tìm kiếm, nút cập nhật, v.v.

• Thuộc tính: ID: định danh component props: một object chứa các thuộc tính được truyền vào component. state: một object chứa các thuộc tính được sử dụng để lưu trữ trạng thái của component.

• Phương thức: render(): phương thức này được sử dụng để render các thành phần giao diện người dùng trên trình duyệt. Phương thức này trả về một đối tượng React Element, được tạo bởi hàm React.createElement() hoặc sử dụng cú pháp JSX.

[DucHien0643]

Task7: Merge các class lại với nhau https://drive.google.com/file/d/1AosA5wEL-Q84uhWwGxff7unfKuHfRfeU/view?usp=sharing