Programování pro Android v prostředí MIT App Inventor

1. Základní informace o projektu

Název: Programování pro Android v prostředí MIT App Inventor

Anotace programu/zaměření/hlavní cíl:

Seznámit žáky s atraktivní možností tvorby aplikací pro Android, přímo ve webovém prohlížeči. Kromě seznámení s prostředím Androidu může být vývojové prostředí App Inventor i vhodným nástrojem k výuce algoritmizace a úvodem do programování. Podpora a přímé využití principů 1:1 a BYOD.

Cílová skupina

Technicky orientovaní žáci ZŠ, žáci gymnázií a SŠ, účastníci kurzů programování pro začátečníky.

Organizační podmínky

Předpokládá se výuka v počítačové učebně s menším počtem žáků (cca 8 až 15). V případě distančního vzdělávání lze formy a metody výuky přizpůsobit.

Pomůcky

PC s parametry:

CPU 1,5GHz, 1GB RAM, doporučované prohlížeče Mozilla Firefox nebo Google Chrome v aktuální verzi. Operační systém není rozhodující, podporovány jsou nejen hlavní 3 OS (Win, Lin, Mac).

Výhodou je vlastní zařízení s OS Android a WiFi připojení k internetu.

V případě použití emulátoru nároky na hardware PC vzrůstají dle typu a požadavků emulátoru.

Časová náročnost (popř. jak je možné program rozložit – jedná- li se o celoroční program)

Kurz je dimenzován na 12 dvouhodinových lekcí. Další čas může být věnován volitelným činnostem, které dle časových možností a zájmu žáků mohou i výrazně překročit původní záměr. Podporu pro vedení volitelných čiností lze nalézt v materiálech mimo hlavní vzdělávací blok.

Mezipředmětové vazby

Vzhledem k prostoru pro volitelné směrování tvorby programů lze do výuky zahrnout mezipředmětové vazby pro jakýkoliv předmět. Charakterem práce se nelze vyhnout mezipředmětovým vazbám na anglický jazyk, matematiku, český jazyk a ICT předměty.

2. Motivační rámec projektu

Text:

Elektronická zařízení se velmi rychle stala významnou součástí osobního i profesního života většiny populace. Působení těchto zařízení ovlivňuje myšlení a kulturu v nebývalém měřítku. Motivační potenciál této oblasti je obrovský. Zde stojíme na hranici mezi těmi, kdo vytváří, a těmi, kdo pouze konzumují multimediální obsah. Snad vás tento kurz posune dále do světa tvůrců a přinese vám lepší pochopení technologií, které ovlivňují váš život.

Doporučený multimediální materiál:

3. Poznámky k využití programů

Text:

Samotný App Inventor je díky svému návrhu poměrně nenáročný. Studenti budou potřebovat vlastní Google účet, případně účet Google for education, pokud jej má škola zřízený. Propojení s vlastním zařízením s Androidem je nenáročné a postup lze nalézt na stránce http://appinventor.mit.edu/explore/ai2/setup.html. Problematičtější může být zprovoznění emulátorů v případě, kdy žáci nemají vlastní zařízení, případně není dostupné kvalitní bezdrátové připojení pro všechna zařízení žáků.

Zprovozňování emulátorů je v tomto kurzu zpracováno do samostatných volitelných bloků.

Doporučený multimediální materiál:

App Inventor je prostředí, které používají statisíce uživatelů po celém světě. Mnoho materiálů lze nalézt na stránce http://appinventor.mit.edu/explore/.Pro práci s tímto prostředím existuje řada ukázkových videí, dostupných například na YouTube.

Některá z videí jsou použita i v tomto kurzu. Stále vznikají nové materiály, tento kurz je toho příkladem. Pokud najdete nový zajímavý materiál, napište nám prosím o něm do wikipedie našeho kurzu.

4. Projektový deník

Připravit dokument Word, který bude sloužit jako projektový deník. Bude obsahovat záznamové archy pro realizaci jednotlivých aktivit.

Je vhodné připravit tento materiál pro snadný černobílý tisk.

Doporučený multimediální materiál

Černobílé obrázky, grafické prvky.

Ikony

Tabulky, schémata.

Motivační prvky relevantní k tématu projektu.

5. Aktivita 1 - seznámení s prostředím a Hello World

Doporučený multimediální materiál

PDF tutoriál k seznámení s prostředím App Inventoru a vytvoření první aplikace.

Ukázka aplikace Hello World

Účelem je předvést snadnost vytvoření aplikace a ověřit propojení App Inventoru se zařízením studenta nebo s emulátorem.

Modifikace první aplikace

V části modifikací, může být studentům doporučeno několik úprav, ve kterých se opakuje námět "Hello World" v různých modifikacích. Účelem této části lekce je dát prostor studentům, aby se zamysleli nad možnosti, které jim App Inventor přináší, a vyzkoušeli, nakolik si s tím prostředím rozumí.

V ukázce je obrazovka designeru a bloků programu, který je rozšířen o další funkce. Podobně jako v základním programu, i zde je každá akce spuštěna kliknutím na tlačítko.

• Tlačítko 2 vyvolá akci přejmenování nápisu v komponentě Label1.
• Tlačítko 3 provede strojové čtení textu "Hello World!". Komponenta TextToSpeech je vložena v designeru ze sekce Media. Postup je zobrazen v dříve zmíněném ukázkovém videu
• Tlačítko 4 spustí akci překladu textu. Text "Hello World!" je přeložen pomocí komponenty YandexTransle opět v designeru ze sekce Media. Po přeložení je zavolána akce when yandexTranslate1.GotTranslation a přeložený text je vložen do názvu tlačítka 4. Popis práce s touto komponentou je na
• Tlačítko 5 provede akci přehrátí zvuku "Hello World". Tato akce, stejně jako akce tlačítka 3, vyžaduje, aby zařízení nebo emulátor správně pracovaly se zvukem.
• Tlačítko 6 zobrazí skrytý obrázek s textem "Hello World". Obrázek byl vložen pomocí komponenty Image ze sekce User Interface, následně byl uploadován pomocí vlastnosti Picture (sloupec vpravo) a poslední úprava byla skrytí obrázku pomocí vlastnosti Visible hidden.

6. Aktivita 2 - aplikace využívající kreslící plochu "canvas"

Doporučený multimediální materiál

Tutoriál věnující se práci s kreslicí plochou (canvas). Základní aplikace se provedením záměrně blíží aplikaci v tutoriálu. Některé prvky, jako například obrázek na pozadí, jsou z důvodu vyšší přehlednosti vynechány. Uživatelské prostředí aplikace je v českém jazyce, identifikátory objektů v programu jsou pojmenovány v anglickém jazyce pro zachování shody s tutoriálem.

Aplikace pro práci s kreslicí plochou "canvas"

Ukázka základní aplikace pro práci s kreslicí plochou, design.

Ukázka kódu základní aplikace pro práci s kreslicí plochou.

Modifikace základní aplikace

Studenti mohou být ponecháni v experimentování s kreslicí plochou a kombinováním znalostí z předchozí lekce, případně mohou být nasměrováni ke konkrétním modifikacím. Např:

• doplnění obrázku na pozadí,
• přidání více barev,
• generování náhodné kresby viz obrázek níže,
• kresba různých geometrických tvarů,
• zvětšování a zmenšování kreslených geometrických tvarů a čáry,
• namíchání náhodné barvy,
• uložení obrázku do souboru,
• další náměty lze nalézt ve sborníku kódu https://puravidaapps.com/snippets1.php#canvas.

Ukázka kódu generujícího náhodné čáry.

7. Aktivita 3 - aplikace používající grafické objekty "sprites"

Doporučený multimediální materiál

Tutoriál provádějící užitím grafických objektů, sprites.

Aplikace pro ukázku práce s grafickými objekty

Ukázka modelové aplikace. TIP: Pohyb sprite se řídí z designeru, při vybraném sprite, hodnotou Speed v menu Properties.

Grafické soubory naleznete v sekci Grafické soubory použité v kurzu.

Ukázka kódu základní aplikace pro práci s grafickými objekty

Bloky when Clock1.timer = dle nastaveného intervalu provádí v náhodném čase 3 až 5 sekund přesun krystalu, jeho součástí je zviditelnění krystalu, pro případ, že by byl skryt.

When ImageSprite_Ufo.Flung = zajišťuje změnu směru sprite určenou na základě přejetí prstem.

When ImageSprite_Ufo.EdgeReached  = zajišťuje akci v případě, kdy se UFO dostane k okraji plochy.

When ImageSprite_Ufo.ColideWith = obsluha akce kolize s jiným sprite. V případě, že je kolidujícím objektem krystal, skryje krystal.

Modifikace základní aplikace

Studenti mohou být ponecháni v experimentování s grafickými objekty a kombinováním znalostí z předchozí lekce, případně mohou být nasměrování ke konkrétním modifikacím. Např:

• doplnění více sprites,
• export 3D sprites ze zdrojového grafického souboru,
• tvorba vlastních obrázků pro sprites,
  
• změna chování sprites při detekci kolize meteory jako překážky.

8. Aktivita 4 - použití proměnných "variable"

Doporučený multimediální materiál

Tutoriál ukazující jinou techniku práce s proměnnou, využívající hodnotu v komponentě label.

Aplikace pro ukázku práce s proměnnými

Zde proti předchozí verzi přibylo několik komponent. Pomocí Layout manageru jsou uspořádány popisek s názvem hry, tlačítko pro restart hry a popisek, pomocí kterého bude zobrazováno skóre hry.

Ukázka kódu základní aplikace pro práci s proměnnými

Bloky:

Initialize global skore to 0 =  výchozí inicializace globální proměnné, ke které lze přistupovat z libovolných bloků programu.

When ImageSprite_Ufo.ColideWith = blok obsluhy kolize s jiným sprite byl rozšířen a při detekci kolize je navyšována hodnota v promenné skore o 1 a nová hodnota je zobrazována v LabelSkore.

When ButtonRestart Click = provede akci vynulování skóre po kliknutí na tlačítko reset.

Modifikace základní aplikace

Doporučené modifikace programu:

• doplnění více sprites krystalů a přičítání různého skóre pro různé krystaly,
• vytvoření proměnné pro počet životů a odečítání životů při srážce s meteoridem,
• vytvoření proměnné pro rychlost UFA a změna rychlosti při sebrání "vylepšení",
• zrychlení jen na omezený čas, nastavení původní rychlosti po restartu.
  

9. Aktivita 5 - podmíněné větvení programu

Aplikace pro ukázku podmíněného větvením programu

Opět přibylo několik komponent, především několik časovačů, loď pro druhého hráče, střela.

Ukázka části kódu aplikace, ve které je využito několik typů podmíněného větvení programu.

Nově přibyla funkčnost:

• loď druhého hráče a obsluha jejího pohybu,
• obsluha výstřelu při dvojkliku na loď druhého hráče, z pozice x:y lodi ve směru letu lodi,
• animace letící střely,
• animace motorů lodi druhého hráče,
• obsluha kolize střely druhého hráče s lodí prvního hráče,
• zastavení lodi prvního hráče po zásahu střelou druhého hráče,
• obsluha kolize lodi druhého hráče s krystalem a počítání skóre,
• obnova nastavení pro střelu a druhého hráče při stisku tlačítka reset,
• timeout zabraňující opakování výstřelů rychle za sebou.

Významné bloky:

when ClockAnimaceAPohyb.Timer = časovač tikající po 100ms, řešící animaci (změnu obrázků) střely, v případě, že je letící. Animace motoru lodi druhého hráče. Řeší i zastavení lodi prvního hráče po zásahu střelou. Zastavení je řízeno proměnnou Ufo1_stoji, která je při zásahu nastavena na hodnotu 30. Loď stojí po dobu cca 30x 100Ms.

When ImageSprite_Ufo.ColideWith = V bloku kolize je navíc řešena obsluha zásahu střelou.

When ImageSprite_Ufo2.Touched  = detekce dvojkliku na loď druhého hráče. V totmto případě je snaha o odfiltrování dotyku, který nastává při ovládání směru pohybu lodi. Za dvojklik je považován dvojdotek lodi, který nastane v čase menším než 300Ms.

When ClockDetekceDvojklikuNaUfo2 = pomocný blok, který pomáhá při detekci dvojkliku.

Modifikace základní aplikace

Doporučené modifikace programu:

• možnost střelby i pro prvního hráče, druhý hráč reagujicí na zásah,
• animace střelby prvního hráče, animace lodi prvního hráče,
• detekce kolize lodí hráčů a přenesení lodí na protilehlé strany plochy,
• životy hráčů a odečítání při zásazích,
  
• zastavení a vyhodnocení hry po určitém časovém intervalu / po dosažení počtu bodů.

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

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.

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.

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.

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í.

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.

11. Aktivita 7 - datové seznamy a komponenty pro práci se seznamy

Video o vytváření seznamu v AI2 2 min . Creating lists in App Inventor 2

Tutoriál k vytváření seznamu. Making Lists (App Inventor 2)

Popis jednotlivých bloků seznamu. AI2 Lists.

Aplikace využívající seznamy. Math Blaster

Aplikace pro ukázku práce s datovými seznamy

Datové seznamy usnadňují práci s programem. Podobně jako procedury zobecňují kód a umožňují ho zjednodušit, seznamy zjednodušují práci s proměnnými a jejich obsahem. Aplikace napodobuje hru videostop. Po stisknutí tlačítka start se mění obrázky tří sprite a talčítkem stop ze změny zastaví. Hráč zvedá skóre, když se mu podaří zastavit na stejných obrázcích.

Komponenty modelové aplikace.

Inicializace seznamů

V ukázce jsou vytvořeny tři seznamy. sprites a jmena_souboru jsou inicializovany jako prázdné seznamy a jsou naplněny v bloku when Screen.Initialize.

Seznam jmena_obrazku je naplněn při inicializaci. Obsahuje řetězce, kterými se jednotlivé obrázky liší. V bloku when Screen.Initialize je nejdříve vytvořen seznam instancí sprites, následně je vytvořen seznam jmena_souboru, který obsahuje celé názvy souborů s obrázky. Seznamy tedy mohou obsahovat nejen čísla a textové řetězce, mohou obsahovat také instance objektů.

Cyklus nad objekty seznamu

Tlačítkem ButtonStartStop je řízeno pouštění a zastavení časovače. Časovač Clock1 spouští v cyklu "for each sprite in list get global sprites" cyklus nad dříve vytvořeným seznamem sprites. Pro každý sprite zavolá proceduru nahodny_obrazek, která vybere ze seznamu obrázků jeden náhodný. Po druhém stisknutí tlačítka ButtonStartStop je zavolána funkce pro vyhodnocení skóre.

Vyhodnocení výsledku

Uvnitř procedury vyhodnoceni je vytvořen seznam jako lokální proměnná. Pak potřebujeme zjistit, kolik obrázků je stejných. Místo porovnávání obrázků každého s každým je tento úkol řešen pomocí seznamu. V cyklu for each se projdou všechny zobrazené obrázky a přidávají se do seznamu, pokud tam ještě nejsou. Pokud jsou po cyklu for each v seznamu 3 obrázky, znamená to, že hráč nestrefil ani dva stejné. Pokud jsou v seznamu dva obrázky, hráč strefil dva stejné a jeden jiný obrázek. Pokud je v seznamu jen jeden obrázek, znamená to, že hráč strefil 3 stejné obrázky.

Procedura vyhodnocení může vypadat na první pohled komplikovaně, ale když si odmyslíte dvě vrstvy, vnoření samotné proceduty a vnoření lokální proměnné, k "porovnani" zbude jen for a case cyklus.

Tipy na modifikace programu:

• více než 6 obrázků, které se střídají,
• více než 3 sprites pro zobrazování obrázků,
• náhodné zastavení obrázku a ponechání beze změny,
• počítání počtu pokusů, případně omezení na x pokusů, pak reset.
  

12. Aktivita 8 - aplikace s více obrazovkami a správci rozložení

Informace ke správcům rozložení.

Informace k blokům kódu řídících screen.

Video-tutoriál k tvorbě

Video-tutoriál k tvorbě více "virtuálních" obrazovek v jedné aplikaci pomocí skrývání bloků správce rozložení. 

Informace ke správcům rozložení a obrazovkám

Správci rozložení "layout managers" pomáhají uspořádat objekty grafického prostředí "widgety". AI2 nabízí 3 správce rozložení, verikálního, horizontálního a tabulkového. Tito správci mohou být zanořeni do sebe. Důležité pro určení chování widgetů jsou i další parametry, jako je určení šířky / výšky, případně vyplnění celého prostoru nadřazené komponenty, vertikální a horizontální zarovnání.

Obrazovky "Screens" jsou významný koncept práce s aplikací, v prostředí Androidu velmi rozšířený. Na screen lze v AI2 pohlížet jako na samostatnou aplikaci. V editoru má svůj vlastní design a má svůj vlastní kód. S jinými obrazovkami ve stejné aplikaci nesdílí ani proměnné. Na práci s obrazovkami je třeba si v AI2 trochu zvyknout. Při práci s návrhářem se vám v zařízení nebo emulátoru přepínají obrazovky podle toho, který máte v AI2 vybraný. Ne vždy je reakce na přepnutí rychlá, nezřídka k ní vůbec nedojde. Bohudík výrazně lepší odezva a funkčnost je při použití vyexportované .apk.

Názvy obrazovek nemohou být přejmenovány, proto se vyplatí vhodnému názvu věnovat patřičnou pozornost. Screen1 nemůže být smazán. 

Aplikace pro ukázku práce s vnořenými správci rozložení a s více obrazovkami

Práce se správci rozložení a s obrazovkami je ukázána na aplikaci, která zabezpečuje přístup k "tajnému" obsahu. Aplikace generuje klávesnici s náhodným zamícháním kláves, aby nebylo snadné vysledovat heslo. Aplikace umožňuje zadat i heslo pro případ nebezpečí. Heslo je přijato, ale místo tajného obsahu je zobrazen falešný obsah.

Úvodní obrazovka modelové aplikace

Tato obrazovka po dotyku plochy zavolá obrazovku s přihlašovacím dialogem.

Kód obsahuje jediný blok, který zavolá obrazovku "ScreenLogin".

Obrazovka pro přihlášení uživatele

Je zde ukázáno použití vnoření vertikálního a tabulkového správce rozložení. Poprvé je použito také políčko pro zadání hesla. Chová se stejně jako prosté textové pole, ale místo znaků zobrazuje tečky.

Kód obrazovky pro přihlášení

Tomuto kódu dominuje procedura pro zamíchání číslic na klávesách. Postup je následující: Nejdříve jsou vytvořeny 2 seznamy. Seznam klavesy nelze naplnit ihned a je třeba ho plnit až v bloku inicializace obrazovky. Seznam je naplněn instancemi tlačítek a pak je zavoláno zamíchání.

Pro každé tlačítko / button je volán cyklus, který vybere náhodně jednu číslici, kterou tlačítku přiřadí. Přiřazenou číslici dále nechceme přiřazovat dalšímu tlačítku, a tak je vytvořen seznam pouzita_cisla, do kterého se použitá čísla ukládají. Cykus while test se opakuje tak dlouho, dokud není pomocí random vybráno takové číslo, které ještě žádné tlačítko nemá.

V programu se náhodná čísla generují jen pro 4 tlačítka. Obsluha dalších tlačítek může být předmětem samostatné práce žáků.

Zápis vybraných znaků do pole password

Uživatel může zapisovat heslo rovnou do pole password, ale pokud píše na zabezpečené klávesnici, pak je třeba obloužit předávání stisknutých kláves. Pro všechna tlačítka jde o stejnou akci, kterou obsluhuje procedura stisknuti_tlacitka. Pokud je v AI2 mnoho stejných bloků, doporučuji si je poskládat přes sebe a ušetřit místo.

Ověření hesla

V poslední ukázce kódu se řeší ověření hesla a reset hodnot.

Předem je třeba přiznat, že zabezpečení hesla je u této aplikace velmi slabé. Takto zadané heslo by případný útočník, který by se dostal k .apk naší aplikace, velmi snadno našel ve zdrojovém kódu. V praxi se heslo neporovnává přímo s konkrétním řetězcem, ale bývá uložena jeho zašifrovaná podoba. 

V této ukázce nám však jde o managery rozložení a o práci s obrazovkami. Při zadání správného hesla "000" (můžete samozřejmě libovolně změnit) se otevře obrazovka s tajným obsahem. Při zadání bezpečnostního hesla se také otevře ScreenTajne, ale je mu předán řetězec "Nebezpečí".

Obrazovka s tajným obsahem

Obrazovka s tajným obsahem využívá ještě více správce rozložení. Používá je i k akci tzv. "virtuálních obrazovek", kdy pouze jeden vrcholový layout manager je zobrazen, zatímco ostatní jsou skryti. Tím lze vytvořit iluzi více obrazovek. Na obrázku si všiměte, že "Display hidden component in Viewer" nad ukázkou obrazovky je zapnutý a v properties je pro HorizontalArrangementTOP2.visible vypnuto.

Kód obrazovky s tajným obsahem

V bloku when ScreenTajne.initialize se vyhodnocuje, zda byla obrazovka otevřena bezpečnostním heslem. Pokud ano a obdržela žetězec "Nebezpecí", pak zajistí skrytí tajného obsahu a přidá falešný obsah "Nic tu není."

Následující dva bloky se starají o přepínání mezi virtálními obrazovkami.

Tipy na modifikace programu:

• doplnění funkce bezpečnostní klávesnice pro další tlačítka,
• vyladění vzhledu bezpečnostní klávesnice, např. zarovnání na střed obrazovky, velikost a rozmístění tlačítek,
• přidání vlastní obrazovky, na kterou by byl uživatel odkázán při zadání jiného hesla,
• drobné zabezpeční hesla, aby nebylo v programu jako viditelný text "plain text".

13. Aktivita 9 - ukládání dat na paměťové kartě "storage"

Wikipedie k tématu ukládání dat.

Doplňkový tutoriál s aplikací malování. Práce s canvas, sprites, více obrazovek, vlastní procedury, ukládání dat. 

Popis komponent storage. 

Aplikace využívající ukládání a načítání dat z paměťové karty

AI2 používá k ukládání a načítání dat několik komponent. V ukázkové aplikaci budeme používat dvě komponenty. TinyDB a File. TinyDB je databáze vázaná ke konkrétní aplikaci. Protože všechny aplikace spouštěné z AI2 pomocí AI Companion jsou z pohledu systému jedna aplikace, je třeba pro ukládání do TinyDB dostatečně unikátní slova, aby si aplikace navzájem nepřepisovaly data. Storage file umožňuje ukládat data do souborů přímo do souborového systému.

Rozšíříme funkce aplikace z aktivity 6 o ukládání skóre hráčů a uložení snímku aplikace. Většina kódu aplikace zůstala stejná, bloky, které byly změněny nebo doplněny, jsou v této ukázce.

V minulé aktivitě bylo zmíněno, že jednotlivé screeny nesdílí proměnné. Sdílení proměnných mezi screeny se dá vyřešit právě pomocí TinyDB.

Komponenty modelové aplikace

U komponent se mnoho nezměnilo. Tlačítko Restart bylo přesunuto vlevo dolů a přibyla tlačítka Pause a Save. Významnou změnou jsou však komponenty TindyDB1 a File1.

Inicializace a načtení dat z databáze

Protože nelze proměnné inicializovat přímo hodnotami z databáze, je konstrukce následující. Nejdříve jsou vytvořeny globální proměnné. Následně, v bloku when Screen1.Initialize  jsou načteny a předány hodnoty z databáze. Pokud by v databázi požadavaná data nebyla, použije se výchozí hodnota z valueTagNotThere. Na závěr inicializace jsou hodnoty zapsány do LabelUfo1Skore a LabelUfo2Skore. 

Bloky využívající ukládání dat a mazání dat

Blok when ButtonRestart.click řeší vynulování obsahu globálních proměnných, zobrazení dat v LabelUfo1Skore a LabelUfo2Skore a stará se i o smazání dat v databázi. 

When ButtonSave.Click volá proceduru ulozit_skore, která zapíše hodnoty globálních proměnných do databáze. V databázi jsou hodnoty uloženy pod názvem (tagem) Ufo1_skore a  Ufo2_skore. 

V obsluze tlačítka Pause se kromě uložení skóre řeší vyrobení snímku obrazovky, jeho uložení na disk do souboru /AppInventor/SpaceMining.png uložení cesty a názvu do databáze  a otevření obrazovky ScreenPause. Cesta 

Design obrazovky ScreenPause

Většinu plochy zabírá komponenta Canvas1, ve které se budou zobrazovat screenshoty hry, před jejím pozastavením. Za povšimnutí stojí opětovné zařazení komponenty TinyDB. Pro každý screen, ve kterém se bude pracovat s uloženými daty v databázi, je třeba znovu přidat komponentu TinyDB.

Bloky obrazovky ScreenPause

Obsluha tlačítka Pokračovat nepoužívá otevření obrazovky Screen1, ale zavírá sama sebe. Kdyby tomu tak nebylo, vznikal by cyklus, který by znesnadňoval použití systémového tlačítka Zpět.

Blok when ScreenPause.Initialize řeší zobrazení skóre hráčů, načtení a zobrazení screenshotu z předchozí obrazovky.

Tipy na modifikace programu:

• záznam více údajů, (např. životů, počet srážek, souřadnice lodi a její směr), uložení, načtení a zobrazení těchto údajů,
• ukládání snímků pomocí dalšího tlačítka,
• na obrazovce ScreenPause prohlížení uložených screenshotů,
• přihlašování ke hře, zapamatování jmen hráčů a jejich skóre,
• zobrazování jmen hráčů, místo názvů UFO1 UFO2,
• výběr lodí, jejichž parametry (obrázek, rychlost pohybu, ...) by byly načítány z databáze.

14. Aktivita 10 - další prvky pro interakci s uživatelem a vlastní webový prohlížeč

Wikipedie k tématu grafického uživatelského prostředí GUI.

Popis komponent uživatelských ovládacích prvků User Interface. 

Video-návod, jak pracovat s komponentou  How to work with listpicker.

Video-návod, jak vytvořit vlastní webový prohlížeč. 

Ukázková aplikace prvků z nabídky User Interface a WebViewer

V této apliakce je ukázka všech prvků z User Interface, které jsme zatím v nepoužívali. Pro každý prvek je doplněn Label, který reaguje na uživatelskou akci. V dolní části je komponenta WebViewer, do které budeme zobrazovat obsah webových stránek. Screen1 má povolenu vlastnost Scrollable.

Bloky ukázkové aplikace

Výběr data (den, měsíc, rok) reaguje na událost dokončení výběru. V tu chvíli se složí text, který je vložen do popisku LabeldataPicker. Popiskům, které byly použity pro výstup, je nastaveno zelené pozadí.

Následuje vytvoření testovacího seznamu.

U výběrového seznamu ListPicker1 obsluhujeme dvě události. BeforePicking, ve kterém komponentu propojíme se seznamem. A AfterPicking, ve které předáme vybranou položku do textu popisku. 

Bloky ukázkové aplikace

Některé komponenty potřebují inicializaci. Tu můžeme provést například v bloku when Screen1.Initialize. V našem případě inicializujeme komponenty ListView1 a Spinner1 naším testovacím seznamem. Z komponenty ListView1 pak při události AfterPicking předáváme hodnotu vybrané položky do popisku. Spinner1 je ukázán později.

S obsluhou upozornění "notifikace" se pracuje jiným způsobem. Po stisknutí tlačítka ButtonNotifier je zavolána procedura upozornění, které je předán řetězec jako obsah zprávy. Zobrazení upozornění  je závislé na systému. Většinou jde o vrstvu, která se zobrazí nad plochou aplikace.

Šoupátko "slider" umožňuje výběr z předem definovaného rozsahu hodnot. Reaguje na změnu pozice a aktuální hodnotu předává do popisku. 

Bloky ukázkové aplikace

Spinner1 je rotující výběrový seznam. Po výběru předá hodnotu vybrané položky popisku.

TextBox1 patří k základním nástrojům komunikace s uživatelem. V našem případě probíhá předání hodnoty při události LostFocus, tedy při ztrátě výběru. K této události dochází, pokud jiná komponenta získá Focus. V naší modelové aplikaci většina komponent Focus nepoužívá, a tak nemusí být snadné tuto akci vyvolat.

Výběr času je komponenta velmi podobná výběru data (den, měsíc, rok), i obsluha je podobná.

Bloky obsluhy komponenty WebViewer

K webovým stránkám neodmyslitelně patří prohlížeče webových stránek. Jak by bylo možné vyrobit vlastní prohlížeč, když na tak náročném úkolu se podílí tisíce programátorů? Velmi snadno, pokud využijeme připravené komponenty, která většinu funkcí obslouží ve své základní výbavě. 

Pro výrobu vlastního prohlížeče potřebujeme pouze zaznamenat a předat URL adresu webové stránky, kterou má prohlížeč načíst a zobrazit. To řešíme pomocí textového pole TextBoxURL. Je zde doplněna kontrola, zda adresa stránky obsahuje řetězec http://, a pokud ne, doplní ho. Pak je adresa stránky předána proceduře komponenty WebViewer1, která se postará o načtení a zobrazení stránky.

Ukázkový prohlížeč je doplněn o tlačítko s přechodem na domovskou stránku. Podobným způsobem by bylo možné vyrobit tlačítka pro přímý přechod na jiné stránky. Protože by v případě použití systémového tlačítka Zpět byla vypnuta naše aplikace, nelze ho využít pro přechod zpět v prohlížeči. Proto je prohlížeč doplněn o tlačítko zpět, které lze použít k cestě zpět navštívenými stránkami.

Tipy na další práci:

• vytvořit si samostatnou aplikaci s prohlížečem stránek a vyřešit snadný přechod na X oblíbených stránek,
• rozšířit vlastní aplikaci o některé komponenty z User Interface,
• vyzkoušet pomocí slideru ovládat parametry některých komponent, např zvětšování / zmenšování obrázku.

15. Závěrem

Co dál?

V čase, který můžete věnovat další tvorbě, doporučuji věnovat čas vašim vlastním programům. Na programech můžete pracovat samostatně, lépe však ve skupinkách. Tvorba programů není jen o programování, je to také o návrhu aplikace, plánování a dalších činnostech, které patří spíše k softwarovému inženýrství. 

Doufám, že vám programovací prostředí App Inventor a tento kurz pomohly nahlédnout pod pokličku programování pro prostředí Andoid. Pro některé z Vás to možná bude jediný a dostačující způsob, jak pro Android vytvářet programy, pro některé z vás to bude jen jeden z prvních kroků, díky kterým si ochočíte komplikovanější vývojová prostředí.

Děkuji za společnou procházku tímto kurzem.

Ať už se vaše kroky budou ubírat různými cestami, ať je vaše putování prospěšné a radostné.

Filip Vaculík