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