Snap! – důstojný nástupce programovacího jazyka Scratch

Obsah

1. Snap! – důstojný nástupce programovacího jazyka Scratch

2. Od Squeaku k projektu Snap!

3. Instalace výukového vývojového prostředí v době Webu 2.0?

4. Vkládání komentářů k jednotlivým blokům

5. Tvorba nových bloků

6. Práce se seznamy

7. Funkce jako plnohodnotný datový typ

8. Další vlastnosti jazyka Snap!

9. Odkazy na Internetu

1. Snap! – důstojný nástupce programovacího jazyka Scratch

V seriálu nazvaném „Jazyky pro výuku programování“, který na Rootu vycházel přibližně před čtyřmi roky, jsme se seznámili s několika programovacími jazyky a dalšími pomůckami, které je možné použít při výuce programování. Zabývali jsme se taktéž projektem Squeak a programovacími jazyky, které byly ve Squeaku vytvořeny. Především se jednalo o projekt nazvaný Scratch, který se stal velmi populární, a to zejména z toho důvodu, že dovoloval vytvářet i poměrně sofistikované programy bez nutnosti zápisu strukturovaného textu, jehož syntaxe by byla hlídána buď interpretrem či překladačem. Namísto toho se algoritmy vytvářely vizuálně, konkrétně skládáním bloků představujících jednotlivé příkazy či řídicí struktury. Díky způsobu implementace skládání bloků pod sebe, popř. do sebe (s využitím „zámků“, podobně jako u puzzle) je zajištěno, že program bude po syntaktické stránce vždy v pořádku, což je důležité, protože odpadá pro děti nudná oprava překlepů, hledání chybějících středníků, hlídání párovosti závorek i další činnosti spojené s prací s běžnými programovacími jazyky. Uživatel se tedy musí starat o to podstatné – o sémantiku navrhované aplikace.

Obrázek 1: Informace o autorech projektu Snap!

Pokračovatelem projektu Scratch je nástroj nazvaný Snap!, který je možné v případě potřeby využít pro výuku základních konceptů používaných při programování. Zjednodušeně řečeno je možné říci, že Snap! vznikl syntézou Stratche a projektu BYOB (Build Your Own Block) přeneseného do prostředí Webu (HTML5+CSS+JavaScript), čímž odpadá nutnost instalace celého relativně velkého běhového prostředí Scratche a navíc se díky tomu, že Snap! běží přímo ve webovém prohlížeči, může tento projekt používat na širokém spektru různých „inteligentních“ elektronických zařízení, včetně tabletů a smartphonů (zde bude limitujícím faktorem velikost displeje). Navíc díky této vlastnosti projektu Snap! odpadají problémy s jeho nasazením do výuky (administrátoři se nemusí starat o instalaci ani o udržování projektu). Prakticky všechny důležité vlastnosti Scratche zůstaly zachovány a navíc došlo k některým rozšířením, o nichž se zmíníme v navazujících kapitolách.

Obrázek 2: Uživatelské rozhraní projektu Squeak, kde byla myšlenka skládání algoritmu z jednotlivých bloků realizována.

Základní funkce Snapu! jsou prakticky stejné, jako je tomu ve Squeaku, takže zvídavým čtenářům doporučuji nejdříve prostudovat již zmíněné starší články o tomto jazyce:

1. Scratch: plnohodnotný programovací jazyk nebo jen dětské puzzle?
2. Scratch: plnohodnotný programovací jazyk nebo jen dětské puzzle? (2. část)
3. Scratch – plnohodnotný programovací jazyk nebo jen dětské puzzle? (3. část: Scratch a BYOB)

Obrázek 3: Program vytvořený vizuálně v projektu Snap!

2. Od Squeaku k projektu Snap!

Před popisem vlastností programovacího jazyka Snap! se zmiňme o některých předchůdcích tohoto projektu. Na začátku vývoje stál Squeak (http://www.squeak.org/), což je dialekt plně objektového programovacího jazyka Smalltalk-80, jenž je doplněný o komplexní a v některých ohledech doposud nepřekonané vývojové prostředí založené na grafickém uživatelském rozhraní Morphic. Vývojové prostředí se ovládá kombinací klávesnice a myši, což není nic překvapivého, protože moderní GUI vzniklo právě ve Smalltalku. Ve Squeaku je využito všech tří tlačítek myši (prostřední tlačítko lze v případě potřeby emulovat). V dokumentaci a nápovědě se jednotlivá tlačítka nepopisují podle toho, kde jsou na myši umístěna (tj. slovy pravé, levé, prostřední), ale barvami – je to ostatně logické, když si uvědomíme, že například na počítači nakonfigurovaném pro leváky je funkce pravého a levého tlačítka prohozena.

Obrázek 4: Squeak: zkoumání objektu v okně Explorer.

Ve Squeaku byl naprogramován projekt Scratch, který představil vizuální tvorbu programů pomocí skládání bloků, což vlastně do značné míry zabraňuje vzniku syntaktických chyb. Vizuální tvorba programů pomocí skládání příkazových bloků ovšem tvoří pouze jednu část přitažlivosti Scratche při výuce programování. Druhou částí je takzvaná pracovní plocha s volitelným pozadím, po níž se mohou v závislosti na volaných příkazech pohybovat takzvané sprity, které navíc mohou při svém pohybu za sebou kreslit křivku (tj. stopu pohybu). Pod pojmem sprite je ve Scratchi myšlen rastrový obrázek, jenž může představovat například postavu či jiný pohyblivý nebo i statický předmět ve hře, zatímco pozadí umístěné na pracovní plochu (taktéž se jedná o rastrový obrázek) je většinou neměnné a může představovat pozadí hry, místnost, ve které se odehrává nějaký dialog atd. Scratch díky možnosti prakticky neomezeného pohybu spritů po pracovní ploše s volitelným kreslením cesty (stopy pohybu), kterou sprity vykonaly, umně integruje jak možnosti programovacích jazyků typu Karel či Baltazar (sprity umístěné a pohybující se po pomyslné šachovnici) a taktéž programovacího jazyka Logo s neodmyslitelnou želvou, která se může pohybovat libovolným směrem po ploše.

Obrázek 5: Uživatelské prostředí projektu Scratch.

Jeden z největších nedostatků projektu Scratch vyřešil navazující projekt nazvaný Build Your Own Block neboli BYOB. Ten mj. uživatelům nabídl možnost vytváření vlastních příkazových bloků, což umožňuje dekompozici programů na menší, jednodušší a snadněji zvládnutelné části a samozřejmě též implementaci rekurzivních algoritmů. Ovšem ve skutečnosti projekt BYOB svým uživatelům nabízí i množství dalších funkcí, například tvorbu anonymních bloků, podporu pro přístup k atributům objektů, dotaz na typ libovolného objektu v čase běhu programu, vylepšenou práci se seznamy, funkce vyššího řádu atd. Snap! je založen právě na projektu BYOB.

Obrázek 6: BYOB: uživatelsky definovaný blok s implementací vykreslení křivky Helge von Kocha. V parametru size se předává vodorovná délka obrazce, v parametru limit pak limitní (nejmenší) délka jednotlivých segmentů křivky.

Původně nezávisle na výše zmíněné aplikaci BYOB vznikl „konkurenční“ projekt se jménem Panther, který taktéž nabízí oproti Scratchi různé rozšiřující funkce. Jedná se především o nové příkazové bloky sloužící pro práci se soubory, dále pak o bloky pro práci s barvami. V původním Scratchi totiž barva nebyla plnohodnotným datovým typem).

Obrázek 7: Grafické uživatelské rozhraní projektu Panther je založeno na původním Scratchi, od nějž se liší jen v několika detailech (a samozřejmě přítomností většího množství příkazových bloků i skupin bloků).

V projektu Panther je možné tvořit nové příkazové bloky, ale poněkud odlišným způsobem, než tomu je v aplikaci BYOB: v Pantheru se pro tvorbu nových bloků musí využívat jazyk Smalltalk, tudíž lze využít všechny již existující třídy a objekty. Na druhou stranu je však tvorba nových bloků (alespoň v současné verzi) komplikovanější, neboť nelze využít vizuálního návrháře, tak jako je tomu v projektu BYOB. Ostatně se podívejme na screenshot:

Obrázek 8: Panther: kód metody (příkazového bloku) pro přístup k obsahu souboru.

3. Instalace výukového vývojového prostředí v době Webu 2.0?

Jak Scratch, tak i výše zmíněné projekty BYOB a Panther, jsou naprogramovány ve Smalltalku, což vývojářům ulehčilo tvorbu grafického uživatelského rozhraní, protože bylo možné využít Morphic se všemi jeho výhodami (testování na „živém“ systému atd. atd.). Současně to však znamenalo, že bylo nutné Scratch/BYOB/Pather na každý počítač instalovat, protože součástí těchto projektů byl i virtuální stroj Squeaku (a vlastní projekt pak není ničím jiným než obrazem stavu běžícího virtuálního stroje získaného na počítači vývojáře). Již ve Scratchi se objevila snaha tuto situaci řešit, a to s využitím Flashe (takže to problémy spíše přineslo a nikoli vyřešilo :-). Projekt Snap!, stejně jako Scratch 2.0, tuto nevýhodu zcela odstranil, protože pro svůj běh potřebuje pouze moderní webový prohlížeč s povoleným JavaScriptem. Celé uživatelské rozhraní běží v okně prohlížeče, a to včetně editoru spritů, editoru jednotlivých uživatelských bloků atd.

Obrázek 9: Snap! spuštěný v prohlížeči Midori. I v tomto prohlížeči je Snap! plnohodnotně použitelný.

4. Vkládání komentářů k jednotlivým blokům

Nedílnou součástí běžných zdrojových kódů jsou samozřejmě komentáře. Podobná vlastnost se dá očekávat i u programovacích jazyků založených na vizuálním programování, proto je zajímavé, že možnost tvorby komentářů byla přidána do Scratche 1.2 Beta jen proto, aby byla v plné verzi opět odstraněna, protože tato nová funkce prý uživatele mátla. Plnohodnotnou součástí Scratche se komentáře staly až ve verzi 1.4. Podobně jako v moderních verzích Scratche, i ve Snapu! je možné k jednotlivým blokům přidávat komentáře, a to přes kontextové menu zobrazené po stisku pravého tlačítka myši (už použití kontextového menu napovídá, že se jedná spíše o pokročilejší vlastnost). Jedná se o velmi důležitou funkci Snapu!, protože komentáře mohou studentům pomoci při práci s demonstračními příklady; mohou například vysvětlovat význam jednotlivých proměnných, pojmenovaných bloků apod.

Obrázek 10: Komentáře je možné vkládat ke každému bloku, z něhož se program skládá.

5. Tvorba nových bloků

Jednou z velmi důležitých vlastností projektu Snap!, bez níž by prakticky nebylo možné vytvářet rozsáhlejší aplikace, je možnost tvorby nových uživatelských bloků, které je možné pojmenovat a taktéž jim při volání předávat hodnoty. Jednou vytvořený blok se stává součástí programu a v případě potřeby ho je možné sdílet s dalšími projekty a taktéž s dalšími uživateli. Tvorba nového bloku je velmi jednoduchá a především intuitivní. Uživatel si může celý algoritmus nejprve interaktivně odzkoušet na pracovní ploše (screenshot číslo 11), následně zvolit příkaz pro vytvoření nového bloku, blok pojmenovat (viz screenshot číslo 12) a následně algoritmus implementovaný formou skládačky „přenést“ do podokna představujícího nový uživatelský blok (screenshot číslo 13). Ostatně podobným způsobem lze přenášet části programu i mezi jednotlivými uživatelskými bloky.

Obrázek 11: Původní program vytvořený přímo na pracovní ploše.

Obrázek 12: Dialog pro vytvoření a pojmenování nového bloku.

Obrázek 13: Přesun původního programu do nového bloku.

Obrázek 14: Nový blok je možné přímo spustit.

6. Práce se seznamy

Již ve Scratchi se objevila možnost používat seznamy (list). Jedná se o lineární seznamy s dynamicky měnitelným počtem prvků (což se od seznamů obecně očekává). Jejich prvky však nemohou obsahovat další seznamy, což například znamená, že při přidání seznamu do jiného seznamu se původní seznam změní na jediný prvek s řetězcem, jehož obsah odpovídá textové reprezentaci původního seznamu (toho je možné využít například tak, že každý seznam bude využit pro uložení jedné věty sestavené ze slov, podobně jako je tomu v Logu). Se seznamy bylo ve Scratchi možné provádět běžné operace, mezi něž patří zejména přidání nového prvku na konec seznamu (append), vložení prvku na určené místo (insert), přečtení prvku z určité pozice v seznamu a taktéž zjištění délky seznamu. Kromě toho je k dispozici i příkazový blok vracející pravdivostní hodnotu true nebo false na základě toho, zda seznam obsahuje prvek s daným obsahem. Podobně jako tomu bylo u skalárních proměnných, i seznamy je možné zobrazit na pracovní ploše. V tomto případě se zobrazí jak název seznamu, tak i obsah všech jeho prvků, popř. posuvník, pokud je počet prvků příliš velký na to, aby se obsah celého seznamu vešel do zvolené oblasti. Přímo na pracovní ploše je možné obsah seznamu editovat, přidávat do něj nové prvky, mazat prvky nebo měnit jejich obsah.

Obrázek 15: Způsob zobrazení seznamu na pracovní ploše ve Scratchi.

V projektu Snap! se objevují některé nové bloky určené pro práci se seznamy. V původní anglické verzi se jedná o bloky ((value) in front of (list)), (all but first of (list)) a (item (1) of (list)) (přeložené názvy jsou zobrazeny na screenshotu číslo 16). Tyto nové bloky vlastně implementují klasické LISPovské funkce cons, cdr a zobecněnou funkcí car či nth, což vlastně znamená, že se seznamy lze ve Snapu pracovat buď jako se skutečnými seznamy (nově přidané funkce) či jako s dynamickými poli (původní funkce).

Obrázek 16: Původní i nové bloky určené pro práci se seznamy v projektu Snap!

7. Funkce jako plnohodnotný datový typ

V projektu Snap! došlo k rozšíření řídicích struktur, takže se zde objevují například vylepšené formy programových smyček atd. Ovšem nejdůležitějším novým blokem je blok nazvaný report, který je možné použít pro navrácení hodnoty z uživatelem definovaného bloku (to odpovídá příkazu return známému například z Algolských programovacích jazyků). Tím se vlastně z bloku stává funkce, které se předávají parametry a která může na libovolném místě svého těla vrátit libovolnou hodnotu. Nová funkce se vytváří jako běžný pojmenovaný uživatelský blok (screenshot číslo 17), ovšem s tím rozdílem, že pokud se volání takového bloku použije kdekoli na pracovní ploše, je funkce ihned vyhodnocena a její návratová hodnota se zobrazí v bublině vedle volání funkce (screenshot číslo 19).

Obrázek 17: Vytvoření nové funkce.

Obrázek 18: Nápověda k bloku „report“.

Obrázek 19: Vyhodnocení funkce.

8. Další vlastnosti jazyka Snap!

S některými dalšími vlastnosti jazyka Snap! se seznámíme formou screenshotů:

Obrázek 20: V prostředí lze dynamicky měnit jazyk, což se mj. projeví i v pojmenování bloků

Obrázek 21: Pokud se použijí vnořené smyčky, jsou jejich bloky barevně odlišeny.

Obrázek 22: Editor spritů je součástí Snapu! stejně jako původního Scratche.

Obrázek 23: Editor spritů je součástí Snapu! stejně jako původního Scratche.

Obrázek 24: Nový sprite se stane součástí projektu.

Obrázek 25: Co naopak chybí: možnost měnit objekty, z nichž se vlastní Snap! skládá (zde rozhraní BYOBu). Těžko říci, zda se dočkáme podobné funkcionality i ve Snapu! (samozřejmě založené na JavaScriptu).

9. Odkazy na Internetu

1. Snap!
   http://snap.berkeley.edu/
2. Prostředí Snap!
   http://snap.berkeley.edu/snap­source/snap.html
3. Alternatives to Scratch
   http://wiki.scratch.mit.e­du/wiki/Alternatives_to_Scrat­ch
4. Seriál Letní škola programovacího jazyka Logo
   http://www.root.cz/serialy/letni-skola-programovaciho-jazyka-logo/
5. Seriál Jazyky pro výuku programování
   http://www.root.cz/serialy/jazyky-pro-vyuku-programovani/
6. Snap! (programming language, Wikipedia)
   https://en.wikipedia.org/wi­ki/Snap!_(programming_lan­guage)
7. Scratch: oficiální stránka projektu
   http://scratch.mit.edu/
8. Scratch: galerie projektů vytvořených ve Scratchi
   http://scratch.mit.edu/ga­lleries/browse/newest
9. Scratch: nápověda
   file:///usr/share/scratch/Hel­p/en/index.html
10. Scratch: obrazovky nápovědy
    file:///usr/share/scratch/Hel­p/en/allscreens.html
11. Scratch (Wikipedie CZ)
    http://cs.wikipedia.org/wiki/Scratch
12. Scratch (programming language)
    http://en.wikipedia.org/wi­ki/Scratch_(programming_lan­guage)
13. Scratch Modification
    http://wiki.scratch.mit.e­du/wiki/Scratch_Modificati­on
14. Scratch Lowers Resistance to Programming
    http://www.wired.com/gadge­tlab/2009/03/scratch-lowers/