Porta Fenster, inspiriert durch den Erfolg des Rodenberg Konfigurators, trat an uns heran mit dem Wunsch nach einem ähnlichen, aber maßgeschneiderten Fensterkonfigurator. Was als Vertriebstool begann, entwickelte sich zu einer umfassenden digitalen Plattform, die die gesamte Produktpalette von Porta Fenster abbildet und den Verkaufsprozess revolutioniert.
Inhaltsverzeichnis
Inhaltsverzeichnis
Der Fensterkonfigurator
Erweiterung des Produktspektrums
Backend-Entwicklung: Persistenz und Datenverwaltung
Image-Generator: Visuelle Repräsentation der Konfigurationen
VueJS-Plattform: Integration aller Komponenten
Integration des Rodenberg-Türkonfigurators
Erweiterung um Beschattungssysteme
Fassadenkonfigurator: Die visuelle Krönung
Innovative Versuche und Lernprozesse
Fazit
Der Fensterkonfigurator
Der initiale Fokus lag auf der Entwicklung eines Fensterkonfigurators als Vertriebstool. In enger Zusammenarbeit mit dem Porta Vertriebsteam durchlief der Konfigurator mehrere Entwicklungs Iterationen, um den spezifischen Anforderungen gerecht zu werden.
Techstack
- Konva.js für die grafische Darstellung
- Vanilla JavaScript für die Kernfunktionalität
- jQuery für die DOM-Manipulation und AJAX-Anfragen
Die Wahl fiel auf Konva.js aufgrund seiner Leistungsfähigkeit bei der Erstellung interaktiver Grafiken, was für die präzise Darstellung von Fenstern und Türen unerlässlich war.
Erweiterung des Produktspektrums
Mit dem Erfolg des Fensterkonfigurators wuchs der Wunsch, das gesamte Produktspektrum abzubilden. So wurden Hebeschiebetüren sowie Balkon- und Terrassentüren in den Konfigurator integriert, was die Komplexität des Systems erhöhte, aber auch seinen Nutzen für Kunden und Vertrieb signifikant steigerte.
Backend-Entwicklung: Persistenz und Datenverwaltung
Um die erstellten Konfigurationen zu speichern und wieder abrufen zu können, wurde ein robustes Backend-System entwickelt.
Techstack
- Ruby on Rails als Backend-Framework
- PostgreSQL als Datenbank
Die Entscheidung für Ruby on Rails basierte auf der vorhandenen Expertise und der Fähigkeit des Frameworks, schnell skalierbare und wartbare Anwendungen zu erstellen.
Image-Generator: Visuelle Repräsentation der Konfigurationen
Zur Verbesserung der Benutzerfreundlichkeit und für eine effizientere Verwaltung der Konfigurationen wurde ein Image-Generator entwickelt.
Techstack
- GoLang für den Image-Generator
Die Wahl fiel auf GoLang aufgrund seiner Effizienz bei der Bildverarbeitung und der einfachen Integration in die bestehende Infrastruktur.
VueJS-Plattform: Integration aller Komponenten
Um alle entwickelten Komponenten in einer kohärenten Benutzeroberfläche zu vereinen, wurde eine umfassende Plattform auf Basis von VueJS geschaffen.
Diese Plattform integriert vorgefertigte Beispielkonfigurationen, ermöglicht die Erstellung neuer Konfigurationen und fasst Anfragen für das Sachbearbeitung Team von Porta zusammen.
In Zusammenarbeit mit Rodenberg wurde deren Türkonfigurator in die Plattform integriert, was das Produktangebot um Haustüren erweiterte und die Plattform zu einem One-Stop-Shop für Bauherren machte

Erweiterung um Beschattungssysteme
Die Integration von konfigurierbaren Optionen für Rollladen, Raffstore und Rollos vervollständigte das Angebot und ermöglichte Kunden, ganzheitliche Lösungen für ihre Fassadengestaltung zu planen
Fassadenkonfigurator: Die visuelle Krönung
Als krönender Abschluss wurde ein Fassadenkonfigurator entwickelt, der es Nutzern ermöglicht, ihre konfigurierten Elemente in verschiedenen, farblich anpassbaren Hausfassaden zu visualisieren.
Innovative Versuche und Lernprozesse
Ein ambitionierter Versuch, KI-gestützt benutzerdefinierte Hausfassaden zu integrieren, zeigte die Grenzen der aktuellen Technologie auf. Obwohl die finale Implementierung aufgrund technischer Hürden nicht realisiert werden konnte, demonstrierte dieser Prozess die Innovationsbereitschaft des Teams und lieferte wertvolle Erkenntnisse für zukünftige Projekte.
Fazit
Die Entwicklung des Porta Fenster Konfigurators hat sich von einem einfachen Vertriebstool zu einer umfassenden digitalen Plattform entwickelt, die das gesamte Produktspektrum abdeckt und den Verkaufsprozess revolutioniert. Durch die Integration verschiedener Technologien und die ständige Erweiterung der Funktionalitäten wurde eine Lösung geschaffen, die sowohl den Bedürfnissen der Kunden als auch denen des Vertriebs gerecht wird. Trotz Herausforderungen und nicht realisierbarer Ideen zeigt das Projekt die Bedeutung von Flexibilität, kontinuierlicher Innovation und enger Zusammenarbeit zwischen Entwicklern und Stakeholdern in der digitalen Transformation traditioneller Branchen.