Forrás: [origo] | Pintér Mónika | 2016.10.15.

Bemutatjuk egy egyszerű online szerkesztőfelület működését egy labdás játék fejlesztésén keresztül pontról pontra. Aki szeretné elsajátítani a programozói gondolkodásmódot, a kódolás alapjait, annak kiváló alkalom. A szoftver megismerése és használata jó lehet egy rendhagyó informatikaórán is!

A MIT egyetem és a Google szakemberei által kifejlesztett App Inventorral a programozás alapjait, az objektumok használatát tudjuk megtanulni. Úgy tudunk Androidon futó appokat létrehozni, hogy ehhez nem kell ismerni semmilyen programnyelvet, az alkalmazásokat ugyanis előre legyártott blokkokból állítjuk össze. 

Mi kell hozzá?

• Számítógép.
• Internet (Chrome vagy Firefox böngésző ajánlott).
• Google-fiók (felhasznalonev@gmail.com).
• Androidos okostelefon: ez csak ajánlott, hiszen ezen ellenőrizhetjük az appot.
• Két hasznos link: App Inventor online szerkesztő és az AI Companion androidos kiegészítő app
• Angolnyelv-tudás: bár próbáljuk az alapokat magyarul átadni, a program angol nyelvű. Ha egy objektum nevét nem ismerjük, a Sztaki szótárban, vagy a Google Fordítóval online ellenőrizhetjük, mit is jelent. 

Felkeszülés

Magát a programot egy böngészőben érhetjük el, az ai2.appinventor.mit.edu oldalon. Az App Inventor használatához először is szükség van egy Gmail-fiókra, ezzel tudunk belépni a személyes fejlesztői oldalunkra.

Az androidos mobilunkat is érdemes már a fejlesztés megkezdése előtt felkészíteni az appok futtatására, tesztelésére. Ehhez le kell tölteni a Play Áruházból az AI Companion nevű alkalmazást. Ez teszi lehetővé, hogy

a fejlesztés közben folyamatosan ellenőrizni tudjuk a készülő alkalmazást,

így időben észrevegyük a hibákat, mielőtt véglegesítenénk a telepítőfájlt (.apk formátumban).

Hogy a végleges appot is tudjuk majd telepíteni, ahhoz az Androidon a Beállítások/Biztonság menüben kell engedélyezni az „Ismeretlen forrásból származó alkalmazások telepítését”. Ezzel adunk engedélyt, hogy egy külső forrásból származó, azaz nem a Google Playből származó appot is lehessen telepíteni és használni a mobilon.

Készítsünk együtt egy játékot!

Az alábbi leírásban bemutatjuk az App Inventor felületét, és készítünk egy nagyon egyszerű labdás alkalmazást. (A képekre kattintva felnagyíthatja őket!)

1. Nyissuk meg a böngészőben az App Inventor oldalát, a fejlesztők Chrome vagy Firefox használatát javasolják. A felugró ablakban adjuk meg a Gmail-fiókunkat, és engedélyezzük a hozzáférést. Ha felugrik egy üdvözlő ablak (Welcome), kattintsunk alul a Continue (folytatás) gombra. 

2. Új projekt megnyitása: Start a new project. Adjunk neki egy nevet, például "labdasjatek". Fontos: ékezeteket sem a projekt, sem a gombok elnevezésénél nem használhatunk!

 Forrás: Origo

3. Jelenleg a Designer felületén vagyunk, ehhez látjuk is a jobb felső sarokban, hogy ez a gomb sötétebb, míg mellette a blokkszerkesztő (Blocks) halványabb.

4. A képernyő bal oldalon látjuk a különböző objektumokat (Palette), több kategóriában (felület, elrendezés, média, rajz és animáció, szenzorok). Így lehet például elhelyezni egy gombot, listát, képet, amely elindítja az okostelefon kameráját, elérni, hogy hangot adjon ki, kihasználni a mobil giroszkópját, megjeleníteni egy labdát a kijelzőn, megosztani valamit a közösségi oldalakon – rengeteg a lehetőség.

Forrás: Origo

5. Középen látjuk az alkalmazás előnézetét. Ha a tetején bepipáljuk, akkor megjeleníthetjük a rejtett összetevőket (Display hidden components), és átválthatunk tabletnézetre is. 

6. Jobb oldalon vannak az összetevők (Components), és a hozzá tartozó beállítási ablak (Properties), ahol

az éppen kijelölt, aktív összetevő tulajdonságait adhatjuk meg:

elhelyezkedése, mérete, a háttér színe, az animáció mozgása: elhalványul, belenagyít, jobbra-balra kisuhan a kijelzőn, látszódjon-e a cím stb.

7. Először a bal oldali Drawing and Animation menüben válasszuk ki a Canvas objektumot, és az egérrel húzzuk középre a programunk felületére.

8. A jobb oldali Components panelen válasszuk ki a Canvas1 objektumot, majd még eggyel jobbra a Properties oszlopban állítsuk be úgy a magasságát és a szélességét, hogy az egész területet kitöltse. Ehhez a Width és a Height opciónál egyaránt a "Fill parent" lehetőséget kell kiválasztani.

Forrás: Origo

9. A bal oldali Drawing and Animation menüből húzzunk egy labdát (Ball) az app felületére. Jobboldalt, a tulajdonságainál a sugarát (Radius) állítsuk nagyobbra, 15-20-as méretűre.

Forrás: Origo

10. Hogy az adott objektum (Ball) viselkedését beállítsuk, lépjünk át a blokk alapú szerkesztőre: ehhez a jobb felső sarokban kattintsunk a Blocks gombra.

Forrás: Origo

11. A Blocks felületén baloldalt látható a Built-in: ezek a parancsok, amiket használhatunk. Alatta találhatók az adott képernyőn (például Screen1) található összetevők, ha ezekre kattintunk, megjelennek a hozzájuk tartozó, speciális parancsok.

Minden blokkot a megfog és húz (Drag-and-Drop) módszerrel tudunk használni.

12. Jobboldalt maga a blokk alapú szerkesztő van, itt fog a végső "kódsor" elhelyezkedni. A jobb felső sarokban lévő iskolatáska fogja segíteni a könnyű másolás+beillesztést. Elég megfogni, és ide behúzni egy blokkot, amit még használni akarunk, és később a táskára kattintva megtaláljuk, rákattintva és kihúzva újra lehet használni. Olyan, mint egy kedvencek menü. Alul pedig a kuka van: ide dobhatjuk ki, ami mégsem kell. 

13. Kattintsunk baloldalt a Ball1 nevére, megjelennek a labdához kapcsolódó lehetőségek. Ezek közül a barna színű "when Ball1 .Flung" blokkot húzzuk át a szerkesztőfelületre. Ez teszi lehetővé, hogy a mobil kijelzőjén egy suhintással meg tudjuk lökni a labdát, mintha az ujjunkkal biliárdoznánk.

Forrás: Origo

14. Ismét kattintsunk a Ball1 nevére, és legördítve megtaláljuk az alábbi két sötétzöld blokkot: "set Ball1.Heading to” és "set Ball1.Speed to”. A képen látható módon húzzuk a barna bokszba, egymás alá.

Forrás: Origo

15. Meg kell határozni a labda irányát és a sebességét az ujjunk suhintásának iránya és sebessége alapján. Ehhez tartsuk az egeret a barna bokszban a "heading" szócska fölé, itt láthatjuk a képen szereplő vörös blokkot (get heading), fogjuk meg, és húzzuk a megfelelő zöld blokk végére. Ugyanezt végezzük el a speed szócskával is, tartsuk fölötte az egeret, és húzzuk helyére a megfelelő vörös blokkot (get speed). 

16. Ha valami nem stimmel, a bal alsó sarokban megjelenik egy sárga vagy piros figyelmeztetés. Ha az adott blokkon rányomunk a háromszögre, kiírja, hogy mi vele a probléma.

Forrás: Origo

17. Fontos: a program automatikusan ment mindent magától, de felül a Project/Save project menüponton mi magunk is készíthetünk egy mentést. 

18. Most pedig teszteljük, mit alkottunk eddig. Ehhez a programban felül a Connect (kapcsolódás) menüben kattintsunk az AI Companionra. A monitoron felugrik egy ablak, van rajta egy QR-kód és mellette egy hatjegyű kód.

Forrás: Origo

19. Nyissuk meg a mobilon az AI Companion appot. Vagy gépeljük be a kódot, és bökjünk a Connect with code gombra, vagy a Scan QR-code gombra nyomunk. Ekkor a telefon kamerája megnyílik, irányítsuk a QR-kódra, amíg a mobil be nem olvassa.

Ha sikeres a csatlakozás, elindul az app, amit fejlesztettünk, és kipróbálhatjuk.

20. A labda megállt a kijelző széleinél, igaz? Érdemes kicsit továbbfejleszteni az alkalmazást.

21. A programban ismét kattintsunk a Blocks felületen a Ball1 összetevőre, majd a barna “when Ball1 .EdgeReached” nevű blokkot húzzuk be a szerkesztőbe. Ez szabályozza, hogy mi történjen, amikor a labdánk a kijelző szélére ér.

 Forrás: Origo

22. A legjobb, ha visszapattan onnan. Kattintsunk ismét bal oldalt a Ball1 névre, onnan a lila "call Ball1.Bounce edge” blokkot húzzuk be. Ezek után a barna bokszban tartsuk az egeret az “edge” szócskára, és onnan húzzuk a lila végére a “get edge” blokkot.

Forrás: Origo

23. Most újra tesztelhetjük, hogy visszapattan-e. Előfordulhat, hogy megszakad a kapcsolat a mobil és a webes szerkesztő között, ilyenkor újra kell kapcsolódni a fent leírtak szerint.

24. Ha kész az app, jól működik, akkor a Build menüpont alatt tudunk .apk kiterjesztésű telepítőfájlt generálni. Ha van a mobilon QR-kód olvasó, akkor a “provide QR-code for .apk” pontot válasszuk, elkezdődik a folyamat, a végén a képernyőn megjelenik a kód, így közvetlenül a mobilra tudjuk letölteni a fájlt. A “save .apk to my computer” pontban pedig a gépre menthetjük el a kész appot, hogy onnan például USB-kábelen másoljuk át a telefonra. 

25. Aki nevezne a versenyre az applikációval, az a fenti “Project / My Projects” menüpont alatt jelölje ki az adott projektet, a bal oldali pipa bekattintásával. Felette a “Publish to Gallery” gombra rányomunk: meg kell adni nevet, képet az appnak, illetve a legalsó dobozban egy rövid leírást. Ha készült a projektről leírás vagy videó, vagy ha felhasználtunk idegen kódot, azt is megadhatjuk. 

Amint a publikálás megtörtént, a SHARE gombra kattintva látjuk is a linket, ezt kell a versenykiírás szerint elküldeni a megadott e-mail címre, a megadott módon.

Forrás: Origo

Persze ezen a játékon belül is rengeteg mindent lehet még állítani, finomítani. Például a Designer oldalon a Canvas, azaz a háttér színét zöldre színezhetjük, a labdát pirosra, hogy ne sima fekete-fehér legyen a felület.

Ahogy hozzáadhatunk gombokat, láthatatlanná varázsolhatjuk őket, így érve el, hogy amikor rákattint a kijelzőre a felhasználó, akkor működjön a beállított parancs. Megadhatunk igen-nem válaszokat, zenét, videót és képet rendelhetünk a megnyomásukhoz. Rengeteg a lehetőség! 

Hogyan tovább?

Ha valakinek ötlete támadt, de nem tudja hogyan csinálja meg: érdemes a Google keresőben az "App Inventor" vagy az "app inventor magyarul" kifejezést beírni,

rengeteg angol és magyar nyelvű leírás és példa készült már a programhoz.

Ahogy a YouTube videómegosztón is sok tartalom van, ahol meg tudjuk nézni, hogyan készülnek az appok, oktatóvideók segítik a munkát.

Aki mégis elakadna, az a tud kérdezni a Facebook-eseményen a verseny ideje alatt, illetve ugyanitt 2016. október 19-én szerdán 9 és 13 óra között a Codecool fejlesztőjével közösen válaszolunk azonnal mindenkinek. Utána a techbazis@origo.hu címen lehet segítséget kérni. 

Aki 2016. október 21-ig nevezne az elkészült applikációval a versenyen, az ezen az oldalon meg tudja nézni a feltételeket, és hogy hova várjuk a pályaműveket. 

Mindenkinek jó időtöltést kívánunk! :)