MakeCode voor micro:bit 2020

MakeCode for microbit 2020 beta.pngIn juni 2020 is er een nieuwe versie van de MakeCode programmeeromgeving voor micro:bit geïntroduceerd. Daarmee wordt een aantal spectaculaire vernieuwingen beschikbaar, zoals:

  • naast BlokEditor en JavaScript nu ook Python, waarbij met één klik van de ene programmeertaal naar de andere gewisseld kan worden
  • een volwaardige debugger voor het makkelijk testen van je code en het opsporen van fouten
  • nieuwe muziek blokken, zoals een volumeregelaar en een melodie-editor
  • meer mogelijkheden met nieuwe blokken voor lussen
  • functies die ook een (reken-)resultaat kunnen teruggeven aan je script
  • een multi micro:bit mogelijkheid voor het testen van zenden en ontvangen in één editor
  • directe toegang tot de zogenaamde GitHub omgeving, een online plek om je code te bewaren, versies bij te houden en te delen met anderen
  • diverse verbeteringen van de editor

(klik op een onderwerp of scroll naar beneden voor meer informatie over de vernieuwingen)

Een uitgebreide kennismaking met de nieuwe editor wordt geboden in de Engelse-talige video (57:39 min). 
NB: de uitleg begint in deze video pas na 6:00 minuten.

 webinar MakeCode for micro:bit 2020 (beta)    

 

Python

Je kon altijd al programmeren in de programmeertaal Python op de micro:bit. Maar dan in een aparte editor. Nu is Python volledig geïntegreerd in de MakeCode ontwikkelomgeving. Daarmee is het niet alleen mogelijk om in Python te programmeren, maar ook om te wisselen tussen Blokken, JavaScript en Python, met slechts één klik. Je kunt dus bijvoorbeeld beginnen met een script dat bestaat uit blokken, en eenvoudig zien hoe dit er in Python (of JavaScript) uitziet. Je kunt altijd weer terugwisselen, zelfs nadat je in de Python omgeving aanpassingen gemaakt hebt.

Kies bij het aanmaken van een nieuw project of je een programma gaat maken waarmee je kunt wisselen tussen Blokken, JavaScript en Python, of kies voor alleen Python, of alleen JavaScript:

MakeCode keuze taal.png   MakeCode wissel taal.png

Als je hebt gekozen voor de meertalige versie van de editor kun je boven in de menubalk wisselen tussen de verschillende talen.
 

Zowel in de JavaScript, als in de Python editor zijn de blokken uit de Blokken editor nog steeds beschikbaar en kunnen op het canvas naar binnen gesleept worden. Zelfs wordt bij elk blok een korte uitleg gegeven van de functionaliteit van dat blok. Sleep het blok op het canvas, en laat de muis los op de plek waar je de code wilt hebben. Bij het loslaten van de muisklik wordt het blok onmiddelijk omgezet naar tekstuele code in JavaScript, resp. Python.

MakeCode blokken.png



MakeCode Python code 2.png

Als je in de JavaScript of de Python editor iets hebt geprogrammeerd dat niet te vertalen is naar Blokken, bijvoorbeeld omdat daarvoor geen blokken beschikbaar zijn, dan wordt een code-blokje weergegeven in de Blokken editor dat aangeeft dat er een stukje JavaScript resp. Python code ingebouwd is.

ga terug naar overzicht

Debugger

Een debugger is een hulpmiddel om je code te testen en eventuele fouten te zoeken. Je opent de debugger door op het debug icoontje (een kevertje: 'bug') onder de simulator te klikken:

MakeCode debugger icon with arrow.png

De debugger kun je bedienen met de volgende knoppen:

MakeCode debug commands.png 

  • "pijl": ga één stap (regel) verder in je code
  • "start/pauze": laat je code stoppen en weer verder gaan op de plek in de code die op dat moment uitgevoerd werd
  • "restart": laat de code weer van voren af beginnen
  • "slak": voert de code uit in slow-motion

In de meeste gevallen laat je de code doorlopen tot een te onderzoeken plek, druk dan op pauze en ga vervolgens stap-voor-stap verder met het pijltje. Elke keer wordt er één regel code uitgevoerd, en dan stopt het proces weer. Je ziet de waarden van alle variabelen die ze op die plek in de code hebben. Ga een stap verder, bekijk de waarden van de variabelen en controleer of dit de bedoeling van jouw code was.

In de editor zie je een gele omranding om de coderegel waar je het programma gepauzeerd bent. Als je op 'stap' klikt gaat de code slechts één regel verder en zie je de gele omranding ook verspringen naar de volgende regel.

MakeCode debug mode 2.png                  MakeCode pauze location.png

Ook kun je een coderegel aanvinken met een rode stip. Je hebt nu een zogenaamd 'break point' gecreëerd. Als je op start drukt wordt het programma uitgevoerd totdat het break point komt, bij de regel(s) met de rode stip, daar wordt het programma gepauzeerd en kun je de waarden van de variabelen controleren. Je mag meerdere break points maken. Door nogmaals op de stip te klikken, wordt deze weer grijs en verdwijnt het break point.

ga terug naar overzicht

Nieuwe muziek blokken

Een aantal nieuwe blokken vergroot de mogelijkheden voor de programmeur. Met het nieuwe blok 'set volume' kun je het geluidsniveau van de op de micro:bit aangesloten luidspreke regelen met waarden tussen de 0 en 255. Ook is er een nieuwe manier geïntroduceerd om makkelijk zelf een melodie te maken met behulp van de melodie-editor. Gebruik het blok 'play melody' en klik op de staafjes. Je kunt nu je eigen melodie invoeren, of een melodie kiezen uit de 'gallery'. In onderstaand voorbeeld zijn de nieuwe muziekblokken gebruikt.

MakeCode muziek.png

ga terug naar het overzicht

Nieuwe blokken in lussen

In het menu 'lussen' zijn twee nieuwe blokken toegevoegd.

  • onderbreken: stop met de gehele lus en ga verder na de lus
  • continue: sla deze keer over, maar ga wel verder met de lus

In een voorbeeld wordt het duidelijker:

MakeCode lussen.png

Onder knop A wordt een lus uitgevoerd met een index die van 0 tot 9 loopt. De lus wordt dus 10x doorlopen. Elke keer dat de lus doorlopen wordt, wordt de teller met 1 opgehoogd. Echter als de index gelijk is aan 5 wordt het blok 'onderbreken' uitgevoerd. Het programma springt uit de lus en gaat verder met 'toon nummer'. Omdat de lus voortijdig gestopt is, zal de teller niet verder zijn opgelopen dan 5. Als het 'als dan..' blok niet was opgenomen in de code, zou de teller opgelopen zijn tot 10.

Onder knop B wordt dezelfde lus uitgevoerd met index van 0 tot en met 9. Ook hier wordt de lus 10x doorlopen. Echter als de index gelijk is aan 5 dan wordt het blok 'continue' uitgevoerd. De lus doet verder niets meer in die doorloop en stapt naar de volgende doorloop. Bij de volgende doorloop is de index 6 en wordt het blok 'continue' niet meer uitgevoerd. Dit gaat door totdat de index 9 is. Omdat de lus alleen niet verder werd uitgevoerd toen de index 5 was, heeft het verhogen van de teller dus 1x over geslagen en zal de teller aan het einde zijn opgelopen tot 9.

terug naar het overzicht

Functies kunnen nu retour-waarden hebben.

Functies worden normaal gebruikt om een stukje code uit te voeren dat meerdere malen in je programma uitgevoerd moet worden. Je hoeft die code dan niet meerdere malen te programmeren als je die in een functie stopt. Je hoeft daarna alleen maar de functie aan te roepen. Nieuw is nu dat de functie ook een resultaat van bijvoorbeeld een berekening terug kan geven aan het programma:

In het voorbeeld hierboven is een functie gemaakt met de naam "meet het licht". De functie meet 2x per seconde het lichtiveau zolang dat laag is (lager dan 100). Komt het gemeten lichtniveau boven de 100,  wordt de waarde 'lichtniveau' teruggegeven aan je script door middel van het 'return' blok en stopt de functie. In de lus 'de hele tijd' wordt de functie aangeroepen, en zodra de functie afgelopen is wordt de teruggegeven waarde van het lichtniveau op het scherm getoond. De return waarde van de functie is beschikbaar door middel van de waarde: 'aanroep meet het licht'.

MakeCode function return 2.png

Dit proces herhaalt zich in het voorbeeld middels de 'de hele tijd' lus.

ga terug naar het overzicht

MakeCode multi

Met de MakeCode multi editor kun je 2 micro:bis tegelijk programmeren in één window. Dit is handig voor als je een toepassing programmeert waarin een zender en een ontvanger samenwerken. Je kunt in het linker deel van het window de zender programmeren, en in het rechter deel de ontvanger. Als de zender iets verzendt met de 'radio' functies, dan zal de ontvanger in het rechter deel van de editor dit ook ontvangen. Het ziet er als volgt uit:

MakeCode multi 1.png

Klik vervolgens op de beide simulators om deze beeldvullend te maken. De simulators worden nu actief, en de radiosignalen worden doorgegeven:

MakeCode multi 3.png

Je kunt de MakeCode multio omgeving opstarten met https://makecode.com/multi# of door te klikken op deze knop multi   

ga terug naar overzicht

GitHub omgeving

GitHub omgevingen worden door professionele programmeurs gebruikt om hun code op te slaan. Het mooie van GitHub is niet alleen dat je je code op een centrale plaats (in de cloud) kunt bewaren, maar ook dat je die kunt delen met anderen. Je kunt je vrienden een link sturen naar de code die jij gemaakt hebt. Ook kun je verschillende versies van je code bewaren, zodat je altijd ook weer terug kunt grijpen naar een eerdere versie van je programma. Er wordt een hele versie-geschiedenis bijgehouden. Je kunt op deze manier ook samenwerken met anderen aan dezelfde code, bijvoorbeeld als het wat ingewikkelder wordt en je de taken verdeelt. 

MakeCode github 1a.png

 

De nieuwe MakeCode for micro:bit 2020 geeft direct toegang tot de GitHub om ook je code voo de micro:bit daar op te slaan, bij te houden en te delen. Klik hiervoor op het GitHub icoontje onderaan het scherm.

 

NB: de hele GitHub omgeving is Engelstalig.

Je moet eerst een account aanmaken om op GitHub te kunnen aanmelden. Klik op het vraagtekentje en je wordt naar de website geleid waar je een account kunt aanvragen. Na het aanvragen krijg je een email waarin je je aanvraag kunt bevestigen.

MakeCode github 2.png     MakeCode github 3.png

Als je voor de eerste keer inlogt vanuit de MakeCode omgeving wordt nog gevraagd om MakeCode te autorizeren om toegang te krijgen tot jouw GitHub. De GitHub staat middels jouw eigen account en is dus persoonlijk, en met de autorisatie geef je de MakeCode editor toestemming om code te publiceren onder jouw GitHub account.

Je kunt nu een zogenaamde repository aanmaken, dat is een opslagplaats voor jouw project. Je kunt meerdere repositories hebben, en binnen elke repository worden versies bijgehouden etc. Geef je repository een passende naam, kies of je de repository toegankelijk wilt maken voor alleen jezelf, of ook voor anderen, bijvoorbeeld t.b.v. een samenwerkingsproject, en klik op 'ga je gang!'. Je repository wordt nu aangemaakt (dit duurt even). Je ziet nu een vinkje verschijnen naast het GitHub icoontje onderaan het scherm naast de naam van je script.

Wanneer je nu nogmaals op het repository icoontje klikt, kom je in de repository omgeving terecht en zie je dat jouw script daar is gepubliceerd.

Een goed instructie voor het gebruik van GitHub met de MakeCode editor is te vinden op: https://makecode.microbit.org/github/getting-started   

Als je in de MakeCode editor een script wilt openen dat je eerder in GitHub hebt opgeslagen, ga dan naar het startscherm van MakeCode en klik op 'importeren'. Je krijgt dan een pop-up scherm waar je kunt kiezen voor het importeren van een GitHub repository:

MakeCode github 4.png

ga terug naar het overzicht

Diverse verbeteringen

Naast de hierboven genoemde toevoegingen is er nog een aantal verbeteringen aangebracht in de editor:

Samenvouwen: blokken zoals 'wanneer knop A wordt ingedrukt', 'de hele tijd', 'functie' en in feite alle blokken met haken, kunnen worden samengevouwen (Engels: collapse). Zo kun je ruimte creëren op je canvas om meer overzicht te krijgen over je script als het wat veel wordt voor één scherm. De blokken vouwen dan samen, maar de code blijft bewaard, je kunt de blokken op elk moment weer openvouwen:

  • rechter-muis-klik op het blok, en kies dan blok samenvouwen
  • rechter-muis-klik op het canvas, kies blokken samenvouwen, en alle blokken vouwen samen
  • klik op het pijltje in het blok om de betreffende blok weer open te vouwen

In onderstaand voorbeeld zijn 'bij opstarten' en 'wanneer knop A wordt ingedrukt' samengevouwen en 'wanneer knop B wordt ingedrukt' is opengevouwen:

MakeCode collapse 2.png

Stip naar stip verbindingen: om bij het slepen en loslaten van blokken meer duidelijkheid te geven over waar deze terecht zullen komen, wordt deze aangegeven door het blok en de bedoelde locatie waar je het in wilt laten vallen allebei geel omrand, en met rode stippen met een gele verbindingslijn aangegeven:

MakeCode dot to dot cropped.png

Direct downloaden naar de micro:bit: het direct downloaden van een script naar een micro:bit via de USB kabel kon al langer, door de micro:bit eerst te koppelen en daarna op de download button te klikken, Zie ook de tips and trics, 'download script met één klik'.

Het koppelen van een micro:bit is nu makkelijker gemaakt. Je kunt op de 3 puntjes klikken naast de download knop. Bovendien wordt met het USB symbooltje, links naast de tekst 'download' aangegeven of de micro:bit een koppeling heeft met MakeCode.

MakeCode download 2.png

ga terug naar het overzicht