1. Bevezetés az Android alkalmazások készítésébe

A mobil eszközök használata egyre nagyobb teret hódít, egyre többet és egyre több célra használjuk a telefonjainkat és tabletjeinket. Ezek az eszközök Android, Windows Mobile vagy iOS operációs rendszert futtatnak. Általában egy mobil alkalmazás egy platformra készül, ha több platformon is szeretnénk azt elérhetővé tenni, a fejlesztőnek el kell készítenie az alkalmazás változatát a kívánt platformokra. A mobil alkalmazások fejlesztéséhez általában a választott platformtól függően különböző programozási nyelvek mélyreható ismerete szükséges.

Mi a foglalkozásaink során az Android platformra történő fejlesztéssel fogunk megismerkedni. ehhez az MIT App Inventor programozási környzetét fogjuk használni, amely a mobil fejlesztést nagyon leegyszerűsíti és hasonlóvá teszi a Scratch-ben megszokott építőkökockák használatán alapuló vizuális szoftverfejlesztéshez. Az App Inventor segítségével a kezdők is nagyon gyorsan létre tudnak hozni komplett alkalmazásokat.

1.1. A fejlesztőkörnyezet telepítése

Az App Inventor A Scratch-hez hasonlóan egy web-alapú fejlesztőkörnyezet, a mobil alkalmazásainkat a felhőben tudjuk létrehozni és onnan letölteni a mobil eszközeinkre. A fejlesztőkörnyezet az ai2.appinventor.mit.edu címen érhető el, a környezet használatához egy Google felhasználói névre lesz szükségünk.

A felület angolul és franciául is elérhető, magyarul viszont nem. A fejlesztőkörnyezetben létrehozott alkalmazást azonnal ki is próbálhatjuk a mobil eszközünkön. Ehhez el kell végeznünk pár beállítást, amelyeket a http://appinventor.mit.edu/explore/ai2/setup.html oldalon részleteznek. A felajánlott három opció közül válasszuk az elsőt, ha a gépünk és a mobil eszközünk ugyanarra a wifi hálózatra kapcsolódik. A harmadik opció akkor lehet hasznos, ha a mobilunkat adatkábellel kapcsoljuk a gépünkhöz.

Miután követtük az utasításokat, a választott opciótól függően a Connect menüből csatlakozzunk az eszközünkhöz. Az app-unk, amin dolgozunk meg fog jelenni a telefonon és minden változtatás, amit az AppInventor-ban végzünk azonnal szinkronizálódik az eszközünkre.

Minden esetben, amikor folytatni szeretnénk a munkát, miután lezárt a telefonunk vagy kiléptünk az AI Companion alkalmazásból, a kapcsolatot újra kell építeni a fentebb leírt módon. A fejlesztőkörnyzet beállítását az első oktatóvideó is bemutatja: https://www.youtube.com/embed/Vdo8UdkgDD8

1.2. Az App Inventor felülete

A fejlesztőkörnyezetnek két fő nézete van: a tervező nézet és a blokk szerkesztő, e két nézet között a projektsáv jobb oldalán található gombok segítségével válthatunk.

A tervező nézetben bal oldalt helyezkedik el a komponens paletta, a rajta található vizuális és non-vizuális komponensekből építhetjük fel az alkalmazásunkat. Ezek a Scratch-beli szereplőknek felelnek meg. A komponenseket az előnézet-panelbe húzhatjuk, ezzel összeállítva az alkalmazásunk felhasználói felületét. Minden komponens jónéhány, a küllemét vagy viselkedését befolyásoló tulajdonsággal rendelkezik, ezek értékét a Tulajdonságok ablakban tudjuk megtekinteni és megváltoztatni, ha szükséges.

 
 
img001 - 1.2 - 1.jpg

A Blokk nézetben az App Inventor különböző általános célú és komponens-specifikus, "fiókokba" rendezett blokkokat bocsát rendelkezésünkre ahhoz, hogy összeállítsuk az alkalmazásunk vezérlését. Ez a folyamat ismétcsak a Scratch utasításainak használatához hasonló.

img001 - 1.2 - 2.jpg

1.3. Az első alkalmazásunk: A szövegfelolvasó

Az első oktatóvideó mintájára készítsük el az első mobil alkalmazásunkat, amely felolvassa az általunk begépelt angol szöveget. Az alkalmazást a következő lépéseket követve hozhatjuk létre:

  • Hozzunk létre egy új projektet a Projects --> Start new project menüpont alatt, adjunk nevet a projektünknek (a név nem tartalmazhat ékezetes karaktereket, szóközt és egyéb speciális karaktereket). A programunk főképernyője megjelenik tervező négyzetben.​

  • Adjunk hozzá a főképernyőhöz egy-egy Label, TextBox és Button komponenst. A Label Text tulajdonságát a Properties ablakban változtassuk meg a következő értékre: 'Írd be a felolvasandó szöveget'. A TextBox Width tulajdonságát módosítsuk 'Fill parent'-re. A nyomógomb Text tulajdonságát változtassuk meg az 'Olvasd fel!' értékre, a Shape tulajdonságot pedig módosítsuk Rounded-re. A képernyő (Screen) tulajdonságainál állítsuk be vízszintes és függőleges középre igazítást és a háttérszínt állítsuk be a nekünk tetszőre. A Title tulajdonság szintén tetszés szerinte megváltoztatható. 

  • A Media komponens-csoportból adjunk az alkalmazásunkhoz egy TextToSpeach komponentst. A kapott alkalmazás kinézete ilyesmi lesz:​

 
download.png
img001 - 1.3 - 1.png
  • Ezzel elkészültünk az alkalmazásunk felhasználói felületével. Nincs más hátra, mint az elvárt működés leprogramozása a Blokk nézetben. 

  • Rakjuk össze a követkző kódot: ​

img001 - 1.3 - 2.png
  • A program logikája a fenti ábra alapján eléggé egyértelmű, különösen Scratch-es tapasztalatok birtokában. Figyeljük meg, hogy az eseményeket hogyan tudjuk lekezelni és hogy adjuk át a paramétert a Speakeljárásnak. Teszteljük az alkalmazásunkat a telefonunkon.

  • Az alkalmazásunk működik, de ha később is szeretnénk azt használni, azt el kell mentenünk apk formátumba és telepítenünk a mobil eszközünkre. Ezt a fejlesztői környezet Build menüjéből tehetjük meg.

1.4. A második alkalmazásunk: Számológép

Ez az egyszerű alkalmazás bekér a felhasználótól két számot és a négy matematikai alapműveletnek megfelelő gombok egyikének a lenyomására egy szövegdobozban megjelenik a művelet eredménye.

  • Hozzunk létre egy új projektet a Projects --> Start new project menüpont alatt, adjunk nevet a projektünknek. A programunk főképernyője megjelenik tervező négyzetben.

  • Adjuk hozzá a képernyőhöz a szükséges címke, szövegdoboz és nyomógomb komponenseket és nevezzük át őket a feladatuknak megfelelően. Az eredménynek az alábbi ábrához kell hasonlítania.

img001 - 1.4 - 1.png
 
download.png

 

A komponensek elnevezésekor használjuk az alábbi módszert:

  • az első két-három karakter legyen kisbetűs és utaljon a komponens típusára (lbl » címke, tb » szövegdoboz, btn » nyomógomb). 

  • A név további része utaljon a komponens funkciójára (lehetőleg angolul) és ha az több szóból áll, akkor legyen egybe írva. Ennek a résznek minden szókezdő betűje legyen nagybetűs.

  • A komponensnevek (és általában az azonosítók) nem tartalmazhatnak ékezetes karaktereket, szóközt és egyéb speciális kaaktereket.

Ezt a konvenciót követve a forráskódunk könnyen olvasható lesz.

  • A szövegdobozok számára beállíthatjuk a Hint tulajdonság értékét, hogy jelezze a felhasználó számára a megadandó érték jellegét.

  • A nyomógombok számára megadhatunk azonos széleséget, hogy esztétikusabbak legyenek.

  • A képernyő számára beállíthatjuk a függőleges és vízszintes középre igazítást, illetve beállíthatjuk a háttér színét.

Az eredmény ilyesmi lesz:

img001 - 1.4 - 2.png
  • Adjuk hozzá a gombokhoz a következő kódot:

img001 - 1.4 - 3.png
  • Próbáljuk ki a frissen elkészült alkalmazásunkat.

1.4.1. feladat
 

  1. Az első alkalmazás kifejlesztése során szerzett ismeretek alapján egészítsd ki az alkalmazásod úgy, hogy az eredmény megjeleítése mellett az hangosan fel is legyen olvasva. 

  2. Módosítsuk úgy a programunkat, hogy az összeadás és kivonás eredményét angolul, a szorzás és osztás eredményét franciául olvassa fel az alkalmazás.

download.png