Indennizzo Diretto
La declaración de accidente de tráfico en papel, rehecha como un flujo guiado en el teléfono.
- Rol
- Desarrollador Flutter: toda la app cliente
- Cliente
- LC Solutions
- Periodo
- 2021–2023
- Plataformas
- iOS, Android y web desde una única base de código
El producto
Tras un accidente de tráfico en Italia, los dos conductores completan el CAI, la «constatazione amichevole di incidente»: un denso formulario en papel a dos columnas que la mayoría de la gente ve por primera vez al borde de la carretera, normalmente nerviosa y con prisa.
Indennizzo Diretto convirtió ese formulario en ocho pasos guiados en el teléfono (el GPS para el lugar, la cámara para las pruebas, un dedo para las firmas) y después se encargaba de la reclamación ante la aseguradora en nombre del conductor y lo mantenía informado de su avance.
- 8
- pasos guiados sustituyen al formulario en papel
- 3
- plataformas desde una única base de código Flutter
- 18k
- líneas de Dart en el cliente
- 96%
- de los commits de la app son míos (239 de 248)
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado con la app real funcionando sobre su backend de demostración. Sin sonido.
Qué hace
De la carretera a una declaración firmada
01
Un formulario que se completa solo donde puede
La fecha y la hora salen del reloj, la dirección del GPS mediante geocodificación inversa, los datos personales del perfil. La marca, el modelo y la aseguradora se buscan en el servidor mientras escribes. La primera respuesta (dos vehículos, un choque en cadena o un peatón) decide cuáles de los pasos siguientes hacen falta realmente.
02
Pruebas recogidas en el lugar
Fotos de la licencia de conducir, fotos guiadas de los daños desde ángulos sugeridos, un toque sobre la silueta del vehículo para marcar el primer punto de impacto, una nota de voz que describe lo ocurrido y los testigos con sus documentos. Cada adjunto se sube en cuanto se captura y se vuelve a descargar como miniatura cuando se reabre la reclamación.
03
El formato oficial, trasladado a la pantalla
Las diecisiete circunstancias estándar de la declaración mantienen la lógica a dos columnas del formulario en papel, con los colores del original: azul para el vehículo A, amarillo para el vehículo B. Las secciones de la contraparte ponen toda la pantalla en amarillo, para que los dos conductores sepan siempre de quién son los datos que tienen delante.
04
Firmada sobre el cristal, entregada en PDF
Los dos conductores firman en el teléfono, a lo largo del lado largo de la pantalla para que la firma ocupe todo el ancho. Tras aceptar el mandato, la reclamación se envía y la declaración oficial vuelve como PDF, completada y firmada, y se muestra dentro de la app.
05
Seguimiento de la reclamación
Las reclamaciones enviadas pasan a ser de solo lectura y el indicador de pasos se convierte en navegación libre. Los cambios de estado llegan como notificaciones push, y el servicio de soporte está a un toque, por WhatsApp o SMS, desde cualquier pantalla.
06
El acceso
Una introducción de tres páginas, un modo invitado con una reclamación de ejemplo para explorar antes de comprometerse, registro con verificación del correo electrónico e inicio de sesión con correo, Facebook, Google o Apple.
Responsive
Una base de código, tres plataformas
El mismo código Flutter se publicó en iOS y Android y también funcionaba en la web. Por encima de 800 px la barra inferior se convierte en un menú lateral y los formularios se colocan en una columna legible; las diferencias entre plataformas (almacenamiento seguro, cámara, grabación de audio, push) quedan aisladas tras pequeñas capas de adaptación.
Diseño web: reclamacionesEn pantallas anchas, la navegación lateral sustituye a la barra inferior. Diseño web: formulario de reclamaciónLos mismos widgets, limitados a una columna legible. Diseño web: resumenResumen, estado y firmas en una pantalla ancha.
Por dentro
Cómo se construyó
Estado y estructura
Las pantallas se gobiernan con BLoCs escritos a mano sobre streams de RxDart (22 en total, uno por pantalla o paso del formulario), con un inherited widget que transporta la sesión. Un BLoC padre es el dueño de la reclamación en edición; cada paso valida, guarda su parte en la API y devuelve el modelo actualizado, de modo que una reclamación se puede abandonar y retomar en cualquier paso.
Comunicación con el backend
Una capa REST ligera con bearer tokens y reautenticación transparente, subidas multipart para fotos, firmas y audio, y mappers explícitos de petición/respuesta entre el JSON del servidor y los modelos de la app.
Funciones del dispositivo
Geolocalización con geocodificación de OpenStreetMap y autocompletado de direcciones, captura con la cámara, grabación y reproducción de audio, un panel de firma, visualización de PDF dentro de la app y Firebase Cloud Messaging con notificaciones locales.
La app real, funcionando por sí sola
No es una maqueta: la app original, funcionando de nuevo
Sin sus servidores, la app no pasa de la pantalla de inicio de sesión, y esos servidores son un servicio en producción con las reclamaciones de accidentes de personas reales. En lugar de simularla con imágenes, hice que el código real funcionara por sí solo: en un navegador, sin nada detrás.
- 1
Un backend que vive en la app
La capa de red entrega ahora cada petición a un mock en memoria que usa las mismas rutas y el mismo JSON que la API original. Servicios, modelos y BLoCs funcionan sin cambios: lo que ves es la interfaz de producción haciendo su trabajo real con datos ficticios.
- 2
Documentos generados al vuelo
Los PDF de la declaración y del mandato se generaban antes en el servidor. La demo los compone en Dart a partir de lo que se haya escrito en el formulario, incluidas las dos firmas, el croquis del impacto y las fotos.
- 3
Sustitutos del hardware
La cámara, el micrófono y el GPS se sustituyen por fotos de ejemplo, una nota de voz grabada y una posición fija, para que todo el flujo funcione en una pestaña del navegador sin pedir ni un solo permiso.
- 4
Grabado por un script, no a mano
Flutter dibuja sobre un canvas, así que no hay DOM en el que hacer clic. Un storyboard de Playwright encuentra los widgets a través del árbol de accesibilidad de Flutter, los maneja con eventos táctiles reales y graba el screencast de Chrome a la resolución del dispositivo. Cada clip y cada captura de esta página se pueden regenerar con un solo comando.
Todas las personas, matrículas y reclamaciones que aparecen son ficticias. Los datos de contacto y las claves de API se eliminaron de la compilación de la demo.
Funciona por completo en tu navegador. Inicia sesión con cualquier correo y contraseña, o explora la reclamación de ejemplo como invitado. Arrastra para desplazarte, como en un teléfono.
Todas las pantallas
La colección completa de capturas
OnboardingLa primera de las tres páginas de introducción que se muestran en el primer arranque. Onboarding: completa el formulario en la appLa propuesta: la declaración de accidente en papel, hecha en el teléfono. Modo invitadoSin cuenta, la app ofrece una reclamación de ejemplo de solo lectura para explorar. Inicio de sesiónCorreo electrónico y contraseña, o una cuenta social. Mis reclamacionesCada reclamación con su fecha y su estado actual. Los borradores se eliminan deslizando. RegistroValidación en cada campo; es obligatorio aceptar la política de privacidad y las condiciones. Verificación del correo electrónicoUn código de cuatro cifras enviado por correo electrónico confirma la dirección. Estado vacíoUna cuenta nueva aún no tiene reclamaciones: el botón central inicia la primera. Paso 1: Cuándo y dóndeLa fecha, la hora y la dirección llegan ya completadas a partir del reloj y del GPS (geocodificación inversa). Selector de fechaSelectores de rueda para la fecha y la hora. Paso 1: Qué pasóLa respuesta decide cuáles de los pasos siguientes hacen falta. Paso 2: Titular de la pólizaDatos personales completados a partir del perfil, dirección con autocompletado. Paso 2: Mi vehículoLa marca, el modelo y la aseguradora se buscan en el servidor mientras se escribe. Paso 3: Conductor, fotos, punto de impactoFoto de la licencia de conducir, un toque en el vehículo para marcar el primer impacto, fotos guiadas de los daños. Paso 4: El otro vehículoLa sección de la contraparte va en amarillo, como en el formulario en papel. Paso 6: CircunstanciasLas 17 circunstancias estándar, una columna por vehículo. Paso 7: Nota de vozLo ocurrido se cuenta de viva voz; la grabación se adjunta a la reclamación. Paso 7: Añadir un testigoTestigos y heridos, cada uno con las fotos de su documento de identidad. Paso 8: ResumenTodo lo introducido, agrupado en secciones desplegables, editable antes de firmar. FirmaLos dos conductores firman en el teléfono; el área de firma ocupa el lado largo de la pantalla. Mandato y envíoSe aceptan el mandato y las condiciones de privacidad, y después se envía la reclamación. MandatoLa carta de mandato, mostrada como PDF dentro de la app. Declaración de accidente generadaLa declaración oficial, completada y firmada, en PDF. Reclamación enviadaDe vuelta en la lista, la nueva reclamación aparece como «Request sent». Reclamación enviada: vehículoLas reclamaciones enviadas son de solo lectura; el indicador de pasos se convierte en navegación libre. Reclamación enviada: fotos e impactoLos adjuntos se descargan a petición como miniaturas. Reclamación enviada: circunstanciasEl vehículo A estaba detenido y el vehículo B chocó contra él. Reclamación enviada: resumen y estadoAviso de estado, firmas y los documentos generados. Firma guardadaLa firma tal como se guardó en el servidor. PDF de la declaración de accidenteLa declaración, mostrada dentro de la app. NotificacionesCambios de estado enviados desde el back office (Firebase Cloud Messaging en producción). PerfilDatos de la cuenta, cambio de contraseña, cierre de sesión. AjustesContactos y documentos legales. Acceso rápido al soporteWhatsApp o SMS al servicio de soporte, a un toque.
Siguiente caso de estudio
nexi_payment →