10. Aktivita 6 - cykly a procedury jako řídící struktury programu

Téma

Tematický celek

Použití cyklů a procedur jako dalších řídicích struktur programu

Motivační rámec

Seznámení s důležitým aspektem programování s širokým využitím při vlastní tvorbě.

Počet žáků

5-15

Věk žáků

10+

Pomůcky

PC odpovídajících parametrů,
webový prohlížeč Mozilla Firefox nebo Google Chrome,
zařízení s Androidem připojené k internetu,
případně emulátor zařízení s Androidem,
účet pro Google služby.

Stručný popis aktivity

Přihlášení k prostředí App Inventoru http://appinventor.mit.edu/
Teoretické a praktické seznámení s cykly programu, které jsou k dispozici v programu App Inventor.

Vhodné místo

Počítačová učebna

Cíle aktivity

Studenti se seznámí s cykly programu a vyzkouší si jejich použití.

Předchozí znalosti

Aktivita navazuje na předchozí lekci tohoto kurzu.

Časový plán

Fáze činnosti s přístrojem

Metody a formy, motivace

5-35m

Seznámení s tématem lekce. Dle znalostí studentů seznámenís cykly a procedurami  nebo zopakování cyklů a procedur jako dalších struktur pro řízení běhu programu. Seznámení s pojmy/zopakování pojmů jako: nekonečný cyklus/smyčka, cyklus s podmínkou na začátku, cyklus s podmínkou na konci, počítaný cyklus.
Volitelně nákres vývojových diagramů. Vysvětlení / připomenutí pojmů procedur / funkcí, jejich definice, volání vstupních a výstupních parametrů.

Volitelně samostatná činnost žáků, vyhledávání informací k tomuto tématu.

Frontální výklad, ukázka, samostatná práce žáků

30-60m

Využití znalosti cyklů a procedur při tvorbě vlastní aplikace.

Samostatná a skupinová práce s využitím získaných znalostí, infromací v tomto kurzu a externích zdrojů.

15-20m

Prezentace prací žáků, sdílení poznatků, diskuze.
Motivace žáků k domácí práci.

Prezentace prací a diskuze

Hodnocení

Zpětná vazba je okamžitá. Student reflektuje vzdělávací cíle, svůj postup a dosažené výsledky. Student průběžně srovnává vlastní výsledky s výsledky ostatních studentů.

Návaznosti

Na tuto aktivitu navazují následující aktivity, které prohlubují a kombinují znalosti prostředí App Inventoru.

Poznámky

Pro případ výpadku připojení k internetu nebo technických problémů s App Inventorem doporučuji připravit záložní aktivitu, založenou na podobných principech blokového programování, například offline aplikaci MIT Scratch, BYOB nebo některou z variant programovacích prostředí LOGO.

Wikipedie k tématu řídících struktur.

Doplňkový tutoriál na aplikaci Xylofón. Aplikace využívá procedury.

 

Aplikace pro ukázku cyklů a procedur

Zásadní věc je, že App Inventor vytváří jednovláknové aplikace a jakýkoliv blok programu, pokud je spuštěn, je vykonán až do konce. To je třeba mít na paměti, obzvláště pokud jste zvyklí na vícevláknové aplikace. V programech App Inventoru se každý blok, který své ukončení podmiňuje změnou na jiném místě programu, stává nekonečnou smyčkou. Z toho důvodu není v App Inventoru implementována funkce pozastavení běhu (sleep / pause / delay) a opakující se akce v určitých intervalech jsou řešeny pomocí časovačů.

Více o této vlastnosti programu lze naléz na blogu Jose Florese.

Cyklus "while test"  lze používat pro akce, které mají konec uvnitř svého cyklu.

Z pohledu cyklů lze smyčky s podmínkou na začátku nahradit časovači s TimerEnabled.False a podmínkou, která časovač zapne nebo nechá vypnutý. Smyčky s podmínkou na konci lze nahradit časovači s TimerEnabled.True s podmínkou, která časovače vypne, nebo ponechá zapnuté. Lze použít i jiné techniky pro náhradu cyklů.

Na všechny bloky, které reagují na události, lze také pohlížet jako na smyčky programu s podmínkou na začátku.

Komponenty modelové aplikace.

pamai_a060_loops_and_procedures_design.png

Ukázka omezení programů z App Inventoru

Blok WhenImageSpriteMrak.Touched je spuštěn po dotyku obrázku mraku. Jde o počítaný cyklus od 1 do 150 s krokem po 1. Vykoná se tedy 150x. Důležité je si všimnout, že není vidět postupné provádění bloku a zvětšování mraku z velikosti 1 na velikost 150.  Program se (dle výkonu zařízení) na chvíli "zasekne" a pak se objeví už zvětšený mrak. Po celou dobu, kdy byl blok prováděn, nedostal program ani možnost překreslovat sprite mraku a zobrazil až výsledek po skončení bloku.

Blok WhenImageSpriteHvezda.TouchDown se samotným SpriteHvezda neprovádí nic, ale po dobu držení hvězdy by měl zvyšovat počítadlo průběhu cyklu a měl by přestat přičítat, když je držení ukončeno. To by měl zajistit blok WhenImageSpriteHvezda.TouchUp. Ve skutečnosti ale program na ukončení dotyku nereaguje a zastaví ho až proměnná zachranna_brzda.

pamai_a060_loops_and_procedures_blocks1.png

Procedury a princip DRY

Procedury patří k významným řídícím strukturám programu. Umožňují vykonávat stejný kód pro různé objekty. Někdy jsou procedury použity pro oddělení a logické členění zdrojového kódu, což je opět velmi užitečná funkce. Nezřídka o "životnosti" a úspěšnosti programu rozhoduje právě jeho dobrá čitelnost a přehlednost. Na obrázku je ukázka procedury tocit_se, které je jako parametr předána reference na sprite. Funkce zajišťuje otáčení sprite a je jí jedno, jaký sprite je jí předán. Místo tří téměř identických kódů pro 3 sprite v tomto případě, nebo v jiném programu, třeba pro 100 sprite, je použit jeden kód pro všechny.

Otáčení je ještě podmíněno zaškrtnutím checkboxu. Jde tedy o variaci na cyklus s podmínkou na začátku.

pamai_a060_loops_and_procedures_blocks2.png

Ukázka procedur a použití senzoru akcelerátoru

V poslední části programu je obsluha pohybu objektů po ploše opět rešená pomocí funkcí, které zde plní funkci oddělení kódu.

Poslední dva bloky  pracují se senzorem akcelerátoru. Při třesení zařízením se hvězda zmenšuje, po dotyku se hvězda zvětší.

Funkce AcelerationChanged má v současné verzi (únor 2015 AI nb140b Companion 2.24) chybu, která při použití způsobuje zaseknutí zařízení.

pamai_a060_loops_and_procedures_blocks3.png

Tipy na modifikace programu:

  • více sprites s různým chování,
  • jiná společná akce všech sprites, například hromadné zmenšení při stisku tlačítka,
  • sprite pohybující se po určené dráze,
  • sprite pohybující se po náhodné dráze,
  • malování sprites na canvas.