Arduino & IoT Academy · Урок

Размещение веб-страницы обновления

Загружайте прошивку через форму в браузере.

Урок 3 из 413 шагов

«Размещение веб-страницы обновления» — бесплатный урок Arduino & IoT Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Arduino & IoT Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Arduino & IoT Academy содержит 4 уроков всего.

Обновление из браузера

Иногда требуется прошить устройство вообще без Arduino IDE. Веб-страница обновления позволяет загрузить прошивку из браузера.

Плата становится сервером

ESP32 запускает небольшой веб-сервер, который отображает форму загрузки, поэтому телефон или ноутбук может отправить ему новый двоичный файл.

Подключение библиотек

Вы объединяете веб-сервер с библиотекой Update, которая умеет записывать входящие байты во флеш-память.

#include <WebServer.h>
#include <Update.h>
WebServer server(80);

Создание формы загрузки

Корневая страница возвращает простую HTML-форму с выбором файла и кнопкой отправки файла прошивки.

server.on("/", []() {
  server.send(200, "text/html",
    "<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' name='fw'><input type='submit'></form>");
});

Откуда взялся файл .bin?

В IDE команда Sketch, затем Export Compiled Binary создаёт файл .bin, который Вы выберете в этой форме загрузки.

Открытие потока обновления

Когда начинается загрузка, нужно сообщить микросхеме размер образа, чтобы Update.begin() мог зарезервировать для него место во флеш-памяти.

Update.begin(UPDATE_SIZE_UNKNOWN);

Запись входящих фрагментов

Прошивка поступает частями. Передавайте каждый фрагмент в Update.write() по мере получения, собирая новый образ во флеш-памяти.

Update.write(upload.buf, upload.currentSize);

Завершение и проверка

Когда поступает последний байт, Update.end(true) проверяет полноту и корректность образа, прежде чем пометить его готовым к запуску.

if (Update.end(true)) Serial.println("Update OK");

Перезагрузка с новым кодом

Для успешного обновления требуется перезапуск. Вызовите ESP.restart(), чтобы плата загрузилась с только что отправленной прошивкой. 🔄

ESP.restart();

Защитите страницу

Любой, кто получит доступ к этой странице, сможет перепрошить устройство, поэтому перед приёмом загрузки добавьте проверку учётных данных или токена.

Поддерживайте работу сервера

Как и OTA, веб-сервер требует обработки запросов. Вызывайте server.handleClient() в loop, чтобы он мог принять запрос на загрузку.

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

Быстрая проверка

Подумайте, какая библиотека фактически записывает прошивку во флеш-память.

Ответь в интерактивном уроке

Итоги

Запустите веб-сервер с формой загрузки, передайте файл .bin библиотеке Update, проверьте его и перезапустите устройство, защитив всё это входом в систему. 🌐

Можно начать бесплатно

Изучай C++ с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 30
Уроки: 120

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Размещение веб-страницы обновления» бесплатный?

Да — полный текст урока «Размещение веб-страницы обновления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Arduino & IoT Academy, подпишись на CoddyKit PRO. Курс Arduino & IoT Academy содержит 4 уроков всего.

Чему я научусь в уроке «Размещение веб-страницы обновления»?

Загружайте прошивку через форму в браузере. Ты практикуешь Arduino & IoT Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Arduino & IoT Academy?

Предыдущий опыт не требуется. Arduino & IoT Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Размещение веб-страницы обновления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Arduino & IoT Academy?

Да. Каждый урок Arduino & IoT Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Arduino & IoT Academy