App Inventor órai és házi feladatok 2. óra

Slides:



Advertisements
Hasonló előadás
Óraregisztrálási modul
Advertisements

Cím - Title. 1. szó word 1.kép picture 2. szó word.
Grafikus tervezőrendszerek programozása 10. előadás.
A Windows használata Bevezetés.
Az operációs rendszer Egy olyan szoftver, ami a számítógépeink használatához nélkülözhetetlen. Főbb feladatai: programok betöltése, futtatása perifériák.
Microsoft Excel 7. óra Előadó: Jánosik Tamás.
Felhasználói felületek és üzleti logika Bollobás Dávid ASP.NET
Számítógépes ismeretek 5. óra
Bevezető a tartalomjegyzékek használatába j majd a tanfolyam elindításához nyomja le az F5 billentyűt, vagy kattintson a Diavetítés > Az elejétől gombra.
Benczúr Zsolt VBA gyorstalpaló Benczúr Zsolt
Prototípuskészítés Verilog nyelven Screen Saver Készítette: Mészáros Péter.
Egy feladat megoldásának gondolatmenete. Feladat: Generáljuk véletlen számokat 1 és 6 között, amíg legalább 10 darab egyes és 10 darab hatos nem lesz.
Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.
A Windows grafikus felülete
A körlevél készítésének menete
A táblázatok formázása Készítette: Gombkötő Alexandra Felkészítő tanár: Györe Mihály József Attila Gimnázium, 6900 Makó Csanád vezér tér 6.
Képek beillesztése,formázása dokumentumokban Tóth Anita 8
Microsoft Access Űrlapok tervezése.
Turbo Pascal 11..
Delphi Készítette: Rummel Szabolcs Elérhetőség:
A képernyő kezelése: kiíratások
Visual Basic 2008 Express Edition
Web-grafika II (SVG) 6. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
1. Feladat Hozzunk létre egy olyan programot amely számokat ír ki és a felhasználónak időre be kell gépelni ezeket.
1. Program felépítéseProgram felépítése 2. Fényképező megnyitásaFényképező megnyitása 3. Mentett kép betöltéseMentett kép betöltése 4. Betöltött kép megosztásaBetöltött.
Webprogramozó tanfolyam
2. Feladat. És akkor kezdjük is el!
2. Feladat. És akkor kezdjük is el! Menü Mint ahogy már megszokhattuk módosítsuk az editek text mező tulajdonságát a minta szerint! Tovább.
Felnőtt újraélesztés.
9. osztály Táblák létrehozása. Létrehozás Tervező nézetben  Üres adatbázis létrehozása.  Adatbázis mentése.  Objektumok oszlopban a Táblák sorra kattintunk.
Kördokumentumok 1..
Webprogramozó tanfolyam Űrlapok (form-ok). Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció,
Gazdasági informatikus - Szövegszerkesztés 1 Hosszú dokumentumok kezelése.
Számítógépes grafika I. AUTOCAD alapok 2. előadás.
Gimp – animációk (1. rész)
Ez az én művem Készítette: Barczi Renáta Felkészítő tanár: PeadDr
Táblázatok.
Valószínűségszámítás II.
Mappa- és fájlműveletek
EZ AZ ÉN MŰVEM Készítette: Pörzsölt Krisztián
Vnorené cykly.  Pri riešení problémov sa stáva, že použijeme viac cyklov za sebou, alebo jeden cyklus vnorený do druhohého.
Gazdasági informatikus - Szövegszerkesztés 1 Bekezdések formázása 3.
Marketing- és Reklámügyintéző – Számítástechnikai alapismeretek, fájlkezelés 1 CD, DVD írás.
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
Programozás III ÖTLETEK A FELADATMEGOLDÁSHOZ. A HF-EK APROPÓJÁN Néhány javaslat: 1. Jó lenne, ha a feladatmegoldás előtt átnéznék az előadás-anyagokat.
Számítógépes programok használata
A Mozilla magyar nyelvű szerkesztőjének használata
V 1.0 OE-NIK, Programozás I. Gyakorlás egydimenziós tömbökkel Többdimenziós tömbök Gyakorló feladatok.
Készítette: Rummel Szabolcs Elérhet ő ség: Linux kezelése.
V 1.0 Programozás III. Gyakorlás. V 1.0ÓE-NIK, 2014 Gyakorlás –Feladat: Tic Tac Toe játék –Szabályok: A játékosok felváltva teszik le a jelöléseiket.
Alapvető raszteres algoritmusok, szakasz rajzolása, DDA, MidPoint algoritmus.
Lekérdezések Adott tulajdonságú adatok listázásának módja a lekérdezés. A lekérdezések segítségével az adatbázisból megjeleníthetjük, módosíthatjuk, törölhetjük.
Fodor Edina, App inventor 2 Fodor Edina,
Neumann János Informatikai Kar
App Inventor órai és házi feladatok
Informatikai gyakorlatok 11. évfolyam
Kimutatás készítés 1..
TÖMBÖK – péntek Jordán Sándor.
ListBox CheckedListBox TextBox
SZÜLŐI TÁJÉKOZTATÓ E-napló használatához
Neumann János Informatikai Kar
Fodor Edina, óra feladata Fodor Edina,
Programozás C# -ban Elágazások.
Neumann János Informatikai Kar
Adatkötés Sablonokkal
Játszunk telefonon Készítette: Homlok Dávid
Hosszúidejű Spektrogram mérés az ET 91 - el
Cache példák 2019 (IMSC).
Előadás másolata:

App Inventor órai és házi feladatok 2. óra Laták Ivett doleance@cs.elte.hu

Ne feledd! Ha új eszközről dolgozol és valami nem működik, vagy elfelejtettél valamit a korábbi órákról, bármikor visszatérhetsz az előző diasorokhoz! Forrásfájlokat a http://trefort.regele.hu 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 doleance@cs.elte.hu címen elérsz!

2. óra: légycsapó A feladat: Készítsünk programot, amely során a kijelzőn egy légy véletlenszerűen változtatja a helyét. Ha a játékos megérinti a legyet, egy légycsapó hangját halljuk. Mi fog kelleni hozzá? a légy képe légycsapó-hang

Légycsapó – megoldás: elemeink Hogy a legyünket legyen mire rakni, egy Canvas (=Vászon) komponensre lesz szükségünk először a Drawing and Animation részlegből. Húzzuk a kijelzőre! Már tudjuk, hogy egy gombnál (button) beállíthatjuk, hogy egy bizonyos kép formáját vegye fel. De a gombot sajnos nem tudjuk mozgatni, ezért másra lesz szükségünk a légyhez: Drawing and Animation/Image Sprite Tallózzuk be a légy képfájlját az ImageSprite Picture tulajdonságnál! A Media részlegből a Sound-ra is szükségünk van a hang kiadásához. Tallózzuk be (a Source tulajdonságnál) az mp3-at! A mozgatáshoz kelleni fog egy Clock (=Óra) komponens is a Sensors (=Érzékelők) részlegből. Ennek jobb oldalt a TimerInterval tulajdonsága mondja meg, hány ezredmásodpercenként „kattan egyet” az óránk. Ha 1000-re van állítva, az nyilván éppen egy másodpercet jelent.

Légycsapó – megoldás: tikk-takk Megvannak a komponenseink, a programozáshoz térjünk át a Blokk-nézetre! Szeretnénk, ha a legyünk másodpercenként változtatná a helyét: egy tetszőleges (random) helyre költözne. A Clock komponens egyetlen eseményére van szükségünk, ez a „when Clock1.Timer do.” azaz „amikor az óránk kattan egyet, akkor…” No de hogyan helyezzük át a legyet minden másodpercben? A legyünk helyzetét a síkban koordinátákkal tudjuk megadni. Rá kell bírnunk a programot, hogy másodpercenként véletlenszerű koordinátákra helyezze a legyünket.

Légycsapó – megoldás: koordináták Ahhoz, hogy meg tudjuk adni a koordinátákat, ismernünk kell, a grafikus programozásban (általában) hogy néz ki a koordinátarendszer. Az origó a bal felső sarokban van. Az x tengely a képernyő felső szélén, az y tengely a bal oldalán. A matematikaórán: A grafikus programozásban:

Légycsapó – megoldás: koordináták Milyen hosszú az x és y tengely, mettől meddig futhatnak a koordináták? Mind az x, mind az y tengelyen a 0 az első lehetséges koordináta. (A (0;0) koordinátájú pont épp a kijelző bal felső sarka.) Az x tengely utolsó pontja: megnézhetnénk, milyen széles a kijelzőnk (pl. 320 pixel), de mi azt szeretnénk, ha telefonon és tableten is ugyanolyan jól működne a programunk függetlenül attól, milyen széles a képernyője. A vásznunknak (=Canvas) van Width (=Szélesség) tulajdonsága. Ezt fogjuk használni. Az y tengely utolsó pontja: hasonlóan a Canvas.Height tulajdonság adja meg.

Légycsapó – megoldás: véletlen Már tudjuk, hogy mettől meddig terjed a koordinátarendszerünk vízszintes és függőleges irányban. De hogyan választunk egy véletlenszerű pontot a síkunkon? A Math részlegben található random (=véletlen) függvénnyel. Állítsuk be, hogy a program mettől meddig választhat véletlenszerűen egy egész (=integer) számot, és a randomszám-generátort össze is építhetjük a when Clock.Timer eseményünkkel. De hogyan? A légy (ImageSprite) rendelkezik „set X to” és „set Y to” (=állítsd be Y-t arra, hogy…) blokkokkal. Ez az X és Y a szereplő bal felső sarkának koordinátáját jelenti.

Légycsapó – megoldás: kilóg Baj van! Ha a légy bal felső sarkát a (Canvas.Width; 0) vagy a (0; Canvas.Height) pontba tesszük, a légy ki fog lógni a képről. Megoldás: kivonás! Az X koordináta csak Canvas.Width – ImageSprite.Width -ig, az Y koordináta pedig Canvas.Height – ImageSprite.Height -ig menjen. Amikor az óra kattan, állítsd át X-et és Y-t egy véletlen számra:

Légycsapó – megoldás: érintés Mit is szeretnénk, ha a játékos megérinti a legyet? adjon ki légycsapó-hangot rögvest mozduljon el a légy, ne hagyja magát többször is lecsapni ugyanott! Ez könnyű, már tanultuk előző órán, csak az ImageSprite- nak nem Click, hanem Touched (=Megérintve) eseménye van. Ha az ImageSprite meg lett érintve, hívjuk meg a hang Play (=Lejátszás) metódusát:

Légycsapó – megoldás: eljárás Mozduljon el a légy. Ezt már egyszer leprogramoztuk! A lusta programozó nem szeret egy lépéssorozatot többször leírni, hanem inkább létrehoz egy eljárást (=Procedure) neki. Az eljárás egy „mini program”, aminek adhatunk egy egyedi nevet. Ha egy bizonyos lépéssorozatot többször is fel akarunk használni a programunkban, a parancsokat az eljárásba írjuk, és később ezt az eljárást a neve alapján akárhányszor „meghívhatjuk” egyetlen parancs segítségével. Az eljárással kapcsolatos blokkok a Procedure részlegben vannak. Létrehozni a .. to procedure blokkal tudunk. Írjuk át a nevét valami beszédesebbre!

Légycsapó – megoldás: eljárás A már elkészített légymozgató parancsainkat helyezzük át a mozogj eljárásba! A Procedures részlegben az új eljárás meghívását lehetővé tévő új blokk született: call mozogj. A légy mozgatását végző eljárást hívjuk meg a Touched eseménynél, és a korábban elkészített Clock.Timerbe is tegyük be! Így átláthatóbb is, nem?

Mi volt a házi? 8.a: Amikor rákattintunk a légyre, kapjunk pontot! Segítségek: minden érintéskor a pontszám növekedjen eggyel a változónak (Variable) is van „set” tulajdonsága, ezzel állíthatjuk át az értékét. A következő oldalakon a megoldást láthatod. Ha szeretnél jobban érteni az androidos alkalmazások programozásához, csak akkor lapozz tovább, ha már magad megcsináltad, vagy legalább megpróbálkoztál a feladattal! Ha kérdésed van, felteheted a doleance@cs.elte.hu címen.

Légycsapó – megoldás: pontszerzés Jelenítsük meg a felhasználónak, hányszor sikerült eddig elkapnia a legyet, azaz hány pontot szerzett eddig! Ahhoz, hogy a kijelzőn látszódjon a pontszámunk, a Designer felületen rakjunk a telefon képernyőjére (mindegy, hogy a Canvas alá vagy fölé) egy Labelt (=Címke), ezt a User Interface részlegen találjuk. A Labelnek mindenféle tulajdonsága van, amit átállíthatunk, ha látványosabbá akarjuk tenni a feliratot: FontSize (=Betűméret), FontBold (=Félkövér betű), TextColor (=Szövegszín). A Label Text mezőjét állítsuk át 0-ra, mert a „Text for Label1” nem túl szép.

Légycsapó – megoldás: pontszerzés Amíg nem programozzuk le, hogy minden érintés növelje a pontunkat és frissítse a kijelzőn a számot, addig a felhaszná- ló hiába csapkodja a legyet, a kijelző 0-t fog mutatni. Hozzunk létre egy változót (=variable), amiben az aktuális pontállást tároljuk! A Variablesnek egy külön részlege van a blokkok között. Változót deklarálni az initialize paranccsal lehet, name helyett pedig egy beszédesebb nevet is adjunk neki! Értékadás: a „pont” legyen kezdetben 0 (Math).

Légycsapó – megoldás: pontszerzés Még az kell, hogy amikor a légyre csapunk, növeljük a pontszámot eggyel, és a friss értéket jelenítsük meg a kijelzőn a Variables részlegben a változók értékét lekérdezhetjük (get), vagy átállíthatjuk másra (set). Hogy a program tudja, melyik változóról beszélünk, állítsuk a nemrég létrehozott global pont-ra mindkét elemet!

Légycsapó – megoldás: pontszerzés Ha megérintjük a legyet (az eddig leprogramozott eseményeken felül), állítsa át a pont változónk értékét eggyel nagyobbra, azaz pont + 1 -re! És ha ez megvan, utána a Label komponens Text tulajdonságát állítsa át a (most már frissített, aktuális) pont változó értékére! (Ezt a blokkot természetesen a Label blokkaji közt találjuk meg. Tegyük be ezt is a Touched eseménybe!

Mi volt a házi? 7.a: Tegyünk fel egy új szereplőt a vászonra, például egy darazsat. Ha a darázsra kattintunk, ne növekedjen, hanem csökkenjen eggyel a pontszámunk! Megoldási lehetőségek: a pont változónk csökkenjen eggyel a darázs érintésekor (ne felejtsd el a pontszám változtatása után frissíteni a Label tartalmát!) tegyél egy új Labelt a kijelzőre, ami a mínuszpontokat fogja mutatni a felhasználónak (ehhez egy új változót is létre kell hozni, ami a mínuszpontokat tartja számon) Ha kérdésed van, felteheted a doleance@cs.elte.hu címen.

Mi volt a házi? 10.c: Ha a légy mellé kattintunk, vonjon le tőlünk pontot! Megoldási lehetőségek: A jelenlegi pont változó értékét is módosíthatod, de létrehozhatsz egy új változót (és egy új Labelt) is, ami számon tartja a mínuszpontokat. Segítségek (csak ha nem tudod, mihez kezdj): Canvas.Touched (amikor megérinted a vásznat)… Csakhogy amikor a legyet megérinted, az a vászon megérintésének is számít, úgyhogy szükség lesz egy elágazásra (if), amit a Control részlegben találsz. Vizsgáld, hogy vászonérintés közben megérintette-e a legyet (touchedAnySprite = megérintette-e valamely szereplőt) Ha kérdésed van, felteheted a doleance@cs.elte.hu címen.