Validación de Pasajeros y Visualización en Ticket Final

Clase 13 de 15 • Curso de State Machines en React.js

Clase anteriorSiguiente clase

Resumen

¿Cómo implementar una validación para los pasajeros en el proyecto?

La validación es un aspecto crucial en los sistemas que requieren la incorporación de datos precisos, como nuestra aplicación de reservación de boletos. Ahora, exploraremos cómo implementar una validación para garantizar que siempre haya al menos un pasajero antes de permitir que se genere un ticket. Este proceso añadirá una capa de seguridad y control en la aplicación, mejorando la experiencia del usuario.

  1. Transición con guardias:

    • En el archivo de código donde gestionamos los eventos, cambia el evento que quita el ticket a un 'target'.
    • Aplica una condición, o 'guard', para ejecutar la transición.
    • Define esta condición como Passengers more than one passenger.

  2. Definición de guardias en el código:

    • Añade una nueva entrada bajo la sección 'actions', llamada 'guards'.
    • Implementa la lógica condicional: verifica si context.passengers.length es mayor que cero, retornando true o false.
    • Si la condición es verdadera, permite la transición; de lo contrario, no se ejecuta.
guards: {
  moreThanOnePassenger: (context) => {
    return context.passengers.length > 0;
  }
}
  1. Pruebas y verificación:
    • Refresca el navegador y prueba el flujo: intenta avanzar sin pasajeros y verifica que no se complete la transición.
    • Agrega un pasajero y corrobora que con la nueva validación, ahora sí se puede generar el ticket.

¿Cómo mostrar los nombres de los pasajeros en el ticket final?

Mostrar la información de los pasajeros en el ticket mejora la claridad y proporciona a los usuarios una confirmación visual de su inclusión en el viaje. Veamos cómo integrar esta funcionalidad visualmente atractiva y útil en nuestra vista de tickets.

  1. Preparación del contexto:

    • Asegúrate de pasar el context necesario al componente de tickets.
    • Ajusta la llamada a state.context para garantizar que todos los parámetros sean accesibles desde dicho componente.

  2. Implementación de la lista de pasajeros:

    • Utiliza context.passengers.map para iterar sobre la lista de pasajeros.
    • Devuelve una etiqueta <p> que incluya el nombre de cada pasajero, aprovechando el índice del mapeo como la 'key' para cada elemento.
return (
  <div>
    {context.passengers.map((passenger, index) => (
      <p key={index}>{passenger.name}</p>
    ))}
  </div>
);
  1. Pruebas visuales:
    • Realiza pruebas asegurándote de que, al generar el ticket, se muestren correctamente los nombres de los pasajeros.
    • Observa cómo esta implementación mejora la retroalimentación visual al usuario respecto a la ocupación de su reserva.

¿Qué retos y mejoras puedes implementar para practicar más?

El aprendizaje continuo y la práctica constante son pilares en el mundo de la programación. Aquí se presentan algunos desafíos para seguir mejorando el proyecto y dominar las técnicas aprendidas:

  • Validaciones adicionales: Implementa reglas para que no se muestre el botón de 'continuar' si aún no hay pasajeros.
  • Asignación de asientos: Permite que los pasajeros escojan sus asientos.
  • Datos adicionales: Añade campos para información extra como comida preferida o si necesita asistencia especial.
  • Selección de equipaje: Introduce un paso adicional para que se elija el tipo y cantidad de equipaje permitido.

Estas mejoras no solo servirán para reforzar lo que has aprendido, sino también para proporcionarte habilidades prácticas y experiencia que serán muy útiles en futuros proyectos. Sigue adelante con entusiasmo; ¡cada nueva línea de código te acerca más a la maestría!