От датчика до интерфейса. Практическое руководство по созданию инженерных десктоп приложений на Python и web-технологиях
- -
- 100%
- +
Пример из практики. Лёгкий монитор датчиков
Рис. 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.