Das Ziel
Neuer Konfigurator untermauert System-Kompetenz
Hersteller von Heizungen verstehen sich zunehmend als Anbieter ganzheitlicher Heiz- und Klimasysteme. Vor diesem Hintergrund wünschte sich ROTEX, die eigene Internet-Präsenz mit einem Heizungs-Konfigurator aufzuwerten, der das Unternehmen bei privaten Verbrauchern zur Nummer Eins für Komplett-Heizungssysteme positioniert. Mit dem Konfigurator sollen sich potenzielle Kunden anhand individueller Eckdaten ihr optimales Heizsystem aus mehr als 10.000 Kombinationsmöglichkeiten problemlos zusammenstellen können. Im Anschluss an die Konfiguration wird der Kunde an den nächstgelegenen Fachhandwerker weitergeleitet. So will ROTEX zum einen den Nutzwert der Website erhöhen, zum anderen den Vertrieb mit qualifizierter Vorabinformation stützen.
Anvisiert war von vornherein auch eine spätere Bereitstellung als eigenständige App für Tablets.
Die Lösung
FUF setzt alles auf eine Seite
Bei der Realisierung des Heizungs-Konfigurators entschied sich die Stuttgarter Internetagentur für eine Single-Page-Web-Application. Der vollständige Ablauf der Konfiguration spielt sich hierbei komplett ohne Reloads innerhalb einer Seite ab. Im Rahmen der Client/Server-Architektur wird das gesamte benötigte Datenvolumen gleich zu Anfang der Konfiguration auf den Client übertragen – danach laufen alle Konfigurations-Prozesse im Browser ab. Der Vorteil daran: die Berechnungen gehen schneller. Trotz einer immensen Berechnungslogik, die im Hintergrund abläuft, besitzt der Heizungs-Konfigurator somit eine hohe Performance.
Frank und Freunde konzipierte die Anwendungslogik, welche die Berechnungen umsetzt und sämtliche Parameter verarbeitet: Anhand der einzugebenden Ge-bäudedaten werden verschiedene Systemvorschläge zusammengestellt. Korrekturen der Angaben lassen sich jederzeit vornehmen und werden von der Anwendung sofort verarbeitet – der Kunde muss die Berechnung nicht mehr neu starten. Im Anschluss an die System-Empfehlung kann sich der Kunde detaillierte Informationen zum gewählten Heizungssystem aufrufen und das entsprechende System-Datenblatt als PDF erzeugen. Als Abrundung integrierte die Stuttgarter Internetagentur über eine Schnittstelle eine Liste der nächstgelegenen ROTEX-Systempartner in der vertrauten Google-Maps-Darstellung.
Die Technik
Zukunftsweisende Lösung als Single-Page-Anwendung
Die Datenpflege des Konfigurators erfolgt über die schemafreie, dokumentenorientierte Open-Source-Datenbank MongoDB; diese Software ist nicht-relational und nutzt ein vereinfachtes Datenmodell, das Flexibilität im Einsatz und eine Kosteneinsparung in der Entwicklung mit sich bringt. Im Gegensatz zu relationalen Datenbanken, liefert MongoDB komplette Datensätze zurück.
Als REST-Schnittstelle zwischen den Anwendungen hat FUF das kompakte Datenformat JSON eingesetzt. Bei der Schnittstelle für die Produktdaten (Middleware) und dem Admin-Interface vertraute die Internetagentur auf das bewährte Framework Symfony 2. Die browserbasierte Single-Page-Anwendung wurde mit dem Open-Source-Framework AngularJS erstellt – hier liegen Geschäftslogik und User-Interface. Die JacaScript-basierte Browserapplikation ermöglicht es, die Anwendung komplett im Client/Browser ablaufen zu lassen.
Logik im Client
Schnell und effektiv arbeiten mit einmaliger Serverabfrage
Die Innovation des ROTEX Heizungs-Konfigurators stellt die Anwendungslogik dar, die Frank und Freunde komplett auf den Client verlagerte. Da beim ersten Request mit dem Button „Systeme finden“ alle relevanten Produktdaten vom Server auf den Client übertragen werden, muss die Anwendung bei einer nachfolgenden Änderung der Filtereinstellung keine Serverabfrage mehr tätigen. Die Konfiguration läuft ohne lästige Reloads ab, da durch den Einsatz von JavaScript das HTML anhand der vorhandenen Datensätze neu zusammengebaut werden kann. Nützlicher Nebeneffekt: Durch local storage lässt sich der Heizungs-Konfigurator zukünftig auch offline-fähig machen.
Der Erfolg
Im Fokus des Konfigurators: Die Heizung als Komplettsystem
Mit dem neuen Heizungs-Konfigurator hat ROTEX ein ebenso überzeugendes Beratungs- wie vielversprechendes Marketingtool gewonnen. ROTEX hat mit diesem Angebot für seine Website-Besucher auch auf eine Neuausrichtung der Branche reagiert, die das Heizungssystem in seiner Gesamtheit betrachtet und weniger die einzelnen Komponenten. Trotz seiner komplexen Berechnungslogik ist der Heizungs-Konfigurator für die Anwender komfortabel bedienbar, die mit nur wenigen Klicks und Eingaben zum gewünschten Ziel gelangen. ROTEX hat mit dem Konfigurator ein zukunftsfähiges und ausbaubares System gewonnen, das in Zukunft auch als eigenständige App für Tablets bereitgestellt werden kann.
FUFazit
Die Internetagentur FUF // Frank und Freunde hat sich in kurzer Zeit in die Thematik Heizungsbranche und die komplexen Berechnungen, die dafür im Hintergrund ablaufen, eingearbeitet und sich ein profundes Spezialwissen zugelegt. Die Stuttgarter haben dabei zukunftsfähige Technologien so eingesetzt, dass diese für die jeweilige Aufgabe optimal geeignet sind und dem Kunden nutzen. So dokumentiert der Heizungs-Konfigurator für den Kunden ROTEX einmal mehr, dass für FUF neben der Funktionalität der Anwendungen stets auch eine maximale User-Experience im Zentrum steht.
Projekt- fakten
ROTEX Heating Systems GmbH
URL: heizungs-konfigurator.rotex.de
URL: de.rotex-heating.com
6 Monate Umsetzungszeitraum
3 Heizsystem-Kategorien
Mehr als 10.000 verschiedene Systemkombinationen
Rotex Heating Systems GmbH
Die ROTEX Heating Systems GmbH ist ein innovativer Hersteller von kompletten Heizungssystemen zum energiesparenden Heizen und Kühlen. ROTEX war eines der ersten Unternehmen weltweit, das konsequent auf die neuartige Brennwerttechnik setzte. Das schwäbische Unternehmen steht für hohe Innovationskraft und umfassendes Know-how im Bereich der umweltschonenden Wärmeerzeugung, -speicherung und -verteilung. ROTEX ist Mitglied der DAIKIN Gruppe, dem weltweit führenden Hersteller und Anbieter von Heizungs-, Kühlungs- und Klimaanlagen, und beschäftigt am Standort Güglingen rund 300 Mitarbeiter.
Die Zielgruppe
Der Heizungs-Konfigurator richtet sich gezielt an Verbraucher, die eine Immobilie bauen oder renovieren wollen und sich daher für den Kauf fortschrittlicher Komplett-Heizungssysteme interessieren. Sekundär richtet sich die Single-Page-Application auch an den Fachhandwerker und an Berater.
Die Technik- facts
Symfony2: Umsetzung des Administrationsbereichs mit Usermanagement und Authentifizierung für die Datenpflege.
Dokumentenbasierte Datenbank MongoDB im Backend.
Auslieferung der Daten als JSON über eine REST-Schnittstelle.
Offlinefähiger JavaScript-Client für die REST-Schnittstelle des Backends mit Programmierung der Anwendungslogik.
Responsive Webdesign mit HTML5 und CSS3.
Offline Datenhaltung inkl. Application Cache.
Datenpflege mit dem Symfony2-Bundle Sonata.
Glossar
ANGULARJS Open-Source-JavaScript-Framework von Google für die Programmierung von Browser-seitigen Web-Applikationen.
BUNDLE Als Bundles werden voneinander gelöste Einheiten einer Webapplikation bezeichnet.
JSON (JavaScript Object Notation) Datenaustauschformat, das für die Kommunikation zwischen Server und Client eingesetzt wird.
MONGODB Dokumentenorientierte Open-Source-Datenbank, die durch eine hohe Leistung und Flexibilität sowie eine einfache Skalierbarkeit besticht.
SONATA PROJECT Ein Open-Source Set von Bundles, die auf Basis von Symfony2 entwickelt wurden. Jedes Bundle spiegelt einen speziellen Nutzen wider.
SYMFONY In der Scriptsprache PHP geschriebenes, quelloffenes Web-Application-Framework.
Besonderheit //
Beste Voraussetzungen für eine App
Die technische Lösung, für die sich Frank und Freunde entschieden hat, ermöglicht es, den Heizungs-Konfigurator zukünftig auch offline-fähig zu machen. Denn mit einer einmaligen Online-Verbindung wird der für die Konfiguration benötigte Datenbestand vollständig vom Server auf den Client geholt.
Danach kann der Anwender den Konfigurator auch offline nutzen. Diese Lösung ist der ideale Ausgangspunkt für die Realisierung einer Tablet-App: Die App inklusive dem kompletten Datenbestand kann zum Download bereitgestellt werden. Bei Bedarf wird dabei die Datenbank durch Verbindung mit dem Internet synchronisiert. Damit wäre auch die App offline-fähig.