Der neue Hundehaftpflicht Vergleichsrechner

Es ist schon etwas länger her, dass ich über die Projekte berichtete, an denen ich in den letzten Monaten gerarbeitet habe oder momentan arbeite. Eines dieser Projekte war ein neuer Vergleichsrechner für die Hundehaftpflicht Versicherung für die vs vergleichen-und-sparen GmbH (VS). Dieses Projekt ist nun seit gestern online und ich möchte kurz über ein paar technische Details berichten, die unter der Haube dieser Applikation stecken.

Das Design

Das Design stammt direkt von den Webdesignern der vs VS. Federführend war hier Nina Kosmala, die sowohl das Desktop Design als auch das Design für die mobile Ansicht des Vergleichsrechners erstellt hat. Zusammen mit ihr wurde das Design in HTML5 umgesetzt. Das Hauptaugenmerk lag auf einem flachen Design, welches den Rechner im Vergleich zur Vorgängerversion einfacher, übersichtlicher und verständlicher macht. Alles ist ein wenig größer geraten, wirkt funktionaler und sieht auf den ersten Blick einfach frischer aus.

Weiterhin ist der Rechner responsiv entwickelt worden. Dies bedeutet, dass sich das Aussehen des Rechners dem benutzten Endgerät anpasst. Der Rechner ist sowohl auf einem Mobiltelefon als auch auf einem Desktop Rechner nutzbar. Wirft man einen Blick auf die Mitbewerber, ist eine solche responsive Entwicklung relativ neu auf dem Markt. Mit einem responsiven Design bleibt die Pflege bei lediglich einer Applikation. Der technische Aufwand bleibt also gering.

Darüber hinaus hat man aus den Erfahrungen der vergangenen Jahre heraus eine Angebotsanforderung in den Rechner integriert. Diese Erlaubt es lediglich ein Angebot zum gewählten Tarif anzufordern, ohne gleich einen Antrag absenden zu müssen.

Die Ergebnisanzeige wurde ebenfalls komplett überarbeitet. Man könnte sagen, dass den Tarifen einfach mehr Platz gegeben wurde und somit das gesamte Erscheinungsbild wesentlich freundlicher und benutzbarer erscheint. Neue Funktionen im Ergebnis gibt es natürlich auch. So wurde der Leistungsvergleich neu entwickelt. Er verfügt jetzt über eine Blätterfunktion, so dass der Benutzer in der Ansicht des Leistungsvergleichs bleiben kann und ihn nicht mehr schließen muss, wenn er einen anderen Tarif im Leistungsvergleich gegenüber stellen möchte. Auf Layer, die sich über das Ergebnis legen, wurde komplett verzichtet.

Weitere noch nicht sichtbare Funktionen wären z.B. eine Video Funktion, so dass zu den angezeigten Tarifen ein Video der Gesellschaft angezeigt werden kann. So bekommt der User einen Einblick, was genau angeboten wird. Die Transparenz wurde hier erheblich erhöht.

Diese Slideshow erfordert aktiviertes JavaScript.

HTML5, CSS3 und Constraint Validation API

Mit der Entscheidung einen neuen Vergleichsrechner zu entwickeln, wurde festgelegt konsequent HTML5 und die damit einhergehenden, relativ neuen Techniken zu benutzen, die jeder Browser von Hause aus mit sich bringt. Das Markup, also der HTML Quelltext, hat sich mit der Nutzung von HTML5 und CSS3 reduziert, während gleichzeitig die Funktionalität erhöht wurde. Eine dieser neuen HTML5 Funktionen ist die Constraint Validation API, welche es erlaubt Formulareingaben direkt bei der Eingabe zu validieren. Während man noch vor relativ kurzer Zeit für eine solche Funktionen aufwendig Javascript benutzen musste, erledigt sich der Programmieraufwand nun weitgehend mit dieser API. Der User muss das Formular also nicht mehr absenden, sondern sieht direkt, ob seine Eingaben richtig oder falsch waren. Die Benutzerfreundlichkeit konnte somit erheblich gesteigert werden. Natürlich werden die Benutzereingaben nach dem Absenden des Formulares nochmals serverseitig mit PHP validiert, so dass Eingaben, die nicht mit der Constraint Validation API überprüft werden konnten, auf jeden Fall mit PHP nochmals eingehender geprüft werden.

Die Constraint Validation API wurde von mir dahingehend erweitert, dass so genannte Callback Funktionen ebenfalls bei der Validierung von Eingabefeldern angewendet werden können. So kann man zum Beispiel nicht nur Eingaben anhand der HTML5 Formular Attribute, wie z.B. Pattern, Min oder Max validieren, sondern weitaus komplexere Überprüfungen von Eingabedaten erwirken. Nehmen wir nur mal die Eingabe eines Datums. Geprüft wird hier nicht nur das Format, sondern auch, ob das Datum einem gewissen Alter entspricht oder in einen gewissen Zeitraum passt.

Zend Framework 2

Der Rechner selbst wurde natürlich mit PHP5 programmiert. Hier fühle ich mich eben zu Hause. Als Basis dient das Zend Framework 2, welches bereits für andere Applikationen auf den Servern der VS vorinstalliert war. Ich habe hier intensiv mit dem Entwickler Team der VS (Martin Pranczke, Peter Schories und Nicolai Schütte) zusammen gearbeitet, so dass der neue Rechner nahtlos in die vorhande Framework Struktur integriert werden konnte. Mit dem Framework wurde eine modulare Basis für den Rechner geschaffen, die es erlaubt weitere Anwendungen zu entwickeln, die die Technik des Vergleichsrechners nutzen können. Wirtschaftlich gesehen ist das recht praktisch, da vorhandene Techniken nicht noch mal neu programmiert werden müssen, sondern einfach eingebunden und erweitert werden können.

Der Rechner selbst bietet neben den neuen HTML5 Formularen, der neu programmierten Technik zur Berechnung und Anzeige des Ergebnisses und vielerlei anderer Neuerungen auch die Anbindung an BiPRO Webservices, über die Tarife berechnet und beantragt werden können. Auch eine Schnittstelle zum Kundenverwaltungsprogramm wird vom Vergleichsrechner bedient, so dass Tarif- als auch Eingabedaten bei Antragsversand direkt in der Kundenverwaltung gespeichert werden.

Fazit

Es liegen ein paar ziemlich arbeitsintensive Monate hinter mir. Kopzferbrechen, endlos erscheinende Tests, fast schon resignierendes Kopfschütteln, bei Änderungen mitten im Entwicklungsprozess oder wenn es mal wieder „Das funktioniert nicht!“ hieß. Am Ende steht hier und jetzt ein komplett neuer, moderner Vergleichsrechner, der alle anderen Vergleichsrechner, die ich bisher entwickelt habe, aus technischer Sicht ein wenig in den Schatten stellt.

Sicherlich wird es hier und da noch ein wenig haken und einige Änderungen werden Einzug halten. Die Basis ist aber grundsolide und macht enorme Lust auf die Zukunft. Es mangelt nämlich nicht an wirklich guten Ideen.

Ich muss mich an dieser Stelle auch noch mal bei allen Beteiligten bedanken. Danke Nina, für das ausführliche, stundenlange Testen des responsiven Designs. Danke an Martin, Peter und Nicolai für die Dikussionsrunden bei Euch im Büro, wenn es mal wieder darum ging, wie etwas umgesetzt werden soll und ich mal wieder „Ähm … ich hab‘ das nicht verstanden“ gesagt habe. Danke an Anja und Engin, für die guten Diskussionen über die neue Datenbankstruktur, und dass ihr sie so angenommen habt. Danke für die Geduld. Das war gutes Teamwork!

Feedback? Gerne! Nutzt einfach die Kommentarfunktion. 😉

Bildquelle: Pixabay – stevepb / CC0 Public Domain

About Author: Marcel
Ich bin Senior PHP Developer bei MM Newmedia. Seit 2005 bin ich begeisterter Webentwickler und arbeite als Freelancer für namenhafte Firmen und entwickle jede Menge abgefahrenes Zeug und berichte darüber in meinem Blog.

2 thoughts on “Der neue Hundehaftpflicht Vergleichsrechner

Kommentar verfassen