Zpracoval: Miloš Bukáček

Průběh výuky

App Inventor je cloudový nástroj pro programování mobilních aplikací na platformě Android. Používá vizuální (blokové) programování. Do aplikace se žáci přihlašují prostřednictvím internetového prohlížeče Google Chrome pod svým uživatelským Google účtem na webu https://appinventor.mit.edu

Obrázek 62: Logo App Inventor a ikona pro zahájení tvorby aplikace

 Příprava na výuku

Testování vytvářené mobilní aplikace probíhá v reálné čase přímo na displeji mobilního zařízení. Za tímto účelem je nutné před zahájením výuky do mobilních zařízení nainstalovat z Google Play mobilní aplikaci MIT AI2 Companion.

Průběh a organizace výuky

Tvorba mobilních aplikaci v App Inventoru probíhá ve dvou krocích. Nejprve v Designéru komponent (Designer) definujeme vzhled aplikace. Poté v Editoru bloků (Blocks) nastavíme chování aplikace, tedy jak bude aplikace reagovat na uživatele a vnější události.

Vytvoření vzhledu aplikace

Designer je rozdělen na několik částí. Uprostřed najdeme prohlížeč (Viewer), kde umísťujeme komponenty a tvoříme vzhled aplikace. Komponenty můžeme rozlišit na viditelné a neviditelné. Viditelné jsou např. tlačítka, nápisy, obrázky a vidíme je, když aplikaci spustíme, často se označují jako uživatelské rozhraní aplikace. Neviditelné komponenty nejsou součástí uživatelského rozhraní, zpřístupňují integrované funkce zařízení, např. přehrávání zvuku, měření času, určování zeměpisné polohy.

Nalevo od prohlížeče najdeme paletu (Palete), kterou tvoří seznam komponent, z nichž přesouváme položky do okna prohlížeče. Komponenty použité v daném projektu se zobrazují napravo od prohlížeče v okně komponenty (Components).

Pod seznamem komponent se nachází oblast zobrazující média (obrázky a hudbu) použitá v projektu. Zcela napravo najdete oddíl ukazující vlastnosti komponent (Properties). Když na některou z komponent klepnete, zobrazí se její vlastnosti (dílčí prvky komponent, které lze upravovat).

Obrázek 63: Rozložení Designéru komponent v aplikaci App Inventor

Náhled aplikace v mobilním zařízení

Vytvářenou aplikaci by měli žáci sestavovat po malých částech a co nejčastěji testovat její vzhled a funkčnost na mobilních zařízeních. App Inventor umožňuje vygenerovat QR kód, který slouží ke spárování vytvářené aplikace v prohlížeči s jejím živým náhledem.

V mobilním zařízení je třeba spustit aplikaci MIT AI2 Companion a pomocí fotoaparátu naskenovat vygenerovaný QR kód z obrazovky počítače. Poté na mobilním zařízení vidíte živý náhled vámi tvořené aplikace. Veškeré změny, které v aplikaci provede, se okamžitě projeví také na displeji vašeho mobilního telefonu.

Obrázek 64: Živý náhled vytvářené aplikace na mobilním telefonu

Nastavení chování aplikace

Chování definuje, jak bude aplikace reagovat na události. V App Inventoru se chování definuje pomocí systému bloků. Dříve se aplikace řídily lineární řadou pokynů: A → B → C. Většina současných aplikací nevykonává příkazy v předdefinovaném pořadí, ale reaguje na události, které vyvolá (nejčastěji) uživatel aplikace. Aplikace stále obsahují sekvence příkazů, ale ty se provádí pouze jako odpověď na nějakou událost:

                Událost1: A → B → C

                Události2: D → E

Aplikace může reagovat na události vyvolané uživatelem (stisknutí tlačítka), na události, které nastanou v telefonu (změna času, změna čidla orientace) nebo mimo telefon (data z webu).

Chování definujeme v Editoru bloků (Blocks) tak, že na plochu prohlížeče (Viewer) přetáhneme bloky jednotlivých událostí, vytváříme zde nové proměnné a procedury.

Obrázek 65: Část programu sestavená v Editoru bloků v aplikaci App Inventor

Stažení aplikace

App Inventor je nástrojem provozovaným v cloudu, díky tomu můžete aplikaci snadno testovat, aniž byste ji museli do mobilního zařízení stahovat. Problém nastane v okamžiku, kdy telefon odpojíte od App Inventoru. Aplikace spuštěná v telefonu se vypne a nikde nenajdete její ikonu, protože ve skutečnosti není nainstalovaná. Z aplikace ale můžete vytvořit balíček (APK) a nainstalovat ho do telefonu, aby aplikace fungovala i po odpojení od počítače.

Na co si dát pozor

• App inventor je optimalizovaný pro práci v internetovém prohlížeči Google Chrome, proto nemusí být plně funkční v jiných prohlížečích.
• Pokud žáci při práci využijí vlastní mobilní zařízení, musí jim škola umožnit připojení k internetu prostřednictvím Wi-Fi.
• Název nového projektu v App Inventoru musí být jednoslovný a bez diakritiky, stejná pravidla platí pro názvy jednotlivých komponent, proměnných a procedur
• Před instalací vytvořené aplikace do mobilních zařízení bude pravděpodobně nutné povolit instalaci z neznámých zdrojů.
• App Inventor je v angličtině, což může být překážkou pro některé pedagogy (pro žáky doporučených ročníků bude využití zcela bezproblémové)

Alternativní řešení:

Alternativně lze pro tvorbu mobilních aplikací pomocí blokového programování využít aplikaci Thunkable (https://thunkable.com). Funguje na velmi podobném principu jako App Inventor. Hlavní výhoda aplikace Thunkable spočívá v tom, že je možné vytvářet mobilní aplikace pro operační systémy Android i iOS. Je však třeba upozornit i na řadu úskalí této komerční aplikace. Uživatelské rozhraní pro tvorbu mobilních aplikací je méně přívětivé, volně dostupná verze aplikace umožňuje využít úložiště o kapacitě pouze 200 MB (což může být pro tvorbu multimediálních aplikací značně omezující) a všechny vytvořené projekty jsou veřejné a volně editovatelné.

Zdroje, metodika, návody

[1] WOLBER, David, Hal ABELSON, Ellen SPERTUS a Liz LOONEY. App Inventor: Vytvořte si vlastní aplikaci pro Android. Brno: Computer Press, 2014.

Zatím jediná kniha o App Inventoru, která byla přeložena do češtiny, vyšla v roce 2014. Přestože App Inventor od té doby doznal řady vizuálních i funkčních změn, lze knihu stále doporučit zejména začátečníkům, kteří zde najdou skvěle zpracovanou metodiku a ukázkové úlohy.

[2] VACULÍK, Filip. ANDROID programování v MIT App Inventoru [online]. [cit. 2020-03-22]. Dostupné z: https://otik.uk.zcu.cz/bitstream/11025/29364/1/Android.pdf

Sada deseti aktivit (pracovních listů) v češtině vytvořená v rámci projektu Bav se vědou Západočeské univerzity v Plzni.

[3] Tutorials for MIT App Inventor. MIT App Inventor [online]. [cit. 2020-03-22]. Dostupné z: https://appinventor.mit.edu/explore/ai2/tutorials

Sada ukázkových úloh v angličtině s podrobným popisem, rozděleno podle obtížnosti na tři úrovně – začátečníci, středně pokročilí, pokročilí.