Petr Němec: Naprogramujte si aplikaci pro mobilní telefon

Článek popisuje možnost programovat aplikace pro mobilní zařízení v cloudovém řešení, v závěru je videoukázka práce s nástrojem na příkladu jednoduché aplikace.

Úvod

Již několik let při výuce informatiky přemýšlím nad tím, jakým způsobem učit kapitolu programování, neboť to, jak jsem se učil programovat na vysoké škole, je záležitost stará 20 let. Nejdříve jsem učil žáky programovat v textovém režimu (Basic, Pascal), pak v grafickém prostředí Delphi. Všechna tato vývojová prostředí kladou důraz na syntaxi, což dnešní mladou generaci spíše odradí, než přitáhne k programování. Pokud programujeme se všemi žáky v rámci běžných hodin IKT (ne tedy v kroužku či jen s výběrovou skupinou žáků), je vhodnější použít takové moderní vývojové prostředí, které je intuitivní, dovoluje okamžitý náhled na programovanou aplikaci, podporuje současné technologie, je nezávislé na syntaxi a hlavně umožňuje naprogramovat takovou aplikaci, kterou si žák ihned odnese domů, bude ji mít stále u sebe a bude ji schopen ukázat rodičům či kamarádům. To znamená, že by měla být spustitelná na mobilním telefonu či v tabletu. Před několika týdny se mi právě takový nástroj dostal do ruky. 

MIT Inventor 2

Nástroj MIT App Inventor 2 je cloudové vývojové prostředí, ve kterém můžete programovat aplikace pro mobilní zařízení s OS Android přímo v okně internetového prohlížeče. Celý systém se nazývá MIT's Center for Mobile Learning's App Inventor website a běží na Google's App Engine service, z čehož plyne, že pokud hodláte aplikaci používat, potřebujete účet u Google.

Popis prostředí

Na úvod této kapitoly jen uvedu, že se nepovažuji za programátora, a že cílem tohoto článku je pouze ukázat zajímavý nástroj, který se dá ve výuce programování použít. Proto mi, prosím, odpusťte možné nepřesné formulace. A nyní již k popisu prostředí programu.

V okamžiku, kdy se přihlásíte do systému (http://ai2.appinventor.mit.edu), jste vyzváni k zadání názvu projektu. V dalším kroku se spustí vývojové prostředí, které obsahuje dva režimy - Designer (Návrh) a Blocks Editor (Editor bloků), mezi kterými lze přepínat v pravém horním rohu příslušnými tlačítky.

Designer

Režim s názvem Designer slouží k vytvoření uživatelského rozhraní (to, co uvidíte na displeji mobilního zařízení po spuštění hotové aplikace). Při tvorbě můžete využít dva typy objektů:

• vnitřní, které budou umístěny na obrazovce mobilního zařízení (např. popisky, textová pole, tlačítka) ;
• vnější, které se umístí mimo obrazovku a svou činnost vykonávají na pozadí (např. časovač, čtečka čárových kódů, gyroskop, akcelometr atd.).

Designer

Block Editor

V tomto režimu vytváříme vlastní program pomocí tzv. bloků, které dělíme na:

• vestavné - do této kategorie patří bloky kontrolní (if, for, while atd.), logické (true, false, not atd.) matematické (součet, rozdíl, odmocnina, sin x atd.), textové (délka, sloučení textů, část atd.) a dále pro práci se seznamy, barvami, proměnnými a procedurami;
• specifické - tyto bloky jsou vázány na komponenty, které jsme umístili na obrazovku aplikace v Designer režimu;
• any - zde najdeme bloky, které ovlivní chování všech stejných komponent (např. máme-li na obrazovce umístěno více tlačítek, zde můžeme nastavit chování všech naráz - např. barvu).

Block Editor

Abyste mohli sledovat, jak bude aplikace vypadat a chovat se na mobilním zařízení, je třeba ji propojit s tímto zařízením. Máte k dispozici variantu přes USB kabel nebo přes WiFi, v obou případech je třeba do zařízení nainstalovat aplikaci MIT AI2 Companion App. V případě bezdrátového propojení musí oba přístroje pracovat v rámci společné sítě WiFi. Pak stačí tuto aplikaci spustit na mobilu (popř. tabletu), ve vývojovém prostředí MIT App Inventor 2 zvolit odpovídající typ propojení (USB, WiFi) a naskenovat QR kód. V tento okamžik můžeme v průběhu programování aplikace ihned testovat aplikaci na mobilním zařízení. 

Pokud nevlastníte zařízení s Androidem, můžete si nainstalovat emulátor, který poběží na monitoru počítače a bude se tvářit jako mobilní zařízení. Podrobný postup naleznete v tomto online návodu. 

Ladění programu s emulací mobilu

Celý článek je na adrese http://spomocnik.rvp.cz.