Něžný úvod do programovacího prostředí MakeCode pro micro:bit

V minulém úvodním díle jsme představili zajímavé možnosti, které přináší propojení populárních platforem LEGO a micro:bit. Také jsme nastínili, co nás v nové sérii článků o kombinaci LEGO&micro:bit čeká. Dnes se už podíváme rovnou na první důležité téma a to je programování v MakeCode! Tím vás opět provede fanoušek LEGO Emmet ze skupiny BrickHackers!

---

Modelová situace: Vyzvedli jsme si svůj minipočítač micro:bit  a teď přemýšlíme, jak ho naprogramovat, nebo přesněji, v čem ho naprogramovat: Samotná micro:bit foundation nabízí hned dva oficiální editory: MicroPython a Microsoft MakeCode; podporu micro:bitu však nabízí i jiná oblíbená výuková programovací prostředí jako Scratch či Swift Playgrounds¹.

Uvěznila vás právě rozhodovací paralýza²? Začátečník se do této situace může snadno dostat, naštěstí je Microsoft MakeCode určen právě pro nováčky, a proto jsme se rozhodli, že veškeré příklady budeme uvádět v něm. Dalším argumentem pro jeho zvolení je skutečnost, že velká část rozšiřujících desek má již připravené knihovny (terminologií tohoto editoru se jedná o extensions, čili rozšíření). Navíc je tato volba něco jako 2v1, protože můžete přepínat mezi blokovým programováním a přímým překladem do jazyka JavaScript.

MakeCode spustíte ve většině současných internetových prohlížečů a pokud používáte operační systém Microsoft Windows 10, můžete si dokonce stáhnout aplikaci, která vám zprostředkuje stejné rozhraní bez rušivých prvků ostatních oken v prohlížeči a bez nutnosti připojení k internetu (případná rozšíření, která se stahují obvykle z internetu však připojení pro stažení budou potřebovat).

Prostředí MakeCode se přihlásilo k trendu současných nástrojů pro školní výuky jazyků a umožňuje nastavení jazyka prostředí. S velkou pravděpodobností si sáhne do systémových informacích o vašich jazykových preferencích, a tedy nejspíš nastaví jako výchozí jazyk češtinu. Dovolím si vás však od ní odradit – odhlédněme od nedokonalosti překladu do českého jazyka, to je teoreticky řešitelný problém, záludnost spočívá v tom, že jazykové popisky jednotlivých rozšíření, která ovládají různé přídavné desky, jsou plně v režii autorů a Ti kromě svého mateřského jazyka obvykle přidají podporu jen pro angličtinu³.

Ve výsledku by se tak mohlo stát, že by část bloků byla v češtině a část v jiném, pravděpodobně anglickém, jazyce. Navíc se angličtina stala základem pro příkazy ve většině programovacích jazyků pokud si zvyknete na její čtení, bude pro vás mnohem snadnější se zorientovat i v jiných jazycích. V celém článku budeme odkazovat na anglické prostředí – pokud si chcete jazyk přepnout, volbu najdete v zápatí úvodní stránky (viz obrázek).

Mapa prostředí MakeCode aneb Povinná nalejvárna

Ještě než se pustíme do psaní vašeho prvního programu, pojďme se v rychlosti seznámit s programovacím prostředím. Abyste se do něj přepnuli, klikněte na položku new project.
Jak vidíte, opticky můžeme plochu rozdělit na záhlaví, emulátor micro:bitu, záložky s bloky, kód programu a zápatí

---

Největší prostor je vyhrazen té nejdůležitější části – kódu programu. Zde budeme vkládat programovací bloky. Jak vidíte, nový program vás přivítá s již předpřipravenými bloky <on start> a <forever>. Jedná se o nejzákladnější funkce a využití najdou téměř ve všech programech. Jak brzy zjistíte, bloky jsou tvarované jako skládačky, a jednak vám napovídají, jak můžete různé bloky pospojovat, jednak zabraňují vložení bloku, kam zcela určitě nepatří (ale jde o čistě syntaktickou kontrolu, nijak to nekontroluje význam jednotlivých bloků – zjednodušeně parafrázováno – zabrání vám to dát do lednice toaletní papír, ale už ne prošlý jogurt, prostě protože jogurt do lednice patří).

Začne vykonávat příkazy udělané pomocí bloků a to shora dolů. Celá funkce se vykoná právě jednou a to po spuštění programu. Pokud potřebujete na začátku programu nastavit hodnoty proměnných či zkalibrovat nějaký senzor, či nějaký motor přesunout do výchozí polohy, toto je místo, kam umístíte příslušné bloky.

Smyčka, která zajišťuje neustále se opakující činnost programu. Funkce se vykonává v nekonečném cyklu a začne se vykonávat po dokončení funkce <on start>⁴. Asi nejběžnějším využitím je průběžné načítání informací ze senzorů a jejich případné zpracování.

Další velmi důležitá část jsou záložky s bloky – je to programátorova brašna s nářadím. Zde naleznete bloky roztříděné do kategorií v podobě záložek. Později v tomto článku se blíže podíváme na ty nejzákladnější z nich.

Velmi šikovným nástrojem se může stát i emulátor micro:bitu umístěný v levé části pracovního prostoru. Na jednu stranu není k psaní programu vůbec potřebný, ale díky tomu, že simuluje chování počítače micro:bit, jeho vestavěných senzorů a dokonce i některých velmi základních doplňků, je možné díky němu rychle ověřit, jak se program chová.

V pravé části zápatí můžeme najít standardní ovládací prvky, takže je probereme jen stručně: Tlačítka Undo a Redo slouží k odvolání posledního kroku, případně k jeho opětovnému zavedení, po předchozím odvolání. Program si pamatuje historii vícero kroků. Nástroje Zoom Out a Zoom In slouží k přizpůsobení velikosti bloků v prostoru kódu programu.To může být užitečné, pokud je kód dlouhý, či má některá funkce vícero parametrů.
Vlevo na liště potom naleznete důležité tlačítko Download a rámeček pro vložení názvu programu (k pojmenování programu budete vyzváni i když se pokusíte opustit nepojmenovaný projekt).

V záhlaví je dominantní prvek přepínač mezi blokovým programováním a jazykem JavaScript – jak již bylo řečeno, oba jazyky jsou na sebe navzájem převoditelné, dalo by se říct, že bloky jsou grafickým rozhraním pro JavaScript. Ze zkušenosti ale musím konstatovat, že překlad funguje hladce jen směrem z bloků do textového JavaScriptu, obráceně může dojít k dost nepřehledné vizuální interpretaci.

Blikáme diodami aneb Můj první program

Pokud jste dočetli až sem, mám pro vás skvělou zprávu: Konečně se vrhneme na programování!

A rozjedeme to stylově – rozblikáme matici vestavěných elektroluminiscenčních diod⁵. Jak jsme zmiňovali dříve, nový program vás uvítá s předpřipravenými bloky <on start> a <forever>. Rozklikněte záložku Basic a vložte do blok <show icon> do <on start> a vyberte si v roletovém menu obrázek – já obvykle nastavuji fajfku někdy přezdívanou také “nike” pro podobnost s logem stejnojmenné společnosti. Zvolený obrázek se vám rozsvítí na micro:bitu po spuštění minipočítače. Vpravo si můžete na emulátoru prohlédnout předpokládané chování.

Na první pohled se může zdát, že takovýto program je dosti neužitečný a jeho praktické využití mizivé – ale takové zdání klame: V konečném kódu se sice málokdy objeví, ale během psaní programu pro ovládání hardwaru občas potřebujeme ověřit, jestli nám teče elektrický proud, kudy téct má a neteče nám někudy, kudy nechceme – a není nic jednoduššího, než připojit na daná místa světelné diody a zjistit zda svítí. Jedná se tedy o velmi užitečný nástroj pro prověřování kódu.

A když už jsme otevřeli záložku Basic, pojďme se podívat, co nám nabízí za bloky:

Slouží k rozsvícení matice diod do podoby obrazce, který vyberete z roletového menu

Pokud vám z nějakého důvodu nestačí nabídka obrazců, můžete si vyznačit vlastní tak, že každé z 25 diod určíte, zda je rozsvícená, či zhasnutá.

Blok, který umožňuje na matici diod vypsat číslo – pokud je víceciferné, a nevejde se tak do čtverce 5×5, je vypsáno jako běžící text, který se postupně posouvá doleva, dokud nedojde nakonec.

Blok, který umožňuje na matici diod vypsat řetězec znaků, tedy nejen čísel. Pokud se nevejde do čtverce 5×5, je vypsán jako běžící text, který se postupně posouvá doleva, dokud nedojde nakonec.

Blok přikáže vláknu, ve kterém se spustí, aby se pozastavilo na určitý počet milisekund. Hodnotu můžete nastavit buď výběrem obvyklých hodnot z roletové nabídky, nebo vepsáním vlastní hodnoty.

Úplně slyším, jak si stěžujete: “Kde je slíbené blikání? Tohle prostě jenom svítí! My chceme slíbené blikání!” A pokud si nestěžujete, tak byste měli, protože je to naprostá pravda! Zatím jsme však neskončili – protože co je blikání jiného, než střídavé rozsvěcení a zhasínání? Takže nejprve jsem vás musel naučit, jak něco rozsvítit a teď to můžeme zase zhasnout a to opakovat pořád dokola… Nepřipomíná vám to popis nějakého bloku?

1. Do předchozího programu teď přidejme blok <show icon> do <forever> – obvykle se zde vybírá srdíčko, ale je mi jasné, že jak jsem vás teď doběhl, tak chcete vyjádřit úplně jiné emoce – tak zvolme například obrázek označený jako silly, což je nejspíš vyplazený jazyk.
2. Za něj – a kdykoli budu říkat za nějaký blok, budu myslet napojit pod něj -, přidejme blok <pause> a nastavme ho například na 200 ms.
3. Nyní zhasněme všechny diody – toho docílíte například tak, že přidáte blok <show leds> a necháte všechny čtverečky tmavé.
4. A nakonec ještě nastavíme, jak dlouho necháme diody zhasnuté – připojme další blok <pause> a nastavme tentokrát třeba 100 ms.

Výborně! Program nyní nejprve ohlásí nastartování programu krátkým zobrazením fajfky a potom na nás bude blikat vyplazený jazyk… Jenže zatím jen na emulátoru, protože dosud jsme program nenahráli na samotný micro:bit!

Stáčení dat aneb Jak dostanu muj-prvni-program.hex do svého micro:bitu?

Nadešel čas poohlédnout se po nějakém pěkném datovém kabelu, který bude mít na jedné straně koncovku microUSB, kterou zapojíme do micro:bitu,  a na druhé konektor, kterým se připojí k vašemu počítači (s největší pravděpodobností klasické USB). Pokud jste použili správný kabel, měl by se micro:bit tvářit jako připojený disk (viz obrázek). Jestliže se nestalo nic, zkontrolujte, že jste nepoužili kabel určený jen k nabíjení.

Uživatelé aplikace pro Microsoft Windows 10 mohou jásat, protože prostředí si samo umí najít připojený micro:bit a pro uložení programu stačí zmáčknout tlačítko Download v zápatí.

Pokud patříte mezi většinu uživatelů, kteří používají rozhraní v prohlížeči, pak na vás po stisknutí tlačítka nejspíše vyskočí, že je třeba micro:bit připojit k počítači a nahrát .hex soubor. Současně s tímto upozorněním by se mělo otevřít dialogové okno, kde se dozvíte, či zvolíte, kam se soubor stáhne do vašeho počítače. Pak již stačí tento .hex soubor přetáhnout na disk micro:bitu. Nelekejte se, že chvíli poté, co tam soubor přesunete, už ho na disku nenajdete – micro:bit se jako disk jen tváří, aby vám usnadnil nahrání programu, ale jako klasické úložiště se nechová.

Ptáte se, co že je to ten .hex soubor? Stručná odpověď zní, že se jedná o komprimovanou verzi programu včetně jeho zdrojového kódu. Je možné kód kdykoli opět otevřít pomocí editoru a upravit ho⁶.

Takže mohu vzít soubor s programem a poslat ho třeba kamarádovi přes email?

Jistěže můžete program vzít a předat ho někomu dalšímu! To je poměrně důležitá vlastnost zdrojových kódů, protože to umožňuje program vzít, prozkoumat a případně upravit pro jinou potřebu, aniž byste museli složitě přepisovat části kódu, které už jste jednou vytvořili!
A víte co? Pojďme si to rovnou vyzkoušet – zde si můžete stáhnout program, který jsem pro vás připravil – jedná se o program který při zatřesením micro:bitem simuluje hod hrací kostkou… Ačkoliv tahle kostka je trošku upravená. Přijdete na to jak? Tady je ke stažení hex soubor microbit-loaded-dice.hex.

V tomto článku už jsem vás jistě zaplavil velkým množstvím nových informací, takže co přesně dělá si vysvětlíme až někdy příště – ale pokud by vaše nadšení bylo tak obrovské, že byste chtěli domácí úkol, můžete zkusit zjistit, v jakém případě se vám na této mírně cinknuté kostce podaří hodit sedmičku.

Jak si mohu cizí program otevřít v editoru?

Pokud chcete zjistit odpověď na dobrovolný domácí úkol, tahle otázka míří správným směrem! Je třeba importovat .hex soubor s programem do vašeho editoru. Toho snadno docílíte následujícím postupem:

1. Přepněte se na úvodní obrazovku Microsoft MakeCode.
2. Stiskněte tlačítko ⏏Import.
3. Zvolte možnost Import File… a vyberte cestu k souboru, který chcete otevřít.

Jak pracovat s rozšiřujícími knihovnami aneb Rada na závěr

MakeCode má v základní výbavě jen ty nejběžnější knihovny, jednak aby ušetřil paměť, jednak aby vás nezahlcoval záložkami s bloky, které nepotřebujete nebo dokonce nemůžete využít, protože vám chybí hardware pro který byli napsány.
V poslední kapitole si ukážeme jak takové rozšíření, nazývané zde extension můžeme přidat – pro práci s micro:bitem jde v podstatě o základní vědomost, protože téměř všechny přídavné desky, senzory či někdy i motory si přinášejí své dodatečné knihovny.

1. V panelu záložek s bloky vyberte záložku Advanced
2. Úplně na konci nabídky nových záložek vyberte Extensions, čímž se dostanete do nabídky rozšíření.
   1. v nejjednodušším případě uvidíte balíček rozšíření v nabídce nejčastějších voleb
   2. obvykle je však třeba rozšíření vyhledat v okně Search or enter project URL…Většinu podpůrných knihoven takto snadno najdete – můžete si vyzkoušet, že takto dohledáte třeba v předchozím článku zmiňovanou desku Wukong, stačí když vyhledáte “wukong”
   3. Pokud ani vyhledávání nepomůže, pak je třeba do okna Search or enter project URL… zadat adresu konkrétního rozšíření v repozitáři GitHub. Můžete si vyzkoušet, že adresa https://github.com/elecfreaks/pxt-wukong vás zavede ke stejnému rozšíření.

A co dělat, pokud jste si nainstalovali extension, o kterém jste nakonec zjistili, že ho nepotřebujete a rádi byste ho odebrali? I tady je docela snadná pomoc:

1. V záhlaví přepněte programovací prostředí z Blocks na JavaScript.
2. Díky předchozímu kroku jste si v oblasti, kde se nacházel emulátor micro:bitu otevřeli správu souborů programu. Rozbalte nabídku Explorer a odstraňte nechtěnou knihovnu kliknutím na popelnici u jejího jména. Prostředí vás ještě požádá o potvrzení, že si opravdu přejete knihovnu odstranit z programu.
   Všimněte si, že rozšíření wuKong je zároveň příkladem knihovny, která si v sobě přinese jiné knihovny, které vyžaduje – v tomto případě knihovnu neopixel a ws2812b – obě knihovny jsou potřebné k ovládání vestavěných LED na desce Wukong. Samostatně je nemůžete odstranit, pokud ale odstraníte rozšíření wuKong, odstraníte s ním zároveň i další knihovny, které si doinstaloval, protože je potřebuje.

A to už je pro dnešek opravdu vše a těším se opět na nějaký další článek o programování micro:bit.

EDIT: Podívejte se také na doplňující článek o novém MakeCode 2020!

---

¹ Ještě více možností programovacích prostředí můžete nalézt v sice již trochu starším, ale stále užitečném přehledu V čem programovat micro:bit? vystaveném na portálu microbiti.cz.

² “Rozhodovací paralýza (v anglickém jazyce decision paralysis) je psychologický jev, kdy je člověk neschopen se rozhodnout a zvolit si z více nabízejících se možností. Čím více variant má k dispozici, tím hůře se rozhoduje při výběru jedné z nich. Velké množství voleb ho frustruje a při konečném rozhodnutí nepociťuje takovou míru štěstí, jako kdyby předtím neměl vůbec na výběr, protože zpětně pochybuje nad správností své konečné volby.”
zdroj: https://cs.wikipedia.org/wiki/Rozhodovac%C3%AD_paral%C3%BDza

³ Přidání podpory dalšího jazyka je sice z podstaty licence, pod kterou je prostředí zavedeno, možné, ale výrazně překračuje předpokládané znalosti začátečníka, proto zde tuto možnost blíže nerozvádím.

⁴ Zde jsem si dovolil trošku zavádějící zjednodušení pro začátečníky. Každá funkce se v micro:bitu spouští ve vlastním vláknu a vlákno <forever> se spustí po zastavení vlákna <on start>, což nejčastěji nastane jeho dokončením, nicméně přinejmenším ve starších verzích prostředí MakeCode šlo spuštěním vlákna <forever> docílit i přidáním bloku <pause> do vlákna. Prostředí se neustále vylepšuje a již by s tím neměl být problém, ale kdybyste náhodou narazili na problém s tím, že se vám vlákno <forever> spustí ještě před zastavením vlákna <on start>, máte alespoň představu odkud začít záhadu rozmotávat.

⁵ Známé pod zkratkou LED (zkratka z anglického Light-Emitting Diode); též označovány jako světelné diody, svítivé diody, slangově ledky, někdy označováno též pleonasmem LED diody.

⁶ Dlouhá odpověď by popisovala, že jde o soubor typu Intel-Hex, tedy textový soubor sloužící k definování obsahu paměti. Data jsou zakódována pomocí šestnáctkové soustavy do ASCII, což umožňuje, aby soubor byl čitelný běžným textovým editorem. Pokud vás uvedené termíny zastrašily a chcete se dozvědět více o tom, jak jsou data ukládána do souboru, můžete začít například článkem Intel HEX na Wikipedii. Pokud vás nezastraší ani angličtina, můžete se dozvědět něco víc o informacích obsažených v souborech generovaných editory určenými pro micro:bit v článku What is the format of the .hex file created by the micro:bit editors?