Egy kis android, oop bevezető.

Egy kis múltba révedés....

Figyelem a mai kor gyermekeit, akik már akkor tudták kezelni a számítógépet, az egeret, amikor még beszélni sem tudtak - a saját fiam rá az egyik példa, képes volt valami kínai írásokkal teletúzdelt flash-es játéknál is megtalálni a play gombot, amivel én nem tudtam megküzdeni ;-) -, de nem kapták meg azt az örömöt (majdnem élm...t írtam, de attól a szótól sikítófrászt tudok kapni, mert nagyon rátaláltak a marketingesek), amit mi.

Az első számítógép amivel találkoztam a TRS-80 számítógép klónja volt. A HT-1080Z -t kipróbálhatja most is bárki, hiszen van hozzá emulátor. Ma csak mosolyogni lehet a "képességein", 1.7 mhz-es processzor, ami a tetejében nem egy órajelciklus (sőt, kevesebb) alatt dolgozott fel egy utasítást, mint a maiak, 16 kilobyte ram, 8 kilobyte-nyi "operációs rendszer", amit mondjuk azért ugyanúgy a Microsoft készített. Nekem Bill Gatesről nem csak az az élményem, hogy állandóan lefagy a cucca, hanem a zseniális akkumulátor törlő XOR AX utasítás, ami egy bájtból, két órajelciklus alatt elintézte a dolgát, a tetejében a flageket is beállította. Nyamm, még ma is bele tudok borzongani :D.

Nem volt informatikatanár, a tetejében egyetlen egy gépe volt akkor az iskolának amikor szerencsésen odaérkeztem. Volt viszont néhány lelkes diák, meg egy szintén lelkes fizika tanár, akik egymást segítve fedezték fel a masinát. Hihetetlen, hogy mennyi mindent meg tudtunk tanulni, gyakorlatilag a semmiből. Ezt az egymásnak segítő, egymást inspiráló közeget kerestem azóta is mindenütt, illetve annak örülnék, ha hasonlót elő tudnék segíteni a mai közegben is.

Emiatt örültem meg az MIT app inventorának.
Egyszerű. Azonnali eredményt ad, nem kell túl bonyolult dolgokkal szembesülni, noha a mélyben azért ott van sok minden.

Miről is lesz most szó?

El fogunk készíteni egy androidon futó egyszerű alkalmazást, és közben megtudunk néhány dolgot az OOP alapú programokról, amit majd később hasznosítani tudunk. Félreértés ne essék, igazából nem programot írunk, csak megtanulunk objektumokat használni. Az igazi erőssége ennek a rendszernek éppen a korlátozott mivoltából fakad. Néhány - fontos - dolgot itt nem tudunk megcsinálni, de éppen ez segít minket abban, hogy használni tudjuk az objektumokat, és a hiányosságok segíthetnek minket a megismerésben.
Sajnos csak androidon tudnak futni az így elkészült alkalmazások, a tetejében grafikus felületen kell dolgoznunk, ez a nem látó kollégák számára nem szerencsés, és tudtommal nincs még meg az a program, amivel ők is könnyedén birtokba vehetnék ezt az eszközt. (Mindenesetre már tárgyaltunk róla, hogy mi lenne a jó megoldás ez ügyben, de korlátozottak az erőforrásaink. Egyszer talán majd eljutunk oda is, vagy megtaláljuk a vágyott segédprogramot, illetve hardware kiegészítőt, ki tudja?)

Első lépések az app inventor 2-ben.

 Szükségünk lesz egy gmail fiókra. Ez már a második megkötés, tudom. Android, meg gmail fiók. Ez van.
 Csépeljük be a google keresőjébe, hogy app inventor 2.
 ai2.appinventor.mit.edu

 Be kell jelentkeznünk a google azonosítónkkal. A felhasználási feltételeket én már végigolvastam, és elfogadtam pedig rigorózus vagyok ilyen ügyekben, de attól még nem árt átböngészni.

Üdvözöl bennünket, túrát kínál fel, én ezt ignorálni szoktam jellemzően, bár biztosan nem árthat meg.
Nyissunk egy új projektet (projekts/new projekt), én most a blogbalabdás nevet adtam neki. Amit javítottam is rögvest blogbalabdas-ra, mert nem tudott mit kezdeni az ékezettel a projekt nevében. (Most nem térnék ki az ASCII kódtábla és a magyar nyelv küzdelmes kapcsolatára, megszenvedtem én is az elmúlt 30 akárhány év alatt, de a mai népek sincsenek ebből a buliból kihagyva ;).)
Hümm. Változik ez a platform is, jöttek új elemek. Azért a social/phonecall -nak nem nagyon örülök. Szerintem ez veszedelmes dolog, kéretik nem szórakozni vele. Ehh. Persze a futtató környezet miatt követeli magának az app a telefonhívás kezdeményezést, amit 6-os droid alatt meg sem tudunk tagadni tőle, morc lettem emiatt. (Kéretik bekapcsolni a repülőgép üzemmódot a haverok appjainak futtatásakor!)

Bal oldalon (palette) látjuk az objektum osztályokat (user interface,layout,media,drawing and animation,sensors, social,storage....), azokon belül pedig a használható objektumainkat.
Középen balra (viewer) a form (screen) objektumainkat, jobbra (components) a felhasznált komponenseinket, illetve jobb oldalon az éppen kijelölt objektum adattagjait (properties).

Meg szoktam említeni, hogy az OOP egyik komoly előnye mutatkozik meg az arcunk előtt éppen. A böngészőnk által használt nyelv - javascript - csak hasonlít az OOP-re, illetve annak egy kiterjesztéseként is felfogható, de semmiképpen nem azonos az androidon futó java-val. Mégis itt készítünk el valamit, ami majd "ott" fut. Ezt bővebben majd később fejtjük ki, mindenesetre már itt is látszik annak az ereje, hogy a programjaink, illetve objektumaink "belseje" el van rejtve a külvilág elől, azokból csak a publikus adattagok, illetve metódusok az érdekesek. Van az app inventorhoz böngészőben futtatható emulátor is, pont ennek köszönhetően.

Szemfülesek észrevehetik a blocks gombot ott fenn, de azzal majd később foglalkozunk.

Első csapásmérésként írjuk át a screen1 nevű képernyőnk szövegét - nem a nevét, bár azt is megtehetnénk, de most az nem annyira lényeges - Pattogólabdára. Jobb oldalt a properties résznél alul van a title adattag, ott tehetjük ezt meg. Már tettünk is valamit :D.

No de tűzzük ki a feladatot.

Ki fogunk rakni a képernyőre két gombot (illetve dupla gombokat) úgy, hogy az egyik a bal oldalon legyen, a másik a jobb oldalon, valamint egy labda fog pattogni egy dobozban, aminek a gombok segítségével tudjuk befolyásolni a sebességét, illetve az irányát.
Amit csak látunk magunk előtt, minden objektum. (Nem megyünk bele nagyon a részletekbe, majd szépen kialakul nemsokára, hogy mi is az. Legalábbis remélem.) A képernyő maga is az. Helyezzünk el benne két gombot. bal oldalon a palette osztályból a button (gomb) objektumot húzzuk rá a screen1-re. Kétszer.

Hümm. Ezek egymás alá helyezkedtek el. A screen objektumba helyezett egyéb objektumok nem tudják meghatározni a saját helyüket. Megnézhetjük, a gomb objektumot kiválasztva, jobb oldalt nem találunk olyan property-t ami erre akár csak utalna. Akkor hogyan csináljuk meg a feladatunkat? Bizony, amikor ezeket az objektumosztályokat tervezték, nem akartak teljesen szabad kezet adni az objektum használóinak. (Egyszerűbb így a változásokat, pl. a képernyőforgatást kezelni, mindennek oka van.)
Jó. Nem akartak. De itt nem tudunk belepiszkálni az objektumokba, csak használni tudjuk őket, most mi legyen?
A screen objektum speciális "dobozkákat" tud elhelyezni magában, a tetejében felülről lefelé teszi ezt. No de lehet hogy van olyan doboz, ami magán belül más szabályokat követ.
Voila!
Tényleg van ilyen.
Nézzük csak meg a layout objektumcsoportot. Ott van ilyen, hogy hozizontalarrangement. Az kell nekünk. Tegyük is rá a screen-re, és húzzuk bele a két gombot. (A kék jel segít "beletalálni", nem is olyan egyszerű.)

Jó, de hogy lesz a két gomb a két szélén? Fogós, ravasz kérdés, de nem véletlenül lett ez a feladat. Továbbra sem tudunk megadni fix pozíciót. A components oszlopban kattintsunk a horizontalarrangement1 komponensünkre, és nézzük meg az állítható értékeket (properties). Szélesség (width), magasság (height), mind a kettő automatikus. Legyen a width fill parent. Hopp. A konténerünk kiment a képernyő széléig. Ok, de a gomb nem. Mi van akkor, ha közéteszünk még egy gombot, aminek a szélessége szintén fill parent, a text adattagja pedig üres?

A középső gomb "széttolta" a másik kettőt. Hurrá. (Az automatic hatására az objektum belülről, a benne levő elemekből számolja ki a szélességét, a fill parent esetén pedig megpróbálja kitölteni azt az objektumot, amiben van.)
Na most akkor töröljük is ki a három gombunkat.
components, gomb, delete.
Kell egy jobbra, balra és egy fel,le gombpár. A fel, le egymás alatt értelem szerűen. Az eddigiek alapján akkor a fel/le gombokat egy layout/verticalarrangement dobozba kell raknunk. Ha valaki ügyes, akkor nem feliratokat ír a gombokra, mert azt csak a magyarok értik meg, hanem a gombok képeit változtatja meg a megfelelően megrajzolt nyilakkal. Ezt most én kihagyom, a diákok jellemzően roppant gyorsan megtalálják a gomboknál az images adattagot, és némi paint bűvészkedés után már meg is vannak vele. Minden gombnál a text propertyt állítsuk be.
Nevezzük át a gombjainkat a funkció szerint. A components sorban ráállunk, és a rename gombbal tehetjük ezt meg.
Valami ilyesmit kell kapjunk. Természetesen nem árt megnézni a különböző komponensek állítható értékeit, nem csak azokat, amelyekre én felhívom a figyelmet.

Jól van, ott vannak a gombok, de hol a labda?

A képernyő csak dobozokkal tud valamit kezdeni, valóban. Hol lesz nekünk labdánk? Nagyon régi megoldás a sprite (szellem) technika én a commodore64 típusú gépen futottam vele össze először, de gyanítom hogy már akkor sem volt új dolog. Játékok készítésénél nagyon hasznos, amikor valamilyen grafikai objektumot úgy tudunk mozgatni a képernyőn, hogy nem kell foglalkoznunk szinte csak azzal, hogy hol van, és milyen sebessége, iránya van, minden mást intéz helyettünk maga a sprite. Ha két sprite ütközik pl., akkor arról majd ők tájékoztatnak. (A C64-nél ezt külön hardware, egy segédprocesszor intézte!)

Mindjárt lesz labdánk is, de előbb egy olyan dobozt kell elhelyeznünk, amibe belepakolhatjuk. Nyilván a drawing and animation objektumcsoportnál kell keresgélnünk. Ő a canvas (kanavász, vászon).
A szélessége és a magassága is legyen fill parent. Imígyen:

Persze állíthatjuk a háttérszínét például, de háttérképet is adhatunk neki.
Tegyünk rá egy labdát. (ball)
Az interval értékét állítsuk át 100-ról 10-re. Ennyi millisecundumonként történik a labdánkkal valami. Ha 100-on maradna, akkor csak tizedmásodpercenként mozdulna meg, amit már szaggatottnak érzékel a szemünk, azt hihetjük hogy az eszközünk lassú, pedig ez nem így van. Ha kicsinek találjuk a labdánkat, akkor a sugarát (radius) állítsuk nagyobbra. A headinget mondjuk 12-re. (Ez az irányát jelenti, jobbra 0, felfelé 90, balra 180, lefelé 270, adja magát, ha az ember tudja hogy egy kör 360 fokos :)...)
A sebesség legyen mondjuk 2 egyelőre.

A kis programunk dizájnjával el is készültünk.

Jöjjön a "kódolás"

Fenn, jobb oldalon a designer gomb mellett nyomjuk meg a block feliratú gombot.

Először kattintsunk mondjuk a ball nevű komponensünkre.

Az adott objektumhoz tartozó elemeket három szín különbözteti meg. A barnák az események, a lilák a metódusok (függvények), a zöldek pedig az adattagok (propety-k) lekérdezői, illetve beállítói.
Csapjunk a lovak közé, úgy könnyebb lesz. A labdához tartozik egy edgereached esemény. Amikor a labda eléri valamelyik sarkot, ez az esemény kerül meghívásra. (Hú, ez pongyola picit, meg nem is teljesen igaz ebben a formában, de remélem érthető.)

A labdához tartozik egy bounce (pattanás, ugrás) nevű metódus, ami megváltoztatja a labdánk irányát, paraméterként azt az oldalt kéri, aminek nekiütközött. Az esemény bekövetkeztekor ez az oldal (edge) paraméterként a rendelkezésünkre áll.
Húzzuk ki az edgereached eseményt a kódterületre. Ebbe kell majd "belepattintanunk", hogy mit tegyen, ha ez az esemény bekövetkezik. Még egyszer a labda, és a bounce (lila) metódust húzzuk bele.

Alul a sárga háromszögnél van egy figyelmeztetésünk, mert a bounce nem kapta még meg a paraméterét.

A gettel lekérdezünk, a settel beállítunk, mi most csak le akarjuk kérdezni, hogy melyik oldalnak mentünk. Ha ügyeskedni akarunk akkor megváltoztathatjuk véletlenszerűen az irányát.

Kell a mathból egy összeadás doboz, a labdából egy set heading, egy get heading, meg egy véletlenszám -10től 10-ig.

Ennyitől a labdánk már pattog is :D!

No de nekünk ez nem elég, változzon a sebesség, meg az irány is!

Milyen esemény is kell nekünk?
Az adott gomb lenyomása.
Mit változtatunk meg?
A labda egy tulajdonságát.
Vigyázat! A számoknak is van külön dobozkája! Szintén a math objektumból választható ki, ott van legfelül.

Mindjárt készen vagyunk :D.
Ha rábökünk az elkészült gombeseményünkre jobb gombbal, akkor megduplázhatjuk. Ne essünk kétségbe, hogy azonnal hibát jelez!
Mert a felgombot lecseréljük legombra, a plusz 2-t meg minusz kettőre. Itt jegyezném meg, hogy nem árt egy feltételhez kötni a sebességcsökkentést.

Ha mind a négy gombbal megvagyunk, ez lesz az eredmény:

És készen vagyunk!

Már csak az alkalmazást kell legenerálnunk.

A build menüpontban a generate apk to my computert kiválasztjuk, és

már kész is a friss, ropogós apk-nk, amit feltölthetünk a telefonra, és használhatjuk is.
Ínyencek berakhatnak több labdát, egy dobozt pl. , ami mozog és róla is visszapattan a labda.

Legközelebb egy egyszerű játékot mutatok meg, ami nem sokkal bonyolultabb mint ez, de sokkal látványosabb :D.

Lusta disznóknak itt van az importálható változata annak, amit az imént összekattintgattam. Nem próbáltam ki, nagy valószínűséggel működik, ha nem, akkor vagy én észreveszem, vagy valaki szóljon rám :D.