Веб-сервер на ESP32: керуємо світлодіодами та реле з телефона

Що ми зробимо

ESP32 підключиться до вашої Wi-Fi мережі та запустить маленький веб-сервер. Відкриваєте IP-адресу плати в браузері телефона чи ноутбука — і бачите дві кнопки, які перемикають GPIO 26 та GPIO 27. Замість світлодіодів можна підключити модуль реле й керувати лампою, вентилятором чи насосом.

Що знадобиться

Компонент	К-сть
Плата ESP32 DevKit (будь-яка з ESP32-WROOM)	1
Світлодіоди 5 мм	2
Резистори 220–330 Ом	2
Макетна плата та дроти	—
Опційно: модуль реле 1–2 канали, 3.3 В-сумісний	1

Схема підключення

GPIO 26 → резистор 330 Ом → анод (довга ніжка) світлодіода 1 → катод до GND
GPIO 27 → резистор 330 Ом → анод світлодіода 2 → катод до GND
Для реле: IN1 → GPIO 26, VCC → 5V (VIN), GND → GND.

⚠️ Якщо реле комутує 230 В — працюйте тільки зі знеструмленою схемою та в закритому корпусі. Для перших експериментів використовуйте світлодіоди.

Підготовка Arduino IDE

Встановіть Arduino IDE 2.
Boards Manager → знайдіть esp32 by Espressif Systems → Install (версія 3.x).
Оберіть плату ESP32 Dev Module та порт, до якого вона підключена.

Код

Вставте свої WIFI_SSID та WIFI_PASS:

#include <WiFi.h>
#include <WebServer.h>

const char* WIFI_SSID = "YOUR_SSID";
const char* WIFI_PASS = "YOUR_PASSWORD";

const int PINS[] = {26, 27};
bool state[] = {false, false};

WebServer server(80);

String page() {
  String html = F("<!doctype html><html><head><meta charset='utf-8'>"
                  "<meta name='viewport' content='width=device-width,initial-scale=1'>"
                  "<style>body{font-family:sans-serif;text-align:center;margin-top:40px}"
                  "a{display:inline-block;width:140px;padding:14px;margin:8px;border-radius:8px;"
                  "color:#fff;text-decoration:none;font-size:18px}"
                  ".on{background:#1d7a46}.off{background:#666}</style></head>"
                  "<body><h1>ESP32 Web Server</h1>");
  for (int i = 0; i < 2; i++) {
    html += "<p>GPIO " + String(PINS[i]) + "</p>";
    html += "<a class='" + String(state[i] ? "on" : "off") + "' href='/toggle?pin=" + String(i) + "'>";
    html += state[i] ? "ON" : "OFF";
    html += "</a>";
  }
  html += "</body></html>";
  return html;
}

void handleToggle() {
  int i = server.arg("pin").toInt();
  if (i >= 0 && i < 2) {
    state[i] = !state[i];
    digitalWrite(PINS[i], state[i] ? HIGH : LOW);
  }
  server.sendHeader("Location", "/");
  server.send(303);
}

void setup() {
  Serial.begin(115200);
  for (int p : PINS) {
    pinMode(p, OUTPUT);
    digitalWrite(p, LOW);
  }

  WiFi.begin(WIFI_SSID, WIFI_PASS);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print('.');
  }
  Serial.printf("\nIP address: %s\n", WiFi.localIP().toString().c_str());

  server.on("/", [] { server.send(200, "text/html", page()); });
  server.on("/toggle", handleToggle);
  server.begin();
}

void loop() {
  server.handleClient();
}

Як це працює

WiFi.begin() підключає плату до роутера, а в Serial Monitor (115200 бод) з'являється її IP-адреса.
WebServer слухає порт 80. На запит / функція page() генерує HTML з актуальним станом виходів.
Кнопка — це посилання /toggle?pin=0. Обробник інвертує стан піна й перенаправляє браузер назад на головну (303 See Other), тому сторінка завжди показує свіжий стан.

Перевірка

Завантажте скетч, відкрийте Serial Monitor і натисніть EN/RST на платі.
Скопіюйте IP (наприклад, 192.168.1.57) і відкрийте його в браузері з пристрою в тій самій мережі.
Натискайте кнопки — світлодіоди мають вмикатися й вимикатися.

Що далі

Зарезервуйте IP за платою в налаштуваннях роутера (DHCP reservation), щоб адреса не змінювалась.
Додайте mDNS (ESPmDNS.h) і відкривайте плату за адресою http://esp32.local.
Сервер не має пароля — не прокидайте порт в інтернет. Для віддаленого доступу краще використати MQTT або Home Assistant.