Programación SPA con Python: Desarrollo de aplicaciones de una sola página
Introducción
Las aplicaciones de una sola página (SPA) son un tipo de aplicación web que carga todo su contenido en una sola página. Esto significa que el usuario no tiene que volver a cargar la página para ver nuevas actualizaciones o contenido. Las SPA son cada vez más populares, ya que ofrecen una experiencia de usuario más fluida y receptiva.
En este tutorial, aprenderemos a crear una SPA con Python. Usaremos el framework Flask para el back-end y el framework PyScript para el front-end.
Requisitos previos
Para seguir este tutorial, necesitarás los siguientes conocimientos y habilidades:
- Conocimientos básicos de Python
- Conocimientos básicos de HTML, CSS y JavaScript
Instalando los requisitos
Para instalar los requisitos, ejecuta los siguientes comandos en la terminal:
pip install flask
pip install pyscript
Creando el proyecto
Para crear el proyecto, crea una nueva carpeta y crea un archivo app.py en ella.
mkdir my_spa
cd my_spa
touch app.py
Creando el back-end
El back-end de nuestra SPA será un simple servidor web que servirá el contenido de nuestra aplicación.
Agrega el siguiente código a app.py:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def index():
return "Hello, world!"
if __name__ == "__main__":
app.run(debug=True)
Este código creará una aplicación Flask con una ruta raíz que devuelve el texto «Hello, world!».
Creando el front-end
El front-end de nuestra SPA será una simple aplicación web que usa PyScript para renderizar el contenido.
Agrega el siguiente código a index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My SPA</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Este código creará una página web simple con un encabezado que dice «Hello, world!».
Ejecutando la aplicación
Para ejecutar la aplicación, ejecuta el siguiente comando en la terminal:
python app.py
Esto abrirá un servidor web en el puerto 5000. Puedes acceder a la aplicación en http://localhost:5000.
Añadiendo funcionalidad
Ahora que tenemos una SPA básica, podemos empezar a añadir funcionalidad. Por ejemplo, podemos añadir una función que muestre una lista de elementos.
Agrega el siguiente código a app.py:
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
items = ["Item 1", "Item 2", "Item 3"]
return render_template("index.html", items=items)
if __name__ == "__main__":
app.run(debug=True)
Este código añade una nueva ruta raíz que devuelve una plantilla HTML con una lista de elementos.
Agrega el siguiente código a index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My SPA</title>
</head>
<body>
<h1>Hello, world!</h1>
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</body>
</html>
Este código añade una lista de elementos a la página web.
Ahora, cuando accedas a la aplicación en http://localhost:5000, verás una lista de elementos.
Conclusión
En este tutorial, aprendimos a crear una SPA con Python. Usamos el framework Flask para el back-end y el framework PyScript para el front-end.
Para obtener más información sobre el desarrollo de SPA con Python, consulta los siguientes recursos:
- Documentación de Flask: https://flask.palletsprojects.com/en/2.1.x/
- [Documentación de PyScript](https://py
