App Inventor órai és házi feladatok

Az előadások a következő témára: "App Inventor órai és házi feladatok"— Előadás másolata:

1 App Inventor órai és házi feladatok
Laták Ivett

2 Mielőtt elkezdenénk… Ha új eszközről dolgozol és valami nem működik, vagy elfelejtenéd, hol írjuk vagy hogyan teszteljük a programokat, bármikor visszatérhetsz a 00_AppInventorBemutato_7a_8a_10c.pptx diasorhoz, hogy felfrissítsd az emlékeid! Forrásfájlokat a oldalon, a Házi feladat -> AppInventor2 mappa egyes óráinak anyagai közt találsz, de magad is kereshetsz az interneten. Ha elakadsz, kérdésed van, vagy szeretnéd megmutatni, mit alkottál, a címen elérsz!

3 1. óra, 1. feladat: doromboló macska
Készítsünk programot a telefonra, amely egy macska képét mutatja! Ha a felhasználó ujjával rákattint a macskára, az nyávogó hangot ad ki, és egy kis ideig dorombol. Alternatívák: persze készülhet morgós kutya vagy ugató macska is  Mi fog kelleni hozzá? egy macska/kutya képe nyávogást/ugatást tartalmazó hangfájl

4 Doromboló macska – megoldás
A palettán a User interface részből szükségünk lesz egy gombra: Ezt húzzuk a képernyőre! A jobb oldali Properties szekcióban a kijelölt komponens tulajdonságait láthatjuk. Legyen a gomb egy kép! Középtájt az Image résznél feltölthetjük a gomb felületén látni kívánt képet. Tallózzuk be a macska/kutya fotóját! (Ha kilóg a kép a képernyőből, a gomb Width és Height tulajdonságainál a Fill parent opciót válasszuk, így a program a képernyő szélességéhez és magasságához igazítja a képet.) Tüntessük el a kép közepén csúfoskodó feliratot! A gomb tulajdonságainál alul törölhetjük a Text alatti szöveget. Kell még egy hang is a paletta Media részlegéből: Ehhez se felejtsünk fájlt kapcsolni a Source tulajdonságnál!

5 Doromboló macska – megoldás
Egyelőre van egy képünk (ami egy gomb), és egy hangunk. De hogyan kapcsoljuk ezeket össze? Itt kezdődik a programozás! Eddig a Designer felületen dolgoztunk. Most kattintsunk az App Inventor zöld fejlécének jobb oldalán a Blocks nézetre! Szeretnénk, ha gombkattintásra megszólalna a hangunk, hát válasszuk ki a gomb (Button) „Click” nevezetű blokkját, és húzzuk középre, a szerkesztő-felületre! 1. 2.

6 Doromboló macska – megoldás
When Button1.Click, tehát amikor megnyomjuk Button1-et… Játssza le a Sound1-et: call Sound1.Play A Sound1 ezen blokkját húzzuk bele a gomb blokkjába!

7 Doromboló macska – megoldás
Ha szeretnénk, hogy a macskánk még doromboljon is – szintén gombnyomásra – rezgessük meg a telefont! A Sound1 komponensnek van egy Vibrate blokkja, erre lesz szükségünk a rezgéshez. A kirakó még nincs kész, a Vibrate blokk vár egy számot: hány milliszekundumig szeretnénk rezgetni a telefont? Lehet kísérletezni! Számot beírni a Math fülre kattintva tudsz, húzd be a 0-t, és írd át a számot!

8 Doromboló macska – megoldás
Kész a program! Csatlakozz az AI Companionhoz, és teszteld, hogy sikerült!

9 1. óra, 2. feladat: helyezkedés
Nyiss egy új projektet, és helyezz fel néhány gombot! Igen ám, de egymás mellé, és lehetőleg középre igazítva! Mi fog kelleni hozzá? néhány gomb  ???

10 Helyezkedés – megoldás
Az App Inventor alapvetően egymás alá teszi az új komponenseket. Ha szeretnénk egy kicsit rendezkedni közöttük, további komponensek, beállítások kellenek. Ha egymás mellé szeretnénk a gombokat: Használjuk a paletta Layout részlegéből a HorizontalArrangement nevű komponenst! Ez egy kis, szürke hátterű négyzetként mutatkozik, ha a képernyőre húzzuk, és arra jó, hogy helyezhetünk rá további elemeket, például gombokat. Az ide húzott elemek egymás mellé kerülnek majd.

11 Helyezkedés – megoldás
Ha középen szeretnénk látni a feltett tartalmat, a képernyőnk, azaz Screen1 tulajdonságai között kell kutakodnunk. Az AlignHorizontal a vízszintes igazítást jelzi. Ha beállítjuk Center- re, vízszintesen középre kerül minden a képernyőn. Az AlignVertical ugyanez függőlegesen. Ha Top - felülre, ha Bottom - alulra, ha Center - verikálisan középre kerül a képernyő tartalma. A képen a HorizonttalArrangement-ben egymás mellé tett gombjaink a Screen1 AlignHorizontal tulajdonságának Center-re állításával középre kerültek. (Szép magyar mondat, mi?:)

12 Helyezkedés – megjegyzések
Más rendezésre alkalmas komponensünk is van még. A TableArrangement-tel táblázatos formában helyezhetjük el az elemeket (a példán továbbra is gombokat). Ennek tulajdonságai közt az oszlopok (Columns) és a sorok (Rows) száma változtatható, a példában ezek 2-2. Az arrangementek egymásba ágyazhatók, próbáld csak ki!

13 Ha kérdésed van, felteheted a doleance@cs.elte.hu címen!
1. házi feladat: Vágd szét egy képszerkesztővel a macskás képet (vagy egy tetszőleges másik képet) négy (4) részre! (Lehet rács alakban, de lehet négy téglalap is hosszában vagy keresztben szeletelve.) Új projekted kijelzőjén helyezz el négy gombot, és válaszd ki hozzájuk a megfelelő igazítást (horizontal, vertical, table)! Készíts programot, amelyben a gombok kiadják a képet, és bármely képdarabra kattintunk, más-más hangot ad ki! A oldalon találsz mintaképet és mintahangokat is, de más alapanyagot is felhasználhatsz! Jó munkát! <3 Ha kérdésed van, felteheted a címen!