{"id":501,"date":"2017-07-09T22:32:58","date_gmt":"2017-07-09T20:32:58","guid":{"rendered":"https:\/\/www.pingu-mobil.de\/iot\/?p=501"},"modified":"2021-05-14T10:07:47","modified_gmt":"2021-05-14T08:07:47","slug":"dingdong-9-blockeintrag-die-phonegap-applikation","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2017\/tuersteuerung\/dingdong-9-blockeintrag-die-phonegap-applikation\/","title":{"rendered":"DingDong 9. Blockeintrag: Die PhoneGap Applikation"},"content":{"rendered":"

Zu guter letzt kommt in diesem Artikel noch die Applikation beschrieben, welche mit unserem RapsberryPi \u00fcber das MQTT-Protokoll kommuniziert.<\/p>\n

Hierf\u00fcr installieren wir Phonegap \u00fcber die Herstellerwebseite: http:\/\/docs.phonegap.com\/getting-started\/1-install-phonegap\/cli\/<\/p>\n

\u00dcber NPM l\u00e4sst dies sich \u00fcber folgenden Befehl bewerkstelligen:<\/p>\n

$ npm install -g phonegap@latest<\/code><\/p>\n

F\u00fcr unsere Applikation nutzen wir das Phonegap-Barcode-Plugin, welches nach der Erstellung einer Applikation \u00fcber die PhoneGap GUI hinzugef\u00fcgt werden kann.
\nWir m\u00fcssen lediglich in der Kommandozeile in das Projektverzeichnis wechseln und dann folgenden Befehl ausf\u00fchren:<\/p>\n

$ phonegap plugin add phonegap-plugin-barcodescanner<\/code><\/p>\n

Wurde dieser Teil erledigt, k\u00f6nnen wir mit der Entwicklung beginnen. Im ersten Schritt wird unsere Hauptseite erstellt. Hierf\u00fcr modifizieren wir die index.html und f\u00fcgen den Body-Tag neue Elemente hinzu.
\nDas Ergebnis sieht folgenderma\u00dfen aus:
\n\"\"<\/a><\/p>\n

Es werden unter dem Header System alle Elemte angezeigt, die in den System-Einstellungen hinzugef\u00fcgt wurden. Da dies im Moment noch nicht gemacht wurde, gibt es auch noch keinen Eintrag. Auf der Seite System-Einstellungen kann also ein neuer Raspberry-Pi als T\u00fcrsteuerung hinzugef\u00fcgt werden.<\/p>\n

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

Normalerweise werden in dieser Liste alle Elemte angezeigt, welche durch einen QR-Code hinzugef\u00fcgt wurden. Daf\u00fcr benutzen wir das PhoneGap-Barcode-Plugin. Gescannt wird ein QR-Code der auf der T\u00fcrsteuerung angebracht werden soll und die MAC-Adresse des RaspberryPi enth\u00e4lt. Nachdem ein Eintrag hinzugef\u00fcgt wurde, kann er durch den Button auf der rechten Seite entfernt werden:<\/p>\n

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

Da wir nun einen Eintrag hinzugef\u00fcgt haben, k\u00f6nnen wir \u00fcber den Zur\u00fcck-Button auf die Hauptseite wechseln und eine T\u00fcr \u00f6ffnen.<\/p>\n

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

Unter der Header System wird uns nun das korrekte Ger\u00e4t angezeigt und wenn wir wollen k\u00f6nnen wir \u00fcber das Selektionsmen\u00fc andere Eintr\u00e4ge ausw\u00e4hlen.<\/p>\n

Durch das bet\u00e4tigen des Button Open, wird die T\u00fcr ge\u00f6ffnet. Dies wird uns durch eine Popup-Nachricht best\u00e4tigt.<\/p>\n

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

Wird hingegen die Klingel an der Haust\u00fcre bet\u00e4tigt und wir haben Ger\u00e4te in unserer App hinzugef\u00fcgt, dann bekommen wir auch das mit:<\/p>\n

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

Die komplette Kommunikation mit dem RaspberryPi wurde mittels MQTT-Protokoll gel\u00f6st. Wir kommunizieren \u00fcber einen Topic, welcher durch die MAC-Adresse des jeweiligen RaspberryPi dargestellt wird. F\u00fcr die Applikation haben wir die JavaScript-Bibliothek Paho genutzt. Diese stellt uns ein Interface f\u00fcr verschiedene Funktionen bereit. Hier ein Beispiel f\u00fcr die genutzte Verbindung mittels Benuter\/Passwort:<\/p>\n

var mqttClient = {<\/p>\n

connect: function(){
\n\/\/ Create a client instance
\nclient = new Paho.MQTT.Client(‚62.75.166.253‘, Number(8000), „clientId-z4g4ouhoF12sd“);<\/p>\n

\/\/ set callback handlers
\nclient.onConnectionLost = mqttClient.onConnectionLost;
\nclient.onMessageArrived = mqttClient.onMessageArrived;<\/p>\n

\/\/ connect the client
\nclient.connect({
\nonSuccess: mqttClient.onConnect,
\nuserName : „nutzer“,
\npassword : „geheim“});
\n},<\/p>\n

sendMessage: function(message, destination){
\nmqttMessage = new Paho.MQTT.Message(message);
\nmqttMessage.destinationName = destination;
\nclient.send(mqttMessage);
\n},<\/p>\n

\/\/ called when the client connects
\nonConnect: function(topic) {
\n\/\/ Once a connection has been made, make a subscription and send a message.
\nconsole.log(„onConnect“);
\nclient.subscribe(topic);
\nmessage = new Paho.MQTT.Message(„connected“);
\nmessage.destinationName = topic;
\nclient.send(message);
\n},<\/p>\n

\/\/ called when the client loses its connection
\nonConnectionLost: function(responseObject) {
\nif (responseObject.errorCode !== 0) {
\nconsole.log(„onConnectionLost:“+responseObject.errorMessage);
\n}
\n},<\/p>\n

\/\/ called when a message arrives
\nonMessageArrived: function(message) {
\nconsole.log(„onMessageArrived:“+message.payloadString);
\n\/\/alert(message.payloadString);
\nif(message.payloadString == „isOpen“){
\nalert(„T\u00fcr wurde ge\u00f6ffnet!“);
\n}
\nif(message.payloadString == „isRinged“){
\nalert(„Es wurde geklingelt!“)
\n}
\n},
\n};<\/p>\n","protected":false},"excerpt":{"rendered":"

Zu guter letzt kommt in diesem Artikel noch die Applikation beschrieben, welche mit unserem RapsberryPi \u00fcber das MQTT-Protokoll kommuniziert. Hierf\u00fcr installieren wir Phonegap \u00fcber die Herstellerwebseite: http:\/\/docs.phonegap.com\/getting-started\/1-install-phonegap\/cli\/ \u00dcber NPM l\u00e4sst dies sich \u00fcber folgenden Befehl bewerkstelligen: $ npm install -g<\/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-2017\/wp-json\/wp\/v2\/posts\/501"}],"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=501"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":551,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/posts\/501\/revisions\/551"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2017\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}