ESP32 с Firebase — Создание веб-приложения
Это руководство научит вас создавать простое Firebase веб-приложение для управления и мониторинга вашей платы ESP32. Веб-приложение, которое вы создадите, будет доступно по всему миру для управления и мониторинга ESP32 из любой точки мира. Это веб-приложение создаёт мост между Firebase Realtime Database и ESP32.
Обновлено 22 апреля 2025 года
Перед началом выполните следующий урок:
Вот основные шаги для выполнения этого урока:
Создание проекта Firebase — мы рекомендуем использовать проект Firebase из предыдущего урока.
У нас есть аналогичный урок для платы ESP8266: ESP8266 NodeMCU с Firebase — Создание веб-приложения
Установка необходимого программного обеспечения
Для выполнения этого проекта вам необходимо установить следующее программное обеспечение:
Установка VS Code
Следуйте инструкциям для установки VS Code на вашу операционную систему:
A) Установка VS Code на Windows (Visual Studio Code)
Перейдите на https://code.visualstudio.com/ и скачайте стабильную сборку для вашей операционной системы (Windows).
Нажмите на мастер установки, чтобы начать установку, и следуйте всем шагам для завершения установки. Примите соглашение и нажмите кнопку Next.
Выберите следующие параметры и нажмите Next.
Нажмите кнопку Install.
Наконец, нажмите Finish для завершения установки.
Откройте VS Code, и вас встретит вкладка Welcome с примечаниями к выпуску новейшей версии.
Вот и всё. Visual Studio Code успешно установлен.
B) Установка VS Code на Mac OS X (Visual Studio Code)
Перейдите на https://code.visualstudio.com/ и скачайте стабильную сборку для вашей операционной системы (Mac OS X).
После загрузки файла приложения Visual Studio Code вам будет предложено следующее сообщение. Нажмите кнопку «Open».
Или откройте папку Downloads и откройте Visual Studio Code.
После этого вас встретит вкладка Welcome с примечаниями к выпуску новейшей версии.
Вот и всё. Visual Studio Code успешно установлен.
C) Установка VS Code на Linux Ubuntu (Visual Studio Code)
Перейдите на https://code.visualstudio.com/ и скачайте стабильную сборку для вашей операционной системы (Linux Ubuntu).
Сохраните файл установки:
Для установки откройте окно терминала, перейдите в папку Downloads и выполните следующую команду для установки VS Code.
$ cd Downloads
~/Downloads $ sudo apt install ./code_1.49.1-1600299189_amd64.deb
Когда установка завершится, VS Code должен быть доступен в меню приложений.
Откройте VS Code, и вас встретит вкладка Welcome с примечаниями к выпуску новейшей версии.
Вот и всё. Visual Studio Code успешно установлен.
Установка Node.js
1) Перейдите на nodejs.org и скачайте LTS версию.
2) Запустите исполняемый файл и следуйте процессу установки.
3) Включите автоматическую установку всех необходимых инструментов.
4) Когда установка завершится, нажмите Finish.
5) Откроется окно терминала для установки дополнительных инструментов для Node.js. Когда установка завершится, нажмите любую клавишу для продолжения. После завершения вы можете закрыть окно терминала.
Установка инструментов Firebase (VS Code)
1) Откройте VS Code. Закройте все открытые проекты, если они есть.
2) Откройте новое окно терминала. Перейдите в Terminal > New Terminal.
3) Выполните следующую команду для перехода в путь C:\ (вы можете установить в любой другой путь):
cd \
Перед установкой инструментов Firebase выполните следующую команду для установки последнего пакета npm:
npm install -g npm@latest
4) Выполните следующую команду для глобальной установки инструментов firebase:
npm -g install firebase-tools
5) Инструменты Firebase будут установлены (вы можете игнорировать любые предупреждения об устаревших библиотеках).
6) Проверьте, успешно ли установлен Firebase, с помощью следующей команды:
firebase --version
Должна отобразиться текущая установленная версия Firebase.
Настройка проекта Firebase веб-приложения (VS Code)
Перед созданием Firebase веб-приложения вам необходимо настроить проект Firebase в VS Code. Вот шаги:
1) Создание папки проекта
1) Создайте папку на вашем компьютере, где вы хотите сохранить ваш проект Firebase — например, Firebase-Project.
2) Откройте VS Code. Перейдите в File > Open Folder… и выберите только что созданную папку.
3) Перейдите в Terminal > New Terminal. Новое окно терминала должно открыться в пути вашего проекта.
2) Вход в Firebase
4) В предыдущем окне терминала введите следующее:
firebase login
5) Вам будет предложено собрать информацию об использовании CLI и отчётах об ошибках. Введите «n» и нажмите Enter для отказа.
6) После этого откроется новое окно в вашем браузере для входа в вашу учётную запись Firebase.
7) Разрешите Firebase CLI доступ к вашей учётной записи Google.
8) После этого вход в Firebase CLI должен быть успешным. Вы можете закрыть окно браузера.
3) Инициализация проекта Firebase веб-приложения
9) После успешного входа выполните следующую команду для запуска каталога проекта Firebase в текущей папке.
firebase init
10) Вам будет предложено инициализировать проект Firebase в текущем каталоге. Введите Y и нажмите Enter.
11) Затем используйте стрелки вверх и вниз и клавишу пробела для выбора параметров. Выберите следующие параметры:
RealTime Database: Configure security rules file for Realtime Database and (optionally) provision default instance.
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
Выбранные параметры будут отображаться с зелёной звёздочкой. Затем нажмите Enter.
12) Выберите опцию «Use an existing project» — она должна быть выделена синим цветом — затем нажмите Enter.
13) После этого выберите проект Firebase для этого каталога — это должен быть проект, созданный в предыдущем уроке. В моём случае он называется ESP-Project. Затем нажмите Enter.
14) Затем выберите параметры хостинга, как показано ниже:
What do you want to use as your public directory? Нажмите Enter для выбора public.
Configure as a single-page app (rewrite urls to /index.html)? No
Set up automatic builds and deploys with GitHub? No
15) Нажмите Enter на следующем вопросе для выбора файла правил безопасности базы данных по умолчанию: «What file should be used for Realtime Database Security Rules?»
16) Проект Firebase теперь должен быть успешно инициализирован. Обратите внимание, что VS Code создал некоторые необходимые файлы в папке вашего проекта.
Файл index.html содержит некоторый HTML-текст для создания веб-страницы. Пока оставьте HTML-текст по умолчанию. Идея состоит в том, чтобы заменить его вашим собственным HTML-текстом для создания пользовательской веб-страницы под ваши нужды. Мы сделаем это позже в этом уроке.
17) Чтобы проверить, всё ли прошло как ожидалось, выполните следующую команду в окне терминала VS Code.
firebase deploy
После развёртывания вы должны получить URL вашего хостинга. Перейдите по этому URL. Вы должны получить доступ к похожей веб-странице.
Эта веб-страница создана с использованием файлов, размещённых в папке public вашего проекта Firebase.
Вы можете получить доступ к этой веб-странице из любой точки мира. Теперь идея состоит в том, чтобы изменить файлы в папке public, чтобы показывать вашу собственную веб-страницу вместо этой.
4) Добавление Firebase в ваше приложение
Оставьте VS Code открытым. Тем временем вам нужно перейти в вашу учётную запись Firebase, чтобы добавить Firebase в ваше приложение.
18) Перейдите в консоль Firebase и выберите ваш проект. Затем нажмите кнопку +Add app и выберите значок веб-приложения.
19) Дайте вашему приложению имя. Я просто назвал его test. Затем установите флажок рядом с Also set up Firebase Hosting for this App. Нажмите Register app.
20) Затем скопируйте объект firebaseConfig, потому что он вам понадобится позже.
Нажмите Next на последующих шагах.
После этого вы также можете получить доступ к объекту firebaseConfig, если перейдёте в настройки проекта в консоли Firebase.
21) Скопируйте authDomain. В моём случае это (то же самое, что мы получили в окне терминала после настройки проекта Firebase):
https://esp-project-a9add.web.app
Это URL, который позволяет вам получить доступ к вашему веб-приложению.
Создание Firebase веб-приложения
Теперь, когда вы успешно создали приложение проекта Firebase в VS Code, выполните следующие шаги для настройки приложения для отображения значений, сохранённых в Realtime Database.
index.html
Скопируйте следующий код в ваш файл index.html. Этот HTML-файл создаёт простую веб-страницу для отображения показаний, сохранённых в Realtime Database, созданной в предыдущем проекте.
<!-- Complete Project Details
ESP32: https://RandomNerdTutorials.com/esp32-firebase-web-app/
ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-web-app/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP Firebase App</title>
<!-- Load your app.js script -->
<script src="app.js" type="module"></script>
</head>
<body>
<h1>ESP Firebase Web App Example</h1>
<p>Reading int: <span id="reading-int"></span></p>
<p>Reading float: <span id="reading-float"></span></p>
<p>Reading string: <span id="reading-string"></span></p>
</body>
</html>
Давайте быстро рассмотрим HTML-файл.
В <head> HTML-файла мы должны добавить все необходимые метаданные.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP Firebase App</title>
<!-- Load your app.js script (place at the bottom) -->
<script src="app.js" type="module"></script>
</head>
Заголовок веб-страницы — ESP Firebase App, но вы можете изменить его в следующей строке.
<title>ESP Firebase App</title>
Мы позаботимся о взаимодействии с Realtime Database в файле JavaScript с именем app.js (который мы создадим позже). Этот файл также будет содержать функции JavaScript для обновления HTML-страницы значениями из базы данных. Нам нужно загрузить его здесь перед отображением тела HTML-страницы.
<script src="app.js" type="module"></script>
Теперь перейдём к частям HTML, которые видны пользователю — между тегами <body> и </body>.
Мы создаём заголовок со следующим текстом: ESP32 Firebase Web App Example, но вы можете изменить его на что угодно.
<h1>ESP32 Firebase Web App Example</h1>
Затем мы добавляем три абзаца для отображения значений int, float и String, сохранённых в базе данных. Мы создаём теги <span> с определёнными id, чтобы мы могли ссылаться на эти HTML-элементы с помощью JavaScript и вставлять значения из базы данных.
<p>Reading int: <span id="reading-int"></span></p>
<p>Reading float: <span id="reading-float"></span></p>
<p>Reading string: <span id="reading-string"></span></p>
После внесения необходимых изменений вы можете сохранить HTML-файл.
app.js
Внутри папки public создайте файл с именем app.js. Вы можете сделать это в VS Code, выбрав папку public, а затем нажав на значок +file. Этот файл JavaScript отвечает за взаимодействие с Realtime Database и обновление значений на веб-странице при каждом изменении в базе данных.
Скопируйте следующий код в ваш файл app.js и сохраните его.
// Complete Project Details
// ESP32: https://RandomNerdTutorials.com/esp32-firebase-web-app/
// ESP8266: https://RandomNerdTutorials.com/esp8266-nodemcu-firebase-web-app/
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-database.js";
// Firebase configuration
const firebaseConfig = {
apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Get a reference to the database
const database = getDatabase(app);
// Database Paths
const dataFloatPath = 'test/float';
const dataIntPath = 'test/int';
const dataStringPath = 'test/string';
// Get database references
const databaseFloatRef = ref(database, dataFloatPath);
const databaseIntRef = ref(database, dataIntPath);
const databaseStringRef = ref(database, dataStringPath);
// Variables to save database current values
let floatReading;
let intReading;
let stringReading;
// Attach listeners
onValue(databaseFloatRef, (snapshot) => {
floatReading = snapshot.val();
console.log("Float reading: " + floatReading);
document.getElementById("reading-float").innerHTML = floatReading;
});
onValue(databaseIntRef, (snapshot) => {
intReading = snapshot.val();
console.log("Int reading: " + intReading);
document.getElementById("reading-int").innerHTML = intReading;
});
onValue(databaseStringRef, (snapshot) => {
stringReading = snapshot.val();
console.log("String reading: " + stringReading);
document.getElementById("reading-string").innerHTML = stringReading;
});
Давайте быстро рассмотрим, как это работает.
Импорт библиотек Firebase
Следующие строки загружают инструменты Firebase, которые потребуются для этого примера для подключения и чтения из Realtime Database. Мы используем CDN-URL Firebase, поэтому нам не нужно устанавливать Firebase локально.
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js";
import { getDatabase, ref, onValue } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-database.js";
Конфигурация Firebase
Добавьте ваш объект firebaseConfig ниже. Это необходимо для аутентификации и определения местоположения RTDB вашего проекта. Вы получаете эти значения из консоли Firebase при создании проекта и добавлении веб-приложения (как мы делали на предыдущих шагах).
const firebaseConfig = {
apiKey: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
authDomain: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
databaseURL: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
projectId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
storageBucket: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
messagingSenderId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION",
appId: "REPLACE_WITH_YOUR_Firebase_CONFIGURATION"
};
Инициализация Firebase
Следующая строка инициализирует приложение Firebase с использованием объекта конфигурации, определённого ранее. Она возвращает объект app, который вы можете использовать для взаимодействия с приложением.
const app = initializeApp(firebaseConfig);
Ссылка на базу данных, пути базы данных и другие переменные
Следующая команда создаёт ссылку на базу данных, связанную с инициализированным приложением.
const database = getDatabase(app);
Мы определяем пути базы данных, где хранятся данные, которые мы хотим прочитать.
const dataFloatPath = 'test/float';
const dataIntPath = 'test/int';
const dataStringPath = 'test/string';
Затем мы создаём ссылки на определённые места в базе данных, используя эти пути.
const databaseFloatRef = ref(database, dataFloatPath);
const databaseIntRef = ref(database, dataIntPath);
const databaseStringRef = ref(database, dataStringPath);
Мы создаём переменные для хранения текущих значений, прочитанных из базы данных.
let floatReading;
let intReading;
let stringReading;
Получение значений из базы данных (слушатели)
Наконец, для получения значений из базы данных мы можем прикрепить слушателей к каждой из этих ссылок на базу данных. Затем при каждом изменении в базе данных мы будем обновлять HTML-страницу соответствующими значениями.
Давайте посмотрим, как это сделать. Например, мы можем использовать функцию onValue(), которая принимает в качестве аргументов ссылку на базу данных и функцию обратного вызова:
onValue(databaseFloatRef, (snapshot) => {
floatReading = snapshot.val();
console.log("Float reading: " + floatReading);
document.getElementById("reading-float").innerHTML = floatReading;
});
В данном случае функция onValue() прикрепляет слушателя к databaseFloatRef (/test/float). Каждый раз, когда значение по этому пути изменяется в базе данных, запускается функция обратного вызова. В данном случае мы определяем функцию обратного вызова внутри onValue(). Она определена как стрелочная функция.
(snapshot) — это параметр функции обратного вызова. Когда Firebase вызывает обратный вызов, он передаёт объект snapshot, содержащий текущие данные по пути test/float. Затем синтаксис стрелки => указывает, что это стрелочная функция — краткий способ определения функций в JavaScript. Тело функции определяется между {}.
Вернёмся к функции обратного вызова: snapshot.val() получает текущее значение по пути. Значение сохраняется в переменной floatReading.
floatReading = snapshot.val();
Оно записывается в консоль для целей отладки.
console.log("Float reading: " + floatReading);
Элемент веб-страницы с id=»reading-float» (определённый в файле index.html) обновляется для отображения значения.
document.getElementById("reading-float").innerHTML = floatReading;
Мы поступаем аналогичным образом для других путей базы данных.
onValue(databaseIntRef, (snapshot) => {
intReading = snapshot.val();
console.log("Int reading: " + intReading);
document.getElementById("reading-int").innerHTML = intReading;
});
onValue(databaseStringRef, (snapshot) => {
stringReading = snapshot.val();
console.log("String reading: " + stringReading);
document.getElementById("reading-string").innerHTML = stringReading;
});
Развёртывание вашего приложения
После сохранения HTML и JavaScript файлов разверните ваше приложение в VS Code, выполнив следующую команду в окне терминала VS Code.
firebase deploy
Скетч Arduino для ESP32
Загрузите следующий код в ваш ESP32. Это тот же код, который использовался в предыдущем проекте для записи в базу данных. Этот код просто записывает в базу данных каждые 10 секунд.
Не забудьте вставить ваши сетевые учётные данные, URL базы данных, API-ключ проекта Firebase, а также email и пароль пользователя Firebase.
/*********
Rui Santos & Sara Santos - Random Nerd Tutorials
Complete instructions at https://RandomNerdTutorials.com/esp32-firebase-realtime-database/
*********/
#define ENABLE_USER_AUTH
#define ENABLE_DATABASE
#include <Arduino.h>
#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <FirebaseClient.h>
// Network and Firebase credentials
#define WIFI_SSID "REPLACE_WITH_YOUR_SSID"
#define WIFI_PASSWORD "REPLACE_WITH_YOUR_PASSWORD"
#define Web_API_KEY "REPLACE_WITH_YOUR_FIREBASE_PROJECT_API_KEY"
#define DATABASE_URL "REPLACE_WITH_YOUR_FIREBASE_DATABASE_URL"
#define USER_EMAIL "REPLACE_WITH_FIREBASE_PROJECT_EMAIL_USER"
#define USER_PASS "REPLACE_WITH_FIREBASE_PROJECT_USER_PASS"
// User function
void processData(AsyncResult &aResult);
// Authentication
UserAuth user_auth(Web_API_KEY, USER_EMAIL, USER_PASS);
// Firebase components
FirebaseApp app;
WiFiClientSecure ssl_client;
using AsyncClient = AsyncClientClass;
AsyncClient aClient(ssl_client);
RealtimeDatabase Database;
// Timer variables for sending data every 10 seconds
unsigned long lastSendTime = 0;
const unsigned long sendInterval = 10000; // 10 seconds in milliseconds
// Variables to send to the database
int intValue = 0;
float floatValue = 0.01;
String stringValue = "";
void setup(){
Serial.begin(115200);
// Connect to Wi-Fi
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to Wi-Fi");
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(300);
}
Serial.println();
// Configure SSL client
ssl_client.setInsecure();
ssl_client.setConnectionTimeout(1000);
ssl_client.setHandshakeTimeout(5);
// Initialize Firebase
initializeApp(aClient, app, getAuth(user_auth), processData, "authTask");
app.getApp<RealtimeDatabase>(Database);
Database.url(DATABASE_URL);
}
void loop(){
// Maintain authentication and async tasks
app.loop();
// Check if authentication is ready
if (app.ready()){
// Periodic data sending every 10 seconds
unsigned long currentTime = millis();
if (currentTime - lastSendTime >= sendInterval){
// Update the last send time
lastSendTime = currentTime;
// send a string
stringValue = "value_" + String(currentTime);
Database.set<String>(aClient, "/test/string", stringValue, processData, "RTDB_Send_String");
// send an int
Database.set<int>(aClient, "/test/int", intValue, processData, "RTDB_Send_Int");
intValue++; //increment intValue in every loop
// send a string
floatValue = 0.01 + random (0,100);
Database.set<float>(aClient, "/test/float", floatValue, processData, "RTDB_Send_Float");
}
}
}
void processData(AsyncResult &aResult) {
if (!aResult.isResult())
return;
if (aResult.isEvent())
Firebase.printf("Event task: %s, msg: %s, code: %d\n", aResult.uid().c_str(), aResult.eventLog().message().c_str(), aResult.eventLog().code());
if (aResult.isDebug())
Firebase.printf("Debug task: %s, msg: %s\n", aResult.uid().c_str(), aResult.debug().c_str());
if (aResult.isError())
Firebase.printf("Error task: %s, msg: %s, code: %d\n", aResult.uid().c_str(), aResult.error().message().c_str(), aResult.error().code());
if (aResult.available())
Firebase.printf("task: %s, payload: %s\n", aResult.uid().c_str(), aResult.c_str());
}
Демонстрация
ESP32 должен отправлять новые показания каждые 10 секунд в базу данных.
Перейдите по URL вашего приложения. Новые показания будут появляться на веб-странице каждые 10 секунд. Приложение обновляет веб-страницу каждый раз, когда ESP32 записывает новое значение в базу данных.
Если вы не видите эту веб-страницу, вам может потребоваться принудительно обновить ваш веб-браузер (CTRL+F5 или Cmd+R).
В консоли Firebase вы можете перейти на страницу вашего проекта и проверить, что новые значения записываются в базу данных каждые 10 секунд.
Поздравляем! Вы создали Firebase веб-приложение для взаимодействия с ESP32.
Заключение
В этом уроке вы узнали, как создать Firebase веб-приложение для взаимодействия с ESP32. Вы научились использовать сервисы Firebase Hosting и Realtime Database.
Мы создали простой пример, чтобы помочь вам начать работу с Firebase. Он просто отображает некоторые случайные числа на веб-странице. Идея состоит в том, чтобы заменить эти числа показаниями датчиков или состояниями GPIO. Кроме того, вы можете добавить кнопки или ползунки на веб-страницу для управления GPIO ESP32. Возможности безграничны.
Этот пример демонстрирует потенциал Firebase веб-приложений для ESP32, несмотря на некоторые ограничения. В настоящее время база данных находится в тестовом режиме без правил, что позволяет любому читать и записывать данные, а также не имеет аутентификации. Тем не менее, мы надеемся, что этот урок будет вам полезен. Чтобы узнать больше, вы также можете ознакомиться с документацией Firebase.
Если вы хотите узнать больше о Firebase с платами ESP32 и ESP8266, ознакомьтесь с электронной книгой:
Узнайте больше о ESP32 с нашими ресурсами:
Спасибо за чтение.
Источник: Random Nerd Tutorials — ESP32 with Firebase – Creating a Web App