Blockly Arduino : l’esprit d’Ardublock, sans ses inconvénients !

1. Une nouvelle interface graphique développée par Google

Le MIT et Google ont développé Scratch et AppInventor qui ont révolutionné l’enseignement des bases de la programmation. Ces logiciels étaient basés initialement sur une interface graphique très novatrice appelée Openblocs où on assemble des blocs pour générer du code. Openblocs est une application Java qui peut poser problème. Elle est utilisé aussi par Ardublock.

Google a ensuite développé Blockly, sorti en 2013, qui est un outil logiciel avec là encore une interface graphique pour programmer à partir de blocs et générer automatiquement du code. Blockly a été conçu pour être facilement intégrable à des logiciels pédagogiques de programmation graphique. Blockly est aussi conçu pour pouvoir être très configurable et s’adapter aux besoins pédagogiques : on peut facilement créer ses propres blocs, et définir le code qui doit être généré. Blockly est en javascript, il peut donc facilement être intégré à une application web multiplate-forme comme AppInventor 2 (en 2013).

Blockly est libre et est à l’origine aujourd’hui de nombreux logiciels de programmation graphique. Blockly est intéressant pour l’enseignement de l’algorithmie en Mathématiques conformément aux nouveaux programmes du collège comme le montre Patrick Raffinat dans son article : http://revue.sesamath.net/spip.php?article811

Pour programmer des cartes électroniques Arduino, j’utilise Ardublock depuis 2013 car c’est le logiciel qui correspondait le mieux à mes besoins en Technologie au collège mais aussi au lycée en Sciences de l’Ingénieur. Malheureusement Ardublock intègre Openblocs et non Blockly.

 

2. Intégration de Blocly avec Arduino par des enseignants

Parmi les nombreuses applications pédagogiques de Blockly, il y a Blockly Arduino développé depuis 2014 par Sébastien Canet, professeur formateur de Technologie de l’académie de Nantes. Blockly Arduino permet donc de programmer graphiquement avec des blocs et de générer du code pour Arduino, en langage C. La compilation du langage C en code exécutable par une carte Arduino est réalisée par le logiciel Arduino ou par un plugin du navigateur (CodeBender). La version actuelle de Blockly Arduino est opérationnelle et est très intéressante sur le plan pédagogique. Elle apporte de nombreux avantages par rapport à Ardublock, dont le développeur s’est inspiré.

Blockly Arduino est une application web qui ne nécessite donc aucune installation (pas besoin de droits administrateur non plus) et qui fonctionne sur toutes les plate-formes (PC, Mac, Androïd, …).

Exemple de programme simple avec Blockly Arduino utilisant un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue. L’affichage se fait sur l’écran du PC via le câble USB.

Capteur collision ou vide + Servo rotation continue 150216.zip (version du 15/02/16)

Exemple de programme écrit avec Blockly Arduino. Il utilise un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue (Source : Collège Jean Macé)

Exemple de programme écrit avec Blockly Arduino. Il utilise un capteur de collision (logique), un capteur de vide (optique et analogique) , et un servomoteur à rotation continue (Source : Collège Jean Macé)

5) Capteur colision ou vide + Servo rot continue 120515 (complet)

Le même programme fait avec Ardublock (Source : Collège Jean Macé)

Blockly Arduino est accessible à partir du lien suivant qu’il faut ouvrir avec Mozila Firefox (32 ou 64 bits) ou Google Chrome (32 bits uniquement) par exemple :

http://www.blockly.technologiescollege.fr/blockly@rduino/?lang=fr
Lien vers un tutoriel

Il est possible également de télécharger le site web de Blockly Arduino (moins de 10Mo) et de le lancer à partir du fichier index.html

Lien vers le logiciel pour un fonctionnement en local :

https://github.com/technologiescollege/Blockly-at-rduino

L’interface graphique de Blockly Arduino :

Menus, boîte à outils et espace de travail de Blockly Arduino (Source : Collège Jean Macé)

Menus (à gauche), boîte à outils (avec blocs “fonctions” ouverts, avec les fonctions utilisées) et l’espace de travail de Blockly Arduino avec un exemple de programme utilisant un capteur analogique et deux moteurs à courant continu. (Source : Collège Jean Macé)

Code Arduino généré par Blockly Arduino (Source : collège Jean Macé)

Code Arduino généré par Blockly Arduino (Source : collège Jean Macé)

Ne pas confondre Blockly Arduino avec Blockly Duino qui est une ancienne version.
Elle a inspiré le développement d’Ardublockly, qui est encore en version béta, mais qui devrait être intéressant également.
Voir une demo en ligne de l’interface d’Ardublockly ici : http://carlosperate.github.io/ardublockly/index.html
Pour une installation fonctionnelle (partiellement car en cours de développement) :
https://github.com/carlosperate/ardublockly
Mon premier essai d’Ardublockly m’a permis de voir notamment une fonction très intéressante, la possibilité de copier une partie d’un programme (sous forme de blocs) et de la coller dans le programme en cours. Cette fonction n’est pas visible dans la démo en ligne qui n’intègre pas les menus.

3. Principaux avantages de Blockly Arduino (suite à mes premiers essais)

– Application Web qui ne nécessite aucune installation et sans bugs (ceux liés à Java étaient pénibles avec Ardublock). Utilisable sur tablettes et smartphones (multiplate-forme).

– Interface graphique performante qui s’utilise à peu près comme Openblocs d’Ardublock, mais avec des possibilités en plus : cela peut parfois rallonger un petit peu la prise en main pour l’élève. Elle est souvent plus souple d’emploi et plus agréable : par exemple on peut utiliser des espaces dans le nom des variables ou des fonctions, des blocs sont nommés de manière automatique avec les blocs existants (variables, fonctions, …), le renommage d’une variable s’applique automatiquement à tout le programme, …

Exemple de menu déroulant avec les variables existantes (Source : Collège Jean Macé)

Exemple de menu déroulant avec les variables existantes (Source : Collège Jean Macé)

– Bien traduit en français

– Un des plus gros avantage, me semble-t-il, est la possibilité pour l’élève de compléter son programme en cours de mise au point par un autre programme fourni par le professeur (sauvegardé en xml). Cela permet de donner aux élèves des briques logicielles (et pas seulement des blocs) pour ajouter progressivement des fonctionnalités : utilisation d’un afficheur graphique, d’un module MP3, … Cela n’était pas possible avec Ardublock (il fallait ressaisir à partir d’un exemple, ou partir d’un programme complet donné par le professeur).

Possibilité de fusionner le programme en cours avec un autre programme, un exemple donné avec une nouvelle fonctionnalité, la lecture d'un fichier mp3 par exemple (Source : Collège Jean Macé)

Quand on charge un programme on a la possibilité de fusionner le programme en cours avec le programme chargé. Cela permet de charger un exemple donné avec une nouvelle fonctionnalité, la lecture d’un fichier mp3 par exemple (Source : Collège Jean Macé)

 

Possibilité d'enregistrer le programme en cours et d'en ouvrir un autre sans forcément écraser le programme en cours (Source : collège Jean Macé)

Possibilité d’enregistrer le programme en cours et d’en ouvrir un autre sans forcément écraser le programme en cours (Source : collège Jean Macé)

– Les sous-programmes s’appellent ici des fonctions car ils permettent d’ajouter facilement des paramètres (des entrées).

– Un autre avantage énorme de Blockly Arduino, c’est la possibilité de modifier facilement les blocs existants ou d’en créer de nouveaux que l’on adaptent à ses besoins. Ce type de modification ou de création est accessible à un professeur sans connaissances particulières en javascript (c’est mon cas). Pas besoin d’outils complexes : Notepad++ et un navigateur suffisent, alors que pour Ardublock la démarche est longue et très complexe (il faut un kit de développement Java). La démarche pour Blocly Arduino est assez bien documentée et Sébastien Canet (professeur de académie de Nantes) apporte un support efficace avec une grande réactivité (merci à lui). De plus, il n’hésite pas à intégrer dans la version mise en ligne les nouveaux blocs proposés. Ce travail de développement motive même certains de mes élèves.

Exemple de bloc que j’ai pu créer assez facilement en javascript dans le code source de Blockly Arduino pour commander un module LED RGB avec une liaison série, en utilisant  la librairie fournie par Adafruit (et en me basant sur les blocs existants). J’ai pu le tester en local et l’utiliser avec mes élèves avant de proposer à M Canet de l’intégrer à la version en ligne (c’est le cas aujourd’hui). Rien à voir avec Ardublock !

Définition d'un bloc en javascript dans le code source de Blockly Arduino pour commander une LED RGB : il suffit de s'inspirer des blocs existants (Source : Collège Jean Macé)

Définition d’un nouveau bloc en javascript dans le code source de Blockly Arduino pour commander une LED RGB : il suffit de s’inspirer des blocs existants. On peut alors l’utiliser en local ou proposer à M Canet de l’intégrer à la version en ligne. Rien à voir avec Ardublock ! (Source : Collège Jean Macé)

Code pour bloc Led RGB 150216

La partie parfois plus technique de la création d’un nouveau consiste à définir le code Arduino que devra générer Blockly Arduino à partir du nouveau bloc. Quelques bases de langage C suffisent. Ici c’est simple grâce à la bibliothèque fournie par Adafruit. Sinon, on trouve facilement de l’aide : vive les logiciels libres ! (Source : collège Jean Macé)

Quelques liens utiles pour aider à la création de nouveaux blocs :

http://tic.technologiescollege.fr/wiki/doku.php/fr/arduino/blockly_rduino/creerblocsmulti
https://developers.google.com/blockly/
https://developers.google.com/blockly/custom-blocks/defining-blocks
https://developers.google.com/blockly/custom-blocks/block-factory

 

4. Principaux inconvénients (suite à mes premiers essais)

– Il y a aujourd’hui 2 solutions pour transférer le code obtenu avec Blockly vers le logiciel Arduino pour compilation :
. Faire un copier-coller de Blockly vers Arduino : simple et efficace mais moins simple qu’avec Ardublock.
. Installer le plugin CodeBender au navigateur pour pouvoir lancer la compilation et le téléversement vers la carte Aduino directement à partir de Blockly Arduino. Le logiciel donne directement un lien cliquable pour télécharger CodeBender. Cela ne fonctionne pas si le programme utilise un bloc “exotique” avec une bibliothèque non-référencée par CodeBender.

– CodBender permet de téléverser le programme vers la carte Arduino connectée au PC, mais il ne fonctionne pas avec certaines versions en version 64 bits (pour moi ça fonctionne bien avec Firefox, pour d’autres avec Chrome).

– Pour téléverser le programme Il faut d’abord quitter la fenêtre avec les blocs. Ensuite il faut donner le nom de la carte Arduino. Blockly détecte le port COM utilisé, mais ne le mémorise pas (problème existant avec Ardublock aussi). Si on utilise CodeBender, aucune information (à part sonore) n’est donnée sur le bon déroulement de cette phase de compilation et de téléversement. Il faut utiliser l’IDE Arduino (comme avec Ardublock) pour avoir des informations.

– Les blocs ont tous la même forme au niveau des connecteurs : on doit parfois chercher pour comprendre les problèmes de compatibilités entre blocs (qui ne s’assemblent clairement pas quand il y a incompatibilité). Cet aspect est directement lié à Blockly développé par Google.

 

5. Conclusion

Blockly Arduino me semble être aujourd’hui l’outil le plus intéressant pour enseigner la programmation au collège ou au lycée (en Sciences de l’Ingénieur). J’ai rapidement décidé d’abandonner Ardublock pour passer à Blockly Arduino. Mes premières séances avec mes lycéens confirment clairement mon choix. Pour la plupart ce sont des grands débutants en programmation. Ils ont apprécié Blockly Arduino. Ceux qui connaissaient Ardublock ont préféré Blockly Arduino. Je commence à l’utiliser aussi avec mes élèves de 4è en Technologie : même accueil enthousiaste des élèves !

Dommage que Blockly Arduino soit aussi peu connu pour le moment. J’espère que cet article contribuera à mieux le faire connaitre au sein de l’Education Nationale notamment. N’hésitez pas à laisser un commentaire, ou même à collaborer pour participer à l’amélioration de ce logiciel. La force du logiciel libre est dans l’implication de ceux qui les utilisent et participent à son évolution pour l’adapter à leur besoin.

Nouveaux articles en cours de rédaction :

Matériel pour enseigner la Technologie

Utilisation de modules Led RGB WS2812B avec Blockly Arduino

Utilisation d’un module audio, le DFPlayer Mini mp3 de DFRobot, avec Blockly Arduino

Utilisation d’un afficheur OLED 128×64 I2C avec Blockly Arduino