Los mensajes flash son una herramienta esencial en el desarrollo web moderno para proporcionar retroalimentación instantánea a los usuarios. Cuando implementamos esta funcionalidad en nuestras aplicaciones, mejoramos significativamente la experiencia del usuario al confirmar acciones como creación o eliminación de elementos. Veamos cómo implementar estos mensajes en una aplicación Flask y cómo pueden transformar la interacción con nuestros usuarios.
¿Qué son los Flash Messages y por qué son importantes?
Los Flash Messages son mensajes temporales que se muestran al usuario después de realizar una acción específica. Estos mensajes viajan entre solicitudes (requests) a través de sesiones, permitiendo mostrar información relevante sobre acciones completadas o errores ocurridos.
Características principales:
Persisten entre solicitudes para el mismo usuario
Se almacenan en cookies encriptadas
Desaparecen después de ser mostrados una vez
Pueden categorizarse (éxito, error, advertencia)
La importancia de estos mensajes radica en que proporcionan retroalimentación inmediata al usuario, mejorando la usabilidad de la aplicación y reduciendo la confusión sobre si una acción se completó correctamente.
¿Cómo implementar Flash Messages en una aplicación Flask?
La implementación de mensajes flash en Flask es relativamente sencilla gracias a que esta funcionalidad viene integrada en el framework. Veamos paso a paso cómo hacerlo:
Configuración inicial
Primero, necesitamos configurar una clave secreta para encriptar las cookies que transportarán nuestros mensajes:
# Configuración de la clave secreta para encriptar cookiesapp.secret_key ="cualquier_valor_secreto"
Esta clave es fundamental para la seguridad, ya que sin ella Flask no podrá manejar la información de sesión de forma segura.
Importación y uso de Flash
Para utilizar los mensajes flash, necesitamos importar la función correspondiente:
from flask import flash
Luego, podemos crear mensajes flash en cualquier punto de nuestro código, especialmente después de acciones importantes:
# Después de crear una nota exitosamenteflash("Nota creada","success")
El primer parámetro es el mensaje que queremos mostrar, y el segundo es la categoría. Las categorías son útiles para aplicar diferentes estilos según el tipo de mensaje (éxito, error, advertencia).
Mostrando los mensajes en la plantilla
Para mostrar los mensajes en nuestra plantilla HTML, utilizamos la función get_flashed_messages() de Jinja2:
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<ul> {% for category, message in messages %}
<liclass="{{ category }}">{{ message }}</li> {% endfor %}
</ul> {% endif %}
{% endwith %}
Este código:
Recupera los mensajes flash con sus categorías
Verifica si hay mensajes para mostrar
Itera sobre cada mensaje, mostrándolo en un elemento de lista
Aplica la categoría como una clase CSS para permitir estilos diferentes
¿Cómo mejorar la presentación de los Flash Messages?
Los mensajes flash básicos funcionan, pero para una experiencia de usuario óptima, es recomendable mejorar su presentación visual:
Uso de frameworks CSS
Frameworks como Tailwind CSS pueden ayudar a mejorar significativamente la apariencia de nuestros mensajes flash:
Para mensajes de éxito: clases con fondos verdes
Para errores: fondos rojos
Para advertencias: fondos amarillos
Personalización de categorías
Podemos crear diferentes categorías según nuestras necesidades:
# Mensaje de éxitoflash("Nota creada correctamente","success")# Mensaje de errorflash("No se pudo crear la nota","error")# Mensaje de advertenciaflash("La nota está vacía","warning")
Posicionamiento estratégico
Es importante colocar los mensajes en lugares visibles pero no intrusivos:
Generalmente en la parte superior de la página
Debajo de la barra de navegación
Con suficiente contraste para ser notados
La implementación de mensajes flash es una práctica recomendada que mejora significativamente la experiencia del usuario al proporcionar retroalimentación clara sobre las acciones realizadas. Estos pequeños detalles marcan la diferencia entre una aplicación web básica y una profesional, donde el usuario siempre sabe qué está sucediendo con sus acciones. Te animamos a experimentar con diferentes estilos y categorías para encontrar la combinación que mejor se adapte a tu aplicación.
¿Has implementado mensajes flash en tus proyectos? ¿Qué otras técnicas utilizas para mejorar la experiencia de usuario en tus aplicaciones web? Comparte tu experiencia en los comentarios.
Por favor, entiendo que es un resumen, pero sería bueno verificar que el contenido de la clase en el video y el recurso escrito correspondan, ya que son diferentes. Si uno quiere seguir la clase solo con la lectura, se pierde porque no se indica el nombre de los archivos a modificar, ni están los fragmentos completos, o tienen errores como el fragmento con la variable: "<li class="{{ {{ category }}">{{ message }}</li>".
El curso me ha gustado hasta el momento, pero creo que si se mejora esta parte, sería mucho mejor. Gracias por su atención.
Refactorizar rutas usando Blueprints en Flask es una buena práctica para organizar tu aplicación en módulos más limpios, reutilizables y escalables.
✅ ¿Qué es un Blueprint?
Un Blueprint en Flask permite estructurar tu aplicación por componentes (por ejemplo: notes, auth, admin, etc.). Esto te permite separar rutas, formularios y lógica específica de cada parte.
🔧 Refactor Paso a Paso
📁 Estructura recomendada
notes_app/
│
├── app.py # Crea la app y registra los blueprints
├── config.py
├── models.py
│
├── notes/ # Módulo con blueprint
│ ├── __init__.py # Define el blueprint
│ ├── routes.py # Contiene las rutas
│ └── templates/ # Plantillas HTML de este módulo
│ └── note_form.html
│
├── templates/
│ └── home.html
│
└── static/
1. 📄 notes/routes.py – Mueve las rutas
from flask import Blueprint, render_template, request, redirect, url_for
from models import db, Note
# Puedes agregar más blueprints si los necesitas:
# from auth import auth_bp
# app.register_blueprint(auth_bp, url_prefix="/auth")
@app.route("/acerca-de")
def about():
return "esto es una app de notas"
@app.route("/contacto", methods=["GET", "POST"])
def contact():
if request.method == "POST":
return "Formulario enviado correctamente", 201
return "Pagina de contacto"
if __name__ == "__main__":
app.run(debug=True)
✅ Ventajas
Separación clara de responsabilidades.
Reutilización de rutas y lógicas.
Facilidad para escalar a una API REST con múltiples módulos.
Se adapta mejor a proyectos grandes.
👍
Hola Devs 👋
Les comparto les comparto unos ejemplo que encontre sobre Flash Messages
Hola Chicos, \nEste es mi pequeño aporte al reto sobre la autenticacion de usuarios, aun no tiene 'styles' pero es funcional para el login de usuarios.@users_bp.route('/login', methods=['GET', 'POST'])
