Android programozás kezdőknek – MIT App Inventor

A MIT App Inventor egy felhő alapú eszköz. Közvetlenül a webböngészőben „Fogd és vidd” módszerrel készíthetünk alkalmazásokat Android vagy iOS eszközökre. Az App Inventor gyors beállítása után elkezdhetjük az alkalmazások létrehozását. 

Alkalmazások készítése közben lehetőség van az élő tesztelésre. Élő teszteléshez telepíteni kell az MIT App Inventor Companion alkalmazást telefonra vagy táblagépre. Fontos, hogy a telefonunk és a számítógépünk azonos WiFi hálózatra csatlakozzon.

Ha ezzel megvagyunk, készítsük el az első Android alkalmazásunkat. A szerkesztőt a ai2.appinventor.mit.edu oldalon találjuk. Kezdéshez kattintsunk a „CreateApps!” gombra.

Majd válasszuk a „Start new project” menüpontot a „Projects” menüből.

Majd a felugró ablakba írjuk be az alkalmazásunk nevét. Legyen ez most a HelloWorld.

Az App Inventor a Tervezőből és a Blokkszerkesztőből áll. Kezdjük a Tervezővel. A szerkesztő felülete négy oszlopból áll.

A ‘Palette’ oszlopban találjuk az összetevőket, ezekből a „fogd és vidd” mószerrel húzzuk át a szükséges komponenseket a ‘Viewer’ oszlopban található telefonra a megfelelő helyre. A ‘Components’ oszlopon megjelenik egy példány a kiválasztott elemből. Itt ha rákattintunk, a ‘Properties’ oszlopban beállíthatjuk az elem tulajdonságait.

---

Alkalmazásunk élő teszteléshez nyissuk meg a telefonra telepített ‘MIT AI2 Companion‘ alkalmazást, majd nyomjuk meg a „scan QR code” gombot.

A webes felületen kattintsunk a ‘Connect’ menüben az ‘AI Companion’ menüpontra. Ekkor meg fog jelenni a csatlakozáshoz szükséges QR kód.

Pár másodperc múlva láthatjuk a ‘Hello World’ nevű alkalmazásunkat a telefonunkon.

Az Alkalmazás fut, de nem történik semmi. Szükség van valami interakcióra. A ‘Palette’ oszlopból adjunk hozzá egy Szövegmezőt és egy Gombot.

Láthatjuk, hogy a ‘Components’ oszlopban a ‘Screen1’ gyermekeiként létrejött egy ‘Label1’ nevű szövegmező és egy ‘Button1’ nevű gomb.

A ‘Label1’ elemre kattintva a ‘Properties’ oszlopban a ‘Text’ értékeként írjuk be „Nyomd meg a gombot” A ‘Button1’ ‘Text’-hez pedig a „Hello World” értéket adjuk meg.

Ezzel az alkalmazásunk kinézete elkészült, de a gomb megnyomásakor nem történik semmi. Most váltsunk át a blokkszerkesztőre, a jobb felső sarokban kattintsunk a ‘Blocks’ gombra.

Ezen a felületen két oszlopot találunk. A ‘Blocks’ oszlopban vannak a programunk működéséhez szükséges vezérlőelemek kategóriákba csoportosítva, ezek közül egyszerűen húzzuk a megfelelő blokkot a ‘Viewer’ mezőre.

A vezérlőelemek szinte magukért beszélnek. Egyszerűen kapcsoljuk őket egymásba.

Itt az történik, ha megnyomjuk a ‘Button1’ gombot, akkor lecseréli a ‘Label1’ tartalmát a megadott stringre, jelen esetben a ‘Hello World’-re.

Most bővítsük ki a programot még egy gombbal, ami visszaállítja az eredeti állapotba az alkalmazásunkat. Ehez menjünk vissza a ‘Designer’ szerkesztőhöz és adjunk hozzá még egy gombot, majd a ‘Text’ értékéhez írjuk azt hogy „Vissza”.

Most visszatérhetünk a Blokkszerkesztőhöz.

Az alkalmazásunk működéséhez három blokkot kell készíteni.

Az első blokk a programunk induláskor elrejti a ‘Button2’ nevű gombot.

A második blokk a ‘Button1’ megnyomásakor lecseréli a ‘Label1’ tartalmát a ‘Hello World’-re, majd a ‘Button1’ gombot elrejti, és a ‘Button2’ gombot megjeleníti.

A harmaik blokk a ‘Button2’ megnyomásakor visszacseréli a ‘Label1’ tartalmát a ‘Nyomd meg a gombot’ stringre, majd a ‘Button2’ gombot elrejti, és a ‘Button1’ gombot újra megjeleníti.

Lássuk mit csináltunk.

Ha szeretnénk telepíteni az alkalmazásunkat, el kell készíteni az ‘(.apk)’kiterjesztésű fájlt. Kattints a ‘Build’ menü ‘Android App (.apk)’ menüpontra. Kis idő után elkészül a telepítőfájl. Lehetőségünk van letölteni, vagy QR kód beolvasással azonnal telepíteni a frissen elkészült alkalmazást.

Kicsit játszhatunk a komponensekkel, átszínezhetjük, megváltoztathatuk a méretüket, pozíciójukat. Különböző elrendezéseket adhatunk hozzá. Pár kattintás és teljesen megváltozik az alkalmazásunk kinézete.

Remélem sikerült bemutatni, milyen egyszerűen készíthetünk pár kattintással saját Android alkalmazásokat.

Jó szórakozást!

---