¿Cómo enviar mensajes de alerta con Flash en Flask?
Aprender a enviar mensajes de alerta o flash messages en Flask es esencial para informar a los usuarios sobre el estado de sus acciones en nuestra aplicación web. Hoy exploraremos cómo implementar esta funcionalidad para asegurar que los usuarios reciban confirmaciones oportunas, mensajes de éxito o advertencias sin complicaciones.
¿Qué es un flash en Flask?
En Flask, un flash es un mensaje breve que aparece temporalmente para informar al usuario de algo que ha sucedido, como el éxito de una operación o un error. Estos mensajes son similares a banners que se muestran debajo de la barra de navegación y permiten a los usuarios recibir notificaciones acerca de sus acciones sin tener que recargar la página constantemente.
¿Cómo enviar un mensaje de flash exitoso?
Para enviar un mensaje de éxito después de registrar el nombre de usuario, debemos importar flash en nuestro código y luego llamarlo después de guardar el nombre de usuario en la sesión. Aquí está cómo puedes hacerlo:
from flask import Flask, flash, session
# Después de almacenar el usuarioflash('Nombre de usuario registrado con éxito')
Esta acción asegura que Flask guarde el mensaje de flash y esté preparado para mostrarlo la próxima vez que se cargue la página.
¿Cómo renderizar los mensajes de flash en el HTML?
Los mensajes de flash se renderizan usando un bucle, generalmente colocado en el base.html, justo después de la navegación. Así los mensajes de flash estarán disponibles en cualquier página. Aquí está el proceso:
Colocar el bucle en el base.html para iterar sobre todos los mensajes usando get_flashed_messages(), una función disponible automáticamente en Flask:
{% for message in get_flashed_messages() %}
Utilizar Bootstrap: Para darle estilo a los mensajes, usamos las clases de Bootstrap, particularmente utilizando alert para los mensajes flash.
alert-success indica el tipo de mensaje, y alert-dismissible permite que el usuario lo cierre.
Resolver problemas de cierre con JavaScript de Bootstrap
Un problema común es que los mensajes de flash no se cierran correctamente. Esto puede solucionarse asegurándose de que los scripts de JavaScript de Bootstrap estén incluidos correctamente en el HTML. Para ello:
Incluir el bloque de scripts: Asegúrate de heredar los scripts de Bootstrap en el pie de página:
{% block scripts %}
{{ super() }}
{% endblock %}
Prácticas recomendadas
Centralizar el HTML del mensaje de flash en tu plantilla base (base.html), así las modificaciones serán globales.
Asegúrate de incluir todos los scripts necesarios, especialmente al utilizar frameworks como Bootstrap.
Usa clases diferentes de Bootstrap según el tipo de mensaje, como alert-warning para advertencias o alert-danger para errores.
Este enfoque asegura que los usuarios siempre estén informados de sus acciones en la aplicación, mejorando así la experiencia de usuario general. ¡Anímate a implementar los mensajes de flash y verás cómo mejora la interacción en tu aplicación!
No se vio en el vídeo pero lo primero que se hizo fue importar flash
from flask importFlask, request, make_response, redirect, render_template, session, url_for, flash```
¿Qué son los últimos tres símbolos del final?
@Fabián Vega son los símbolos que salen cuando escribes un bloque de código de comentario :D
En Boostrap4 hace falta mas codigo para que funcione el codigo
<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Holy guacamole!</strong>You should check in on some of those fields below.<button type="button"class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>```
Y solo para continuar con bootstrap-flask dejo las lineas para incluir los javascript de bootstrap:
Aveces los mensajes pueden ser del tipo success or danger (error) o cualquier otra cosa. Esos son los nombres de las clases CSS para colorear los distintos tipos de alertas.
En flask se puede hacer estos flash() con algo que se llaman categorìas.
Para eso solo basta con usar en nuestra ruta:
flash('Login successful', 'success')
Y despues en los templates:
{% for category, message in get_flashed_messages(with_categories=True) %}
Gracias x el aporte
Gracias por la información.
A continuación muestro como implementar messages de error y success.
!sample
¡Hola compañeros!
Les comparto este avance. Implementé un mensaje de error en caso de no tener éxito en el registro del usuario.
# Dentro de mi función de LogInifauth(login_form):flash('Successful sign up', category='success')returnredirect(url_for('home'))else:flash('Authentication Error', category='danger')returnredirect(url_for('login'))
¡Además les muestro un ejemplo de cómo realizar el render de los flashes de manera dinámica! Esto nos permitirá colocar flashes de cualquier categoría:
No ubico el metodo auth. Asumo que allí es donde se hace la autentificación del usuario y al retornar true debe dar Success
Dado que esta clase y todo está curso está TERRIBLEMENTE desactualizado. Les dejo el codigo en el template para que les renderice correctamente los flashes que envian desde python al estar trabajando con Bootstrap5:
Buenas tardes. No pude con mi genio y le hice una pequeña modificación.
La idea es que si el usuario todavía NO completó el formulario, le pida que lo complete y muestre el form. Si lo completó, que le muestre la leyenda de "Bienvenido..."
{% block content %}{%if user_ip%}<h4>TuIP es {{ user_ip }}</h4>{%else%}<a href="{{ url_for('index') }}">ConseguirIP</a>{% endif %}{%if username %}<h2>Bienvenido{{ username }}</h2>{%else%}<h2>Por favor, ingresá tus datos de ingreso.</h2><div class="container">{{ wtf.quick_form(login_form)}}</div>{% endif %}<ul>{%for todo in todos %}{{macros.render_todo(todo)}}{% endfor %}<ul>{% endblock %}
Estoy usando bootstrap5 y no me funciona para cerrar la alerta
Saludos!!
tengo una pequeña duda con respecto a las variables, ¿Cada vez que tenga que iniciar el server, tengo que declarar las variables $FLASK?
puedes reemplazarlo con:
if __name__ =='__main__': app.run(debug=True)
y para colocar en modo developmente lo colocas:
app =Flask(__name__)app.config['ENV']='development' #Te permite tenerlo en modo desarrollo
o puedes escribir los comandos
exportFLASK_ENV='development'...y demas
dentro del archivo .bashrc que esta en tu home, si usas MACos o linux, para que cada vez que inicies una secion en la terminal se carguen automaticamente
hola, no me cierra la ventana desplegada y tengo el codigo tal cual el profesor
Hola, Juan. Podrías mostrarnos a la comunidad tu código así podemos ayudarte de mejor manera. :)
tuve ese problema y lo solucione agregando dentro de <button ... data-bs-dismiss="alert">
espero les.ayude
Hola! En mi caso separé la parte de inicio y de formulario. Esto lo estoy orientando a un blog personal.
La primera linea del archivo main adicionarle el flash.
Quedaria asi.
from flask importFlask, request, make_response, redirect, render_template, session, url_for, flash
Para trabajar con bootstrap 5, usando bootstrap-flask, el codigo en el template queda asi:
Cargar el block de scripts de bootstrap en base.html para que funcione correctamente
{% block scripts %}{{super()}}{% endblock %}
Gracias, Me gustaría aclarar que el punto 4. debes colocarlo dentro del body al final de dicho bloque. Si no lo colocas, no te deja cerrar la flash una vez salga
