Introdução
O tópico de belas interfaces sempre foi e sempre será relevante, alguém usa C # para criar aplicações gráficas, alguém usa Java, alguém entra na selva do C ++ e alguém é pervertido com Python usando tkinter ou PyQT. Existem várias tecnologias que permitem combinar a beleza dos designs gráficos criados em HTML, CSS e JS com a flexibilidade na implementação da lógica do aplicativo que outra linguagem pode fornecer. Então, para quem escreve na melhor linguagem de programação Python, existe a oportunidade de escrever lindas interfaces em HTML, CSS e JS e anexar lógica a elas em Python.
Neste artigo, quero mostrar com um pequeno exemplo como criar um aplicativo desktop simples e bonito em HTML, CSS, JS e Python. Usaremos o EEL como uma biblioteca para conectar todos os componentes.
Instalação
Vou fazer uma reserva de que estou trabalhando no Windows 10 x64.
Para começar, instalaremos a própria biblioteca executando um comando simples: Depois de instalar apenas uma biblioteca, podemos iniciar nossa jornada.
pip install eel
Nosso aplicativo será semelhante a este:
A lógica da aplicação é muito simples: quando o botão "calcular" é pressionado, os valores no campo para inserir rublos são lidos, os dados recebidos são enviados para Python, onde a taxa de câmbio é calculada. Python retorna dados para nós e nós geramos por JS
Nós espalhamos em pastas
. “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” .
Você também pode usar cromo. Para fazer isso, baixe-o do site oficial . Descompacte-o em alguma pasta e escreva o seguinte código em nosso “main.py”:
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))
Resultado
Como podemos ver, não é tão difícil criar belos aplicativos de desktop usando Python como a linguagem para implementar a lógica principal. Você pode instalar qualquer biblioteca que desejar, implementar o código necessário usando Python e escrever interfaces bonitas em HTML, CSS e JS.
PS este é o meu primeiro artigo sobre Habr, escreva seus desejos, comentários e feedback, terei o maior prazer em ver qualquer comentário.