Das Unternehmen

Produktkonfigurator programmieren? Ein innovatives Unternehmen aus der Textilbranche wandte sich mit der Frage an _Gemeinsam digital, wie es einen Online- Konfigurator für individuelle Produkte umsetzen kann.

Deshalb hat sich das _Gd-Team vertiefend mit den spezifischen Herausforderungen eines Produktkonfigurators für die Textilbranche beschäftigt. Als Material, dass kofiguriert werden soll, wurde Strick gewählt. Das Programmieren des Produktkonfigurators bedurfte besonderer Kenntnisse.

Die Herausforderung

Die Herausforderung für den Produktkonfigurator lag vor allem in den besonderen Anforderungen von Strickmaterial. Bei Strickwaren müssen Textelemente und Bilder direkt in das Strickerzeugnis integriert werden. Sie können nicht einfach aufgedruckt werden, wie zum Beispiel bei T-Shirts. Gleichzeitig können Strickmaschinen aber nur eine begrenzte Anzahl an Farben verarbeiten. Lädt also einE NutzerIn ein Foto im Konfigurator hoch, um dieses auf einen Kopfkissenbezug stricken zu lassen, so muss das Foto auf vier ausgewählte Farben reduziert werden.

EntwicklerInnen müssen sich zum Programmieren eines Strickkonfigurators deshalb detailiertes Wissen über die besonderen Anforderungen des genutzten Materials und die nötigen Produktionsprozesse aneignen. Auf dieser Grundlage können sie herausfinden, welche Technologie geeignet ist, um den Produktkonfigurator zu entwickeln.

Um einen Produktkonfigurator umzusetzen und bereitzustellen, benötigt ein Unternehmen einen Server und Programmiersprachen. Prinzipiell ist es mit fast jeder Programmiersprache möglich, Anwendungen oder speziell Konfiguratoren, zu entwickeln. Doch es ist hilfreich, jene technologischen Bausteine auszuwählen, die eine übersichtliche und auch verständlich geschriebene Dokumentation besitzen. Das erleichtert es den EntwicklerInnen sich für das Programmieren Detailwissen anzueignen. Auch eine aktive Community einer bestimmten Anwendung wie beispielsweise für Javascript hilft. Denn sie ist bereits auf viele Hindernisse in der Entwicklung gestoßen und kann wertvolle Lösungsansätze für die eigene an die Hand geben.

Vorgehensweise

Das _Gd-Team realisierte das Projekt mit der Design Thinking Methode.

Es probierte eine Vielzahl an Technologien aus. Zunächst betrachteten und probierten die ExpertInnen komplett fertige Anwendungen von IT-Anbietern. In diesen fertigen Anwendungen konnten sie Bilder zwar grundlegend bearbeiten. Doch Individualisierungen für die speziellen Anforderungen von Strickwaren waren nicht möglich. Deshalb schloss das _Gd-Team schließlich alle Komplettanwendungen aus und setzte die eigene Entwicklung aus verschiedenen fertigen Komponenten zusammen, die es individuell anpasste. Das erforderte auf technischer Ebene einige Ressourcen.

Den entwickelten Prototypen testeten Angehörige der potentiellen Zielgruppe. Das Feedback wurden anschließend umgesetzt.

Lösung

Als Lösung eignete sich also eine Eigenentwicklung einer webbasierten Software, ergänzt durch teilweise implementierte Funktionen und Softwarekomponenten.

Alle im Projekt verwendeten Technologien verwenden ein spezielles HTML-Element – den <canvas>-Tag. Er ermöglicht es, interaktiv Objekte im Internetbrowser zu erstellen, zu bearbeiten und zu speichern, was für den Konfigurator nötig ist. Deshalb betrachteten die EntwicklerInnen nur Programmiersprachen sowie Frameworks und Programmierbibliotheken von Programmiersprachen, die explizit auf diesen <canvas>-Tag zugreifen können.

Außerdem fokussierten sie auf die Programmiersprachen JavaScript und PHP (Hypertext Preprocessor), weil diese sehr große Communities an aktiven Entwicklern haben und sich so in vielen Projekten bewähren konnten.

PHP diente dazu, die hochgeladenen Bilder umgestalten zu können und ein mehrfarbiges Bild in vier Farben zu konvertieren.

Programmierbibliotheken vereinfachen in Javascript viele Funktionen, wie zum Beispiel:

  • JQuery – erweitert JavaScript durch zusätzliche Funktionen,
  • FileSaverJS – vereinfacht es, Bilder und Dokumente zu speichern und herunterzuladen,
  • SpectrumJS – vereinfacht das Farbenmanagement des Produktkonfigurators und gibt bereits Designelemente vor.

Da es sich bei der gesamten Anwendung um eine webbasierte Lösung handelt, ist es unumgänglich auch die Auszeichnungssprache HTML (Hypertext Markup Language) und für die Designelemente CSS (Cascading Style Sheets) zu verwenden.

Die hier beschriebenen Lösungswege, die die Dokumentation vertiefend erklärt, können Unternehmen, die individuelle Strickware im Internet anbieten, frei verwendet. Auch Unternehmen mit anderen Angeboten finden hier Orientierung für einen individuellen Produktkonfigurator.

Lesen Sie außerdem, warum das User Interface bei einem Konfigurator wichtig ist und wie eine Produktion in Losgröße 1 möglichst optimiert abläuft.

Suchmaschinen-Stichworte für Lösungsanbieter

  • Bildbearbeitung API/Bibliothek
  • Konfigurator API/Bibliothek
  • webbasierte Bildbearbeitung
  • Konfigurator für Strickerzeugnisse

Art des benötigten Umsetzungspartners/ Dienstleisters

Fullstack-Entwickler, Frontend-Entwickler, UI/UX Designer, Server Administrator

Komplexität bei der Entwicklung und Einführung der Lösung

Hoch*

*(Die Komplexität kann je nach Anforderungen, Investitionsbedarf, Schulungsbedarf, etc. der Aufgabenstellung stark variieren.)

Dauer der Einführung

6 Monate

Systemkosten für den Betrieb der Lösung pro Monat

unter 200 €*

Investitionskosten für die Lösung

über 10.000 €*

*Kosten über 10.000 € entstehen bei der Erstellung durch Dienstleister

Produktkonfigurator programmieren
Decke mit Produktkonfigurator
Ansicht Webbasierter Produktkonfigurator, hier wurde eine _Gemeinsam digital Strickdecke entworfen.
Produktkonfigurator Grau_gespiegelt
Weitere Varianten können mit dem Produktkonfigurator ausprobiert werden, z.B. Änderung der Farben oder Spiegelung des Bildes
Was sind Web-Konfiguratoren?

Konfiguratoren im Web sind Anwendungen, welche über Programmiersprachen entwickelt und über eine technische Infrastruktur für die NutzerInnen bereitgestellt werden.

Ein Konfigurator ermöglicht es KundInnen bzw. NutzerInnen, das Design eines Produktes selbst zu bestimmen. Dabei stellen Produzenten häufig eine Anwendung im Web zur Verfügung, in der die NutzerInnen bestimmte Elemente eines Produktes selbst bestimmen können und das individuell gestaltete Produkt letztlich in Auftrag geben.

Was sind Javascript und PHP?

JavaScript ist eine Programmiersprache, welche innerhalb von Internetbrowsern, wie zum Beispiel Google Chrome läuft, um dynamische Webseiten zu erstellen.

PHP ist eine Programmiersprache, welche auf den Servern der Webseitenbetreiber ausgeführt wird. Der Internetbrowser stellt dabei eine Anfrage an den Server für eine bestimmte Funktion, welche auszuführen ist und schickt das Ergebnis dann ggf. zurück zum Browser des Nutzers.

Was sind Frameworks?

Frameworks (deutsch: Rahmen, Gerüst) sind im Wesentlichen vorprogrammierte Funktionen für EntwicklerInnen und bieten ein „Gerüst“, um gewisse Anwendungen nicht komplett von Grund auf neu entwickeln zu müssen.

Technische Dokumentation

Front Technische Dokumentation Strickkonfigurator
Hier können Sie sich eine detailierte Beschreibung der Umsetzung per PDF herunterladen
Kontaktieren Sie uns.

Bei Fragen und Anmerkungen helfen wir Ihnen gerne weiter. Schreiben Sie uns!

Nicht lesbar? Neues Captcha anfragen. captcha txt

Start typing and press Enter to search