Мне нужен простой девайс с веб-страницей, заходя на которую, я смогу будить спящие компьютеры при помощи Wake-on-LAN магического пакета.

Готовые варианты для этой задачи уже есть, но все они имеют недостатки, которые были исправлены в моей версии этого приложения.

О том, как я писал прошивку и веб-страницу через ChatGPT, поведаю далее в статье.

▍ Постановка задачи

Я вижу законченное устройство в коробочке либо в виде USB-флешки.

Обязательно должна быть нормальная система настройки Wi-Fi соединения с лёгкой установкой и сбросом настроек.

После захода на веб-страницу должен быть список девайсов, легко редактируемый там же на странице (может, асинхронно), отображающий информацию о девайсах и, собственно, имеющий кнопку отправки пакета.

▍ Что там с готовыми решениями?

Конечно же, не я один придумал поместить такой функционал на маленький и дешёвый контроллер, таких решений сразу несколько, но у них есть минусы.

1 — github.com/ToMe25/ESP-WakeOnLan

Дизайн не очень, нельзя подписать нормальные названия для девайсов, на смартфоне UI работает только в десктопном режиме.


2 — github.com/coppermilk/esp32_wol_telegrambot

Не веб-морда, а целый бот для «Телеграма». Наверное, лучшее решение, если есть интернет, а интернета может не быть, и девайс превращается в тыкву.

3 — noisycarlos.com/project/how-to-turn-your-computer-on-and-off-remotely

Простой проект, но он не поддерживает работу с несколькими ПК.

4 — giltesa.com/2018/12/30/wake-on-lan-wan-con-ayuda-de-un-esp8266

Красиво и работает, но нет удобного добавления данных.

▍ Пишем генерируем проект

За основу я взял ESP8266. Планировал ESP32, но ждать не хотелось, да и мощностей 8266 будет предостаточно для такой простой задачи.

В качестве платы была взята WeMos D1 Mini, но китайская ревизия с Type-C портом, стоимость такой платы составляет 2 $ на данный момент.


Для написания базы я использовал простой промт, который описывает прошивку с веб-страницей и отправкой запросов.


Первая итерация проекта выглядела печально. Хотя была взята сеть 4o, а код выглядел вполне живо, он банально был неактуален. За основу была взята библиотека github.com/a7md0/WakeOnLan, и ChatGPT успешно подключил её, а впоследствии придумал несуществующую в библиотеке функцию, отчего проект просто не компилировался.

То, что придумал ChatGPT:

// Function to send Wake-on-LAN packet void 
WOL.sendWOL(mac); 

То, что используется в библиотеке:

 WOL.sendSecureMagicPacket(MACAddress, secureOn);

И даже если направлять ChatGPT руками на правильные функции и слать пример, то периодически он придумывал невнятные конструкции, которые, естественно, не работали.

Кроме того, он иногда забывал объявлять переменные и инициализировать библиотеки.



Когда ошибки были исправлены, я наконец увидел веб-страницу, и она была некрасива и не работала. Кнопки вроде как отрабатывали добавление компьютера, но их список всегда был пуст.


Изначально хранить данные ChatGPT решил в SPIFFS, но код банально не читал данные с него. Я попросил GPT переписать систему на хранение JSON, а также загрузку его в вебе через API запрос, и это мгновенно решило проблему списка компьютеров.


Но рано радоваться: компьютеры так и не просыпались, так как функция была рабочая, но ChatGPT придумал какую-то мешанину с MAC-адресом, которая не работала.

После эксперимента стало понятно, что можно просто отправить MAC-адрес в функцию в виде стринга, и все заработает. Попросил заменить код на мой, GPT исправил весь код страницы, и это чудо ожило!

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



Пользоваться такой страницей, правда, неудобно, и я попросил прикрутить туда Bootstrap. ChatGPT справился, и, хотя интерфейс выглядел немного кривенько, в целом это уже работало.

С Bootstrap внезапно изменилась реализация асинхронной работы, теперь тут не AJAX, а jQuery, и эту замену сам ChatGPT никак не комментировал.





Дабы понимать, что происходит, я попросил добавить всплывающие подсказки о действиях, и ChatGPT добавил алерты в начале страницы.



Для удобства я попросил добавить кнопку удаления компьютера из списка с окном для подтверждения действия. Поначалу GPT меня не понял и добавил Popper, который показывал маленькие окошки подсказки, – в них даже не было кнопок. Но после запроса на модальные окна код исправился, и всё заработало.





Похожим запросом добавление компьютера также превратилось в модальное окно, а надписи на кнопках были заменены на иконки.

Интересно, что изначально я вручную искал и писал иконки, которые мне нужны, но на практике для новых кнопок нейронка сама прекрасно подбирала подходящие иконки! Забавно, что я писал текст с ошибкой, но ChatGPT прекрасно понял, что я хочу.







Захотелось редактировать строки с компьютерами, ведь если мы ошиблись, добавляя строку, то приходилось удалять и заново вводить все данные.

Я попросил заменить кнопку удаления на кнопку редактирования строки, которая открывала модальное окно с данными компьютера, и там же добавить кнопку удаления.



На этом этапе можно было закончить, всё успешно работало, список пополнялся и уменьшался при желании, редактирование работало, Wake функция работала, и всё это хорошо выглядело как на смартфоне, так и на ПК.

Для удобства я решил добавить библиотеку WiFiManager. Она поднимает Wi-Fi точку и веб-сервер на ней. При подключении к точке мы можем легко настроить нашу домашнюю сеть без редактирования кода.

ChatGPT справился и с этой задачей.

А вот дальше была печаль. Ещё где-то на модальных окнах у меня кончился лимит модели 4о, а после переключения на 4o mini код стал сильно хуже. И чем больше я просил от GPT, тем хуже он работал, банально ломая UI и галлюцинируя новыми функциями там, где всё уже стабильно работало.

Взяв код в свои руки, я примерно за час довёл интерфейс до нормального вида, так как отступы и размеры кнопок нейросеть делала не очень. Также внёс старый хак с Delay на 1 мс, дабы понизить потребление платы. Мелочь, а приятно.

▍ Как это выглядит и работает

Подключаем плату к Wi-Fi сети путём подключения к плате и настройки Wi-Fi точки, после чего идём на адрес нашей ESP8266 и видим список девайсов. С завода он пуст, но у меня он уже отчасти заполнен.



Для добавления компьютера в список жмём на зелёный плюс, вводим данные и жмём на кнопку Add.





После успешного добавления компьютера его можно разбудить синей кнопкой.



Если где-то накосячили при вводе данных или сменились параметры, то меняем их в окне редактирования. Тут же можно удалить компьютер из списка, если он более не нужен.



Вот такая простая и рабочая тулза вышла.

▍ Установка

Исходники проекта выложены на GitHub: github.com/Tirarex/EspWOL

Вариант 1 – установить бинарник

Качаем бинарник из релизов GitHub и прошиваем через любой инструмент, который принимает .bin прошивки.

Например, онлайн через браузер:

• esp.huhn.me
• web.esphome.io (тут просто выбрать свою прошивку вместо esphome)

Вариант 2 – собрать из исходников

Для работы понадобятся библиотеки:

• github.com/a7md0/WakeOnLan
• github.com/bblanchon/ArduinoJson
• github.com/tzapu/WiFiManager

А дальше просто скачиваем прошивку и компилируем под свою плату.

▍ Выводы

Итоговым продуктом я доволен, но про нейросети хочется сказать побольше.
Конечно, в данный момент нейросети не то что не заменят программистов, а в целом в сложных задачах будут не особо полезны из-за галлюцинаций. И даже когда они полезны, они требуют очень чуткого надзора и понимания того, что они пишут, от того же оператора. Ни о каком Zero Code благодаря нейронкам говорить пока не стоит. О чём стоит говорить, так это о реальной полезности. Конечно, код не идеален, но он работает, и нейросеть сняла с меня всю скучную рутину, оставив пару мелких багов, которые были пофикшены буквально за час и отчасти при помощи той же нейросети. Я считаю, что это просто прекраснейший инструмент для быстрой разработки прототипов или очень небольших проектов.

© 2024 ООО «МТ ФИНАНС»

Telegram-канал со скидками, розыгрышами призов и новостями IT 💻