Eel es una biblioteca de Python para crear aplicaciones sencillas de GUI HTML/JS fuera de línea, con acceso completo a las capacidades y bibliotecas de Python. Eel aloja un servidor web local, luego le permite anotar funciones en Python para que puedan llamarse desde Javascript y viceversa.
Instalación
Para instalar este módulo, escriba el siguiente comando en la terminal.
pip install eel
Empezando
Primero, cree una carpeta de proyecto y cree otra carpeta llamada web debajo de ella. La carpeta web consta de todos los archivos del sitio web. Cree un archivo python main.py fuera de la carpeta web dentro de la carpeta del proyecto.
Esto debería crear una carpeta como la siguiente:
Archivos y carpetas
Para usar eel en el frontend javascript. Incluya el siguiente código en el archivo HTML:
<script type=”text/javascript” src=”/eel.js”></script>
Incluir esta biblioteca crea un objeto anguila que se puede usar para comunicarse con el lado de Python. Cualquier función en el código de Python que esté decorada con @eel.expose así:
@eel.expose
función de definición():
Cualquier función de python que se exponga usando eel.expose se puede llamar en javascript como se muestra a continuación:
eel.python_function_name()(devolución de llamada);
A continuación se muestra un ejemplo en el que python tiene una función random_python que devuelve un número aleatorio entre 1 y 100, Javascript llama y luego toma el número devuelto y cambia el HTML interno de un div.
El archivo HTML aquí se usa para crear una ventana que muestra todos los atributos requeridos, el archivo HTML llamará al archivo javascript para agregar dinamismo a la ventana creada. El código de Python se usa para hacer que todo esto funcione.
archivo html:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eel Example</title>
<style>
h1{
color: green;
text-align: center;
}
.random_number{
margin: 50px;
font-size: 150px;
text-align: center;
}
button{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Geeks for Geeks</h1>
<div class="random_number"></div>
<button>Get a Random number using Python</button>
<script type="text/javascript" src="../eel.js"></script>
<script src="./script.js"></script>
</body>
</html>
secuencia de comandos.js:
Javascript
// Onclick of the button
document.querySelector("button").onclick = function () {
// Call python's random_python function
eel.random_python()(function(number){
// Update the div with a random number returned by python
document.querySelector(".random_number").innerHTML = number;
})
}
El main.py contiene:
Python3
import eel
from random import randint
eel.init("web")
# Exposing the random_python function to javascript
@eel.expose
def random_python():
print("Random function running")
return randint(1,100)
# Start the index.html file
eel.start("index.html")
Producción :
Nota: Aquí, el javascript está llamando a la función python, cuando python devuelve los datos, cambia el texto div.
Publicación traducida automáticamente
Artículo escrito por deepanshu_rustagi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA