{"id":388,"date":"2018-06-14T21:20:55","date_gmt":"2018-06-14T21:20:55","guid":{"rendered":"https:\/\/www.wpvs.de\/iot-2018\/?p=388"},"modified":"2021-05-14T10:07:05","modified_gmt":"2021-05-14T08:07:05","slug":"raspberrybuy-4-status-der-weboberflaeche","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2018\/projekt-raspberrybuy\/raspberrybuy-4-status-der-weboberflaeche\/","title":{"rendered":"RaspberryBuy (5) Status der Weboberfl\u00e4che"},"content":{"rendered":"

Der Beitrag f\u00fcr diese Woche behandelt die\u00a0Weboberfl\u00e4che f\u00fcr Client-Ger\u00e4te sowie die\u00a0Kommunikation zwischen Frontend und\u00a0Backend.<\/p>\n

Vor\u00fcberlegungen<\/b><\/p>\n

Eine zentrale Fragestellung in diesem Kontext war die\u00a0Auswahl einer geeigneten Bibliothek\u00a0zur Erleichterung der Implementierung entsprechender Funktionen.\u00a0Ausschlaggebend f\u00fcr eine Entscheidung war die Kompatibilit\u00e4t mit\u00a0Promise-Objekten.<\/p>\n

Bei mehreren asynchronen Aufrufen und Abh\u00e4ngigkeiten der\u00a0zur\u00fcckgegebenen Ergebnisse\u00a0f\u00fchrt der Einsatz der\u00a0Javascript\u00a0Callback-Funktionen\u00a0oftmals zu einer sogenannten \u201ecallback-hell\u201c: Mehrere\u00a0callback-Funktionen\u00a0m\u00fcssen\u00a0ineinander verschachtelt werden\u00a0und die Codequalit\u00e4t durch die\u00a0daraus\u00a0resultierende Unleserlichkeit\u00a0nimmt stark ab.\u00a0Eine geeignetere L\u00f6sung ist daher der\u00a0Einsatz\u00a0von\u00a0Promises.\u00a0Dies\u00a0sind Objekte, die\u00a0in naher Zukunft einen Wert zur\u00fcckgeben werden und damit Erfolg oder Fehlschlagen einer asynchronen Operation\u00a0ausdr\u00fccken. Durch den Zusatz des Schl\u00fcsselbegriffs \u201eawait<\/b>\u201c wird die Ausf\u00fchrung von nachgelagertem Code solange gestoppt, bis ein Ergebnis zur\u00fcckgegeben wurde.<\/p>\n

Promises\u00a0k\u00f6nnen zwar auch\u00a0mittels\u00a0jQuery\u00a0verwendet werden,\u00a0da\u00a0jQuery\u00a0das\u00a0Promise\u00a0Interface implementiert,\u00a0jQuery\u00a0liefert\u00a0jedoch kein\u00a0natives\u00a0Promise-Objekt zur\u00fcck.\u00a0Genau genommen wird ein\u00a0jQuery\u00a0XMLHttpRequest\u00a0(jqXHR) Objekt zur\u00fcckgegeben. (siehe\u00a0http:\/\/api.jquery.com\/jquery.ajax\/<\/a>)\u00a0Die\u00a0jquery.ajax() Funktion\u00a0kann zwar\u00a0in eine weitere\u00a0Promise.resolve() Funktion verpackt werden, bedeutet jedoch ein kleiner Mehraufwand. Die\u00a0Axios\u00a0Bibliothek\u00a0hingegen\u00a0liefert ein\u00a0natives\u00a0Promise-Objekt zur\u00fcck. Des Weiteren\u00a0resolvt\u00a0das von\u00a0Axios\u00a0zur\u00fcckgegebene\u00a0Promise\u00a0Objekt nicht nur mit dem\u00a0eigentlichen Response-Body, sondern mit weiteren Daten wie Header und Statuscode. F\u00fcr\u00a0die Frontend und Backend-Kommunikation wird daher die\u00a0Axios\u00a0Bibliothek\u00a0anstelle der\u00a0jQuery-AJAX Funktion\u00a0eingesetzt.<\/p>\n

\"\"<\/a><\/p>\n

Das\u00a0obige\u00a0Codebeispiel zeigt noch einmal im direkten Vergleich das R\u00fcckgabe-Objekt einer\u00a0jQuery- und einer\u00a0Axios-Implementierung. Das\u00a0Axios-Objekt hat einen ersichtlich h\u00f6heren Informationsgehalt.<\/p>\n

Projektstatus<\/b><\/p>\n

Nach Implementierung einer \u201eHelper-Funktion\u201c, die die Anfragen an den Server schickt, ist es nun m\u00f6glich\u00a0einen Login mit Benutzername und Passwort durchzuf\u00fchren,\u00a0Benutzerprofile mit Bild und Name \u00fcber ein Formular in der Datenbank zu speichern sowie\u00a0wiederum aus dieser abzurufen. Die Helper-Funktion auf Basis der\u00a0Axios\u00a0Bibliothek sieht wie folgt aus:<\/p>\n

\"\"<\/a><\/p>\n

Die Standardwerte f\u00fcr die Konfiguration, wie beispielsweise\u00a0Basis\u00a0URL und\u00a0JSON als Standardformat f\u00fcr den\u00a0Inhalt,\u00a0werden in den ersten beiden Codezeilen\u00a0definiert.<\/p>\n

Das Bild wird vorab Base64-codiert, damit es in der MongoDB gespeichert werden kann.<\/p>\n

\"\"<\/a><\/p>\n

Funktion zur Codierung im Base64-Format<\/p>\n

Die Oberfl\u00e4che sieht damit wie folgt aus:<\/p>\n

\"\"<\/a><\/p>\n

Nach Anlegen eines Benutzers wie beispielsweise \u201eIngrid\u201c\u00a0mit Profilbild kann dieser anschlie\u00dfend auch betrachtet werden.<\/p>\n

\"\"<\/a><\/p>\n

Au\u00dferdem ist es bereits m\u00f6glich dem gesamten K\u00fchlschrankinhalt abzurufen.\u00a0Hierf\u00fcr werden aktuell noch\u00a0Mockdaten\u00a0aus der Datenbank genutzt.<\/p>\n

\"\"<\/a><\/p>\n

Arbeitspakete der n\u00e4chsten Wochen<\/b><\/p>\n

Zuk\u00fcnftig soll es auch m\u00f6glich sein,\u00a0K\u00fchlschrankinhalte benutzerbezogen\u00a0anzulegen und diese aus der\u00a0Datenbank bei \u00dcbergabe des Benutzernamens abrufen zu k\u00f6nnen.\u00a0Dar\u00fcber hinaus sollen\u00a0K\u00fchlschrankbest\u00e4nde,\u00a0auf Zeilenebene der Tabelle,\u00a0nachtr\u00e4glich\u00a0\u00fcber\u00a0den \u201eEdit\u201c-Button\u00a0modifiziert werden k\u00f6nnen.<\/p>\n

Die Ansteuerung der Kamera auf dem Pi wurde erfolgreich mithilfe der Python Bibliothek „picamera“ realisiert. Aktuell wird an der Anbindung des Touchscreens gearbeitet, wobei spezielle Linux Device\u00a0Tree\u00a0Overlays notwendig sind.<\/p>\n","protected":false},"excerpt":{"rendered":"

Der Beitrag f\u00fcr diese Woche behandelt die\u00a0Weboberfl\u00e4che f\u00fcr Client-Ger\u00e4te sowie die\u00a0Kommunikation zwischen Frontend und\u00a0Backend. Vor\u00fcberlegungen Eine zentrale Fragestellung in diesem Kontext war die\u00a0Auswahl einer geeigneten Bibliothek\u00a0zur Erleichterung der Implementierung entsprechender Funktionen.\u00a0Ausschlaggebend f\u00fcr eine Entscheidung war die Kompatibilit\u00e4t mit\u00a0Promise-Objekten. Bei mehreren<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/388"}],"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=388"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/388\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/posts\/388\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/media?parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/categories?post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2018\/wp-json\/wp\/v2\/tags?post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}