Crea interfaces fácil y rápido con Python (Eel)
Introducción
Python es un lenguaje de programación cuya popularidad ha ido aumentando en los últimos años, a pesar de ser pensado originalmente como un lenguaje de puro backend ha incentivado a adaptar distintas bibliotecas como QT para poder ser utilizados con Python.
A lo largo de los años he probado distintas bibliotecas para añadirle interfaces a mis programas en python desde QT, Tkinder hasta PyGame! He notado que si bien hay mucha documentación y el potencial para utilizar estas bibliotecas es tu imaginación, no todos tenemos el tiempo para dedicarle tiempo a que se vean bien y realmente parezcan interfaces competitivas.
Eel es una herramienta que nos permitirá realizar interfaces gráficas al estilo Electron pero de una forma sencilla, eso si, necesitaremos de un navegador web como Chrome, Edge, firefox, etc., esto por que eel monta un pequeño servicio web en el que javascript y python se comunican entre si a través de un websocket, suena complicado, pero, es más sencillo de lo que piensas, si ya tienes experiencia realizando paginas web esto te será muy familiar.
Con este tutorial veremos como hacer una interfaz sencilla pero utilizando bootstrap como base para darle una mejor presentación que si lo hiciéramos a mano.
Requisitos
- Navegador Web
- Python >=3.6
Paso a paso
Para este tutorial crearemos un proyecto para obtener información de animes provenientes de la pagina MyAnimeList utilizando la API Jikan.
Creando el proyecto
Para darle estructura al proyecto, vamos a utilizar la siguiente estructura, para la carpeta de bootstrap pueden descargar aquí, para el archivo eel.js lo descargan aquí Los archivos de init.py, main.py y MyAnimeList.py quedaran en blanco por el momento.

Instalando modulos
Para poder ejecutar el proyecto necesitamos instalar eel y jikan, lo hacemos de la siguiente forma:
$ pip install eel
$ pip install jikanpy
Obteniendo la información
En este apartado no voy a explicar mucho ya que no es el objetivo de este tutorial, con el siguiente script podremos obtener la información de un anime proveniente de la pagina MyAnimeList:
La información devuelta es un diccionario con todos los datos:
Creando la pagina de inicio
Para la pagina de inicio de momento pondremos una estructura simple en HTML, crearemos un archivo llamado index.html en la carpeta gui con los siguientes datos:
Para el archivo main.py añadiremos el siguiente código:
import eel #Importamos la biblioteca eel
def main():
eel.init('gui') # Carpeta de la interfaz
eel.start('index.html') # Archivo con la inferfaz
if name == 'main':
main()
Después de hacer esto podemos ejecutar nuestro programa usando python main.py
y se verá algo como esto:
Añadiendo funcionalidad
Exponiendo javascript a python
Para la funcionalidad modificaremos la función que creamos en javascript, pero además necesitamos cargar el archivo eel.js.
Añadimos la siguiente linea a nuestro código HTML:
<script src="./eel.js"></script>
Modificamos nuestras funciones con el siguiente código:
// BUSCAR ANIME
function sendData() {
alert("Buscando el anime: "+document.getElementById('anime_name').value);
return false; // Detenemos el envio del form
}
// MOSTRAR DATOS ANIME
function mostrar_datos(anime){
var anime_data = JSON.stringify(anime);
console.log(anime_data);
}
eel.expose(mostrar_datos); // Exponemos esta funcion a Python
La linea importante aquí es eel.expose(mostrar_datos);
ya que esta linea lo que hace es exponer una función que definimos previamente (mostrar_datos) a Python, es decir, Python podrá acceder "directamente" a la función desde el backend.
Exponiendo python a javascript
Ahora, para que javascript pueda acceder a alguna función que definamos es necesario añadir un decorador el cual es @eel.expose
La funcion que definimos para que podamos llamar a la clase que definimos en python desde javascript es la siguiente.
@eel.expose #Exponemos la funcion a javascript
def buscar_anime(nombre):
anime = MAL.get_anime(nombre)
eel.mostrar_datos(anime) # accedemos a javascript desde python
return
Notemos que el resultado de get_anime lo guardamos en la variable anime, para poder enviarla de regreso a javascript usamos eel.mostrar_datos(anime)
Llamando python desde javascript
Por ultimo así como en python usamos eel para llamar a javascript, haremos de forma análoga para llamar a python, modificaremos la funcion de send_data para que cuando enviemos el formulario mandemos a llamar a la funcion que busca el anime.
// BUSCAR ANIME
function sendData() {
anime = document.getElementById('anime_name').value;
eel.buscar_anime(anime);
return false; // Detenemos el envio del form
}
Mostrando datos
Ya que terminamos de unir las piezas podemos ver que cuando buscamos un anime el resultado que arroja python se imprime en la consola:
// MOSTRAR DATOS ANIME
function mostrar_datos(anime){
console.log(anime);
$("#titulo").html(anime["title"]);
$("#episodios").html("Episodios: "+anime["episodes"]);
$("#al_aire").html("Estatus: "+anime["airing"]);
$("#score").html("Calificación: "+anime["score"]);
$("#sinpopsis").html("Sinpopsis: "+anime["synopsis"]);
$("#generos").html("Generos: "+anime["genres"]);
$("#trailer").attr('src',anime["trailer"]);
$(".collapse").collapse('show');
}
La pagina de prueba quedaría de la siguiente manera:
Aquí un gif de como quedaría:

Conclusión
Como pudimos ver en este tutorial integrar eel es relativamente sencillo, podemos crear interfaces web y comunicar javascript con python de una forma casi transparente, además de que no tenemos que batallar con frameworks más complicados, eel nos provee varias opciones para configurar y crear nuestras interfaces. Como podemos ver Eel es muy amigable para las personas que apenas empiezan, pero también para quienes ya tienen experiencia web y quieran hacer interfaces modernas. Con eel puedes importar todas tus bibliotecas, estilos y templates de tu preferencia, hay muchísimos ejemplos en Internet.
El ejemplo final lo puedes ver en el siguiente gif:

Apendice
- Proyecto que se realizo aquí - https://github.com/JackCloudman/MyAnimeListEel
- Biblioteca Eel - https://github.com/samuelhwilliams/Eel
- Biblioteca HTML5 Bootstrap - https://getbootstrap.com/