Async Template con Flask

Este es un ejemplo que utiliza Flask para crear un dashboard interactivo y asíncrono. La aplicación simula una búsqueda de usuarios (con retardo asíncrono) y muestra el resultado en una tabla, todo ello sin recargar la página ni perder la sesión del usuario.

Estructura del Proyecto

.
├── main.py
├── requirements.txt
└── templates
    ├── base.html
    └── index.html

• main.py: Contiene la aplicación Flask, la definición de rutas y la lógica para generar datos de usuarios. Incluye un endpoint asíncrono (/heavy-api) que simula una operación de 100 segundos.
• requirements.txt: Archivo que lista las dependencias necesarias para ejecutar el proyecto.
• templates/: Carpeta que contiene las plantillas HTML usadas para renderizar el dashboard.
  • base.html: Plantilla base que define la estructura general del HTML y carga Bootstrap 5.
  • index.html: Vista principal que extiende base.html y contiene el código JavaScript para invocar el endpoint asíncrono sin recargar la página.

Requisitos

• Python 3.7 o superior.
• Flask 3.x o superior.
  Importante: Para utilizar vistas asíncronas, se recomienda instalar Flask con el extra async. Por ejemplo:

  pip install "flask[async]"
  

Instalación

1. Clona el repositorio o descarga el código fuente.

2. Navega al directorio del proyecto:

   cd ruta/al/directorio-del-proyecto
   

3. opcional/recomendable - crear ambiente virtual

   pyenv virtualenv 3.12.0 flask-async
   

4. Instala las dependencias:

   pip install -r requirements.txt
   

Uso

Para iniciar el servidor de desarrollo, ejecuta:

python main.py

El servidor se levantará en http://localhost:5000. Accede a esa URL en tu navegador para visualizar el dashboard.

Funcionalidades

• Dashboard Interactivo:
  La vista principal muestra un botón ("Buscar usuarios de categoría X") que, al hacer clic, activa una petición asíncrona para obtener usuarios.

• Barra de Carga y Feedback Visual:
  Al presionar el botón, se muestra un mensaje y un spinner de carga (usando Bootstrap 5) que indican que se está procesando la solicitud.

• Operación Asíncrona:
  La ruta /heavy-api simula una tarea de larga duración (100 segundos) con await asyncio.sleep(100), y una vez completada, retorna un JSON con una lista de usuarios generados dinámicamente.

• Actualización Dinámica del Contenido:
  La respuesta del endpoint actualiza el contenido de la página (sin recargarla) mostrando una tabla con los usuarios o un mensaje en caso de que no se encuentren resultados.

Descripción de los Endpoints

• GET /
  Renderiza la plantilla index.html, mostrando el dashboard principal.

• GET /heavy-api
  Endpoint asíncrono que simula un proceso lento (100 segundos) y retorna un JSON con un listado de 10 usuarios generados dinámicamente por la función generar_usuarios(n).

Notas Adicionales

• La función generar_usuarios(n) en main.py es una función de ejemplo para generar datos ficticios.
• La plantilla index.html utiliza JavaScript y fetch para llamar al endpoint /heavy-api y actualizar el contenido de la página sin recarga, preservando así la sesión.
• Se utiliza Bootstrap 5 (vía CDN) para estilizar los componentes visuales como el spinner de carga y la tabla.

Licencia

Este proyecto es de código abierto y se distribuye bajo la licencia MIT. Puedes modificarlo y adaptarlo a tus necesidades.

Autor

Walter Medina