Catégorie Mobile - Constellation

Créer une application mobile multi-plateforme connectée à Constellation avec Cordova

Sebastien Warin — Fri, 19 Aug 2016 08:28:47 +0000

La plateforme Apache Cordova (anciennement PhoneGap) permet de créer des applications mobiles (Android, Windows Phone, iPhone, Blackberry, …) en utilisant les technologies Web (HTML, JS, CSS).

Couplée à la libraire JavaScript Constellation, il devient très facile de créer une application mobile pour votre smartphone ou tablette connectée à Constellation.

Installer Cordova

Cordova utilise nodejs, l’installation est donc très simple et rapide :

Installer NodeJS si vous ne l’avez pas déjà
Depuis le terminal (ou cmd pour windows) lancez la commande :

npm install -g cordova

Et voila Cordova est installé, mais il vous faut maintenant installer les SDK spécifiques aux plateformes que vous comptez utiliser.

Pour plus d’information, quelques ressources :

Créer un projet Cordova

Lancez une invite de commande Windows et tapez la ligne suivante pour créer votre projet :

cordova create Demo

Ensuite ajoutez le ou les plateformes cibles de votre application. Par exemple, développons une application pour Android :

cd Demo
cordova platform add android

Pour démarrer votre application sur l’émulateur Android ou sur votre terminal Android (connecté en USB) :

cordova run android

Tester votre application sur l’émulateur

En utilisant le “Android Virtual Device (AVD) Manager” créez un device que l’on nommera ici “SmartphoneDemo” sous Android 5.1.1 :

Vous pouvez ensuite cliquer sur le bouton “Start” pour lancer le device virtuel :

Enfin lancez la commande suivante pour déployer et démarrer votre application dans l’émulateur :

cordova run android

Debugger votre application avec l’inspecteur Chrome

Dans un nouvel onglet Chrome, rendez-vous sur chrome://inspect/#devices. Vous pourrez alors inspecter votre application Cordova :

Ainsi vous profiterez de tous les outils de debugging Web pour votre application mobile.

Déployer votre application sur votre téléphone

En connectant votre téléphone Android en USB ( sans oublier d’activer le debugging USB dans les paramètres de votre téléphone) vous pouvez, toujours avec la commande :

cordova run android

… lancer votre application sur votre téléphone et utiliser l’inspecteur Chrome pour la debugger à distance.

Autrement vous pouvez aussi utiliser la commande :

cordova build android

… pour générer le fichier APK, l’équivalent de l’installeur de votre application, qu’il faudra copier et lancer sur votre téléphone ou tablette Android.

Connecter votre application Cordova à Constellation

La structure d’une application Cordova est la suivante :

Une page “index.html”, la page de démarrage de votre application
Des dossiers css, img et js pour ranger respectivement les feuilles de style CSS, les images et les scripts JS

En clair votre application mobile se développe comme une véritable application Web. Vous pouvez ensuite ajouter des plugins pour accéder fonctionnalités du téléphone depuis votre code JavaScript (téléphonie, SMS, contacts, GPS, Bluetooth, Wifi, appareil photo, etc..).

Ajouter les librairies Constellation

Comme il s’agit d’une application Web, connecter une application Cordova à Constellation revient à connecter une page Web à Constellation.

Vous pouvez donc inclure les libraires en utilisant les CDN (en prenant soin de spécifier le schème explicitement, par exemple ‘https’) :

Par contre afin d’améliorer les performances de votre application mobile, il est recommandé d’embarquer ces libraires dans votre application.

Pour cela téléchargez (clique-droit > Enregistrer sous …) dans le dossier “js” les librairies JavaScript suivantes :

Puis ajoutez-les dans votre page “index.html” de cette façon:

Connecter votre application

Tout d’abord dans le ficher “config.xml” à la racine de votre projet Cordova, ajoutez ces quelques lignes :

Cela permet d’autoriser le container Cordova à accéder à des ressources externes comme le serveur Constellation !

Aussi dans votre page principale, index.html, modifiez le “Content-Security-Policy” par :

On autorise ainsi notre page à exploiter des services et scripts externes.

Dans le fichier de script principal (app.js), créez un client “Consumer” en spécifiant l’adresse de votre serveur Constellation, une clé d’accès et un friendly name :

constellation: $.signalR.createConstellationConsumer("http://constellation.monServer.com:8088", "MaCle123!", "Demo Cordova"),

Dans la fonction “onDeviceReady” lancez la connexion au serveur Constellation par la ligne :

app.constellation.connection.start();

Pour finir dans la fonction “initialize” attachez un handler sur le changement d’état de la connexion Constellation. L’idée étant d’afficher le texte “Connected to Constellation” à la place du message “Device is Ready” du sample Cordova.

app.constellation.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    $('.received').text('connected to constellation');
  }
});

En démarrant l’application dans l’émulateur, votre application se connectera au hub “Consumer” de votre Constellation :

Vous pouvez maintenant envoyer des messages et invoquer des MessageCallbacks de vos différents packages, recevoir des messages pour que les autres clients de la Constellation puissent invoquer des méthodes de votre application mobile par exemple, interroger ou suivre en temps réel des StateObjects publiés par les packages de votre Constellation.

Quelques exemples ci-après …

Afficher en temps réel des StateObjects

Reprenons l’exemple du StateObject “/intelcpu/0/load/0” produit par le package “HWMonitor” et correspondant à la consommation de votre CPU.

Pour cela nous allons enregistrer StateObjectLink sur ce StateObject en ciblant une sentinelle en particulier. Ici la sentinelle UI de mon ordinateur se nomme “PC-SEB_UI”.

Vous pouvons écrire :

app.constellation.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    $('.received').text('connected to constellation');
    app.constellation.client.registerStateObjectLink("PC-SEB_UI", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
      $("#cpu").text(Math.round(so.Value.Value * 100) / 100);
    });
  }
});

Sans oublier d’ajouter le “span” dans lequel afficher notre consommation :

PC-SEB CPU: 0 %

Et voilà comment en quelques lignes afficher des StateObjects en temps réel dans une application mobile multi-plateforme.

Dans cet exemple nous affichons la consommation CPU capturée par le package HWMonitor mais nous pouvons bien sûr afficher n’importe quel StateObject : des capteurs de température, état d’une zone de l’alarme, position de votre voiture, volume de l’ampli, consommation électrique, état d’une lampe, etc.…

Invoquer des MessageCallbacks

Tout comme n’importe quel “consommateur”, votre application mobile multi-plateforme peut envoyer des messages et donc invoquer des MessageCallbacks.

Pour découvrir les MessageCallbacks de votre Constellation, vous pouvez utiliser le MessageCallback Explorer de la Console Constellation.

Par exemple, après avoir déployé le package “WindowsControl” sur une sentinelle Windows, vous pouvez invoquer des MC pour arrêter votre Windows, verrouiller la session, se déconnecter, redémarrer ou encore mettre en veille la machine.

Ajoutons à notre application Android la capacité de verrouiller notre PC Windows. Pour cela vous pouvez cliquer sur l’icone pour générer le code d’invocation de ce MC en sélectionnant le langage de votre choix, dans notre cas, “Javascript” :

Dans notre page “index.html”, ajoutons un simple bouton (ou lien) HTML :

LOCK MY PC

Et dans notre fichier Javascript, invoquons le MessageCallback “’LockWorkStation” lorsque l’utilisateur clique sur notre bouton :

$("#lockPC").click(function () 
  constellation.server.sendMessage({ Scope: 'Package', Args: ['PC-SEB_UI/WindowsControl'] }, 'LockWorkStation', {});
});

Notez que dans le code ci-dessus, à l’inverse de l’exemple donné par le générateur de code de la Console Constellation, nous avons défini le nom de l’instance du package et non le nom du package seul. En effet, en envoyant un message au scope de type Package ”WindowsControl”, votre message sera reçu par toutes les instances du package “WindowsControl” quelque soit la sentinelle. Autrement dit, toutes les sentinelles Windows qui exécutent le package “WindowsControl” seront verrouillées. Pour cibler votre sentinelle en particulier, nous avons indiqué ici le nom de l’instance, c’est à dire le couple “Sentinelle + Package”, ici “PC-SEB_UI/WindowsControl”.

Aussi, d’un point de vue visuel, Cordova n’inclut pas de framework CSS à l’inverse d’Ionic par exemple. De ce fait tout est à votre charge. Ici nous avons créer un lien () sur lequel nous avons appliqué la classe CSS “btn”. Vous pouvez, pour l’exemple, utiliser des générateurs tel que celui-ci ou encore celui-la pour générer la classe “btn”.

Et voilà, notre application Android est maintenant capable de verrouiller notre poste Windows et d’afficher la consommation CPU en temps réel :

(screen here)

Pour aller plus loin …

Donc vous avez pu le découvrir dans cet article, réaliser des applications mobiles (ou tablettes) pour Android, iOS, Windows ou autre est relativement facile avec des plateformes comme Cordova. En utilisant la libraire JavaScript Constellation, vous pouvez donc développer des applications mobile connectées à Constellation en quelques minutes.

Une fois que votre application mobile est connectée à votre Constellation, elle peut suivre en temps réel tous les StateObjects produits par les packages de votre Constellation et invoquer des méthodes de ces packages en envoyant des messages.

De ce fait vous êtes libre de créer vos propres applications de supervision ou de contrôle de vos systèmes, services, réalisations, de votre domotique, etc…

Par exemple, vous créer un objet connecté avec un Raspberry et du Python ou bien un Arduino ou ESP8266, et vous pouvez créer facilement l’enrichir avec une application mobile. Ou bien vous ajoutez des lampes Hue et un media-center Kodi et vous décidez de créer une applications mobile unique pour tout contrôler en utilisant Constellation comme centralisateur.

Pour ma part je vous recommande vivement d’utiliser Ionic plutôt que Cordova. En effet, Ionic n’est ni plus ni moins qu’une surcouche à Cordova qui intègre le framework AngularJS et un framework CSS. Grace à Ionic vous pouvez développer des applications plus riche et beaucoup plus rapidement.

The post Créer une application mobile multi-plateforme connectée à Constellation avec Cordova appeared first on Constellation.

Créer une application mobile multi-plateforme connectée à Constellation avec Ionic

Sebastien Warin — Fri, 19 Aug 2016 08:29:16 +0000

// En cours de rédaction …

intro
install / base / link
hello world (request SO & send msg)
déploiement

The post Créer une application mobile multi-plateforme connectée à Constellation avec Ionic appeared first on Constellation.

Connecter une application Tizen sur Samsung Gear à Constellation

Sebastien Warin — Fri, 23 Sep 2016 09:42:43 +0000

Découverte de Tizen

La Samsung Gear S2 tourne sous Tizen. Cet OS a été initié par Samsung sous le nom LiMo (Linux Mobile) avant d’être renommé en 2011 par Tizen lorsque qu’Intel a rejoint le projet en abandonnant MeeGo. Depuis 2012, Tizen est développé par la “Tizen Association” qui regroupe entre autres Samsung et Intel mais aussi Huawei, Fujitsu, NEC, Panasonic, Orange, NTT DoCoMo ou encore Vodafone.

Dans ses premières versions toutes les applications Tizen étaient des applications HTML/JS permettant de garantir une portabilité entre les différents équipements. Depuis la version 2.0 sortie en 2013, il est également possible de développer des applications natives. C’est également à cette date que Samsung a annoncé l’abandon de son précédent système Bada pour se consacrer exclusivement à Tizen.

On retrouve Tizen dans plusieurs équipements de la marque : des smartphones (série Samsung Z), tablettes ou PC aux wearables (série Gear) en passant par les TV comme la dernière UN65H8000AF ou les appareils photos (comme le NX1). Cet OS a pour objectif d’équiper une multitude équipement dont des produits électroménagers (micro-onde, lave-linge, réfrigérateur), des voitures, des imprimantes, etc…

Hello World Tizen

Pour commencer, rendez-vous sur le site développeur Samsung pour télécharger le SDK Tizen.

Une fois la base installée, il faudra lancer l’Update Manager afin de sélectionner les composants dont vous avez besoin.

Dans notre cas, nous allons télécharger le Framework “Wearable” 2.3.1 pour développer des applications pour la Gear S2 ainsi que les outils du SDK Tizen (dont l’Emulateur Manager) mais surtout, dans la catégorie “Extras”, les extensions “Tizen Wearable” et le Certification Manager.

Pour développer une application Tizen Wearable, on peut soit faire une application “Web” en utilisant HTML5/CSS/JavaScript, soit une application native C/C++ ou soit une application hydride (Web + native).

Ces applications Wearables peuvent être rangées dans deux catégories :

“Standalone” : fonctionne sur votre montre de manière autonome
“Companion” : est liée à une application “host” qui tourne sur un mobile (Tizen ou Android)

Lançons donc l’IDE Tizen, un IDE basé sur Eclipse. Nous pouvons alors créer un nouveau projet à partir de template ou d’exemple prêt à l’emploi.

Ici la page HTML est un simple Hello World avec quelques lignes de JS pour changer le contenu d’une div au clic et gérer le bouton « back ».

Pour tester votre application, vous disposez du « Emulator Manager » vous permettant de créer des VM pour émuler votre Gear S2 et tester vos applications en local :

Comme pour le développement d’une application Cordova/Ionic sur Android, vous disposez de l’inspecteur Chrome intégré :

Bien entendu, vous pouvez également déployer et debugger directement sur votre montre. La première chose à faire est d’activer le débogage dans les paramètres de votre Gear S2 et de la connecter sur votre réseau Wifi.

Depuis le “Connection Explorer” de l’IDE Tizen, vous pourrez alors ajouter un nouveau “Remote Device” en spécifiant l’IP de votre Gear :

Vous devrez alors approuver la connexion sur votre montre :

Après quoi elle sera connectée dans l’IDE Tizen de la même manière que l’émulateur :

Nous pouvons alors relancer l’application en mode “Run” ou “Debug” :

Avec toujours avec la possibilité de faire du “Remote Debug” avec l’inspecteur Chrome directement sur la montre !

Créer une application Tizen connectée à Constellation

Comme il s’agit d’une application Web/Javascript, nous pouvons simplement utiliser la librairie JavaScript de Constellation. Et pour simplifier d’avantage le code, utilisons AngularJS et son module Constellation.

Créons donc un nouveau projet Tizen Wearable :

Puis ajoutons les libraires Constellation dans le dossier « js » :

Après avoir référencé ces libraires dans la page « index.html », éditons le fichier « app.js » à la racine pour créer un contrôleur AngularJS en y injectant le module Constellation.

Nous initialiserons le client Constellation avec l’URI de votre Constellation et une clé d’accès :

var swatch = angular.module('swatch', ['ngConstellation'])  .controller('MainController', ['$scope', 'constellationConsumer',
     function ($scope, constellation) { 
      
     constellation.initializeClient("https://monServerConstellation.com/constellation", "MonAccessKey", "SWatch");
        
     constellation.connect();  
}]);

Pour chaque StateObject reçu de la Constellation, stockons-le dans une variable de notre scope Angular ce qui nous permettra de les exploiter dans le template HTML :

constellation.onUpdateStateObject(function (message) {
  $scope.$apply(function () {                  
    if ($scope[message.PackageName] == undefined) {
      $scope[message.PackageName] = {}; 
    }
    $scope[message.PackageName][message.Name] = message;      
    });
});

Enfin, lorsque que nous sommes connecté à Constellation abonnons-nous aux StateObjects des différents packages de notre Constellation que nous souhaitons intégrer dans notre application Tizen.

Pour ma part je demande les StateObjects du thermostat Nest, des caméras de sécurité connectés à ZoneMinder, de mon système home-made de monitoring des ressources énergétiques S-Energy (basé sur un Raspberry) et S-Opener (gestion de la porte de garage), des capteurs NetAtmo et Oregon via un RFXCOM, de la domotique Z-Wave via une Vera, des media-centers Xbmc/Kodi, de mon ampli Pioneer, des onduleurs, de l’alarme (Paradox), des capteurs de luminosité home-made (à base de Raspberry et ESP8266), des capteurs hardware via WMI et ceux du routeur DD-WRT et également les StateObjects du package Tesla présentés dans l’article précédent.

constellation.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    constellation.requestSubscribeStateObjects("*", "tesla", "*", "*");
    constellation.requestSubscribeStateObjects("*", "ZoneMinder", "*", "ZoneMinder.Monitor");
    constellation.requestSubscribeStateObjects("*", "SEnergy", "*", "*");
    constellation.requestSubscribeStateObjects("*", "SOpener", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "NetAtmo", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "rfxcom", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Vera", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Nest", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Xbmc", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Pioneer", "*", "*");
    constellation.requestSubscribeStateObjects("*", "BatteryChecker", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Paradox", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "LightSensor", "Lux", "*");     
    constellation.requestSubscribeStateObjects("CEREBRUM", "HWMonitor", "*", "*");
    constellation.requestSubscribeStateObjects("*", "ddwrt", "RouterAJS.WAN", "*");
    constellation.requestSubscribeStateObjects("*", "ddwrt", "RouterAJS.WAN.Stats", "*");
  }
});

Pas besoin de plus de code, on peut dès maintenant éditer la page HTML pour créer notre interface.

Par exemple pour afficher la température et l’humidité captées par les sondes NetAtmo, il me suffira dans le template HTML d’ajouter le code suivant :

Salon : {{NetAtmo['Salon.Temperature'].Value}}°C | {{NetAtmo['Salon.Humidity'].Value}}%
Jardin : {{NetAtmo['Jardin.Temperature'].Value}}°C | {{NetAtmo['Jardin.Humidity'].Value}}%
Chambre1 : {{NetAtmo['Chambre1.Temperature'].Value}}°C | {{NetAtmo['Chambre1.Humidity'].Value}}%
Chambre2 : {{NetAtmo['Chambre2.Temperature'].Value}}°C | {{NetAtmo['Chambre2.Humidity'].Value}}%

Tizen propose des classes CSS prêtes à l’emploi que nous pouvons directement appliquer sur nos balises HTML pour rendre le visuel plus agréable :

De plus grâce à la notion de StateObjects de Constellation, nous pouvons sans trop d’effort afficher tout type de donnée peu importe la source. Par exemple, ici nous affichons la température de 3 pièces différentes captées par trois technologies différentes (NetAtmo, RFXCOM et Z-WAve)

Chambre (Netatmo) : {{NetAtmo['Chambre1.Temperature'].Value}}°C
Bureau (RFXCOM/Oregon) : {{rfxcom['Capteur Bureau'].Value.Temperature}}°C
Cave (Vera/Z-WAve) : {{Vera['Temperature Cave'].Value.Temperature}}°C

La librairie Tizen fournit également quelques contrôles Javascript. Par exemple utilisons le « tau.widget.CircleProgressBar » qui nous attachons sur un élément « progressbar » lié au StateObject « Nest » :


  Consigne: {{ Nest['Living Room'].Value.target_temperature_c }}°C
  Actuelle: {{Nest['Living Room'].Value.ambient_temperature_c}}°C

Ainsi il devient alors possible de contrôler son thermostat en tournant le cadran rotatif de la montre :

Pour envoyer la température de consigne, il me suffit d’invoquer le MessageCallback « SetTargetTemperature » au package Nest par la ligne :

constellation.sendMessage({ Scope: 'Package', Args: [ 'Nest' ] }, 'SetTargetTemperature', [ deviceid, temperature ])

Pour reprendre l’exemple de la sonnette connectée à Constellation par un ESP8266, on peut facilement ajouter le contrôle du mode « muet » sur notre montre. Il suffit d’ajouter une checkbox dont l’état est coché si notre StateObject « IsMute » est vrai :

Et lorsque l’on clique sur la checkbox, on invoque le MessageCallback « SetMute » en passant l’état inverse de notre StateObject :

$scope.SetMute = function(isMute) {
  constellation.sendMessage({ Scope: 'Package', Args: [ 'DoorBell' ] }, 'SetMute', isMute);                 
};

De quoi contrôler notre sonnette à n’importe quel moment depuis son poignet :

On peut aussi très facilement contrôler toute notre domotique Z-Wave. Pour ce faire, créons une listview (

Et comme pour la sonnette, lorsque l’on clique dessus, on envoie un message au package Vera pour définir le nouvel état :


  
   {{device.Name}}
      {{device.Metadatas.Room}}

Et là encore, juste avec ces quelques lignes de code HTML on obtient une interface de contrôle de tous nos équipements Z-Wave (lumières, appliances, volets) sur notre poignet :

De ce fait, chaque objet, service ou programme connecté dans Constellation peut être facilement intégré dans vos applications Javascript, que ce soit une page Web, une application mobile Cordova/Ionic ou bien comme ici une application Tizen pour votre montre !

Au final avec à peine 150 lignes de Javascript et 350 de code HTML, cette application me permet au quotidien de garder un œil sur mes serveurs, ma consommation énergétique et les différents capteurs météo de la maison, voir en temps réel mes caméras de sécurité, piloter mon système d’alarme, les lampes et volets de la maison, le thermostat, l’ampli ou encore porte ma porte de garage.

The post Connecter une application Tizen sur Samsung Gear à Constellation appeared first on Constellation.