Code Arduino expliqué pas à pas : le comprendre et le modifier

Comprendre le code est l'onglet de la section Code Source de chaque page de projet BlueGrays qui explique pas à pas le code Arduino tout prêt. Pour savoir ce que fait vraiment le code que tu as copié et téléversé, suis cet ordre : lis d'abord le résumé Que fait ce code ?, puis retrouve dans le code complet chaque extrait de la section Étape par étape avec son explication, consulte Si tu bloques si le circuit ne se comporte pas comme prévu, et termine avec le défi À toi de jouer pour changer une seule chose dans le code et voir le résultat sur la carte. Ces quatre sections sont le chemin le plus court entre « ça marche, mais je ne sais pas pourquoi » et « je sais ce qui se passe si je change cette ligne ».

Dans cet article, nous parcourons Comprendre le code du début à la fin avec le contenu réel d'un vrai projet : le projet numéro 10, Allumer et éteindre une LED avec un bouton. Il est gratuit, de niveau Débutant et dispose aussi d'une vue en blocs ; tout le monde peut donc ouvrir l'explication du code comme celle des blocs. Tu trouveras les sections de l'onglet, une méthode pour faire correspondre le code et l'explication, une routine de travail de 15 minutes, une stratégie pour résoudre les défis À toi de jouer, ce que chaque type de modification enseigne, la vue Comprendre les blocs, la différence entre Si tu bloques et Dépannage, ainsi que des idées pour les enseignants en cours.

Où se trouve Comprendre le code et qui peut l'utiliser ?

Quand tu ouvres un projet et que tu descends jusqu'à la section Code Source, tu vois en haut un sélecteur à deux onglets : Code et Comprendre le code. L'onglet Code affiche le programme complet, avec les boutons Copier et Copier le lien. Si tu passes à Comprendre le code, la version commentée du même programme s'ouvre. Chacun des 200+ projets possède cet onglet, et il fonctionne de la même façon pour les projets Arduino, ESP32 et Raspberry Pi Pico. La règle d'accès est simple : dans les 60 projets gratuits (20 par plateforme), Comprendre le code est ouvert à tous ; même avec un compte gratuit, tu vois le résumé, toutes les étapes, Si tu bloques et le défi À toi de jouer avec sa solution. Dans les projets Premium, une carte de verrouillage remplace l'onglet : « Débloque avec Premium l'explication du code étape par étape. » Tu peux donc appliquer la méthode de cet article à Clignotement d'une LED, Feu de circulation, Gyrophare de police à LED et aux projets à bouton sans rien payer.

Les sections : à quoi sert chacune ?

L'ordre des sections est voulu : d'abord la vue d'ensemble, puis les morceaux, ensuite les erreurs et enfin ta propre expérience. Les extraits ne sont pas le programme entier, seulement les lignes que l'étape explique ; l'accolade fermante d'un bloc ouvert dans une étape peut n'apparaître qu'à l'étape suivante. C'est pourquoi lire toutes les étapes dans l'ordre est plus efficace que d'en regarder une seule. L'indice est visible juste sous le texte du défi, alors que la solution reste cachée tant que tu ne touches pas Voir la solution. Cette disposition te laisse le temps de réfléchir avant de voir la réponse.

Exemple : Comprendre le code dans le projet Allumer et éteindre une LED avec un bouton

Le projet utilise un bouton-poussoir et une LED. Un côté du bouton va au 5V et le côté opposé à la broche 13 de la carte ; cette même broche est ramenée à GND par une résistance de 10 kΩ. La patte longue de la LED va à la broche 7 et la patte courte à GND à travers une résistance de 330 Ω. Le résumé de Comprendre le code décrit le programme ainsi : à chaque appui sur le bouton, la LED inverse son état une fois, elle s'allume si elle était éteinte et s'éteint si elle était allumée ; même si tu gardes le bouton enfoncé, la LED ne change qu'une fois, et une attente de 50 ms ignore les rebonds du bouton. Voici le programme complet, avec des commentaires en deux langues.

1int ledState = 0;     // LED durumu: 0 sönük, 1 yanık / LED state: 0 = off, 1 = on
2int lastButton = 0;   // Butonun önceki okuması / Previous button reading
3
4void setup() {
5  pinMode(13, INPUT);   // Buton girişi, harici pull-down / Button input, external pull-down
6  pinMode(7, OUTPUT);   // LED çıkışı / LED output
7}
8
9void loop() {
10  int button = digitalRead(13);   // Butonu oku / Read the button
11  if (button != lastButton) {     // Buton durumu değişti / Button state changed
12    if (button == 1) {            // Yalnız basış anında (LOW -> HIGH) / Only at the press (LOW -> HIGH)
13      ledState = !ledState;       // Durumu tersine çevir / Flip the state
14      digitalWrite(7, ledState);  // Yeni durumu LED'e yaz / Write the new state to the LED
15    }
16    delay(50);                    // Sıçramayı atlamak için kısa bekleme / Short wait to skip the bounce
17    lastButton = button;          // Bu okumayı sakla / Store this reading
18  }
19}

En lisant les étapes, remarque que l'explication te dit non seulement ce qui se passe, mais aussi ce qui se passerait sans cette ligne. L'étape 1 rappelle que ledState commence à 0, si bien que la LED est éteinte à la mise sous tension. Une bonne question en découle : si tu mets 1, la LED démarre-t-elle allumée ? Non, car cette ligne ne change que la variable ; setup() n'écrit rien sur la LED, elle démarre donc éteinte, et au premier appui ledState repasse à 0, si bien qu'elle reste éteinte. La valeur d'une variable et l'état réel d'une broche sont deux choses différentes. L'étape 2 relie l'usage d'INPUT sur le bouton à la résistance de 10 kΩ du circuit : quand le bouton n'est pas enfoncé, la résistance ramène la broche à GND et on lit 0. Retire la résistance et la broche devient flottante et lit des valeurs aléatoires ; le symptôme « la LED s'allume et s'éteint toute seule » de Si tu bloques correspond exactement à ce cas.

Les étapes 3 et 5 se lisent ensemble. La comparaison de l'étape 3 ne fonctionne que si lastButton est mis à jour après chaque changement, et cette mise à jour, c'est la ligne lastButton = button de l'étape 5. En faisant correspondre les deux étapes, l'idée centrale du programme apparaît : le code ne vérifie pas si le bouton est enfoncé, mais si son état a changé. Quand tu le maintiens enfoncé, chaque tour lit 1, mais lastButton vaut aussi 1, la comparaison est fausse et la LED ne change pas. L'opérateur ! de l'étape 4 est un interrupteur marche/arrêt en deux lignes. L'étape 5 se termine par un avertissement : si l'attente est trop courte, la LED peut parfois changer plusieurs fois pour un seul appui. Cela te suggère une première expérience avant le défi : passe 50 à 5, appuie plusieurs fois et observe si la LED change parfois deux fois ; le résultat dépend de la qualité du bouton. Pour en savoir plus sur l'anti-rebond, lis comment brancher un bouton-poussoir sur Arduino.

La section Si tu bloques de ce projet liste cinq symptômes : la LED ne s'allume jamais ; la LED change toute seule sans qu'on touche le bouton ; rien ne se passe quand on appuie ; le bouton se comporte comme s'il était toujours enfoncé ; le code ne se téléverse pas. Chaque symptôme s'accompagne d'une vérification concrète. Pour « toujours enfoncé », par exemple, elle explique que si les pattes du bouton sont insérées dans le mauvais sens, D13 reste relié au 5V en permanence et qu'il faut tourner le bouton de 90 degrés. Le défi À toi de jouer est le suivant : la LED doit changer quand tu relâches le bouton, et non quand tu appuies. L'indice rappelle que la variable button passe à 1 au moment de l'appui et à 0 au moment du relâchement. La solution tient en un seul caractère : la ligne if (button == 1) devient if (button == 0). Ce petit défi vérifie si tu as vraiment compris la détection de front de l'étape 3.

Méthode de lecture : résumé, correspondance, essai

1. Lis le résumé, écris-le en une phrase : Lis Que fait ce code ?, puis écris le programme en une phrase dans ton cahier sans regarder le téléphone. Pour le projet à bouton : « Chaque appui allume ou éteint la LED une fois. »
2. Fais correspondre le code aux étapes de haut en bas : Ouvre le code dans l'Arduino IDE (Copier le lien dans Code Source facilite la chose), retrouve l'extrait de chaque étape dans le code complet et ajoute le numéro d'étape à côté de la ligne en commentaire. Les étapes suivent l'ordre du code : variables globales, setup(), loop().
3. Repère les lignes sans correspondance : S'il reste une ligne qui n'apparaît dans aucune étape (en général il ne reste que des accolades fermantes), demande-toi pourquoi elle n'est pas expliquée ; si ce n'est pas une accolade, cherche-la à nouveau dans les explications.
4. Essaie sur le circuit : Téléverse le code et teste un à un les comportements du résumé. Pour le projet à bouton, trois essais suffisent : un appui, un appui maintenu et des appuis rapides successifs. Avant chaque essai, dis à voix haute ce qui va se passer.

La mise en correspondance est l'étape la plus souvent sautée, alors que c'est elle qui rapporte le plus. Quand tu écris les numéros d'étape à côté des lignes, le squelette du code devient visible : quelle ligne s'exécute une fois et laquelle en boucle, où chaque variable est lue et où elle est écrite. Dans le projet à bouton, lastButton apparaît à deux endroits : elle est déclarée à l'étape 1 et mise à jour à l'étape 5. Le voir de tes propres yeux marque bien plus que de lire « une variable est une boîte ». Pour travailler à part les variables, les boucles et les fonctions, lis les bases de la programmation Arduino.

Une routine de 15 minutes avec Comprendre le code

Cette routine concerne un projet dont le circuit est déjà monté. Si tu montes le circuit pour la première fois, prévois 10 à 15 minutes de plus ou garde la routine pour le lendemain. Les deux dernières minutes sont les plus précieuses : faire ta propre petite modification après avoir vu la solution met à l'épreuve l'idée comprise, pas la réponse mémorisée. Dans le projet à bouton, tu peux par exemple déplacer la LED sur une autre broche ou porter l'attente de 50 ms à 300 ms et voir ce qui arrive aux appuis rapides. Un projet par jour à ce rythme, c'est cinq projets gratuits vraiment compris en une semaine. Pour un plan plus long, consulte la feuille de route Arduino sur 30 jours.

Une stratégie pour résoudre les défis À toi de jouer

Les défis À toi de jouer sont courts mais choisis avec soin : chacun demande une seule modification, et le résultat se voit ou s'entend. Respecter cet ordre pendant que tu les résous double ce que tu apprends :

1. Prédis : Lis le défi et dis d'abord quelle ligne tu vas toucher et ce que tu verras après la modification. Écrire ta prédiction évite plus tard l'illusion du « je le savais ».
2. Modifie : Ne change qu'une seule chose. Si tu changes deux lignes à la fois, tu ne pourras pas savoir quelle modification a produit quoi.
3. Téléverse : Téléverse le code sur la carte et attends le message indiquant que le téléversement est terminé. En cas d'erreur de compilation, vérifie le point-virgule et les parenthèses de la ligne modifiée.
4. Observe : Compare le résultat avec ta prédiction. Pour les défis de durée, compte les secondes ; pour les défis sonores, écoute l'ancien et le nouveau son l'un après l'autre.
5. Regarde l'indice : Si ta prédiction a échoué ou si tu ne trouves pas quelle ligne toucher, lis l'indice. Comme il est visible juste sous le défi, le cacher avec la main à la première lecture aide.
6. Ouvre la solution en dernier : Ne touche Voir la solution qu'après ton propre essai. Si elle correspond à la tienne, demande-toi pourquoi elle est juste ; si elle diffère, demande-toi pourquoi les deux approches donnent des résultats différents.

Autre avantage de cet ordre : il rend les erreurs instructives. Imagine que, dans le défi du projet Feu de circulation, tu veuilles allonger à 1,5 seconde l'orange qui suit le vert, mais que tu modifies par erreur la première ligne delay(300). Au lieu du résultat attendu, tu verras s'allonger l'orange qui suit le rouge. Cette erreur t'apprend bien mieux que la solution que le code comporte deux phases orange distinctes et que loop() s'exécute ligne par ligne. La solution du défi le dit d'ailleurs : la ligne delay(300) tout à la fin de loop() devient delay(1500), et l'orange après le rouge reste à 0,3 seconde.

Types de modification : quelle notion chacun enseigne-t-il ?

En regardant les défis des projets gratuits, tu verras que chacun appartient à l'un de quelques types. Reconnaître le type t'aide aussi à te fixer ton propre défi dans un nouveau projet. Les exemples du tableau viennent de vrais défis À toi de jouer de projets gratuits ; la ligne sur le changement de broche est une expérience que tu peux faire toi-même dans le même projet.

Comprendre les blocs : la même explication en blocs

Les projets disposant d'une vue en blocs ont un interrupteur Voir en blocs dans la section Code Source. Quand tu l'actives, le même programme apparaît sous forme de blocs dans la langue de l'application au lieu du code, et l'onglet voisin passe de Comprendre le code à Comprendre les blocs. Dans cette vue, le résumé, Si tu bloques et le défi restent identiques ; c'est la section Étape par étape qui change : chaque étape montre ses propres blocs à la place de l'extrait de code, et un toucher sur l'image l'ouvre en plein écran. Plus de 100 projets ont une vue en blocs, dont plus de 30 projets gratuits. Les blocs servent uniquement à la lecture ; on ne les modifie pas dans l'application et on ne les téléverse pas sur la carte, c'est toujours le vrai code qui y est envoyé.

La meilleure façon d'utiliser Comprendre les blocs est d'alterner entre les deux vues. Dans le projet à bouton, les blocs de l'étape 3 sont un bloc « définir button à lire la broche 13 » et deux blocs « si » imbriqués ; en code, ce sont la ligne int button = digitalRead(13); et deux if imbriqués. Le bloc « définir ledState à non ledState » de l'étape 4 correspond exactement à la ligne ledState = !ledState;. Lis d'abord le bloc et dis ce qu'il fait, puis désactive l'interrupteur et regarde l'extrait de code de la même étape. Ce va-et-vient entre blocs et code est la façon la plus solide de passer de la programmation par blocs au code textuel ; pour reprendre le sujet depuis le début, lis qu'est-ce que la programmation par blocs et l'article sur le bloc si.

Si tu bloques ou Dépannage : quelle différence ?

En pratique, l'ordre est le suivant : quand le circuit ne fonctionne pas, décris le symptôme en une phrase et cherche-le dans Si tu bloques. Si ton symptôme y figure, la solution tient souvent à un seul fil, une résistance ou une ligne. S'il n'y figure pas, ou si la solution proposée n'a pas suffi, parcours dans l'ordre les étapes du Dépannage ; tu y repéreras sans doute une vérification de base que tu avais sautée (alimentation de la carte, bon port, GND commun). Si tu bloques au téléversement, l'article Arduino ne téléverse pas le code t'aidera, et pour les erreurs de compilation, les erreurs de compilation Arduino.

Pour les enseignants : utiliser Comprendre le code en cours

• Lecture commune au vidéoprojecteur : En début de cours, projette l'écran de ton téléphone, lisez ensemble le résumé Que fait ce code ? et demande à la classe de résumer le programme en une phrase. Montre ensuite les mêmes étapes avec Voir en blocs activé ; pour les élèves qui ont commencé par les blocs, c'est une passerelle.
• Un groupe par étape : Pour un projet en 5 étapes, divise la classe en 5 groupes ; chaque groupe lit une étape, retrouve l'extrait dans le code complet et l'explique à la classe en deux minutes. Pendant qu'un groupe explique, les autres demandent : « que se passerait-il sans cette ligne ? ».
• Fiche de prédiction : Écris le défi À toi de jouer au tableau ; chaque groupe note sa prédiction sur une feuille avant de modifier, puis change le code et le téléverse. Discuter de l'écart entre prédiction et résultat apprend plus que le défi lui-même.
• Question de sortie : Dans les deux dernières minutes du cours, chacun répond à une question. Exemples pour le projet à bouton : que se passerait-il en maintenant le bouton enfoncé s'il n'y avait pas lastButton ? Que change la suppression de delay(50) ? Pourquoi la LED peut-elle changer toute seule si tu retires la résistance de 10 kΩ ?

Pour organiser l'accès, garde ceci en tête : comme Comprendre le code est ouvert à tous dans les projets gratuits, tes élèves peuvent appliquer cette méthode avec Clignotement d'une LED, Feu de circulation, Gyrophare de police à LED et les deux projets à bouton sans rien payer. Dans les projets Premium, Comprendre le code se débloque avec Premium ; si tu veux passer avec ta classe aux projets Premium, tu peux distribuer des codes des packs éducateurs plutôt que de faire souscrire chaque élève, comme expliqué dans une application Arduino pour la classe. Si tu veux partager un circuit que tu as conçu toi-même, tu peux ouvrir un sujet Tutoriel dans le Forum ; il n'est pas fourni avec des étapes Comprendre le code ni avec une vue en blocs, donc tu rédiges toi-même l'explication dans le texte du sujet et tu ajoutes le code avec Ajouter du code (faire cours avec ton propre projet). L'application n'a pas non plus de tableau de bord qui te montre quels défis chaque élève a résolus ; tu vérifies le défi en cours, en regardant le circuit qui fonctionne ou grâce à une photo.

Erreurs fréquentes et solutions simples

• Ouvrir la solution tout de suite : Si tu touches Voir la solution dès la lecture du défi, tu apprends la réponse mais pas l'idée. La règle : d'abord la prédiction, puis l'essai, ensuite l'indice et la solution en dernier.
• Copier sans lire les étapes : Récupérer le code avec Copier et le téléverser fonctionne, mais si tu passes au projet suivant sans lire Étape par étape, tu repars de zéro à chaque fois. Après le téléversement, lis au moins le résumé et les étapes.
• Prendre un extrait pour le programme entier : Les extraits ne contiennent que les lignes d'une étape ; collé seul dans l'IDE, un extrait ne compile pas. Fais toujours tes modifications dans le code complet.
• Changer plusieurs choses à la fois : Si tu modifies deux lignes ensemble et que le résultat te surprend, tu ne sauras pas laquelle est en cause. Une modification par téléversement.
• Changer le numéro de broche à un seul endroit : Changer pinMode en oubliant digitalWrite ou le fil fait partie des erreurs les plus courantes. Avant de modifier, repère tous les endroits du code où apparaît le numéro.
• Sauter Si tu bloques et demander tout de suite sur le forum : La réponse figure souvent déjà dans la liste Si tu bloques du projet. Regarde d'abord là, puis dans le Dépannage ; si le problème persiste, pose ta question sur le forum avec une photo du circuit et ton code.
• Terminer le défi et s'arrêter là : Si tu ne fais pas ta propre petite modification après avoir comparé avec la solution, ce que tu as appris reste lié à ce seul défi. Choisis toi-même un nombre, une broche ou une condition.

Une fois que tu as utilisé Comprendre le code dans cet ordre sur quelques projets, le code tout prêt cesse d'être une boîte fermée : tu peux dire à l'avance quelle ligne contrôle quoi et ce qui arrivera si tu la modifies. Allumer et éteindre une LED avec un bouton est un bon point de départ pour prendre cette habitude, car un code court y montre à la fois une variable globale, la détection de front, la bascule et l'anti-rebond. Si tu veux essayer, ouvre ce projet dans l'application BlueGrays et commence par le défi de l'onglet Comprendre le code ; les mêmes sections t'attendent dans chacun des 60 projets gratuits.