Créer ses propres blocs dans MakeCode

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

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:

microbit-reveil.png

  • 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”.

fonction.png

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

renommer

blockreveil.png

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:

microbit-complet

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.

javascript

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

explorateur

ajouter_custom.png

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”.

notrebloc

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:microbit-complet2

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!

 

 

Advertisements