﻿<?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 Android - Constellation</title>
	<atom:link href="https://developer.myconstellation.io/tag/android/feed/" rel="self" type="application/rss+xml" />
	<link>https://developer.myconstellation.io/tag/android/</link>
	<description>Votre plateforme d&#039;interconnexion</description>
	<lastBuildDate>Thu, 13 Jun 2019 14:37:21 +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 Android - Constellation</title>
	<link>https://developer.myconstellation.io/tag/android/</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[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>
		<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>
		<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>Pushover : push de notifications sur Android, iOS et navigateurs</title>
		<link>https://developer.myconstellation.io/package-library/pushover/</link>
					<comments>https://developer.myconstellation.io/package-library/pushover/#respond</comments>
		
		<dc:creator><![CDATA[Constellation Documentation Agent]]></dc:creator>
		<pubDate>Tue, 25 Oct 2016 15:21:47 +0000</pubDate>
				<category><![CDATA[Packages]]></category>
		<category><![CDATA[Package]]></category>
		<category><![CDATA[Notification]]></category>
		<category><![CDATA[Push]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iOS]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=3426</guid>

					<description><![CDATA[<p>Le package Puhover permet d’envoyer des notifications sur vos appareils Android, iOS (iPhone/iPad) ou Deskop (Chrome, Safari et Firefox). Le code source du package est disponible sur : https://github.com/myconstellation/constellation-packages/tree/master/Pushover Installation Prérequis : création du compte Pushover Tout d’abord vous devez</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/package-library/pushover/">Pushover : push de notifications sur Android, iOS et navigateurs</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Le package Puhover permet d’envoyer des notifications sur vos appareils Android, iOS (iPhone/iPad) ou Deskop (Chrome, Safari et Firefox).</p>
<p><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/pushover.png"><img loading="lazy" class="size-full wp-image-3431 aligncenter colorbox-3426" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/pushover.png" alt="pushover" width="190" height="190" srcset="https://developer.myconstellation.io/wp-content/uploads/2016/10/pushover.png 190w, https://developer.myconstellation.io/wp-content/uploads/2016/10/pushover-150x150.png 150w" sizes="(max-width: 190px) 100vw, 190px" /></a></p>
<p>Le code source du package est disponible sur : <a title="https://github.com/myconstellation/constellation-packages/tree/master/Pushover" href="https://github.com/myconstellation/constellation-packages/tree/master/Pushover">https://github.com/myconstellation/constellation-packages/tree/master/Pushover</a></p>
<h3>Installation</h3>
<h4>Prérequis : création du compte Pushover</h4>
<p>Tout d’abord vous devez vous inscrire sur <a title="https://pushover.net/" href="https://pushover.net/">https://pushover.net/</a></p>
<p align="center"><a href="https://pushover.net/"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-108.png" alt="image" width="350" height="296" border="0" /></a></p>
<p align="left">Ensuite installez les clients sur vos appareils (Desktop, Android et/ou iOS).</p>
<p align="center"><a href="https://pushover.net/clients"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-109.png" alt="image" width="350" height="214" border="0" /></a></p>
<p align="left">Vous pourrez alors enregistrer vos différents appareils. Le client coute 4,99$ (en une fois, pas d’abonnement) par type de plateforme que vous pouvez installer sur tous vos appareils.</p>
<p align="left">Sur le Dashboard, notez votre ID d’utilisateur en haut à droite :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-110.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-100.png" alt="image" width="350" height="273" border="0" /></a></p>
<p align="left">Pour finir, vous devez déclarer une application dans Pushover. Pour cela sur le dashboard, cliquez sur “<a href="https://pushover.net/apps/build">Register an Application/Create an API Token</a>” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-111.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-101.png" alt="image" width="350" height="273" border="0" /></a></p>
<p align="left">Vous pourrez alors spécifier le nom de votre application, le logo (qui sera utilisé sur vos appareils), etc..</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-112.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-102.png" alt="image" width="350" height="273" border="0" /></a></p>
<p align="left">Sur la page de detail vous pourrez suivre la consommation/stat de votre application et surtout récupérer l’API Token indispensable pour la configuration du package Constellation :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-113.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-103.png" alt="image" width="350" height="273" border="0" /></a></p>
<h4>Installation du package dans Constellation</h4>
<p>Depuis le “Online Package Repository” de votre Console Constellation, déployez le package Puhover :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-104.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-96.png" alt="image" width="350" height="214" border="0" /></a></p>
<p>Une fois le package télécharger votre repository local, sélectionnez la sentinelle sur laquelle déployer le package.</p>
<p>Pour finir, sur la page de Settings, vous devez obligatoirement définir le votre l’API Token délivré par Pushover et l’ID de votre utilisateur Pushover qui sera le destinataire par défaut des notifications envoyés par le package.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-105.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-97.png" alt="image" width="350" height="246" border="0" /></a></p>
<p>Vous pouvez également déployer ce package manuellement dans la configuration de votre Constellation :</p>
<p></p><pre class="crayon-plain-tag">&lt;package name="Pushover"&gt;
  &lt;settings&gt;
    &lt;setting key="Token" value="&lt;&lt; Pushover API token &gt;&gt;" /&gt;
    &lt;setting key="UserId" value="&lt;&lt; Pushover User Id &gt;&gt;" /&gt;
  &lt;/settings&gt;
&lt;/package&gt;</pre><p></p>
<h3>Détails du package</h3>
<h4>Les Settings</h4>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="10"><u>Type</u></td>
<td valign="top" width="10"><u>Détail</u></td>
<td valign="top" width="456"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>Token</strong></td>
<td valign="top" width="10">ConfigurationSection(XML)</td>
<td valign="top" width="10">Obligatoire</td>
<td valign="top" width="456">API Token délivré par Pushover</td>
</tr>
<tr>
<td valign="top" width="10"><strong>UserId</strong></td>
<td valign="top" width="10">Int32</td>
<td valign="top" width="10">Obligatoire</td>
<td valign="top" width="456">ID de votre utilisateur Pushover destinataire par défaut des notifications envoyés par le package</td>
</tr>
<tr>
<td valign="top" width="10"><strong>DefaultEmergencyRetry</strong></td>
<td valign="top" width="10">Int32</td>
<td valign="top" width="10">Optionnel<br />
Par défaut : 60</td>
<td valign="top" width="456">Intervalle de temps en seconde où Pushover vous renverra les notifications “urgentes” tant qu’une confirmation de lecture (un acquittement) n’est pas envoyée. Par défaut les notifications “urgentes” sont renvoyées toutes les minutes.</td>
</tr>
<tr>
<td valign="top" width="10"><strong>DefaultEmergencyExpiration</strong></td>
<td valign="top" width="10">Int32</td>
<td valign="top" width="10">Optionnel<br />
Par défaut : 3600</td>
<td valign="top" width="456">Intervalle de temps où Pushover considéra la notification “urgente” expirée si aucune confirmation de lecture (un acquittement) n’est envoyée. Par défaut, au bout d’une heure, Pushover arrêtera de vous notifier.</td>
</tr>
</tbody>
</table>
<h4>Les StateObjects</h4>
<p>Vous retrouverez autant de StateObject que de compteur de performance enregistrés dans la configuration de votre package.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="10"><u>Type</u></td>
<td valign="top" width="446"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>RateLimits</strong></td>
<td valign="top" width="10">Pushover.RateLimit</td>
<td valign="top" width="446">Objet indiquant les limites liées à votre abonnement. Par défaut, vous disposez de 7500 notifications gratuitement par mois.</td>
</tr>
</tbody>
</table>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-106.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-98.png" alt="image" width="350" height="109" border="0" /></a></p>
<h4 align="left">Les MessageCallbacks</h4>
<p>Le package expose 2 MessageCallbacks :</p>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="141"><u>Réponse (saga)</u></td>
<td valign="top" width="407"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>CheckUserOrGroup</strong></td>
<td valign="top" width="141">Boolean</td>
<td valign="top" width="407">Vérifie l’ID d’un utilisateur ou d’un groupe Pushover.</td>
</tr>
<tr>
<td valign="top" width="10"><strong>GetNotificationStatus</strong> <i></i></td>
<td valign="top" width="141">Pushover.PushoverReceipt</td>
<td valign="top" width="407">Vérifie le statuts d’une notification “urgente”. L’objet “PushoverReceipt” vous indiquera entre autre la date d’acquittement de la notification, l’utilisateur qui l’a acquitté et sur quel appareil, etc..</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushNotification</strong></td>
<td valign="top" width="141">Pushover.PushoverResponse</td>
<td valign="top" width="407">Permet d’envoyer une notification Pushover. Vous pourrez spécifier le titre, le son de la notification, sa priorité, l’utilisateur ou l’appareil ciblé, ou encore la date de la notification.</td>
</tr>
</tbody>
</table>
<h3 align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-107.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-99.png" alt="image" width="350" height="257" border="0" /></a></h3>
<h3 align="left">Quelques tests depuis la Console Constellation</h3>
<h4 align="left">Envoyer une notification</h4>
<p align="left">Pour tester son bon fonctionnement, depuis le MessageCallbacks Explorer de la Console Console, recherchez le MC “PushNotification” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-114.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-104.png" alt="image" width="350" height="290" border="0" /></a></p>
<p align="left">Ce MessageCallback prend plusieurs paramètres dont beaucoup optionnels. Le seul obligatoire étant le “message”.</p>
<p align="left">Par exemple écrivons comme message “Hello world” et cliquons sur “Invoke” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-115.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-105.png" alt="image" width="350" height="69" border="0" /></a></p>
<p align="left">Comme le message est envoyé dans une saga, la Console vous affichera la réponse du package dans la barre de notification du haut :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-116.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-106.png" alt="image" width="350" height="150" border="0" /></a></p>
<p align="left">Le message de retour de cette saga vous indiquera le statuts de la notification. Vous avez donc la possibilité dans vos applications/objets de savoir si la notification a bien été envoyée :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-117.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-107.png" alt="image" width="350" height="238" border="0" /></a></p>
<p align="left">Ici sur mon smartphone Android, la notification est bien réceptionnée :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-118.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-108.png" alt="image" width="350" height="219" border="0" /></a></p>
<h4 align="left">Envoyer une notification “urgente” avec acquittement</h4>
<p align="left">Testons maintenant une notification “urgente”, c’est à dire que la notification sera retransmise à intervalle régulier tant qu’un l’utilisateur ne l’acquitte pas.</p>
<p align="left">Pour cela sélectionnez “Emergency” pour le paramètre “priority”. Vous pouvez également définir les champs retry/expire autrement ceux sont les valeurs de la configuration du package qui seront utilisées.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-119.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-109.png" alt="image" width="350" height="192" border="0" /></a></p>
<p align="left">Dans le message de retour de la saga vous obtiendrez l’ID du reçu.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-120.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-110.png" alt="image" width="350" height="242" border="0" /></a></p>
<p align="left">Sur un Android, la notification est accompagnée d’un bouton pour acquitter la notification.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-121.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-111.png" alt="image" width="350" height="198" border="0" /></a></p>
<p align="left">Toujours dans le MessageCallbacks Explorer de la Console Constellation, vous pouvez invoquer le MC “GetNotificationStatus” en spécifiant l’ID du reçu :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-122.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-112.png" alt="image" width="350" height="85" border="0" /></a></p>
<p align="left">Le message de retour nous indique que la notification a bien été délivrée (Status = 1) mais n’est pas encore acquittée.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-123.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-113.png" alt="image" width="350" height="238" border="0" /></a></p>
<p align="left">Acquittez ensuite la notificaiton sur votre appareil Android ou iOS et invoquez de nouveau le MC “GetNotificationStatus”  :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-124.png"><img class="colorbox-3426"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-114.png" alt="image" width="350" height="242" border="0" /></a></p>
<p align="left">Cette fois ci on constate bien que la notification a bien été acquitté (a telle heure, par tel utilisateur et sur tel appareil, ici le XperiaZ5).</p>
<h3 align="left">Quelques exemples</h3>
<ul>
<li>
<div>Envoyer une notification urgente si votre site Web est offline avec un package C#</div>
</li>
</ul>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/package-library/pushover/">Pushover : push de notifications sur Android, iOS et navigateurs</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/package-library/pushover/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>PushBullet : envoyer des notifications, images, SMS sur vos différents devices</title>
		<link>https://developer.myconstellation.io/package-library/pushbullet/</link>
					<comments>https://developer.myconstellation.io/package-library/pushbullet/#respond</comments>
		
		<dc:creator><![CDATA[Constellation Documentation Agent]]></dc:creator>
		<pubDate>Tue, 09 Aug 2016 12:03:41 +0000</pubDate>
				<category><![CDATA[Packages]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[Package]]></category>
		<category><![CDATA[PushBullet]]></category>
		<category><![CDATA[Notification]]></category>
		<category><![CDATA[Push]]></category>
		<category><![CDATA[Android]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=2134</guid>

					<description><![CDATA[<p>PushBullet est un service très complet permettant de relier vos ordinateurs et appareils mobiles ensemble pour partager entre eux, globalement ou de manière ciblée, des liens, des notifications (par exemple en cas de réception de SMS), des messages, des copier-coller</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/package-library/pushbullet/">PushBullet : envoyer des notifications, images, SMS sur vos différents devices</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>PushBullet est un service très complet permettant de relier vos ordinateurs et appareils mobiles ensemble pour partager entre eux, globalement ou de manière ciblée, des liens, des notifications (par exemple en cas de réception de SMS), des messages, des copier-coller et même des fichiers.</p>
<p align="center"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-21.png" alt="image" width="308" height="74" border="0" /></p>
<p>Vous pouvez installer les clients PushBullet sur Android, iOS, Windows et directement dans les navigateurs (sous forme d’extension) Chrome, Firefox, Safari ou Opéra.</p>
<p align="center"><a href="https://www.pushbullet.com/"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-22.png" alt="image" width="354" height="250" border="0" /></a></p>
<p align="left">Le package PushBullet pour Constellation vous permettra :</p>
<ul>
<li>
<div>d’envoyer des notifications texte</div>
</li>
<li>
<div>d’envoyer des fichiers</div>
</li>
<li>
<div>d’envoyer des liens</div>
</li>
<li>
<div>d’envoyer des SMS de vos smartphones Android</div>
</li>
<li>
<div>de copier un texte dans le presse-papier (avec un abonnement PushBullet Prenium)</div>
</li>
<li>
<div>de récupérer des informations sur l’état de vos devices et utilisateurs connectés au service</div>
</li>
</ul>
<p align="left">Le code source de ce package est en ligne sur : <a href="https://github.com/myconstellation/constellation-packages/tree/master/PushBullet">https://github.com/myconstellation/constellation-packages/tree/master/PushBullet</a></p>
<h3 align="left">Installation</h3>
<h4 align="left">Prérequis : PushBullet</h4>
<p align="left">Pour démarrer vous devez créer un compte sur <a title="https://www.pushbullet.com/" href="https://www.pushbullet.com/">https://www.pushbullet.com/</a>.</p>
<p align="left">Une fois votre compte activé, installer des clients PushBullet sur vos différents devices, par exemple votre smartphone (iOS ou Android) et dans votre navigateur.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-23.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-20.png" alt="image" width="350" height="232" border="0" /></a></p>
<p align="left">Dès à présent, les notifications de votre smartphone seront partagées avec votre navigateur. Vous pourrez également depuis votre navigateur lire/écrire des SMS, etc…</p>
<p align="left">Pour finir, dans les options de votre compte PushBullet, créer un “Access Token” qui servira pour connecter le package Constellation à votre comte PushBullet :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-24.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-21.png" alt="image" width="350" height="232" border="0" /></a></p>
<h4 align="left">Installation du package</h4>
<p align="left">Depuis le “Online Package Repository” de votre Console Constellation, déployez le package PushBullet :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-25.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-22.png" alt="image" width="350" height="195" border="0" /></a></p>
<p align="left">Une fois le package télécharger votre repository local, sélectionnez la sentinelle sur laquelle déployer le package :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-26.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-23.png" alt="image" width="350" height="115" border="0" /></a></p>
<p align="left">Pour finir entrez le token dans la page de Settings et vous pouvez déployer votre package :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-27.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-24.png" alt="image" width="350" height="284" border="0" /></a></p>
<p align="left">Vous pouvez également déployer ce package manuellement dans la configuration de votre Constellation :</p>
<p></p><pre class="crayon-plain-tag">&lt;package name="PushBullet"&gt;
  &lt;settings&gt;
    &lt;setting key="token" value="&lt;&lt; access token &gt;&gt;" /&gt;
  &lt;/settings&gt;
&lt;/package&gt;</pre><p></p>
<h3>Détails du package</h3>
<h4>Les Settings</h4>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="10"><u>Type</u></td>
<td valign="top" width="10"><u>Détail</u></td>
<td valign="top" width="456"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>token</strong></td>
<td valign="top" width="10">String</td>
<td valign="top" width="10">Obligatoire</td>
<td valign="top" width="456">Le token d’accès au compte PushBullet</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushDevicesAsStateObjects</strong></td>
<td valign="top" width="10">Boolean</td>
<td valign="top" width="10">Optionnel<br />
Défaut : ”true”</td>
<td valign="top" width="456">Indique si les devices de votre compte PushBullet doivent être synchronisés dans les StateObjects</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushChatsAsStateObjects</strong></td>
<td valign="top" width="10">Boolean</td>
<td valign="top" width="10">Optionnel<br />
Défaut : ”true”</td>
<td valign="top" width="456">Indique si les Chats associés à votre compte PushBullet doivent être synchronisés dans les StateObjects</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushCurrentUserAsStateObject</strong></td>
<td valign="top" width="10">Boolean</td>
<td valign="top" width="10">Optionnel<br />
Défaut : ”true”</td>
<td valign="top" width="456">Indique si les détails votre compte PushBullet doit être synchronisé dans les StateObjects</td>
</tr>
<tr>
<td valign="top" width="10"><strong>SendPushesReceivedToGroup</strong></td>
<td valign="top" width="10">String</td>
<td valign="top" width="10">Optionnel<br />
Défaut : ”PushBullet”</td>
<td valign="top" width="456">Spécifie le nom du groupe dans lequel le package Pushbullet va envoyer les notifications qu’il reçoit (par défaut:  &lsquo;PushBullet&rsquo;). Laissez le champ vide pour désactiver cette fonctionnalité</td>
</tr>
<tr>
<td valign="top" width="10"><strong>SendEphemeralsReceivedToGroup</strong></td>
<td valign="top" width="10">String</td>
<td valign="top" width="10">Optionnel<br />
Défaut : ”PushBullet”</td>
<td valign="top" width="456">Spécifie le nom du groupe dans lequel le package Pushbullet va envoyer les “ephemerals” qu’il reçoit (par défaut:  &lsquo;PushBullet&rsquo;). Laissez le champ vide pour désactiver cette fonctionnalité.</td>
</tr>
</tbody>
</table>
<h4>Les StateObjects</h4>
<p>Vous retrouverez 4 StateObjects publiés par le package :</p>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="10"><u>Type</u></td>
<td valign="top" width="446"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>CurrentUser</strong></td>
<td valign="top" width="10">PushBullet.Models.User</td>
<td valign="top" width="446">Information sur l’utilisateur connecté</td>
</tr>
<tr>
<td valign="top" width="10"><strong>Chats</strong></td>
<td valign="top" width="10">PushBullet.Models.ChatsList</td>
<td valign="top" width="446">Liste des chats de l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>Devices</strong></td>
<td valign="top" width="10">PushBullet.Models.DevicesList</td>
<td valign="top" width="446">Liste des devices connectés à PushBullet de l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>RateLimit</strong></td>
<td valign="top" width="10">PushBullet.RateLimits</td>
<td valign="top" width="446">Etat des limites du service pour l’utilisateur</td>
</tr>
</tbody>
</table>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-28.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-25.png" alt="image" width="350" height="131" border="0" /></a></p>
<h4 align="left">Les MessageCallbacks</h4>
<p>Le package expose 9 MessageCallbacks :</p>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="10"><u>Nom</u></td>
<td valign="top" width="141"><u>Réponse (saga)</u></td>
<td valign="top" width="407"><u>Description</u></td>
</tr>
<tr>
<td valign="top" width="10"><strong>GetDevices</strong></td>
<td valign="top" width="141">PushBullet.Models.DevicesList</td>
<td valign="top" width="407">Récupère la liste des devices de l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>GetChats</strong></td>
<td valign="top" width="141">PushBullet.Models.ChatsList</td>
<td valign="top" width="407">Récupère la liste des chats de l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>GetPushes</strong></td>
<td valign="top" width="141">PushBullet.Models.PushesList</td>
<td valign="top" width="407">Récupère la liste des notification reçu par l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>GetCurrentUser</strong></td>
<td valign="top" width="141">PushBullet.Models.User</td>
<td valign="top" width="407">Récupère le détail de l’utilisateur</td>
</tr>
<tr>
<td valign="top" width="10"><strong>SendSMS</strong></td>
<td valign="top" width="141">Aucune</td>
<td valign="top" width="407">Envoi un SMS depuis le smartphone (compatible avec le client Android seulement)</td>
</tr>
<tr>
<td valign="top" width="10"><strong>CopyToClipboard</strong></td>
<td valign="top" width="141">Aucune</td>
<td valign="top" width="407">Copie un texte dans le presse-papier d’un device (compatible avec un compte Prenium uniquement)</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushNote</strong></td>
<td valign="top" width="141">Aucune</td>
<td valign="top" width="407">Push une notification (message texte)</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushLink</strong></td>
<td valign="top" width="141">Aucune</td>
<td valign="top" width="407">Push une notification avec un lien</td>
</tr>
<tr>
<td valign="top" width="10"><strong>PushFile</strong></td>
<td valign="top" width="141">Aucune</td>
<td valign="top" width="407">Push une notification avec un fichier</td>
</tr>
</tbody>
</table>
<h3 align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-29.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-26.png" alt="image" width="350" height="454" border="0" /></a></h3>
<h3 align="left">Quelques exemples</h3>
<h4 align="left">Tester l’envoi d’une notification depuis la Console Constellation</h4>
<p align="left">Le MC pour envoyer une simple notification se nomme “PushNote” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-30.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-27.png" alt="image" width="350" height="144" border="0" /></a></p>
<p align="left">Il prend en paramètre :</p>
<ul>
<li>
<div>Le titre de la notification</div>
</li>
<li>
<div>Le texte de la notification</div>
</li>
<li>
<div>Le type de la cible pour la notification</div>
</li>
<li>
<div>L’argument de la cible</div>
</li>
</ul>
<p align="left">La cible (target) est une énumération :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-31.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-28.png" alt="image" width="350" height="203" border="0" /></a></p>
<p align="left">Vous pouvez envoyer votre notification à un de vos devices, à un autre utilisateur (identifié par son mail), à un canal ou un client Web.</p>
<p align="left">Dans notre cas, sélectionnons la cible par default “Device” et laissons le champs “targetArgument” afin de recevoir la notification sur tous nos devices enregistrés sur PushBullet et cliquons sur “Invoke” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-32.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-29.png" alt="image" width="350" height="235" border="0" /></a></p>
<p align="left">Votre notification sera instantanément reçue sur votre Smartphone :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-35.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-32.png" alt="image" width="350" height="316" border="0" /></a></p>
<p align="left">Ici la notification reçue par Chrome sur un poste Windows :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-33.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-30.png" alt="image" width="350" height="165" border="0" /></a></p>
<p align="left">Avec une smartwatch associée à votre téléphone, vous recevrez également vos notifications à votre poignet:</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-34.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-31.png" alt="image" width="354" height="296" border="0" /></a></p>
<h4 align="left">Envoyer des notification texte ou image depuis un package C#</h4>
<p align="left">N’hésitez pas dans le MessageCallbacks Explorer, à cliquer sur le bouton  <a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-36.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-33.png" alt="image" width="23" height="18" border="0" /></a> afin d’ouvrir le générateur de code pour invoquer le MC sélectionné avec les différentes API Constellation.</p>
<p align="left">Ici en sélectionnant le langage C# :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-37.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-34.png" alt="image" width="354" height="223" border="0" /></a></p>
<p align="left">Pour envoyer notre notification de puis un package C# on écrira :</p>
<p></p><pre class="crayon-plain-tag">PackageHost.CreateMessageProxy("PushBullet").PushNote("Constellation", "Ceci est un test");</pre><p></p>
<p align="left">Les deux derniers paramètres étant optionnels (target et targetArguments) vous pouvez les omettre !</p>
<p align="left">Autre solution, générer du code avec <a href="/constellation-platform/constellation-sdk/generateur-de-code/">le générateur inclus dans le SDK</a> Constellation. Sélectionnez simplement le package “PushBullet” dans le générateur de code :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-38.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-35.png" alt="image" width="350" height="387" border="0" /></a></p>
<p align="left">Vous pouvez ensuite invoquer vos MC dans votre code C# à partir du code générer profitant ainsi de l’auto-complétion et de la documentation directement dans votre IDE :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-39.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-36.png" alt="image" width="450" height="112" border="0" /></a></p>
<p align="left">Par exemple pour envoyer une image vous pouvez invoquer le MC “PushFile” en spécifiant l’URI (file:// ou http(s)://) vers le fichier à envoyer. Si vous souhaitez envoyer une notification avec l’image de votre caméra par exemple :</p>
<p></p><pre class="crayon-plain-tag">MyConstellation.Packages.PushBullet.CreatePushBulletScope().PushFile(urlImageCamera, "Porte de garage ouverte");</pre><p></p>
<p align="left">L’image sera alors envoyée sur tous vos devices :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-40.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-37.png" alt="image" width="204" height="99" border="0" /></a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-41.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-38.png" alt="image" width="204" height="240" border="0" /></a></p>
<h3 align="left">Tutoriels</h3>
<p align="left">Il n'y a pas encore de tutoriel exploitant ce package !</p>
<h4 align="left">Lister ses devices et envoyer des notifications depuis une page Web</h4>
<p align="left">Prenons une page HTML que nous allons connecter à Constellation avec AngularJS (<a href="/client-api/javascript-api/consommer-constellation-angular-js/">documentation ici</a>).</p>
<p align="left">Lorsque la page sera connectée à Constellation, enregistrons un lien vers le StateObject nommé “Devices” pour le package “PushBullet” afin d’enregistrer la liste des devices (propriété “Devices”) de la valeur du StateObject dans une variable de scope Angular sans oublier de faire un “$apply” pour rafraichir le scope AngularJS :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerStateObjectLink("*", "PushBullet", "Devices", "*", function(so) { 
    $scope.myDevices = so.Value.Devices;
    $scope.$apply();
});</pre><p></p>
<p align="left">Enfin dans le corps de votre page HTML, affcher une liste à point pour chaque device en affichant différentes informations comme le nom, fabriquant et modele de vos device :</p>
<p></p><pre class="crayon-plain-tag">&lt;body ng-controller="DemoController"&gt;
  My devices :
  &lt;ul&gt;
    &lt;li ng-repeat="device in myDevices"&gt;{{device.Nickname}} ({{device.Manufacturer}} {{device.Model}}
  &lt;/ul&gt;
&lt;/body&gt;</pre><p></p>
<p>Allons un peu plus loin en ajoutant un bouton sur chaque device pour envoyer une notification (PushNote) au device spécifiquement sélectionné. Dans le &lt;li&gt; ajoutons :</p>
<p></p><pre class="crayon-plain-tag">&lt;a href="#" ng-click="sendPush(device)"&gt;Send Push&lt;/a&gt;</pre><p></p>
<p>Et bien sûr déclarons la fonction “sendPush” dans notre scope pour invoquer le MC “PushNote” de notre package PushBullet en spécifiant l’ID du device destinataire de ce push et non tous les devices :</p>
<p></p><pre class="crayon-plain-tag">$scope.sendPush = function(device) {
  constellation.sendMessage({ Scope: 'Package', Args: ['PushBullet'] }, 'PushNote', [ "DemoJS", "Hello " + device.Nickname + " from JS", 'Device',
};</pre><p></p>
<p>Et voilà, aussi simple que cela !</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-50.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-47.png" alt="image" width="354" height="176" border="0" /></a></p>
<p>Le code complet de la page :</p>
<p></p><pre class="crayon-plain-tag">&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp"&gt;
&lt;head&gt;
    &lt;title&gt;Test API AngularJS&lt;/title&gt;
    &lt;script type="text/javascript" src="//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="//cdn.myconstellation.io/js/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//cdn.myconstellation.io/js/ngConstellation-1.8.1.min.js"&gt;&lt;/script&gt;
    
    &lt;script&gt;

    var demo = angular.module('demoApp', ['ngConstellation']);
    demo.controller('DemoController', ['$scope', 'constellationConsumer', function ($scope, constellation) {

        constellation.initializeClient("https://skynet.ajsinfo.net/constellation/", "9eBsRK5FFS5h36cM3OeE74qaDhlxCE2", "TestAPI");
            
        constellation.onConnectionStateChanged(function (change) {
            if (change.newState === $.signalR.connectionState.connected) {
                console.log("Connected to the Constellation");
                constellation.registerStateObjectLink("*", "PushBullet", "Devices", "*", function(so) {                    
                    $scope.myDevices = so.Value.Devices;
                    $scope.$apply();
                });
            }
        });
        
        $scope.sendPush = function(device) {
            constellation.sendMessage({ Scope: 'Package', Args: ['PushBullet'] }, 'PushNote', [ "DemoJS", "Hello " + device.Nickname + " from JS", 'Device', device.Id ]);
        };
        
        constellation.connect();
    }]);

    &lt;/script&gt;

&lt;/head&gt;
&lt;body ng-controller="DemoController"&gt;

    My devices :
    &lt;ul&gt;
        &lt;li ng-repeat="device in myDevices"&gt;{{device.Nickname}} ({{device.Manufacturer}} {{device.Model}}) &lt;a href="#" ng-click="sendPush(device)"&gt;Send Push&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
&lt;/body&gt;
&lt;/html&gt;</pre><p></p>
<h4>Recevoir des SMS depuis un Arduino/ESP</h4>
<p>Si le paramètre “SendEphemeralsReceivedToGroup” n’est pas vide, le package enverra les “Ephemerals” comme les SMS reçus au groupe que vous avez spécifié par ce paramètre. Par défaut, il est défini à “PushBullet”, c’est à dire que si vous vous abonnez au groupe “PushBullet” vous recevrez les SMS et autre de notification de votre smartphone.</p>
<p>Prenons par exemple la page Web AngularJS créée ci-dessus pour bien comprendre. Lorsque votre page est connectée à Constellation, ajoutez le code suivant :</p>
<p></p><pre class="crayon-plain-tag">constellation.subscribeMessages("PushBullet");</pre><p></p>
<p>Puis ajoutez un MessageCallback de votre page pour réceptionner le message nommé “ReceiveEphemeral”. On affichera alors le message reçu dans la console de notre navigateur pour comprendre ce que le package envoie :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerMessageCallback("ReceiveEphemeral", function(msg) {
  console.log(msg);
});</pre><p></p>
<p>Lancez votre page et envoyez-vous un SMS :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-51.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-48.png" alt="image" width="350" height="280" border="0" /></a></p>
<p>Le message est bien reçu du package PushBullet (propriété Sender) avec la clé (identifiant du MessageCallback) “ReceiveEphemeral”. Le contenu du message (Data) contient :</p>
<ul>
<li>L’identifiant du device qui a reçu la notification</li>
<li>Le type de notification. Pour une notification liée à la réception d’un SMS cette valeur est à “sms_changed”</li>
<li>Le tableau contenant le ou les notifications</li>
</ul>
<p>Si la notification de l’“Ephemeral” est de type “sms_changed”, le tableau des notifications contiendra les SMS reçus avec le nom du contact émetteur du SMS (title), le texte du SMS (body) et la date de réception (timestamp).</p>
<p align="left">Enfin, lorsque vous ouvrez le SMS reçu sur votre Smartphone vous allez faire disparaitre la notification ce qui enverra un autre “Ephemeral” de type “dismissal” pour le package “sms” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-49.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-46.png" alt="image" width="350" height="147" border="0" /></a></p>
<p align="left">Il devient alors facile de réaliser un petit objet connecté qui serait capable de nous prévenir en faisant clignoter une LED par exemple, lorsque nous recevons un SMS et d’arrêter cette LED lorsque vous nous faisons disparaitre la notification sur notre Smartphone.</p>
<p align="left">Dans la méthode “setup()” nous allons abonnez notre ESP au groupe “PushBullet” :</p>
<p></p><pre class="crayon-plain-tag">constellation.subscribeToGroup("PushBullet");</pre><p></p>
<p align="left">Notez que vous pouvez également abonner votre package depuis la Console Constellation.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-52.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-49.png" alt="image" width="350" height="207" border="0" /></a></p>
<p align="left">Ajoutons ensuite un MessageCallback “ReceiveEphemeral” pour définir si oui ou non nous devons faire clignoter une LED :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerMessageCallback("ReceiveEphemeral",
  [](JsonObject&amp; json) {
    if(json["Data"]["type"] == "sms_changed") {
      Serial.println("New SMS received");
      blinkLed = true;
    }
    else if(json["Data"]["type"] == "dismissal") {
      Serial.println("SMS readed");
      blinkLed = false;
    }
});</pre><p></p>
<p>De ce fait déclarons cette variable ainsi que d’autre :</p>
<p></p><pre class="crayon-plain-tag">bool blinkLed = false;
int ledState = LOW;
unsigned long previousMillis = 0;
const int ledPin = LED_BUILTIN;
const long interval = 1000;</pre><p></p>
<p>Pour faire clignoter la LED sans bloquer le programme avec des delay(), ajoutons la méthode suivante :</p>
<p></p><pre class="crayon-plain-tag">void driveLed() {
  if(blinkLed) {
    unsigned long currentMillis = millis();
    if(currentMillis - previousMillis &gt;= interval) {
      previousMillis = currentMillis;
      ledState = ledState == LOW ? HIGH: LOW; // Switches led state
    }
  }
  else ledState = LOW; 
  digitalWrite(ledPin, ledState);
}</pre><p></p>
<p>Pour finir dans la boucle principale, appellons notre méthode “driveLed” poru faire clignoter ou éteindre la LED en fonction :</p>
<p></p><pre class="crayon-plain-tag">void loop(void) {
  constellation.loop();
  driveLed();
}</pre><p></p>
<p>Et voilà comment notifier la réception de SMS avec un LED drivée par un ESP8266 connecté à Constellation !</p>
<h4>Envoyer un SMS depuis un simple appel HTTP</h4>
<p>Si vous avez installé un client PushBullet sur un smartphone Android, vous pouvez l’utiliser en tant que passerelle SMS avec le MessageCallback “SendSMS” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-53.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-50.png" alt="image" width="350" height="150" border="0" /></a></p>
<p>Ce MC prend en paramètre :</p>
<ul>
<li>L’ID de l’utilisateur</li>
<li>L’ID du device qui sera utilisé comme passerelle SMS (ce device doit être un téléphone sous Android)</li>
<li>Le n° du destinataire du SMS</li>
<li>Le texte du SMS</li>
</ul>
<p>Pour récupérer votre ID d’utilisateur, affichez les détails du StateObject “CurrentUser” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-54.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-51.png" alt="image" width="348" height="253" border="0" /></a></p>
<p>Faites de même pour récupérer l’ID de votre device Android en visualisant le StateObject “Devices” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-55.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-52.png" alt="image" width="350" height="251" border="0" /></a></p>
<p>Cliquez ensuite sur l’icone <a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-45.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-42.png" alt="image" width="23" height="18" border="0" /></a> dans le MessageCallback Explorer pour afficher le code snippet du MC “SendSMS” en sélectionnant en tant que langage “HTTP Call” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2016/10/image-56.png"><img class="colorbox-2134"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2016/10/image_thumb-53.png" alt="image" width="350" height="220" border="0" /></a></p>
<p align="left">L’exemple est donné pour <a href="/client-api/rest-api/interface-rest-constellation/">l’API Rest Constellation</a> mais vous pouvez aussi utiliser <a href="/client-api/rest-api/interface-rest-consumer/">l’API Rest Consumer</a> en remplaçant “/rest/constellation” par “/rest/consumer”.</p>
<p>De ce fait, pour envoyer un SMS depuis un appel HTTP :</p>
<p></p><pre class="crayon-plain-tag">https://constellation.monserver.com/rest/consumer/SendMessage?SentinelName=Consumer&amp;PackageName=DemoConstellation&amp;AccessKey=xxxx&amp;scope=Package&amp;args=PushBullet&amp;key=SendSMS&amp;data=[ "mon_user_id_ici", "mon_device_id_android_ici", "0600000000", "Hello, ceci est un sms de test envoyé depuis l'API REST de Constellation" ]</pre><p></p>
<p>Sans oublier bien sûr de remplacer le “xxxx” par une <a href="/concepts/securite-accesskey-credential-authorization/">AccessKey</a> valide de votre Constellation.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/package-library/pushbullet/">PushBullet : envoyer des notifications, images, SMS sur vos différents devices</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/package-library/pushbullet/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-25 00:32:24 by W3 Total Cache
-->