Crear una APP de Taxis (Uber) con Mapa de Seguimiento en FLUTTERFLOW | Parte 2/3

Summary

En este video, se muestra cómo crear una aplicación tipo Uber usando FL Flow. Se cubren pasos clave como la configuración de la ubicación inicial del usuario, la creación de un viaje, y la navegación a través de la app. Además, se enseña a gestionar la visibilidad condicional para mostrar opciones dependiendo del estado del viaje, como si el conductor ya ha aceptado el viaje. También se explica cómo agregar información relevante, como el nombre y teléfono del conductor, y cómo asegurar que el usuario vea la interfaz adecuada según el progreso de su viaje.

Takeaways

• 😀 El tutorial está enfocado en crear una app tipo Uber, comenzando con la configuración de la ubicación del usuario y la interfaz del viaje.
• 😀 En la primera parte, se configuró la ubicación inicial del usuario, que es donde el conductor lo recogerá.
• 😀 En la segunda parte, se va a configurar la ubicación de destino, que el usuario seleccionará mediante un 'play speaker' en la aplicación.
• 😀 El viaje se crea cuando el usuario confirma la acción de crear el viaje, lo que activa la creación de un documento en la base de datos.
• 😀 Se utilizan 'app States' para almacenar la ubicación inicial del usuario y la referencia del usuario autenticado, facilitando el proceso de creación del viaje.
• 😀 Al crear el viaje, se eliminan campos innecesarios, como la ubicación y los datos del conductor, ya que se asignarán posteriormente cuando el conductor acepte el viaje.
• 😀 La app usa condiciones para mostrar diferentes botones y mensajes dependiendo de si el viaje ha sido aceptado o sigue en espera de conductor.
• 😀 Se configura una acción de navegación que lleva al usuario a una pantalla de 'buscando viaje', donde se mostrará el estado de su solicitud.
• 😀 La referencia del viaje recién creado se pasa como parámetro a la página de 'buscando viaje', para hacer consultas sobre su estado en la base de datos.
• 😀 Se utiliza visión condicional para decidir qué botón y texto mostrar, dependiendo de si el viaje está en búsqueda de conductor o si ya ha sido asignado.
• 😀 En la página de 'buscando viaje', también se realiza una consulta a la base de datos para obtener los datos del conductor una vez que haya aceptado el viaje.

Q & A

¿Cómo se configura la ubicación inicial del usuario en la aplicación?

La ubicación inicial del usuario se configura al seleccionar la ubicación en el 'play speaker' en la pantalla inicial. Esta acción guarda la ubicación en un 'app state' llamado 'inicio viaje', que luego se utiliza para crear el viaje.

¿Qué ocurre cuando el usuario confirma su destino en la aplicación?

Cuando el usuario confirma su destino, se crea un documento en la colección 'Ride' (viaje) en la base de datos. Este documento incluye la ubicación inicial del usuario, la ubicación de destino, la dirección de destino, y el UID del usuario autenticado.

¿Qué información no se incluye cuando se crea un viaje desde la perspectiva del pasajero?

Desde la perspectiva del pasajero, no se incluyen los datos del conductor, como su ubicación, nombre o UID, ya que estos se asignarán más adelante cuando el conductor acepte el viaje.

¿Qué pasa después de que el usuario confirma el viaje en la aplicación?

Una vez que el usuario confirma el viaje, se crea el documento en la base de datos y la aplicación navega a la página de 'buscando viaje', donde el usuario podrá ver si un conductor ha aceptado su viaje o si aún está en espera.

¿Cómo se pasa la referencia del viaje creado a la página de 'buscando viaje'?

La referencia del viaje recién creado se pasa como parámetro a la página de 'buscando viaje'. Esto se realiza configurando la acción de navegación para incluir el parámetro 'viaje ref', que es la referencia al documento del viaje creado.

¿Cómo se configuraron los botones y textos condicionales en la página de 'buscando viaje'?

Los botones y textos en la página de 'buscando viaje' se configuran con visión condicional. Si el viaje no ha sido asignado a un conductor (isDriverAssigned == false), se muestra el botón 'buscando viaje'. Si el viaje ha sido asignado (isDriverAssigned == true), se muestra el botón 'viaje encontrado' y los datos del conductor.

¿Qué tipo de consulta se realiza para obtener los datos del conductor asignado?

Para obtener los datos del conductor asignado, se realiza una consulta en la base de datos filtrando por el UID del conductor, que está almacenado en el campo 'Driver name' del documento de viaje. Se recupera la referencia del usuario conductor y se extraen sus datos, como el nombre, teléfono y foto de perfil.

¿Por qué se eliminan ciertos campos al crear el documento de viaje desde la perspectiva del pasajero?

Se eliminan ciertos campos, como la ubicación del conductor y su UID, porque en esta etapa no se conocen esos datos. El viaje se crea sin el conductor asignado y estos campos se actualizarán más tarde cuando un conductor acepte el viaje.

¿Qué rol tiene el parámetro 'isDriverAssigned' en la lógica condicional de la aplicación?

'isDriverAssigned' es un valor booleano que indica si un conductor ha sido asignado al viaje. Este valor se utiliza en las condiciones de la interfaz de usuario para mostrar el estado adecuado, como los botones y los datos del conductor, dependiendo de si el viaje está esperando un conductor o si uno ha sido asignado.

¿Qué sucede cuando un conductor acepta un viaje en la aplicación?

Cuando un conductor acepta un viaje, el valor de 'isDriverAssigned' se cambia a 'true'. Esto actualiza la interfaz de usuario, mostrando el botón 'viaje encontrado' y los detalles del conductor, como el nombre y el número de teléfono, en la página de 'buscando viaje'.