Kitabı oxu: «От датчика до интерфейса. Практическое руководство по созданию инженерных десктоп приложений на Python и web-технологиях»

ОТ ДАТЧИКА ДО ИНТЕРФЕЙСА

Практическое руководство по созданию инженерных десктоп-приложений на Python и web-технологиях

Нави Тулаг

Предисловие. Между физическим и цифровым миром

Представьте себе на мгновение современную инженерную лабораторию.

С одной стороны — физический мир. Датчики температуры, вибрации, давления. Микроконтроллеры Arduino и ESP32, которые снимают показания 24/7. COM-порты, по которым бегут байты данных. Провода, паяльник, осциллограф. Это мир сигналов, шумов и реальных измерений.

С другой стороны — цифровой мир. Графики в реальном времени, базы данных, облачные сервисы, веб-интерфейсы. Это мир визуализации, анализа и принятия решений.

Долгое время эти миры были разделены.

Инженеры, умеющие работать с железом, часто останавливались на консоли или Excel. Веб-разработчики создавали красивые интерфейсы, но не могли получить данные с датчика. Python-скрипты анализировали данные, но не имели удобного GUI для коллег.

Но что, если бы существовал мост?

Мост, который позволяет принять данные с Arduino через COM-порт и сразу отобразить их на красивом графике в окне приложения? Мост, который позволяет превратить скрипт на Python в полноценную программу с кнопками и меню, которую можно отправить коллеге одним файлом? Мост, который позволяет получать данные с ESP32 из любой точки мира через облако?

Этот мост был построен. И он имеет несколько мощных опор: Python Eel, Electron и Neutralino.

Эта книга — ваш путеводитель по этому мосту.

Почему эта книга? И для кого она?

Когда я только начинал создавать инструменты для своей лаборатории, я столкнулся с парадоксом. Информации было много, но она была разрозненна. Туториалы по веб-разработке не говорили о COM-портах. Примеры для Arduino заканчивались на «мигающем светодиодах» и простом взаимодействии с датчиками. Мне приходилось методом проб и ошибок, тратя много времени, собирать по крупицам понимание: как сделать так, чтобы кнопка в интерфейсе реально включала реле?

Я написал эту книгу, чтобы сэкономить вам это время и избавить от этих ошибок.

Эта книга для Вас:

Таблица 1. Эта книга для Вас

Наша философия: от простого к сложному

В интернете полно священных войн на холиварную тему «Какой фреймворк лучше?». Эта книга не участвует в них. Наша главная цель — дать вам инструмент для решения задачи.

Мы пойдём по пути постепенного усложнения:

Часть 1: Поймём, зачем вообще нужно своё приложение.

Часть 2: Освоим Python Eel — самый простой способ для инженера.

Часть 3: Подключим Arduino и научимся работать с COM-портами.

Часть 4: Выйдем в IoT — получим данные с ESP32 из облака через MQTT.

Часть 5: Рассмотрим альтернативы и научимся упаковывать приложения для коллег.

Уникальная особенность: Режим эмуляции

Одна из главных проблем инженерного ПО — зависимость от железа. Что делать, если Arduino нет под рукой? Или она в другой лаборатории?

В этой книге вы узнаете, как внедрить режим эмуляции (DEBUG_MODE). Вы сможете тестировать интерфейс и логику приложения, генерируя правдоподобные данные программно. Это ускорит разработку в 3–5 раз и позволит демонстрировать приложение заказчику без необходимости везти с собой установку.

Что вас ждёт внутри?

Каждая глава — это готовое решение, которое можно скопировать и адаптировать:

Режим эмуляции — тестируйте код без Arduino/ESP32

Графики в реальном времени — Chart.js + Python

Работа с COM-портами — pyserial, обработка ошибок

IoT-мониторинг — MQTT, HiveMQ Cloud, GitHub Pages

Упаковка в .exe — PyInstaller, один файл для коллег

Исходный код всех приложений, упомянутых в статье, доступен в открытом репозитории на GitHub:

https://github.com/Book-From-the-sensor-to-the-interface/sketch_for_book.git

Технологии — это не просто инструменты. Это расширители возможностей. Они стирают границы между «железом» и «программой». Моя задача как автора — не просто научить вас пользоваться тремя фреймворками, а дать вам свободу создавать инструменты, которые облегчают вашу инженерную работу.

Готовы стереть границы между датчиком и интерфейсом? Тогда начнём наше путешествие.

С наилучшими пожеланиями,

Нави Тулаг.

Часть 1. Введение в инженерную разработку ПО

Зачем инженеру своё приложение?

О чём эта глава?

Вы, вероятно, слышали фразу: «Зачем писать приложение, если есть Excel или Serial Monitor?»

Иногда это звучит как истина. Но на практике — готовые инструменты часто не подходят под специфические задачи лаборатории или производства.

В этой главе мы разберём четыре ключевые причины, по которым инженеру стоит писать своё ПО:

Производительность (автоматизация рутины)

Доступ к оборудованию (COM-порты, GPIO, датчики)

Автономная работа (без интернета, в цеху, в «поле»)

Визуализация и контроль (графики в реальном времени, кнопки управления)

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

1.1. Excel и консоль — это не панацея

Представьте: вы проводите серию экспериментов. Вам нужно снимать показания с датчика каждые 100 мс, сохранять их в файл и сразу видеть график, чтобы понять, не вышел ли параметр за допустимые пределы.

В Excel:

Нет прямого доступа к COM-порту (нужны макросы или плагины).

Обновление данных в реальном времени тормозит на больших объёмах.

Нельзя отправить команду «Включить нагрев» обратно на устройство.

В Serial Monitor (Arduino IDE):

Только текст, нет графиков.

Нет сохранения данных в удобном формате (CSV/JSON).

Нельзя создать кнопки управления.

А в своём приложении — всё это возможно. И даже необходимо.

1.2. Причина №1: Доступ к оборудованию

Веб-приложения (в браузере) работают в «песочнице». Они не знают, где на диске лежит файл, не видят USB-устройства (без сложных API).

Инженерное десктоп-приложение:

Читает данные с COM-порта напрямую (через Python pyserial).

Работает с локальными базами данных (SQLite) без ограничений.

Управляет реле, моторами, источниками питания через интерфейс.

Пример. Приложение для калибровки датчиков давления. Оно должно опросить 10 датчиков по очереди, сравнить показания с эталоном и записать коэффициенты в память устройства. В браузере это невозможно. В приложении на Python Eel — легко.

1.3. Причина №2: Визуализация в реальном времени

Инженер мыслит графиками. Таблица из 1000 чисел ничего не скажет о тренде.

Современные веб-технологии (Chart.js, Plotly) позволяют строить красивые, интерактивные графики прямо внутри десктопного приложения.

Преимущества своего UI:

Мгновенная реакция: График обновляется по мере поступления данных.

Интерактивность: Можно выделить участок, приблизить, сохранить скриншот.

Аварийная сигнализация: Цвет меняется на красный, если значение превысило порог.

1.4. Причина №3: Автономная работа

Интернет — не всегда надёжен. Цех, подвал, полевые условия… Часто сеть отсутствует вообще.

Веб-сервис зависит от соединения. Десктопное приложение:

Работает полностью локально.

Хранит данные на устройстве.

Синхронизирует их с облаком только когда появляется сеть (если нужно).

Пример. Система мониторинга вибрации двигателя на удалённой насосной станции. Приложение пишет данные в локальный файл 24/7. Раз в сутки, когда появляется связь, оно отправляет отчёт на сервер.

1.5. Причина №4: Производительность и автоматизация

Рутина съедает время. Если вы каждый день запускаете тест по одному и тому же сценарию — автоматизируйте это.

Своё приложение позволяет:

Записать сценарий теста (нагреть до 50°C, ждать 5 мин, снять показания).

Запускать его одной кнопкой.

Сразу получать готовый отчёт (PDF/Excel).

1.6. Когда своё приложение — избыточно?

Честность важна. Писать ПО нужно не всегда.

Используйте готовые инструменты, если:

Нужно просто один раз снять показания (подойдёт мультиметр + блокнот).

Задача одноразовая (не стоит тратить 2 дня на код).

Есть готовое промышленное ПО (например, LabVIEW), которое уже куплено и настроено.

Но если ваш продукт — это инструмент для ежедневной работы, — своё приложение часто даёт лучший UX и экономию времени в долгосрочной перспективе.

1.7. Что мы узнали?

Готовые инструменты (Excel, Serial Monitor) часто ограничены для инженерных задач.

Ключевые преимущества своего ПО: доступ к железу, визуализация, автономность, автоматизация.

Современные фреймворки (Eel, Electron) позволяют использовать веб-технологии для создания удобного UI.

Выбор между «написать самому» и «взять готовое» — это вопрос частоты использования и сложности задачи.

Чек-лист. Практическое задание

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

Для каждого ответьте:

2.a. Есть ли у него автоматизация?

2.b. Какие функции занимают больше всего времени вручную?

2.c. Какие из четырёх причин (доступ, визуализация, автономность, автоматизация) могли бы улучшить этот процесс?

Представьте, что вы создаёте приложение для одного из этих процессов.

Напишите 2–3 предложения: какую главную проблему решит ваше приложение?

Пример. «Я создаю панель для тестирования датчиков температуры. Сейчас я записываю показания вручную в журнал. Приложение позволит автоматически собирать данные с 4 датчиков одновременно, строить график и сохранять отчёт в CSV. Это сэкономит 30 минут на каждом тесте».

В следующей главе мы сравним традиционные подходы к созданию GUI (Tkinter, PyQt) с современными веб-обёртками, чтобы вы понимали все компромиссы и выбрали правильный инструмент.

Обзор архитектур: традиционные GUI (Tkinter, PyQt) vs WEB-обёртки

О чём эта глава?

Вы уже поняли, зачем инженеру своё приложение. Теперь возникает главный вопрос: «На чём писать?»

Если вы знаете Python, логичным кажется использовать стандартные библиотеки для интерфейсов. Но есть нюанс: инженеру нужны не просто кнопки, а графики, логи и удобная вёрстка.

В этой главе мы сравним два подхода:

Традиционные GUI (Tkinter, PyQt) — классика Python-разработки.

Веб-обёртки (Eel, Electron) — современный гибрид Python + HTML/CSS.

Архитектурные компромиссы — что вы получаете и что теряете в каждом случае.

Почему для инженерных задач веб-технологии часто выигрывают.

Вы поймёте, почему в этой книге мы делаем ставку на связку Python + Web, и когда всё-таки стоит выбрать старый добрый Tkinter.

2.1. Классический путь: Tkinter и PyQt

Когда Python-разработчик слышит «нужен интерфейс», первая мысль — Tkinter. Он встроен в Python, не требует установки и работает «из коробки».

Пример на Tkinter:

Рис. 2. Пример на Tkinter

Плюсы традиционных GUI:

Нативность: Приложение выглядит как часть ОС (особенно PyQt).

Лёгкость: Tkinter не тянет за собой браузер и весит килобайты.

Отсутствие сервера: Не нужно поднимать локальный веб-сервер, всё работает в одном процессе.

Минусы для инженера:

Визуализация: Построить красивый интерактивный график в Tkinter сложно (нужен matplotlib, который тяжёлый и не всегда интерактивный).

Вёрстка: Выравнивание элементов («сетка») в Tkinter часто превращается в боль. Сделать адаптивный интерфейс под разные экраны трудно.

Порог входа PyQt: PyQt мощнее, но у него сложный синтаксис (сигналы/слоты), и он требует изучения Qt-фреймворка.

Инженерный вердикт. Tkinter подойдёт для простой «кнопки вкл/выкл». Но если нужно отображать графики в реальном времени, логи и дашборды — вы потратите больше времени на борьбу с интерфейсом, чем на логику работы с железом.

2.2. Современный путь: Веб-обёртки (Hybrid Apps)

Идея проста: логика на Python, интерфейс в браузере.

Вы пишете backend на Python (работа с COM-портами, расчёты), а frontend — на HTML/CSS/JS (кнопки, графики Chart.js). Специальная оболочка (Eel, Electron) связывает их.

Пример архитектуры Eel:

Рис. 3. Пример архитектуры Eel

Рис. 4. Пример архитектуры Eel (продолжение)

Плюсы веб-обёрток:

Визуализация: Библиотеки вроде Chart.js или Plotly позволяют строить потрясающие графики несколькими строками кода.

Вёрстка: CSS даёт полный контроль над дизайном. Легко сделать тёмную тему, адаптивность под планшеты.

Разделение ответственности: Инженер пишет Python, дизайнер (или готовый шаблон) отвечает за красоту.

Минусы:

Вес: Даже простое приложение тянет за собой движок браузера (хотя Eel использует системный браузер, что легче).

Сложность: Нужно знать основы HTML/JS (но для инженера это уровень «скопировать и поменять цифры»).

Важно. В этой книге мы используем Eel, потому что он максимально лёгкий для Python-разработчика. Electron мощнее, но требует знания Node.js, что избыточно для задач лаборатории.

2.3. Сравнительная таблица: Что выбрать инженеру?

Давайте посмотрим на цифры и факты. Представим, что мы создаём панель мониторинга температуры с графиком.

Рис. 5.

Вывод: Если ваша цель — быстро сделать удобный инструмент для себя и коллег, веб-обёртки выигрывают за счёт готовых библиотек визуализации.

2.4. Почему мы выбираем Eel для этой книги?

В первой книге мы рассматривали Electron, NW.js и Eel на равных. Но для инженерных задач есть нюансы:

Python — язык инженера. Большинство скриптов для Arduino, обработки данных и расчётов уже написаны на Python. Eel позволяет использовать их без переписывания.

Electron избыточен. Он требует Node.js и собирает свой браузер. Для панели управления двигателем это как стрелять из пушки по воробьям.

Eel — это мост. Он не требует глубокого погружения в веб-разработку. Вы вызываете функции Python из JS так же легко, как из другого модуля Python.

Наша философия. Не становиться веб-разработчиком. Использовать веб-технологии как инструмент для отображения данных, оставляя Python для работы с железом.

2.5. Когда всё-таки стоит выбрать Tkinter?

Честность — важнее моды. Есть случаи, когда веб-обёртки не подходят:

Сверхлёгкие утилиты. Если нужно просто окно с одним полем ввода, которое должно весить 5 МБ.

Работа на старых ПК. В цехах иногда стоят компьютеры с 2 ГБ памяти. Запуск браузера может быть проблематичен.

Полная изоляция. Если политика безопасности запрещает запуск любых браузерных движков (редко, но бывает).

Но для 90% задач современной лаборатории — гибридный подход (Python + Web) является золотым стандартом.

Что мы узнали?

Традиционные GUI (Tkinter) легки, но сложны в вёрстке и визуализации.

Веб-обёртки дают современный интерфейс и мощные графики «из коробки».

Eel идеально подходит инженерам: логика на Python, интерфейс на HTML.

Выбор инструмента зависит от задачи: для дашбордов — веб, для микро-утилит — Tkinter.

В этой книге мы фокусируемся на Eel как на наиболее сбалансированном инструменте.

Чек-лист. Практическое задание

Найдите в интернете скриншоты интерфейсов на Tkinter и на веб-технологиях (например, дашборды Grafana или любые веб-приложения).

Сравните их визуально:

2.a. Где легче читать данные?

2.b. Где графики выглядят современнее?

Подумайте о вашем текущем проекте (из Главы 1):

→ Если бы вы делали его на Tkinter, сколько времени ушло бы на построение графика?

→ Если на Eel — сколько времени уйдёт на подключение Chart.js?

Напишите короткий вывод (2–3 предложения): почему для вашей задачи подходит гибридный подход?

Пример. «Для мониторинга вибрации мне нужно 4 графика в реальном времени. На Tkinter я бы потратил неделю на настройку matplotlib. На Eel я возьму готовый шаблон Chart.js за 1 час. Выбираю Eel».

В следующей главе мы познакомимся с инструментами поближе: Python Eel, Electron и Neutralino. Мы разберём их философию и поймём, почему Eel станет нашим основным рабочим инструментом.

Знакомство с инструментами: Python Eel, Electron, Neutralino. Их философия и применение в инженерии

О чём эта глава?

Вы уже понимаете, зачем инженеру своё приложение и почему веб-технологии в оболочке — правильный выбор.

Теперь пришло время познакомиться с тремя главными инструментами этой книги:

Python Eel — минималистичный мост для Python-разработчиков.

Electron — промышленный стандарт для сложных продуктов.

Neutralino — лёгкая современная альтернатива без Node.js.

В этой главе вы узнаете:

Заметка. Какую проблему каждый из них решает в инженерном контексте.

Заметка. Какая философия лежит в основе каждого фреймворка.

Заметка. Кто их целевая аудитория — и почему вы среди них.

Заметка. Какие сильные и слабые стороны у каждого для задач лаборатории.

Эта глава поможет вам не просто «выбрать фреймворк», а понять, какой язык вам использовать.

3.1. Python Eel: «Мой скрипт заслуживает интерфейс»

История и философия

Eel родился в 2017 году из простой идеи:

«Почему бы не использовать HTML/CSS/JS для интерфейса, а всю логику оставить на Python?»

В отличие от Electron и Neutralino, Eel не встраивает браузер. Вместо этого он:

Запускает локальный веб-сервер на Python (через bottle или gevent-websocket).

Открывает окно системного браузера (Chrome, Edge, Safari).

Связывает Python и JavaScript через HTTP/WebSocket.

Философия Eel:

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

Целевая аудитория

Таблица 2. Целевая аудитория

Заметка. Сильные стороны для инженеров

Очень простой старт: 10 строк Python + 10 строк HTML = готовое приложение.

Полный доступ к экосистеме Python: pyserial, pandas, numpy, scikit-learn, opencv — всё работает «из коробки».

Минимальный порог входа: Не нужно знать JavaScript глубоко — достаточно базовых вызовов функций.

Идеален для скриптов с GUI: Панели управления, сбор данных, визуализация.

Ошибка. Слабые стороны

Нет встроенного доступа к нативным API ОС: Нет меню, трея, уведомлений «из коробки» (требуются доп. библиотеки вроде pystray).

Ограниченные возможности UI: Сложные интерфейсы (drag-and-drop, анимации) — сложнее, чем в Electron.

Производительность вызовов: Каждый вызов Python → JS проходит через HTTP/WebSocket (не критично для 95% задач).

Сборка в .exe: Требует PyInstaller, что может быть громоздко с большими зависимостями.

Пример из практики. Панель мониторинга Arduino

Вот как выглядит типичное Eel-приложение для инженера (из ваших проектов):

Рис. 6.

Рис. 7. Python Eel: «Мой скрипт заслуживает интерфейс» (продолжение)

Что это даёт инженеру:

Режим эмуляции — тестируйте код без Arduino

Графики в реальном времени — Chart.js + Python

Упаковка в .exe — PyInstaller, один файл для коллег

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

3.2. Electron: «Веб-приложение как десктопный продукт»

История и философия

Electron разработан в 2013 году в компании GitHub как внутренний инструмент для редактора Atom. Идея была простой:

«Почему бы не использовать те же технологии, что и для веба, чтобы создавать десктопные приложения?»

Философия Electron:

Чёткое разделение ответственности: Main-процесс (Node.js) управляет ОС, Renderer-процесс (Chromium) отвечает за UI.

Это делает архитектуру предсказуемой, масштабируемой и безопасной.

Целевая аудитория

Таблица 3. Целевая аудитория

Заметка. Сильные стороны

Зрелая экосистема: electron-builder, DevTools, TypeScript-поддержка.

Чёткая архитектура с изоляцией процессов.

Огромное сообщество и документация.

Полный доступ к API ОС: меню, трей, уведомления, диалоги — всё «из коробки».

Поддержка всех современных веб-фреймворков: React, Vue, Svelte.

Ошибка. Слабые стороны для инженеров

Высокое потребление памяти: Каждое окно — отдельный процесс Chromium (~150 МБ минимум).

Большой размер дистрибутива: Минимум ~50–70 МБ даже для «Hello World».

Сложность для новичков: Нужно понимать IPC, preload, sandbox.

Требует знания Node.js: Если ваша логика на Python — придётся поднимать Flask-сервер отдельно.

Пример из практики. Electron + Python (Flask)

Для инженеров Electron чаще всего используется в связке с Python-бэкендом:

Рис. 8.

Когда это оправдано:

Нужен очень сложный UI (редакторы, дашборды с десятками графиков).

Планируется масштабирование (команда разработчиков, версии, обновления).

Требуется нативная интеграция (трей, меню, автозапуск).

Важно. Для большинства инженерных задач это избыточно. Electron — как стрелять из пушки по воробьям, если нужно просто читать данные с датчика.

3.3. Neutralino: «Лёгкий и современный»

История и философия

Neutralino — самый молодой из трёх (появился в 2020 году). Его миссия:

«Создавать лёгкие кроссплатформенные приложения без зависимости от Node.js и тяжёлых браузерных движков.»

Философия Neutralino:

Использовать системный WebView (как Eel), но с нативным API и без Node.js.

Целевая аудитория

Таблица 4. Целевая аудитория

Заметка. Сильные стороны

Очень лёгкий: Дистрибутив ~2–5 МБ (в 10–20 раз меньше Electron!).

Не требует Node.js: Меньше зависимостей, проще сборка.

Системный WebView: Использует Edge WebView2 (Windows), WebKit (macOS), GTK (Linux).

Нативный API: Доступ к файловой системе, диалогам, трею — без дополнительных библиотек.

Безопасность: Песочница по умолчанию, нет Node.js в контексте.

Ошибка. Слабые стороны

Молодое сообщество: Меньше примеров, документации, готовых решений.

Ограниченный API: Не всё, что есть в Electron, доступно «из коробки».

Требует знания JavaScript: Логика пишется на JS, Python подключается отдельно.

Меньше инструментов отладки: DevTools есть, но не такие мощные, как в Electron.

Пример из практики. Лёгкий монитор датчиков

Рис. 9. Лёгкий монитор датчиков

Когда это оправдано:

Нужно распространять среди коллег (маленький размер).

Запуск на слабых компьютерах (цех, лаборатория со старым парком).

Простой UI (кнопки, графики, логи) без сложных анимаций.

3.4. Сравнение в одном взгляде

Таблица 5.

* Размер Eel сильно зависит от Python-зависимостей: pandas + numpy → +50 МБ, torch → +500 МБ.

3.5. Когда что выбирать?

Инженерный чек-лист

Выбирайте Python Eel, если. Выбирайте Python Eel, если:

Ваша логика уже на Python (pyserial, pandas, numpy).

UI простой: кнопки, графики, таблицы, логи.

Пользователи — технические специалисты (коллеги, лаборанты).

Нужно быстро: прототип за вечер, диплом за неделю.

Нет требований к нативным меню/трею.

Фокус. Это выбор для 80% инженерных задач.

Выбирайте Electron, если. Выбирайте Electron, если:

Нужен очень сложный UI (редакторы, IDE, дашборды).

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

Нативная интеграция критична (трей, меню, уведомления, автозапуск).

Пользователи — массовый рынок (публичный продукт).

Вы знаете JavaScript лучше, чем Python.

Выбирайте Neutralino, если. Выбирайте Neutralino, если:

Размер дистрибутива критичен (< 20 МБ).

Запуск на слабых компьютерах (старые ПК в цеху, на производстве).

Простой UI, но нужна нативная интеграция (диалоги, файлы).

Хотите избежать зависимости от Node.js.

Готовы мириться с молодым сообществом.

3.6. Наша философия для этой книги

В первой книге мы рассматривали Electron, NW.js и Eel на равных. Но для инженерных задач есть нюансы:

Рис. 10.

Наша философия. Не становиться веб-разработчиком. Использовать веб-технологии как инструмент для отображения данных, оставляя Python для работы с железом.

3.7. Реальный пример: От Arduino до облака

В этой книге мы пойдём по пути постепенного усложнения:

Рис. 11. В этой книге мы пойдём по пути постепенного усложнения

Почему такой порядок?

Сначала Eel — потому что это самый быстрый способ для инженера получить результат.

Потом COM-порты — потому что это основная задача лабораторных приложений.

Затем IoT — потому что ESP32 открывает мир удалённого мониторинга.

В конце Electron — как альтернатива для тех, кому нужно больше возможностей.

Что мы узнали?

Eel — выбор для Python-разработчиков, которым нужен GUI без погружения в JavaScript.

Electron — выбор для продуктов, где важны масштабируемость, безопасность и команда.

Neutralino — выбор для лёгких утилит с минимальным размером дистрибутива.

Ни один из них не «лучше» — каждый решает свою задачу.

Для инженерных задач Eel часто оптимален — потому что Python уже является языком инженера.

Чек-лист. Практическое задание

Представьте три разных проекта:

A) Панель для сбора данных с 4 датчиков температуры (COM-порт, графики, сохранение в CSV).

B) Веб-дашборд для мониторинга оборудования в цеху (доступ из браузера, пользователи по всей стране).

C) Лёгкая утилита для калибровки прибора (вес < 20 МБ, запуск на старом ПК в лаборатории).

Для каждого проекта:

2.a. Выберите один из трёх фреймворков.

2.b. Обоснуйте выбор двумя причинами (например: «Eel, потому что основная логика на Python и UI простой»).

Подумайте: можно ли решить ту же задачу на другом фреймворке?

→ Какие сложности возникли бы?

Пример ответа. Пример ответа:

A) Eel — логика на Python (pyserial), UI простой (графики Chart.js), пользователи — лаборанты.

B) Electron + Flask — нужен доступ из браузера, сложная авторизация, массовые пользователи.

C) Neutralino — критичен размер, запуск на старом ПК, простой UI.

В следующей главе мы систематизируем всё, что узнали, и дадим вам чёткий алгоритм выбора: «Когда использовать Eel, Electron или Neutralino?» — с таблицей, примерами и контрольными вопросами.

Критерии выбора: когда использовать какой фреймворк?

О чём эта глава?

Вы уже познакомились с тремя подходами:

Python Eel — для инженеров, живущих в экосистеме Python.

Electron — для сложных продуктов с мощным UI.

Neutralino — для лёгких утилит без лишних зависимостей.

Теперь настало время перейти от теории к решению. В этой главе вы узнаете:

Заметка. Как выбрать фреймворк на основе реальных требований проекта (железо, данные, пользователи).

Заметка. Какие пять ключевых вопросов задать себе перед стартом.

Заметка. Как сравнить фреймворки объективно — не по хайпу, а по цифрам и ограничениям (размер, COM-порты, сложность).

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

4.1. Пять вопросов перед выбором

Прежде чем писать код, ответьте на эти вопросы. Честные ответы сэкономят вам недели работы.

1. На каком языке написана основная логика?

Python? → Скорее всего, Eel.

Почему: pyserial, pandas, numpy уже у вас под рукой. Не нужно переписывать алгоритмы на JavaScript.

JavaScript/TypeScript? → Electron или Neutralino.

Почему: Если ваша логика уже на JS (например, веб-дашборд), нет смысла поднимать Python-сервер.

2. Насколько сложен пользовательский интерфейс?

Простые формы, кнопки, графики? → Eel подойдёт идеально.

Пример: Панель управления Arduino, мониторинг температуры.

Сложные анимации, drag-and-drop, редакторы кода? → Electron.

Пример: IDE, сложный конструктор схем.

Минимализм, стандартные элементы? → Neutralino.

3. Нужен ли доступ к нативным функциям ОС?

COM-порты, GPIO, файлы? → Eel (через Python) или Electron (через Node.js).

Нюанс: В Eel это одна строка serial.Serial(). В Electron — установка npm-пакетов и настройка preload.

Трей, системные уведомления, меню? → Electron (встроено).

Нюанс: В Eel потребуются доп. библиотеки (pystray), в Neutralino — нативный API.

4. Кто ваш пользователь?

Коллеги в офисе / Лаборанты? → Eel или Neutralino.

Почему: Можно собрать один .exe и забыть.

Миллионы пользователей (публичный продукт)? → Electron.

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

5. Каковы требования к размеру и производительности?

Установка должна быть < 20 МБ? → Neutralino.

Почему: Electron весит ~150 МБ даже для «Hello World». Eel зависит от библиотек (pandas + numpy = +100 МБ).

Память > 300 МБ — критично? → Избегайте Electron для простых задач.

Почему: Каждый процесс Electron — это отдельный Chromium.

4.2. Сравнительная таблица: объективные метрики

Давайте посмотрим на цифры. Представим, что мы создаём панель мониторинга датчиков с графиком в реальном времени.

Таблица 6.

Важно. Размер Eel сильно зависит от Python-зависимостей. Чистый скрипт — 30 МБ. С pandas + numpy — может вырасти до 150 МБ.

4.3. Алгоритм выбора: пошаговая инструкция

Текстовая версия алгоритма:

Шаг 1: Ваша логика на Python?

Да → Переходите к Шагу 2.

Нет → Смотрите в сторону Electron или Neutralino.

Шаг 2: Нужен ли сложный UI (анимации, редакторы)?

Нет (кнопки, графики, логи) → Python Eel.

Да → Electron (с Python-бэкендом через Flask/SocketIO).

Шаг 3: Критичен ли размер приложения (< 20 МБ)?

Да → Neutralino (но придётся писать логику на JS или поднимать Python-сервер отдельно).

Нет → Оставайтесь на Eel.

Шаг 4: Нужно ли работать с COM-портами?

Да → Eel даст самое простое решение (pyserial).

Помните. вы всегда можете комбинировать подходы. Например, тяжёлые вычисления — на Python (через subprocess из Electron), UI — на React. Но для инженерных задач это часто избыточно.

4.4. Когда НИ ОДИН из трёх не подходит?

Иногда правильный ответ — не использовать ни один из них. Это нормально!

Рассмотрите альтернативы, если:

Приложение должно весить менее 5 МБ → Смотрите в сторону Tauri (Rust + WebView).

Плюс: Очень лёгкий, безопасный.

Минус: Требует знания Rust для бэкенда.

Требуется максимальная производительность (видео, 3D) → Нативная разработка (C++, C#, Qt).

Плюс: Полный контроль над железом.

Минус: Высокий порог входа, долго писать.

Вы делаете мобильное приложение → Electron/Eel/Neutralino не работают на iOS/Android.

Решение: Flutter, React Native или Kivy (Python).

Примечание. Tauri — достойный конкурент Electron с размером дистрибутива ~3–5 МБ, но он требует знания Rust. Мы не включаем его в основную триаду, так как наша цель — Python и веб-технологии для инженеров.

4.5. Частые ловушки новичков

Таблица 7.

4.6. Наш выбор для этой книги

В первой книге мы рассматривали Electron, NW.js и Eel на равных. Но для инженерных задач есть нюансы:

Таблица 8.

Наша философия. Не становиться веб-разработчиком. Использовать веб-технологии как инструмент для отображения данных, оставляя Python для работы с железом.

Что мы узнали?

Выбор фреймворка — это анализ требований, а не следование тренду.

Язык бэкенда — главный фильтр: Python → Eel, JS → Electron/Neutralino.

Eel оптимален для инженерных задач (COM-порты, данные, Python-библиотеки).

Electron нужен для сложных продуктов с массовым пользователем.

Neutralino — выбор для лёгких утилит с ограничением по размеру.

Всегда задавайте себе пять ключевых вопросов перед стартом.

Чек-лист. Практическое задание

Опишите свой реальный или гипотетический проект (1–2 предложения).

Пример: «Инструмент для анализа логов сервера с графиками и фильтрацией».

Пройдите по алгоритму выбора из раздела 4.3.

Заполните таблицу:

Таблица 9.

Сделайте вывод: почему именно этот фреймворк — лучший выбор?

Пример заполнения. Пример заполнения:

Проект: «Панель управления нагревателем через Arduino».

Бэкенд: Python (pyserial, threading).

UI: Графики температуры, кнопки вкл/выкл.

API: COM-порт обязательно.

Вывод: Eel — идеален, так как позволяет использовать всю мощь Python для работы с портом и быстро сделать GUI на HTML/Chart.js. Electron избыточен, Neutralino потребует лишней настройки связи с Python.

Теперь вы готовы к практической части книги.

В Части 2 мы углубимся в Python Eel: от установки до создания первого приложения с графиками.

В Части 3 подключим Arduino и научимся работать с COM-портами.

В Части 4 выйдем в IoT с ESP32 и MQTT.

Выбор сделан — пора писать код!

Часть 2. Python Eel — основной инструмент инженера

Быстрый старт с Eel. Установка, структура проекта, первый запуск

О чём эта глава?

Вы выбрали Python Eel — отличное решение для инженера, который хочет быстро создать интерфейс для своего скрипта.

Теперь пришло время перейти от теории к практике. В этой главе вы:

Установите Eel и проверите работоспособность.

Создадите структуру проекта «правильно» с первого дня.

Напишете первое приложение за 10 минут.

Запустите его и увидите результат в окне браузера.

Поймёте, как Python и JavaScript «общаются» между собой.

К концу главы у вас будет рабочее приложение, которое можно развивать дальше — добавлять графики, кнопки, работу с COM-портами.

5.1. Почему Eel? Философия быстрого старта

Прежде чем писать код, давайте ответим на вопрос: почему именно Eel?

Таблица 10.

Наша философия. Инженеру не нужно становиться веб-разработчиком. Ему нужно быстро обернуть свой Python-скрипт в удобный интерфейс. Eel даёт именно это.

Eel — это мост, а не замена.

Python остаётся для логики: расчёты, COM-порты, файлы, данные.

HTML/CSS/JS остаются для красоты: кнопки, графики, вёрстка.

Eel связывает их двумя простыми вызовами функций.

5.2. Установка Eel: Пошагово

Eel устанавливается через стандартный менеджер пакетов Python — pip.

Шаг 1. Проверка Python

Убедитесь, что у вас установлен Python 3.7 или выше:

Рис. 12. Убедитесь, что у вас установлен Python 3.7 или выше

Важно. Если у вас несколько версий Python, используйте py -3 --version (Windows) или python3 --version (macOS/Linux).

Шаг 2. Создание виртуального окружения (рекомендуется)

Это хорошая практика — изолировать зависимости проекта:

Рис. 13. Это хорошая практика — изолировать зависимости проекта

Совет. Зачем это нужно? Когда вы будете упаковывать приложение в .exe (Глава 8), PyInstaller соберёт только те библиотеки, которые установлены в виртуальном окружении. Это уменьшит размер дистрибутива и избежит конфликтов.

Шаг 3. Установка Eel

Рис. 14.

Шаг 4. Проверка установки

Создайте файл test.py и выполните:

Рис. 15. Создайте файл test.py и выполните

Если нет ошибок — установка успешна!

5.3. Структура проекта: Правильно с первого дня

Одна из главных ошибок новичков — сваливать все файлы в одну кучу.

Правильная структура для Eel-приложения:

Рис. 16. Правильная структура для Eel-приложения

Ключевое правило: Все HTML/CSS/JS-файлы должны лежать в папке, которую вы укажете в eel.init(). По умолчанию это папка www.

Почему такая структура?

Таблица 11. Почему такая структура?

5.4. Первое приложение: «Калькулятор инженера»

Создадим простое приложение, которое показывает мощность связи между Python и JavaScript.

Файл 1: main.py (Бэкенд)

Рис. 17. Файл 1: main.py (Бэкенд)

Рис. 18. Файл 1: main.py (Бэкенд) (продолжение)

Рис. 19. Файл 1: main.py (Бэкенд) (продолжение)

Обратите внимание. Декоратор @eel.expose делает функцию доступной из JavaScript. Без него функция останется «внутри» Python.

Файл 2: www/index.html (Фронтенд)

Рис. 20. Файл 2: www/index.html (Фронтенд)

Рис. 21. Файл 2: www/index.html (Фронтенд) (продолжение)

Рис. 22. Файл 2: www/index.html (Фронтенд) (продолжение)

Файл 3: www/style.css (Стили)

Рис. 23. Файл 3: www/style.css (Стили)

Рис. 24. Файл 3: www/style.css (Стили) (продолжение)

Рис. 25. Файл 3: www/style.css (Стили) (продолжение)

Рис. 26. Файл 3: www/style.css (Стили) (продолжение)

Рис. 27. Файл 3: www/style.css (Стили) (продолжение)

Файл 4: www/app.js (Логика интерфейса)

Рис. 28. Файл 4: www/app.js (Логика интерфейса)

5.5. Запуск приложения

Шаг 1. Запуск через терминал

Рис. 29.

Шаг 2. Что произойдёт?

Python запустит локальный веб-сервер (обычно на http://localhost:8000).

Откроется окно браузера с вашим интерфейсом.

Вы увидите форму с полями «Напряжение» и «Ток».

Шаг 3. Проверка работы

Введите 220 в поле напряжения.

Введите 5 в поле тока.

Нажмите «Рассчитать мощность».

Вы увидите: Мощность: 1100.00 Вт

Поздравляем! Вы только что создали первое десктопное приложение на Python Eel!

5.6. Как это работает? Архитектура под капотом

Давайте разберёмся, что происходит «под капотом», когда вы нажимаете кнопку.

Рис. 30.

Ключевые моменты:

Локальный сервер: Eel поднимает мини-веб-сервер на Python (через bottle или gevent-websocket).

Системный браузер: Eel не встраивает браузер (как Electron). Он открывает ваш системный Chrome, Edge или Safari.

Две пары скобок: eel.func()() — первая передаёт аргументы в Python, вторая выполняет вызов и возвращает Promise.

5.7. Режимы запуска Eel

Eel поддерживает несколько режимов открытия окна:

Таблица 12. Eel поддерживает несколько режимов открытия окна

Пример с параметрами:

Рис. 31. Пример с параметрами

5.8. Частые ошибки и решения

Таблица 13.

5.9. Подготовка к следующему шагу: Режим эмуляции

В следующих главах мы будем работать с COM-портами и Arduino. Но что если у вас нет устройства под рукой?

Мы внедрим режим эмуляции (DEBUG_MODE) с самого начала.

Вот как это будет выглядеть в main.py:

Рис. 32. Вот как это будет выглядеть в main.py

Важно. Мы вернёмся к этому в Главе 10, но уже сейчас вы понимаете философию: тестируйте без железа, развёртывайте с железом.

Что мы узнали?

Eel устанавливается за 1 минуту через pip install eel.

Структура проекта: main.py + папка www/ с HTML/CSS/JS.

Связка Python ↔ JS: декоратор @eel.expose + вызов eel.func()().

Первое приложение работает за 10 минут без глубоких знаний веба.

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

Виртуальное окружение — хорошая практика для будущей упаковки в .exe.

Чек-лист. Практическое задание

Создайте проект по структуре из раздела 5.3.

Запустите калькулятор из этой главы.

Модифицируйте приложение:

3.a. Добавьте третье поле: «Сопротивление (Ом)».

3.b. Создайте Python-функцию calculate_resistance(voltage, current), которая возвращает сопротивление по закону Ома: R = U / I.

3.c. Добавьте кнопку «Рассчитать сопротивление» и отобразите результат.

Поэкспериментируйте с режимом запуска:

4.a. Измените размер окна на (800, 600).

4.b. Попробуйте mode='chrome' и mode='edge' — есть ли разница?

Добавьте обработку ошибок:

5.a. Что будет, если ввести 0 в поле тока при расчёте сопротивления?

5.b. Реализуйте проверку в Python и верните понятное сообщение об ошибке.

Совет. Пример решения для 3.b:

Рис. 33. Пример решения для 3.b

В следующей главе мы углубимся в механизм вызовов: как передавать сложные данные (списки, словари), как вызывать JavaScript из Python и как обрабатывать ошибки. Вы научитесь строить двусторонний мост между бэкендом и фронтендом.

Связка Python и JS. Вызов функций, передача данных, асинхронность без блокировки UI

О чём эта глава?

Вы уже создали первое приложение на Eel и увидели, как Python и JavaScript могут работать вместе. Но настоящее мастерство — в понимании того, как они общаются.

В этой главе вы узнаете:

Как вызывать Python-функции из JavaScript (и наоборот) с правильной синхронизацией.

Как передавать сложные данные — списки, словари, JSON-объекты.

Почему UI зависает при чтении COM-порта и как этого избежать.

Как использовать threading (многопоточность) для фоновых* задач без блокировки интерфейса.

Как обрабатывать ошибки на обеих сторонах моста.

П р и м е ч а н и е* - фоновые задачи – это операции, которые не должны блокировать основной поток (особенно графический интерфейс). Например: загрузка файлов из сети, обработка больших данных, отправка запросов к API, логирование (процесс регистрации данных), мониторинг состояния системы.

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

6.1. Двусторонний мост: как работает связь

Eel создаёт мост между Python и JavaScript через локальный веб-сервер. Когда вы вызываете функцию из JS в Python (или наоборот), запрос проходит через этот сервер.

Рис. 34.

Ключевой момент: Eel использует асинхронные вызовы. Это значит, что JavaScript не ждёт ответа Python — он продолжает работать. Но для получения результата нужно использовать await.

6.2. Вызов Python из JavaScript: правильный синтаксис

Базовый пример

Вот как выглядит типичный вызов Python-функции из JavaScript:

Рис. 35. Вот как выглядит типичный вызов Python-функции из JavaScript

Почему две пары скобок?

Это частый вопрос новичков. Давайте разберёмся:

Рис. 36. Это частый вопрос новичков. Давайте разберёмся

Запомните. await eel.function_name(args)() — это стандартный паттерн Eel.

Обработка ошибок

Python-исключения передаются в JavaScript как ошибки Promise:

Рис. 37. Python-исключения передаются в JavaScript как ошибки Promise

Рис. 38. Python-исключения передаются в JavaScript как ошибки Promise (продолжение)

6.3. Передача сложных данных

Eel поддерживает все типы, которые можно сериализовать в JSON:

Рис. 39. Eel поддерживает все типы, которые можно сериализовать в…

Пример: передача словаря

Рис. 40. Пример: передача словаря

Рис. 41. Пример: передача словаря (продолжение)

Пример: передача списка данных для графика

Рис. 42. Пример: передача списка данных для графика

Рис. 43. Пример: передача списка данных для графика (продолжение)

6.4. Вызов JavaScript из Python

Иногда нужно обновить интерфейс из Python — например, при поступлении новых данных с датчика.

Базовый пример

Рис. 44. Базовый пример

Рис. 45. Базовый пример (продолжение)

Важно. JS-функции, вызываемые из Python, должны быть глобальными (в window). Не используйте const или let — только function или window.functionName.