Xây dựng một hệ thống IoT với ESP32 và Firebase cùng Gemini AI

TAPIT

5 hours ago

Đến với WTTC33, Speaker Dương Uy Lực (Khóa 21ECE – Khoa FAST, Trường ĐHBK, ĐHĐN) chia sẻ cùng các bạn một trải nghiệm về một quy phát triển dự án IoT với chủ đề: “30 phút xây dựng hệ thống IoT với ESP32 và Firebase cùng Gemini AI”. Các nội dung bao gồm:

Thiết kế hệ thống: Kết nối cảm biến DHT11 với ESP32 để thu thập dữ liệu môi trường.
Quản lý dữ liệu: Sử dụng giao thức HTTP PUT để truyền dữ liệu lên Firebase Realtime Database.
Ứng dụng AI vào lập trình: Trải nghiệm sức mạnh của Gemini AI thông qua nền tảng Firebase Studio để xây dựng ứng dụng Web Full-stack nhanh chóng và hiệu quả.

Đây là cơ hội tuyệt vời để các bạn tiếp cận phương thức xây dựng dự án IoT hiện đại, kết hợp giữa phần cứng truyền thống và các công cụ hỗ trợ AI tiên tiến nhất hiện nay.

Những nội dung này là tài liệu được sử dụng tại sự kiện TAPIT WTTC33.

1. Giới thiệu

Hướng dẫn này trình bày cách xây dựng một ứng dụng web cơ bản sử dụng Firebase Studio với tích hợp Gemini AI để hiển thị dữ liệu nhiệt độ và độ ẩm được thu thập từ thiết bị IoT (ESP32 + DHT11).

Mục tiêu là giúp người mới bắt đầu, ngay cả những người không quen thuộc với việc thiết lập trang web, có thể nhanh chóng tạo ra một trang web hoạt động, lấy dữ liệu từ Firebase và hiển thị dữ liệu đó trên giao diện người dùng đơn giản, với sự hỗ trợ của Gemini AI trong việc tạo mã và giải thích.

2. Tổng quan hệ thống

Hệ thống bao gồm các thành phần sau:

ESP32 : Thu thập dữ liệu từ cảm biến và gửi đến Firebase
DHT11: Cảm biến nhiệt độ và độ ẩm trong không khí
Firebase Realtime Database: Cơ sở dữ liệu lưu dữ liệu cảm biến
Firebase Studio: Nền tảng xây dựng ứng dụng full-stack với Gemini AI
Gemini AI: Hỗ trợ tạo mã và logic giao diện người dùng
Ứng dụng web: Hiển thị dữ liệu cho người dùng

Sơ đồ khối:

Hình 1. Sơ đồ khối của hệ thống

Sơ đồ tuần tự:

Hình 2. Sơ đồ tuần tự của hệ thống

3. Cấu hình Firebase Realtime Database

Ở đây bạn sẽ cấu hình Database của mình, nơi mà ESP32 gửi dữ liệu đến và lưu trữ. Dưới đây là các bước để thiết lập database.

Chọn vào Get Started để bắt đầu một dự án Firebase mới.

Hình 3. Tạo database cho dự án

Đặt tên cho dự án của mình. Click chọn “I accept” và “Continue” để tiếp tục.

Hình 4. Đặt tên cho dự án

Sau đó bạn sẽ chọn vào Realtime Database làm nơi lưu trữ data.

Hình 5. Chọn Realtime database

Lựa chọn khu vực đặt máy chủ database theo hình hướng dẫn.

Hình 6. Chọn khu vực đặt máy chủ database

Thiết lập quyền truy cập cho database của bạn ở dạng locked mode.

Hình 7. Thiết lập quyền truy cập locked mode cho database

Trong phần Rules, hãy thay đổi các câu lệnh đọc và ghi thành true để cho phép cơ sở dữ liệu của bạn nhận và đọc dữ liệu từ các nguồn bên ngoài mà không cần yêu cầu quyền truy cập xác thực (ví dụ: email và mật khẩu của chủ sở hữu dự án).

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

{

"rules": {

".read": true,

".write": true

}

Hình 8. Thay đổi quyền đọc ghi thành true

Tiếp theo, chọn “Export JSON” để tải xuống tệp JSON và cấu hình nó như sau.

Hình 9. Tải file JSON

Hình 10. Cấu hình file JSON

Sau khi chỉnh sửa tệp JSON và chọn nhập (Import Json), cấu trúc cơ sở dữ liệu của bạn sẽ trông như thế này:

Hình 11. Cấu trúc database sau cấu hình

Giờ đây, bạn có thể thử giao tiếp với cơ sở dữ liệu của mình bằng Postman với các giao thức HTTPS thông dụng như POST, PUT và GET để thay đổi giá trị nhiệt độ và độ ẩm ở trong database của mình.

Hình 12. Giao diện Project Setting trong Firebase console

Chọn Setting và tìm mục cấu hình App, sau đó chọn Web.

Hinh 13. Đăng ký ứng dụng Web/App

Sau khi cấu hình hoàn tất, bạn có thể tìm thấy Secret key trong mục Service Account của Project setting. Khóa bí mật này sẽ cho phép bạn gửi dữ liệu từ ESP32 đến database của mình.

Hình 14. Secret Key trong tab Service Accounts của Firebase Project settings

Secret Key: “2pOcFiuSrRsZJRSGgsY0WnxIFqtkDLPOmy9iClqe“

4. Lập trình ESP32

Với phần lập trình ESP32, bạn phải cài đặt một số thư viện như Wifi.h để ESP32 có thể kết nối Wifi, và Firebase_ESP_Client.h, DHT.h. Mục đích của bước này chính là dùng ESP32 để đọc dữ liệu cảm biến DHT và gửi dữ liệu đến Firebase Realtime Database.

Ở đây bạn cần lưu ý những vị trí cần thay đổi như:

Wifi (tên Wifi, mật khẩu Wifi)
Database_URL
Database _SECRET
Khai báo chân khi bạn kết nối ngoại vi với ESP32

Source Code

#include <WiFi.h>

#include <Firebase_ESP_Client.h>

#include "DHT.h"

// --------- Cấu hình WiFi ----------

#define WIFI_SSID "Mina 2"

#define WIFI_PASSWORD "11111111"

// --------- Firebase Realtime Database ----------

#define DATABASE_URL "https://dht11-application-default-rtdb.asia-southeast1.firebasedatabase.app" 

#define DATABASE_SECRET "2pOcFiuSrRsZJRSGgsY0WnxIFqtkDLPOmy9iClqe"

// --------- Khai báo Firebase ----------

FirebaseData fbdo;

FirebaseAuth auth;

FirebaseConfig config;

// --------- DHT11 ----------

#define DHTPIN 4

#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

void setup() {

  Serial.begin(115200);

  dht.begin();

  // Kết nối WiFi

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  Serial.print("Đang kết nối WiFi");

  while (WiFi.status() != WL_CONNECTED) {

    delay(300);

    Serial.print(".");

  }

  Serial.println("\nKết nối WiFi thành công!");

  Serial.println("IP: " + String(WiFi.localIP()));

  // Cấu hình Firebase

  config.database_url = DATABASE_URL;

  config.signer.tokens.legacy_token = DATABASE_SECRET;  // Dùng Database Secret legacy

  Firebase.begin(&config, &auth);

  Firebase.reconnectWiFi(true);

  Serial.println("=== Firebase Initialized ===");

}

void loop() {

  // Đọc dữ liệu DHT11

  float temperature = dht.readTemperature(); // độ C

  float humidity = dht.readHumidity();

  if (isnan(temperature) || isnan(humidity)) {

    Serial.println("⚠️ Lỗi đọc dữ liệu từ DHT11!");

    delay(2000);

    return;

  }

  Serial.println("---- Sending to Firebase ----");

  Serial.print("Temperature: "); Serial.println(temperature);

  Serial.print("Humidity: "); Serial.println(humidity);

  // Tạo JSON

  FirebaseJson jsonData;

  jsonData.set("temperature", temperature);

  jsonData.set("humidity", humidity);

  String path = "/sensor";  // Node trên Firebase

  // Gửi dữ liệu lên Firebase

  if (Firebase.RTDB.updateNode(&fbdo, path, &jsonData)) {

    Serial.println("✅ Dữ liệu cập nhật thành công tại " + path);

  } else {

    Serial.println("❌ Lỗi cập nhật: " + fbdo.errorReason());

  }

  Serial.println("-----------------------------\n");

  delay(30000); // gửi mỗi 30 giây

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

#include <WiFi.h>

#include <Firebase_ESP_Client.h>

#include "DHT.h"

// --------- Cấu hình WiFi ----------

#define WIFI_SSID "Mina 2"

#define WIFI_PASSWORD "11111111"

// --------- Firebase Realtime Database ----------

#define DATABASE_URL "https://dht11-application-default-rtdb.asia-southeast1.firebasedatabase.app"

#define DATABASE_SECRET "2pOcFiuSrRsZJRSGgsY0WnxIFqtkDLPOmy9iClqe"

// --------- Khai báo Firebase ----------

FirebaseData fbdo;

FirebaseAuth auth;

FirebaseConfig config;

// --------- DHT11 ----------

#define DHTPIN 4

#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE);

void setup() {

Serial.begin(115200);

dht.begin();

// Kết nối WiFi

WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

Serial.print("Đang kết nối WiFi");

while (WiFi.status() != WL_CONNECTED) {

delay(300);

Serial.print(".");

}

Serial.println("\nKết nối WiFi thành công!");

Serial.println("IP: " + String(WiFi.localIP()));

// Cấu hình Firebase

config.database_url = DATABASE_URL;

config.signer.tokens.legacy_token = DATABASE_SECRET; // Dùng Database Secret legacy

Firebase.begin(&config, &auth);

Firebase.reconnectWiFi(true);

Serial.println("=== Firebase Initialized ===");

}

void loop() {

// Đọc dữ liệu DHT11

float temperature = dht.readTemperature(); // độ C

float humidity = dht.readHumidity();

if (isnan(temperature) || isnan(humidity)) {

Serial.println("⚠️ Lỗi đọc dữ liệu từ DHT11!");

delay(2000);

return;

}

Serial.println("---- Sending to Firebase ----");

Serial.print("Temperature: "); Serial.println(temperature);

Serial.print("Humidity: "); Serial.println(humidity);

// Tạo JSON

FirebaseJson jsonData;

jsonData.set("temperature", temperature);

jsonData.set("humidity", humidity);

String path = "/sensor"; // Node trên Firebase

// Gửi dữ liệu lên Firebase

if (Firebase.RTDB.updateNode(&fbdo, path, &jsonData)) {

Serial.println("✅ Dữ liệu cập nhật thành công tại " + path);

} else {

Serial.println("❌ Lỗi cập nhật: " + fbdo.errorReason());

}

Serial.println("-----------------------------\n");

delay(30000); // gửi mỗi 30 giây

}

Ở đây, khi gửi dữ liệu nhiệt độ và độ ẩm đến Firebase, chúng ta sẽ sử dụng giao thức HTTP PUT.

Hình 15. Kết quả hiển thị trên Serial Monitor của công cụ ArduinoIDE

Sau khi ESP32 được cấu hình xong, dữ liệu nhiệt độ và độ ẩm sẽ được gửi đến Firebase Realtime Database.

Hình 16. Kết quả cập nhật thời gian thực trên Firebase

5. Xây dựng Web/app sử dụng Firebase Studio tích hợp sẵn Gemini AI

Đây chính là bước cuối cùng, tạo ra một website có thể hiển thị được dữ liệu mình đã lưu trữ bên Firebase Realtime Database của mình. Đây cũng chính là một môi trường mở nơi bạn có thể thỏa sức sáng tạo, tạo nên một website của chính mình. Sau đây sẽ là một số hướng dẫn cơ bản giúp bạn nhanh chóng làm quen với Firebase Studio.

Trên màn hình Firebase Console, hãy nhấp vào chọn Firebase Studio để bắt đầu xây dựng trang web của bạn.

Hình 17. Firebase Studio giúp xây dựng ứng dụng Web/App

Tiếp theo chọn new workspace.

Hình 18. Chọn New Workspace

Click chọn new workspace (màu xanh dương) ở góc trên cùng bên phải của màn hình.

Hình 19. Chọn New Empty Workspace

Bây giờ bạn sẽ quay lại giao diện Firebase Console để lấy thông tin quan trọng như hình bên dưới, bao gồm cả cấu trúc JSON database của bạn.

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";

import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries



// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

  apiKey: "AIzaSyDrkjNmITMR-eH5RtOb9r0BnxuZD0-qwwk",

  authDomain: "dht11-application.firebaseapp.com",

  databaseURL: "https://dht11-application-default-rtdb.asia-southeast1.firebasedatabase.app",

  projectId: "dht11-application",

  storageBucket: "dht11-application.firebasestorage.app",

  messagingSenderId: "1076545625582",

  appId: "1:1076545625582:web:f0efa0a6d5c301306c42ff",

  measurementId: "G-PLPYQVRPGV"

};



// Initialize Firebase

const app = initializeApp(firebaseConfig);

const analytics = getAnalytics(app);

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";

import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

apiKey: "AIzaSyDrkjNmITMR-eH5RtOb9r0BnxuZD0-qwwk",

authDomain: "dht11-application.firebaseapp.com",

databaseURL: "https://dht11-application-default-rtdb.asia-southeast1.firebasedatabase.app",

projectId: "dht11-application",

storageBucket: "dht11-application.firebasestorage.app",

messagingSenderId: "1076545625582",

appId: "1:1076545625582:web:f0efa0a6d5c301306c42ff",

measurementId: "G-PLPYQVRPGV"

};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

const analytics = getAnalytics(app);

Những mục này nằm ở Project Setting/ General/ Webapp/SDK setup and configuration

Hình 20. Cấu trúc JSON database tại Project Setting/General/Webapp/SDK setup and configuration

Sao chép những dòng này và dán chúng vào giao diện Gemini AI tích hợp sẵn trong Firebase Studio, sau đó sử dụng lệnh sau: “Đây là thông tin trong cơ sở dữ liệu của tôi, được sử dụng để đo nhiệt độ và độ ẩm. Vui lòng giúp tôi xây dựng giao diện để hiển thị dữ liệu nhiệt độ và độ ẩm từ cơ sở dữ liệu của tôi.”

Hình 21. Sử dụng lệnh kết hợp SDK setup and configuration

Nhấp chuột vào “Create file” theo hướng dẫn của Gemini, và phần mềm sẽ tự động mã hóa và biên dịch tệp.

Hình 22. Chọn Create File

Sau khi hoàn tất mọi thứ, hãy nói với Gemini: “Cho tôi đường dẫn để truy cập trang web mà tôi vừa xây dựng.” Nhấp vào đường dẫn và bạn sẽ có thể truy cập trang web của mình.

Hình 23. Link truy cập ứng dụng Web/App

Khi click vào đường dẫn bạn sẽ mở ra được giao diện website cho mình vừa tạo ra.

Hình 24. Giao diện ứng dụng Web/App

Hãy sử dụng câu lệnh: “Tạo cho tôi một giao diện web trông đẹp mắt hơn và dễ nhìn hơn”. Click theo các chỉ dẫn của Gemini.

Hình 25. Giao diện ứng dụng WebApp sau cập nhật

Hoàn thiện trang web bằng cách tối ưu hóa giao diện và thêm logo bản quyền.

Sử dụng lệnh: “Tôi muốn làm cho giao diện trang web đẹp hơn và tôi muốn thêm hình ảnh logo của mình“. Hãy làm theo hướng dẫn của Gemini và bạn sẽ có thể hoàn thành trang web của riêng mình.

Hình 26. Gemini hướng dẫn cách thêm logo cho Web/App

Các bạn có thể tham khảo Web/App của mình tại đây: https://dht11-01621352-6a7a9.web.app/

Hình 27. Giao diện ứng dụng Web/App sau cập nhật logo

Lưu ý: Khi xây dựng trang web bằng Firebase Studio, bugs là điều không thể tránh khỏi. Ví dụ, trang web có thể không hiển thị dữ liệu chính xác trên Firebase, thường trả về giá trị Null. Hãy sử dụng Gemini AI như một công cụ giúp bạn tìm hiểu và gỡ lỗi những vấn đề này.

Các vấn đề khác, chẳng hạn như lỗi bộ nhớ đệm, có thể xảy ra khi bạn cập nhật trang web của mình, hoặc khi bạn thực hiện thay đổi nhưng giao diện không được cập nhật vì các trình duyệt web (Chrome, Firefox, v.v.) luôn cố gắng tăng tốc độ duyệt web bằng cách lưu các bản sao của tệp (như style.css, script.js) vào bộ nhớ đệm của máy tính. Khi bạn tải lại trang, nó sẽ sử dụng tệp đã lưu thay vì tải lại từ đầu.

Khi bạn (nhà phát triển) cập nhật mã nguồn, trình duyệt không biết điều này và tiếp tục sử dụng phiên bản cũ đã lưu. Hãy thử sử dụng Gemini để xem nó có thể giúp bạn giải quyết vấn đề này như thế nào.

6. Kết luận

Bài hướng dẫn này trình bày một cách tiếp cận thực tế để xây dựng một trang web giám sát IoT cơ bản bằng Firebase Studio và Gemini AI. Bằng cách tận dụng phát triển hỗ trợ bởi AI, người mới bắt đầu có thể nhanh chóng tạo ra các ứng dụng web chức năng mà không cần kiến thức chuyên sâu về giao diện người dùng. Giải pháp này phù hợp cho các dự án giáo dục và các hệ thống IoT quy mô nhỏ.

Chúc các bạn thành công!

Dương Uy Lực

Tìm hiểu thêm:

Tổng hợp hướng dẫn Internet of Things với NodeMCU ESP8266 và ESP32

Tổng hợp các bài hướng dẫn Lập trình vi điều khiển STM32

[HỌC ONLINE: LẬP TRÌNH VI ĐIỀU KHIỂN STM32, VI XỬ LÝ ARM CORTEX – M]

Fanpage TAPIT: TAPIT – AIoT Learning