Verwaltungsfrontend
Das Verwaltungsfrontend wird durch die Mitarbeiter im Markt bedient. Es ermöglicht das Anlegen des Wegenetzes im Markt, das virtuelle Platzieren der elektronischen Etiketten sowie das Einpflegen und Verknüpfen von Produkten. Zu Beginn wurde ein prototypischer Java Client entwickelt, der die Grundfunktionen bereit stellte und ein ersten Eindruck über Umfang und Aufwand der Anwendung vermittelte. Um die beiden eingesetzten Frontends technologisch zumindest ähnlich zu Gestalten und einen “state-of-the-art”-Ansatz zu wählen, wird der Java-Client letztendlich jedoch als Webanwendung entwickelt. Nachfolgend werden einige technologische Aspekte näher dargstellt.
Technologie
Das Verwaltungsfrontend ist webbasiert und wird als klassische Singlepage-Application mithilfe des Angular Frameworks entwickelt. Über REST-Schnittstellen kommuniziert es mit dem Backendsystem und kann somit unabhängig gehostet werden. Angular ist komponentenbasiert und bietet viele nützliche Funktionen zur asynchronen Kommunikation, zum Routing sowie Data Binding. Die eingesetzte Progammiersprache ist Typescript.
Der visuelle Editor bildet den Grundriss des Marktes ab und zeigt Wegpunkte, Laufstrecken sowie die platzierten Etiketten an. Für seine Entwicklung wird das Canvas-Framework Konva eingesetzt, welches ursprünglich für JavaScript entwickelt wurde, durch eine Portierung aber auch im Angularkontext einsetzbar ist. Da dieses jedoch lediglich das Rendern von Formen auf einem Canvas erleichtert, ist die Entwicklung einer geeigneten Logik und die Verknüpfung von Formen und Daten (Produkte, Etiketten, …) der wesentliche Entwicklungsaufwand dieses Subsystems.
Der Screenshot stellt die Produkt- bzw. Etikettenübersicht und den ersten Prototyp des grafischen Editors mit angedeutetem Wegenetz und Produktplatzierungen dar.
Marktkunden-Frontend
Das Marktkunden-Frontend wird durch die Kunden im Geschäft bedient. Der Marktkunde erhält hierüber die Möglichkeit nach Produkten zu suchen, Informationen hierzu einzusehen, das Produkt dem eigenen Einkaufszettel hinzuzufügen und sich einen Laufweg für alle Produkte auf dem Einkaufszettel anzeigen zu lassen. Die Navigation erfolgt hierbei nicht Live. Sondern nimmt den Markteingang als Ausgangspunkt. Des Weiteren sollen Funktionen für die Bewertung von Produkten und zum Erhalten einer Push-Nachricht, beim Erreichen des nächsten Produkts auf dem Laufweg, zu Verfügung stehen.
Technologie
Wie im Verwaltungs-Frontend kommt auch für das Marktkunden-Frontend das Framework Angular zum Einsatz. Das ebenfalls als Singlepage Application entworfene Frontend, wird aktuell allerdings mit dem veralteten AngularJS entwickelt. Demnach wird als Programmiersprache aktuell JavaScript verwendet. Überlegungen dieses Framework ebenfalls auf eine neuere Version von Angular (inkl. Verwendung von Typescript) umzuziehen und damit eine Angleichung der verwendeten Technologien vorzunehmen, werden gegebenenfalls nachgelagert an die Fertigstellung der angedachten Funktionen angestellt.
Für das Frontend sind über Funktionalitäten hinaus, Überlegungen hinsichtlich des Designs anzustellen, da die Usability möglichst einfach zu gestalten ist, sodass auch technisch weniger affine Personengruppen die Anwendung problemlos bedienen können. Ebenfalls sollte die Anwendung für die Darstellung auf mobilen Endgeräten optimiert sein, da dies in der realen Welt das Hauptanwendungsgebiet sein wird.
Die Kommunikation mit dem Backend erfolgt ebenfalls über REST-Schnittstellen.
Die Anordnung der Funktionalitäten ist aktuell folgendermaßen angedacht:
Der Anwender erhält beim Öffnen der Webanwendung ein UI, welche das Suchen nach einem Produkt über ein Eingabefeld oder über Produktkategorien (Darstellung aller in dieser Produktkategorie vorhanden Produkte) ermöglicht. Wählt ein Anwender ein Produkt aus, erhält er detaillierte Informationen zum Produkt und kann dieses dem Einkaufszettel hinzufügen. Der Einkaufszettel soll aus jeder Ansicht der Applikation eingeblendet werden können. Sobald der Einkaufszettel durch den Anwender fertiggestellt wird, kann ein Laufweg berechnet werden.
Nachfolgender Screenshot zeigt das prototypische Marktkunden-Frontend.
