SmartLock (5): Frontend Update

Dieser Blog-Post widmet sich dem aktuellen Stand des Frontends und den verwendeten Technologien. Dabei werde ich zuerst noch einmal reflektieren, wo das Frontend gehosted wird und für welche Medien es ausgelegt ist und anschließend ein paar Screenshots vorstellen. Anschließend werde ich näher das verwendete Framework VueJS und dessen Vorteile vorstellen.

Das Frontend wird auf einem NodeJS Webserver gehosted, der mit dem Express-Framework realisiert wird und gleichzeitig die API des Backends bereitstellt. Dabei läuft der Webserver lokal auf dem Raspberry Pi. Der Zugriff auf das Frontend findet dabei über das lokale Heimnetzwerk des Endanwenders statt. Das Frontend dient als administrative Oberfläche mit der die unterschiedlichen Nutzer der Wohnung angelegt, bearbeitet und gelöscht werden können. Außerdem kann der Nutzer hier nachvollziehen, wer zu welcher Uhrzeit die Wohnung betreten hat und den generierten QR-Code für die einzelnen Personen ausdrucken.

Nach einer erfolgreichen Anmeldung befindet sich der User auf der dargestellten Oberfläche (1). Hier werden ihm alle zentralen Funktionen erklärt und er kann direkt einen neuen Nutzer anlegen oder sich die aktuell berechtigten Nutzer anzeigen lassen. Zusätzlich zu den Funktionsboxen erhält er durch die Verlinkung auf diesen Blog zusätzliche Informationen über das Produkt.

Im folgenden Screenshot (2) wird beispielhaft ein neues Benutzer der Wohnung namens Donald Trump angelegt. Dieser bekommt jeden Montag und Dienstag Zugang zu der Wohnung, damit er ungestört Fox & Friends anschauen kann. Für eine spätere Erkennung seines Gesichtes wird ein Bild hochgeladen. Dies kann in dem finalen Produkt auch mit Hilfe der PiCamera bewerkstelligt werden.

Anschließend können alle bestehenden Nutzer der Wohnung in einer Tabelle angezeigt werden (3).

Durch eine Selektion eines Benutzers werden die Zugangsdaten und der QR-Code angezeigt und der Name, das Bild oder die Zugangszeiten können geändert werden (4). Außerdem kann ein User auch gelöscht werden.

Neben diesen Screenshots wird momentan noch an den Einstellungen und an einer allgemeinen Optimierung der Oberflächen gearbeitet.

Verwendung von VueJS und Bootstrap

In den folgenden Abschnitten will ich etwas auf die verwendeten Frameworks VueJS und Bootstrap eingehen und einige Konzepte erläutern.

Das Framework VueJS verwendet folgende Konzepte:

• wiederverwendbare Components
• Two-Way-Data-Binding
• Erweiterung von HTML-Elementen
•  Unterstützung von zusätzlichen Frameworks/Paketen

Wiederverwendbare Components

Unter wiederverwendbaren Components versteht man die strikte Kapselung verschiedener UI-Elemente, die unabhängig, vorzugsweise klein sind und mehrfach verwendet werden. In Vue beinhaltet ein Component eine eigene kleine Vue-Instanz mit vorher definierten Optionen. Die Vue-Instanz beinhaltet ein Template, also eine bestimmte Struktur des Elements, definiert in HTML. Außerdem enthält es Vue-spezifische Properties, wie bspw. Methoden, die ausgeführt werden können, sobald eine User auf einen Button klickt. Außerdem kann das Template durch CSS-Code verändert werden. Dabei kann der CSS-Code entweder global definiert werden oder nur in diesem Component gültig sein. Ein definiertes Component kann dann in anderen Components wiederverwendet werden.

Two-Way-Data-Binding

In VueJS gibt es die Möglichkeit, JavaScript-Variablen und Objekte einem Datenobjekt der Vue-Instanz mitzugeben. Wird dies getan, kann in dem HTML-Code auf die Variablen mittels der „Mustache“-Syntax {{ varName }} zugegriffen werden. Dabei ermöglicht das Reaktivitäts-System von Vue, dass eine Änderung der Variable automatisch zu einem re-rendern des Elements führt und der aktuelle Wert angezeigt wird.

Erweiterung von HTML-Elementen

VueJS nutzt HTML-basierte Template Syntax, um beispielsweise Events an Elemente zu binden oder eine Punkte einer Liste mittels einer for-Schleife zu generieren. Die einfachste Form ist dabei die im oberen Abschnitt erwähnte „Mustache“-Syntax. Neben diesen Möglichkeiten können HTML-Elemente anhand eines Booleans angezeigt werden und vieles mehr (https://vuejs.org/v2/guide/syntax.html).

Unterstützung von zusätzlichen Frameworks

Neben den enthaltenen Funktionen in VueJS gibt es zahlreiche Pakete, die das Leben eines Frontend-Entwicklers weiter vereinfachen. So kümmert sich der Vue-Router (https://router.vuejs.org/) um die Navigation innerhalb einer Single Page Application durch das definieren von Routen. Außerdem bietet Bootstrap eine Möglichkeit, bekannte und oft genutzte Elemente (bspw. Tabellen, Alerts oder Forms) in seiner Oberfläche als Components zu verwenden (https://bootstrap-vue.js.org/). Weiter Pakete und zahlreiche Möglichkeiten sind hier zu finden:  https://github.com/vuejs/awesome-vue