Управление ESP32 с телефона: BlueGrays IoT за 5 шагов

Управление ESP32 с телефона означает, что реле, светодиод или мотор на плате можно включать и выключать со смартфона в кармане, а показания датчиков видеть прямо на экране. Это самый увлекательный первый шаг в IoT. В ESP32 уже встроены Wi-Fi 2,4 GHz и Bluetooth, поэтому дополнительный модуль не нужен. Главный вопрос в том, какой путь выбрать. Для управления ESP32 через приложение можно написать свой веб-сервер, подключиться по Bluetooth или завести Telegram-бота. Есть и облачные панели вроде Blynk и Arduino IoT Cloud. У каждого способа своё время настройки, дальность и ограничения.

В этом руководстве шаг за шагом настроим самый короткий путь: функцию BlueGrays IoT в приложении BlueGrays. Код для тебя готовит Ohmi. Остаётся собрать схему и загрузить код в ESP32 из Arduino IDE. Плата подключается к серверу BlueGrays по зашифрованному соединению, поэтому телефону и плате не нужно быть в одной сети. Лампу дома можно включить с работы даже через мобильный интернет. Сначала сделаем выключатель лампы на реле. Потом добавим в схему DHT22 и выведем температуру и влажность на телефон в виде живых значений и графиков. В конце статьи есть сравнение с другими способами и таблица решений самых частых ошибок.

5 способов управлять ESP32 с телефона

• Локальный веб-сервер: ESP32 отдаёт веб-страницу, а ты открываешь IP-адрес платы в браузере телефона. Аккаунт не нужен, но обычно доступ есть только из той же сети Wi-Fi. Подробности в статье ESP32 Async Web Server.
• Bluetooth Classic и BLE: интернет и роутер не нужны, телефон подключается к плате напрямую. Дальность в помещении обычно около 10 метров. Оба вида разобраны в руководстве ESP32 и Bluetooth.
• Telegram-бот: отправляешь плате команды сообщениями и получаешь от неё уведомления. Работает и вне дома, но панели с графиками или ползунками нет. Настройка описана в статье Telegram-бот на ESP32.
• Облачные панели (Blynk, Arduino IoT Cloud): в веб-консоли задаёшь шаблон и переменные, код пишешь вручную, панель на телефоне тоже проектируешь сам процесс за процессом. Путь гибкий, но придётся освоить несколько экранов и понятий. Для Blynk есть готовое руководство Blynk для ESP32.
• BlueGrays IoT: в приложении выбираешь один из 8 готовых шаблонов. Ohmi готовит код с твоими настройками пинов и ключом устройства. Переключатели, ползунки, выбор цвета и графики появляются на телефоне автоматически в зависимости от шаблона. Проектировать панель или поднимать сервер не нужно.

Что понадобится: компоненты и программы

Как работает управление ESP32 через приложение

В BlueGrays IoT телефон и ESP32 не соединяются напрямую. После включения плата сначала подключается к домашней сети Wi-Fi 2,4 GHz. Затем она открывает зашифрованное соединение WebSocket (TLS) с сервером BlueGrays через порт 443 и держит его постоянно открытым. Приложение на телефоне подключается к тому же серверу. Когда ты нажимаешь выключатель лампы, команда идёт с телефона на сервер, а с сервера на плату. Соединение уже открыто, поэтому команда доходит без задержки. Значение температуры от платы проходит тот же путь в обратную сторону. Порт 443 используют и обычные сайты. Поэтому не нужны ни проброс портов на роутере, ни свой сервер, ни знание IP-адреса платы.

Плату для сервера опознаёт ключ устройства. Это секретная строка, начинающаяся с bgd_, которую приложение создаёт вместе с устройством. Открывая соединение, плата передаёт ключ в заголовке, и сервер пересылает команду с телефона нужной плате. В монитор порта ключ не выводится. Если связь пропадает, библиотека BlueGraysIoT сама пробует переподключиться с растущими интервалами. Значения, измеренные офлайн, она отправляет после подключения, а после отключения электричества восстанавливает последнее состояние переключателей. Достаточно, чтобы у платы и телефона был интернет: плата может быть в домашнем Wi-Fi, а телефон в другом городе на мобильном интернете.

Схема: подключение модуля реле к ESP32

В шаблонах выключателя лампы и комнатной станции пины по умолчанию такие: вход IN реле идёт на GPIO26, вывод данных DHT22 на GPIO4. Эти пины можно поменять на 3-м шаге настройки. Расположение выводов своей платы проверь в утилите распиновки. На одних платах у пина 5 V написано VIN, на других 5V.

Настройка BlueGrays IoT: 5 шагов в приложении

В приложении открой Мастерская › Мои устройства › Добавить устройство. Вверху экрана появится счётчик вроде «Шаг 1 из 5». Первые три шага проходят на телефоне, четвёртый на компьютере, пятый снова на телефоне.

1. Плата и шаблон: на вопрос «Какая у тебя плата?» выбери ESP32, на вопрос «Что она будет делать?» отметь один из 8 шаблонов. Для первой попытки хорошо подойдут «Лампа с реле» или «Комнатная станция» с датчиком. Дай устройству понятное имя, например «Лампа в гостиной».
2. Детали и схема: список «Подготовь детали» показывает нужные шаблону компоненты. Схема «Подключи провода» рисует, какой вывод на какой пин идёт. В шаблонах с реле появится предупреждение «Если будешь работать с 220 V, делай это с тем, кто в этом разбирается. Сначала попробуй со светодиодом».
3. Wi-Fi и код: введи имя сети Wi-Fi и пароль. Имя сети должно совпадать точно и относиться к диапазону 2,4 GHz. При желании в разделе «Пины подключения» замени GPIO26 и GPIO4 на другие. Затем нажми «Создать устройство и подготовить код». Ohmi подготовит код с твоим ключом устройства; перенеси его на компьютер кнопкой «Копировать код» или «Поделиться».
4. Загрузка в Arduino IDE: загружаешь код в ESP32. Подшаги из приложения подробно разобраны в следующем разделе.
5. Подключение: экран «Ждём твою плату» сам переходит дальше, как только плата подключится к серверу.

Шаги 4 и 5: загрузка кода и проверка подключения

1. Если Arduino IDE не установлена, установи её. Шаги описаны в статье Установка Arduino IDE.
2. В «Менеджере плат» (Boards Manager) найди «esp32» и установи пакет esp32 от Espressif. Нужна версия 3.x; если стоит старая 2.x, обнови её. Установка пакета есть и в статье Что такое ESP32?
3. Подключи плату кабелем с передачей данных. В меню «Инструменты › Плата» (Tools › Board) выбери ESP32 Dev Module (или модель своей платы), в «Инструменты › Порт» (Tools › Port) выбери появившийся порт. Если порта нет, замени кабель. Затем установи драйвер CP210x или CH340 в зависимости от USB-микросхемы на плате.
4. В «Менеджере библиотек» (Library Manager) найди BlueGraysIoT и нажми «Установить» (Install). На вопрос о зависимостях выбери «Установить все» (Install all): так установятся и WebSockets, ArduinoJson и DHT sensor library. Если не получается, загляни в руководство Как добавить библиотеку в Arduino.
5. Открой новый скетч, удали содержимое, вставь скопированный из приложения код и нажми «Загрузка» (Upload). Если в нижнем окне всё зависло на «Connecting…», зажми кнопку BOOT на плате. Отпусти её, когда появятся проценты записи.
6. Открой «Монитор порта» (Serial Monitor) и выставь скорость 115200. Сначала должна появиться строка «Wi-Fi connected», а через несколько секунд «BlueGrays IoT: connected».

Как только в мониторе порта появится сообщение о подключении, экран «Ждём твою плату» на телефоне сменится на «Подключено: значения теперь приходят в реальном времени». Теперь нажми выключатель лампы: должен раздаться щелчок реле или загореться светодиод. Если плата не подключится за 2 минуты, приложение попросит проверить три вещи. Выбрана сеть 2,4 GHz? В мониторе порта есть «Wi-Fi connected»? Регистр букв в пароле верный? Если даже первая строка не появляется, проблема на стороне Wi-Fi. Тогда поможет чек-лист из статьи ESP32 не подключается к Wi-Fi.

Первый код: включаем и выключаем лампу с телефона

Код, который приложение готовит для шаблона «Лампа с реле», похож на приведённый ниже. Первые три строки приходят уже заполненными твоим ключом устройства, именем сети и паролем; здесь они показаны заглушками. Остальной код короткий: функция реле, описание переключателя и loop() в одну строку.

1/*
2 * Salon lambası · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9
10// Uygulama bu üç satırı senin bilgilerinle doldurur / The app fills these three lines with your details
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20
21void setup() {
22  Serial.begin(115200);
23  pinMode(RELAY_PIN, OUTPUT);
24  setRelay(false);                  // açılışta lamba kapalı / lamp off at power-up
25  bg.onSwitch("lamba", setRelay);   // uygulamadaki "Lamba" anahtarı / the "Lamba" switch in the app
26  bg.setDebug(Serial);              // durum mesajları Seri Port Ekranı'na / status messages to the Serial Monitor
27  bg.setLanguage(BG_LANG_TR);
28  bg.begin(WIFI_NAME, WIFI_PASSWORD);
29}
30
31void loop() {
32  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
33}
34

Добавляем датчик: комнатная станция (реле + DHT22)

Теперь добавим к той же плате DHT22 и будем отправлять данные на телефон. Если выбрать в приложении шаблон «Комнатная станция», рядом с выключателем лампы появятся температура (°C) и влажность (%) с графиками. DHT22 измеряет температуру от -40 до 80 °C с точностью около ±0,5 °C, влажность в диапазоне 0–100%, и опрашивать его можно не чаще раза в 2 секунды. Подключи вывод данных к GPIO4, VCC к 3V3, GND к GND. Как устроено семейство DHT, сравнительно разобрано в статье Датчик температуры и влажности DHT11.

1/*
2 * Oda istasyonu · BlueGrays IoT
3 * BlueGrays · bluegrays.com
4 * Bu kodu paylaşma: içinde cihaz anahtarın ve Wi-Fi şifren var.
5 * Do not share this code: it contains your device key and Wi-Fi password.
6 */
7
8#include <BlueGraysIoT.h>
9#include <DHT.h>
10
11const char *DEVICE_KEY = "bgd_UYGULAMADAKI_ANAHTARIN";
12const char *WIFI_NAME = "EV_AGI_2_4_GHZ";
13const char *WIFI_PASSWORD = "WIFI_SIFREN";
14
15BlueGraysIoT bg(DEVICE_KEY);
16
17const int RELAY_PIN = 26;
18const bool RELAY_ACTIVE_LOW = true;  // çoğu röle modülü LOW ile çeker / most relay modules switch on LOW
19void setRelay(bool on) { digitalWrite(RELAY_PIN, (on != RELAY_ACTIVE_LOW) ? HIGH : LOW); }
20DHT dht(4, DHT22);                   // DHT22 veri ucu GPIO4 / DHT22 data on GPIO4
21unsigned long lastReadMs = 0;
22
23void setup() {
24  Serial.begin(115200);
25  pinMode(RELAY_PIN, OUTPUT);
26  setRelay(false);
27  bg.onSwitch("lamba", setRelay);
28  dht.begin();
29  bg.setDeadband("sicaklik", 0.1);   // 0,1 °C değişmeden gönderme / send only after a 0.1 °C change
30  bg.setDeadband("nem", 1.0);        // %1 değişmeden gönderme / send only after a 1 % change
31  bg.setDebug(Serial);
32  bg.setLanguage(BG_LANG_TR);
33  bg.begin(WIFI_NAME, WIFI_PASSWORD);
34}
35
36void loop() {
37  bg.loop();  // burada uzun delay() kullanma / avoid long delay() calls here
38  if (millis() - lastReadMs >= 2000) {  // DHT22 en fazla 2 saniyede bir okunur / DHT22 reads at most every 2 s
39    lastReadMs = millis();
40    bg.send("sicaklik", dht.readTemperature());
41    bg.send("nem", dht.readHumidity());
42  }
43}
44

Часть с реле такая же, как в первом коде; нового три вещи. Первая — строка bg.send("sicaklik", dht.readTemperature()): она отправляет значение с платы в приложение, а первый параметр — имя переменной в приложении. Вторая — строка bg.setDeadband("sicaklik", 0.1). Она задаёт минимальное изменение: пока температура не изменится на 0,1 °C, повторно она не отправится, для влажности порог 1%. Третья — проверка millis() - lastReadMs >= 2000 внутри loop. Датчик опрашивается раз в 2 секунды, а bg.loop() между опросами продолжает крутиться без ожидания. Библиотека отправляет значение только при изменении и не превышает скорость плана. Между двумя отправками одной переменной проходит не меньше 1 секунды на бесплатном плане и не меньше 0,2 секунды в Premium. Эти лимиты проверяются на сервере; изменение чисел в коде их не обойдёт. Если температура в комнате минутами держится на 23,4 °C, плата ничего нового не шлёт, а при 23,5 °C уйдёт одно сообщение. Если провод болтается или нет подтяжки, показание будет недействительным (NaN). Если значения не приходят, сначала проверь подключение GPIO4 и питание.

Что видно на телефоне

• Состояние: вверху экрана устройства написано «Онлайн» или «Офлайн», ниже — «Последние данные … назад». Здесь первым делом видно, действительно ли плата подключена.
• Управление: в шаблоне лампы появляется переключатель вкл/выкл. В шаблоне RGB-ленты — выбор цвета, яркость 0–100% и выбор эффекта. В шаблоне штор — ползунок угла 0–180°.
• Живые значения и графики: есть интервалы 1 ч, 24 ч, 7 дн. и 30 дн. В видах на 7 и 30 дней показывается среднее за час. На графике указаны минимум, максимум и последнее значение. Пока плата на связи, каждую минуту добавляется новая точка.
• Код и ключ: здесь же позже можно посмотреть весь код, ключ устройства и данные Wi-Fi. Если плату нужно перепрограммировать, скопируй код отсюда.
• Обновить ключ: используй, если кто-то увидел ключ или плата заменена. Старый ключ сразу перестаёт действовать, достаточно один раз загрузить в плату новый код.
• Удалить устройство: устройство и история графиков удаляются, место для устройства освобождается.

Бесплатно и Premium: сколько можно использовать

Первое устройство бесплатно. Для выключателя лампы или комнатной станции на одной ESP32 больше ничего не нужно. В комнатной станции температура и влажность — две отдельные переменные. На бесплатном плане живые значения обеих приходят на телефон, но история графика хранится только для одной переменной. Различия между планами ниже; подробности в статье Что открывает BlueGrays Premium?

Сравнение с другими способами

Правильный выбор зависит от задачи. Если интернета нет совсем, остаются только Bluetooth или локальный веб-сервер. BlueGrays IoT, Blynk и Arduino IoT Cloud требуют, чтобы у платы и телефона был интернет. Если нужна гибкость, например интерфейс с нуля или связка с Home Assistant, больше возможностей дают ESP32 и MQTT и облачные панели. Готовых шаблонов в BlueGrays IoT 8. Зато схема, список деталей, код и интерфейс на телефоне приходят готовыми и согласованными между собой. Во время учёбы шансов ошибиться где-то по пути меньше.

Безопасность: ключ, пароль Wi-Fi и код

• Ключ устройства — это удостоверение платы. Тот, кто знает ключ с bgd_, может выдать себя за твою плату. Поэтому не показывай ключ на скриншотах, в форуме или в чатах.
• Пароль Wi-Fi остаётся на телефоне. На сервер он не отправляется; имя сети хранится вместе с устройством, чтобы позже снова показать код. Но в коде, загруженном в плату, пароль записан.
• Не делись кодом. Как предупреждает и приложение, в коде есть ключ устройства и пароль Wi-Fi. Если показываешь код на форуме, чтобы попросить помощи, сначала удали строки DEVICE_KEY, WIFI_NAME и WIFI_PASSWORD.
• Соединение зашифровано. Трафик между платой и сервером идёт по TLS через порт 443, и кто-то в той же сети не прочитает команды.
• При подозрении обнови ключ. Кнопка «Обновить ключ» сразу делает старый ключ недействительным. Если отдаёшь плату другому человеку, тоже обнови ключ или удали устройство.

Частые ошибки и их решение

Идеи IoT-проектов на ESP32

• Выключатель лампы: полная версия первой схемы из этой статьи — проект IoT-выключатель лампы на ESP32 (реле). Проект идёт со схемой и списком деталей.
• Комнатная станция: реле и DHT22 вместе, с графиком температуры: IoT-комнатная станция на ESP32 (реле + DHT22).
• Полив растений: датчик влажности почвы подключается к GPIO34 (пин ADC1). Когда влажность опускается ниже ползунка «Порог полива» на телефоне, насос включается, а когда поднимается на 10 пунктов выше порога, выключается. Страница проекта: IoT-полив растений на ESP32 (датчик влажности + насос). Про калибровку датчика смотри статью Датчик влажности почвы.
• RGB-лента: выбирай с телефона цвет, яркость и эффект (Статичный, Радуга, Дыхание, Мигание) ленты WS2812B на 30 светодиодов на GPIO13: IoT RGB-лента на ESP32 (WS2812B). 30 светодиодов на полном белом могут потреблять около 1,8 A; питай ленту от отдельного источника 5 V. Подробности в статье WS2812B NeoPixel.
• Открыватель штор: поворачивай сервопривод SG90 на GPIO18 ползунком 0–180°: IoT-открыватель штор на ESP32 (сервопривод SG90). Сервопривод тоже питай от отдельного источника 5 V и объедини земли.
• Другие шаблоны: проекты датчик двери, счётчик движения и температура и влажность описаны для Pico W. В приложении эти шаблоны можно выбрать и для ESP32.

Когда путь между платой, сервером и телефоном настроен один раз, новое устройство добавляется за пару минут. Начни с выключателя лампы, потом посмотри, как данные с DHT22 текут на телефон, а затем переходи к проектам побольше вроде полива или штор. В приложении BlueGrays эти IoT-проекты на ESP32 есть пошагово, со схемой и кодом. Можно воспользоваться фильтром IoT-проектов в «Обзоре», а карточкой «Настроить как IoT-устройство» на странице проекта подключить ту же схему прямо к телефону.