{"id":579,"date":"2018-07-02T11:37:22","date_gmt":"2018-07-02T11:37:22","guid":{"rendered":"https:\/\/www.wpvs.de\/iot-2018\/?p=579"},"modified":"2021-05-14T10:07:03","modified_gmt":"2021-05-14T08:07:03","slug":"raspberrybuy-8-projektende-deployment","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2018\/projekt-raspberrybuy\/raspberrybuy-8-projektende-deployment\/","title":{"rendered":"RaspberryBuy (8) – Projektende & Deployment"},"content":{"rendered":"

Fertigstellung der Webanwendung<\/h1>\n

Gem\u00e4\u00df der Ank\u00fcndigung im f\u00fcnften Blockbeitrag bietet die We<\/span><\/span>boberfl\u00e4che nun die M\u00f6glichkeit\u00a0<\/span><\/span>f\u00fcr einen oder mehrere selek<\/span><\/span>tierte Benutzer den K\u00fchlschrankinhalt<\/span><\/span>\u00a0<\/span><\/span>anzuzeigen. Weiterhin ist es auch m\u00f6glich den\u00a0<\/span><\/span>gesamten K\u00fchlschrankinhalt eines Ha<\/span><\/span>ushalts anzuzeigen. Zur Steigerung der \u00dcbersichtlichkeit wird in der Standardansicht der K\u00fchlschrankinhalt geb\u00fcndelt nach Produkt angezeigt<\/span><\/span>. Erst bei Klicken des jeweiligen<\/span><\/span>\u00a0Produkte<\/span><\/span>s<\/span><\/span>\u00a0werden die zugeh\u00f6rigen Best\u00e4nde ausgeklappt und k\u00f6nnen anschlie\u00dfend wieder eingeklappt werden. Der Einsatz einer Bibliothek f\u00fcr diese sogenannte \u201e<\/span>Tree<\/span>\u00a0<\/span>Structure<\/span>\u201c war nicht m\u00f6glich, da der Server die Produkte gefiltert nach Pro<\/span><\/span>fil-<\/span><\/span>ID zur\u00fcckgibt und vorher die Serverantwort entsprechend der Produkte sortiert werden muss. Dies erfolgt<\/span><\/span>\u00a0bei der Tabellenerzeugung<\/span><\/span>, indem\u00a0<\/span><\/span>bei erstmaligem Auftreten einer neuen Produkt-ID der Produktname in der Tabelle gelistet wird und zugeh\u00f6rige Best\u00e4nde diese Produkt-ID als Attributwert erhalten. Ist die Produkt-ID in der Tabelle bereits vorhanden, wird die letzte Zeile zur\u00fcckgegeben, die diese ID als Eltern-Attributwert enth\u00e4lt<\/span><\/span>. Die\u00a0<\/span><\/span>nachfolgende Abbildun<\/span><\/span>g zeigt den<\/span><\/span>\u00a0<\/span><\/span>zugeh\u00f6rigen Befehl<\/span><\/span>.<\/span><\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

An das zur\u00fcckgegebene Zeilenelement wird der Bestandswert als weitere Zeile angef\u00fcgt und in diesem die vorher definierte Nummer des Eltern-Elements gespeichert. Die Ein- und Ausklappfunktionalit\u00e4t wird durch die unten dargestellte toggleClass von Jquery realisiert, die eine CSS-Klasse mit den Sichtbarkeitseinstellungen entweder hinzuf\u00fcgt oder entfernt.<\/p>\n

\"\"<\/p>\n

Anhand der Nummer des Eltern-Elements kann bestimmt werden, welche Best\u00e4nde sichtbar oder unsichtbar gemacht werden sollen.<\/p>\n

Des Weiteren ist die Anlage, Bearbeitung oder L\u00f6schung (Bestandswert wird auf 0 gesetzt) von Bestandsdaten sowie Produktdaten auf Zeilenebene m\u00f6glich.<\/p>\n

 <\/p>\n

Fertigstellung der Pi-Anwendung<\/h1>\n

Als die Oberfl\u00e4che des\u00a0RaspberryBuy\u00a0fertig erstellt war, ging es um die eigentliche Implementierung auf dem Touchscreen, der uns netterweise von Herr Schulmeister ausgeliehen wurde. Im weiterem Verlauf mussten wir feststellen, dass der Browser\u00a0qt-Webkit-kiosk auf unserem Raspberry Pi nicht dazu in der Lage war die erstellten Elemente korrekt darzustellen.<\/p>\n

Der Browser implementiert nicht den ES6-Standard (ECMAScript), sodass\u00a0jeglicher\u00a0Javascript-Code mithilfe des\u00a0Transpilers\u00a0\u201eBabel\u201c transpiliert werden musste. Babel erzeugt auch JavaScript Code (weshalb man hier nicht von einem Kompiler reden kann), dieser ist jedoch ES5 kompatibel. Es zeigte sich jedoch, dass\u00a0jQuery\u00a0ebenfalls vom Browser nicht korrekt eingebunden wird.\u00a0Dementsprechend war es notwendig, zus\u00e4tzlich verschiedene\u00a0Polyfills\u00a0einzubinden. Somit musste beispielsweise ein Promises-Polyfill\u00a0genutzt werden. Auch Babel selbst hat weitere Polyfills ben\u00f6tigt.<\/p>\n

Leider musste ebenfalls der Switch-Toggle-Button innerhalb der Anwendung ersetzt werden, da dieser aufgrund des etwas zu kleinen Bildschirms st\u00e4ndig verrutscht ist. Stattdessen wurde ein Bootstrap Toggle Button verwendet, der au\u00dferdem besser zum Design und der Bedienung auf dem kleinen Touchscreen passt.<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

 <\/p>\n

Deployment<\/h1>\n

Auf unserem AWS-Cloud Server sollen die folgenden beiden Komponenten deployed werden:<\/p>\n