Esta es una aplicación de muestra para probar la extensión Turbo Flask que permite actualizar parte de la pagína web de manera asincrónica, sin necesidad de refrescar para visualizar los cambios.
Se puede obtener más información de Turbo Flask en el Github del Proyecto.
Importante destacar que Turbo Flask es un proyecto de Miguel Grinberg intengrando la biblioteca Turbo.js con Flask
Para este ejemplo utilizo como guía el tutorial práctico esctrito por Miguel en su blog.
En su ambiente virtual instalar Flask 2 y Turbo Flask
(venv) $ pip3 install flask turbo-flask
Al tratarse de un proyecto para pruebas la estructura es sencilla pero dejo la imagen como guía por si esta inciando con Flask.
Dentro de nuestra habitual carpeta Templates de Flask tenemos 3 archivos html, index, page2 y base.
Utilizamos base como una buena practica de Flask ya que las otras páginas repiten esta estructura.
También es una carpeta muy utilizada en Flask para almacenar las imagenes, archivos CSS y JS.
Aquí tenemos nuestro diseño personalizado con CSS
Siguiendo el tutorial de Miguel vamos a crear una web que nos muestre las cargas del CPU en los últimos 1, 5 y 15 minutos, estos datos se actualizaran de manera automatica, la muestra de esta infomración de CPU está diseñada para servidores Linux, pero para continuar con el ejemplo se agrega un código que muestra numero de manera aleatoria si el sistema operativo no es Linux.
@app.context_prrocessor
def inject_load():
if sys.platform.startswith('linux'):
with open('/proc/loadavg', 'rt') as f:
load = f.read().split()[0:3]
else:
load = [int(random.random() * 100) / 100 for _ in range(3)]
return{'load1': load[0], 'load5': load[1], 'load15': load[2]}
Al finalizar tenemos una aplicación totalmente funcional que nos brinda los datos casa 5 segundos sin necesidad de recargar la página.
Para obtener más detalles del tutorial que seguí recuerde visitar el la publicación de Miguel.y aprovecho para recomendar todas las publicaciónes de su blog.