👙 ↘️ 😲 Python & amp; amp; ANGUILLE. Nous le faisons simplement en Python et magnifiquement en JS 🐭 ✍🏾 ♊️

introduction

Le sujet des belles interfaces a toujours été et sera toujours d'actualité, quelqu'un utilise C # pour créer des applications graphiques, quelqu'un utilise Java, quelqu'un entre dans la jungle du C ++ et quelqu'un est perverti avec Python en utilisant tkinter ou PyQT. Il existe différentes technologies qui vous permettent de combiner la beauté des conceptions graphiques créées en HTML, CSS et JS avec la flexibilité de mise en œuvre de la logique d'application qu'un autre langage peut fournir. Donc, pour ceux qui écrivent dans ~~le meilleur~~ langage de ~~programmation~~ Python, il est possible d'écrire de belles interfaces en HTML, CSS et JS et de leur attacher une logique en Python.

Dans cet article, je veux montrer avec un petit exemple comment créer une application de bureau simple et belle en HTML, CSS, JS et Python. Nous utiliserons EEL comme bibliothèque pour connecter tous les composants.

Installation

Je ferai une réservation que je travaille sur Windows 10 x64.

Pour commencer, nous installerons la bibliothèque elle-même en exécutant une commande simple: Après avoir installé une seule bibliothèque, nous pouvons commencer notre voyage.

pip install eel

Notre application ressemblera à ceci:

La logique de l'application est très simple: lorsque l'on appuie sur le bouton «calculer», les valeurs du champ de saisie des roubles sont lues, les données reçues sont envoyées à Python, où le taux de change est calculé. Python nous renvoie des données et nous les sortons via JS

Nous nous dispersons dans des dossiers

. “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” .

Vous pouvez également utiliser du chrome. Pour ce faire, téléchargez-le sur le site officiel . Décompressez-le dans un dossier et écrivez le code suivant dans notre «main.py»:

eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))

Sortir

Comme nous pouvons le voir, il n'est pas si difficile de créer de belles applications de bureau en utilisant Python comme langage d'implémentation de la logique principale. Vous pouvez installer toutes les bibliothèques de votre choix, implémenter le code requis en utilisant Python et écrire de belles interfaces en HTML, CSS et JS.

Lien vers le projet github

PS ceci est mon premier article sur Habr, écrivez vos souhaits, commentaires et retours, je serai heureux de voir tout commentaire.

Python & amp; amp; ANGUILLE. Nous le faisons simplement en Python et magnifiquement en JS