Соединяем Python и Electron/Node.js в приложении для десктопа
На простых примерах рассказываем о возможном способе интеграции Python с Node.js и Electron в современное приложение. Обсудить Перевод публикуется с сокращениями, автор оригинала Ahmed Bouchefra. Что понадобится *** Это руководство предназначено для разработчиков на Python, которые хотят создавать настольные приложения с графическим интерфейсом. Мы представим Electron – отличный инструмент, использующий современные веб-технологии: HTML, CSS, JavaScript и связанные с ними фреймворки. Мы также расскажем о различных способах подключения Python и Electron, например, Вам понадобится: Примечание Если вы не знакомы с Node.js, прочитайте наше руководство для начинающих. Шаг 1. Настраиваем среду разработки В этом разделе мы настроим среду разработки для запуска примеров. Существуют различные способы для установки данных инструментов: Самое простое – зайти на официальный сайт и загрузить установочный файл, а затем выполнить инструкции по установке Node.js и npm в вашей ОС. Разработка на Electron – это, как ни странно, разработка на Node.js. Поскольку Node.js уже должен быть установлен в предыдущем пункте, переходите к настройке, иначе почитайте в официальном хелпе о начальной настройке для разных ОС. Из директории проекта запустите команду: Процесс установки содержит различные вариации – изучите их в специальном разделе. Чтобы проверить, что в вашей системе установлен Python 3, откройте терминал и выполните следующую команду: А теперь давайте создадим виртуальную среду. Виртуальная среда позволяет создать окружение для изоляции зависимостей текущего проекта. Это позволит вам избежать конфликтов между пакетами разных версий. В Python 3 для этих целей можно использовать модуль Далее необходимо активировать среду с помощью следующей команды: В Windows виртуальную среду можно активировать с помощью сценария Все готово и можно устанавливать пакеты. Шаг 2. Создаём Node.js-приложение Начнём с создания папки для проекта и файла Команда Вы можете вручную настроить значения в этом файле на свое усмотрение. Далее создайте внутри рабочей директории два файла: Каким-то образом нам понадобится связать между собой Electron и Python. В компьютерных науках inter-process communication или interprocess communication (IPC) относится к механизмам, которые предоставляет ОС, чтобы позволить процессам управлять общими данными. Как правило, приложения могут использовать IPC, классифицированные как клиенты и серверы, где клиент запрашивает данные, а сервер отвечает на запросы. IPC относится к набору механизмов, поддерживаемых ОС, которые позволяют различным локальным или удаленным процессам взаимодействовать друг с другом. Например, в нашем случае мы хотим разрешить связь между процессами Electron и Python. Рассмотрим, как этого достичь. Node.js предоставляет модуль child_process, позволяющий создавать дочерние процессы. Давайте используем его, чтобы породить процесс Python и запустить простой скрипт calc.py. Мы будем использовать simplecalculator для выполнения простых вычислений в Python, поэтому, сначала запустим следующую команду для его установки: Внутри папки проекта создайте папку py, а внутри создайте файл calc.py: Откройте calc.py и добавьте следующий код, который выполняет вычисление и выводит результат в стандартный вывод: Затем создайте renderer.js и добавьте туда следующий код для создания процесса Python и выполнения скрипта py/calc.py: Затем откройте index.html и обновите его следующим образом: Теперь посмотрим, как использовать python-shell. Python-shell – это npm-пакет, обеспечивающий простой способ запуска скриптов Python из Node.js с межпроцессным взаимодействием и обработкой ошибок. Вы можете также использовать python-shell для: Перейдите в терминал и выполните следующую команду для установки python-shell: Затем откройте renderer.js и перепишите функцию Теперь рассмотрим другой способ создания связи между Python и Electron с помощью сервера HTTP. В терминале выполните следующую команду для установки Flask и Flask-Cors: Затем в папке py вашего проекта создайте файл server.py и добавьте следующий код для запуска сервера Flask, который выполняет вычисление и возвращает результат в виде HTTP-ответа: Резюме В этом руководстве мы представили Electron для Python-разработчиков, который может быть отличным и простым инструментом для создания GUI с помощью современных веб-технологий, основанных на HTML, CSS и JavaScript. На понятном примере с калькулятором были рассмотрены различные способы подключения Python и Electron: child_process, python-shell и сервер HTTP (Flask).
, child_process
и сервер python-shell
HTTP (Flask)
.Установка Node.js и npm
Настройка Electron
npm install --save-dev electron
Настройка виртуальной среды Python
$ python --version Python 3.7.0
Создание виртуальной среды
venv
. Перейдите в терминал и выполните следующую команду:
$ python -m venv env
$ source env/bin/activate
Scriptsactivate.bat:
$ envScriptsactivate.bat
package.json
внутри нее с помощью следующих команд:
$ mkdir python-nodejs-example $ cd python-nodejs-example $ npm init -y
init
сгенерирует файл package.json
со следующим содержанием:
{ "name": "python-nodejs-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
index.html
и index.js
:
$ touch index.js $ touch index.html
Связываем Electron и Python
Создание процесса Python с помощью child_process
sudo pip install simplecalculator
$ mkdir py & cd py $ touch calc.py
from sys import argv from calculator.simple import SimpleCalculator def calc(text): try: c = SimpleCalculator() c.run(text) return c.log[-1] except Exception as e: print(e) return 0.0 if __name__ == '__main__': print(calc(argv[1]))
function sendToPython() { var python = require('child_process').spawn('python', ['./py/calc.py', input.value]); python.stdout.on('data', function (data) { console.log("Python response: ", data.toString('utf8')); result.textContent = data.toString('utf8'); }); python.stderr.on('data', (data) => { console.error(`stderr: ${data}`); }); python.on('close', (code) => { console.log(`child process exited with code ${code}`); }); } btn.addEventListener('click', () => { sendToPython(); }); btn.dispatchEvent(new Event('click'));
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Calling Python from Electron!</title> </head> <body> <h1>Simple Python Calculator!</h1> <p>Input something like <code>1 + 1</code>.</p> <input id="input" value="1 + 1"></input> <input id="btn" type="button" value="Send to Python!"></input> </br> Got <span id="result"></span> <script src="./renderer.js"></script> </body> </html>
Использование python-shell
$ npm install --save python-shell
sendToPython()
следующим образом:
function sendToPython() { var { PythonShell } = require('python-shell'); let options = { mode: 'text', args: [input.value] }; PythonShell.run('./py/calc.py', options, function (err, results) { if (err) throw err; // результаты - это массив, состоящий из сообщений, собранных во время выполнения console.log('results: ', results); result.textContent = results[0]; }); }
Использование связи клиент-сервер
$ pip install flask $ pip install Flask-Cors
import sys from flask import Flask from flask_cors import cross_origin from calculator.simple import SimpleCalculator def calcOp(text): try: c = SimpleCalculator() c.run(text) return c.log[-1] except Exception as e: print(e) return 0.0 app = Flask(__name__) @app.route("/<input>") @cross_origin() def calc(input): return calcOp(input) if __name__ == "__main__": app.run(host='127.0.0.1', port=5001) let input = document.querySelector('#input') let result = document.querySelector('#result') let btn = document.querySelector('#btn') function sendToPython() { var { PythonShell } = require('python-shell'); let options = { mode: 'text' }; PythonShell.run('./py/server.py', options, function (err, results) { if (err) throw err; // результаты - это массив, состоящий из сообщений, собранных во время выполнения console.log('response: ', results); }); } function onclick(){ fetch(`http://127.0.0.1:5001/${input.value}`).then((data)=>{ return data.text(); }).then((text)=>{ console.log("data: ", text); result.textContent = text; }).catch(e=>{ console.log(e); }) } sendToPython(); btn.addEventListener('click', () => { onclick(); }); btn.dispatchEvent(new Event('click'))
- 4 views
- 0 Comment
Свежие комментарии