﻿<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tag Cordova - Constellation</title>
	<atom:link href="https://developer.myconstellation.io/tag/cordova/feed/" rel="self" type="application/rss+xml" />
	<link>https://developer.myconstellation.io/tag/cordova/</link>
	<description>Votre plateforme d&#039;interconnexion</description>
	<lastBuildDate>Thu, 19 Apr 2018 07:41:36 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.0.11</generator>

<image>
	<url>https://developer.myconstellation.io/wp-content/uploads/2016/02/256x256-e1457476015859.png</url>
	<title>Tag Cordova - Constellation</title>
	<link>https://developer.myconstellation.io/tag/cordova/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Créer une boite aux lettres connectée avec Constellation</title>
		<link>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/</link>
					<comments>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 27 Sep 2017 10:29:50 +0000</pubDate>
				<category><![CDATA[Showcases]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[ESP]]></category>
		<category><![CDATA[MessageCallback]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Capteur]]></category>
		<category><![CDATA[PushBullet]]></category>
		<category><![CDATA[Constellation]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[Consumer]]></category>
		<category><![CDATA[Cordova]]></category>
		<category><![CDATA[Ionic]]></category>
		<category><![CDATA[IoT]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=5519</guid>

					<description><![CDATA[<p>Projet réalisé par Judith Caroff, Jeanne Leclercq, Luc Fermaut, Pierre Hourdé, Jean-Baptiste Lavoine et Victorien Renault. Introduction Étudiants en 3ème année à l’ISEN-Lille, nous avons eu l’idée de développer une boîte aux lettres connectée en utilisant la plateforme Constellation. En</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/">Créer une boite aux lettres connectée avec Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><em>Projet réalisé par Judith Caroff, Jeanne Leclercq, Luc Fermaut, Pierre Hourdé, Jean-Baptiste Lavoine et Victorien Renault.</em></p>
<h2>Introduction</h2>
<p>Étudiants en 3<sup>ème</sup> année à l’ISEN-Lille, nous avons eu l’idée de développer une boîte aux lettres connectée en utilisant la plateforme Constellation.</p>
<p>En réalisant ce projet, nous voulions proposer une solution de boîte aux lettres connectée à un prix raisonnable et possédant une interface fluide pour améliorer l’expérience de l’utilisateur. Pour cela, nous avons acheté des composants peu coûteux à placer sur notre boîte aux lettres, et développé une application Ionic.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-de-prsentation.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Schéma de fonctionnement global de notre boîte aux lettres" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-de-prsentation_thumb.png" alt="Schéma de fonctionnement global de notre boîte aux lettres" width="450" height="225" border="0" /></a></p>
<p>Notre boîte aux lettres est connectée à la plateforme Constellation par le biais d’un ESP8266, vous pouvez le connecter facilement à votre Constellation en suivant <a href="https://developer.myconstellation.io/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">cette documentation sur le site Constellation</a>.</p>
<p>Nous détectons ensuite la présence de courriers à l’aide de capteurs à ultrasons.</p>
<p>Avec un lecteur de cartes NFC, nous contrôlons l’accès à notre boîte aux lettres. Celui-ci nous permet de savoir qui a ouvert la boîte aux lettres et donc d’envoyer les bonnes informations à notre Constellation. Le lecteur NFC nous permet également de vérifier qu’une carte ou qu’un badge a les autorisations nécessaires afin de commander l’ouverture via un servo-moteur.</p>
<p>L’application, développée avec le framework ionic nous permet d’offrir une interface utilisateur ergonomique. En la connectant à Constellation, l’utilisateur a accès à toutes les informations nécessaires très facilement.</p>
<h2>La boîte aux lettres connectée</h2>
<p><i>Prérequis : Avoir connecté l’ESP8266 à Constellation.</i></p>
<h3>Composants utilisés</h3>
<p>Pour connecter notre boîte aux lettres à Constellation, nous avons utilisé :</p>
<ul>
<li>Un ESP8266 D1 Mini (8€ sur Amazon)</li>
<li>Des capteurs à ultrasons HC SR04 (3€ sur Amazon)</li>
<li>Un lecteur de cartes NFC (8€ sur Amazon)</li>
<li>Un servo-moteur (6€ sur eBay)</li>
</ul>
<p>Voici la correspondance pour définir les différents pins avec cet ESP :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">D0</td>
<td valign="top">D1</td>
<td valign="top">D2</td>
<td valign="top">D3</td>
<td valign="top">D4</td>
<td valign="top">D5</td>
<td valign="top">D6</td>
<td valign="top">D7</td>
<td valign="top">D8</td>
<td valign="top">RX</td>
<td valign="top">TX</td>
</tr>
<tr>
<td valign="top">16</td>
<td valign="top">5</td>
<td valign="top">4</td>
<td valign="top">0</td>
<td valign="top">2</td>
<td valign="top">14</td>
<td valign="top">12</td>
<td valign="top">13</td>
<td valign="top">15</td>
<td valign="top">3</td>
<td valign="top">1</td>
</tr>
</tbody>
</table>
<h3>Etape 1 : Détecter la présence d’une lettre grâce à un capteur ultrason</h3>
<p><i>Nos capteurs fonctionnent avec une alimentation de 5V</i><i></i></p>
<p>Les capteurs à ultrasons nous permettent de mesurer une distance en créant une impulsion sur une des broches. Grâce à cette mesure, nous pouvons détecter une variation de la distance lorsqu’un courrier et inséré dans la boîte aux lettres. Nous envoyons alors l’information à Constellation grâce à un MessageCallback.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/capteur-ultrason.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Capteur ultrason" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/capteur-ultrason_thumb.jpg" alt="Capteur ultrason" width="300" height="136" border="0" /></a></p>
<p>Relier le capteur à notre ESP est assez simple, notre capteur à ultrasons possède 4 branches, chacune branchée sur un pin de notre ESP.</p>
<p>Ci-dessous, les correspondances entre les branches du capteur à ultrasons et les pins de l’ESP8266 :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="63%">
<p style="text-align: left;">Branche du capteur à ultrasons</p>
</td>
<td valign="top" width="36%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="63%">VCC</td>
<td valign="top" width="36%">5V</td>
</tr>
<tr>
<td valign="top" width="63%">GND</td>
<td valign="top" width="36%">GND</td>
</tr>
<tr>
<td valign="top" width="63%">TRIG</td>
<td valign="top" width="36%">D4</td>
</tr>
<tr>
<td valign="top" width="63%">ECHO</td>
<td valign="top" width="36%">D3</td>
</tr>
</tbody>
</table>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Module-ultrasons.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Module à ultrasons connecté à notre ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Module-ultrasons_thumb.png" alt="Module à ultrasons connecté à notre ESP8266" width="354" height="205" border="0" /></a></p>
<p style="text-align: left;">Dans notre code, nous configurons les pins dans le setup afin de préparer l’impulsion.</p>
<p></p><pre class="crayon-plain-tag">void setup() {
   pinMode(TRIGGER, OUTPUT);
   digitalWrite(TRIGGER, LOW); //La broche TRIGGER doit être à LOW au repos
   pinMode(ECHO, INPUT);
   Serial.begin(9600);
 }</pre><p></p>
<p style="text-align: left;">Nous envoyons ensuite de façon continue des impulsions pour savoir si un obstacle est présent puis, s’il y en a un, nous envoyons un Message Callback.</p>
<p></p><pre class="crayon-plain-tag">void loop() {    
    /* 1. Lance une mesure de distance en envoyant une impulsion HIGH de 10 µs sur la broche TRIGGER */
   digitalWrite(TRIGGER, HIGH);
   delayMicroseconds(10);
   digitalWrite(TRIGGER, LOW);
   
   /* 2. Mesure le temps entre l'envoi de l'impulsion ultrasonore et son écho (s'il existe) */
   long measure = pulseIn(ECHO, HIGH);                
                                                                                 
   /* 3. Calcul la distance à partir du temps mesuré */
   long distanceMeasured = measure *vitesse ;
  
   /* 4. Envoie d'un MessageCallback à Constellation si on rentre dans le if */ 
   if(distanceMeasured &lt; defaultValue){
     constellation.sendMessage(Package, "Brain", "message");
   }
}</pre><p></p>
<p style="text-align: center;"><img loading="lazy" class="size-full wp-image-5527 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video1-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video1-2.gif" alt="" width="196" height="350" /></p>
<h3 style="text-align: left;">Etape 2 : Gérer les accès à la boîte aux lettres grâce à un lecteur de carte NFC</h3>
<p style="text-align: left;">Dans cette partie, nous allons envoyer un Message Callback à Constellation grâce à l’ID du badge NFC détecté par notre lecteur de cartes.</p>
<p style="text-align: left;">Cela nous permettra par la suite de gérer les autorisations d’accès à la boîte aux lettres, de contrôler l’ouverture par notre servo-moteur, et d’avertir l’utilisateur qu’un colis a été livré ou que le courrier a été récupéré. Nous devrons donc enregistrer les différents utilisateurs en renseignant leur ID de badge et leur statut (facteur ou utilisateur).</p>
<p style="text-align: left;">Voici le câblage réalisé pour cette partie entre le NFC et l’ESP :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="49%">Branche du NFC</td>
<td valign="top" width="50%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="49%">RST</td>
<td valign="top" width="50%">D1</td>
</tr>
<tr>
<td valign="top" width="49%">SDA(SS)</td>
<td valign="top" width="50%">D2</td>
</tr>
<tr>
<td valign="top" width="49%">MOSI</td>
<td valign="top" width="50%">D7</td>
</tr>
<tr>
<td valign="top" width="49%">MISO</td>
<td valign="top" width="50%">D6</td>
</tr>
<tr>
<td valign="top" width="49%">SCK</td>
<td valign="top" width="50%">D5</td>
</tr>
<tr>
<td valign="top" width="49%">GND</td>
<td valign="top" width="50%">GND</td>
</tr>
<tr>
<td valign="top" width="49%">3.3 V</td>
<td valign="top" width="50%">3.3 V</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Lecteur-NFC.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Lecteur NFC connecté à notre ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Lecteur-NFC_thumb.png" alt="Lecteur NFC connecté à notre ESP8266" width="354" height="183" border="0" /></a></p>
<p style="text-align: left;">Il faut commencer par télécharger la bibliothèque suivante :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-1.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="bibliothèque arduino 1" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-1_thumb.png" alt="bibliothèque arduino 1" width="354" height="71" border="0" /></a></p>
<p style="text-align: left;">Voici ensuite la fonction nécessaire à l’envoi d’un Message Callback lorsque nous captons un nouveau badge.</p>
<p></p><pre class="crayon-plain-tag">void NFC() {
    // Regarde s'il y a une nouvelle carte, s'il n'y en a pas on quitte la fonction
    if ( ! mfrc522.PICC_IsNewCardPresent()) {
        return;
    }
    // S'il n'arrive pas à lire la carte on quitte la fonction
    if ( ! mfrc522.PICC_ReadCardSerial()) {
        return;
    }
    char sochar[256]; // 256 correspond à un octet
    String UID= dump_byte_array(mfrc522.uid.uidByte, mfrc522.uid.size); 
    /* Permet de transformer un tableau de bit en String */
    UID.toCharArray(sochar, 256);
    constellation.sendMessage(Package, "Brain", "Authorisation", sochar); /* envoie un message Callback du package Brain appelé Authorisation*/
}</pre><p></p>
<h3 style="text-align: left;">Etape 3 : Ouvrir et fermer la porte grâce à un servo-moteur</h3>
<p style="text-align: left;">Le servomoteur va nous servir à commander notre verrou. Ce dernier va donc s’abonner à un State Object nous donnant l’état de la porte (verrouillée ou déverrouillée). Ainsi, lorsque notre lecteur NFC captera un ID autorisé, notre State Object changera, ainsi que l’état de verrouillage de la porte.</p>
<p style="text-align: left;">Voici les branchements qui relient notre moteur à l’ESP :</p>
<table class=" aligncenter" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="59%">PIN DU MOTEUR</td>
<td valign="top" width="40%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="59%">5 V (câble orange)</td>
<td valign="top" width="40%">5 V</td>
</tr>
<tr>
<td valign="top" width="59%">GND (câble marron)</td>
<td valign="top" width="40%">GND</td>
</tr>
<tr>
<td valign="top" width="59%">Commande (câble jaune)</td>
<td valign="top" width="40%">D8</td>
</tr>
</tbody>
</table>
<p style="text-align: left;">Avant d’utiliser le code ci-dessous, il faut vérifier que vous avez bien installé les bibliothèques suivantes :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-2.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="bibliothèque arduino 2" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-2_thumb.png" alt="bibliothèque arduino 2" width="354" height="128" border="0" /></a></p>
<p style="text-align: left;">Dans le Setup ci-dessous, nous nous abonnons à un StateObject qui nous permet d’ouvrir et de fermer la porte lorsqu’il change d’état.</p>
<p></p><pre class="crayon-plain-tag">void setup() {
    monServo.attach(15); // Définit le moteur au D8
    monServo.write(0); // ServoMoteur à sa position initiale
    constellation.registerStateObjectLink("*", "Brain", "Porte_ouverte", [](JsonObject&amp; so) {
     delay(100); // délai afin d'attendre la connexion à  Constellation
     if (so["Value"]== true){   
       monServo.write(90);  // Position de la porte ouverte
       }
 
    if (so["Value"]== false){
       monServo.write(0);   // Position de la porte fermée
       }
       delay(3000); // attendre au minimum 3 secs avant que la porte ne change d'état.
   });  
 }</pre><p></p>
<p style="text-align: center;"><img loading="lazy" class="alignnone size-full wp-image-5528 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video2-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video2-2.gif" alt="" width="196" height="350" /></p>
<h3 style="text-align: left;">Etape 4 : Synchroniser toutes nos parties avec un package Constellation</h3>
<p style="text-align: left;">Vous pouvez retrouver notre code complet pour la boîte aux lettres sur GitHub pour plus de précision (<a href="https://l.facebook.com/l.php?u=https%3A%2F%2Fgithub.com%2FSqyluck%2FBoite-aux-lettres-connectee&amp;h=ATO-A7kid-AyGmrtD0hCDSOEWcwWMsyF8aAuEcrDY3b1Q9b-_NEMOnsJ9DOWADshjfo8FwRAmqfoT5MoHe3RwBJ1U_2af1vgeNd_XHbk_4LNVdA4-AYBgC-v6mcC5YakbL12cgMSWJFFBA">https://github.com/Sqyluck/Boite-aux-lettres-connectee</a>).</p>
<p style="text-align: left;">Il est ensuite nécessaire de créer un package Constellation, qui va nous permettre de traiter toutes les données de nos différents éléments.</p>
<p style="text-align: left;">→ Voici les différents Message Callbacks créent dans le package afin de répondre à nos besoins.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Message-Callbacks.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Message Callbacks" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Message-Callbacks_thumb.png" alt="Message Callbacks" width="354" height="357" border="0" /></a></p>
<p style="text-align: left;">→ Voici la liste des State Objects générés par le package pour permettre l’affichage de nos données dans l’application et l’envoi d’ordre au servomoteur via l’ESP8266.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/State-Objects.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="State Objects" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/State-Objects_thumb.png" alt="State Objects" width="354" height="166" border="0" /></a></p>
<h3 style="text-align: left;">Etape 5 : Fabrication de la boîte aux lettres</h3>
<p style="text-align: left;">Nous avons utilisé des planches en bois afin de réaliser notre boîte aux lettres. Nous avons vissé les planches entre elles, puis nous avons fixé nos éléments sous le toit de la boîte.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-extrieur.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre extérieur" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-extrieur_thumb.jpg" alt="Visuel boite au lettre extérieur" width="254" height="310" border="0" /></a></p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-composants.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre composants" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-composants_thumb.jpg" alt="Visuel boite au lettre composants" width="223" height="244" border="0" /></a> <a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-intrieur.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre intérieur" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-intrieur_thumb.jpg" alt="Visuel boite au lettre intérieur" width="207" height="244" border="0" /></a></p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-composants.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Schéma composants" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-composants_thumb.png" alt="Schéma composants" width="450" height="232" border="0" /></a></p>
<h2 style="text-align: left;">L’interface utilisateur</h2>
<p style="text-align: left;"><i>Prérequis : disposer de Node.js et de npm</i></p>
<h3 style="text-align: left;">Etape 1 : Créer une application avec ionic</h3>
<p style="text-align: left;">Afin de réaliser notre interface utilisateur, nous avons décidé dans un premier temps de développer notre application avec Ionic 2 dans Visual Studio. Mais avec cette méthode nous étions obligé de développer notre application en langage typescript ce qui était plus compliqué pour connecter l’application à la plateforme Constellation. Nous avons donc décidé d’utiliser Ionic 1 afin de développer notre application en javascript et de la connecter plus facilement.</p>
<p style="text-align: left;">Avant de commencer, il faut lancer l’installation de Ionic 1 depuis l’invite de commande :</p>
<p></p><pre class="crayon-plain-tag">npm install – g cordova ionic</pre><p></p>
<p style="text-align: left;"><i>(Attention : cette commande ne fonctionnera pas si vous ne disposez pas auparavant de node.js et de npm)</i><i></i></p>
<p style="text-align: left;">Une fois que nous nous sommes placé dans le dossier dans lequel nous souhaitons développer notre application, nous pouvons utiliser la commande suivante pour lancer la création d’un nouveau projet.</p>
<p></p><pre class="crayon-plain-tag">ionic start myApp tabs --type ionic1</pre><p></p>
<p style="text-align: left;"><i>(Nous venons ici de créer un nouveau projet ionic 1 de type tabs intitulé myApp)</i></p>
<p style="text-align: left;">Dans l’invite de commande, placez-vous dans le dossier de l’application (en utilisant la commande cd).</p>
<p style="text-align: left;">La commande ionic serve permet d’exécuter l’application dans un navigateur.</p>
<p style="text-align: left;">Lorsque le projet est créé, vous devez éditer vos différentes pages (par ex. sur Notepad++). Les fichiers à modifier se trouvent dans le dossier « www » :</p>
<ul style="text-align: left;">
<li>Le fichier index.html</li>
<li>Les fichiers .html appartenant au dossier “templates” → C’est ici que vous pouvez modifier le contenu de chaque page de votre application.</li>
<li>Le fichier app.js dans le dossier “js” → Vous devez définir votre constellation à cet endroit.</li>
<li>Le fichier controllers.js dans le dossier “js” → Chaque controller est associé à une page html. Vous pouvez utiliser les variables et les fonctions définies dans ces pages grâce aux “Scopes”.</li>
</ul>
<h3 style="text-align: left;">Etape 2 : Visualiser notre application sur un smartphone</h3>
<p style="text-align: left;">Si vous souhaitez utiliser votre application sur votre smartphone, vous pouvez utiliser l’application “ionic view” disponible sur l’App Store et Google Play. Cette application vous permettra de visualiser directement l’application que vous êtes en train de développer sur votre smartphone.</p>
<p style="text-align: left;">Une fois l’application installée, vous devez ensuite vous rendre <a href="https://apps.ionic.io/apps/">sur ce site</a>, créer un compte, puis cliquez sur “New App”. Il ne vous reste plus qu’à faire le lien avec votre application et l’envoyer sur votre appareil. Pour cela, dans le dossier de votre application, utilisez les deux commandes suivantes dans votre invite de commande</p>
<p></p><pre class="crayon-plain-tag">ionic link 
ionic upload</pre><p></p>
<p style="text-align: left;">Ouvrez ensuite ionic view et visualisez votre application.</p>
<p style="text-align: left;">Vous pouvez également, après avoir branché votre téléphone et avoir activé le mode debug, utiliser la commande cordova run android afin de simuler directement votre application sur votre téléphone android.</p>
<h3 style="text-align: left;">Etape 3 : Connecter notre application à constellation</h3>
<p style="text-align: left;">Afin de connecter notre application à la plateforme constellation, nous allons modifier le fichier app.js ainsi que le index.html.</p>
<p style="text-align: left;">Pour cela, nous allons importer les bibliothèques suivantes dans le fichier index.html :</p>
<ul style="text-align: left;">
<li>jquery-2.2.4.min.js</li>
<li>jquery.signalr-2.2.1.min.js</li>
<li>Constellation-1.8.1.min.js</li>
<li>ngConstellation-1.8.1.min.js</li>
</ul>
<p style="text-align: left;">Les librairies sont disponibles sur cette <a href="http://cdn.myconstellation.io/js/">page</a>. Nous vous conseillons de créer un dossier intitulé constellation dans le dossier « lib » et d’y enregistrer ces différentes bibliothèques.</p>
<p style="text-align: left;">Il ne vous restera plus qu’à ajouter les lignes de code suivantes dans le fichier index.html :</p>
<p></p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="lib/constellation/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/jquery.signalr-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/ngConstellation-1.8.1.min.js"&gt;&lt;/script&gt;</pre><p></p>
<p style="text-align: left;">Puis nous allons ajouter le code suivant à notre fichier app.js :</p>
<p style="text-align: left;">1. Modifier la ligne angular.module, y ajouter ‘ngConstellation’ comme ci-dessous :</p>
<p></p><pre class="crayon-plain-tag">angular.module('starter', ['ionic', 'starter.controllers', 'ngConstellation'])</pre><p></p>
<p style="text-align: left;">2. Modifier la fonction .run, y ajouter $rootScope et constellationConsumer :</p>
<p></p><pre class="crayon-plain-tag">.run(function($ionicPlatform, $rootScope, constellationConsumer)</pre><p></p>
<p style="text-align: left;">3. Ajouter le code suivant dans la fonction .run :</p>
<p></p><pre class="crayon-plain-tag">constellationConsumer.initializeClient("http://192.168.43.171:8088", "123456789", "Application Ionic");
    constellationConsumer.onConnectionStateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.connected) {
            console.log("Connecté à constellation");
            $rootScope.isConnected = true;
        }
    });
    constellationConsumer.connect();
    $rootScope.constellation = constellationConsumer;</pre><p></p>
<p style="text-align: left;">Vous pouvez maintenant vérifier que vous êtes bien connecté à votre constellation en regardant dans votre console (f12 dans votre navigateur).</p>
<h3 style="text-align: left;">Etape 4 : Connecter notre application à la boîte aux lettres</h3>
<p style="text-align: left;">Un certain nombre de State Objects et de Message Callbacks ont été réalisés dans notre package constellation afin de traiter nos différentes informations (ce package est disponible sur gitHub).</p>
<p style="text-align: left;">Le rôle de notre application ici est simplement de s’abonner aux State Objects et d’envoyer des messages Callbacks à notre constellation.</p>
<p style="text-align: left;">→ <b>Exemple de récupération d’un State Object</b> :</p>
<p style="text-align: left;">Les StateObjects se récupèrent dans le fichier app.js, à l’endroit où nous avons défini notre constellation. Voici un exemple de code correspondant à notre State Object « Users » :</p>
<p></p><pre class="crayon-plain-tag">//State Object Utilisateurs
constellationConsumer.registerStateObjectLink("*", "Brain", "Users", "*", function(so) {
    $rootScope.Users = so.Value;
    $rootScope.$apply();
});</pre><p></p>
<p style="text-align: left;">Pour afficher nos utlisateurs, il nous suffit maintenant, dans notre page html d’utiliser le code suivant :</p>
<p></p><pre class="crayon-plain-tag">&lt;ion-item ng-repeat="user in Users"&gt;
  &lt;h2&gt;{{user.firstName}} {{user.name}}&lt;/h2&gt;
  &lt;p&gt;{{user.client ? "client":"facteur"}}&lt;/p&gt;
&lt;/ion-item&gt;</pre><p></p>
<p style="text-align: left;">→ <b>Exemple d’envoi d’un message Callback</b> :</p>
<p style="text-align: left;">Les messages Callbacks s’envoient dans le fichier controllers.js. Voici l’exemple de code pour le Message Callback « DeleteUser » :</p>
<p></p><pre class="crayon-plain-tag">//Message CallBack DeleteUser
$scope.name = $stateParams.name
$scope.firstName = $stateParams.firstName;
$scope.deleteUser = function() {
    var deleteUser = $ionicPopup.confirm({
      title: 'Supprimer cet utilisateur',
      template: 'Etes vous sur de vouloir supprimer cet utilisateur ?'
    });
    deleteUser.then(function(res) {
      if(res) {
          $rootScope.constellation.sendMessage({ Scope: 'Package', Args: ['Brain'] }, 'DeleteUser', [$scope.firstName, $scope.name ]);
          $state.go('tab.utilisateurs');
          console.log('deleted');
      } 
      else {
          console.log('do nothing');
      }
    });
};</pre><p></p>
<p style="text-align: left;">Dans notre page html, on appelle maintenant la fonction créée dans notre controller.js dans un bouton par exemple :</p>
<p></p><pre class="crayon-plain-tag">&lt;button ng-click="deleteUser()"&gt;Supprimer cet utilisateur&lt;/button&gt;</pre><p></p>
<p style="text-align: left;">En vous servant de cette base, vous pouvez réaliser une application vous permettant de recevoir un message sur votre application lorsque vous recevez un courrier ou un colis mais aussi d’ajouter ou de supprimer des accès à la boite aux lettres.</p>
<p style="text-align: center;"><img loading="lazy" class="alignnone size-full wp-image-5530 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video3-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video3-2.gif" alt="" width="196" height="350" /></p>
<p style="text-align: left;">Il est également possible de réutiliser des packages existants, par exemple, nous nous sommes servis du package PushBullet afin de recevoir des notifications sur notre smartphone.</p>
<p style="text-align: left;">Voici un aperçu de notre application ionic :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/notifications.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="notifications" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/notifications_thumb.png" alt="notifications" width="150" height="295" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/paramtres.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="paramètres" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/paramtres_thumb.png" alt="paramètres" width="150" height="295" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/utilisateurs.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="utilisateurs" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/utilisateurs_thumb.png" alt="utilisateurs" width="150" height="295" border="0" /></a></p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/">Créer une boite aux lettres connectée avec Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer une application mobile multi-plateforme connectée à Constellation avec Cordova</title>
		<link>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-cordova/</link>
					<comments>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-cordova/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Fri, 19 Aug 2016 08:28:47 +0000</pubDate>
				<category><![CDATA[Javascript API]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Cordova]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[SendMessage]]></category>
		<category><![CDATA[Consumer]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=2335</guid>

					<description><![CDATA[<p>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</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-cordova/">Créer une application mobile multi-plateforme connectée à Constellation avec Cordova</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>La plateforme <a href="http://cordova.apache.org/">Apache Cordova</a> (anciennement PhoneGap) permet de créer des applications mobiles (Android, Windows Phone, iPhone, Blackberry, …) en utilisant les technologies Web (HTML, JS, CSS).</p>
<p align="center"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="cordova_logo_normal_dark" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/cordova_logo_normal_dark.png" alt="cordova_logo_normal_dark" width="240" height="71" border="0" /></p>
<p>Couplée à la <a href="/client-api/javascript-api/">libraire JavaScript Constellation</a>, il devient très facile de créer une application mobile pour votre smartphone ou tablette connectée à Constellation.</p>
<h3>Installer Cordova</h3>
<p>Cordova utilise nodejs, l&rsquo;installation est donc très simple et rapide :</p>
<ol>
<li>Installer <a href="http://nodejs.org/">NodeJS</a> si vous ne l&rsquo;avez pas déjà</li>
<li>Depuis le terminal (ou cmd pour windows) lancez la commande :</li>
</ol>
<p></p><pre class="crayon-plain-tag">npm install -g cordova</pre><p></p>
<p>Et voila Cordova est installé, mais il vous faut maintenant installer les SDK spécifiques aux plateformes que vous comptez utiliser.</p>
<p>Pour plus d’information, quelques ressources :</p>
<ul>
<li><a href="https://www.grafikart.fr/tutoriels/cordova/apache-cordova-installation-432">Installer et configurer Cordova</a></li>
<li><a href="http://cordova.apache.org/#getstarted">Guide de démarrage Cordova</a></li>
<li><a href="https://cordova.apache.org/docs/fr/latest/guide/platforms/android/">Guide pour la plate-forme Android</a></li>
</ul>
<h3>Créer un projet Cordova</h3>
<p>Lancez une invite de commande Windows et tapez la ligne suivante pour créer votre projet :</p>
<p></p><pre class="crayon-plain-tag">cordova create Demo</pre><p></p>
<p>Ensuite ajoutez le ou les plateformes cibles de votre application. Par exemple, développons une application pour Android :</p>
<p></p><pre class="crayon-plain-tag">cd Demo
cordova platform add android</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-154.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-149.png" alt="image" width="350" height="311" border="0" /></a></p>
<p>Pour démarrer votre application sur l’émulateur Android ou sur votre terminal Android (connecté en USB) :</p>
<p></p><pre class="crayon-plain-tag">cordova run android</pre><p></p>
<h4>Tester votre application sur l’émulateur</h4>
<p>En utilisant le “<em>Android Virtual Device (AVD) Manager</em>” créez un device que l’on nommera ici “SmartphoneDemo” sous Android 5.1.1 :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-165.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-160.png" alt="image" width="250" height="364" border="0" /></a></p>
<p align="left">Vous pouvez ensuite cliquer sur le bouton “Start” pour lancer le device virtuel :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-160.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-155.png" alt="image" width="254" height="161" border="0" /></a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-161.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-156.png" alt="image" width="250" height="432" border="0" /></a></p>
<p>Enfin lancez la commande suivante pour déployer et démarrer votre application dans l’émulateur :</p>
<p></p><pre class="crayon-plain-tag">cordova run android</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-162.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-157.png" alt="image" width="354" height="229" border="0" /></a></p>
<h4>Debugger votre application avec l’inspecteur Chrome</h4>
<p>Dans un nouvel onglet Chrome, rendez-vous sur <a title="chrome://inspect/#devices" href="chrome://inspect/#devices">chrome://inspect/#devices</a>. Vous pourrez alors inspecter votre application Cordova :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-163.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-158.png" alt="image" width="350" height="220" border="0" /></a></p>
<p align="left">Ainsi vous profiterez de tous les outils de debugging Web pour votre application mobile.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-164.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-159.png" alt="image" width="354" height="211" border="0" /></a></p>
<h4>Déployer votre application sur votre téléphone</h4>
<p>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 :</p>
<p></p><pre class="crayon-plain-tag">cordova run android</pre><p></p>
<p>… lancer votre application sur votre téléphone et utiliser l’inspecteur Chrome pour la debugger à distance.</p>
<p>Autrement vous pouvez aussi utiliser la commande :</p>
<p></p><pre class="crayon-plain-tag">cordova build android</pre><p></p>
<p>… 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.</p>
<h3>Connecter votre application Cordova à Constellation</h3>
<p>La structure d’une application Cordova est la suivante :</p>
<ul>
<li>Une page “index.html”, la page de démarrage de votre application</li>
<li>Des dossiers css, img et js pour ranger respectivement les feuilles de style CSS, les images et les scripts JS</li>
</ul>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-166.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-161.png" alt="image" width="350" height="293" border="0" /></a></p>
<p align="left">En clair votre application mobile se développe comme une véritable application Web. Vous pouvez ensuite <a href="http://cordova.apache.org/docs/en/latest/guide/cli/#add-plugins">ajouter des plugins</a> pour accéder fonctionnalités du téléphone depuis votre code JavaScript (téléphonie, SMS, contacts, GPS, Bluetooth, Wifi, appareil photo, etc..).</p>
<h4 align="left">Ajouter les librairies Constellation</h4>
<p align="left">Comme il s’agit d’une application Web, connecter une application Cordova à Constellation revient à <a href="/getting-started/connectez-vos-pages-web-constellation/">connecter une page Web à Constellation</a>.</p>
<p align="left">Vous pouvez donc inclure les libraires en utilisant les CDN (en prenant soin de spécifier le schème explicitement, par exemple ‘https’) :</p>
<p></p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;</pre><p></p>
<p align="left">Par contre afin d’améliorer les performances de votre application mobile, il est recommandé d’embarquer ces libraires dans votre application.</p>
<p align="left">Pour cela téléchargez (<em>clique-droit &gt; Enregistrer sous …</em>) dans le dossier “js” les librairies JavaScript suivantes :</p>
<ul>
<li>
<div align="left"><a href="https://code.jquery.com/jquery-2.2.4.min.js">https://code.jquery.com/jquery-2.2.4.min.js</a></div>
</li>
<li>
<div align="left"><a href="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js">https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js</a></div>
</li>
<li>
<div align="left"><a href="https://cdn.myconstellation.io/js/Constellation-1.8.1.min.js">https://cdn.myconstellation.io/js/Constellation-1.8.1.min.js</a></div>
</li>
</ul>
<p>Puis ajoutez-les dans votre page “index.html” de cette façon:</p>
<p></p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="js/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.signalr-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;</pre><p></p>
<h4 align="left">Connecter votre application</h4>
<p align="left">Tout d’abord dans le ficher “config.xml” à la racine de votre projet Cordova, ajoutez ces quelques lignes :</p>
<p></p><pre class="crayon-plain-tag">&lt;allow-intent href="ws://"/&gt;
&lt;allow-intent href="*" /&gt;
&lt;access origin="*" subdomains="true" /&gt;</pre><p></p>
<p align="left">Cela permet d’autoriser le container Cordova à accéder à des ressources externes comme le serveur Constellation !</p>
<p align="left">Aussi dans votre page principale,<em> index.html</em>, modifiez le “Content-Security-Policy” par :</p>
<p></p><pre class="crayon-plain-tag">&lt;meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';"&gt;</pre><p></p>
<p align="left">On autorise ainsi notre page à exploiter des services et scripts externes.</p>
<p align="left">Dans le fichier de script principal (<em>app.js</em>), créez un client “Consumer” en spécifiant l’adresse de votre serveur Constellation, une clé d’accès et un friendly name :</p>
<p></p><pre class="crayon-plain-tag">constellation: $.signalR.createConstellationConsumer("http://constellation.monServer.com:8088", "MaCle123!", "Demo Cordova"),</pre><p></p>
<p align="left">Dans la fonction “onDeviceReady” lancez la connexion au serveur Constellation par la ligne :</p>
<p></p><pre class="crayon-plain-tag">app.constellation.connection.start();</pre><p></p>
<p align="left">Pour finir dans la fonction “<em>initialize</em>” 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.</p>
<p></p><pre class="crayon-plain-tag">app.constellation.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    $('.received').text('connected to constellation');
  }
});</pre><p></p>
<p align="left">En démarrant l’application dans l’émulateur, votre application se connectera au hub “Consumer” de votre Constellation :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-167.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-162.png" alt="image" width="250" height="432" border="0" /></a></p>
<p align="left">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.</p>
<p align="left">Quelques exemples ci-après &#8230;</p>
<h4 align="left">Afficher en temps réel des StateObjects</h4>
<p align="left">Reprenons l’exemple du StateObject “/intelcpu/0/load/0” produit par le package “HWMonitor” et correspondant à la consommation de votre CPU.</p>
<p align="left">Pour cela nous allons enregistrer <a href="/client-api/javascript-api/consommer-constellation-api-javascript/#Consommer_des_StateObjects">StateObjectLink</a> sur ce StateObject en ciblant une sentinelle en particulier. Ici la sentinelle UI de mon ordinateur se nomme “PC-SEB_UI”.</p>
<p align="left">Vous pouvons écrire :</p>
<p></p><pre class="crayon-plain-tag">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);
    });
  }
});</pre><p></p>
<p align="left">Sans oublier d’ajouter le “span” dans lequel afficher notre consommation :</p>
<p></p><pre class="crayon-plain-tag">&lt;h2&gt;PC-SEB CPU: &lt;span id="cpu"&gt;0&lt;/span&gt; %&lt;/h2&gt;</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/image-168.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/image_thumb-163.png" alt="image" width="250" height="432" border="0" /></a></p>
<p align="left">Et voilà comment en quelques lignes afficher des StateObjects en temps réel dans une application mobile multi-plateforme.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/09/DemoCordova.gif"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="DemoCordova" src="https://developer.myconstellation.io/wp-content/uploads/2016/09/DemoCordova_thumb-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2016/09/DemoCordova_thumb.gif" alt="DemoCordova" width="350" height="400" border="0" /></a></p>
<p align="left">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.…</p>
<h4 align="left">Invoquer des MessageCallbacks</h4>
<p align="left">Tout comme n’importe quel “consommateur”, votre application mobile multi-plateforme peut envoyer des messages et donc invoquer des MessageCallbacks.</p>
<p align="left">Pour découvrir les MessageCallbacks de votre Constellation, vous pouvez utiliser le <a href="/constellation-platform/constellation-console/messagecallbacks-explorer/">MessageCallback Explorer</a> de la Console Constellation.</p>
<p align="left">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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb.png" alt="image" width="350" height="185" border="0" /></a></p>
<p align="left">Ajoutons à notre application Android la capacité de verrouiller notre PC Windows. Pour cela vous pouvez cliquer sur l’icone <img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-20.png" alt="image" width="20" height="19" border="0" /> pour générer le code d’invocation de ce MC en sélectionnant le langage de votre choix, dans notre cas, “Javascript” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-2.png"><img class="colorbox-2335"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-2.png" alt="image" width="350" height="217" border="0" /></a></p>
<p align="left">Dans notre page “index.html”, ajoutons un simple bouton (ou lien) HTML :</p>
<p></p><pre class="crayon-plain-tag">&lt;a id="lockPC" href="#" class="btn"&gt;LOCK MY PC&lt;/a&gt;</pre><p></p>
<p align="left">Et dans notre fichier Javascript, invoquons le MessageCallback “&rsquo;LockWorkStation” lorsque l’utilisateur clique sur notre bouton :</p>
<p></p><pre class="crayon-plain-tag">$("#lockPC").click(function () 
  constellation.server.sendMessage({ Scope: 'Package', Args: ['PC-SEB_UI/WindowsControl'] }, 'LockWorkStation', {});
});</pre><p></p>
<p>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”.</p>
<p>Aussi, d’un point de vue visuel, Cordova n’inclut pas de framework CSS à l’inverse <a href="/client-api/javascript-api/application-mobile-multi-plateforme-avec-ionic-et-angular-js/">d’Ionic </a>par exemple. De ce fait tout est à votre charge. Ici nous avons créer un lien (&lt;a&gt;) sur lequel nous avons appliqué la classe CSS “btn”. Vous pouvez, pour l’exemple, utiliser des générateurs tel que <a href="http://www.cssbuttongenerator.com/">celui-ci</a> ou encore <a href="http://www.bestcssbuttongenerator.com/">celui-la</a> pour générer la classe “btn”.</p>
<p>Et voilà, notre application Android est maintenant capable de verrouiller notre poste Windows et d’afficher la consommation CPU en temps réel :</p>
<p align="center">(screen here)</p>
<h3>Pour aller plus loin …</h3>
<p>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 <a href="/client-api/javascript-api/">libraire JavaScript Constellation</a>, vous pouvez donc développer des applications mobile connectées à Constellation en quelques minutes.</p>
<p>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.</p>
<p>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…</p>
<p>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.</p>
<p>Pour ma part je vous recommande vivement d’utiliser Ionic plutôt que Cordova. En effet, <a href="/client-api/javascript-api/application-mobile-multi-plateforme-avec-ionic-et-angular-js/">Ionic</a> 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.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-cordova/">Créer une application mobile multi-plateforme connectée à Constellation avec Cordova</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-cordova/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer une application mobile multi-plateforme connectée à Constellation avec Ionic</title>
		<link>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-ionic-et-angular-js/</link>
					<comments>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-ionic-et-angular-js/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Fri, 19 Aug 2016 08:29:16 +0000</pubDate>
				<category><![CDATA[Javascript API]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Ionic]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[SendMessage]]></category>
		<category><![CDATA[AngularJS]]></category>
		<category><![CDATA[Consumer]]></category>
		<category><![CDATA[Cordova]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=2337</guid>

					<description><![CDATA[<p>// En cours  de rédaction &#8230; intro install / base / link hello world (request SO &#38; send msg) déploiement</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-ionic-et-angular-js/">Créer une application mobile multi-plateforme connectée à Constellation avec Ionic</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>// En cours  de rédaction &#8230;</p>
<ul>
<li>intro</li>
<li>install / base / link</li>
<li>hello world (request SO &amp; send msg)</li>
<li>déploiement</li>
</ul>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-ionic-et-angular-js/">Créer une application mobile multi-plateforme connectée à Constellation avec Ionic</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/client-api/mobile/application-mobile-multi-plateforme-avec-ionic-et-angular-js/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Mise en cache de page à l’aide de Disk: Enhanced 

Served from: developer.myconstellation.io @ 2026-01-23 02:04:25 by W3 Total Cache
-->