Criluma Viaggi
Una agencia de viajes en el bolsillo: sus ofertas, una búsqueda de viajes, reserva y pago, y una cita con un asesor.
- Rol
- Desarrollador Flutter principal: pagos, inicio de sesión con Google, Facebook y Apple, citas, notificaciones push, la migración a null safety y la versión 2.0
- Cliente
- Criluma Viaggi, agencia de viajes
- Periodo
- 2018–2022 (última versión 2.0.1, noviembre de 2021)
- Plataformas
- iOS y Android desde una única base de código Flutter
El producto
Criluma Viaggi es una agencia de viajes de la región de Marche, y su app ponía la agencia en el bolsillo del cliente: las ofertas del momento, una búsqueda entre los viajes que vende su sistema de reservas (vuelo y hotel, o solo el hotel) y una reserva hecha desde el teléfono, del presupuesto a los datos de los viajeros, el seguro y el pago.
Los clientes también podían reservar una reunión con uno de los asesores de viajes de la agencia, en la agencia o por videollamada. Fui el desarrollador principal de la app, en iOS y Android desde una única base de código Flutter, hasta la versión 2.0.1 de noviembre de 2021.
- 183
- de los 222 commits del repositorio de la app son míos
- 18k
- líneas de Dart en la última versión
- 3
- integraciones de pago a lo largo de los años: Stripe, Nexi y MyBank
- 4
- formas de iniciar sesión: la cuenta de la agencia, Google, Facebook y Apple
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado a partir de la última versión de la app en tamaño de teléfono, con la búsqueda y la reserva dentro de la app reactivadas tal como estaban en la versión 1.6. Los hoteles, los precios y los bancos son inventados; las páginas del banco las dibuja la demo.
Qué hace
De una oferta en el escaparate a un viaje pagado
01
Las ofertas en el escaparate
La página de inicio es el escaparate de la agencia: un carrusel de ofertas, cada una con el destino, el hotel y sus estrellas, las fechas y el precio. Una oferta se abre con sus imágenes, lo que incluye y un formulario que envía a la agencia una pregunta sobre ella.
02
Una búsqueda que sigue lo que está a la venta
Vuelo y hotel, solo el hotel o una búsqueda libre. El destino, el mes y el aeropuerto de salida se acotan entre sí: tras cada elección, el servidor responde con los países, las regiones, los meses y los aeropuertos que todavía tienen salidas.
03
Hotel, vuelos y habitaciones
Los resultados se ordenan por precio, categoría o tipo. Un hotel se abre con sus imágenes, el turoperador, los vuelos de ida y vuelta y las habitaciones disponibles para el grupo; se pueden añadir habitaciones y cambiar los vuelos y las fechas, y el total se actualiza.
04
Del presupuesto a la reserva
El presupuesto reúne en una página los vuelos, el alojamiento y el seguro. Al confirmarlo se piden los datos de cada viajero de cada habitación (tratamiento, nombre, teléfono, fecha de nacimiento y código fiscal) y después el seguro opcional, las condiciones y un resumen con los consentimientos que exige el contrato.
05
Pagar con MyBank
El checkout del código de la última versión paga por transferencia MyBank: la app abre la página de pago de la agencia, el cliente elige su banco, inicia sesión y autoriza allí la transferencia, y vuelve a la app con el viaje pagado. Las versiones anteriores aceptaban tarjetas a través de Stripe, y también construí un checkout con tarjeta de Nexi.
06
Un asesor, en la agencia o por videollamada
Un cliente con la sesión iniciada encuentra sus datos ya completados: elige un día, una hora y el motivo de la reunión, y un asesor con quien reunirse en la agencia o por videollamada. El inicio de sesión usa la cuenta CriluMy de la agencia, o Google, Facebook y Apple.
Por dentro
Cómo se construyó
Hablar con un sistema de reservas de viajes
Todo viene del servidor de reservas de la agencia, un servicio web ASP.NET cuyas peticiones envuelven sus campos en una cadena JSON dentro de JSON, y cuyas respuestas hacen lo mismo. La app las convierte en modelos tipados y usa BLoCs sobre streams de RxDart: la búsqueda mantiene sincronizados destinos, meses y aeropuertos, y la reserva lleva el grupo, las habitaciones, los vuelos y el presupuesto de una pantalla a otra.
Pagos, y un plugin
Para los pagos con tarjeta de Nexi escribí nexi_payment, un plugin de Flutter sobre los SDK de Android e iOS de Nexi, publicado en pub.dev en junio de 2020; todavía lo mantengo. En la app llegaron primero las tarjetas a través de Stripe, después Nexi y luego MyBank a través de GestPay (2020–2021), con la app abriendo la página de pago de la agencia en un WebView y leyendo el resultado en la URL a la que vuelve.
Cuentas, y al día con Flutter
Un inicio de sesión CriluMy lo verifica el servidor de la agencia y se refleja en Firebase Auth; Google, Facebook y Apple pasan por Firebase y se asocian a la cuenta CriluMy del cliente por nombre de usuario o correo electrónico, o abren una nueva. El proyecto empezó con una beta de Flutter en 2018 y siguió a Flutter hasta la 2.x: el nuevo Android embedding en 2020, sound null safety para la 2.0 en 2021.
Grabar una app que ya no está en las tiendas
La app es real. Los viajes son inventados.
La app ya no está en las tiendas, pero la agencia sigue en activo, y su sistema de reservas, sus ofertas y sus clientes son suyos. Así que las grabaciones usan una copia de la última versión que funciona por sí sola, con un sustituto para todo lo que hay detrás.
- 1
La última versión, compilada para el navegador
La versión 2.0.1, compilada para la web con Flutter 2.10, unos meses más reciente que la app, y configurada para creer que se ejecuta en un iPhone. La búsqueda y la reserva dentro de la app se reactivan tal como estaban en la 1.6, con los pocos errores de null safety de esas pantallas corregidos.
- 2
Un servidor de reservas dentro de la página
Cada petición que hace la app la responde dentro de la página un sustituto que habla el formato del servicio web, a partir de un catálogo inventado: nueve hoteles de Cerdeña a las Maldivas, dos turoperadores, vuelos desde cinco aeropuertos, habitaciones y presupuestos. El inicio de sesión funciona sobre el Firebase en memoria que se usa en las pruebas.
- 3
Imágenes dibujadas, personas inventadas
Las fotografías de los proveedores se quedan fuera: un script dibuja cada playa, piscina y habitación, los retratos de los asesores y los logotipos de los turoperadores. Los asesores, el cliente y los bancos son inventados, y las páginas del banco las dibuja la demo.
- 4
Grabado sin conexión
La herramienta de grabación rechaza cualquier petición que salga de la máquina, así que una toma no puede llegar a los sistemas de la agencia.
El logotipo, la interfaz y sus iconos son los de la propia app. Las ofertas, los hoteles, los precios, los vuelos, los asesores, el cliente, los bancos y las imágenes son contenido de ejemplo creado para este portfolio.
Aquí no hay demo que probar: la agencia sigue en activo, así que esta página muestra grabaciones con contenido de ejemplo.
Todas las pantallas
La colección completa de capturas
OfertasUn carrusel de ofertas con precio, hotel y fechas. OfertaImágenes, precio por persona, régimen, aeropuerto de salida y fechas. Hotel y serviciosEl hotel, sus estrellas y lo que incluye la oferta. Preguntar a la agenciaUna consulta sobre la oferta, enviada a la agencia. BúsquedaVuelo + alojamiento, solo alojamiento o búsqueda libre. DestinosPrimero los países, después las regiones. SalidaLos meses con salidas. ResultadosHoteles con fechas y precio, ordenados por precio, categoría o tipo. HotelImágenes, el turoperador, las estrellas y las fechas. Vuelos y habitacionesLos vuelos de ida y vuelta, las habitaciones y su régimen. PresupuestoVuelos, alojamiento y seguro, antes de reservar. ViajerosCada viajero de cada habitación: tratamiento, nombre, teléfono, fecha de nacimiento y código fiscal. Fecha de nacimientoElegida en un calendario. Seguro y condicionesEl seguro opcional y las condiciones del contrato. CheckoutEl resumen de la reserva, los consentimientos y el total. MyBankEl cliente elige su banco (dibujado por la demo). PagadoDe vuelta en la app: pagado, y la confirmación llegará por correo electrónico. CitaLos datos del cliente, ya completados, y el día y la hora. AsesoresEn la agencia o por videollamada (asesores inventados). Inicio de sesiónLa cuenta CriluMy de la agencia. RegistroNombre, correo electrónico, un nombre de usuario y una contraseña.
Siguiente caso de estudio
TEPY →