{"id":467,"date":"2017-07-06T18:56:33","date_gmt":"2017-07-06T16:56:33","guid":{"rendered":"https:\/\/www.pingu-mobil.de\/iot\/?p=467"},"modified":"2021-05-14T10:07:48","modified_gmt":"2021-05-14T08:07:48","slug":"sdim-klickibunti","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2017\/sdim\/sdim-klickibunti\/","title":{"rendered":"SDIM: &#8222;Klickibunti&#8220;"},"content":{"rendered":"<p>Wie dem vorherigen Blog-Beitrag zu <a href=\"https:\/\/www.pingu-mobil.de\/iot\/2017\/07\/06\/sdim-das-image-lernt-prosody-tor-und-nodejs\/\">Prosody, Tor und NodeJS<\/a> zu entnehmen ist, sind die Grundfunktionalit\u00e4ten von SDIM bereits gegeben. Was nun noch fehlt ist das Gesicht von SDIM. Da wir keinen Einfluss auf das Erscheinungsbild der Chat-Clients haben, bleibt uns zum gestalterischen austoben nur die Weboberfl\u00e4che. Diese muss zwei grundlegende Eigenschaften aufweisen:<\/p>\n<ul>\n<li>Ein ansprechendes und selbsterkl\u00e4rendes Design, f\u00fcr eine m\u00f6glichst hohe Benutzerfreundlichkeit<\/li>\n<li>Einfachen Zugriff auf die wichtigsten Funktionen, um Konsolen-unerfahrenen Nutzern das Konfigurieren ihrer SDIM Instanz zu erm\u00f6glichen<\/li>\n<\/ul>\n<h2>Node.js und Meteor.js<\/h2>\n<p>Zu Beginn standen zwei Technologien zur Auswahl, auf die sich die Oberfl\u00e4che st\u00fctzen k\u00f6nnte: <a href=\"https:\/\/www.meteor.com\">Meteor.js<\/a> und <a href=\"https:\/\/nodejs.org\">Node.js<\/a>. Beide Technologien setzen Server- und Client-Seitig auf Java-Script, unterst\u00fctzen diverse Template-Engins, Datenbanken und Paketmanagement via <a href=\"https:\/\/www.npmjs.com\">npm<\/a>. Die \u00c4hnlichkeit r\u00fchrt daher, dass Meteor auf Node aufbaut. Node ist eine JavaScript Laufzeitumgebung die vor allem f\u00fcr ihr Leichtgewichtigkeit, Effizienz und Vielf\u00e4ltigkeit bekannt ist. Meteor will auf diesen Eigenschaften aufbauen und einige Dinge f\u00fcr die Entwicklung von Webanwendungen erleichtern. Zum Beispiel bietet Meteor bereits eine konfigurierte MongoDB, ein eigene Template-Engine und simple Funktionen um Daten vom Server zum Client (und andersherum) zu transportieren. Besonders stolz ist das Meteor-Team auf eines ihrer Key-Features: Wenn sich der Datenbestand der MongoDB \u00e4ndert, passen sich alle verbunden Clients auf diese \u00c4nderung an, ohne dass zus\u00e4tzlicher Code oder ein manueller Refresh vom User n\u00f6tig ist.<\/p>\n<p>Wenn Meteor im Prinzip nur Funktionen hinzuf\u00fcgt und die Entwicklung vereinfacht, warum haben wir uns dann f\u00fcr Node.js entschieden? Zum einen liegt dies am Konzept des Meteor-Teams ihren Lebensunterhalt zu finanzieren, zum anderen an den Nachteilen die ein System mit sich bringt, welches bereits ab Werk mit vielen Funktionalit\u00e4ten beladen ist. Galaxy wird die Hosting Plattform (PaaS) von Meteor genannt. Dort k\u00f6nnen skalierende Webanwendungen mit einem Klick gehostet werden. Geht einfach &#8211; kostet viel. Da das Meteor-Team damit Geld verdient, haben sie ein gewisses Interesse Hosting auf anderen Plattformen nicht absichtlich einfach zu gestalten (ist jedoch m\u00f6glich). Das Hosting auf einem RaspberryPi wird daher offiziell \u00fcberhaupt nicht unterst\u00fctzt. Bei unseren Tests haben wir auf diesen <a href=\"https:\/\/github.com\/4commerce-technologies-AG\/meteor\">Fork<\/a> des Meteor-Projektes zur\u00fcckgegriffen. Meteor l\u00e4uft damit zwar auch auf dem Pi, eine optimale L\u00f6sung ist das allerdings nicht.<\/p>\n<p>Die endg\u00fcltige Entscheidung fiel aufgrund der angesprochenen Nachteile. Eine vorinstallierte MongoDB Instanz ist sch\u00f6n &#8211; vor allem, wenn man sie ben\u00f6tigt. Dasselbe gilt f\u00fcr multiple Clients, die live auf neue Daten reagieren. Wir speichern unsere wenigen Settings jedoch entweder direkt in den Prosody\/Tor\/sonstigen Files oder in einem Web-Settings-File, und Zugriff auf die Weboberfl\u00e4che wird in den meisten F\u00e4llen nur eine Person haben. Meteor gleicht f\u00fcr unseren Usecase damit einer \u00fcberladenen propriet\u00e4ren Android Installation mit nicht ben\u00f6tigten Features, die langsam und schwerf\u00e4llig ist.<\/p>\n<h2>Funktionen &amp; Design<\/h2>\n<p>Unsere Weboberfl\u00e4che besteht aus zwei Komponenten: Einem Einrichtungs-Wizard und einer Settings-Page. Der Wizard wird beim ersten Zugriff auf die Weboberfl\u00e4che aufgerufen. Er soll den Benutzer durch die wichtigsten Einstellungen und Informationen f\u00fchren und eine Lauff\u00e4hige SDIM Instanz hinterlassen. Er ist in verschiedene Pages eingeteilt, die jeweils einen Aspekt der Einrichtung abdecken. Die Settings-Page bietet die M\u00f6glichkeit diese Einstellungen nachtr\u00e4glich anzupassen, den System-Log einzusehen sowie weitere Funktionalit\u00e4ten.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-468\" src=\"https:\/\/www.pingu-mobil.de\/iot\/wp-content\/uploads\/2017\/07\/Mockup_Wizard-1024x998.png\" alt=\"\" width=\"750\" height=\"731\" srcset=\"https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-1024x998.png 1024w, https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-300x292.png 300w, https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-768x749.png 768w, https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-1536x1497.png 1536w, https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-2048x1996.png 2048w, https:\/\/www.iot-embedded.de\/iot-2017\/wp-content\/uploads\/sites\/2\/2017\/07\/Mockup_Wizard-1568x1528.png 1568w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Im Folgenden werden die wichtigsten Komponenten unserer Node-Anwendung aufgelistet:<\/p>\n<ul>\n<li>Express<em> (<a href=\"https:\/\/www.npmjs.com\/package\/express\">npm<\/a>)<\/em> als Node.js Framework<\/li>\n<li>Handlebars <em>(<a href=\"https:\/\/www.npmjs.com\/package\/handlebars\">npm<\/a>)<\/em> als Template-Engine<\/li>\n<li>Foundation 5 um das Gestalten zu vereinfachen<\/li>\n<li>bcrypt <em>(<a href=\"https:\/\/www.npmjs.com\/package\/bcrypt\">npm<\/a>)<\/em> zum sicheren Speichern\/Lesen von kritischen Informationen<\/li>\n<li>AJAX f\u00fcr den Gro\u00dfteil der Kommunikation (Cient -&gt; Server)<\/li>\n<li>socket.io<em> (<a href=\"https:\/\/www.npmjs.com\/package\/socket.io\">npm<\/a>)<\/em> um Logs &#8222;live&#8220; an den Client zu senden<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Der aktuelle Stand ist wie folgt: Der Wizard funktioniert, Settings werden geschrieben\/gelesen, es k\u00f6nnen Scripts angesto\u00dfen oder direkt aus JavaScript Consolen-Befehle ausgef\u00fchrt werden und der Log wird \u00fcbertragen. Zurzeit arbeiten wir noch an dem Layout der Settings-Page sowie an Funktionen zum Verwalten der xmpp\/jabber Benutzer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wie dem vorherigen Blog-Beitrag zu Prosody, Tor und NodeJS zu entnehmen ist, sind die Grundfunktionalit\u00e4ten von SDIM bereits gegeben. Was nun noch fehlt ist das Gesicht von SDIM. Da wir keinen Einfluss auf das Erscheinungsbild der Chat-Clients haben, bleibt uns<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/467"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/comments?post=467"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/467\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/467\/revisions\/557"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/media?parent=467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/categories?post=467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/tags?post=467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}