Úloha: Vytvorte projekt Kocur (krátke u nie je preklep, v AI v názvoch objektov nemožno používať diakritiku). Na obrazovke telefónu bude obrázok kocúra, ak naň klikneme, kocúr zamňauká. Ak prst na kocúrovi podržíme, kocúr bude priasť (telefón zavibruje). Keď mobilom zatrasieme, kocúr bude prskať.

Po vytvorení nového projektu New project sa zobrazí nasledujúca stránka:

Vľavo sú ovládacie prvky, v strede dizajn aplikácie, napravo zoznam použitých prvkov a celkom vpravo vlastnosti aktuálneho objektu.

Najprv umiestnime na obrazovku telefónu pokyn, ako má používateľ aplikáciu ovládať. Presunieme kurzor na prvok Label (nápis, návestie, štítok). Myšou ho presunieme na telefón, upravíme vlastnosti nápisu: zväčšíme veľkosť písma (FontSize) , farbu pozadia (BackgroundColor), farbu textu (TextColor), zmažeme text a nahradíme ho textom Pohlaďte kocúra.

Potrebujeme aplikácii sprístupniť dva súbory: obrázok kocúra a zvuk, ktorý vydáva. Kliknite na Média pre projekt  kocúr, celkom dole kliknite na kitty.png, súbor stiahnite do počítača, potom kliknite na meow.mp3 a tiež ho stiahnite do počítača. Môžete tiež vyhľadať obrázok kocúra na internete a vyhľadať iné mňaučanie.

Presuňte na telefón prvok Button (tlačítko), vo vlastnostiach kliknite na Image (obrázok), otvorí sa nové okno, kliknite na UploadFile (nahraj súbor) a z priečinka kam sa uložili súbory kitty.png a meow.mp3 nahrajte súbor kitty.png. Tlačítko sa zmenilo na kocúra. Stredom tlačítka prechádza nápis, postavte sa vo vlastnostiach tlačítka na Text a text zmažte.

V ľavej sekcii prejdite na položku Media, vyberte prvok Sound a presuňte ho na telefón. Sound sa v telefóne nezobrazí, zobrazí sa pod ním medzi Non-visible component (neviditeľné prvky). Vo vlastnostiach kliknite na Source (zdroj), potom na UploadFile a nahrajte súbor meow.mp3.

Dizajnovú časť máte predbežne hotovú. Prejdite k programovaniu aplikácie. Vpravo hore kliknite na Blocks. Zobrazia sa dve sekcie, vľavo je sekcia Blocks (bloky), vpravo sekcia Viewer (zobrazovač, náhľad). Kliknutím na Button1 sa zobrazia nasledujúce bloky:

Hnedé bloky predstavujú udalosti, ktoré  môžu s tlačítkom nastať. Prvý  when Button1.Click (keď je tlačítko stlačené) je ten, ktorý potrebujete. Postavte sa naň, držte stlačené tlačítko myši a presuňte ho do sekcie Viever. Keď klikneme na Button1, má sa ozvať mňaukanie, kliknite v sekcii Blocks na Sound1, zobrazí sa:

Je tu jedna udalosť a niekoľko akcií, ktoré možno so zvukom robiť. Chcete prehrať zvuk, vyberte blok Call Sound1.Play a presuňte ho do bloku When Button1.Click. Ďalej chceme, aby kocúr nielen mňaukal, ale aj priadol (vibroval). Vyberieme blok When Button1.longClick, presuňte blok call Sound1.Vibrate do bloku longClick.  Tento blok má výrez, kam pre blok s počtom milisekúnd, ako dlho má mobil vibrovať. Potrebujete blok s číslom, čísla súvisia s matematikou, kliknite na položku Math a prvý blok je číslo, presunieme ho do výrezu a nastavíme napríklad číslo 500.

Aplikácia je hotová, potrebujeme ju skompilovať, nájdite celkom hore položku Build, kliknite na ňu zobrazia sa možnosti App (provide QR code for Apk) a App (save .apk to my computer). Vyberte prvú položku, aplikácia sa preloží, po preklade sa zobrazí okienko s čiarovým kódom, keď kód zosnímete čítačkou čiarových kódov, stiahne sa súbor s vašou aplikáciou. Po stiahnutí súboru, kliknite na otvoriť, mobil vás možno upozorní, že takýto typ súboru môže poškodiť mobil, keďže ste aplikáciu sami vytvorili, je bezpečná, takže ju nainštalovať môžete.

Pokiaľ chceme, aby kocúr syčal, keď mobilom trasieme, vráťte sa do dizajnéra, v ľavej sekcii vyberte položku Sensors (senzory), potom AccelerometerSensor (senzor zrýchlenia), presuňte ho na mobil. Na internete vyhľadajte zvuk syčania mačky, stiahnite ho do počítača, na telefón presuňte blok Sound a uploudujte zvuk syčania. Znova otvorte Blocks, kliknite na AccelerometerSensor1, vyberte blok when AccelerometerSensor1.Shaking, kliknite na Sound2 a vyberte blok Play. Znova skompilujte aplikáciu a stiahnite ju čítačkou čiarového kódu.

Poznámka: Aby ste nemuseli aplikáciu stále kompilovať a inštalovať do telefónu, na Google play nájdite aplikáciu Mit AI2 Companion, keď ju na mobile spustíte a v prehliadači kliknete na Connect a Companion, zobrazí sa QR kód. Po jeho zosnímaní mobilom sa v mobile spustí simulácia aplikácie.

Námety na samostatnú prácu

• aplikáciu môžete upraviť podľa vlastnej fantázie, môžete pridať tlačítko na ktorom bude pes a po kliknutí naň bude štekať, môžete pridať aj iné zvieratá a zvuky, ktoré vydávajú (obrázky a zvuky nájdite pomocou vyhľadávača)
• ak máte psa alebo mačku, môžete ich odfotiť a nahrať zvuky, ktoré vydávajú
• aplikáciu možno upraviť tiež tak, že používateľ môže odfotiť zviera a nahradiť obrázok, ktorý je v aplikácií vlastným obrázkom, to isté možno urobiť so zvukom
• možno ju tiež upraviť do podoby kvízu, kliknutím na tlačítko sa ozve náhodný zvuk a používateľ má kliknúť na zviera, predmet, … , vydávajúci takýto zvuk
• Aby ste sa v programovacej sekcii lepšie orientovali, je vhodné v Designer nazvať jednotlivé prvky podľa toho čo predstavujú. Button1 – Kocur, Sound1 – Mnau, …

Literatúra:

• Článok bol napísaný na základe prvej kapitoly knihy App Inventor, Computer Press 2014