Programmer son micro:bit à l’aide d’une tablette Samsung (Android)

Sur Twitter on me demande un coup de pouce pour programmer un micro:bit à l’aide d’une tablette Android. Je vais donc documenter ici les étapes qui fonctionnent pour moi.

À noter que, pour l’instant, Scratch 3 ne supporte pas le micro:bit à l’aide d’une tablette (le Scratch Link est juste pour Windows et MacOS au moment d’écrire ces lignes). Par contre on peut quand même faire quelque chose avec Makecode et l’app de Samsung.

Installer l’appli de Samsung

Ça date un peu mais ça fonctionne toujours. Voici l’appli officielle pour l’instant. Un jour elle ne sera plus nécessaire mais faut vivre avec encore.
https://play.google.com/store/apps/details?id=com.samsung.microbit

Connecter son Micro:bit à l’appli

Ceci se fait en deux étapes, comme toute connection bluetooth. En premier, il faut mettre le micro:bit en mode “pairing”. Pressez les boutons A et B en même temps, puis appuyez le bouton “Reset” à l’arrière. Lâchez le “Reset” mais maintenez la pression sur les deux autres boutons jusqu’à ce que le symbole Bluetooth soit affiché sur les DELs rouges, ou que le code d’identification du micro:bit soit affiché.

Appuyez sur le bouton Next dans l’interface de la tablette.

Reproduisez le code d’identification sur l’écran suivant. Chaque micro:bit aura son propre code graphique.

La prochaine étape est un peu complexe. La tablette va chercher à contacter le microbit et commencer un dialogue. Il y a normalement un échange de codes entre deux dispositifs Bluetooth mais le microbit n’a pas d’écran ou de clavier. S’ensuit donc une interaction un peu boiteuse ici. Hop, une bonne respiration et on y va! Cliquez sur le bouton vert “PAIR” et patientez un peu. Oui, l’interface sur la tablette vous demande de presser le bouton A mais soyez patient. Il faut le faire seulement lorsque le NIP vous sera demandé.

Pour ma part je peux avoir jusqu’à 3 ou 4 échecs de connexion avant que le NIP ne me soit demandé. Il suffit de presser le bouton “retry”. Cette étape est un peu pénible mais lorsque le microbit sera reconnu, on n’aura pas à la refaire! (Dans une salle de classe, il serait important de garder une correspondance tablette-microbit pour éviter d’avoir à faire ce pairing à chaque cours).

Quand le NIP est demandé, pressez le bouton A sur le microbit le plus vite possible! Une série de 6 chiffres sera affichée sur l’écran de DELs rouges. Prenez-les en note, ils seront répétés plusieurs fois. Entrez-les dans l’interface de saisir de la tablette. Et finalement! Le micro:bit est reconnu par la tablette! Ouf! Oui, Microsoft travaille sur une meilleure expérience. Début janvier 2019, ce n’est pas encore prêt malheureusement.

Le code “PUVIV” visible ci-dessous est l’identificatif du microbit que j’ai utilisé. Chaque microbit a son propre code. Cliquez sur la toute petite flèche vers la gauche qui se trouve en haut à gauche.

Le code du microbit est visible dans l’écran des dispositifs BlueTooth de l’interface Android pour les prochaines fois, ce qui peut simplifier la gestion en classe.

Coder dans Makecode

On peut maintenant aller coder dans Makecode. J’utilise Chrome sur Android ici. Tout reste comme si l’on était sur un ordi à part qu’il est plus important de bien nommer ses fichiers avant de les transférer. N’utilisez pas l’option “Code” présente dans l’appli Samsung. Elle ne fonctionne plus, vous devez utiliser un fureteur web.

Télécharger

Pour télécharger notre code, il suffit de cliquer sur le bouton “Télécharger” et d’ignorer l’écran suivant. Le téléchargement est déjà fait comme vous pouvez le constater au bas de l’écran.

Transférer le code par Bluetooth

À ce point-ci, on rebascule vers l’appli Microbit de Samsung et on choisit “FLASH”

Mon programme apparait automatiquement, prêt à être transféré. Par contre le micro:bit n’est pas connecté. Cette fois-ci ça sera plus facile, promis.

Commencez par mettre le microbit en mode “pairing” (boutons A+B, plus reset, relâchez reset, attendez le petit graphique d’identification), et cliquez sur le dessin de connection en haut à droite de l’écran sur la tablette. Le pairing devrait se faire sans douleurs.

Cliquez sur le programme à transférer puis sur le bouton FLASH.

Le transfert par Bluetooth va commencer.

Si le microbit n’est pas en mode “bluetooth” au moment du transfert, vous obtiendrez un code d’erreur GATT. Après le transfert, le microbit sera rebooté et sortira du mode bluetooth. Il faudra penser à le remettre dans le bon mode pour le prochain transfert.

Conclusion

Ces étapes fonctionnent bien pour moi, avec une tablette Samsung Tab A datant de 2016. Je n’ai pas testé avec d’autres tablettes.

La première connection est pénible et devrait être faite par le prof avant d’introduire les micro:bits en classe. Le reste demande quand même quelques manipulations mais les jeunes en sont capables.

Une meilleure solution s’en vient. J’en parlerai lorsqu’elle sera disponible.

Connecter un Micro:bit à Scratch 3

Oui oui! Scratch 3!   La version Beta est disponible et elle inclut le support pour le Micro:bit! Ô joie!

En tout premier, voici le lien pour la version Beta: https://beta.scratch.mit.edu/

Cliquez sur “Try it!” pour l’essayer ( “Essayez-le” si votre ordi est en français).  Une note au passage, la version française n’est pas complètement disponible au moment d’écrire ce billet. Je vais donc rester en anglais. La traduction française est en cours, il ne faut pas désespérer.

Je ne parlerai pas ici de Scratch 3 lui-même, juste de l’intégration du Micro:bit.

Préparatifs:
1. installer Scratch Link sur votre ordinateur (Windows ou Mac)
2. installer le firmware Scratch sur le micro:bit
3. connecter par Bluetooth au micro:bit

Installer Scratch Link

Scratch Link est un petit logiciel qui doit être installé sur votre ordinateur.  Vous l’obtiendrez sur la page dédiée au microbit: https://scratch.mit.edu/microbit (en anglais seulement).
Pour l’instant, il semble que Scratch Link ne soit disponible que pour Windows et Mac. Je n’ai pas eu de succès avec une tablette Android mais peut-être que le support viendra.

Pour l’instant, téléchargez la version qui correspond à votre OS. Les détails qui suivent sont valables pour Windows.  C’est un fichier .zip donc il faudra extraire le fichier à l’interne. Glissez-le sur votre bureau afin de le retrouver facilement.

Double-cliquez sur le fichier en question pour installer Scratch Link. N’oubliez pas de cocher “Launch Scratch Link” avant de terminer l’installation!

Vérifiez que Scratch Link est bel et bien installé!

Voilà! Scratch peut maintenant parler à différents bidules, comme le micro:bit!

2. Installer le firmware Scratch sur le micro:bit

Toujours sur la page de préparation, il suffit de dérouler un peu pour trouver les instructions pour la préparation du Micro:Bit.

1. Connectez votre micro:bit à votre ordinateur.
2. Téléchargez le programme HEX qui permettra au micro:bit de parler à Scratch
3. Glissez ce programme de votre ordi à votre micro:bit, de manière très similaire à tout autre programme de micro:bit.

3. Connecter par Bluetooth au micro:bit

Par expérience, il est utile de faire une réiniItialisation du Micro:bit à ce moment-ci en pressant le bouton Reset au dos. Le micro:bit affichera alors son nom Bluetooth, une série de cinq lettres. Le mien s’appelle vazaz.

@Adafruit

On est maintenant prêt à installer l’extension Micro:bit dans Scratch.

1. Cliquez sur le gestionnaire d’extensions, en bas à gauche
2. Cliquez sur l’extension de Microbit
3. Laissez votre ordi trouver votre micro:bit (assurez-vous que votre ordi roule Bluetooth!)
4. Connectez à votre Micro:bit! Dans un environnement de classe, il faut s’assurer de bel et bien connecter au bon microbit, selon le nom affiché.
5. Lorsque connecté, le micro:bit cesse d’afficher son nom.

Les blocs Micro:bit sont maintenant accessibles pour des heures de plaisir!

Créer ses propres blocs dans MakeCode

MakeCode est l’environnement de programmation visuelle pour le Micro:bit .

Il est intuitif d’utilisation et, couplé au micro:bit, permet aux jeunes apprentis de développer des compétences en contrôle de senseurs et d’actuateurs en plus de la programmation.

On peut pousser MakeCode un peu plus loin en développant ses propres blocs. Deux approches sont disponibles:

• la catégorie “Fonctions”
• le fichier “custom.ts”

Le code

Imaginons ce petit bout de code représentant un micro:bit qui se réveille.  Tout d’abord, il est endormi, puis il baille aux corneilles. Ensuite, il prend conscience de son environnement à gauche et à droite pour être tout content de te voir. Sympa mais un peu long comme code, surtout si on a l’intention de le réutiliser ailleurs dans le programme. Mon but est d’avoir le même code au démarrage du micro:bit et aussi lorsque le senseur de lumière indique qu’il fait finalement clair.

Première méthode: créer un bloc fonction

La fonction est la méthode la plus accessible pour créer son propre bloc. On peut la faire purement avec des blocs, sans passer par la programmation textuelle. Elle est conceptuellement similaire à la création de blocs que l’on retrouve dans Scratch.

Cliquez sur “Avancé” pour ouvrir la section des catégories avancées, puis cliquez sur “Fonctions“.  Le tiroir qui s’ouvre ne comporte qu’un seul bloc: “Créer une fonction”.

Vous avez maintenant une boîte de dialogue vous demandant le nom de la fonction que vous voulez créer. Appelons-la “réveil”.

Un bloc de définition de fonction apparait alors sur le canevas de programmation et il suffit de glisser les blocs de réveil dans sa boîte. Par la suite, il est possible d’utiliser le nouveau bloc maintenant disponible dans la catégorie “Fonctions” pour exécuter la séquence de réveil.

Ceci nous donne un résultat final plus facile à lire, plus facile à comprendre, donc plus facile à modifier, expliquer et même maintenir:

Deuxième méthode, le fichier “custom.ts”

Cette deuxième méthode permet de cacher le détail de notre fonction, ce qui permet de simplifier ce qui est exposé dans le canevas de programmation mais surtout nous permet de réutiliser notre bloc d’un projet à l’autre!  Par contre, on se retrouve en mode textuel, et non graphique.

Avant de passer aux détails, gardons le code de notre fonction réveil.  Passez en mode “javascript” en cliquant sur le mot “Javascript” et copier le code de la fonction se trouvant entre les deux accolades.

Puis cliquez sur “Explorateur” pour ouvrir cette section et sur le “+” qui vient d’apparaitre.

Cliquez sur  “OK” pour confirmer la création du fichier custom.ts. Un nouveau fichier de code Typescript est maintenant créé.  Par défaut il contient des exemples que vous pouvez étudier pour mieux comprendre ce qui se passe mais pour l’instant, on va tout effacer pour y mettre le code suivant:

/**

* Blocs permettant d’afficher des expressions

*/

//% weight=100 color=#033fff icon=”\uf118″

namespace expressions {

    //% block

    export function réveil(): void {

// début du code copié

        basic.showIcon(IconNames.Asleep)

        basic.pause(2000)

        basic.showLeds(`

            # # . # #

            . . . . .

           . # # # .

           # . . . #

          . # # # .

       `)

        basic.pause(2000)

        basic.showLeds(`

            . . . . .

            # . . # .

            . . . . .

            . # # # .

            . . . . .

        `)

        basic.pause(1000)

        basic.showLeds(`

            . . . . .

            . # . . #

            . . . . .

           . # # # .

            . . . . .

        `)

        basic.pause(1000)

        basic.showIcon(IconNames.Happy)

        basic.pause(2000)

// fin du code copié

   }

}

Le code se trouvant entre les lignes // début du code copié et // fin du code copié provient directement de la fonction écrite précédemment, sans modification.

Retournez dans le mode “blocs” en cliquant sur le bouton “Blocs”.

Oh! Une nouvelle catégorie est apparue! Et cette catégorie contient, pour l’instant, un seul bloc, le bloc “réveil“. On peut maintenant l’utiliser pour recréer notre petit programme:

Le contenu du bloc “réveil” n’est plus exposé dans le canevas, ce qui simplifie la complexité pour l’utilisateur. L’apparition d’une nouvelle catégorie permet aussi de créer d’autres blocs d’expressions animées, suivant notre imagination.

Regardons maintenant le code. D’abord, c’est du typescript. Toute ligne commençant par // est un commentaire et sera ignoré par l’ordi et le micro:bit.  Sauf que… exception il y a.   Dans l’environnement MakeCode, les lignes qui débutent par //% servent à définir les catégories et les blocs.
Ici, nous avons deux de ces lignes. D’abord:

//% weight=100 color=#033fff icon=”\uf118″

Cette ligne permet de contrôler l’apparence de notre nouvelle catégorie. Le “weight” indique l’importance de la catégorie. Plus ce chiffre est proche de 100, plus la catégorie sera haute dans la liste. On ne peut pas, à ma connaissance, être en haut de la catégorie “Basique“.  Le code “color” prend un code de couleur html, précédé de #0 (le chiffre zéro, plutôt que la lettre ‘o’).  Le code “icon” identifie quelle icône utiliser pour les blocs de la catégorie. Les icônes sont limitées à ce qui se trouve dans Font Awesome.

La deuxième ligne importante est toute simple:

//% block

Elle indique que la fonction suivante doit être transformée en bloc par MakeCode. Comme notre fonction est simple, elle ne prend pas de paramètres et ne retourne pas de valeur, on peut se contenter de cette ligne.  Il est toutefois possible de définir des blocs bien plus complexes en suivant les informations en anglais de MakeCode.

Voilà! Vous avez créé votre propre catégorie et votre premier bloc! L’information sera sauvé à l’intérieur de votre projet mais je vous conseille d’en garder une copie localement. Ceci vous permettra de la copier/coller dans tout nouveau projet où vous désirez utiliser votre catégorie fait maison.

À vous le monde maintenant!