En los frameworks web existe un mecanismo muy sencillo y útil que se llama Flash. Este mecanismo no tiene nada que ver con la tecnología Flash, como podrías pensar. Se usa en situaciones cuando necesitas notificar al usuario sobre la realización exitosa/no exitosa de alguna acción, por ejemplo, mostrar un mensaje "¡Has iniciado sesión!" después de la autenticación. Esta tarea surge, casi siempre, después de enviar formularios en el sitio web.
La característica de este mecanismo es que debe recordar el mensaje en el contexto de una solicitud y mostrarlo en otra solicitud HTTP. Usualmente esto está asociado con una redirección después de que el usuario ejecute alguna operación. Por ejemplo, si nos registramos, la creación del mensaje flash ocurre en el momento de POST /users, y se muestra después de la redirección a la página principal. El método que se utiliza para esto es guardar los datos en la sesión del usuario para poder extraerlos en la siguiente solicitud.
app.delete('/session', (req, res) => {
req.flash('info', 'Goodbye');
req.session.destory();
res.redirect('/');
});
Fíjate que potencialmente puedes llamar a la función flash muchas veces.
Normalmente, los mensajes flash se dividen en niveles: info, success, warning, que se diferencian por su esquema de colores para indicar y dividir los tipos de mensajes.
A continuación se muestra un ejemplo de cómo conectar la biblioteca correspondiente:
npm i @fastify/flash
import flash from '@fastify/flash';
import fastifyCookie from '@fastify/cookie';
import fastifySession from '@fastify/secure-session';
await app.register(fastifyCookie);
await app.register(fastifySession, {
secret: 'a secret with minimum length of 32 characters',
});
await app.register(flash);
Ejemplo de cómo mostrar mensajes en la plantilla:
for message in flash
.alert(class=`alert-${message.type}`)
= message.message
Para que funcione el complemento, hemos conectado adicionalmente cookies y sesiones. De esta manera, los mensajes flash pueden guardarse entre solicitudes. Esto puede ser útil durante una redirección:
app.post('/users', function(req, res){
try {
// ...
req.flash('success', { type: 'success', message: 'Usuario registrado' });
} catch(e) {
req.flash('error', { type: 'info', message: 'Registro fallido' });
}
res.redirect('/users');
});
app.get('/users', (req, res) => {
res.view('src/views/users/index', { messages: res.flash() });
});
En el sitio web de Códica puedes ver muchos de estos mensajes flash en diferentes lugares. La apariencia y los tipos de mensajes se toman completamente de Bootstrap.
Alertas de Bootstrap
Trabajo independiente
Realiza todos los pasos del lección en tu computadora
- Agrega a la aplicación la visualización de un mensaje flash sobre el éxito o fracaso al registrarse un nuevo usuario. Si deseas hacer los mensajes flash más informativos para el usuario, puedes resaltarlos con diferentes colores dependiendo del resultado de la acción. Por ejemplo, para una registro exitoso, mostrar el mensaje en verde ✅, y en caso de errores, en rojo ❌. Para esto, puedes utilizar Bootstrap
- Sube los cambios a GitHub
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
