Indennizzo Diretto
Der Unfallbericht auf Papier, neu umgesetzt als geführter Ablauf auf dem Smartphone.
- Rolle
- Flutter-Entwickler: die gesamte Client-App
- Auftraggeber
- LC Solutions
- Zeitraum
- 2021–2023
- Plattformen
- iOS, Android und Web aus einer Codebasis
Das Produkt
Nach einem Autounfall in Italien füllen beide Fahrer die CAI aus, die „constatazione amichevole di incidente“: ein dichtes, zweispaltiges Papierformular, das die meisten zum ersten Mal am Straßenrand vor sich haben, meist aufgewühlt und in Eile.
Indennizzo Diretto machte aus diesem Formular acht geführte Schritte auf dem Smartphone (GPS für den Ort, die Kamera für die Beweise, ein Finger für die Unterschriften), übernahm dann im Namen des Fahrers die Abwicklung mit dem Versicherer und hielt ihn über den Stand auf dem Laufenden.
- 8
- geführte Schritte ersetzen das Papierformular
- 3
- Plattformen aus einer einzigen Flutter-Codebasis
- 18k
- Zeilen Dart im Client
- 96%
- der Commits der App stammen von mir (239 von 248)
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet von der echten App, die auf ihrem Demo-Backend läuft. Ohne Ton.
Funktionen
Vom Straßenrand zum unterschriebenen Unfallbericht
01
Ein Formular, das sich wo möglich selbst ausfüllt
Datum und Uhrzeit kommen von der Uhr, die Adresse per Reverse Geocoding vom GPS, die persönlichen Daten aus dem Profil. Marke, Modell und Versicherer werden schon beim Tippen auf dem Server gesucht. Die erste Antwort (zwei Fahrzeuge, mehrere Fahrzeuge oder ein Fußgänger) entscheidet, welche der folgenden Schritte überhaupt nötig sind.
02
Beweise, direkt vor Ort gesammelt
Fotos des Führerscheins, geführte Aufnahmen der Schäden aus vorgeschlagenen Blickwinkeln, ein Tipp auf den Umriss des Autos für den ersten Anstoßpunkt, eine Sprachnotiz zum Hergang und Zeugen mit ihren Dokumenten. Jeder Anhang wird gleich nach der Aufnahme hochgeladen und beim erneuten Öffnen der Schadenmeldung als Vorschaubild wieder geladen.
03
Das offizielle Layout, übertragen
Die siebzehn Standardumstände des Unfallberichts behalten die zweispaltige Logik des Papierformulars bei, farblich wie das Original: blau für Fahrzeug A, gelb für Fahrzeug B. In den Abschnitten des Unfallgegners färbt sich der ganze Bildschirm gelb, sodass beide Fahrer immer wissen, wessen Daten gerade zu sehen sind.
04
Auf dem Glas unterschrieben, als PDF geliefert
Beide Fahrer unterschreiben auf dem Smartphone, längs über die lange Seite des Bildschirms, damit die Unterschrift die volle Breite hat. Nach dem Akzeptieren der Vollmacht wird die Schadenmeldung abgeschickt, und der offizielle Unfallbericht kommt als PDF zurück, ausgefüllt und unterschrieben, dargestellt in der App.
05
Die Schadenmeldung verfolgen
Abgeschickte Schadenmeldungen werden schreibgeschützt, und aus der Schrittanzeige wird freie Navigation. Statusänderungen kommen als Push-Benachrichtigungen, und der Kundenservice ist von jedem Bildschirm aus per WhatsApp oder SMS nur einen Tipp entfernt.
06
Der Einstieg
Eine Einführung auf drei Seiten, ein Gastmodus mit einer Demo-Schadenmeldung, um die App vor der Registrierung zu erkunden, Registrierung mit E-Mail-Bestätigung und Anmeldung per E-Mail, Facebook, Google oder Apple.
Responsiv
Eine Codebasis, drei Plattformen
Derselbe Flutter-Code wurde für iOS und Android ausgeliefert und lief auch im Web. Ab 800 px wird die untere Leiste zu einem Seitenmenü, und die Formulare stehen in einer gut lesbaren Spalte; Plattformunterschiede (sicherer Speicher, Kamera, Audioaufnahme, Push) sind hinter kleinen Wrappern gekapselt.
Web-Layout: SchadenmeldungenAuf breiten Bildschirmen ersetzt eine seitliche Navigation die untere Leiste. Web-Layout: FormularDieselben Widgets, begrenzt auf eine gut lesbare Spalte. Web-Layout: ZusammenfassungZusammenfassung, Status und Unterschriften auf einem breiten Bildschirm.
Unter der Haube
So wurde es entwickelt
Zustand und Struktur
Die Bildschirme werden von selbst geschriebenen BLoCs auf RxDart-Streams gesteuert (22 Stück, einer pro Bildschirm oder Formularschritt), ein InheritedWidget trägt die Sitzung. Ein übergeordneter BLoC verwaltet die gerade bearbeitete Schadenmeldung; jeder Schritt validiert, speichert seinen Teil über die API und gibt das aktualisierte Modell zurück, sodass sich eine Schadenmeldung bei jedem Schritt unterbrechen und später fortsetzen lässt.
Die Kommunikation mit dem Backend
Eine schlanke REST-Schicht mit Bearer-Tokens und transparenter Neuanmeldung, Multipart-Uploads für Fotos, Unterschriften und Audio sowie explizite Request-/Response-Mapper zwischen dem JSON des Servers und den Modellen der App.
Gerätefunktionen
Standortbestimmung mit Geocoding über OpenStreetMap und Adress-Autovervollständigung, Kameraaufnahmen, Audioaufnahme und -wiedergabe, ein Unterschriftenfeld, PDF-Darstellung in der App sowie Firebase Cloud Messaging mit lokalen Benachrichtigungen.
Die echte App, eigenständig lauffähig
Keine Attrappe: die Original-App, wieder in Betrieb
Ohne ihre Server kommt die App nicht über den Anmeldebildschirm hinaus, und diese Server sind ein Live-Dienst mit den Unfallmeldungen echter Menschen. Statt Bildschirme nachzustellen, habe ich den echten Code eigenständig lauffähig gemacht: im Browser, ohne irgendetwas dahinter.
- 1
Ein Backend, das in der App lebt
Die Netzwerkschicht übergibt jetzt jede Anfrage an einen In-Memory-Mock, der dieselben Routen und dasselbe JSON spricht wie die ursprüngliche API. Services, Modelle und BLoCs laufen unverändert: Was Sie sehen, ist die Produktionsoberfläche bei ihrer echten Arbeit, mit fiktiven Daten.
- 2
Dokumente, direkt in der App erzeugt
Die PDFs von Unfallbericht und Vollmacht wurden früher auf dem Server erzeugt. Die Demo setzt sie in Dart aus allem zusammen, was ins Formular eingegeben wurde, einschließlich beider Unterschriften, der Skizze des Anstoßpunkts und der Fotos.
- 3
Ersatz für die Hardware
Kamera, Mikrofon und GPS werden durch Beispielfotos, eine aufgezeichnete Sprachnotiz und eine feste Position ersetzt, sodass der komplette Ablauf in einem Browser-Tab funktioniert, ohne eine einzige Berechtigung anzufragen.
- 4
Per Skript aufgezeichnet, nicht von Hand
Flutter zeichnet auf ein Canvas, es gibt also kein DOM zum Anklicken. Ein Playwright-Storyboard findet die Widgets über den Barrierefreiheitsbaum von Flutter, bedient sie mit echten Touch-Events und zeichnet den Screencast von Chrome in Geräteauflösung auf. Jeder Clip und jeder Screenshot hier lässt sich mit einem einzigen Befehl neu erzeugen.
Alle gezeigten Personen, Kennzeichen und Schadenmeldungen sind fiktiv. Kontaktdaten und API-Schlüssel wurden aus dem Demo-Build entfernt.
Läuft vollständig in Ihrem Browser. Melden Sie sich mit einer beliebigen E-Mail-Adresse und einem beliebigen Passwort an, oder erkunden Sie die Demo-Schadenmeldung als Gast. Ziehen Sie zum Scrollen, wie auf einem Smartphone.
Alle Bildschirme
Alle Screenshots im Überblick
OnboardingDie erste von drei Einführungsseiten beim ersten Start. Onboarding: das Formular in der App ausfüllenDie Kernidee: der Unfallbericht auf Papier, erledigt auf dem Smartphone. GastmodusOhne Konto bietet die App eine schreibgeschützte Demo-Schadenmeldung zum Erkunden. AnmeldungE-Mail und Passwort oder Social Login. Meine SchadenmeldungenJede Schadenmeldung mit Datum und aktuellem Status. Entwürfe lassen sich per Wischgeste löschen. RegistrierungPrüfung jedes Felds; die Zustimmung zu Datenschutzerklärung und Nutzungsbedingungen ist Pflicht. E-Mail-BestätigungEin vierstelliger Code per E-Mail bestätigt die Adresse. Leere ListeEin neues Konto hat noch keine Schadenmeldungen: Die Schaltfläche in der Mitte startet die erste. Schritt 1: Wann und woDatum, Uhrzeit und Adresse werden über Uhr und GPS vorausgefüllt (Reverse Geocoding). DatumsauswahlAuswahlräder für Datum und Uhrzeit. Schritt 1: Was ist passiertDie Antwort entscheidet, welche der nächsten Schritte nötig sind. Schritt 2: VersicherungsnehmerPersönliche Daten aus dem Profil vorausgefüllt, Adresse mit Autovervollständigung. Schritt 2: Mein FahrzeugMarke, Modell und Versicherer werden schon beim Tippen auf dem Server gesucht. Schritt 3: Fahrer, Fotos, AnstoßpunktFoto des Führerscheins, ein Tipp auf das Auto markiert den ersten Anstoßpunkt, geführte Schadenfotos. Schritt 4: Das andere FahrzeugDer Bereich des Unfallgegners ist gelb markiert, wie im Papierformular. Schritt 6: UmständeDie 17 Standardumstände, eine Spalte pro Fahrzeug. Schritt 7: SprachnotizDen Hergang per Sprache schildern; die Aufnahme wird der Schadenmeldung angehängt. Schritt 7: Zeugen hinzufügenZeugen und Verletzte, jeweils mit Fotos ihres Ausweises. Schritt 8: ZusammenfassungAlle Eingaben, gruppiert in aufklappbaren Abschnitten, vor dem Unterschreiben noch änderbar. UnterschriftBeide Fahrer unterschreiben auf dem Smartphone; das Unterschriftenfeld liegt längs über die lange Seite. Vollmacht und AbsendenVollmacht und Datenschutzbedingungen akzeptieren, dann die Schadenmeldung abschicken. VollmachtDas Vollmachtsschreiben als PDF, dargestellt in der App. Erzeugter UnfallberichtDer offizielle Bericht, ausgefüllt und unterschrieben, als PDF. Schadenmeldung abgeschicktZurück in der Liste hat die neue Schadenmeldung den Status „Richiesta inoltrata“ (Anfrage gesendet). Abgeschickte Schadenmeldung: FahrzeugAbgeschickte Schadenmeldungen sind schreibgeschützt; aus der Schrittanzeige wird freie Navigation. Abgeschickte Schadenmeldung: Fotos und AnstoßpunktAnhänge werden bei Bedarf als Vorschaubilder geladen. Abgeschickte Schadenmeldung: UmständeFahrzeug A stand, Fahrzeug B ist aufgefahren. Abgeschickte Schadenmeldung: Zusammenfassung und StatusStatusbanner, Unterschriften und die erzeugten Dokumente. Gespeicherte UnterschriftDie Unterschrift, wie sie auf dem Server gespeichert ist. Unfallbericht als PDFDer Bericht, dargestellt in der App. BenachrichtigungenStatusänderungen als Push-Nachricht aus dem Backoffice (im Live-Betrieb über Firebase Cloud Messaging). ProfilKontodaten, Passwort ändern, Abmelden. EinstellungenKontakte und rechtliche Dokumente. Direkt zum SupportWhatsApp oder SMS an den Kundenservice, nur einen Tipp entfernt.
Nächste Fallstudie
nexi_payment →