A tárgy célja, hogy a hallgatók megismerjék a kliensoldali alkalmazások fejlesztésének módszereit és meghatározó technológiáit különös tekintettel a vékony kliensekre (webes és mobil kliensek). A tárgy külön figyelmet fordít arra, hogy a technológiai lehetőségeken túl a hallgatók gyakorlati problémákkal és megoldásokkal is találkozzanak a félév során.
Az összesen 10 laborból legalább 3 illetve 5 teljesítése a két témakörben.
A laborfeladatok felöltésének határideje: 1 hét.
Házi feladat
A tárgyhoz 2 házi feladat (részteljesítmény értékelés) tartozik, mobilos és webes témakörben. Az első feladat bemutatásának határideje a 6. heti, a másodiké a 14. heti laboralkalom. Az első házi feladatra 10, a másodikra 20 pont kapható, amelyeknek egyenként 50%-át el kell érni.
Aláírás
Mindkét házi feladat sikeres bemutatása és legalább 5 és 10 pont elérése.
Legalább 8 (3+5) labor sikeres teljesítése.
Pótlási lehetőség
A póthéten az egyik házi feladat pótolható.
Vizsga
A vizsgaidőszakban írásbeli vizsgát tartunk, amely 60 pontos (36 pont web + 24 pont Android), ebből legalább 30 pontot el kell érni a sikerességhez. Igaz-hamis, feleletválasztós, kifejtős és kódolós kérdések is várhatóak.
Osztályozás
A végső osztályzatot a házi és a vizsga pontszámok összeadásával határozzuk meg.
Laborok: max. 10 pont
Mobil házi feladat: max. 10 pont
Webes házi feladat: max. 20 pont
Vizsga: max. 60 pont
Megjegyzés a 61. diához: habár a diasoron én nem láttam magyarázatot a name attribútum használatára, a vizsgán kérdezik. De legalább az egyik laboron szó esik róla.
Megjegyzés a 69. diához: a .webm-et valójában már mindegyik böngésző támogatja.[1]
Megjegyzés a 97. diához: a display: flow-root-ot valójában már mindegyik böngésző támogatja.[2]
Habár a diasoron én nem láttam magyarázatot a @media only screen query és a min-width használatára, a vizsgán kérdezik. De legalább az egyik laboron szó esik róla.
Megjegyzés a 44. diához: habár a diasoron én nem láttam magyarázatot a confirm() függvény használatára, a vizsgán kérdezik. De legalább az egyik laboron szó esik róla – érdekességként.
Megjegyzések a 103. diához:
Arrow functionöket const-tal érdemes definiálni, mivel általában nem változik a tartalmuk.
Az Objektum nem adható vissza simán pontban szándékosan hibás változódeklarációk szerepelnek.
5. hét (Albert István): TypeScript: transpiler, static typing (any, noImplicitAny), structural typing, deklaráció (var, let, const), null (strictNullChecks), undefined, type narrowing / assertion, non-null assertion, optional chaining, null coalescing, enum (sorszámozás), string / number literal (union), type annotation / alias, optional values, interface; class: static, constructor, readonly, protected, extends, super, private, erősen védett mező; function overload signatures, generic types, típuskényszer, metszettípus, spread, dekorátorok; modulok: export, import, típusdeklarációs fájl (.d.ts)
Az 52. dián az utolsó szöveges bekezdés pontosabban: míg a JavaScript tetszőleges típuson, a TypeScript csak number-ön tud toString-et hívni.
Mi a különbség a block és inline típusú HTML-elemek között?
block
pl.: <div>, <p>
a szülőjének teljes szélességét kitölti
új sorban jelenik meg
inline
pl.: <a>, <span>
nem tölti ki a szülőjének teljes szélességét
ugyanabban a sorban jelenik meg
így lehet formázni linkeket, vagy pl. highlightolni (kihúzni) szöveget
csak a tagen belüli szövegre vonatkozik
Mire valóak az űrlapok?
adatok beküldésére
kérdőív
belépés
meglévő adatok módosítására
az adatmezőket előre ki lehet tölteni
a bevitt adatokat azok rögzítése előtt még validálni lehet
kliens- vagy szerveroldalon
általában GET vagy POST queryt hajt végre az oldal a beküldés után
pl. egy mögöttes adatbázisból lehet lekérni, vagy abban módosítani adatokat
Mire való egy űrlap elemeiben a name attribútum?
egyes beviteli mezők elnevezésére
az űrlap beküldésekor a kliens ezeket használja a szervernek küldött adatok megnevezésére
GET esetén: https://foo.com/?name1=value1&name2=value2
POST esetén: a fenti, ? utáni rész kerül a bodyba
a JS-kódban a document.getElementByName() használatakor erre lehet hivatkozni
ezzel könnyen manipulálható a DOM
Mire való egy .d.ts kiterjesztésű fájl?
declaration file
kizárólag a hozzá tartozó JavaScript-fájl típusinformációit tartalmazza
gyakorlatilag ugyanaz, mint Pythonban a type stub – bár a TypeScript fordításidőben jelzi a típusokkal kapcsolatos problémákat (Pythonban ezeket csak az IDE mutatja)
Milyen előnyei vannak a dependency injection használatának?
separation of concerns
az injektor a felelős a dependency létrehozásáért, életciklusáért
teljesen független a dependency életciklusa a komponensétől
újrafelhasználható
csak az injektornak kell ismernie a függőségi gráfot
<div *ngIf="train"> <p> This is the {{train.departureTime}}{{train.type}} service to {{train.destination}}. </p></div>
az *ngIf attribútumban található kifejezést értékeli ki
itt a komponens .ts fájljában található változókra (is) hivatkozhatunk, melyekre adatkötést hoz létre
ha az értéke true, megjeleníti az elemet
ha false, törli a teljes elemet
lehet else ága is
ha sok if-else ág van, érdemes az ngSwitch-et használni helyette
Android
2024. tavasz
A diasorokon szereplő kifejtős kérdések
9. hét
Milyen lehetőségeink vannak a fejlesztés közbeni debugolásra?
Miket kell tartalmaznia a manifestnek?
Mit értünk erőforrás-minősítő alatt?
Magyarázza el a fordítás mechanizmusát!
Mit jelent az obfuszkálás?
Az Activity életciklus callback függvények felüldefiniálásakor meg kell-e hívni kötelezően az ősosztály implementációját? Miért?
10. hét
Magyarázza el az Activity back stack működési elvét!
Hogyan kell egy Activity-t indítani, ha vissza akarunk kapni adatot tőle?
Hogyan működik az implicit Intent?
Mit értünk sűrűségfüggetlen pixel alatt?
Egy 320 dpi-s képernyőn 1.dp hány darab pixelnek felel meg?
Sorolja fel a legfontosabb androidos layoutokat!
Hogyan támogatja az Android a lokalizációt?
11. hét
Mi a LayoutInflater feladata?
Hogyan lehet elkészíteni és kezelni egy menüt?
12. hét
Mire használhatók a Fragment-ek?
Hogyan csatolhatók a Fragment-ek?
Hogyan kommunikálhatnak a Fragment-ek egymással?
Mire jó a RecyclerView? Mik az előnyei?
Milyen adattárolási lehetőségeket ismer?
Mire használható a SharedPreferences?
Hogyan támogatja az Android az adatok adatbázisban tárolását?
Sorolja fel az ORM alapelveit!
DB
code
table
class
column
field
row
object
Milyen lehetőségek vannak a fájlrendszerben való adattárolásra?
Mire jó egy ContentProvider?
Milyen formában adja vissza az adatokat egy ContentProvider?
13. hét
Mik a Jetpack Compose használatának előnyei?
Milyen Jetpack Compose layoutokat ismer? Jellemezze őket!
Mik a Jetpack Compose alapelvei?
Miért hatékony módszer a recomposition?
Vázolja fel, milyen Jetpack Compose-architektúrákat ismer!
Mire használható a lazy loading?
Mik azok a coroutine-ok?
14. hét
Milyen rövidtávú kommunikációs technológiákat ismer?
Milyen hosszútávú kommunikációs technológiákat ismer?
Mi a különbség az UDP és a TCP/IP között?
Hogyan kell végezni a hálózati kommunikációt?
Mire szolgál a Retrofit library?
Milyen módszereket ismer a BroadcastReceiver-ek regisztrálására?
Hogyan biztosítható, hogy egy bizonyos típusú broadcastot megkapjon a komponensünk?
Milyen típusú Service-eket ismer?
Mire kell nagyon figyelni egy Service írásakor?
Milyen engedélykategóriákat ismer?
Milyen fázisai vannak a veszélyes engedélyek kérésének?
Vizsga
Hogyan tudunk saját stílust definiálni? Hogyan tudjuk ezt a stílust az egész alkalmazásra érvényesíteni? (kifejtős)
View
Saját stílust a res/values/styles.xml fájlban egy <style> tag, majd ez alatt további <item> tagek hozzáadásával lehet definiálni.
A manifest fájl <application> tagjébe kell felvenni egy android:theme attribútumként, pl. így: <application android:theme="@style/custom_style">.
Jetpack Compose
Saját stílust egy @Composable függvény (pl. MyTheme) létrehozásával lehet definiálni, melyben pl. a MaterialTheme függvényt az általunk választott paraméterekkel hívjuk meg.
A MainActivity class setContent függvényében az App() hívását a MyTheme függvény hívásába kell ágyazni.
Mi a Fragment? (kifejtős)
objektumok, melyek...
a képernyő egy nagyobb részéért felelősek
résznézeteket írnak le
Activity-kbe lehet őket ágyazni
egyszerre többet is
növelni lehet velük a modularitást
és / vagy a háttérben munkát végeznek
Mire és hogyan használható egy flow? (kifejtős)
egy Python generatorhoz vagy egy Java Streamhez hasonló változótípus
egy Python generatorhoz hasonlóan több visszatérési értéke is lehet
egy Java Streamhez hasonlóan lehet mapelni vagy filterezni
segítségével pl. fel lehet iratkozni egy adatfolyamra, hogy onnan folyamatosan kapjunk frissítéseket
egy Flow<> típusú változó .collect { } függvényét meghívva egy lambda kifejezést lehet végrehajtani a kapott értékekkel
Ha AActivity-ről átváltunk a BActivity-re, milyen sorrendben hívódnak meg az életciklus callback függvények?
A.onPause()
B.onCreate()
B.onStart()
B.onResume()
ekkor már B-n van a fókusz
A.onStop()
mivel már nem látható
Vázolja fel a képen látható nézet kódját Jetpack Compose segítségével! A kódnak nem kell tökéletesnek és teljesnek lennie, de a lényegi részek szerepeljenek benne. A képen egy képernyő, melynek közepén teljes szélességben egy Email feliratú szövegmező látható, alatta egy Password feliratúval. Mindkét szövegmezőbe ugyanazon látható szöveg van beírva. Alattuk pedig egy Login gomb látható, szintén a képernyő teljes szélességében.
Vázolja fel a képen látható nézet kódját a View framework segítségével! A kódnak nem kell tökéletesnek és teljesnek lennie, de a lényegi részek szerepeljenek benne.
<RelativeLayoutandroid:background="#000000"><ImageViewandroid:src="@drawable/one_ring_image"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:padding="16dp"/><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:layout_centerHorizontal="true"android:background="#FFFFFF"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="J. R. R. Tolkien"android:textColor="#000000"android:textSize="24sp"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="The Lord of the Rings"android:textColor="#000000"android:textSize="24sp"/></LinearLayout></RelativeLayout>