Elkészítettük a forradalmi Bem appot

2016.03.15. 16:59
0 hozzászólás
Megpróbáltunk egy hülye viccre építve fél nap alatt appot írni az Androidra, és az eredmény annyira jó lett, hogy a szoftvertervező grafikusok biztosan sírva fakadnak a látványtól. Bemutatjuk a programozáshoz vezető útat.

Most igazán forradalmi a hangulat a programozás körül, és ha nemzethalált nem is vizionálnak a kódolásügyi megmondóemberek, mi is megírtuk, hogy súlyos gazdasági lemaradás lehet abból, hogy a sehonnai bitang honfitársaink nem a billentyűzet fölött domborulnak. Ennél jobb alkalmat nehezen találtunk volna, hogy megvalósítsuk évek óta dédelgetett szóviccünket álmunkat, a Bem appot.

Egy mobilos applikáció felépítése nehéz feladat, egy jól működő cégben többféle szakértő vesz részt a folyamatban. Vannak felhasználóiélmény-kutatók, kezelőfelület-tervezők, és persze mezítlábas kódolók is, bár az utóbbi jelző ritkán kerül fel névjegykártyára. Már az elején letértünk a technológiai vállalatok által kitaposott ösvényről, a szoftver specifikálása körülbelül három perc alatt megvolt.

Meg kell keresni Bem apót sok télapó között. Olyan lesz, mint az a pandás-hóemberes kép.

Ez volt a terv, amivel megnyertük a hétvégi extra melót. Kódolni egyáltalán nem tudunk, utoljára a BASIC-et buherálgattuk a DOS 5.0-ban. De éppen ez a lényeg, hogy ma már az is készíthet szoftvert, aki ezt soha nem tanulta. Az MIT által közkinccsé tett App Inventorral vágtunk bele a munkába, ebben ugyanis húzd és dobd módszerrel, néhány könnyed egérmozdulattal lehet összeszerkeszteni a programkódot, és a végén generálni tudunk egy .apk fájlt, ami feltelepíthető az androidos mobilokra.

A grafikai tervezésbe Szarvas is beszállt néhány fantasztikus képpel. Az eredeti a Wikipediáról származik, annak kellett levágni a hátterét.

A történelmi leírásokból nem derül ki, hogy Bem József altábornagy megrögzött Mikulás-rajongó volt-e, már amikor éppen nem a csatatéren hősködött, de a róla készült kép alapján egyértelmű volt, hogy ideális szereplő az általunk kitalált képrejtvényhez.

Bemelegítés, indulás

A programkódot egy weboldalon kell összerakni, ahová Gmail-fiókkal kell belépni. Egy Androidra hasonlító felület fogad minket, és a szimulált app bal oldalán találjuk azokat a modulokat, amiket az app felületére tudunk húzni. Vannak grafikai elemek, feliratok, kapcsolók, szövegdobozok, kamerát aktiváló eszközök, és akár a szenzorokat is felhasználhatjuk, például a giroszkópot, a gyorsulásmérőt vagy a gps-t. Van beépített adatbázis, bedrótozhatjuk a közösségi oldalakat, és akár sms-t is küldhetünk.

Ha letöltünk a mobilunkra a Play Áruházból egy MIT AI2 nevű appot, akkor abban folyamatosan ellenőrizni tudjuk az app működését. Ehhez a weboldal tetején lévő Connect menüben kell az AI Companionra klikkelni, és a kód bepötyögésével vagy a QR-kór leolvasásával létrejön az online kapcsolat.

Az alkalmazás felépítése nagyon hasonlít egy weboldaléra. Az appban is több kijelzőn (screen) tudunk tartalmakat megjeleníteni, és csak annyi a különbség, hogy itt nem linkekre kattintunk, hanem gombok vagy események visznek át másik felületre. Nem is feltétlenül kell kattintani, hogy valami történjen, hiszen akár egy esemény is újabb változtatások láncolatát indíthatja be.

Arra kell odafigyelni, hogy az App Inventorban korlátozott a felhasználható kijelzők száma, amire persze csak akkor figyelmeztetnek, amikor már túlléptük a limitet. Érdemes 7-8 lapnál megállni, és az applikációban bekövetkező változásokat (például amikor eltűnnek feliratok, és a helyükön megjelennek új gombok) az objektumok láthatóságának átkapcsolásával érdemes megoldani.

Ehhez az App Inventor kezelőfelületének másik fő részét kell használni, a blokkszerkesztőt. Ezen történik maga a kódolás, itt alakítjuk ki a program működésének a logikáját. Hogy hatékonyan tudjunk dolgozni, az App Inventor által megadott alapértelmezett neveket érdemes azonnal átírni. Az alábbi kép bal oldali listáján látható, "Label2, Label3, Button1" nevű elemekről már most nem tudjunk megmondani, hogy ezek mely objektumok, míg a "kameras_doboz" és az "ide_jon_a_foto" nevek mindent elárulnak a funkcióikról.  

blokktervezo.PNG

A fenti példa is azt mutatja, milyen egyszerű felhasználni a mobil fényképezőjét. Az egyik minijátékban arra kérjük a felhasználót, hogy készítsen magáról egy fotót, és ezután a képet (amit mi nem tárolunk el sehol, csak a felhasználó telefonján marad meg) el kellett helyezni a program grafikus felületén. A kamera képének fogadása előtt lekapcsoljuk a fényképezőt bekapcsoló ikont, hiszen arra már nincs többé szükség, és ezzel szabadítjuk fel a helyet, hogy elférjen a kijelzőn az általunk készített fénykép.

Ezt az egészet mi sem önállóan találtuk ki, hanem egy kamerás app leírásából vettük át a szükséges elemeket. Így derült ki hosszas keresgélés nélkül, hogy létezik a "when Camera1.AfterPicture" névre hallgató modul, amely az exponálás után hajt végre  utasításokat.

A fenti kód nagyon egyszerűnek tűnhet, és valóban az is, de volt ennek olyan változata is, amiben még ötször több elemet kapcsolgattunk oda-vissza. Optimalizáltunk, az objektumok elrendezését segítő Horizontal- és VerticalArrangement dobozok láthatóságát átkapcsolva a bennük lévő tucatnyi objektumot is ki-be kapcsolhatjuk, tehát nem kell egyesével mindegyik láthatóságát kezelni.

Hosszú órák mentek el azzal is, megpróbáltuk megoldani az App Inventor egyik hibáját – sajnos eredménytelenül. Amikor behúzunk egy általunk készített fotót, az alapesetben 90 fokkal jobbra forgatva jelenik meg, ezért 270 fokkal el kell fordítani. Ilyenkor azonban egy vastag fehér keret jelenik meg a kép körül, amit lehetetlen eltüntetni. Találtunk leírásokat arról, hogy a képeket érdemes sprite-okba helyezni, és azt elforgatni, ám ezzel újabb problémákat generáltunk, és bonyolultabb lett a kód.

Bemutató, letöltés

A Google Play Áruházban ne keressék az appunkat, mert nem volt időnk arra, hogy áttoljuk a kódot az engedélyeztetési eljáráson. Hogy mindenki szabadon használhassa az alkalmazást, közzétettük az egészet az App Inventor galériájában. Innen bárki átveheti a saját projektjei közé, szabadon módosítható, továbbfejleszthető, megosztható. Van egy .apk fájlunk is (feltettünk WeTransferre), de azt javasoljuk, hogy inkább a cikkben említett MIT AI2-n keresztül próbálják ki az appot, közvetlenül az App Inventor oldaláról. Így nem kell kikapcsolni a mobilon az Android egyik fontos védelmi funkcióját, amely az ismeretlen forrásból származó appok települését akadályozza meg (itt van róla részletesebb leírás).

A programunknak van egy aprócska hibája is: a fejlesztés során használt Sony Xperia T mobilunkon minden tökéletesen működött, egy másik mobilon azonban nem tudtuk behúzni a fényképet az appba. De még így is büszkék vagyunk, mert ennél rosszabb appokat is láttunk már, sőt, ennél rondábbakat is küldtek már be appfejlesztői versenyekre. Bár most már nagyon érezzük a késztetést, hogy végre megtanuljunk egy fejlettebb programnyelvet, amivel komolyabb appokat lehet írni, abban is egészen biztosak vagyunk, hogy az App Inventorban a mienknél sokkal jobb alkalmazásokat lehet létrehozni. Ha Ön már megtette, akkor küldje el nekünk, és bemutatjuk.

Június a Balatonon

Díjnyertes családbarát hotel, 06.17.-ig 25 900 Ft/ fő/2 éjtől

Görögország, Horvátország kedvező áron!

Tengerparti nyaralások ezen a nyáron, szuper árakon, fantasztikus helyszíneken.