Entre mon Arduino et NodeJS, c’est une grande histoire d’amour.

Hello World, I’m Arduibot!

J’ai passé quelques jours à m’amuser avec JavaScript et ma board Arduino, je me suis lancé dans un petit projet que je vous présent au cas ou vous avez envie de tester un peu la robotique en JavaScript.

Le principe de ce petit projet est de mettre en place un serveur NodeJS dont la vue Front est contrôlée par une board Arduino UNO, et étant donnée que je passe mon temps à répéter qu’il faut commenter son code, j’ai mis en place un repo GitHub avec un Wiki. Et maintenant, une story Medium.

S’il te plait, dessine moi un robot.

Avant de me lancer dans mon exploration, j’ai voulu définir un cadre : pas question de se lancer dans la création d’un T1000. Ca peut mal tourner ce genre d’expérience. Je voulais découvrir les possibilités sur des principes de base, finalement le booléen en mode robot, et ce qui m’intéressait le plus c’est le fait de pouvoir manipuler l’Arduino depuis une vue HTML et manipuler la vue depuis l’Arduino. Bosser sur l’asynchrone en fait, vous m’suivez toujours ?

Pour assembler ma board, j’ai choisi quelques composants basiques comme des LEDs ou des boutons et des plus spécifiques comme le shield et le potentiomètre Grove. J’ai voulu ajouter Grove car c’est une extension qui apporte plus de puissance et de ports à l’Arduino mais il est possible de réaliser ce projet uniquement avec des composants basiques.

Voici la liste des courses pour monter mon Arduibot :
- Arduino UNO 
- Shield Grove 
- Potentiomètre Grove
- BoutonGrove 
- LEDs (1 verte, 1 jaune, 1 rouge) 
- Bouton classique
- Jumpers male <=> male 
- Breadboard
- Résistance

Ça parle qu’elle langue un robot ?

Johnny 5 dans Short Circuit de Kenneth Johnson

Notre façon de communiquer avec un robot a beaucoup évolué avec les années, je crois que Alan Turing y allait au marteau de temps en temps mais c’est devenu une solution assez radicale aujourd’hui. Il y a quelque chose de merveilleux dans l’OpenSource, c’est le fait que l’on partage notre code pour le rendre meilleur. Et avec l’explosion des Framworks et l’évolution du JavaScript, presque tout devient possible, comme parler en JavaScript avec un robot.

A la fin des années 1980 un petit phénomène a fait sont apparition, Johnny 5, un robot articulé dont Kenneth Johnson a fait un film. En faisant des recherches pour travailler avec Arduino, j’ai découvert sur le Web un frameworks qui s’appel Johnny-Five. J’ai d’abord trouvé ça drôle, j’ai regardé l’API, et j’ai trouvé ça génial ! Je pouvais enfin trifouiller un Arduino en JavaScript, adieux week-end, bonjour robotique !

Créer l’environnement du robot

NodeJS, moteur JavaScript

Si le JavaScript est utilisé pour manipuler l’Arduino, autant le considérer comme le langage central de notre application en développant un serveur NodeJS. Pour le projet Arduibot aucune configuration serveur n’est obligatoire, mais il est toujours recommandé de respecter les bonnes pratiques. Vous pouvez vous référer au repo QuickStart sur GitHub.

La partie Front de mon projet est composée de 3 boutons gradués et d’un formulaire. Ce dernier est caché en CSS car il est débloqué grâce à une manipulation des composants de l’Arduino, le code de départ est également disponible sur le repo GitHub.

Pour faire communiquer le serveur avec le Front, j’ai ajouté est connecté Socket.IO dans les deux parties. Lorsque le serveur est lancé il émet un événement qui est récupéré par le Front pour débloquer l’interface Web.

Composition de l’Arduibot

Une fois l’environnement créé, il n’y a plus qu’à connecter la board à l’ordinateur et lancer le serveur avec un bon vieux npm install. J’ai d’abord mon serveur qui se lance puis la board qui lance la partie Front. A cette étape, j’avais écrit très peu de code mais la satisfaction de voir mon site s’afficher par une fonction lancée par la board était énorme ! Je savais qu’à partir de là, je pouvais commencer à m’amuser.

Alors j’ai fouillé dans mes composants et j’en ai sélectionné quelques-uns pour les connecter à la board. J’ai depuis cette première expérience une tonne d’idées qui me viennent en tête, mais pour ce premier projet, j‘ai commencé par un montage simple :

Plan de montage Fritzing

A partir de cette étape, j’ai commencé à connecter chaque élément en les instanciant, quit faire du JavaScript autant faire de l’ES6, puis j’ai ajouté quelques fonctions pour configurer le tout. Et puis j’ai relancé mon serveur, et j’ai commencé à allumer les LEDs en cliquant sur les boutons de mon Front et je les faisais clignoter en appuyant sur le bouton de la board.

Et puis je voulais faire un peu de CSS, j’ai commencé par le Web Design, ça me manque quand je n’ouvre pas une feuille de style depuis longtemps. Alors j’ai installé le Grove au-dessus de l’Arduino, rebranché les câbles et connecté le potentiomètre. Je voulais faire tourner les boutons du Front depuis mon potentiomètre alors, j’ai tapé un peu de code, j’ai relancé le serveur et :

“It’s alive, alive !!”

Une fois le potentiomètre connecté, je me suis amusé à faire passer la valeur du potentiomètre vers le Front qui l’ajoute à la propriété rotate() d’une balise HTML. J’ai utilisé un événement Socket.IO pour ça et j’avoue que le résultat final et plutôt surprenant !

De l’Arduino à l’Arduibot

Après avoir fait tout ça, je me suis dit la seule chose qu’il faut se dire quand on vient de passer 2 jours la tête dans le code : “Il est temps de tout refaire et de documenter tout ça !”. Donc j’ai remonté totalement le projet en y intégrant plus de logique et j’en suis venu à me dire que finalement, ce qui serait vraiment utile, c’est de monter un QuickStart pour initier un projet et créer un Wiki pour apprendre à connecter et utiliser des composants Arduino en JavaScript.

Je me suis amusé énormément avec ce projet, j’y ai vu des notions de bases utilisées dans des logiques et des environnements différents mais qui se retrouvent toutes dans JavaScript. Je pense à présent qu’il peut y avoir un autre angle pour enseigner la programmation orientée objet d’une façon extrêmement ludique : par la robotique en JavaScript !

At last but not least

Ça vous direz de vous lancer dans cette aventure ? Si oui bienvenue, j’ai quelque chose pour vous, pour commencer si vous voulez voir ce que ça donne sans rien coder ça ce passe sur Youtube :

Si après avoir vu cette vidéo votre clavier vous démange vous pouvez suivre la même démarche que moi en utilisant le repo que j’ai diffusé sur GitHub QUICKSTARTarduibot

Et pour finir, si vous voulez qu’on s’y mette ensemble, n’hésitez pas à me contacter !

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.