Joyeux anniversaire!

J'ai offert un micro:bit à mon neveu (coucou Élias 😃) pour sa fête. Alors pour commencer on va faire un programme qui affiche le message "Joyeux Anniversaire".

Projet Anniversaire

Tout d'abord, ouvre la page suivante dans un nouvel onglet, ou une nouvelle fenêtre:
https://pxt.microbit.org/?lang=fr

Cette page permet d'écrire du code informatique, c'est-à-dire des instructions que le micro:bit va suivre.

On va entrer directement dans le vif des choses sans trop d'explications pour le moment. On reviendra  plus en détail sur les étapes par la suite.

Une fois que tu auras cliqué sur le lien ci-dessus, une nouvelle fenêtre qui devrait ressembler à l'image ci-dessous devrait s'être ouverte:

Page d'ouverture de l'éditeur Javascript Blocks pour micro:bit

On va commencer par donner un nom à notre projet. Pour cela, il suffit de changer le texte juste à côté du bouton télécharger tout en bas de l'écran en cliquant dessus.

Étape 0: Changer le nom du projet

Je propose d'inscrire "anniversaire" comme titre du projet, mais tu peux mettre ce que tu veux.

On peut décomposer l'interface de programmation en 3 grands volets:

Les 3 volets principaux de l'interface (1) Simulation du micro:bit (2) Bibliothèque de blocs de code (3) Code que va exécuter le micro:bit

1. Ce volet représente le micro:bit. Il sert à simuler l'effet du code sur le micro:bit. On peut interagir avec cette image. Par exemple, tu peux appuyer sur les boutons avec ta souris. Le bouton change de couleur si tu cliques dessus.
2. Ce volet contient une bibliothèque de morceaux de code classés en catégorie. Pour ce projet, nous allons juste utiliser la catégorie Basique. On verra par la suite les autres catégories.
3. Ce volet sert à écrire le code informatique, c'est-à-dire les instructions que devra suivre (ou exécuter) le micro:bit. 

Il devrait y avoir deux blocs déjà présents au démarrage et toujours. On va ajouter une action à faire lors du démarrage: afficher le texte "Joyeux Anniversaire". Pour ça, il faut cliquer sur Basique tout en haut de la liste du volet 2. Cela va faire apparaitre un menu avec les blocs de la section Basique. En faisant un cliquer-glisser on va déplacer afficher texte "Hello" pour l'amener sur le volet 3 (on clique, on garde le bouton enfoncé et on déplace le bloc dans le volet 3). On le replace ensuite dans le bloc au démarrage de façon que l'encoche dans le bloc afficher texte "Hello!" se retrouve dans la bosse de au démarrage. On peut aussi déplacer le bloc toujours pour que le tout soit plus lisible.

Étape 1: Choisir le bloc afficher texte "Hello!" dans la bibliothèque Basique

Etape 2: Glisser le bloc afficher texte "Hello!" dans le bloc au démarrage

Dans le volet 1, la simulation de micro:bit devrait maintenant faire défiler le texte Hello!. Le texte ne va défiler qu'une fois au démarrage du micro:bit. Si tu veux redémarrer la simulation, il suffit de cliquer sur le bouton ⟳ en dessous de l'image du micro:bit. Si on avait mis le bloc afficher texte "Hello!" dans le bloc toujours, le texte aurait défilé en continu (une fois toutes les lettres affichées, il aurait recommencé au début du texte). Tu peux essayer si tu veux.

On va maintenant changer le texte pour Joyeux anniversaire!. Il suffit de cliquer sur le texte Hello! pour pouvoir le modifier et le remplacer par notre texte.

Étape 3: On change le texte Hello! pour Joyeux anniversaire!

Pour finir notre carte d'anniversaire en beauté, on va ajouter une dernière étape pour afficher un bonhomme sourire 😀.  Dans la bibliothèque basique, on va choisir le bloc show icon (qui veut dire affiche l'image en anglais) et le glisser en dessous du bloc afficher texte "Joyeux anniversaire!".  L'encoche du bloc show icon va se loger dans la bosse en dessous du bloc afficher texte "Joyeux anniversaire!". Il ne reste plus qu'à changer l'image afficher (le coeur) par celle du sourire. Il suffit de cliquer sur l'image et de sélectionner celle qu'on veut pour faire cette opération.

Étape 4: On va ajouter un bloc show icon

Étape 5: On place le bloc show icon en dessous du bloc afficher texte,  puis on sélectionne l'image  😃

Voilà notre programme est fini. Il faut maintenant le télécharger sur le micro:bit pour voir le résultat en vrai. On commence par brancher le micro:bit et l'ordinateur utiliser pour programmer à l'aide d'un câble USB comme celui de la photo ci-dessous.

Cable USB utilisé pour connecter le micro:bit à l'ordinateur. La plus grosse prise va dans l'ordinateur, la plus petite dans le micro:bit. (photo de Mathias Strupler - CC BY-SA 4.0)

La plus petite prise du cable est celle qui va aller dans le micro:bit, la plus grosse se connecte à l'ordinateur. Si tu ne sais pas comment et où insérer le cable usb dans l'ordinateur demande à un adulte. Attention, il y a un sens pour insérer les connecteur USB alors ne force pas pour le faire entrer, essaye juste de le retourner si il n'entre pas facilement dans la prise. La prise USB sur le micro:bit se situe à l'arrière du micro:bit comme indiqué sur l'image ci-dessous.

Position de la prise USB sur le micro:bit (photo de Ravi Kotecha - Own work, CC BY-SA 4.0) 

Note: À partir d'ici, je n'ai pas pu tester moi-même car je n'ai pas encore reçu mon micro:bit, n'hésitez pas à me dire s'il manque de l'information ou si ça ne marche pas.

Une fois le micro:bit connecté à l'ordinateur il suffit de cliquer sur le bouton télécharger en bas à gauche de l'écran. Cela va télécharger un fichier .hex sur le micro:bit. Je ne suis pas sur que cette étape soit automatique, il se peut que le fichier .hex ne soit télécharger que sur le disque dur de l'ordinateur et qu'il faille le déplacer sur le micro:bit qui devrait apparaitre comme si c'était une clé USB. Tu peux demander un adulte si tu ne vois pas le texte défiler sur le micro:bit après avoir cliquer sur télécharger.

Étape 6: Après avoir connecter le micro:bit et l'ordinateur avec un câble USB, clique sur télécharger.

Le programme est maintenant chargé dans la mémoire du micro:bit et le programme devrait s'exécuter: tu devrais voir défiler le texte puis s'afficher l'image. Tant que le micro:bit et l'ordinateur sont connectés, le micro:bit est alimenté en électricité par l'ordinateur. Il est possible de le rendre autonome, en utilisant la pile fourni dans le kit micro:bit.

Commence par débrancher le cable USB du micro:bit qui devrait s'éteindre. Maintenant, insère les 2 piles AAA dans le boitier (dans le sens indiqué sur le boitier) et branche le boitier de pile au micro:bit à l'endroit indiqué sur l'image ci-dessous.

Position de la prise pour la batterie sur le micro:bit (photo de Ravi Kotecha - Own work, CC BY-SA 4.0) 

Une fois la batterie branchée, le micro:bit devrait s'allumer et le programme s'exécuter. Tu devrais voir le texte défilé puis le sourire apparaitre. Si tu veux relancer le programme appuyé sur le bouton de redémarrage indiqué dans la photo ci-dessous.

Position du bouton de redémarrage sur le micro:bit (photo de Ravi Kotecha - Own work, CC BY-SA 4.0) 

Bravo, on a fait notre premier programme! J'espère que ça t'as plu. Maintenant, tu peux t'amuser en essayant de changer le code et voir ce qui se passe.

-----------------------------------------------

Quelques explications

Dans ce programme nous avons utilisé 3 types de blocs:

• Événement: Ce type correspond aux évènements qui peuvent arriver au micro:bit. Par exemple, le micro:bit peut être démarré, un bouton peut être appuyé, il peut être secoué... À chacun de ces évènements ou états correspond un bloc. Dans le programme que nous avons fait nous avons utilisé l'évènement au démarrage. Les blocs d'évènement, on la forme suivante:

• 

  Exemple de bloc évènement. La couleur et l'icône renseigne sur le type d'évènement (basique, entrée, ...). Le titre décrit l'évènement précis qui déclenchera le bloc. Il est possible d'insérer des bloc de type action dans le C formé par ce bloc. La bosse permettant de visualiser où le bloc d'action va s'insérer.

• Action: Les blocs d'action correspondent à des actions que peut faire le micro:bit. Par exemple il peut allumer une lumière appelée LED, afficher du texte, faire un calcul... Les blocs d'actions ne sont pas autonome, c'est-à-dire qu'il faut les insérer dans d'autres types de bloc, comme un bloc évènement, pour qu'ils fonctionnent. Dans notre programme nous avons mis les 2 blocs d'action afficher le texte et show icon dans le bloc d'évènement au démarrage. L'ordre des blocs est important puisque les actions sont effectuées les unes à la suite des autres. Les blocs d'action sont représentés comme suit:

  

  Exemple de bloc d'action.  La couleur et l'icône renseigne sur le type d'évènement (basique, entrée, ...). Le titre décrit l'action précise quel le bloc effectue. L'encoche permet de visualiser où le bloc d'action peut s'insérer.

• Donnée: Ces blocs représentent un nombre, un texte ou d'autres type données. Leur valeur peut soit être constante soit changer au cours du programme, on parle alors de variable. Dans notre programme nous avons utiliser une constante contenant le texte Joyeux anniversaire!. Les blocs de données doivent être placés dans d'autres blocs pour être utilisés.

  

  Exemple de bloc de donnée.  La couleur renseigne sur le type de donnée (nombre, texte,...).

  
  
  -----------------------------------------------

À toi de jouer

Essaye de faire les programmes suivants:

• Afficher en alternance un coeur et un 😀 (en utilisant l'évènement toujours)
• Afficher au démarrage le texte Merci Mathias suivi de l'image d'un carré

Pour créer un nouveau programme, tu peux cliquer sur Projet en haut à gauche de la page. Cela va ouvrir une fenêtre ou tu pourras cliquer sur nouveau projet.

Licence de l'article CC BY-SA 4.0