{"id":919,"date":"2019-06-08T09:03:59","date_gmt":"2019-06-08T09:03:59","guid":{"rendered":"https:\/\/2019.iot-embedded.de\/?p=919"},"modified":"2021-05-14T10:08:13","modified_gmt":"2021-05-14T08:08:13","slug":"aktueller-stand-frontend-08-06-2019","status":"publish","type":"post","link":"http:\/\/www.iot-embedded.de\/iot-2019\/indoor-navigation\/aktueller-stand-frontend-08-06-2019\/","title":{"rendered":"Aktueller Stand Frontend 08.06.2019"},"content":{"rendered":"\n

Verwaltungsfrontend<\/strong><\/strong><\/p>\n\n\n\n

Das Verwaltungsfrontend wird\n durch die Mitarbeiter im Markt bedient. Es erm\u00f6glicht das Anlegen des\n Wegenetzes im Markt, das virtuelle Platzieren der elektronischen Etiketten\n sowie das Einpflegen und Verkn\u00fcpfen von Produkten. Zu Beginn wurde ein\n prototypischer Java Client entwickelt, der die Grundfunktionen bereit stellte\n und ein ersten Eindruck \u00fcber Umfang und Aufwand der Anwendung vermittelte. Um\n die beiden eingesetzten Frontends technologisch zumindest \u00e4hnlich zu Gestalten\n und einen \u201cstate-of-the-art\u201d-Ansatz zu w\u00e4hlen, wird der Java-Client\n letztendlich jedoch als Webanwendung entwickelt. Nachfolgend werden einige\n technologische Aspekte n\u00e4her dargstellt.<\/p>\n\n\n\n

Technologie<\/strong><\/p>\n\n\n\n

Das Verwaltungsfrontend ist\n webbasiert und wird als klassische Singlepage-Application mithilfe des Angular\n Frameworks entwickelt. \u00dcber REST-Schnittstellen kommuniziert es mit dem\n Backendsystem und kann somit unabh\u00e4ngig gehostet werden. Angular ist\n komponentenbasiert und bietet viele n\u00fctzliche Funktionen zur asynchronen\n Kommunikation, zum Routing sowie Data Binding. Die eingesetzte\n Progammiersprache ist Typescript. <\/p>\n\n\n\n

Der visuelle Editor bildet den\n Grundriss des Marktes ab und zeigt Wegpunkte, Laufstrecken sowie die\n platzierten Etiketten an. F\u00fcr seine Entwicklung wird das Canvas-Framework\n Konva eingesetzt, welches urspr\u00fcnglich f\u00fcr JavaScript entwickelt wurde, durch\n eine Portierung aber auch im Angularkontext einsetzbar ist. Da dieses jedoch\n lediglich das Rendern von Formen auf einem Canvas erleichtert, ist die\n Entwicklung einer geeigneten Logik und die Verkn\u00fcpfung von Formen und Daten\n (Produkte, Etiketten, \u2026) der wesentliche Entwicklungsaufwand dieses\n Subsystems. <\/p>\n\n\n\n

Der Screenshot stellt die\n Produkt- bzw. Etiketten\u00fcbersicht und den ersten Prototyp des grafischen\n Editors mit angedeutetem Wegenetz und Produktplatzierungen dar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Marktkunden-Frontend<\/strong><\/p>\n\n\n\n

Das Marktkunden-Frontend wird durch die Kunden im Gesch\u00e4ft\n bedient. Der Marktkunde erh\u00e4lt hier\u00fcber die M\u00f6glichkeit nach Produkten zu\n suchen, Informationen hierzu einzusehen, das Produkt dem eigenen\n Einkaufszettel hinzuzuf\u00fcgen und sich einen Laufweg f\u00fcr alle Produkte auf dem\n Einkaufszettel anzeigen zu lassen. Die Navigation erfolgt hierbei nicht Live.\n Sondern nimmt den Markteingang als Ausgangspunkt. Des Weiteren sollen\n Funktionen f\u00fcr die Bewertung von Produkten und zum Erhalten einer\n Push-Nachricht, beim Erreichen des n\u00e4chsten Produkts auf dem Laufweg, zu\n Verf\u00fcgung stehen.<\/p>\n\n\n\n

Technologie<\/strong><\/p>\n\n\n\n

Wie im Verwaltungs-Frontend kommt auch f\u00fcr 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. \u00dcberlegungen 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\u00fcr das Frontend sind \u00fcber Funktionalit\u00e4ten hinaus, \u00dcberlegungen hinsichtlich des Designs anzustellen, da die Usability m\u00f6glichst einfach zu gestalten ist, sodass auch technisch weniger affine Personengruppen die Anwendung problemlos bedienen k\u00f6nnen. Ebenfalls sollte die Anwendung f\u00fcr die Darstellung auf mobilen Endger\u00e4ten optimiert sein, da dies in der realen Welt das Hauptanwendungsgebiet sein wird.
Die Kommunikation mit dem Backend erfolgt ebenfalls \u00fcber REST-Schnittstellen.
Die Anordnung der Funktionalit\u00e4ten ist aktuell folgenderma\u00dfen angedacht:
Der Anwender erh\u00e4lt beim \u00d6ffnen der Webanwendung ein UI, welche das Suchen nach einem Produkt \u00fcber ein Eingabefeld oder \u00fcber Produktkategorien (Darstellung aller in dieser Produktkategorie vorhanden Produkte) erm\u00f6glicht. W\u00e4hlt ein Anwender ein Produkt aus, erh\u00e4lt er detaillierte Informationen zum Produkt und kann dieses dem Einkaufszettel hinzuf\u00fcgen. Der Einkaufszettel soll aus jeder Ansicht der Applikation eingeblendet werden k\u00f6nnen. Sobald der Einkaufszettel durch den Anwender fertiggestellt wird, kann ein Laufweg berechnet werden.
Nachfolgender Screenshot zeigt das prototypische Marktkunden-Frontend.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Verwaltungsfrontend Das Verwaltungsfrontend wird durch die Mitarbeiter im Markt bedient. Es erm\u00f6glicht das Anlegen des Wegenetzes im Markt, das virtuelle Platzieren der elektronischen Etiketten sowie das Einpflegen und Verkn\u00fcpfen von Produkten. Zu Beginn wurde ein prototypischer Java Client entwickelt, der<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/919"}],"collection":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/comments?post=919"}],"version-history":[{"count":1,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/919\/revisions"}],"predecessor-version":[{"id":1138,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/posts\/919\/revisions\/1138"}],"wp:attachment":[{"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/media?parent=919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/categories?post=919"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.iot-embedded.de\/iot-2019\/wp-json\/wp\/v2\/tags?post=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}