Introducción
El tema de las interfaces hermosas siempre ha sido y siempre será relevante, alguien usa C # para crear aplicaciones gráficas, alguien usa Java, alguien se adentra en la jungla de C ++ y alguien se pervierte con Python usando tkinter o PyQT. Existen varias tecnologías que le permiten combinar la belleza de los diseños gráficos creados en HTML, CSS y JS con la flexibilidad para implementar la lógica de la aplicación que otro lenguaje puede proporcionar. Entonces, para aquellos que escriben en el mejor lenguaje de programación Python, existe la oportunidad de escribir hermosas interfaces en HTML, CSS y JS y adjuntarles lógica en Python.
En este artículo quiero mostrar con un pequeño ejemplo cómo crear una aplicación de escritorio simple y hermosa en HTML, CSS, JS y Python. Usaremos EEL como biblioteca para conectar todos los componentes.
Instalación
Haré una reserva de que estoy trabajando en Windows 10 x64.
Para empezar, instalaremos la propia biblioteca ejecutando un comando simple: Después de instalar solo una biblioteca, podemos comenzar nuestro viaje.
pip install eel
Nuestra aplicación se verá así:
La lógica de la aplicación es muy simple: cuando se presiona el botón "calcular", se leen los valores en el campo para ingresar rublos, los datos recibidos se envían a Python, donde se calcula el tipo de cambio. Python nos devuelve datos y los mostramos a través de JS
Nos dispersamos en carpetas
. “front” , . “back” python. middle, , JS ( ). main.py, .
Python
(-, , , ). python CurrencyConverter:
pip install currencyconverter
python. , , , . “convert.py” “back” :
from currency_converter import CurrencyConverter
converter = CurrencyConverter()
def convert_value(value: float, from_cur: str, to_cur: str):
return converter.convert(value, from_cur, to_cur)
“middle” “mid_convert.py” :
from back.convert import convert_value
import eel
@eel.expose
def convert_value_py(value:float, from_cur:str, to_cur:str)->float:
return convert_value(value, from_cur, to_cur)
? “mid_convert.py” JS Python. @eel.expose , , , JS. , , JS, @eel.expose. , , , “convert_value” “convert.py”. .
Python JS
Python JS. , HTML, CSS ( vue.js, react.js , ). eel JS:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="/eel.js"></script>
</head>
“”. , .
async function create_cur_for_rub (){
//
let value_rub = parseFloat(document.getElementById("rub-input").value);
// input',
let list_curs = document.getElementById("list-cur").children;
for (let div_cur of list_curs) {
//
let name_cur = div_cur.getElementsByTagName("span")[0].textContent;
// Python
let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();
//
div_cur.getElementsByTagName("input")[0].value = value_cur;
}
}
document.getElementById("btn-sum").onclick = create_cur_for_rub;
“let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();”. , , , Python . eel (), .
, .
, .
“main.py”. eel , “min_convert.py” , , eel.expose:
import eel
from middle.mid_convert import *
eel , front-end . eel.init(args). eel.start(args):
if __name__ == '__main__':
eel.init('front')
eel.start('index.html', mode="chrome", size=(760, 760))
eel.start ( . eel). “mode”. , , . , “default”, . google chrome, “mode=chrome” .
También puedes usar cromo. Para hacer esto, descárguelo del sitio web oficial . Descomprímalo en alguna carpeta y escriba el siguiente código en nuestro "main.py":
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))
Producción
Como podemos ver, no es tan difícil crear hermosas aplicaciones de escritorio usando Python como lenguaje para implementar la lógica principal. Puede instalar las bibliotecas que desee, implementar el código requerido usando Python y escribir hermosas interfaces en HTML, CSS y JS.
PD: este es mi primer artículo sobre Habr, escriba sus deseos, comentarios y sugerencias, estaré encantado de ver cualquier comentario.