In Blockly programmeer je met blokken. Programmeren met blokken? Ja, je leest het goed. Ideaal dus om te leren programmeren. Je hoeft niet gelijk moeilijke code te schrijven, maar je kan eenvoudig met blokken al programmeren. Het is vooral bedoeld voor kinderen, maar voor volwassenen kan het ook heel leerzaam zijn. We gaan met Blockly onder andere een leuk spelletje spelen (Maze/doolhof) om het beter te begrijpen. Ook gaan we code in allerlei programmeertalen genereren met Blockly, in een eenvoudig voorbeeld. Tot slot geven we je advies over de beste manier om Blockly of soortgelijke software te leren voor kinderen. Lees lekker verder!
Wat is Blockly en wat kan je ermee?
Met Blockly is het mogelijk om op een grafische manier te programmeren. Door middel van blokken geef je instructies aan een computer. Dit is makkelijker dan programmeren in een programmeertaal zoals Java, waarin je echte code schrijft.
Is programmeren met blokken wel echt programmeren? Jazeker! Programmeren is simpelweg instructies/opdrachten geven aan een computer. Of je dat nu in blokken doet of in code, het principe blijft hetzelfde.
Veel kinderen leren met Blockly en/of andere grafische software de basisbeginselen van het programmeren. Blockly is vooral bedoeld voor kinderen vanaf 8 jaar. Voor volwassenen die willen leren programmeren, is Blockly ook geschikt.
Blockly is een project van Google en de eerste release was in 2012. Het is een client-side (Voorkant, wat de gebruiker ziet) JavaScript library, gebaseerd op blokken. De software is gratis en open source.
Misschien ken je Scratch al? Blockly lijkt heel erg op Scratch. In zowel Scratch als Blockly kan je instructies geven door middel van blokken aan een computer en ze worden vooral vaak voor educatieve doeleinden gebruikt.
Code genereren en gebruiken
Naast educatieve doeleinden zou je Blockly ook kunnen gebruiken voor web development. Met Blockly kan je JavaScript genereren en stukken JavaScript code gebruiken voor bijvoorbeeld je website of webapp.
Daarnaast kan je met Blockly ook de volgende code genereren:
- Python
- PHP
- Lua
- Dart
- XML
Je zou dus in een Python programma stukken code kunnen gebruiken die zijn gegenereerd uit Blockly instructies. Blockly is volledig client-side gericht, maar je zou ook stukken PHP code, gegenereerd uit Blockly instructies, kunnen gebruiken in de back-end (Achterkant, wat de gebruiker niet ziet).
Datzelfde geldt voor Lua, Dart en XML. Hierin kan je ook gegeneerde stukken uit Blockly gebruiken.
Blockly editor in je website of app
Zoals je al begreep, wordt Blockly vooral gebruikt voor educatieve doeleinden. In een website kan je een Blockly editor integreren. Met bijvoorbeeld een educatieve game, leer je de gebruikers om de basis van het programmeren te leren, met Blockly.
Ook is het mogelijk om Blockly in een Android of iOS app te integreren. Op internet zijn er echter ook leuke games te spelen om met Blockly om te leren gaan. Hier gaan we naar kijken in het volgende hoofdstuk.
Hoe werkt Blockly?
Ben je geïnteresseerd om een Blockly editor in je eigen website en/of app te gebruiken? Dan is deze handleiding op de officiële website van Google interessant om te lezen. Hier houden we ons verder niet mee bezig in dit artikel.
Maze (Doolhof)
Laten we eerst simpel beginnen en kijken hoe Blockly werkt. Dit doen we aan de hand van een leuk spelletje (Maze/doolhof). Op deze website staat een maze/doolhof spelletje.
Ben je al op de website? We gaan daar namelijk 2 levels doorlopen. Door middel van Blockly instructies, kan je door het doolhof komen en naar de volgende levels gaan.
In het eerste level zie je dit:
Het eerste level is heel eenvoudig, maar zo begrijpen kinderen goed hoe het werkt en hoe ze verder moeten. Het poppetje wijst naar rechts en moet 2 instructies “vooruit” krijgen om bij zijn bestemming te komen. Pak het middelste blokje “vooruit” en sleep het onder het andere “vooruit” blokje. Daarna klik je op “Programma uitvoeren”.
Gelukt? Als het gelukt is ben je in het tweede level en dat ziet er zo uit:
Hierbij moet je wat meer nadenken, probeert het eerst zelf op te lossen. Of laat bijvoorbeeld je kind of een leerling het oplossen.
Als je de juiste blokjes versleept en onder elkaar zet, komt het er zo uit te zien:
Als je weer op “Programma uitvoeren” klikt, ga je naar het derde level. Probeer zelf alle levels af te maken. Op de homepage van de website staan nog meer leuke spelletjes. Ideaal als docent voor je leerlingen of om bijvoorbeeld je eigen kinderen Blockly en de basis van het programmeren te leren.
Code genereren met Blockly
Dit gedeelte is wat interessanter voor volwassenen. We gaan nu namelijk met Blockly instructies geven en dit genereren naar code van programmeertalen, zoals Python en PHP.
Dat gaan we met deze demo doen.
Als je de demo website opent, ziet het er zo uit:
Het is de bedoeling om blokken uit het “Blocks” gedeelte te verslepen naar het middelste gedeelte met de stippen. Zo geef je instructies met blokken en wordt er code gegenereerd voor verschillende programmeertalen en XML.
Laten we een simpele instructie geven met een aantal blokken. Ga eerst naar het “Blocks” gedeelte en klik op “Logic”. Sleep dit blok naar het middelste gedeelte met de stippen:
Sleep daarna dit blok in “Logic” achter de “if” van het vorige blok en zorg dat het past:
Je ziet dat het als een puzzelstukje in elkaar past! Verander = naar >. Klik op “Math” en sleep dit blok in de gaten van het vorige blok om getallen in te vullen:
Als het goed is passen de blokken precies. Verander het linkse cijfer naar 5 en het rechtse naar 4. Dit komt er zo uit te zien:
Tot nu toe zegt deze instructie in Blockly het volgende: Als 5 groter is dan (>) 4, doe dan dit…
“do” is echter nog leeg, maar hier gaan we verandering in brengen. Klik op “Text” en sleep dit blok rechts naast “do”:
Dit is het eindresultaat:
5 is groter dan 4, dus als je dit programma uitvoert zal je een pop-op op je scherm zien met de tekst “abc”. Je voert het programma uit door op de rode knop te klikken met het witte pijltje.
In de gegenereerde code van verschillende programmeertalen zie je dat deze instructie in blokken een if-statement is. Dit hoort bij één van de basisonderdelen van het programmeren. In het e-book “Snelcursus Leren Programmeren” lees je daar meer over.
Probeer er zelf eens verder mee te spelen, ook met andere blokken. Kijk eens hoe jouw instructies met Blockly eruit zien in programmeertalen, zoals JavaScript, Python en PHP. Hierdoor leer je ook de syntax van deze programmeertalen.
Eventueel zou je zelfs gegenereerde stukken code kunnen gebruiken in je eigen projectjes, waarin je één van deze programmeertalen gebruikt. Je leert veel door zelf te oefenen.
Beste manier om Blockly te leren of soortgelijke software voor kinderen + extra tip
Programmeren heeft de toekomst en het is belangrijk dat kinderen nu al leren programmeren. Dat kan op een leuke manier, zoals met Blockly of met andere software, waarmee je ook met blokken programmeert.
mBlock is hetzelfde als Blockly, maar dan volledig in het Nederlands. Bij NHA is er een geweldige cursus voor kinderen om te leren programmeren. Kinderen leren in deze cursus programmeren met mBlock en krijgen er zelfs gratis een robot bij!
Hoe gaaf is dat? Leren programmeren met een robot. Door de robot instructies te geven met mBlock leren de kinderen programmeren. De kinderen hebben geen eens in de gaten dat het educatief is, omdat het zo leuk is!
Geef een kind een unieke kans om op spelenderwijs te leren programmeren. Hier heeft het kind veel aan in de toekomst. De kans is groot dat een kind van nu over 10/15 jaar te maken gaat krijgen met programmeren op zijn werk.
Een kind heeft een voorsprong als het nu al de basis van het programmeren leert. Pak je kans bij NHA.
Een extra tip is om “Arduino programmeren met blokken” te lezen.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.