Notifications d'événements en temps réel à l'aide de NodeMCU (Arduino), Google Firebase et Laravel : 4 étapes (avec images)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Avez-vous déjà voulu être averti lorsqu'une action est effectuée sur votre site Web mais que l'e-mail ne vous convient pas ? Voulez-vous entendre un son ou une cloche à chaque fois que vous effectuez une vente ? Ou vous avez besoin d'une attention immédiate en raison d'une urgence à la maison ?

Cet appareil peut vous alerter en temps réel sur tout ce que vous aimez.

Étape 1: câbler le circuit

L'appareil que j'ai construit se compose d'une carte NodeMCU avec un buzzer pour m'alerter des ventes réalisées sur un site Web. Le microcontrôleur est programmé à l'aide du logiciel Arduino et la partie déclencheur peut être n'importe quelle application Web, iOS ou Android. J'ai créé deux applications Web simples, l'une en Laravel et l'autre en HTML et JavaScript pour l'exemple.

Étant donné que la carte NodeMCU peut fonctionner en toute sécurité jusqu'à environ 12 mA de courant sur les broches, le buzzer est connecté via un transistor NPN. J'ai utilisé 2N2222 parce que j'en ai beaucoup qui traînent mais je suis sûr que le principe sera le même avec n'importe quel autre transistor NPN.

Pour câbler le circuit, connectez le collecteur du transistor à la broche Vin de la carte. Le buzzer fonctionne à 5V et puisque nous allons alimenter l'appareil par USB, cette broche nous donnera la tension avant le régulateur 3,3V de la carte.

Connectez ensuite le côté positif du buzzer sur l'émetteur du transistor et la broche négative du buzzer à l'une des broches de masse de la carte. J'ai utilisé la broche 2, mais vous pouvez également la connecter aux broches 9, 25 ou 29.

La base du transistor est connectée à la broche D2 qui correspond à GPIO 4 sur le logiciel Arduino. Avec cette configuration, le transistor fonctionnera efficacement comme un interrupteur activant le buzzer à chaque événement. Au lieu du buzzer, vous pouvez connecter un relais de la même manière pour pouvoir piloter n'importe quel appareil électrique comme des ampoules, des machines ou une sirène si vous fabriquez un dispositif d'alarme.

Étape 2: préparer les applications Web

Pour le déclenchement et la partie temps réel de l'appareil, nous utiliserons la base de données en temps réel Firebase de Google. Il s'agit d'une merveilleuse base de données cloud NoSQL créée par Google qui fournit une synchronisation des données en temps réel entre chacune des plates-formes qu'elle est utilisée.

Créez d'abord le projet avec le nom de votre choix. Une fois créé, créez un seul nœud appelé « count » et initiez-le avec la valeur si 0. Ce sera notre décompte de départ que nous souhaitons suivre à l'avenir.

L'application Laravel utilise le package "firebase-php" de Kreait, et il est lié ci-dessous. Installez le package en exécutant « composer require kreait/firebase-php ». Une fois l'installation terminée, nous devons créer le contrôleur où l'action se produira. J'ai nommé la méthode « update » et je l'ai connectée dans les routes sur une action POST.

Pour récupérer l'instance Firebase, vous avez besoin d'un fichier json que vous devez télécharger depuis votre console Firebase. Placez ce fichier à la racine de votre projet Laravel et nommez-le firebase.json. Lors de la récupération de l'instance firebase, nous devons fournir le chemin d'accès à ce fichier à l'aide de la méthode withCredentials.

Après avoir obtenu l'instance firebase, nous devons obtenir la référence à la base de données et au nœud que nous avons créé précédemment. À chaque action, nous obtiendrons la valeur actuelle du nœud, l'augmenterons de un et enregistrerons si nous le retournons dans la base de données. Cela gardera une trace de nos événements dont nous devons informer.

La même chose peut être réalisée avec du HTML simple et du JavaScript, en utilisant la bibliothèque firebase fournie. Avec lui, nous devons d'abord fournir au tableau de configuration les paramètres appropriés à partir de la console Firebase et initialiser l'application. Une fois initialisé, nous obtenons une référence au nœud où nous stockons le nombre d'événements et attachons un écouteur pour récupérer tout changement de valeur.

De plus, au lieu de soumettre le formulaire comme dans l'exemple de Laravel, nous avons maintenant une fonction JavaScript qui est appelée en cliquant sur le bouton, met à jour le nombre et réécrit la valeur mise à jour dans la base de données.

Étape 3: programmer la carte NodeMCU

Pour programmer le NodeMCU, j'ai utilisé le logiciel Arduino et après avoir installé la carte dessus, je me suis assuré de sélectionner la version et le port appropriés afin de pouvoir télécharger le logiciel. Le mien est la version 1.0, alors vérifiez auprès de votre conseil d'administration avant de continuer.

La première partie du code Arduino, met en place toutes les définitions nécessaires que vous devrez ajuster sur votre appareil. Le premier de ces paramètres est le ssid du WiFi et son mot de passe, puis nous devons configurer l'url firebase et le secret firebase db. Malheureusement, ce n'est pas la méthode recommandée pour se connecter à la base de données, mais c'est pour l'instant la seule façon dont la bibliothèque la prend en charge. Vous pouvez trouver ce secret dans le menu Paramètres du projet, comptes de service dans la console Firebase.

La définition suivante est le chemin que nous vérifierons pour les mises à jour et l'identifiant de l'appareil. L'ID de l'appareil est nécessaire. Par conséquent, si nous avons plusieurs appareils à notifier des mêmes événements, nous devons savoir quel appareil nous a notifié pour l'événement et en conserver une trace. Le dernier, nous devons configurer la broche à laquelle nous avons connecté le buzzer et c'est D2 dans notre cas.

La fonction de configuration définit la broche LED intégrée et les broches D2 comme sorties, démarre la communication série pour savoir ce qui se passe et se connecte au réseau WiFi spécifié. Une fois la connexion établie, il démarre la communication avec Firebase et obtient la dernière valeur pour laquelle nous avons signalé. Il commence alors à écouter les modifications sur le chemin spécifié.

Dans la boucle principale, il y a un appel à la fonction clignotant qui fait clignoter la led intégrée pendant 500 millisecondes afin que nous puissions dire que l'appareil est actif. Lorsqu'un changement est détecté et qu'il y a des données disponibles que nous pouvons lire avec la fonction disponible, la nouvelle valeur du nœud est en cours de lecture, la différence est calculée car il peut y avoir eu plusieurs événements entre-temps et un bip est produit à chaque fois de la différence.

Par exemple, si la différence entre la dernière valeur signalée et la nouvelle valeur est de 4, 4 bips seront émis pour vous informer que 4 nouveaux achats ont été effectués. La fonction de bip utilise la fonction de tonalité intégrée pour jouer une fréquence spécifiée via le buzzer pendant une période de temps définie.

Une fois les bips émis, la nouvelle valeur est mise à jour pour le périphérique spécifié et la diffusion en continu est redémarrée. Actuellement, il existe un problème ouvert sur la bibliothèque arduino firebase selon lequel le streaming ne se poursuit pas automatiquement après avoir enregistré manuellement une valeur, nous devons donc le redémarrer.

Étape 4: profitez de votre appareil

L'intégralité du code que j'ai utilisé est disponible sur mon compte GitHub lié ci-dessous avec le lien vers le schéma du projet.

Code source

Schématique

Le code peut être facilement adopté pour fonctionner pour de nombreux scénarios et événements différents et je suis sûr que vous aurez beaucoup de plaisir à jouer avec.

Pour moi, c'était une construction vraiment amusante et j'ai réussi à apprendre beaucoup de choses et pour cela je suis vraiment heureux. J'espère que cela pourra vous aider dans votre projet, mais si vous vous retrouvez coincé avec une partie de celui-ci ou si vous avez besoin de précisions supplémentaires, faites-le moi savoir dans les commentaires et je ferai de mon mieux pour vous aider.

Si vous avez aimé le projet, abonnez-vous à ma chaîne YouTube:

Goûtez le code