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.

RaspberryBuy (8) – Projektende & Deployment

Schreibe einen Kommentar

Zur Werkzeugleiste springen