Ein Kunde der Prozesstechnik besaß mehrere Produktlinien mit Messgeräten für verschiedene Messgrößen. In jeder Linie gab es eine Familie von Geräten für unterschiedliche Messprinzipien. Zu Beginn des Projekts standen 4 Produktlinien mit jeweils 2-3 Messprinzipien und jeweils 4 Feldbussen im Fokus. Jede Produktlinie wurde an einem anderen Standort auf verschiedenen Plattformen und mit unterschiedlichen Toolchains entwickelt. Der Kunde wollte konzernweit einheitliche Benutzerschnittstellen möglichst generisch über Feldbus, App und Web anbieten. awinia kam die Aufgabe zu, das Web-UI für die Geräte zu entwickeln.
Der Kunde setzte modellgetriebene Softwareentwicklung ein, um die Parameterstruktur aller Geräte zu beschreiben. In diesem Zuge wurden auch Views für Geräteklassen bzw. Geräte definiert, die eine Menge von Parametern auf bestimmten Pages geeignet gruppierten. Durch einen Generator wurde für jedes konkrete Gerät eine entsprechende Strukturbeschreibung im JSON-Format erzeugt und auf dem Gerät abgelegt.
awinia entwickelte eine generische Angular-Applikation, die das gesamte Webfrontend eines Geräts clientseitig zur Laufzeit erzeugen kann. Dazu wird die Strukturbeschreibung vom Gerät geladen, geparst und entsprechende Webpages dargestellt. Die Architektur folgt dem Model-View-View-Model Pattern, wobei HTML-SASS-Templates für das einheitliche Look-And-Feel und TypeScript für das View-Model verwendet wurde. Aus der Strukturbeschreibung erzeugt der Parser HTML-Templates und View-ViewModell-Bindung zu Parametern zur Laufzeit. Ein Vorteil dieses Vorgehens ist, dass Speicherplatz für die Templates auf dem Gerät gespart werden kann.
Für die HTML-Elemente auf den Webseiten existieren Styles nach Konzernvorgaben, die ständig weiter entwickelt werden. Durch das MVVM Muster können sich diese unabhängig vom Rest der Applikation verändern.
Der Model-Teil der Applikation wurde über Services gelöst, die mit dem Backend über ein generisches Parameterzugriffsprotokoll kommunizieren. Das Protokoll wird über WebSockets getunnelt und ist abwärtskompatibel zu dem proprietären Protokoll, mit dem die Service-Schnittstelle der Geräte betrieben wird. Es kann auch anderweitig getunnelt werden, etwa über eine serielle Leitung. Damit können auch Geräte, die kein Ethernet besitzen, eine vollständig funktionale Web-UI anbieten.
Das Parameterzugriffsprotokoll unterstützt Lesen und Schreiben von Dateien und Parametern. Zusätzlich kann man sich über ein Publish-Subscribe-Pattern auf Parameteränderungen registrieren. Dies eignet sich sehr gut für kleine Geräte, weil durch das dedizierte Nachladen von Parametern Bandbreite gespart wird.
Um zusätzliche dedizierte gerätespezifische Funktionalität hinzuzufügen, ist die Angular-Applikation als Webcomponent realisiert, die mittels Dependency-Injection einfach um weitere Komponenten erweitert werden kann. So kann je nach Gerätevariante flexibel ein schlankes oder umfangreiches Web-UI zur Compilezeit zusammengestellt werden. Alle Komponenten können auch aus Browser-Controls von Apps oder von Feldbus-Clients verwendet werden. Besitzt die jeweilige Technologie ein Browser-Control, muss für diese dadurch kein dediziertes Frontend implementiert werden.
Alle Webfrontends lassen sich generisch testen, da sie ihrer Strukturbeschreibung folgen. Dazu wurden Systemtests auf Seleniumbasis in Python implementiert, die alle Views automatisiert verifizieren. Eine weitere Herausforderung war, dass die Formate der Strukturbeschreibungen sich je nach Entwicklungsstandort des Geräts unterschieden. Diese Unterschiede wurden im Parser abgebildet und somit standortübergreifend einheitliche Benutzerschnittstellen erzeugt.
Die von awinia entwickelten Webfrontends sind mittlerweile auf 2 Produktlinien im Einsatz. Einige der Geräte haben knapp 1000 Parameter und mehrere hundert Pages. Neue Gerätevarianten können innerhalb weniger Tage inklusive des gesamten Frontends hochgezogen werden. Die Geräte werden weltweit hunderttausendfach verkauft und das Anwenderfeedback aus dem Betrieb und bei Messen ist sehr gut. Der Ansatz eignet sich hervorragend für datenzentrierte Anwendungen, für die standardisierte Seiten ausreichend sind, die kaum über clientseitige Logik verfügen.