Criluma Viaggi
Ein Reisebüro für die Hosentasche: seine Angebote, eine Urlaubssuche, Buchung und Bezahlung und ein Termin bei einem Reiseberater.
- Rolle
- Flutter-Hauptentwickler: Zahlungen, Anmeldung mit Google, Facebook und Apple, Termine, Push-Benachrichtigungen, die Migration auf Null Safety und das Release 2.0
- Auftraggeber
- Criluma Viaggi, Reisebüro
- Zeitraum
- 2018–2022 (letztes Release 2.0.1, November 2021)
- Plattformen
- iOS und Android aus einer Flutter-Codebasis
Das Produkt
Criluma Viaggi ist ein Reisebüro in der Region Marken, und seine App brachte das Reisebüro in die Hosentasche der Kunden: die aktuellen Angebote, eine Suche über die Reisen, die sein Buchungssystem verkauft (Flug und Hotel oder nur das Hotel), und eine Buchung direkt auf dem Smartphone, von der Kostenaufstellung über die Angaben der Reisenden und die Versicherung bis zur Bezahlung.
Kunden konnten außerdem einen Termin mit einem der Reiseberater buchen, vor Ort im Reisebüro oder per Videoanruf. Ich war der Hauptentwickler der App, für iOS und Android aus einer Flutter-Codebasis, bis zur Version 2.0.1 im November 2021.
- 183
- der 222 Commits im Repository der App stammen von mir
- 18k
- Zeilen Dart im letzten Release
- 3
- Zahlungsintegrationen im Lauf der Jahre: Stripe, Nexi und MyBank
- 4
- Anmeldewege: das Konto des Reisebüros, Google, Facebook und Apple
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet aus dem letzten Release der App in Smartphone-Größe, mit wieder eingeschalteter Suche und Buchung in der App, wie in Version 1.6. Hotels, Preise und Banken sind erfunden; die Seiten der Bank zeichnet die Demo.
Funktionen
Vom Angebot im Schaufenster zum bezahlten Urlaub
01
Die Angebote im Schaufenster
Die Startseite ist das Schaufenster des Reisebüros: ein Karussell mit Angeboten, jedes mit Reiseziel, Hotel und Sternen, Terminen und Preis. Ein Angebot öffnet sich mit seinen Bildern, den enthaltenen Leistungen und einem Formular, über das man dem Reisebüro eine Frage dazu schickt.
02
Eine Suche, die zeigt, was buchbar ist
Flug und Hotel, nur das Hotel oder eine freie Suche. Reiseziel, Monat und Abflughafen grenzen sich gegenseitig ein: Nach jeder Auswahl antwortet der Server mit den Ländern, Regionen, Monaten und Flughäfen, für die es noch Abreisen gibt.
03
Hotel, Flüge und Zimmer
Die Ergebnisse lassen sich nach Preis, Kategorie oder Art sortieren. Ein Hotel öffnet sich mit seinen Bildern, dem Reiseveranstalter, Hin- und Rückflug und den für die Reisegruppe verfügbaren Zimmern; Zimmer lassen sich hinzufügen, Flüge und Termine ändern, und der Gesamtpreis zieht mit.
04
Von der Kostenaufstellung zur Buchung
Die Kostenaufstellung fasst Flüge, Aufenthalt und Versicherung auf einer Seite zusammen. Nach der Bestätigung werden für jeden Reisenden jedes Zimmers Anrede, Name, Telefon, Geburtsdatum und Steuernummer abgefragt, dann folgen die optionale Versicherung, die Bedingungen und eine Zusammenfassung mit den Einwilligungen, die der Vertrag verlangt.
05
Bezahlen mit MyBank
Im Code des letzten Release läuft die Bezahlung per MyBank-Überweisung: Die App öffnet die Zahlungsseite des Reisebüros, der Kunde wählt seine Bank, meldet sich dort an, gibt die Überweisung frei und kehrt mit bezahltem Urlaub in die App zurück. Frühere Versionen nahmen Karten über Stripe an, und ich habe auch eine Kartenzahlung über Nexi gebaut.
06
Ein Berater, vor Ort oder per Video
Angemeldete Kunden finden ihre Daten bereits ausgefüllt vor: Sie wählen Tag, Uhrzeit und Thema des Termins sowie einen Berater, den sie im Reisebüro oder per Videoanruf treffen. Die Anmeldung läuft über das CriluMy-Konto des Reisebüros oder über Google, Facebook und Apple.
Unter der Haube
So wurde es entwickelt
Die Kommunikation mit einem Reisebuchungssystem
Alles kommt vom Buchungsserver des Reisebüros, einem ASP.NET-Webservice, dessen Anfragen ihre Felder in einen JSON-String innerhalb von JSON verpacken, und dessen Antworten ebenso. Die App macht daraus typisierte Modelle und BLoCs auf RxDart-Streams: Die Suche hält Reiseziele, Monate und Flughäfen im Gleichschritt, und die Buchung trägt Reisegruppe, Zimmer, Flüge und Kostenaufstellung von Bildschirm zu Bildschirm.
Zahlungen und ein Plugin
Für die Kartenzahlungen mit Nexi habe ich nexi_payment geschrieben, ein Flutter-Plugin auf Basis der Android- und iOS-SDKs von Nexi, im Juni 2020 auf pub.dev veröffentlicht; ich betreue es bis heute. In der App kamen zuerst Karten über Stripe, dann Nexi, danach MyBank über GestPay (2020–2021): Die App öffnet die Zahlungsseite des Reisebüros in einer Web-View und liest das Ergebnis aus der Adresse, zu der sie zurückkehrt.
Konten, und mit Flutter Schritt halten
Eine CriluMy-Anmeldung wird vom Server des Reisebüros geprüft und in Firebase Auth gespiegelt; Google, Facebook und Apple laufen über Firebase und werden über Benutzername oder E-Mail dem CriluMy-Konto des Kunden zugeordnet oder legen eines an. Das Projekt begann 2018 mit einer Flutter-Beta und folgte Flutter bis 2.x: 2020 das neue Android-Embedding, 2021 Sound Null Safety für 2.0.
Eine App aufzeichnen, die nicht mehr in den Stores ist
Die App ist echt. Die Urlaube sind erfunden.
Die App ist nicht mehr in den Stores, aber das Reisebüro ist weiter tätig, und sein Buchungssystem, seine Angebote und Kunden gehören ihm. Deshalb verwenden die Aufnahmen eine eigenständig laufende Kopie des letzten Release, mit einem Ersatz für alles dahinter.
- 1
Das letzte Release, gebaut für den Browser
Version 2.0.1, für das Web gebaut mit dem nur wenige Monate jüngeren Flutter 2.10; der Build glaubt, auf einem iPhone zu laufen. Suche und Buchung in der App sind wieder eingeschaltet, wie in Version 1.6, und die wenigen Null-Safety-Fehler in diesen Bildschirmen sind behoben.
- 2
Ein Buchungsserver innerhalb der Seite
Jede Anfrage der App wird in der Seite von einem Ersatz beantwortet, der das Format des Webservice spricht, auf Basis eines erfundenen Katalogs: neun Hotels von Sardinien bis zu den Malediven, zwei Reiseveranstalter, Flüge ab fünf Flughäfen, Zimmer und Kostenaufstellungen. Die Anmeldung läuft auf dem In-Memory-Firebase aus den Tests.
- 3
Gezeichnete Bilder, erfundene Menschen
Die Fotos der Anbieter bleiben außen vor: Ein Skript zeichnet jeden Strand, jeden Pool und jedes Zimmer, die Porträts der Berater und die Logos der Veranstalter. Berater, Kunde und Banken sind erfunden, und die Seiten der Bank zeichnet die Demo.
- 4
Offline aufgezeichnet
Das Aufnahmeskript blockiert jede Anfrage, die den Rechner verlassen würde, sodass keine Aufnahme die Systeme des Reisebüros erreichen kann.
Logo, Oberfläche und Icons stammen aus der App. Angebote, Hotels, Preise, Flüge, Berater, Kunde, Banken und Bilder sind Beispielinhalte, die für dieses Portfolio erstellt wurden.
Hier gibt es keine Demo zum Ausprobieren: Das Reisebüro ist weiter tätig, deshalb zeigt diese Seite Aufnahmen mit Beispielinhalten.
Alle Bildschirme
Alle Screenshots im Überblick
AngeboteEin Karussell mit Angeboten, mit Preis, Hotel und Terminen. AngebotBilder, Preis pro Person, Verpflegung, Abflughafen und Termine. Hotel und LeistungenDas Hotel, seine Sterne und was im Angebot enthalten ist. Beim Reisebüro anfragenEine Anfrage zum Angebot, an das Reisebüro gesendet. SucheFlug + Hotel, nur Hotel oder freie Suche. ReisezieleErst die Länder, dann die Regionen. AbreiseDie Monate mit Abreiseterminen. ErgebnisseHotels mit Terminen und Preis, sortiert nach Preis, Kategorie oder Art. HotelBilder, der Reiseveranstalter, Sterne und Termine. Flüge und ZimmerHin- und Rückflug, die Zimmer und ihre Verpflegung. KostenaufstellungFlüge, Aufenthalt und Versicherung, vor der Buchung. ReisendeJeder Reisende jedes Zimmers: Anrede, Name, Telefon, Geburtsdatum und Steuernummer (Codice fiscale). GeburtsdatumAus einem Kalender ausgewählt. Versicherung und BedingungenDie optionale Versicherung und die Vertragsbedingungen. KasseDie Buchungsübersicht, die Einwilligungen und der Gesamtbetrag. MyBankDer Kunde wählt seine Bank (von der Demo gezeichnet). BezahltZurück in der App: bezahlt, eine Bestätigung per E-Mail folgt. TerminDie Daten des Kunden, bereits ausgefüllt, sowie Tag und Uhrzeit. ReiseberaterVor Ort im Reisebüro oder per Video (erfundene Berater). AnmeldungDas CriluMy-Konto des Reisebüros. RegistrierungName, E-Mail, ein Benutzername und ein Passwort.
Nächste Fallstudie
TEPY →