vendredi 31 mars 2017

Lancer les dés

Le projet

Aujourd'hui on va faire un dé avec un nombre de faces variable. Tu pourras l'utiliser pour jouer à ton jeu de société préféré.

Listes des blocs pour le projet

Les blocs que nous allons utiliser sont les suivants:
  • au démarrage (dans basique): on l'a déjà vu, ce bloc se déclenche au démarrage du micro:bit
  • montrer le nombre (dans basique): ce bloc d'action fait s'afficher un nombre sur le microbit. La valeur du nombre à afficher est donnée en argument.
  • effacer l'écran (dans basique/plus)ce bloc d'action efface l'écran lumineux.
  • item (dans variables): ce bloc de donnée sert à conserver une valeur (nombre, texte...) qui peut être réutilisée et changée dans le programme. On peut lui donner un nom en cliquant sur la petite flèche dans le bloc puis en sélectionnant Rename variable... Une nouvelle fenêtre va apparaitre qui permet de lui donner un nom.
  • définir item à (dans variables): Ce bloc permet de donner une valeur à une variable. Il faut choisir la variable que l'on veut modifier dans la liste (petite flèche rouge dans le bloc).  
  • 0 + 0 (dans maths): Ce bloc permet de réaliser des opérations mathématique. On peut changer l'opération (addition, soustraction, multiplication, division...) en utilisant la petite flèche.
  • choisir au hasard de 0 à (dans maths): Ce bloc permet de choisir un nombre au hasard entre 0 et une limite spécifiée incluse. 
  • lorsque le button est pressé (dans entrée): Ce bloc s'active quand le bouton choisit dans la liste (petite flèche dans le bloc) est appuyé.
  • lorsque secoué (dans entrée): Ce bloc s'active quand le le micro:bit est secoué.
L'idée est de créer un programme qui fait les choses suivantes:
  • au démarrage on défini une variable appelée faces à la valeur 6 (le dé que tu utilises le plus). Cette variable permet de savoir combien de faces à notre dé.  Cette variable faces va être utilisée tout au long du programme pour les lancer de dé, mais aussi pour conserver et modifier le nombre de faces de notre dé virtuel.
  • quand on appuie sur le bouton A, on diminue d'un le nombre de faces. On affiche alors le nombre de faces du dé, puis on efface l'écran.
  • quand on appuie sur le bouton B, on augmente d'un le nombre de faces. On affiche alors le nombre de faces du dé, puis on efface l'écran.
  • quand on secoue le micro:bit, le dé est lancé (on choisit un nombre au hasard en fonction du nombre de faces du dé) et le résultat du lancé de dé est affiché.

Première étape: initialisation d'une variable

La première étape est donc de créer un variable appelée faces. Mais avant tout une petite explication sur ce qu'est une variable en informatique. Essentiellement, une variable est comme une boite dans une étagère. C'est une boite un peu spéciale car on peut y ranger juste un seul type de chose. La variable a un nom et un contenu.
Dans la vraie vie, on aurait par exemple une boite rouge qui contient des balles. Son nom ce serait "la boite rouge" et son contenu serait les balles qu'il y a dans la boite.
Dans notre programme, nous allons avoir une variable appelé faces et qui contient le nombre de faces de notre dé, par exemple 6 comme dans un dé standard.
Pour créer un variable, il faut cliquer sur créer un variable dans le menu qui apparait après avoir cliqué sur variables dans la bibliothèque de blocs. Une fenêtre qui demande le nom de la variable va apparaitre, tu peux l'appeler faces. Une fois la variable créer, elle va apparaitre dans la menu des variables.
Pour le moment, on a juste créer une boite, mais il n'y a rien dedans. Pour mettre quelque chose dans la boite, on dit qu'on l'initialise. On fait cela en utilisant le bloc définir item à dans la catégorie variables. On utilisant la petite flèche à côté du mot item, on va choisir la variable faces. La valeur que l'on donne à la variable est à mettre dans le bloc à droite.
Il ne faut oublier non plus de dire quand cette initialisation doit avoir lieu au micro:bit, dans le cas de ce projet, au démarrage du micro:bit.

Initialisation d'une variable appelée faces à la valeur  6 au démarrage du micro:bit



Solution:

Quelle température fait-il ?

Le micro:bit est équipé d'un thermomètre. Nous allons l'utiliser pour mesurer et afficher la température ambiante. Les blocs que nous allons utiliser aujourd'hui sont les suivants:
Listes des blocs utilisés pour le projet

  • toujours (dans basique): on l'a déjà vu, ce bloc se déclenche en continu lorsque le micro:bit est allumé
  • pause (ms) (dans basique): ce bloc d'action oblige le micro:bit à prendre une pause. La valeur numérique qui défini la longueur de la pause est en milliseconde (1/1000 secondes). Il faut 1000 ms pour faire une seconde.
  • montrer le nombre (dans basique): ce bloc d'action fait s'afficher un nombre sur le microbit. La valeur du nombre à afficher est donnée en argument.
  • effacer l'écran (dans basique/plus)ce bloc d'action efface l'écran lumineux.
  • température (°C) (dans entrées): ce bloc de donnée contient la valeur de la température ambiante

Le but est de créer un programme qui va afficher la température ambiante sur l'écran du micro:bit. Pour rendre l'affichage plus lisible, on va effacer l'écran après avoir affiché la température puis attendre une seconde avant d'afficher une nouvelle fois la température.

Solution:

lundi 20 mars 2017

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



micro:quoi?

Le micro:bit est un tout petit ordinateur conçu par la BBC pour enseigner la programmation au plus grand nombre. Cela ressemble à ça:

Photo du micro:bit (par Ravi Kotecha - Own work, CC BY-SA 4.0)

Si vous voulez en savoir plus sur ce qu'il y a dedans, consultez la page wikipédia: https://fr.wikipedia.org/wiki/Micro:bit

Le but de ce blog est de traduire/créer des projets en Français pour ce mini-ordinateur car il n'y a pas encore beaucoup de ressource dans cette langue de disponible. Or c'est un très bel outil pour enseigner la programmation de façon ludique car il est à la fois peu cher et qu'il ne nécessite pas de carte supplémentaire ou de câblage pour interagir avec lui.

Dans la suite les postes de ce blog seront des projets pour le micro:bit avec des balises qui renseigneront sur le niveau de difficulté, les concepts de programmation exploités et les fonctions du micro:bit utilisées.

N'hésitez pas à poser des questions ou à partager votre point de vue dans les commentaires.

Licence de l'article CC BY-SA 4.0