Все статьиПрограммирование

Урок: управление умным домом на ESP32 из браузера

БА
Бексултан Айтен
CTO, Alashed
24 июля 2025 г.
9 мин чтения
Урок: управление умным домом на ESP32 из браузера

План урока по созданию системы умного дома на ESP32 с управлением через веб-интерфейс в CodeStudio: IoT для старших классов.

Умный дом как учебный проект

Умный дом — это тема, которая мгновенно захватывает внимание учеников. Каждый из них видел умные колонки, автоматическое освещение, термостаты. Но мало кто из школьников понимает, как это работает изнутри. Этот урок даёт возможность построить миниатюрную систему умного дома своими руками.

Проект идеально подходит для 9-11 классов и объединяет несколько важных тем: программирование, сетевые технологии, работа с датчиками и веб-разработка.

Длительность: 2-3 урока по 40 минут.

Необходимое оборудование:

  • ESP32 DevKit
  • Датчик температуры и влажности DHT22
  • Светодиод + резистор 220 Ом
  • Реле-модуль (опционально)
  • Макетная плата и провода
  • USB-кабель

Почему ESP32, а не Arduino

ESP32 — это следующий шаг после Arduino. Главное отличие — встроенный WiFi и Bluetooth. Это позволяет создавать устройства, которые подключаются к сети и управляются удалённо. Именно эта возможность делает ESP32 идеальной платформой для IoT-проектов.

В CodeStudio ESP32 подключается и программируется так же просто, как Arduino — через браузер, одной кнопкой. Никаких дополнительных настроек.

Урок 1: Подключение датчиков и сбор данных

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

Подключите DHT22 к ESP32:

  • Пин данных → GPIO 4
  • Питание → 3.3V
  • Земля → GND

Подключите светодиод:

  • Анод → GPIO 2 через резистор
  • Катод → GND

Программа для чтения данных

В CodeStudio создайте проект ESP32 и напишите программу, которая каждые 2 секунды считывает температуру и влажность и выводит их в монитор порта. Ученики видят данные прямо в браузере, в окне CodeStudio.

Обсудите с учениками вопросы:

  • Почему показания могут слегка различаться при каждом измерении?
  • Что такое точность датчика и почему она важна?
  • Как часто нужно измерять температуру в реальной системе умного дома?
Метеостанция на ESP32
Метеостанция на ESP32

Урок 2: Веб-интерфейс для управления

Создание веб-сервера на ESP32

Самая впечатляющая часть проекта — когда ESP32 становится веб-сервером. Ученик открывает на телефоне или другом компьютере IP-адрес ESP32 и видит веб-страницу с показаниями датчиков и кнопками управления.

CodeStudio предоставляет шаблон веб-сервера, который ученики модифицируют:

Функции веб-интерфейса:

  • Отображение текущей температуры и влажности
  • Кнопка включения/выключения светодиода (имитация освещения)
  • Индикатор состояния системы
  • Автоматическое обновление данных каждые 5 секунд

Ключевые концепции

На этом этапе ученики знакомятся с важными понятиями:

  • IP-адрес — уникальный адрес устройства в сети
  • HTTP-запрос — как браузер общается с сервером
  • HTML — язык разметки веб-страниц
  • Клиент-серверная архитектура — основа интернета

Момент «вау»

Когда ученик нажимает кнопку на экране своего смартфона, и светодиод на его столе включается — это момент, который запоминается надолго. Ученик физически ощущает связь между виртуальным и реальным мирами.

Реальные устройства для IoT-проектов
Реальные устройства для IoT-проектов

Урок 3: Автоматизация и логика

Правила умного дома

Настоящий умный дом не просто показывает данные — он принимает решения. Предложите ученикам реализовать правила автоматизации:

  • Если температура выше 28°C → включить «вентилятор» (светодиод мигает быстро)
  • Если температура ниже 18°C → включить «обогрев» (светодиод горит постоянно)
  • Если влажность выше 80% → отправить предупреждение на веб-страницу

Расширенные задания

Для продвинутых учеников:

  • Добавить датчик движения — автоматическое включение света
  • Реализовать расписание — включение освещения по времени
  • Добавить звуковой сигнал (зуммер) при превышении порогов
  • Создать журнал событий — запись всех действий системы

Методические рекомендации

Организация работы в классе

  • Работа в парах — один ученик отвечает за аппаратную часть, второй — за программную
  • Постепенное усложнение — начните с чтения датчиков, затем добавьте веб-интерфейс, затем автоматизацию
  • Обсуждение — после каждого этапа потратьте 3-5 минут на обсуждение результатов

Связь с реальной жизнью

Расскажите ученикам о реальных примерах умных домов в Казахстане:

  • Системы «умный дом» в новостройках Астаны и Алматы
  • Датчики качества воздуха в городских парках
  • Автоматические системы полива в сельском хозяйстве
  • Промышленный IoT на казахстанских предприятиях

Покажите, что навыки, полученные на уроке, напрямую применимы в реальных профессиях: инженер IoT, разработчик встраиваемых систем, специалист по автоматизации.

AI-репетитор помогает ученику
AI-репетитор помогает ученику

Оценивание проекта

Рекомендуемые критерии для проектной работы «Умный дом»:

КритерийБаллыОписание
Сборка схемы20Все компоненты подключены правильно
Чтение датчиков20Данные считываются и отображаются
Веб-интерфейс25Страница загружается, данные обновляются
Автоматизация20Реализовано хотя бы одно правило
Презентация15Ученик объясняет работу системы

Что выносят ученики из этого проекта

По завершении проекта «Умный дом» ученик:

  • Понимает архитектуру IoT-системы — датчик → микроконтроллер → сеть → интерфейс
  • Умеет работать с реальным оборудованием — подключение, отладка, тестирование
  • Имеет опыт веб-разработки — HTML, CSS, базовый JavaScript
  • Понимает основы сетевых технологий — IP, HTTP, клиент-сервер
  • Может представить и защитить свой проект

Этот проект — один из самых впечатляющих в школьной программе, и CodeStudio делает его доступным для любого учителя, даже без глубоких технических знаний.

Попробуйте Alashed бесплатно

Подключите школу к пилоту. Генерируйте КМЖ за 2 минуты, ведите CodeStudio уроки, заказывайте оборудование — всё в одном месте.

Попробовать бесплатноДемо