Découvrons ensemble comment programmer le micro:bit. Au cours de ce tutoriel, nous allons faire afficher différentes images à l'écran en fonction de l'orientation et des boutons pressés sur l'appareil.
Lorsque le micro:bit démarre, nous allons afficher un texte déroulant suivi d'une image. Ensuite, l'image affichée dépendra de nos actions.
Lorsque le micro:bit démarre, affichons un texte déroulant.
Astuce : En cliquant avec le bouton de droite sur un bloc et en choisissant "Aide", vous pouvez voir une rubrique d'aide qui explique son fonctionnement (en anglais seulement).
Astuce 2 : Si les instructions occupent trop de place à l'écran, simplement cliquer sur le bouton "Moins..." en gris au centre entre la fenêtre d'instruction et l'espace de programmation.
Astuce 3 : En cliquant sur l'ampoule dans le cercle bleu à droite de ce texte, vous pouvez voir le résultat de l'étape en cours.
- Trouver le bloc
||basic:afficher texte||dans la section||basic:Base||. - Le glisser dans le crochet
||basic:au démarrage||dans la surface de programmation. - Dans le cercle blanc du bloc
||basic:afficher texte||, écrire "Rosy!".
basic.showString("Rosy!")
Dans la boucle principale de notre programme, nous allons mettre des conditions.
- Trouver le bloc
||logic:si <vrai> alors||dans la section||logic:Logique||. - Le glisser dans le crochet
||basic:toujours||dans la surface de programmation. - Cliquer 3 fois sur le symbole
||logic:+||au bas de||logic:si <vrai> alors||.
basic.forever(function () {
if (true) {
} else if (false) {
} else if (false) {
} else {
}
})
La première condition va être déclenchée si le micro:bit est secoué.
- Trouver le bloc
||input:geste secouer est actif||dans la section||input:Entrée||. - Le glisser à la place du premier
||logic:vrai||.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
} else if (false) {
} else if (false) {
} else {
}
})
Affichons un visage surpris pour la condition que nous venons de créer.
- Trouver le bloc
||basic:montrer LEDs||, dans la section||basic:Base||. - Le glisser dans la condition que nous venons de créer.
- Y dessiner un visage surpris.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (false) {
} else if (false) {
} else {
}
})
La deuxième condition va être déclenchée si le micro:bit est incliné vers la droite.
- Faire clique droit sur
||input:geste secouer est actif||de la première condition et cliquer sur "Dupliquer". - Glisser le nouveau bloc
||input:geste secouer est actif||dans la prochaine condition||logic:sinon si <> alors||. - Changer l'action
||input:secouer||pour||input:incliné à droite||.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (input.isGesture(Gesture.TiltRight)) {
} else if (false) {
} else {
}
})
Afficher une animation lorsque le micro:bit est incliné vers la droite.
- Ajouter un bloc
||basic:montrer LEDs||dans cette 2e condition, et y dessiner un visage surpris. - Dans la section
||basic:Base||, trouver le bloc||basic:pause (ms)||et le glisser à la suite. - Attribuer la valeur
||basic:200||au bloc||basic:pause (ms)||. - Ajouter un autre bloc
||basic:montrer LEDs||sous||basic:pause (ms)||, et y dessiner un visage regardant à droite.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (input.isGesture(Gesture.TiltRight)) {
basic.showLeds(`
. . . . .
. # . # .
. . . . .
# . . . #
. # # # .
`)
basic.pause(200)
basic.showLeds(`
. . . . .
. . # . #
. . . . .
# . . . #
. # # # .
`)
} else if (false) {
} else {
}
})
La troisième condition va être déclenchée lorsque le bouton A est pressé.
- Trouver le bloc
||input:bouton A est pressé||dans la section||input:Entrée||. - Glisser le bloc à la troisième condition.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (input.isGesture(Gesture.TiltRight)) {
basic.showLeds(`
. . . . .
. # . # .
. . . . .
# . . . #
. # # # .
`)
basic.pause(200)
basic.showLeds(`
. . . . .
. . # . #
. . . . .
# . . . #
. # # # .
`)
} else if (input.buttonIsPressed(Button.A)) {
} else {
}
})
Afficher une image prédéfinie quand le bouton A est pressé.
- Trouver
||basic:montrer l'icône||dans||basic:Base||et le mettre dans cette condition. - Choisir l'image du crochet.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (input.isGesture(Gesture.TiltRight)) {
basic.showLeds(`
. . . . .
. # . # .
. . . . .
# . . . #
. # # # .
`)
basic.pause(200)
basic.showLeds(`
. . . . .
. . # . #
. . . . .
# . . . #
. # # # .
`)
} else if (input.buttonIsPressed(Button.A)) {
basic.showIcon(IconNames.Yes)
} else {
}
})
La dernière condition est toujours déclenchée lorsqu'aucune des conditions précédentes n'est remplie.
- Dupliquer le bloc
||basic:montrer l'icône||et le déplacer sous||logic:sinon||. - Choisir l'image du visage endormi.
basic.forever(function () {
if (input.isGesture(Gesture.Shake)) {
basic.showLeds(`
# . . . #
. . . . .
. . # . .
. # . # .
. . # . .
`)
} else if (input.isGesture(Gesture.TiltRight)) {
basic.showLeds(`
. . . . .
. # . # .
. . . . .
# . . . #
. # # # .
`)
basic.pause(200)
basic.showLeds(`
. . . . .
. . # . #
. . . . .
# . . . #
. # # # .
`)
} else if (input.buttonIsPressed(Button.A)) {
basic.showIcon(IconNames.Yes)
} else {
basic.showIcon(IconNames.Asleep)
}
})
Et voilà! Il ne reste plus qu'à téléverser le code sur le micro:bit. Les instructions pour la suite sont à la prochaine étape de l'activité.
- Connecter le micro:bit à votre ordinateur avec le câble USB fourni dans la trousse.
- Télécharger votre code avec le bouton Télécharger en bas à gauche de l'écran.
- Dans le gestionnaire de fichiers de votre ordinateur, glisser le fichier téléchargé vers le micro:bit que vous trouverez dans le gestionnaire de fichiers, comme une clé usb.
- Durant le transfert, la DEL orange au dos du micro:bit va clignoter rapidement. Une fois que c'est terminé, votre code est sur l'appareil.
Voyez ici la vidéo aide-mémoire par GénieLab, et voici la procédure détaillée dans la documentation de MakeCode (en anglais seulement).
Vous pouvez maintenant faire réagir Rosy à l'aide du programme que nous avons mis sur le micro:bit. Pour continuer de vous familiariser avec cet environnement de programmation, vous pouvez :
- Remplacer les conditions par d'autres types de manipulation.
- Changer le type d'affichage.
- Explorer les différents types de capteurs embarqués sur le micro:bit dans la section
||input:Entrée||.
Cliquez sur "Terminé" à droite de cette barre pour avoir accès à tous les blocs de programmation.