{"id":367,"date":"2018-06-10T15:08:15","date_gmt":"2018-06-10T15:08:15","guid":{"rendered":"https:\/\/www.wpvs.de\/iot-2018\/?p=367"},"modified":"2021-05-14T10:07:05","modified_gmt":"2021-05-14T08:07:05","slug":"smartlock-5-frontend-update","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2018\/projekt-smart-lock\/smartlock-5-frontend-update\/","title":{"rendered":"SmartLock (5): Frontend Update"},"content":{"rendered":"

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\u00fcr welche Medien es ausgelegt ist und anschlie\u00dfend ein paar Screenshots vorstellen. Anschlie\u00dfend werde ich n\u00e4her das verwendete Framework VueJS und dessen Vorteile vorstellen.<\/p>\n

Das Frontend wird auf einem NodeJS Webserver gehosted, der mit dem Express-Framework realisiert wird und gleichzeitig die API des Backends bereitstellt. Dabei l\u00e4uft der Webserver lokal auf dem Raspberry Pi. Der Zugriff auf das Frontend findet dabei \u00fcber das lokale Heimnetzwerk des Endanwenders statt. Das Frontend dient als administrative Oberfl\u00e4che mit der die unterschiedlichen Nutzer der Wohnung angelegt, bearbeitet und gel\u00f6scht werden k\u00f6nnen. Au\u00dferdem kann der Nutzer hier nachvollziehen, wer zu welcher Uhrzeit die Wohnung betreten hat und den generierten QR-Code f\u00fcr die einzelnen Personen ausdrucken.<\/p>\n

\"\"
(1): Startseite von Smartlock<\/figcaption><\/figure>\n

Nach einer erfolgreichen Anmeldung befindet sich der User auf der dargestellten Oberfl\u00e4che (1). Hier werden ihm alle zentralen Funktionen erkl\u00e4rt und er kann direkt einen neuen Nutzer anlegen oder sich die aktuell berechtigten Nutzer anzeigen lassen. Zus\u00e4tzlich zu den Funktionsboxen erh\u00e4lt er durch die Verlinkung auf diesen Blog zus\u00e4tzliche Informationen \u00fcber das Produkt.<\/p>\n

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\u00f6rt Fox & Friends anschauen kann. F\u00fcr eine sp\u00e4tere Erkennung seines Gesichtes wird ein Bild hochgeladen. Dies kann in dem finalen Produkt auch mit Hilfe der PiCamera bewerkstelligt werden.<\/p>\n

Anschlie\u00dfend k\u00f6nnen alle bestehenden Nutzer der Wohnung in einer Tabelle angezeigt werden (3).<\/p>\n

\"\"
(2): Neuen Benutzer anlegen<\/figcaption><\/figure>\n
\"\"
(3): Liste aller Benutzer<\/figcaption><\/figure>\n

Durch eine Selektion eines Benutzers werden die Zugangsdaten und der QR-Code angezeigt und der Name, das Bild oder die Zugangszeiten k\u00f6nnen ge\u00e4ndert werden (4). Au\u00dferdem kann ein User auch gel\u00f6scht werden.<\/p>\n

Neben diesen Screenshots wird momentan noch an den Einstellungen und an einer allgemeinen Optimierung der Oberfl\u00e4chen gearbeitet.<\/p>\n

\"\"
(4): Profilseite eines Benutzers<\/figcaption><\/figure>\n
\"\"<\/figure>\n

Verwendung von VueJS und Bootstrap<\/h3>\n

In den folgenden Abschnitten will ich etwas auf die verwendeten Frameworks VueJS und Bootstrap eingehen und einige Konzepte erl\u00e4utern.<\/p>\n

Das Framework VueJS verwendet folgende Konzepte:<\/p>\n

    \n
  • wiederverwendbare Components<\/li>\n
  • Two-Way-Data-Binding<\/li>\n
  • Erweiterung von HTML-Elementen<\/li>\n
  • \u00a0Unterst\u00fctzung von zus\u00e4tzlichen Frameworks\/Paketen<\/li>\n<\/ul>\n
    Wiederverwendbare Components<\/h6>\n

    Unter wiederverwendbaren Components versteht man die strikte Kapselung verschiedener UI-Elemente, die unabh\u00e4ngig, 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\u00dferdem enth\u00e4lt es Vue-spezifische Properties, wie bspw. Methoden, die ausgef\u00fchrt werden k\u00f6nnen, sobald eine User auf einen Button klickt. Au\u00dferdem kann das Template durch CSS-Code ver\u00e4ndert werden. Dabei kann der CSS-Code entweder global definiert werden oder nur in diesem Component g\u00fcltig sein. Ein definiertes Component kann dann in anderen Components wiederverwendet werden.<\/p>\n

    Two-Way-Data-Binding<\/h6>\n

    In VueJS gibt es die M\u00f6glichkeit, 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\u00f6glicht das Reaktivit\u00e4ts-System von Vue, dass eine \u00c4nderung der Variable automatisch zu einem re-rendern des Elements f\u00fchrt und der aktuelle Wert angezeigt wird.<\/p>\n

    Erweiterung von HTML-Elementen<\/h6>\n

    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\u00e4hnte „Mustache“-Syntax. Neben diesen M\u00f6glichkeiten k\u00f6nnen HTML-Elemente anhand eines Booleans angezeigt werden und vieles mehr (https:\/\/vuejs.org\/v2\/guide\/syntax.html).<\/p>\n

    Unterst\u00fctzung von zus\u00e4tzlichen Frameworks<\/h6>\n

    Neben den enthaltenen Funktionen in VueJS gibt es zahlreiche Pakete, die das Leben eines Frontend-Entwicklers weiter vereinfachen. So k\u00fcmmert sich der Vue-Router (https:\/\/router.vuejs.org\/) um die Navigation innerhalb einer Single Page Application durch das definieren von Routen. Au\u00dferdem bietet Bootstrap eine M\u00f6glichkeit, bekannte und oft genutzte Elemente (bspw. Tabellen, Alerts oder Forms) in seiner Oberfl\u00e4che als Components zu verwenden (https:\/\/bootstrap-vue.js.org\/). Weiter Pakete und zahlreiche M\u00f6glichkeiten sind hier zu finden:\u00a0\u00a0https:\/\/github.com\/vuejs\/awesome-vue<\/p>\n","protected":false},"excerpt":{"rendered":"

    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\u00fcr welche Medien es ausgelegt ist und anschlie\u00dfend ein paar Screenshots vorstellen. Anschlie\u00dfend werde<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/367"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/comments?post=367"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/367\/revisions\/655"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/media?parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/categories?post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/tags?post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}