Phần 4: Tạo dashboard theo dõi thời gian thực

1. Giới thiệu về dashboard

Dashboard là một công cụ trực quan giúp người dùng theo dõi và quản lý dữ liệu một cách dễ dàng và hiệu quả. Trong dự án IoT, dashboard cho phép bạn theo dõi trạng thái của các cảm biến, thiết bị và các thông số khác theo thời gian thực. Việc có một dashboard giúp bạn:

Nhìn thấy thông tin một cách trực quan và dễ hiểu.
Phát hiện nhanh chóng các vấn đề hoặc bất thường trong hệ thống.
Quản lý và điều khiển thiết bị từ xa một cách hiệu quả.

2. Chọn công cụ để tạo dashboard

Có nhiều công cụ để tạo dashboard cho dự án IoT, nhưng hai công cụ phổ biến mà chúng ta sẽ xem xét trong phần này là:

Node-RED: Đây là một công cụ mã nguồn mở cho phép bạn tạo ra các ứng dụng IoT bằng cách kéo và thả các khối (nodes). Node-RED rất linh hoạt và hỗ trợ nhiều giao thức, bao gồm MQTT.
IoTLabs Maker Dashboard: Đây là một nền tảng đơn giản và dễ sử dụng để tạo dashboard cho các dự án IoT. Với giao diện thân thiện, bạn có thể nhanh chóng thiết lập và tùy chỉnh dashboard theo nhu cầu của mình.

3. Cài đặt và cấu hình công cụ dashboard

Dưới đây là hướng dẫn cài đặt từng công cụ:

3.1. Cài đặt Node-RED

Đầu tiên, bạn cần cài đặt Node.js. Truy cập vào trang web Node.js để tải phiên bản mới nhất và cài đặt.
Sau khi cài đặt xong, mở terminal (CMD trên Windows) và chạy lệnh sau để cài đặt Node-RED:

npm install -g node-red

Chạy Node-RED bằng lệnh:

node-red

Mở trình duyệt và truy cập vào địa chỉ http://localhost:1880 để truy cập giao diện Node-RED.

3.2. Cài đặt IoTLabs Maker Dashboard

Truy cập vào IoTLabs Maker Dashboard.
Đăng ký tài khoản hoặc đăng nhập nếu bạn đã có tài khoản.
Tạo một dự án mới và chọn các widget mà bạn muốn sử dụng cho dashboard của mình.

4. Kết nối dashboard với MQTT broker

Để dashboard có thể nhận dữ liệu từ MQTT broker, bạn cần cấu hình một số thông số kết nối. Dưới đây là cách thực hiện cho cả Node-RED và IoTLabs Maker Dashboard:

4.1. Kết nối với Node-RED

Trong giao diện Node-RED, kéo một node MQTT in vào canvas.
Nhấp đúp vào node để cấu hình:
- Chọn Server là MQTT broker của bạn
- Nhập Topic mà ESP32 đang gửi dữ liệu (ví dụ: temperature).
Kéo một node Debug và kết nối với node MQTT in để xem dữ liệu nhận được.
Nhấn nút Deploy để lưu cấu hình.

4.2. Kết nối với IoTLabs Maker Dashboard

Trong IoTLabs Maker Dashboard, thêm một widget kiểu MQTT.
Cấu hình thông tin kết nối:
- Server: xem trong mục MQTT Info
- Topic: temperature
Lưu cấu hình và kiểm tra xem dữ liệu có được hiển thị trên dashboard hay không.

5. Tạo biểu đồ và hiển thị dữ liệu

Sau khi kết nối thành công, bạn có thể tạo các biểu đồ và hiển thị dữ liệu nhiệt độ trên dashboard. Dưới đây là cách thực hiện cho cả hai công cụ:

5.1. Tạo biểu đồ trong Node-RED

Kéo một node Chart vào canvas và kết nối với node Debug.
Nhấp đúp vào node Chart để cấu hình:
- Chọn loại biểu đồ (ví dụ: Line chart).
- Đặt tên cho biểu đồ và các thông số như trục X, trục Y.
Nhấn nút Deploy để lưu cấu hình.

5.2. Tạo biểu đồ trong IoTLabs Maker Dashboard

Thêm một widget kiểu Chart vào dashboard.
Cấu hình widget để hiển thị dữ liệu từ topic temperature.
Chọn kiểu biểu đồ và các tùy chọn hiển thị khác.
Lưu lại và kiểm tra dashboard để xem biểu đồ hiện lên như mong đợi.

Lưu ý: Đảm bảo rằng ESP32 của bạn đang gửi dữ liệu đúng cách đến MQTT broker, nếu không dashboard sẽ không nhận được dữ liệu.

Với các bước trên, bạn đã hoàn thành việc tạo dashboard theo dõi nhiệt độ thời gian thực từ cảm biến DHT22 qua MQTT. Giờ đây, bạn có thể theo dõi và quản lý dữ liệu của mình một cách dễ dàng và hiệu quả.