Вы чувствуете, что хотите поделиться скриптом Python со своим коллегой или другом, но прекратили это делать, потому что слишком сложно объяснить им, что им нужно установить Python и его библиотеки? Вдобавок ко всему, большинство пользователей Windows боятся делать что-то через CMD, они думают, что это взлом.🤣

Ну, это был мой случай в последнее время. Я хочу упростить или автоматизировать часть работы для некоторых коллег, но они не решаются использовать скрипты. Итак, я пошел спросить, не чувствуют ли они себя более комфортно, если это приложение содержится в одном файле. Судя по всему, идея им нравится. 💡 😊

01. Исследование

Итак, что мне нужно, чтобы сделать это приложение? Мне нужно создать графический интерфейс (внешняя часть), подключить внешнюю часть к моему скрипту на Python (внутренняя часть) и упаковать все это в один распространяемый файл (возможно, файл .exe для пользователя Windows)

Фронтенд: что использовать?

Я умею писать простые скрипты на Python, а в Python есть встроенный инструмент с графическим интерфейсом tkinter. Итак, я быстро изучил towardsdatascience.com о tkinter. Вот очень хорошая страница https://towardsdatascience.com/python-gui-app-in-no-time-ea7282e33024 о tkinter от Lazar Gugleta. 👏

Увидев tkinter, я быстро раскрыл его, потому что он выглядит некрасиво 🤮. Еще пара исследований в Google, и я остановился на Kivy и PyQt, объясненном на RealPython, еще одном из моих любимых ресурсов для новичков.

Угадайте, что меня ударили по ограниченной настройке и блокировке лицензирования 😖. В этот момент я собирался отказаться от плана. Пока я не увидел эту потрясающую идею на Reddit. Почему бы нам не использовать веб-технологии, такие как HTML+JS+CSS, для создания интерфейса и подключения его к серверу с помощью eel (python) lib, библиотеки, которая делает именно это. 👼 Мгновенно загорелась идеей, потому что недавно поставила перед собой цель выучить JavaScript и это отличное сочетание.

Итак, в основном мы создаем веб-приложение, что-то вроде flask, но затем на вашем локальном компьютере. Преимущество использования веб-технологий для внешнего интерфейса заключается в том, что мы можем создать все, что сможем найти в Интернете 😊. Волшебство здесь заключается в библиотеке угря, она позволит нам вызывать наш скрипт Python в веб-приложении. Оказывается, можно и наоборот. Вау, я взволнован. 😄

Раздача одним файлом, как?

Итак, последнее, что нам нужно выяснить, это как сделать это в один файл. Угадай, что?!! Угорь Либ также объяснил, как мы можем это сделать 😍. Привет ChrisKnott, ты потрясающий чувак. Судя по всему, есть еще одна замечательная библиотека под названием Pyinstaller.

Используя здесь одну строку кода, вы упаковываете все в один файл.

python -m eel [your_main_script] [your_web_folder]--onefile --noconsole

Посмотрите, что я сделал 😊

Итак, я быстро спроектировал внешний интерфейс и подключил его к сценарию, который ранее сделал для своего коллеги. Запустите однострочную команду выше и БУМ! Я получаю один файл .exe для отправки своему коллеге. Счастливый пользователь, счастливый разработчик 😇😊.

02. Учебник о том, как создать приложение с eel lib

Это короткое вступление, в основном повторяющее то, что уже объяснил ChristKnott, но с небольшим количеством визуальных эффектов.

Шаг 1. Подготовьте папки и файлы

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

  1. Итак, нам нужна корневая папка, называйте ее как хотите. Здесь мы помещаем наш файл сценария .py.
  2. Подпапка с именем web. Здесь мы храним наши файлы HTML, JS и CSS.

Шаг 2: Создайте свой интерфейс

Давайте сделаем приветственное приложение, где мы сможем проверить, как работает коннектор. В этом примере мы пишем свое имя. Если мы нажмем кнопку привет, JavaScript скажет привет + ваше имя. Что сделает питон, так это вызовет функцию JavaScript, чтобы получить ваше имя 😅. Это волшебство делается с помощью библиотеки угря.

HTML (приложение.html)

<!DOCTYPE html>
<html>
<head>
    <title>Greeting app!</title>
<!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
    <script type="text/javascript" src="/eel.js"></script>
    <!-- Include styling -->
    <link rel="stylesheet" href="./style.css" />
    <!-- Functions for JS to Py or vise versa-->
    <script type="text/javascript" src="./script.js"></script>
  </head>
<body>
    <div>
      <img class="icons" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="html">
      <input id="myName" type="text" placeholder="my name" />
    </div>
    <div>
      <img class="icons" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png" alt="javacsript">
      <input id="javascript" type="text" placeholder="Javascript" /><input type="button" value="Say hi" onclick="js_Sayhi()" /> </div>
    <div>
      <img class="icons" src="https://www.python.org/static/opengraph-icon-200x200.png" alt="html">
      <input id="python" type="text" placeholder="Python" /><input type="button" value="Say hi" onclick="py_Sayhi()"/>
    </div>
  </body>
</html>

CSS (стиль.css)

.icons {
  height: 32px;
  width: 32px;
}
div {
  display: flex;
  padding: 1em;
}
input[type="text"] {
  width: 80%;
  margin: 0.5em;
}

Используя приведенный выше HTML + CSS, вы получите результат, аналогичный приведенному выше графическому интерфейсу. Мы всегда должны ссылаться на файл eel.js в начале, чтобы можно было активировать библиотеку eel.

Шаг 3: напишите свою веб-логику

JavaScript (script.js)

eel.expose(getName()); //Expose function for Python
function getName() {
 const name= document.getElementById('myName').value
  
  return name;
}
function js_Sayhi() {
 document.getElementById('javascript').value = "Hi " + getName();
}
async function py_Sayhi(){
 let msg = await eel.py_Msg()(); // synchronous calling python script
 document.getElementById('python').value = "Hi " + msg;
}

Вы заметили, что мы используем eel.expose для предоставления функции JavaScript. Это волшебство eel lib, используя eel.expose (здесь # функция js), вы можете сделать его вызываемым в своем скрипте python. Круто прям 😁😎, всего одна строчка.

Кроме того, он поддерживает синхронный вызов вашего скрипта Python. См. функцию py_Sayhi();

Шаг 4: напишите свой файл Python (pyscript.py)

Ваш файл Python — это последний файл, который вам нужно сделать. Этот файл содержит ваши конфигурации библиотеки угря и код ваших скриптов python.

Конечно, нам нужно установить нашу библиотеку eel. Проверьте страницу ChristNott для последней команды. Это должно выглядеть так.

pip install eel

Теперь, когда библиотека установлена, наш файл JavaScript и файл Python могут найти друг друга 🥰, когда мы используем команды eel..

# Set web files folder and optionally specify which file types to check for eel.expose()
#   *Default allowed_extensions are: ['.js', '.html', '.txt', '.htm', '.xhtml']
eel.init('web', allowed_extensions=['.js', '.html'])
@eel.expose  #This is how you expose the py functions below for javascript.
def py_Msg():
    msg = eel.getName() + " I got your name from my javascript buddy";
    
    return msg
    
eel.start('main.html', size = (1280, 720))             # Eel command for starting app. size is for window sizing

Да, приведенный выше код Python — это все, что вам нужно. Вам просто нужно убедиться, что вы используете строку eel.#function и @eel.expose, чтобы соединить логику JavaScript с логикой python. 🥰

Вы видите, что JavaScript нужно добавить дополнительный код для вызова python. На самом деле это не всегда нужно. Я просто создаю это таким образом, поэтому, если у python произойдет сбой, JS все равно будет ждать сообщения 😋.

Шаг 5: запустите файл для тестирования

Запустите этот файл Python, и вы получите всплывающее окно браузера с вашим приложением. 👏Поздравляем, вы только что создали свое приложение.

Вы заметили, что это окно браузера. Да, это правильно! То, что делает угорь, — это магия браузера, подробнее можно прочитать на странице ChristNott.

Шаг 6: упакуйте это в один файл

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

pip install PyInstaller

После этого откройте свой терминал в той же папке, где находится ваш файл python. В этом случае мы находимся в папке с именем my app. Когда вы это сделаете, запустите эту команду, и Pyinstaller скоро создаст для вас отличный файл .exe.

python -m eel pyscript.py web --onefile --noconsole

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

Этот файл .exe — это все, что вам нужно для запуска приложения. Каждая библиотека, питон и магия находятся в одном файле.

Ретроспектива

Я узнал, что можно сделать красивый графический интерфейс и не ограничиваться такими опциями, как PyQt и Kivy. Возможно, в будущем появятся лучшие инструменты. Но посмотрите, как веб-приложения развиваются в отрасли и как PWA становятся чем-то особенным. Я только вижу, что этот способ создания приложений станет более популярным среди таких любителей, как я. Буду ли я делать корпоративное приложение с таким подходом? Я не думаю, что сделаю это в первую очередь, но мне нужно будет провести более тщательное исследование во время запроса. Всегда проводите исследования 😉.

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

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