{"id":585,"date":"2021-07-11T17:15:18","date_gmt":"2021-07-11T15:15:18","guid":{"rendered":"https:\/\/www.iot-embedded.de\/iot-2021\/?p=585"},"modified":"2021-07-11T17:18:04","modified_gmt":"2021-07-11T15:18:04","slug":"frontend-phase-2-umsetzung","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2021\/beverage-monitoring\/frontend-phase-2-umsetzung\/","title":{"rendered":"Frontend Phase 2 &#8211; Umsetzung"},"content":{"rendered":"\n<p>F\u00fcr die Umsetzung der in Part 1 beschriebenen Frontends haben wir die Visual Studio Code IDE verwendet. Bei der Konzeption haben wir uns bewusst gegen Responsive Design entschieden, da bestimmte Oberfl\u00e4chen f\u00fcr bestimmte Rollen in der Gastronomie vorgesehen sind. Hier ist es klar, dass Servicekr\u00e4fte Smartphones verwenden, w\u00e4hrend an der Bar ein Tablet zur Verf\u00fcgung steht.<\/p>\n\n\n\n<p>Insgesamt ist das Fontend in einer Single-Page App Struktur aufgebaut. Das bedeutet, dass es lediglich eine index.html Datei gibt, auf der sich der Nutzer durchg\u00e4ngig befindet. Die Inhalte der einzelnen Seiten werden dann basierend auf dem URL Hash durch den App-Controller (App.js) in den body platziert. So ist die JavaScript Objektorientiert implementiert und f\u00fcr jede Seite wurde eine eigene Klasse entwickelt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"298\" height=\"458\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-5.png\" alt=\"\" class=\"wp-image-586\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-5.png 298w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-5-195x300.png 195w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><figcaption>Liste aller verf\u00fcgbaren Seiten und Start der Klasse App<\/figcaption><\/figure>\n\n\n\n<p>Die pages Liste beinhaltet alle verf\u00fcgbaren Seiten und die dazugeh\u00f6rigen Klassen. Sie wird beim aufrufen der index.html Seite geladen woraufhin die Klasse App instanziiert und ausgef\u00fchrt wird.<\/p>\n\n\n\n<p>W\u00e4hrend das Bar-Frontend auf einer einzelnen Seite umgesetzt wurde, stehen f\u00fcr die Servicekraft drei verschiedene Unterseiten zur Verf\u00fcgung. Alle Seiten werden im Folgenden genauer erkl\u00e4rt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bar-Frontend<\/h3>\n\n\n\n<p>Als erstes haben wir uns dem Bar-Frontend gewidmet. Es soll die Pipeline der vorzubereitenden Bestellungen anzeigen, einen \u00dcberblick dar\u00fcber verschaffen, welche Bestellungen aktuell ausgeliefert werden und dem Personal an der Bar die M\u00f6glichkeit geben, eingeschenkte Getr\u00e4nke mit einer Bestellung zu verkn\u00fcpfen. Um das Design aus dem Sketch simpel umzusetzen haben wir die html Seite mit einer einzelnen gro\u00dfen Tabelle mit zwei Zeilen versehen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"624\" height=\"180\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-6.png\" alt=\"\" class=\"wp-image-587\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-6.png 624w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-6-300x87.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<p>Die erste Spalte der oberen Zeile erstreckt sich dabei \u00fcber beide Zeilen wodurch das skizzierte Layout erreicht wird. Sie beinhaltet alle vorbereiteten Bestellungen, die sich in der Auslieferung befinden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"326\" height=\"13\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-7.png\" alt=\"\" class=\"wp-image-588\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-7.png 326w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-7-300x12.png 300w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/figure>\n\n\n\n<p>Die anderen Spalten der ersten Zeile beinhalten die aufgenommenen, aber noch nicht vorbereiteten Bestellungen der n\u00e4chsten vier Tische. Sobald ein Getr\u00e4nk an der Bar vorbereitet wurde, kann es durch einen Klick auf die dazugeh\u00f6rige Bestellung verkn\u00fcpft und in den vorbereitet Zustand versetzt werden. Ist die Bestellung vorbereitet, wird sie in der unteren Spalte angezeigt. Sind alle Bestellungen eines Tisches vorbereitet, wird eine neue Lieferung in der ersten Spalte angelegt und alle Spalten rutschen von rechts nach links auf. Gleichzeitig wird der n\u00e4chste Tisch in Spalte 5 generiert.<\/p>\n\n\n\n<p>Um diese Funktionalit\u00e4ten umzusetzen wurde die Klasse PageBar (PageBar.js) entwickelt. Sie generiert alle 10 Sekunden bei Bedarf die n\u00e4chsten Bestellungen und Lieferungen. Au\u00dferdem beinhaltet sie Methoden um die zuvor beschriebenen Funktionalit\u00e4ten umzusetzen. Der gesamte Code kann im GitHub-Repository eingesehen werden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"736\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-9-1024x736.png\" alt=\"\" class=\"wp-image-590\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-9-1024x736.png 1024w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-9-300x216.png 300w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-9-768x552.png 768w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-9.png 1078w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Besonders hervorheben kann man in dieser Klasse beispielsweise die rekursive moveOrders Methode, die alle Bestellungen nach Links aufschiebt sobald eine Spalte abgeschlossen wird.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-10.png\" alt=\"\" class=\"wp-image-591\" width=\"838\" height=\"270\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-10.png 624w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-10-300x97.png 300w\" sizes=\"(max-width: 838px) 100vw, 838px\" \/><figcaption>moveOrders()<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Service-Frontend<\/h3>\n\n\n\n<p>Wie bereits beschrieben, besteht das Service-Frontend aus drei verschiedenen Seiten, die es der Servicekraft erm\u00f6glichen, einen \u00dcberblick \u00fcber alle Lieferungen, F\u00fcllst\u00e4nde, Tische und Pl\u00e4tze zu erhalten. Zus\u00e4tzlich k\u00f6nnen dar\u00fcber Bestellungen f\u00fcr bestimmte Pl\u00e4tze aufgenommen werden, welche dann direkt auf dem Bar-Frontend erscheinen. Die drei Seiten basieren grundlegen darauf, dass Templates f\u00fcr einzelne Elemente so oft wie sie ben\u00f6tigt werden kopiert und in das Dokument generiert werden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"207\" height=\"90\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-11.png\" alt=\"\" class=\"wp-image-592\" \/><\/figure>\n\n\n\n<p>Die erste Seite, die in der Klasse PageOverview implementiert ist, zeigt der Servicekraft im oberen Bereich welche Bestellungen lieferbereit an der Bar sind und ausgeliefert werden m\u00fcssen. Zus\u00e4tzlich l\u00e4uft ein Timer um abzusch\u00e4tzen wie dringend die Getr\u00e4nke geliefert werden m\u00fcssen. Im unteren Bereich werden der Servicekraft alle Tische angezeigt, an denen Getr\u00e4nke bereits teilweise oder komplett ausgetrunken sind. Je nach Anteil der ausgetrunkenen Getr\u00e4nke an der Platzanzahl der Tisches, wird die Anzeige farblich ver\u00e4ndert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"568\" height=\"306\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-12.png\" alt=\"\" class=\"wp-image-593\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-12.png 568w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-12-300x162.png 300w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/figure>\n\n\n\n<p>Die Anzeige wird wie im Code-Auszug zu erkennen, alle 10 Sekunden durch ein Invervall automatisch aktualisiert. Mit einem Klick auf einen der Tische oder \u00fcber den Sonderbestellungs-Button gelangt die Servicekraft auf die n\u00e4chste Seite \u2013 die Tisch\u00fcbersicht.<\/p>\n\n\n\n<p>Auf der zweiten Seite wird durch die Klasse PageTable eine \u00dcbersicht \u00fcber einen bestimmten Tisch generiert. Diese beinhaltet alle Pl\u00e4tze und deren F\u00fcllst\u00e4nde am Tisch. Aktuell wird der F\u00fcllstand lediglich als Farbe (Gr\u00fcn, Orange, Rot) dargestellt. In Zukunft k\u00f6nnte der F\u00fcllstand durch eine prozentgenaue farbliche F\u00fcllung des Platzes visualisiert werden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"494\" height=\"348\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-13.png\" alt=\"\" class=\"wp-image-594\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-13.png 494w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-13-300x211.png 300w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><\/figure>\n\n\n\n<p>Klickt die Servicekraft auf einen der Pl\u00e4tze gelangt sie zur Getr\u00e4nke\u00fcbersicht auf Seite 3. Diese wird durch die Klasse PageOrder verwaltet. Hier kann eine neue Bestellung f\u00fcr den ausgew\u00e4hlten Platz angelegt werden, indem aus der Liste der Getr\u00e4nke gew\u00e4hlt wird. Sobald ein Getr\u00e4nk ausgew\u00e4hlt wurde wird automatisch zur\u00fcck auf die Tisch\u00fcbersicht navigiert. Au\u00dferdem wird eine neue Bestellung angelegt, welche auf der Baroberfl\u00e4che erscheint.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"538\" height=\"408\" src=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-14.png\" alt=\"\" class=\"wp-image-595\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-14.png 538w, https:\/\/www.iot-embedded.de\/iot-2021\/wp-content\/uploads\/sites\/5\/2021\/07\/image-14-300x228.png 300w\" sizes=\"(max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<p>Der gesamte Code ist <a href=\"https:\/\/github.com\/buermarc\/beverage-backend-spring\">hier <\/a>im GitHub-Repository zu finden. Die Frontend Dateien liegen unter \/src\/main\/ressources\/static\/.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr die Umsetzung der in Part 1 beschriebenen Frontends haben wir die Visual Studio Code IDE verwendet. Bei der Konzeption haben wir uns bewusst gegen Responsive Design entschieden, da bestimmte Oberfl\u00e4chen f\u00fcr bestimmte Rollen in der Gastronomie vorgesehen sind. Hier<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/posts\/585"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/comments?post=585"}],"version-history":[{"count":2,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":597,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/posts\/585\/revisions\/597"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2021\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}