Device Management

Relevant source files

The following files were used as context for generating this wiki page:

• backend/src/routes/thietBi.js
• backend/src/models/ThietBi.js
• backend/src/models/CamBien.js
• frontend/src/pages/DeviceManagerment.js
• frontend/src/services/deviceAPI.js
• frontend/src/components/common/DeviceTable.js
• backend/src/server.js
• frontend/src/App.js

The Device Management module is a core administrative feature of the AirZen application, designed for monitoring and managing the network of IoT air quality monitoring devices. It provides administrators with a centralized interface to view a comprehensive list of all registered devices, search for specific devices, filter them by operational status, and view their associated sensors.

This system is crucial for maintaining the health and integrity of the data collection infrastructure. It is accessible via the /admin/devices route and integrates a React-based frontend with a Node.js/Express backend that communicates with a MongoDB database. The backend employs a powerful aggregation pipeline to efficiently query and join data from different collections.

Backend Architecture

The backend is responsible for data persistence, business logic, and providing a RESTful API for the frontend to consume.

Data Models

The system uses two main Mongoose models to represent devices and their sensors: ThietBi (Device) and CamBien (Sensor).

ThietBi Model

This model defines the structure for an IoT device.

Field	Type	Description	Constraints
_id	ObjectId	Unique identifier for the device.	Auto-generated by MongoDB.
TenThietBi	String	The name of the device.	Required, Trimmed.
ViTri	String	The location where the device is installed.	Required.
NgayNhap	Date	The date the device was added to the system.	Defaults to Date.now.

Sources: backend/src/models/ThietBi.js

CamBien Model

This model represents a sensor associated with a ThietBi device. There is a one-to-many relationship where one device can have multiple sensors.

Field	Type	Description	Constraints
_id	ObjectId	Unique identifier for the sensor.	Auto-generated by MongoDB.
ID_ThietBi	ObjectId	A reference to the parent ThietBi device.	Required, Indexed.
LoaiCamBien	String	The type of sensor (e.g., 'PM2.5', 'CO2').	Required.
TrangThai	String	The operational status of the sensor (e.g., 'active', 'inactive').	Required.

Sources: backend/src/models/CamBien.js, backend/src/routes/thietBi.js:4

API Endpoint

The module exposes a single primary endpoint for fetching device data.

GET /api/thietbi

This endpoint retrieves a paginated list of devices, along with their associated sensors. It supports searching by device name and filtering by sensor status.

Query Parameters:

Parameter	Type	Default	Description
search	String	""	A search string to filter devices by TenThietBi (case-insensitive).
status	String	"all"	Filters devices based on the TrangThai of their associated sensors.
page	Number	1	The page number for pagination.
limit	Number	10	The number of items per page.

Sources: backend/src/routes/thietBi.js:6-8

Response Body:
The endpoint returns a JSON object containing the list of devices and pagination metadata.

{
  "devices": [
    {
      "_id": "...",
      "TenThietBi": "AirZen-01",
      "ViTri": "Living Room",
      "NgayNhap": "...",
      "camBien": [
        {
          "_id": "...",
          "ID_ThietBi": "...",
          "LoaiCamBien": "CO2",
          "TrangThai": "active"
        }
      ]
    }
  ],
  "pagination": {
    "total": 1,
    "page": 1,
    "limit": 10,
    "pages": 1
  }
}

Sources: backend/src/routes/thietBi.js:61-69

Data Aggregation Flow

The GET /api/thietbi endpoint uses a MongoDB aggregation pipeline to construct its response. This allows for efficient server-side data processing.

The pipeline performs the following key steps:

1. $match (Search): If a search query parameter is provided, it filters devices by name.
2. $lookup (Join): It performs a left outer join with the CamBien collection to embed sensor data into each device document.
3. $match (Filter): If a status query parameter (other than "all") is provided, it filters the results based on the sensor status.
4. $count (Total): A parallel pipeline runs to count the total number of documents matching the criteria before pagination for metadata.
5. $sort, $skip, $limit (Pagination): The final results are sorted, and pagination is applied.

Sources: backend/src/routes/thietBi.js:11-58

Frontend Architecture

The frontend is built with React and provides the user interface for administrators to interact with the device data.

Component Structure

The UI is composed of several key components that work together to display and manage device information.

• DeviceManagerment.js: The main page component that holds the application state (search query, filters, pagination) and orchestrates data fetching. It is rendered under the /admin/devices route.
  Sources: frontend/src/pages/DeviceManagerment.js, frontend/src/App.js:47
• DeviceTable.js: A presentational component that receives an array of devices as props and renders them in a structured table.
  Sources: frontend/src/components/common/DeviceTable.js
• deviceAPI.js: A service module that abstracts the API communication. It contains the function to call the GET /api/thietbi endpoint.
  Sources: frontend/src/services/deviceAPI.js

Data Fetching and State Management

The DeviceManagerment component uses React hooks (useState, useEffect) to manage its state and handle the data fetching lifecycle.

When the component mounts or when dependencies like page, search, or status change, a useEffect hook triggers a call to the fetchDevices function in deviceAPI.js. The returned data is then stored in the component's state, causing the UI to re-render and display the updated list of devices.

Sources: frontend/src/pages/DeviceManagerment.js, frontend/src/services/deviceAPI.js

Summary

The Device Management feature is a well-structured full-stack module that effectively separates concerns between the frontend and backend. The backend leverages MongoDB's aggregation framework for powerful and efficient data querying, while the frontend uses a modern component-based architecture with React to provide a responsive and interactive user experience for administrators. This system is essential for the operational oversight of the AirZen IoT network.