Chaque fois que nous recevons un nouveau client, Mario Bros gagne une pièce

María Hernández -

Comme toute startup, nous sommes ravis chaque fois que nos indicateurs évoluent positivement, et parfois, nous sommes encore plus ravis si nous gagnons une pièce de Mario à chaque nouveau client… Vous vous demandez sans doute comment, n'est-ce pas ?

En tant que plateforme de surveillance performante , nous avons immédiatement décidé d'utiliser Ubidots pour commencer à suivre les indicateurs dans nos propres dashboards , mais ce que nous souhaitions vraiment, c'était créer un système capable d'informer tous les membres de notre équipe à chaque nouveau client, afin de nous enthousiasmer et de célébrer.

L'une des premières questions était : comment motiver toute notre équipe au quotidien en étant notifiés de l'arrivée d'un nouveau client ? La réponse était simple : nous avons acheté des sirènes de police. Mais en réalité, la difficulté du projet résidait dans l'intégration de ces sirènes bon marché à Ubidots. L'un des atouts de l'équipe Ubidots est que nous sommes tous des développeurs à temps plein, ce qui nous a permis de faire preuve de créativité sur ce sujet.

Pour intégrer les sirènes, nous avons opté pour deux cartes de développement ESP8266 personnalisées. Elles nous permettent de gérer un relais et ainsi de contrôler l'état lumineux de chaque sirène. De plus, nous souhaitions alerter l'équipe, mais le son d'une sirène de police pouvant être gênant, nous avons choisi de reproduire les sons de Mario Bros pour rendre le tout plus amusant et moins intrusif.

Au final, nous avons obtenu le résultat suivant :

L'objectif principal de cet article est de partager tous les détails techniques du projet avec la communauté Ubidots, afin que vous puissiez le reproduire et suivre en temps réel tout ce qui est mesurable. (Si vous lancez une chaîne YouTube, ce projet pourrait vous convenir ;) )

Commençons le piratage !

Étape par étape

  1. Aperçu du projet
  2. Configuration Ubidots
  3. Programmation
  4. Câblage
  5. Résumé

Exigences

1. Aperçu du projet

Comme nous l'avons déjà mentionné, nous avons décidé d'acheter deux sirènes de police pour être avertis à chaque nouveau client ou en cas de perte de client. Les sirènes sont différenciées par leur couleur : la sirène verte signale un nouveau client, la sirène rouge, un client perdu.

Pour pouvoir contrôler les sirènes en fonction de l'état des clients, nous avons intégré Ubidots à un Ubidots via une UbiFunction . Cette fonctionnalité permet de créer sa propre API et d'accéder à des données, des API et des outils via HTTPS. Ce guide ne traite pas de la gestion des UbiFunction ; pour plus de détails, consultez ce guide .

Les données des clients étant déjà intégrées à un compte Ubidots , nous avons procédé à quelques configurations sur la plateforme pour définir certaines variables. Ensuite, nous avons dû établir un abonnement à ces variables via MQTT afin de déclencher le relais correspondant, la sirène verte ou la sirène rouge. Et c'est là que la magie opère ! – Mario gagne une pièce, ou perd une vie… Soyons réalistes !

2. Configuration Ubidots

Les variables permettant de signaler l'état des clients seront créées automatiquement après la configuration de l' UbiFunction . À des fins de test uniquement, nous allons créer un nouvel appareil avec les variables à gérer.

Si vous souhaitez exploiter les données de votre chaîne YouTube , votre compte Twitter ou Instagram , ou plus généralement suivre n'importe quel indicateur de performance au travail, il vous suffit de consulter la documentation de leur API pour les utiliser avec UbiFunction . Vous pourrez ensuite récupérer les données et les publier directement sur votre Ubidots .

Sans plus tarder, passons aux détails de la configuration d'un événement Ubidots afin d'éviter les faux positifs. Nous ne voulons surtout pas que notre équipe célèbre pour rien.

1) Accédez à la section « Appareil » de votre Ubidots et créez un nouvel appareil nommé « client ». Pour ce faire, cliquez sur le signe plus bleu situé en haut à droite de l’écran. Sélectionnez ensuite «  vierges » et attribuez-lui le nom souhaité.

2) Accédez au périphérique créé précédemment et ajoutez deux nouvelles variables brutes . Pour créer ces variables, accédez à la section du périphérique, cliquez sur « Ajouter une variable > Brute » et nommez la variable à créer. Dans ce projet, nous avons nommé les variables comme suit :

  • churn : variable chargée de recevoir un indicateur positif (1) à chaque fois qu'un client se désinscrit.
  • new-client : variable chargée de recevoir un indicateur positif (1) chaque fois que nous obtenons un nouveau client.

Les variables recevant déjà des données, il est temps de mettre en œuvre quelques astuces pour éviter les faux positifs au cas où nos appareils perdraient leur connexion.

3) Les modules installés fonctionnent avec le protocole MQTT. Si vous ne le connaissez pas, nous vous recommandons vivement de consulter la documentation officielle .

Ce protocole possède une caractéristique particulière appelée « message conservé ». Concrètement, elle permet au courtier de conserver le dernier message d'un sujet spécifique en activant l'indicateur de message conservé. Ainsi, lorsqu'un appareil s'abonne à ce sujet, le courtier renvoie automatiquement le dernier message conservé.

Partant de ce constat, nous avons décidé de configurer un événement Ubidots afin de réinitialiser les variables « churn » et « new-client » à 0 dès réception du signal positif (1). L'objectif est d'éviter les faux positifs en cas de perte de connexion Internet des sirènes.

Imaginez que la sirène verte se déclenche et que, soudain, le module Wi-Fi perde sa connexion. Que se passerait-il ?… Une fois la connexion rétablie, la sirène réactivera également l’abonnement avec la variable « new-client ». Si la dernière valeur était le drapeau positif (-1), la sirène se réactivera automatiquement lors de la réception d’une notification pour ce client.

Pour configurer un Ubidots accédez à l'onglet « Données > Événements » de votre Ubidots . Créez ensuite un nouvel événement en cliquant sur « + Ajouter un événement ». Dans la configuration de l'événement, sélectionnez le périphérique et la variable avec lesquels vous souhaitez définir les conditions. Dans notre exemple, le périphérique est « client » et les variables sont « churn » et « new-client ».

REMARQUE : Cet événement doit être créé indépendamment pour chaque variable.

La variable étant déjà sélectionnée, assurez-vous que le déclencheur de l'événement possède la configuration suivante :

  • " new-client " (variable) - Valeur -> est égale à - 1 pour 0 minutes.

Pour configurer l'action, appuyez sur la flèche droite située en bas à droite de la page. Sélectionnez « Définir la variable » comme action, choisissez la même variable que celle associée au déclencheur et attribuez-lui la valeur  0 

Pour terminer, enregistrez les modifications en appuyant sur les flèches droites.

Une fois l'événement créé avec succès, répétez le même processus pour créer un deuxième événement pour la variable manquante.

Une fois les événements configurés, le comportement attendu est que chaque fois que la variable reçoit un signal positif, sa valeur égale à 1 passe automatiquement à 0. Pour une meilleure compréhension, reportez-vous à l'image ci-dessous :

4. Comme vous l'avez probablement déjà remarqué, les variables qui signalent les « nouveaux clients » et les « désabonnements » mettent à jour un indicateur positif à chaque Ubidots Nous souhaitons également connaître le nombre total de nouveaux clients et de désabonnements. Pour cela, nous devons configurer une variable synthétique qui additionnera le nombre total d'indicateurs reçus pour une période définie.

Pour créer la variable synthétique, sélectionnez « +Ajouter une variable > Synthétique » dans le périphérique « client ». Appliquez ensuite la formule suivante :

sum(x, data_range) : Renvoie la somme des dots dans la plage de données spécifiée.

Où:

  • X : est la variable souhaitée
  • Plage de données : la période de temps pour laquelle on souhaite obtenir la somme.

La formule finale pour chaque variable devrait être :

  • somme("nouveau-client", "1M")
  • somme("churn", "1M")

Pour terminer la création de la variable, sélectionnez « Accepter » et attribuez-lui le nom de votre choix.

À ce stade, vous pourrez voir le total des nouveaux clients ou des désabonnements survenus au cours d'un mois.

5. Votre Ubidots désormais configuré, il est temps de laisser libre cours à votre créativité et de concevoir un dashboard pour centraliser toutes vos données. Consultez ce guide pour découvrir en détail les différents widgets disponibles sur votre compte Ubidots

3. Programmation

3.1. Contrôle des sirènes

Le module gérant l'état des sirènes est un ESP8266 associé à un relais monocanal. Le code de base est identique pour les deux sirènes ; seule l'étiquette de la variable diffère. Vous devez lui attribuer l'étiquette correspondante pour que le module ESP8266 établisse la connexion et active la sirène appropriée.

1. Pour utiliser la ESP8266 dans l'IDE Arduino, vous devez l'installer à l'aide du gestionnaire de cartes Arduino préconfiguré. Si vous ne savez pas comment ajouter une carte avec l'IDE Arduino, consultez cet article pour plus d'informations .

2. Une fois la plateforme ESP8266 installée, sélectionnez le module ESP8266 que vous utilisez. Dans notre cas, il s'agit d'un « module ESP8266 générique ». Pour sélectionner votre carte dans l'IDE Arduino, choisissez Outils > Carte > « Module ESP8266 générique » .

3. Téléchargez et installez la Ubidots MQTTESP8266 . Pour des explications détaillées sur l'installation des bibliothèques avec l'IDE Arduino, consultez ce guide .

4. Maintenant, grâce aux exemples de code suivants, vous pourrez vous abonner aux variables qui signalent les valeurs.

Une fois le code inséré, vous devrez renseigner votre jeton Ubidots unique , le SSID (nom du réseau Wi-Fi) et le mot de passe du réseau disponible. Si vos variables et votre appareil utilisent des identifiants différents de ceux présentés dans ce guide, veillez à saisir les informations correctes.

  • Exemple de code pour la sirène rouge :
/**************************************** * Inclure les bibliothèques ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Définir les constantes ****************************************/ #define TOKEN "***" // Votre jeton Ubidots #define WIFINAME "***" // Votre SSID #define WIFIPASS "***" // Votre mot de passe Wi-Fi #define DEVICE_LABEL "customers" // Indiquez ici l'étiquette de votre appareil Ubidots #define VARIABLE_LABEL "churn" // Indiquez ici l'étiquette de votre variable Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /**************************************** * Fonctions auxiliaires ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Relais activé { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Fonctions principales ****************************************/ void setup() { // Placez votre code de configuration ici, à exécuter une seule fois : client.ubidotsSetBroker("ubidots"); // Configure correctement le broker pour le compte professionnel client.setDebug(false); // Passe une valeur booléenne (vrai ou faux) pour activer les messages de débogage client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insère les étiquettes de la source de données et de la variable Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insère les étiquettes de la source de données et de la variable } client.loop(); }
  • Exemple de code pour la sirène verte :
/**************************************** * Inclure les bibliothèques ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Définir les constantes ****************************************/ #define TOKEN "***" // Votre jeton Ubidots #define WIFINAME "***" // Votre SSID #define WIFIPASS "***" // Votre mot de passe Wi-Fi #define DEVICE_LABEL "customers" // Indiquez ici l'étiquette de votre appareil Ubidots #define VARIABLE_LABEL "new-customer" // Indiquez ici l'étiquette de votre variable Ubidots Ubidots client(TOKEN); byte relayOn[] = {0xA0, 0x01, 0x01, 0xA2}; //0xA00101A2 byte relayOff[] = {0xA0, 0x01, 0x00, 0xA1}; //0xA00100A1 /**************************************** * Fonctions auxiliaires ****************************************/ void callback(char* topic, byte* payload, unsigned int length) { if ((char)payload[0]=='1') // Relais activé { Serial.write(relayOn, sizeof(relayOn)); delay(10000); Serial.write(relayOff, sizeof(relayOff)); } } /**************************************** * Fonctions principales ****************************************/ void setup() { // Placez votre code de configuration ici, à exécuter une seule fois : client.ubidotsSetBroker("ubidots"); // Configure correctement le broker pour le compte professionnel client.setDebug(false); // Passe une valeur booléenne (vrai ou faux) pour activer les messages de débogage client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insère les étiquettes de la source de données et de la variable Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, VARIABLE_LABEL); // Insère les étiquettes de la source de données et de la variable } client.loop(); }

5. Vérifiez cliquez sur l'icône  Coche  en haut à gauche de l'IDE Arduino

6. Téléversez le code dans votre « Module ESP8266 générique » . Pour ce faire, choisissez l’icône « flèche vers la droite » à côté de l’icône « coche ».

7. Pour vérifier la connectivité du périphérique et les données envoyées, ouvrez le moniteur série en sélectionnant l'icône « loupe » dans le coin supérieur droit de l'IDE Arduino pour voir les logs .

3.2. Contrôle du son

Le module chargé de la gestion du contrôle MP3 est le WEMOS D1. Concrètement, le code établit l'abonnement avec les mêmes variables que celles configurées pour chaque sirène, mais il reproduit également les sons de Mario Bros. À retenir :

  • Si la sirène verte se déclenche, le haut-parleur reproduira le son de Mario Bros gagnant une pièce – Ubidots gagne un nouveau client.
  • Si la sirène rouge se déclenche, le haut-parleur reproduira le son de Mario Bros perdant une vie – Ubidots perd un nouveau client.

1. Une fois la plateforme ESP8266 installée, sélectionnez le périphérique ESP8266 que vous utilisez. Dans cet exemple, nous utilisons une carte « WeMos D1 ». Pour sélectionner votre carte dans l’IDE ​​Arduino, sélectionnez Outils > Carte « WeMos D1 » .

2. Si vous ne l'avez pas fait à l'étape précédente, téléchargez et installez la Ubidots MQTTESP8266 . Pour des explications détaillées sur l'installation des bibliothèques avec l'IDE Arduino, consultez ce guide .

3. Placez le code suivant dans votre IDE Arduino. Une fois le code collé, assurez-vous d'indiquer votre jeton Ubidots unique , le SSID (nom du réseau Wi-Fi) et le mot de passe du réseau disponible.

/**************************************** * Inclure les bibliothèques ****************************************/ #include "UbidotsESPMQTT.h" /**************************************** * Définir les constantes ****************************************/ #define TOKEN "***" // Votre jeton Ubidots #define WIFINAME "***" // Votre SSID #define WIFIPASS "***" // Votre mot de passe Wi-Fi #define DEVICE_LABEL "customers" // Indiquez ici l'étiquette de votre appareil Ubidots #define RED_SIREN "churn" // Indiquez ici l'étiquette de votre variable Ubidots #define GREEN_SIREN "new-customer" // Indiquez ici l'étiquette de votre variable Ubidots #define RESET D5 #define NEXT D6 #define PLAY D7 Client Ubidots (TOKEN); /**************************************** * Fonctions auxiliaires ****************************************/ void activate(int pin) { digitalWrite(pin, LOW); delay(500); digitalWrite(pin, HIGH); } void callback(char* topic, byte* payload, unsigned int length) { char val = payload[0]; //Serial.println(topic); if (strstr(topic,"new-customer") && val == '1') { activate(RESET); activate(PLAY); delay(2000); } else if (strstr(topic,"churn") && val == '1') { activate(RESET); activate(NEXT); delay(2000); } } /**************************************** * Fonctions principales ****************************************/ void setup() { pinMode(RESET, OUTPUT); pinMode(NEXT, OUTPUT); pinMode(PLAY, OUTPUT); digitalWrite(RESET, HIGH); digitalWrite(NEXT, HIGH); digitalWrite(PLAY, HIGH); // Placez votre code de configuration ici, à exécuter une seule fois :ubidotsSetBroker("ubidots"); // Configure correctement le broker pour le compte professionnel client.setDebug(false); // Passez une valeur booléenne (vrai ou faux) pour activer les messages de débogage client.wifiConnection(WIFINAME, WIFIPASS); client.begin(callback);ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); // Insérez la source de données et les étiquettes des variables client.ubidotsSubscribe(DEVICE_LABEL, RED_SIREN); Serial.begin(9600); } void loop() { if(!client.connected()) { client.reconnect();ubidotsSubscribe(DEVICE_LABEL, GREEN_SIREN); //Insérer la source de données et les étiquettes des variablesubidotsSubscribe(DEVICE_LABEL, RED_SIREN); } client.loop(); }

4. Vérifiez cliquez sur l'icône  Coche  en haut à gauche de l'IDE Arduino

5. Chargez le code dans votre « WeMos D1 » . Pour ce faire, choisissez l’icône « flèche vers la droite » à côté de l’icône « coche ».

6. Si vous n'êtes pas familier avec le module MP3, nous vous recommandons vivement de consulter ce guide , l'un des meilleurs pour débuter.

D'après notre expérience, assurez-vous d'utiliser le format approprié pour la carte SD et pour les morceaux à lire.

  • Taille de la carte Micro SD : 1 ou 2 Go maximum.
  • Format Micro SD : FAT - Nous vous recommandons de formater votre carte SD à l’aide de SD Card Formatter .
  • Format des chansons : AD4 - Nous vous recommandons d'utiliser AD4Converter .

Pour vous faire gagner quelques minutes, vous trouverez dans ce dossier les sons de Mario Bros utilisés pour ce projet.

Selon la logique utilisée dans le code, la première chanson identifiée sur la carte Micro SD comme « 0000 » reproduira le son de Mario Bros lorsqu'il gagne une pièce, et la seconde identifiée comme « 0001 » reproduira le son de Mario Bros lorsqu'il perd une vie.  

4. Câblage

IMPORTANT : Avant d’établir toutes les connexions, assurez-vous que le code d’exemple est déjà chargé sur les cartes. Vérifiez également leur bon fonctionnement avec votre compte Ubidots

Pour faciliter la compréhension du câblage, j'ai divisé ce processus en différentes étapes. Suivez le schéma et le tableau de câblage ci-dessous pour effectuer les connexions correctement.

  • Module de contrôle MP3

Pour intégrer le module relais ESP8266 + 1 canal aux sirènes, nous avons dû apporter quelques modifications au câblage d'origine de chaque sirène. Concrètement, nous avons remplacé l'interrupteur manuel de chaque sirène par le module relais.

Pour pouvoir alimenter chaque module relais ESP8266 + 1 canal, nous avons utilisé un chargeur de téléphone portable pour réguler la tension d'entrée de 110 V à 5 V.

Veuillez vous référer au schéma ci-dessous pour savoir comment modifier le câblage d'origine des sirènes, ainsi que pour savoir comment alimenter les modules ESP8266.

  • Module de contrôle MP3

Le module MP3 possède différentes configurations . Compte tenu des exigences de ce projet, nous avons décidé d'utiliser le « circuit d'application en mode MP3 ».

Reportez-vous au tableau et au schéma de câblage ci-dessous pour établir les configurations appropriées :

  • Tout le système

Pour terminer, alimentez la carte WEMOS avec la sortie 5V du régulateur utilisé :

Une fois les connexions électriques correctement effectuées, placez tous les composants à l'intérieur des sirènes et procédez à leur installation. Dans notre cas, nous avons choisi de les fixer sur le mur principal de nos bureaux.

5. Résumé

Nous avons vraiment adoré le temps passé à bidouiller pour reconstruire la fonctionnalité des sirènes de police afin d'informer toute l'équipe de l'état des clients en temps réel, mais de manière amusante en utilisant les sons de Mario Bros.

Nous savons qu'il s'agit d'un projet interne qui ne sera peut-être pas aussi utile à tout le monde, mais nous le jugeons pertinent pour tous ceux qui lancent leur chaîne YouTube, leurlogs ou même au sein d'une entreprise et qui souhaitent suivre leurs indicateurs de performance de manière conviviale et en temps réel à chaque nouvel abonné, visiteur ou client.

Si vous êtes un créateur passionné comme nous et que vous décidez de reproduire ce projet, n'hésitez pas à le partager, mais pensez à nous identifier (@ubidots) ubidots nos réseaux sociaux ( Facebook , LinkedIn , Twitter , Instagram ). Nous serons ravis de le partager avec Ubidots .

Projets IoT plus utiles :