How To Create Modern GUI In Python | Python Eel Tutorial

Summary

Dans cette vidéo, Vishesh Dvivedi nous guide à travers la création d'une interface utilisateur graphique moderne en Python en utilisant la bibliothèque 'eel'. Il commence par expliquer ce qu'est eel, comment il fonctionne, et comment il permet de mélanger HTML, CSS et JavaScript avec Python pour développer des applications de bureau attrayantes. Le tutoriel couvre l'installation de eel, la configuration de l'environnement de développement, et la création d'une application de liste de tâches (todo list) pas à pas. Enfin, Vishesh démontre l'application finale en action, offrant des conseils et des astuces tout au long du chemin.

Takeaways

• 🐍 La bibliothèque 'eel' permet de créer des interfaces utilisateur graphiques modernes en Python, en utilisant HTML et CSS pour le design.
• 🎨 HTML et CSS offrent des capacités étendues pour créer des interfaces utilisateur attrayantes, surpassant d'autres frameworks ou technologies.
• 🔧 'eel' fonctionne de manière similaire à Electron JS, en exécutant un serveur web local qui expose des fonctions Python au code JavaScript et vice versa.
• 💻 Les développeurs peuvent facilement intégrer l'interface utilisateur en HTML/CSS avec les fonctionnalités de l'application écrites en Python, en utilisant JavaScript pour appeler des fonctions Python.
• 🛠️ Pour démarrer avec 'eel', il suffit d'installer le module via pip avec la commande 'pip install eel'.
• 📁 La structure du projet comprend un fichier 'main.py' pour le code Python, et un dossier 'web' contenant les fichiers HTML, CSS, et JS.
• 🎲 Bootstrap et jQuery peuvent être utilisés pour améliorer l'interface utilisateur avec des designs attractifs et des animations.
• ⚙️ Le développement avec 'eel' implique l'utilisation de décorateurs '@eel.expose' pour rendre les fonctions Python accessibles au JavaScript.
• 📊 Un exemple d'application de liste de tâches (todo list) démontre comment intégrer des fonctionnalités comme la création, l'affichage, et la suppression de tâches.
• 🔄 Les données de l'application peuvent être stockées dans un fichier JSON, facilitant la persistance des données entre les sessions d'application.

Q & A

Qu'est-ce que la bibliothèque Eel en Python ?

Eel est une bibliothèque simple pour Python, similaire à Electron JS, qui permet de créer des interfaces utilisateur graphiques modernes en utilisant HTML et CSS. Elle fonctionne en exécutant un serveur web local qui expose des fonctions Python au code JavaScript et vice versa.

Pourquoi utiliser HTML et CSS pour créer des GUI en Python ?

HTML et CSS offrent d'énormes capacités aux concepteurs pour utiliser leur imagination et créer des interfaces utilisateur attrayantes. Aucun autre framework, technologie ou langage ne peut égaler HTML et CSS dans ses capacités pour la création de GUI.

Comment installer la bibliothèque Eel pour Python ?

Pour installer Eel, il suffit d'ouvrir le terminal de votre système ou de VSCode et de taper la commande `pip install eel`. Cette commande téléchargera et installera le module Eel dans votre système.

Quels fichiers sont nécessaires pour créer une application de bureau avec Eel ?

Pour créer une application avec Eel, vous avez besoin d'un fichier `main.py` pour le code Python, d'un dossier `web` contenant les fichiers HTML, CSS et JavaScript pour l'interface utilisateur, et de fichiers supplémentaires comme Bootstrap et jQuery pour améliorer l'UI.

Comment démarrer l'application de bureau avec Eel ?

Après avoir initialisé Eel avec le dossier contenant les fichiers web via `eel.init('web')`, vous démarrez l'application avec `eel.start('index.html')`, qui ouvre une fenêtre de navigateur Chrome pour afficher l'interface utilisateur.

Comment Eel permet-il l'interaction entre le code Python et JavaScript ?

Eel expose des fonctions Python au code JavaScript (et vice versa) en utilisant des décorateurs et des appels de fonction spéciaux, permettant ainsi aux développeurs de créer des fonctionnalités complexes et interactives entre le backend Python et le frontend HTML/CSS/JavaScript.

Quel est le rôle du fichier `eel.js` dans un projet Eel ?

Le fichier `eel.js` est généré automatiquement par Eel et doit être inclus dans le fichier HTML. Il est essentiel pour permettre l'appel de fonctions Python depuis le code JavaScript et vice versa, facilitant ainsi l'interaction entre le frontend et le backend.

Comment les données sont-elles gérées dans l'application de tâches à faire avec Eel ?

Les données des tâches à faire sont stockées dans un fichier JSON. Des fonctions Python sont utilisées pour lire, écrire, ajouter et supprimer des données dans ce fichier, permettant une persistance des données entre les sessions de l'application.

Comment peut-on appeler une fonction Python depuis JavaScript dans Eel ?

Pour appeler une fonction Python depuis JavaScript, utilisez la syntaxe `eel.nom_de_la_fonction_python(arguments)(fonction_de_rappel_js)`. Cela permet d'exécuter des fonctions Python et de gérer les résultats dans le code JavaScript.

Peut-on utiliser Eel pour des applications de production ?

Eel est principalement destiné à la création rapide de prototypes et d'applications de bureau légères avec des interfaces utilisateur modernes. Pour des applications de production complexes, d'autres solutions peuvent être plus appropriées en fonction des exigences de performance et de sécurité.