Microsoft MakeCode pour Adafruit est un éditeur de code de base accessible en ligne. Il est composé d'un éditeur de blocs qui ressemble à Scratch ou Code.org. MakeCode a aussi une version en JavaScript pour les utilisateurs plus avancés.  Essayez-le maintenant au:  https://makecode.adafruit.com/ !

Certaines des charactéristiques de MakeCode sont:

  • éditeur de code en ligne: ne requiert aucune installation.
  • multi-plateforme: fonctionne avec la plupart des navigateurs actuels aussi bien sur un petit cellulaire que sur un écran géant.
  • compile dans le navigateur: le compilateur fonctionne à même votre navigateur, il est rapide et peut fonctionner sans être en ligne. 
  • blocs + JavaScript: déplacez et déposez les blocs ou  codez en JavaScript , MakeCode permet de passer de l'un à l'autre facilement.
  • travailler sans être en ligne: une fois que vous avez accédé à l'éditeur, il reste caché dans votre navigateur.
  • événement basé sur une action: il réagit aux boutons actionnés, aux mouvements effectués et plus encore.

MakeCode supporte présentement Adafruit Circuit Playground Express. Pour les autres cartes informatiques de base, comme l'Adafruit Metro M0, essayez https://maker.makecode.com .

MakeCode fonctionne pour la version Express du Circuit Playground et non pas pour la version Classique.

Parts

Circuit Playground Express
Circuit Playground Express is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and...
$24.95
In Stock
Circuit Playground Express - Base Kit
It's the Circuit Playground Express Base Kit! It provides the few things you'll need to get started with the new
$29.95
In Stock
USB cable - USB A to Micro-B
This here is your standard A to micro-B USB cable, for USB 1.1 or 2.0. Perfect for connecting a PC to your Metro, Feather, Raspberry Pi or other dev-board or...
$2.95
In Stock

L'éditeur des blocs est la façon la plus facile pour commencer avec MakeCode.  Vous pouvez sélectionner à partir d'une liste de catégories les blocs. Ensuite vous n'avez qu'à les glisser ou les déposer dans votre espace de programmation . Chaque fois que vous faites un changement aux blocs, le simulateur partira automatiquement et démarrera votre code. Vous pouvez tester vos programmes à même le navigateur! 

  • essayez notre tutoriel par où commencer, celui-ci vous montrera comment faire un programme qui produira le son et les effets lumineux d'une sirène de police. 
  • essayez un de nos projets pour découvrir les nombreuses composantes du Circuit Playground. 
  • notre façon préférée d'apprendre consiste à regarder les capsules MakeCode Live avec John Park. Vous pouvez faire ceci ou bien en regardant la liste des vidéos enregistrées, ou en regardant en directe les mardis à 15h00 (heure de l'est) sur le canal d'Adafruit sur Youtube
  • consulter abondament la documentation.

Blinky!

Découvrons comment MakeCode fonctionne en construisant un programme simple qui fait clignoter les 10 merveilleuses NéoPixels.

Pour produire un effet de lumières clignotantes (''blink''), nous commençons par mettre un bloc (''show ring'') et assignons la couleur rouge à toutes les LEDs de l'anneau. Nous ajoutons sous le bloc déjà fait le bloc pause (''pause 100 ms'') . Nous ajoutons sous ce dernier, un deuxième bloc de LED (''show ring'') en assignant cette fois-ci la couleur grise (changer la couleur rouge à la couleur grise) et terminons le tout en mettant un dernier bloc pause (''pause 100 ms''). Il nous reste à glisser le tout dans un bloc forever (répéter à jamais) et notre effet de lumières clignotantes est créee.

Trouvons et assemblons les blocs que nous devons utiliser pour que le Circuit Playground produise l'effet désiré comme mentionné dans la description ci-dessus:

  • forever va faire fonctionner les blocs dans une boucle (''loop'') en ayant une pause de 100ms entre les deux effets visuels (ceci est similaire au loop dans Arduino).
  • show ring détermine la couleur des 10 NéoPixels entre l'action précédente et la prochaine action.
  • pause va effectuer un temps d'arrêt sur 100ms. Si d'autres évènements existent ou bien si une boucle (''loop'') sont en cours, ils auront l'opportunité de fonctionner à ce moment.

Voulez-vous sélectionner ou changer de couleurs? Le bloc (''show ring'') vous permets de sélectionner la couleur désiré dans la palette de couleurs, vous n'avez qu'à cliquer sur chacune des dix NéoPixels. 

Comment désactiver les NéoPixels?  Le gris qui se trouve au milieu dans la palette de couleur représente les NéoPixels désactivés. Sélectionnez le gris dans la palette de couleurs et ensuite cliquez sur les dix NéoPixels.

Vous pouvez voir le programme Blinky en action dans l'éditeur MakeCode ci-dessous. Vous pouvez aussi observer comment faire pour que les blocs soient imbrigués l'un dans l'autre. En cliquant sur le point d'interrogation sur la boîte, une bulle d'information apparaît qui indique ce que le bloc fera.

Dans la prochaine section, nous allons télécharger le code de Blinky sur le Circuit Playground Express! 

Télécharger votre code sur votre carte informatique est très facile avec MakeCode. Vous n'avez pas besoin d'installer aucun logiciel sur votre ordinateur et le procédé est fait en deux étapes:

  • Étape 1: Branchez votre carte à un des ports USB et entrez dans le mode (bootloader)
  • Étape 2: Compilez et téléchargez le fichier .uf2 sur votre carte informatique

Nous allons vous indiquer comment effectuer ces deux étapes.

Étape 1: mode (bootloader)

Reliez un cable USB de votre carte à votre ordinateur en utilisant un des ports USB disponible et entrez dans le mode (bootloader). Pesez sur le bouton (reset) une fois pour mettre votre carte en mode (bootloader).

Si c'est la première fois que vous utilisez MakeCode ou que vous avez déjà installé Arduino ou CircuitPython sur cette carte vous devrez peut-être presser deux fois le bouton (reset) pour activer le mode bootloader.

Quand le Circuit Playground Express passe au mode bootloader, toutes les LEDs deviendront brièvement rouges pour ensuite devenir toutes vertes. Assurez-vous que toutes les LEDs clignotent en rouges avant de passer aux verts. Sur votre ordinateur vous devriez voir apparaître une nouvelle partition amovible qui se nomme: "CPLAYBOOT".

 Si les LEDs restent toutes rouges, il y a deux explications possibles: votre ordinateur complète les mises à jour (si c'est le cas, svp. attendez une minute, Windows prends parfois du temps pour installer les mise-à-jours) ou vous avez un mauvais branchement USB.  Si vous continuez d'avoir des LEDs rouges - essayez un nouveau cable USB (assurez-vous que votre câble  USB n'est pas seulement unidirectionel (charge seulement), vous devez être capable aussi de transférer le data (bi-directionelle, ou bien essayez un port USB différent.

circuit_playground_drives.png

circuit_playground_drivesmac.png

Quand les LEDs sont toutes vertes, vous devriez voir CPLAYBOOT apparaître dans votre liste de partitions dans votre explorer.

Nous sommes maintenant prêt à compiler notre code blinky et à le télécharger sur notre carte!

Étape 2: Compiler et télécharger

Commençons par vérifier si notre code compile bien dans MakeCode.

Il y a un similateur à l'intérieur de MakeCode qui charge et fait fonctionner votre code automatiquement quand il recommence. Ceci est une façon facile pour s'assurer que notre code compile et l'imite avant de le mettre sur la carte. Le bouton recharge le similateur avec la dernière version du code. 

Si vous voyez apparaître le message d'erreur suivant: "we could not run this project", veuillez vérifier votre code pour des erreurs possibles.

Si votre code fonctionne dans le similateur, il est maintenant temps de le télécharger sur le vrai! Cliquez le bouton "Download"(télécharger). Il y aura un fichier .uf2 qui sera généré et téléchargez-le dans votre ordinateur (le fichier UF2 est un format de fichier dédié pour les microcontrolleurs qui peut se télécharger à l'aide d'un branchement à un port USB).

Faites les étapes mentionner ci-dessous pour copier votre programme (fonctionne peu importe le système d'exploitation utilisé).

  1.  Assurez-vous que votre carte est en mode ''bootloader''
  2. Trouvez le fichier .uf2 généré par MakeCode dans votre système d'exploitation (par défaut ''téléchargement''). Copiez-le sur le volume "CPLAYBOOT".
  3. Le LED du status sur la carte clignotera pendant que le fichier est transféré sur celle-ci.  Quand le transfère sera complété, la carte effectuera une réinitialisation automatique et votre programme sera enclenché, comme vous avez vue sur le similateur!
Sur votre Mac, vous pouvez ignorer, sans aucune inquiétude, le message: "Disk Not Ejected Properly" qui pourrait apparaître après avoir copier le fichier .uf2.

Windows: ouvrir l'explorateur Window Explorer (touches: Windows + E ) et localiser le fichier "blinky.uf2" qui a été généré. Il est probablement dans votre dossier Téléchargement (Downloads)!

Vous pouvez copier/coller le fichier dans le volume CPLAYBOOT ou bien le glisser/poser comme démontré dans le fichier GIF ci-dessous.

macOS: Ouvrez le (''Finder'') et localisez le fichier "blinky.uf2". Vous pouvez copier/coller le fichier dans le volume CPLAYBOOT ou bien le glisser dans celui-ci.

Si vous voulez éviter cette façon de copier: Vous pouvez télécharger (''download'') votre code directement sur votre carte. Pour faire ceci: changez l'endroit ou vous le téléchargerez dans  Chrome, Firefox, Safari ou Opera dans le dossier principal sur votre volume "CPLAYBOOT".

Exécuter MakeCode qui est déjà téléchargé.

Si vous débranchez votre carte pour ensuite la rebranchée à votre ordinateur, il est probable que dans ce cas le programme ne s'exécutera pas automatiquement.  Si tout les NéoPixels sont verts, vous n'avez qu'à presser le bouton (''reset'') et votre programme s'enclenchera. 

Vous voulez changer le programme ** Blinky pour afficher des couleurs différentes, ou faire jouer du son? Éditez le programme sur votre Circuit Playground est très facile! 

Extraire votre code de votre Circuit Playground

Le fichier .uf2  (CURRENT.UF2) que vous avez crée en cliquant sur le button du compilateur dans MakeCode contient aussi le code source de votre programme!

Vous pouvez ouvrir ce fichier dans MakeCode en le déplaçant et en le relâchant à l'intérieur d'un navigateur pour l'éditer. 

Partager

Vous pouvez aussi partager votre code en cliquant sur le bouton share. Après la confirmation, MakeCode va créer un court et unique URL pour votre code. Quiconque qui connaît le URL de ce code pourra le recharger de son côté.

Ces URLs peuvent être intégrés dans vos blogs ou vos pages web! Vous devez seulement copier le URL dans votre éditeur de texte (s'il supporte l'intégration), le tout sera chargé automatiquement dans votre page.

Si vous avez déjà de l'expérience de codage ou bien vous vous sentez prêt à franchir la prochaine étape, MakeCode permets la programmation en JavaScript avec toutes ses particularités et ceci à même le navigateur!

Essayez-le!

Vous pouvez aussi passer de la programmation en blocs  à la  programmation en JavaScript en cliquant sur le bouton situé dans le haut.

MakeCode a aussi une grande variétés d'applications qui permette des fonctionnalités supplémentaires qui ne sont pas disponible dans les différents navigateurs.

Le magazin ''Windows Store''

Le MakeCode pour Adafruit Windows Store app.

  • *Le très rapide ''flashing HID de base'' *: plus besoin de glisser et déposer.
  • Lire des messages de ''debug' dans l'éditeur (les messages ''debug'' sont envoyés par HID et non pas par CDC Uart/Serial)

Node.JS

Le (''open source'') GitHub repo contient les instructions pour faire marcher un ''node.js'' local sur le serveur web avec HID ''flashing'' et ''monitoring'' en série.

Téléchargement en un clic

Vous en avez assez de faire glisser et de déposer vos fichiers UF2 encore et encore? Alors le téléchargement WebUSB est pour vous! Avec WebUSB, vous pouvez télécharger votre code directement sans avoir à enregistrer un fichier UF2 pour ensuite le déposer sur la clé USB. Il suffit de brancher le câble USB sur votre ordinateur et de télécharger le code autant de fois que vous le souhaitez!

Éléments nécessaires!

Vous aller avoir besoin de quelques éléments avant de pouvoir utiliser le WebUSB.

  • Vous allez devoir utiliser la dernière version du navigateur lnternet Google ChromeFirefox, Safari, Opera, Edge, etc ne supporte pas le WebUSB pour le moment.
  • Seulement les versions à partir de Chrome 68 et plus supporte le WebUSB.
  • Utilisez un des systèmes d’exploitations suivants: Window 10, Mac OS X ou Linux. Windows 7 et 8 ne sont pas supportés!

Mise à jour du « bootloader ».

Vous allez devoir aussi mettre à jour votre Circuit Playground Express (cette étape ne doit être exécuté qu'une seule fois) en téléchargeant le dernier « bootloader » pour le Circuit Playground Express. Depuis juillet 2018, nous installons toujours le plus récent « bootloader » sur les Circuit Playground Express mais au cas que le vôtre soit une version moins récente, il est toujours mieux de vérifier et d'installer le tout dernier « bootloader »!

Faire une mise à jour du « bootloader » est aussi facile que de "flasher" un programme MakeCode. Simplement pressez le bouton "reset" situé sur la carte une fois (ou deux fois) pour que toutes les néopixels deviennent vertes. Le volume CPLAYBOOT apparaîtra dans votre système d'exploitation. Glisser la version récente du fichier « bootloader uf2 » que vous avez téléchargé en pressant le bouton "reset" dans le volume CPLAYBOOT. Ce fichier uf2 contient le programme qui permettra l'accès au « bootloader » déjà sur la carte, ensuite ce dernier sera remplacé par la version que vous avez téléchargé précédemment et finalement l'accès au nouveau « bootloader » sera bloqué. Ceci effaçera tout le code présent sur la carte, que ce soit CircuitPython ou Arduino, alors assurez-vous de sauvegarder les programmes que vous voulez garder avant d'effectuer la mise à jour!

L'URL spécial de MakeCode avec WebUSB

Dès que vous avez mise à jour votre carte, vous allez devoir vous rendre sur l'URL spécial de MakeCode avec WebUSB. Utilisez le bouton vert ou effectué un copier/coller de l'adresse URL complète ci-dessous pour la mettre dans votre navigateur: https://makecode.adafruit.com/?webusb=1#editor

Projets & extensions

Tout vos programmes déjà sauvegardés devraient apparaître sur le site de MakeCode donc vous n’avez pas à copier aucun des programmes fait avant.  Toutefois, si vous aviez installé des extensions, vous devrez les installées de nouveau. Ceci peut être fait en sélectionnant la bonne extensions dans le menu «extensions».

La première configuration.

Lorsque vous avez Chrome et le URL du MakeCode beta ouvert, vous devrez télécharger un projet dont l’espace de programmation sera vierge sur le Circuit Playground Express. Pour sauvegarder ce projet, vous n’avez qu’à cliquer sur le bouton rose «Download», le fichier UF2 de votre programme sera sauvegarder sur votre disque dur. Pour le mettre sur votre Circuit Playground Express, vous devez d’abord mettre le Circuit Playground en mode « bootloader » en pesant une (ou deux) fois sur le bouton «reset », vous verrez les néopixels passer du rouge au vert lors de cette opération.  Copiez votre fichier UF2 de votre disque dur sur le volume «CPLAYBOOT» qui apparaît dans la liste de tous les différents volumes présents sur votre système lorsque vous êtes en mode «bootloader ». Lorsque le fichier UF2 se copie sur le volume «CPLAYBOOT» vous observerez que la lumière sur la carte D13 clignote. À la fin du processus de copie, il y aura automatiquement un « reset » qui se fera.  

L’étape mentionnée ci-dessus est requise pour avoir accès aux fonctionnalités de WebUSB sur Google Chrome. Vous n’avez qu’à la faire qu’une seule fois! Si vous avez bien fait la copie du fichier UF2 en le glissant et déposant manuellement sur la carte sur le volume «CPLAYBOOT» cette étape ne devrait plus être requise.

Appariement des dispositifs

Lorsque vous avez terminé la copie du fichier UF2 initiale sur le dispositif, cliquez sur l’icône de la roue dentelée dans le coin supérieur droit, à côté du logo Microsoft. Trouvez le dispositif que vous voulez (« pair ») dans le menu («Pair Device») et cliquez dessus.

Brancher des dispositifs PXT

Après avoir cliquer sur ''Pair device'', une fenêtre d'info devraît apparaître sous la boîte de l'adresse URL du navigateur. Cliquez sur le bouton bleu (''connect'') pour établir la communication entre votre dispositif PXT et votre navigateur. 

Votre dispositif est ''Paired!''

Vous allez voir un message près du bas de votre écran vous avisant que votre dispositif a réussi à être branché ''paired''. Essayez-le et cliquez sur le gros bouton ''download'' pour télécharger votre programme!

Notes & pensées.

Vous n'avez pas à refaire le ''pairing'' à chaque fois que vous débranchez votre câble USB. Toutefois, si vous réalisez que le bouton de téléchargement (''download'') ne fonctionne plus ou bien semble être gelé, vous pouvez essayer de refaire les étapes mentionnées ci-dessus pour réactiver le ''pairing'' avec votre dispositif de nouveau. Si vous ne pouvez pas rétablir la connection, essayez un câble USB différent. Le câble USB doit être capable de transférer le ''data''.  Si vous avez toujours des problèmes, utilisez le lien ''support'' pour obtenir de l'aide, celui-ci est en dessous du point d'interrogation près de l'icône d'une roue dentelée située dans le coin supérieur droit.

Ce guide permets de vous initier à la programmation par blocs mais il est bien de mentionner brièvement d'autres bonnes caratéristiques de MakeCode...

Paquets sur GitHub

Des blocs et extensions additionels sont disponibles sur GitHub. Vous n'avez qu'à sélectionner le dialogue Add Package dans l'éditeur MakeCode. Ces paquets peuvent contenir du JavaScript, du C++ et oui! ASM! https://makecode.adafruit.com/packages

Nous sommes code source libre ('Open Source') sur GitHub

Allez sur https://makecode.com/about pour obtenir de l'information additionelles sur les différents entrepôts de données (''repos'').

Nous avons ''crowd-sourced'' traductions.

Que vous vouliez coder en Klingon, dans votre langue maternelle ou toutes autres langues que l'anglais, MakeCode supporte la traduction ''crowd sourced'', rendez vous au: https://makecode.adafruit.com/translate.

This guide was first published on Aug 26, 2020. It was last updated on Aug 26, 2020.