Нави Тулаг – От датчика до интерфейса. Практическое руководство по созданию инженерных десктоп приложений на Python и web-технологиях (страница 12)

Забыли @eel.expose

Добавьте декоратор в Python

Две пары скобок?

Синтаксис Eel

eel.func()() — это нормально!

Порт занят

Другой Eel запущен

Закройте предыдущий процесс или укажите port=8081

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

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

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

Вот как это будет выглядеть в 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.4. Вызов JavaScript из Python

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

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