Fertigstellung der Webanwendung

Gemäß der Ankündigung im fünften Blockbeitrag bietet die Weboberfläche nun die Möglichkeit für einen oder mehrere selektierte Benutzer den Kühlschrankinhalt anzuzeigen. Weiterhin ist es auch möglich den gesamten Kühlschrankinhalt eines Haushalts anzuzeigen. Zur Steigerung der Übersichtlichkeit wird in der Standardansicht der Kühlschrankinhalt gebündelt nach Produkt angezeigt. Erst bei Klicken des jeweiligen Produktes werden die zugehörigen Bestände ausgeklappt und können anschließend wieder eingeklappt werden. Der Einsatz einer Bibliothek für diese sogenannte „Tree Structure“ war nicht möglich, da der Server die Produkte gefiltert nach Profil-ID zurückgibt und vorher die Serverantwort entsprechend der Produkte sortiert werden muss. Dies erfolgt bei der Tabellenerzeugung, indem bei erstmaligem Auftreten einer neuen Produkt-ID der Produktname in der Tabelle gelistet wird und zugehörige Bestände diese Produkt-ID als Attributwert erhalten. Ist die Produkt-ID in der Tabelle bereits vorhanden, wird die letzte Zeile zurückgegeben, die diese ID als Eltern-Attributwert enthält. Die nachfolgende Abbildung zeigt den zugehörigen Befehl. 

An das zurückgegebene Zeilenelement wird der Bestandswert als weitere Zeile angefügt und in diesem die vorher definierte Nummer des Eltern-Elements gespeichert. Die Ein- und Ausklappfunktionalität wird durch die unten dargestellte toggleClass von Jquery realisiert, die eine CSS-Klasse mit den Sichtbarkeitseinstellungen entweder hinzufügt oder entfernt.

Anhand der Nummer des Eltern-Elements kann bestimmt werden, welche Bestände sichtbar oder unsichtbar gemacht werden sollen.

Des Weiteren ist die Anlage, Bearbeitung oder Löschung (Bestandswert wird auf 0 gesetzt) von Bestandsdaten sowie Produktdaten auf Zeilenebene möglich.

 

Fertigstellung der Pi-Anwendung

Als die Oberfläche des RaspberryBuy fertig 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 qt-Webkit-kiosk auf unserem Raspberry Pi nicht dazu in der Lage war die erstellten Elemente korrekt darzustellen.

Der Browser implementiert nicht den ES6-Standard (ECMAScript), sodass jeglicher Javascript-Code mithilfe des Transpilers „Babel“ 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 jQuery ebenfalls vom Browser nicht korrekt eingebunden wird. Dementsprechend war es notwendig, zusätzlich verschiedene Polyfills einzubinden. Somit musste beispielsweise ein Promises-Polyfill genutzt werden. Auch Babel selbst hat weitere Polyfills benötigt.

Leider musste ebenfalls der Switch-Toggle-Button innerhalb der Anwendung ersetzt werden, da dieser aufgrund des etwas zu kleinen Bildschirms ständig verrutscht ist. Stattdessen wurde ein Bootstrap Toggle Button verwendet, der außerdem besser zum Design und der Bedienung auf dem kleinen Touchscreen passt.

 

Deployment

Auf unserem AWS-Cloud Server sollen die folgenden beiden Komponenten deployed werden:

• Server: Der Server soll auf alle gültigen Requests antworten, die mit /api beginnen
• Webapp: Die statischen Dateien des Webclients sollen in den Pfad /raspberrybuy eingebunden werden

Nginx ist ein Open Source Web Server, der auch Reverse Proxy Funktionalitäten unterstützt. Ein Proxy Server nimmt Anfragen von mehreren Clients entgegen und leitet sie in ein externes Netz (meist das Internet) weiter. Im Gegensatz dazu nimmt ein Reverse Proxy eine Anfrage eines Clients entgegen und leitet diese an einen oder mehrere interne Server zur Bearbeitung weiter. Die Konfiguration findet dabei über den HTTP-Pfad statt. Im Folgenden ist die für die oben genannten Anforderungen notwendige nginx Konfiuration zu sehen:

location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header x-forwarded-proto $scheme;

proxy_pass http://raspberrybuy.dynv6.net:8000;
}

location /raspberrybuy {
rewrite ^/raspberrybuy(.*)$ $1 break;
root /opt/raspibuy/RaspiBuy-Client/webapp/;
try_files $uri main.html =404;
}

Alle HTTP-Requests, deren Pfad mit /api beginnen, werden an den Node-Server weitergeleitet, der auf Port 8000 hört. Damit dieser weiß, dass der ursprüngliche Request sicher über HTTPS transportiert wurde, müssen entsprechende Header angehängt werden. Wenn der Request mit /raspberrybuy beginnt, wird der Pfad umgeschrieben und ein root-File-Verzeichnis gesetzt. In diesem Verzeichnis sucht nginx dann nach den statischen Dateien.