Aprende a ejecutar un código Python en un archivo HTML
Aunque se utiliza ampliamente en proyectos de automatización de procesos y ciencia de datos, el lenguaje Python se utiliza en una variedad de soluciones. A través de bibliotecas y módulos, es posible crear aplicaciones para diferentes propósitos.
En este tutorial aprenderemos un poco más sobre Pyscript, una herramienta que permite la inserción de códigos Python dentro de archivos HTML, y también cómo realizar este tipo de operaciones a través del micro-framework Flask.
Especificaciones
Este proyecto se creará con algunas especificaciones:
- Sistema operativo Windows;
- Python versión 3.11.2, que puede descargarse de este link;
- Pycharm, que puede descargarse de este link;
- Pyscript;
- Versión 2.2.3 de Flask.
Creando un ambiente virtual
Para instalar las dependencias necesarias para el desarrollo de la aplicación localmente, es necesario aislar el entorno, creando un virtualenv. Escribe cmd en el campo Buscar de la barra de tareas. Posteriormente, con el manejador de paquetes PIP, inserta el comando pip install virtualenv.
Para crear el ambiente virtual, digita virtualenv <~nome_da_virtualenv~> y haz la activación con <~nome_da_virtualenv~>/Scripts/Activate. Para desactivar, digita deactivate.
Pyscript
Hay algunas formas de integrar HTML con Python y una de las más recientes es con la herramienta Pyscript. Pyscript, a diferencia de frameworks y bibliotecas de Python, no necesita instalarse. Fue desarrollado para incorporarse directamente en el código HTML. Accesa a su documentación en este link.
Después de crear el entorno virtual, acceda a PyCharm y abra el directorio principal. Ahora crea un archivo llamado index.html. Será en este archivo donde realizaremos los cambios para ejecutar el código.
En el siguiente extracto, importamos Pyscript desde las tags <link> y <script> dentro del tag <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejecutando código Python con HTML</title>
<link rel="stylesheet" href="<https://pyscript.net/latest/pyscript.css>" />
<script defer src="<https://pyscript.net/latest/pyscript.js>"></script>
</head>
Para insertar el código Python, necesitaremos agregar un nuevo tag, llamado <py-script>. Será dentro de él donde insertaremos el código Python. En el ejemplo, agregaremos dentro del tag un print que mostrará la frase “Hello, World!”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejecutando código Python con HTML</title>
<link rel="stylesheet" href="<https://pyscript.net/latest/pyscript.css>" />
<script defer src="<https://pyscript.net/latest/pyscript.js>"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<py-script>print("Hello, World!")</py-script>
</body>
</html>
En la pantalla, con un breve estilo creado en CSS (tenga en cuenta que el archivo CSS se importó dentro del tag <head>), el resultado quedará así:
A pesar de ser una tecnología muy prometedora, todavía tiene algunas limitaciones, como el tiempo de carga, que sigue siendo razonablemente largo. Sin embargo, tiene una serie de características, como el import de módulos externos y realizar operaciones un poco más complejas dentro del código.
Flask
Otra forma de utilizar HTML y Python es aplicando el micro-framework Flask. Flask es un módulo que, a pesar de facilitar el desarrollo de soluciones web, cuenta con una serie de características que permiten la creación de una variedad de aplicaciones. Para instalar Flask en nuestro proyecto, usaremos el administrador de paquetes PIP, escribiendo en la terminal pip install flask.
En el directorio creado desde el entorno virtual, cree un archivo llamado app.py. Será en este archivo donde insertaremos el código Python. Luego crea una carpeta llamada templates y un archivo llamado index.html. El fragmento HTML se puede insertar en el código Python, pero es regla de Flask crear directorios específicos.
En el archivo app.py, haz el import de Flask y de render_template. El render_template carga el archivo HTML, mostrando los datos en el navegador.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
nome = "Fernanda"
return render_template("index.html", nome=nome)
if __name__ == "__main__":
app.run(debug=True)
Para detallar, dividiremos el código em partes:
app = Flask(__name__)
En el fragmento arriba, creamos una instancia de Flask con el argumento (__name__), una variable Python necesaria para ese procedimento.
Posteriormente, creamos la ruta ‘/’:
@app.route("/")
A partir de esto, definiremos una función la cual se encargará de ejecutar alguna acción cuando se acceda a la ruta previamente definida.
def index():
nome = "Fernanda"
return render_template("index.html", nome=nome)
Dentro de esta función agregaremos la variable de nombre que almacenará el valor "Fernanda". A continuación, regresaremos el módulo render_template, que cargará el template index.html, así como el nombre definido dentro de la función.
Para que podamos ejecutar el código y ver todas las creaciones, debemos agregar el siguiente fragmento:
if __name__ == "__main__":
app.run(debug=True)
Con if__name__ == '__main__':, la aplicación, es decir, la app solo se ejecutará cuando se ejecute el archivo en cuestión. Si está utilizando Pycharm, esta acción se producirá cuando haga clic en la pequeña flecha verde en la esquina superior derecha de la pantalla. Si el archivo es importado por otro archivo, el fragmento no se ejecutará. Para acelerar el desarrollo, insertaremos el código debug=True, que define que, al guardarlo, los cambios deben mostrarse en pantalla, sin necesidad de pausar el código y ejecutarlo nuevamente.
Aunque creamos las líneas de código anteriores, no funcionarán si no agregamos la información necesaria en el archivo index.html. De esta manera, insertaremos el siguiente extracto:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<h1>Olá, {{ nome }}! Sé bienvenido (a)!</h1>
</body>
</html>
Esta es una estructura simple de HTML, contentiva de las tags <!DOCTYPE html>, <html>, <head> y <body>. Ten en cuenta que, dentro <body>, agregamos una tag <h1> que posee un texto y también el nombre de una variable llamada nombre dentro de claves. El contenido que se mostrará dentro de esta variable es precisamente el nombre definido en la función index(), creada en el archivo app.py.
Al ejecutar el archivo app.py, debería aparecer lo siguiente:
Si cambiamos el valor presente en la variable, fíjate que el nombre “Fernanda” también se modificará:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
nombre = "Amora"
return render_template("index.html", nome=nome)
if __name__ == "__main__":
app.run(debug=True)
Este es un ejemplo muy simple de integración entre Python y HTML, pero a partir de él es posible insertar otros elementos, como entradas, que recibirán información que se podrá mostrar en pantalla. Además de Flask, es posible lograr un resultado muy similar con Django, un framework Python más completo para desarrollo web.
¡Éxito!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.