Programmation par blocs : définition et passage au vrai code

La programmation par blocs consiste à construire un programme en empilant des blocs colorés en forme de pièces de puzzle, au lieu de le taper ligne par ligne. Chaque bloc est une seule instruction, comme « régler la broche en sortie », « allumer la LED » ou « attendre 100 ms ». Comme les blocs ne s'emboîtent que là où ils vont, les erreurs du type point-virgule oublié, parenthèse non fermée ou commande mal orthographiée disparaissent, et tu te concentres sur la logique du programme. C'est pourquoi la programmation par blocs est vue comme l'entrée la plus douce dans la programmation pour les enfants et les débutants.

Mais la programmation par blocs n'est pas un langage jouet. Derrière chaque programme en blocs destiné à un Arduino ou à un Raspberry Pi Pico, il y a du vrai code, et la carte exécute toujours ce code. Dans cet article, tu vas voir pas à pas, avec des projets BlueGrays gratuits, ce que sont les blocs, ce que disent leurs couleurs et comment un programme en blocs devient du vrai code C++ ou MicroPython. À la fin, tu trouveras aussi les atouts et les limites de la programmation par blocs, et comment elle se combine avec des outils comme Scratch, mBlock et Tinkercad.

La programmation par blocs, c'est quoi et pourquoi « blocs » ?

En programmation par blocs, chaque instruction est une pièce avec des encoches et des ergots sur les bords. L'ergot du bas d'un bloc se loge dans l'encoche du bloc suivant, si bien que les instructions s'exécutent dans l'ordre, de haut en bas. Certains blocs ont une ouverture à l'intérieur : ce sont des blocs conteneurs qui accueillent d'autres blocs. D'autres ont des emplacements ovales blancs où l'on insère un nombre ou un autre bloc de valeur. Comme la forme de chaque pièce décide de ce qui va où, il est presque impossible de construire un programme qui enfreint les règles. La plupart des éditeurs de blocs actuels suivent la voie ouverte par Scratch, du MIT, et par la bibliothèque open source Blockly de Google. Les blocs de BlueGrays reposent eux aussi sur Blockly ; nous avons conçu le jeu de blocs nous-mêmes pour les projets d'électronique et l'affichons dans la langue de l'appli. Retiens que les blocs ne sont pas un nouveau langage de programmation. Instructions, ordre, conditions, boucles et variables sont exactement les mêmes notions que dans le code texte ; les blocs les rendent simplement visibles.

Comment un programme en blocs devient-il du vrai code ?

Les éditeurs de blocs utilisent en coulisse un générateur de code : chaque type de bloc a un modèle en code texte et, à mesure qu'on empile les blocs, ces modèles sont assemblés dans l'ordre. BlueGrays est un peu plus strict : les blocs de chaque projet sont créés pour correspondre ligne à ligne au vrai code qui va sur la carte. Chaque ligne des blocs a son équivalent dans le code, et chaque ligne du code son équivalent dans les blocs. Dans les projets Arduino et ESP32, ce code est du C++ ; dans les projets Raspberry Pi Pico, du MicroPython. Pour lire un programme en blocs, il te suffit de connaître ces cinq éléments :

• configuration (une fois) : la partie qui ne s'exécute qu'une fois, quand la carte démarre ou redémarre. Elle correspond à la fonction setup() d'Arduino, et c'est généralement là que les broches sont réglées en entrée ou en SORTIE.
• répéter indéfiniment : la partie qui s'exécute de haut en bas encore et encore tant que la carte est allumée. Sur Arduino, c'est la fonction loop() ; en MicroPython, une boucle while True:.
• Blocs d'instruction : des blocs comme « écrire HAUT sur la broche 9 » ou « attendre 100 ms », empilés dans les conteneurs et qui font chacun une tâche. La plupart correspondent à une seule ligne de code texte.
• Blocs de valeur : des nombres comme 9 ou 100 dans les ovales blancs, et des blocs arrondis qui renvoient un résultat, comme la lecture d'une broche. Ils se glissent dans les emplacements des blocs d'instruction et deviennent la valeur entre parenthèses dans le code.
• Menus déroulants : des options comme SORTIE ou HAUT / BAS. Ils correspondent aux constantes OUTPUT / INPUT et HIGH / LOW du code et, comme le menu ne propose que des options valides, impossible de les mal écrire.

Blocs et code côte à côte : le projet Clignotement d'une LED

Assez de théorie, passons à un vrai exemple. Dans le projet Clignotement d'une LED, une LED et une résistance sont reliées à la broche 9, et la LED clignote cinq fois par seconde. Dans le tableau ci-dessous, on traduit un par un en code les blocs de l'image du haut. Chaque ligne est un bloc, et chaque bloc une ligne de code :

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

Le code contient quelques éléments que tu ne vois pas dans les blocs : le mot void, les accolades et les points-virgules. Ce sont des règles de syntaxe du C++, et dans les blocs, c'est la forme elle-même qui s'en charge. L'ouverture d'un bloc conteneur remplace les accolades, et les blocs placés les uns sous les autres remplacent l'ordre des lignes. Si tu remplaçais le 100 de l'emplacement par 1000, le code indiquerait delay(1000) et la LED clignoterait une fois par seconde. Si tu choisissais BAS au lieu de HAUT dans le menu, HIGH deviendrait LOW. Grâce à cette correspondance ligne à ligne, au bout de quelques projets tu commences à lire le code sans regarder les blocs. Le circuit et le montage pas à pas de ce même projet t'attendent dans la partie 2 de la série : faire clignoter une LED en blocs.

Que signifient les couleurs des blocs ?

Dans les éditeurs de blocs, la couleur n'est pas décorative : elle indique de quelle catégorie vient un bloc. Au premier coup d'œil sur un programme, les couleurs te permettent de lire « ici on déclare une variable, ici on prend une décision, ici il y a une boucle ». Voici les catégories que tu verras dans les images de blocs des projets BlueGrays :

Les formes donnent aussi des indices. Les blocs de condition et de comparaison ont des extrémités pointues, proches d'un hexagone, et se glissent dans l'emplacement de condition d'un bloc de condition ; les blocs de nombres et de variables ont au contraire des bouts arrondis. Un détail du tableau mérite ton attention : dans la boucle qui compte avec i de 0 à 5 par pas de 1, la borne haute est incluse, donc i prend les valeurs 0, 1, 2, 3, 4 et 5. En code, cela s'écrit avec la condition i < 6, et la boucle fait six tours. Le projet Chenillard à LED allume six LED l'une après l'autre exactement avec ce bloc ; on détaille les blocs de boucle et de tableau dans la partie boucles et variables de la série.

Les blocs de condition imbriqués de cette image deviennent des lignes if imbriquées dans le code. Le bloc extérieur avec la comparaison button ≠ lastButton est la ligne if (button != lastButton) et agit quand l'état du bouton change. Le bloc intérieur avec button = 1 ne capte que le moment de l'appui. Le bloc qui affecte à ledState la négation de ledState est la ligne ledState = !ledState; : 0 devient 1 et 1 devient 0. Le bloc suivant, qui écrit ledState sur la broche 7, est digitalWrite(7, ledState);. Tu peux voir le projet complet sur la page Allumer et éteindre une LED avec un bouton ; on explique le lien entre bloc de condition et if/else dans la partie boutons et conditions de la série.

C++ sur Arduino et ESP32, MicroPython sur le Pico

La même logique de blocs est traduite dans des langages différents selon la carte. Dans les projets Arduino et ESP32, les blocs correspondent à du code C++, et les blocs de configuration et répéter indéfiniment deviennent setup() et loop(). Par exemple, les blocs du projet Clignotement LED avec ESP32 ont la même structure que le Clignotement d'une LED ; seuls la broche, ici la 5, et l'attente, de 500 ms, changent. Dans les projets Raspberry Pi Pico, en revanche, les blocs deviennent du MicroPython. Il n'y a pas de fonction setup() ici : le contenu du bloc de configuration devient des lignes exécutées une fois en haut du fichier, et le bloc répéter indéfiniment devient une boucle while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Tu peux suivre la correspondance ligne par ligne. Le bloc « déclarer entier (int) LED_PIN = 14 » dans « variables globales (en haut) » est la ligne LED_PIN = 14 ; comme Python n'écrit pas les types, la partie (int) n'apparaît pas dans le code. Le bloc « broche led : GP LED_PIN, SORTIE » devient led = Pin(LED_PIN, Pin.OUT). « allumer (on) la broche led » est led.on(), « attendre 0.5 secondes » est time.sleep(0.5) et « écrire sur le port série » est une ligne print(). Le bloc « créer un texte avec » colle avec + le texte « LED pin: GP » et la valeur de LED_PIN. Attention : sur Arduino l'attente est en millisecondes (100 ms), en MicroPython en secondes (0.5), et les blocs montrent cette différence avec des blocs distincts pour les ms et pour les secondes. Pour le circuit, va voir la page LED externe sur le Raspberry Pi Pico ; si le Pico est nouveau pour toi, lire d'abord qu'est-ce que le Raspberry Pi Pico te facilitera la tâche.

Avantages et limites de la programmation par blocs

La programmation par blocs n'est pas la réponse à tout : c'est une passerelle. Les premières semaines, c'est un outil très puissant pour saisir la logique d'un programme ; le vrai but reste de franchir cette passerelle un jour et de lire du code texte sans appréhension. Voir les blocs et le code côte à côte accélère ce passage, car à chaque nouveau projet tu vois les mêmes blocs devenir les mêmes lignes. Après avoir croisé le bloc « répéter indéfiniment » dans dix projets, le mot loop() ne te semblera plus étrange. Quand tu seras prêt pour le code texte, l'article bases de la programmation Arduino explique tout, des variables aux fonctions, avec des exemples.

La programmation par blocs, pour qui ?

• Enfants et familles : les enfants à partir de 9-10 ans qui lisent facilement peuvent commencer avec un adulte. Avec les blocs à l'écran et une LED qui s'allume sur la plaque d'essai, programmer cesse d'être abstrait.
• Enseignants et clubs de robotique : expliquer un projet d'abord en blocs puis passer à son code réunit différents niveaux dans le même cours. Le plan de cours que nous avons préparé pour cela se trouve dans la dernière partie de la série : plan de cours de robotique avec la programmation par blocs.
• Débutants sur Arduino : si tu viens d'avoir ta carte et que les premiers programmes te paraissent confus, les blocs sont le moyen le plus rapide de voir ce que fait chaque ligne. Pour découvrir la carte elle-même, commence par qu'est-ce qu'Arduino.
• Tous ceux qui ont du mal à lire du code : comprendre un programme écrit par quelqu'un d'autre est une compétence à part entière. Regarder les blocs d'un projet tout prêt pour en saisir la structure aide à voir ce que fait un long code, et où.

Comparaison avec Scratch, mBlock, Tinkercad et MakeCode

La plupart des outils qui viennent à l'esprit quand on parle de programmation par blocs sont des éditeurs pour ordinateur ou navigateur, et chacun brille dans son domaine. Leur point commun : c'est toi qui fais glisser les blocs pour construire ton propre programme. BlueGrays répond à un autre besoin : il montre les blocs de projets tout prêts et testés à côté du schéma du circuit, de la liste des composants et du vrai code. Dans l'appli, tu ne peux pas (pour l'instant) assembler tes propres blocs pour créer un programme ; tu lis plutôt comment est construit un programme dont on sait qu'il fonctionne. Ces outils ne sont donc pas concurrents, ils se complètent. Tu peux par exemple comparer une séquence de feu tricolore construite dans mBlock avec les blocs du projet Feu de circulation et, si tu n'as pas encore de carte, simuler le circuit dans Tinkercad. Pour en savoir plus, consulte les tutoriels mBlock avec Arduino et simulation Arduino sur Tinkercad.

Utiliser la programmation par blocs dans l'appli BlueGrays

1. Choisis dans Découvrir › Projets un projet avec le badge blocs. Tu peux aussi utiliser le filtre pour n'afficher que les projets en blocs. Plus de 100 projets de l'appli existent en version blocs : la plupart sont des projets Arduino, les autres des projets ESP32 et Raspberry Pi Pico.
2. Dans la section code du projet, active l'interrupteur Voir en blocs. Les blocs du même programme remplacent le code ; touche l'image pour l'ouvrir en plein écran et zoomer confortablement.
3. Passe à l'onglet Comprendre les blocs. Le programme est expliqué pas à pas : chaque étape n'affiche que ses propres blocs et ce qu'ils font.
4. Si tu te demandes à quoi sert une commande, ouvre le Guide du code. Chaque exemple y est présenté avec les commandes Arduino et MicroPython, et aussi en blocs.
5. Désactive l'interrupteur pour revenir au vrai code. Copie-le, colle-le dans l'IDE Arduino (dans Thonny pour le Pico) et téléverse-le sur ta carte.
6. Consolide ce que tu as appris avec les Questions du jour : 5 questions par jour, des niveaux A1 à C2, un classement hebdomadaire et des badges.

Pour 31 projets, les blocs comme le code sont entièrement gratuits ; dans les autres, les blocs se débloquent avec Premium, comme le code. Quelques projets gratuits parfaits pour démarrer : Clignotement d'une LED, Deux LED clignotant en alternance, Feu de circulation, Chenillard à LED, Clignotement LED avec ESP32 et Clignotement de la LED intégrée du Raspberry Pi Pico. Tu peux voir tous les projets en blocs par plateforme sur la page programmation par blocs, où tu peux aussi comparer côte à côte les blocs et le code d'un projet exemple.

Série Des blocs au code : la feuille de route

1. Ce qu'est la programmation par blocs et comment un programme en blocs devient du vrai code (cet article)
2. Le premier programme : faire clignoter une LED en blocs, blocs et C++ côte à côte
3. Boutons et conditions : le bloc de condition et if/else
4. Boucles et variables : répéter indéfiniment, compter, tableaux et compteurs
5. Lire des capteurs en blocs, le port série et MicroPython sur le Pico
6. Pour les enseignants : un plan de cours de robotique avec la programmation par blocs

Dans la prochaine partie de la série, on reprend depuis le début le projet Clignotement d'une LED de cet article, avec le circuit, les blocs et le code C++ côte à côte, dans faire clignoter une LED en blocs. En attendant, tu peux ouvrir dans l'appli BlueGrays les projets cités ici avec leur schéma et leur code, et passer d'un geste à la version en blocs du même programme avec Voir en blocs ou à l'explication pas à pas avec Comprendre les blocs.