Der neue Locktec-Schließfachkonfigurator ist online

Heute gibt es Grund zum Feiern 🎉! Der neue Schließfachkonfigurator meines langjährigen Kunden LockTec GmbH ist online. Was ist an diesem Schließfachkonfigurator so besonders? Welche Technologien finden hier Anwendung? Das erfahrt ihr in diesem Blogbeitrag.

Schließfachkonfigurator, die III.

Die Firma LockTec GmbH bietet seit vielen Jahren einen Schließfachkonfigurator auf ihrer Website an. Personen, die eine Schließfachanlage kaufen möchten, können dort den gewünschten Schließfachtyp, sowie die Anzahl und Größen der Fächer per Drag&Drop zusammenstellen.

Um das Jahr 2017 herum, durfte ich bereits die zweite Version des Schließfachkonfigurators mitentwickeln. Anfang 2024 war jedoch klar, dass wir den Schließfachkonfigurator erneut überarbeiten müssen, denn seit Version 2 hat sich viel am Schließfachmarkt getan.

Seit 2017 kamen 4 weitere Schließfachtypen hinzu. Zum Beispiel die sogenannten SmartTerminals. Diese sind besonders für die Dokumentenübergabe in Behörden wie z. B. Kfz-Zulassungsstellen geeignet. Zu den neuen Schließfachtypen gehören außerdem Fahrrad-Boxen (sog. Velosafes), die ein wettergeschütztes und diebstahlgeschützes Abstellen von Fahrrädern ermöglichen. Optional verfügen diese Velosafes auch über eine Lademöglichkeit für E-Bikes. Ein weiteres spannendes Schließfachkonzept sind Palettenboxen. In diesen Palettenboxen kann Palettenware (z. B. Baumaterial) zum Abholen außerhalb der Geschäftszeiten bereitgestellt werden.

Short Facts

Nachstehend einige kurze Fakten zum neuen Schließfachkonfigurator:

Das Konzept

Als im Frühjahr 2024 deutlich wurde, dass ein neuer Schließfachkonfigurator benötigt wird, kamen wir – wie immer – in einer kurzen Besprechung schnell auf einen gemeinsamen Nenner. „Wir“ bedeutet in diesem Fall die Herren Johannes Clausen (GF LockTec GmbH) und Lukas Clausen (GF Sitec GmbH und Gesamt-IT-Leiter) und meine Wenigkeit.

Die Rahmenbedingungen waren klar:

• einfache Einbindung in verschiedene Web-Frontends (somit keine feste Bindung an CMS-Systeme wie WordPress)
• min. 5-sprachig (deutsch, englisch, italienisch, französisch, spanisch)
• modernes Design, bedingt responsive
  Das Design sollte sich zwar an verschiedene Bildschirmgrößen anpassen, aber die Darstellung auf dem Handy sollte nicht relevant sein, da die meisten Kunden, den Konfigurator von ihrem Arbeitsplatz-PC aus bedienen
• bedingt konfigurierbar
  Das Einpflegen neuer Schließfachtypen und Fachgrößen sollte für einen Entwickler sehr einfach möglich sein.
• kein Web-Backend / Konfigurationen sollten per E-Mail an den Vertrieb gesendet werden

Bei diesen Anforderungen war für mich sehr schnell klar, dass ich auf Angular setzen werde. Die in Angular verwendete Typescript-Syntax hat viele Ähnlichkeiten mit PHP, Java und natürlich JavaScript. Da diese Sprachen bei LockTec viel Verwendung finden, könnte sich ein anderer Inhouse-Entwickler schnell in dieses Projekt hineinfinden.

Mein Part

Bei diesem Projekt war ich der einzige Entwickler, der aktiv den Programmcode entwickelt hat. Auf der fachlichen / schließfachtechnischen Seite und in puncto Grafiken war eine Zusammenarbeit mit verschiedenen Abteilungen und Personen sinnvoll und erforderlich. So galt es natürlich, sich an CI- / CD-Vorgaben zu halten, die aktuellen Schließfachgrößen, -grafiken und weitere technische Daten zu erhalten und einzupflegen.

Zunächst legten wir den Ablauf der Konfiguration fest. Da es so viele Optionen und Ausstattungsvarianten gibt, hielten wir einen 1-Schritt-Konfigurator nicht mehr für sinnvoll. Wir entschieden uns für einen Konfigurationsassistenten, einen 7-Schritte-Wizard, der die Kunden/-innen Schritt für Schritt durch die Konfiguration führt.

Anschließend benötigte ich ein Konzept, wie die Konfigurationsmöglichkeiten, der Inhalt der einzelnen Schritte, die Fachgrößen usw. vorgehalten werden sollten. Dies erforderte intensives Durchdenken, Skizzieren und Testen, da es bei den Fachgrößen und Optionen unterschiedliche Bedingungen gibt. Zum Beispiel ist nicht jede Zahlmöglichkeit bei jedem Schließfachtyp vorhanden.

Schließlich galt es, das Bedienkonzept und UI festzulegen. Bei den meisten Schließfachtypen habe ich die Konfiguration als Drag&Drop umgesetzt. Bei den Velosafe-Fahrradgaragen erschien dieser Ansatz nicht sinnvoll. Daher habe ich mich dort für einen Formular basierten Konfigurator entschieden.

simplify your automatische Übersetzungen

Wie vorhin erwähnt, sollte es den Konfigurator mehrsprachig geben. An sich kein Problem. Angular hat ein Internationalisierungsmodul (Stichwort i18n). Man muss im Quellcode nur die Texte, die übersetzt werden sollen mit dem Attribut „i18n“ oder „$localize“ markieren und schon weiß Angular, dass diese Texte übersetzt werden sollen. Anschließend tippt man im Terminal den Befehl „ng extract-i18n“ ein und Angular zieht die zu übersetzenden Texte in eine sogenannte Xliff-Datei namens messages.xlf. Diese kopiert man dann und benennt sie für jede Zielsprache entsprechend um und schreibt dann die Übersetzungen in die jeweilige Datei. Soweit so gut.

Was ist aber, wenn sich nach einiger Zeit – vielleicht kurz vor dem Rollout – Textänderungen ergeben? Bodo Bach würde hier wohl sagen: „Ich hätte gerne ein Problem.“ Wenn man nämlich nach den Textänderungen im Quellcode wieder den Befehl „ng extract-i18n“ eingibt, wird die Datei messages.xlf platt gemacht und überschrieben. Änderungen gehen dann erstmal verloren. In der Regel hat man diese Datei zwar in der Versionskontrolle (z. B. git) und kann nachvollziehen, welche Zeilen sich geändert haben, aber häufig verändert Angular die Reihenfolge innerhalb der Datei. Schönes Wetter, heute, oder? 😒

Wie bekommt man nun die neuen Texte in die bereits erstellten Zielsprach-Dateien? Die deutsche Datei wieder zu kopieren, würde ja alle Übersetzungen überschreiben. Die Reihenfolge ist auch nicht mehr die gleiche … Sehr schön. Das bedeutet viel Handarbeit. Grummel …

Als ich diesen Prozess durchdacht habe, war klar, dafür braucht man eine vernünftige Software. Die Übersetzungen sollten mit DeepL halbwegs automatisiert werden, also habe ich mir erstmal DeepL angesehen. Juhu! DeepL kann Xliff-Dateien verarbeiten, doch da kommt mein Lieblingswort ins Spiel: „Aber“ Denn DeepL übersetzt Xliff-Dateien immer komplett und braucht dementsprechend viele Tokens. Sprich: Es kann teuer werden. Außerdem kann Angular nur die Xliff-Formate 1.2 und 2.0 exportieren. DeepL verarbeitet nur Version 2.1! POEditor oder so ähnlich kann wohl auch Xliff 2.0, gefällt mir aber nicht.

Langer Rede kurzer Sinn: Bevor ich stundenlang nach einer passenden Software suche, entwickle ich sie lieber selbst.

DOTT (das Online-Translation-Tool – einen besseren Namen habe ich noch nicht…) ist eine webbasierte Software, die Xliff-Dateien verarbeiten kann. Versionen 1.2, 2.0 und 2.1. Außerdem kann es sowohl automatische KI-basierte Übersetzung mit DeepL und ChatGPT, Projektverwaltung, insgesamt über 30 Sprachen für automatische Übersetzung oder beliebig viele Sprachen für die manuelle Übersetzung. Es beinhaltet eine Dokumentenupload-Funktion für Zusatzinformationen für die Übersetzer, div. feingranulierte Freigabemöglichkeiten für Projekte oder einzelne Projektsprachen usw.

Aktuell befindet sich DOTT (oder wie auch immer) noch im geschlossenen Alpha-Test. Aber nicht mehr lange 😉 Wer auf dem Laufenden bleiben möchte folgt einfach auf Facebook meinem Account Pöpperl – Code & Content. Wer Beta-Tester werden möchte, kann mir gerne eine E-Mail schreiben. In meinem Postfach ist noch Platz 😉

Paradigmenwechsel

Früher – also vor rund 10 Jahren – habe ich oft aus Programmiersicht entwickelt. Der erste Blick galt den Datenstrukturen. Welche Datenbanktabellen werden benötigt? Welche Daten müssen gespeichert werden? Ach ja, und dann gibt es ja eine ganz einfach Möglichkeit um das User-Interface zu erstellen: CRUD-Controller. Dabei kamen meist unübersichtliche Tabellen und Formulare heraus, bei denen man zwar alle benötigten Daten eingeben konnte, aber die Arbeit damit war für den Endnutzer oft kompliziert und umständlich.

Viel besser ist doch der Blickwinkel aus Sicht des Nutzers. Was möchte der Nutzer in diesem Moment tun? Was möchte er erreichen? Genau das sollte mit so wenigen Klicks und so wenig Eingaben wie möglich, möglich sein. Das ist das Ziel. Stichwort Task-based-UI (Aufgabenbasierte Nutzerschnittstellen). Die Nutzer sollen gerne, schnell und einfach mit der Software arbeiten können. Ich hoffe, dass wir mit dem neuen Schließfachkonfigurator genau dieses Ziel erreichen!

Einmal Redesign zum mitnehmen, bitte?

Haben Sie auch eine Software, die dringend überarbeitet werden müsste? Legacy-Code der dringend ein Update braucht? Wenn es dabei um Software in den Sprachen PHP, Java, JavaScript, Typescript geht, dann rufen Sie mich einfach an oder schreiben Sie mir eine Email, und wir sehen, was ich für Sie tun kann.