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

www/

Eel ищет здесь интерфейс. Отдельная папка = порядок.

main.py

Логика приложения. Не смешивайте с фронтендом.

assets/

Иконки, логотипы. Легко найти при сборке.

data/

Данные, которые создаёт приложение (логи, CSV).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Режим

Описание

Когда использовать

mode='chrome'

Открывает в Google Chrome

Кроссплатформенно, если Chrome установлен

mode='edge'

Открывает в Microsoft Edge

Windows 10/11 (рекомендуется)

mode='firefox'

Открывает в Firefox

Если пользователь предпочитает Firefox

mode='default'

Системный браузер по умолчанию

Максимальная совместимость

mode=False

Не открывать браузер (только сервер)

Для отладки или веб-доступа

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

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

ПРОБЛЕМА

ПРИЧИНА

РЕШЕНИЕ

Белый экран

Неправильный путь к www/

Проверьте eel.init('www')

eel is not defined

Не подключён /eel.js

Добавьте <script src="/eel.js"></script> в HTML

Функция не вызывается