„Kliensalkalmazások” változatai közötti eltérés

A VIK Wikiből
← Régebbi szerkesztésÚjabb szerkesztés →
VizuálisWikiszöveges
Órák anyagának hozzáadása (a 11. hétig); segédanyagok hozzáadása
→‎Android: Órák anyagának hozzáadása (a 13. hétig); segédanyagok hozzáadása
76. sor: 76. sor:
====Android====  
====Android====  
*8. hét: ''szünet''
*8. hét: ''szünet''
*[[Média:Kliens ea 09 20240408.pdf|9. hét (Gazdi László)]]: alapok, Java, XML alapú UI, eseménykezelés, Kotlin; <code>Activity</code>, <code>Service</code>, content provider, <code>BroadcastReceiver</code>; manifest, erőforrások; compiler (Dalvik bytecode), <code>.apk</code>; activity lifecycle (callback függvények, állapot mentése, váltás)
*[[Média:Kliens ea 09 20240408.pdf|9. hét (Gazdi László)]]: alapok, Java, XML alapú UI, eseménykezelés, Kotlin; '''<code>Activity</code>, <code>Service</code>, content provider, <code>BroadcastReceiver</code>;''' manifest, erőforrások; compiler (Dalvik bytecode), <code>.apk</code>; '''activity lifecycle''' (callback függvények, állapot mentése, váltás)
**Megjegyzések a 16. diához:
**Megjegyzések a 16. diához:
***Az OS X már macOS.
***Az OS X már macOS.
83. sor: 83. sor:
*[[Média:Kliens ea 10 20240415.pdf|10. hét (Gazdi László)]]: <code>Activity</code>: back stack, vezérlés; <code>Intent</code>: típusai, részei, explicit / implicit, extras, képességek, filter; <code>startActivityForResult()</code>, <code>onActivityResult()</code>; erőforrások (i18n); UI: <code>viewBinding</code>; dpi, dp, sp; <code>LinearLayout</code>, <code>RelativeLayout</code>, <code>ConstraintLayout</code>; padding és margin
*[[Média:Kliens ea 10 20240415.pdf|10. hét (Gazdi László)]]: <code>Activity</code>: back stack, vezérlés; <code>Intent</code>: típusai, részei, explicit / implicit, extras, képességek, filter; <code>startActivityForResult()</code>, <code>onActivityResult()</code>; erőforrások (i18n); UI: <code>viewBinding</code>; dpi, dp, sp; <code>LinearLayout</code>, <code>RelativeLayout</code>, <code>ConstraintLayout</code>; padding és margin
*[[Média:Kliens ea 11 20240422.pdf|11. hét (Pásztor Dániel)]]: <code>View</code>, <code>getLayoutInflater()</code>, validáció, <code>Menu</code>, <code>ActionBar</code>, <code>Toolbar</code>; <code>PopupWindow</code>, <code>AlertDialog</code>, <code>Snackbar</code>; <code>style</code>, <code>Theme</code>; grafikák, animációk
*[[Média:Kliens ea 11 20240422.pdf|11. hét (Pásztor Dániel)]]: <code>View</code>, <code>getLayoutInflater()</code>, validáció, <code>Menu</code>, <code>ActionBar</code>, <code>Toolbar</code>; <code>PopupWindow</code>, <code>AlertDialog</code>, <code>Snackbar</code>; <code>style</code>, <code>Theme</code>; grafikák, animációk
*[[Média:Kliens ea 12 20240429.pdf|12. hét (Gazdi László)]]: Fragment, RecyclerView, Persistence
*[[Média:Kliens ea 12 20240429.pdf|12. hét (Gazdi László)]]: <code>Fragment</code>: életciklus, csatolása (statikusan és dinamikusan), <code>FragmentManager</code>, <code>FragmentTransaction</code>, kommunikáció, <code>DialogFragment</code>; <code>navigation</code>: component, graph; <code>RecyclerView</code>: <code>ViewHolder</code>, <code>Adapter</code>; perzisztens adattárolás: <code>(Shared)Preferences</code>, SQLite, ORM, <code>room</code>, javasolt architektúra; fájlkezelés: internal / external storage, statikus fájlok, nyilvános lemezterület; BaaS: Firebase; content provider: elérése (<code>CONTENT_URI</code>), műveletek, engedélyek, <code>Cursor</code>, <code>ContentResolver</code>, CRUD
*[[Média:Kliens ea 13 20240506.pdf|13. hét (Gazdi László)]]: Compose
**Megjegyzés az 51. diához: a <code>BLOB</code> is egy támogatott adattípus.
*[[Média:Kliens ea 13 20240506.pdf|13. hét (Gazdi László)]]: Jetpack Compose: <code>@Composable</code> '''(5 szabálya),''' <code>@Preview</code>, layoutok (<code>Column</code>, <code>Row</code>, <code>Box</code>), weight, <code>Alignment</code> és <code>Arrangement</code>, <code>Modifier</code>, <code>Scaffold</code>, <code>TextField</code>, Material Design; mappastruktúra, composition / initial composition / recomposition, adatok átadása; <code>ViewModel</code>: MVVM, MVI; navigation graph: funkciók, paraméterek, konstansok; dialógusok: <code>AlertDialog</code>; listák: lazy loading; szálak és coroutine-ok: suspending functions; flow
*[[Média:Kliens ea 14 20240513.pdf|14. hét (Gazdi László)]]: NFC, Bluetooth, Http, Retrofit, BR, Service, Permissions
*[[Média:Kliens ea 14 20240513.pdf|14. hét (Gazdi László)]]: NFC, Bluetooth, Http, Retrofit, BR, Service, Permissions
*15. hét: ''szünet''
*15. hét: ''szünet''
153. sor: 154. sor:
*****Hogyan lehet elkészíteni és kezelni egy menüt?
*****Hogyan lehet elkészíteni és kezelni egy menüt?
*****Hogyan adható meg, hogy egy stílus az egész alkalmazásra érvényes legyen?
*****Hogyan adható meg, hogy egy stílus az egész alkalmazásra érvényes legyen?
****12. hét
*****Mire használhatók a <code>Fragment</code>-ek?
*****Hogyan csatolhatók a <code>Fragment</code>-ek?
*****Hogyan kommunikálhatnak a <code>Fragment</code>-ek egymással?
*****Mire jó a <code>RecyclerView</code>? Mik az előnyei?
*****Milyen adattárolási lehetőségeket ismer?
*****Mire használható a <code>SharedPreferences</code>?
*****Hogyan támogatja az Android az adatok adatbázisban tárolását?
*****Sorolja fel az ORM alapelveit!
*****Milyen lehetőségek vannak a fájlrendszerben való adattárolásra?
*****Mire jó egy content provider?
*****Milyen formában adja vissza az adatokat egy content provider?
****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?
*****Mire való a flow, és hogyan használjuk?
**Vizsga
**Vizsga
***Web
***Web

A lap 2024. június 21., 22:30-kori változata

Kliensalkalmazások
Tárgykód
VIAUBB03
Általános infók
Szak
üzemmérnök
Kredit
5
Ajánlott félév
4
Tanszék
AUT
Követelmények
Labor
13 db
KisZH
nincs
NagyZH
nincs
Házi feladat
2 db
Vizsga
írásbeli
Elérhetőségek

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.

Követelmények

A szorgalmi időszakban

Laborgyakorlatok

  • 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

Értékelés

  • 88– 100: jeles
  • 75 – 87: jó
  • 62 – 74: közepes
  • 50 – 61: elégséges
  • 0 – 49: elégtelen

Tematika

Előadások

Web

  • 1. hét (Albert István): követelmények, webarchitektúra: statikus és dinamikus kiszolgálás; HTTP-kérés, -válasz, -kapcsolat, -státuszkódok; URI, URL: header, cache; API: REST, Postman
    • A 22. dián a telefonszámot tartalmazó URI az RFC 3986 alapján nem tartalmazhatna szóközöket.
  • 2. hét (Gincsai Gábor): az előző hét folytatása: HTML: elemek, attribútumok, oldalváz, block / inline, <head>, <p>, <a>, <img>, <ul>, <ol>, <li>, <table>, <form>, <input>, <label>, <select>, <datalist>, <audio>, <video>; validáció: pattern, required; állapotmegőrzés: session, cookie, GDPR; HTTPS: SSL, TLS (handshake), (self-signed) certificate, érvényesség, kulcs
    • 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]
  • 3. hét (Gincsai Gábor): CSS: ...; Bootstrap: grid, col, img-fluid, form; flexbox
    • 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.
  • 4. hét (Gincsai Gábor): JavaScript: transpiler, összehasonlítás (Java), nyelvi elemek, változók, (logikai) típusok (konverzió), értékadás (strict), konstans, alapértelmezett érték, feltételes futtatás, objektumok, JSON (parse, stringify), tömbök, függvények, window, global scope pollution, scopes (shadowing); DOM: querySelector[All](), createElement(), textContent(), appendChild(), setAttribute(), firstChild(), nextSibling(); eseménykezelés: addEventListener(), bubble, stopPropagation(); session / local storage: setItem(), getItem(), removeItem(), clear(); closure, self-invoking / arrow (lambda) function, modul; new, this; prototípus, konstruktor, factory method, class, string interpolation, öröklés; folytatás a laboron: Promise: ...
    • 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ő; method 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.
  • 6. hét (Albert István): Angular: MV*, architektúra, metaadatok, dekorátorok, komponensek, szolgáltatások, Component, string interpolation, adatkötés (@Input / @Output, CSS class / -stílus), események kötése, kétirányú adatkötés, attribútum / property, (strukturális / attribútum)direktívák (HostListener), ngIf, ngFor, direktíva, alkalmazás- / komponens-életciklus, lifecycle hooks, ngOnInit, ngOnChanges, SimpleChange, ngDoCheck
    • Megjegyzés a 26. diához: az [src]-t pont nem érdemes használni, mivel az ngSrc jobban optimalizált.
  • 7. hét (Albert István): az előző hét folytatása: ngModule, bootstrapping, (im)pure (Reverse)Pipe; szolgáltatások (DI, scope, interface): HttpClient; szinkronitás, számosság (Observable), routing (RouterOutlet, RouterLink), linkek, Guard, (reaktív) formok (ellenőrzés), szinkron adatfolyam, vezérlők, komponensstílusok, témák, animáció

Android

  • 8. hét: szünet
  • 9. hét (Gazdi László): alapok, Java, XML alapú UI, eseménykezelés, Kotlin; Activity, Service, content provider, BroadcastReceiver; manifest, erőforrások; compiler (Dalvik bytecode), .apk; activity lifecycle (callback függvények, állapot mentése, váltás)
  • 10. hét (Gazdi László): Activity: back stack, vezérlés; Intent: típusai, részei, explicit / implicit, extras, képességek, filter; startActivityForResult(), onActivityResult(); erőforrások (i18n); UI: viewBinding; dpi, dp, sp; LinearLayout, RelativeLayout, ConstraintLayout; padding és margin
  • 11. hét (Pásztor Dániel): View, getLayoutInflater(), validáció, Menu, ActionBar, Toolbar; PopupWindow, AlertDialog, Snackbar; style, Theme; grafikák, animációk
  • 12. hét (Gazdi László): Fragment: életciklus, csatolása (statikusan és dinamikusan), FragmentManager, FragmentTransaction, kommunikáció, DialogFragment; navigation: component, graph; RecyclerView: ViewHolder, Adapter; perzisztens adattárolás: (Shared)Preferences, SQLite, ORM, room, javasolt architektúra; fájlkezelés: internal / external storage, statikus fájlok, nyilvános lemezterület; BaaS: Firebase; content provider: elérése (CONTENT_URI), műveletek, engedélyek, Cursor, ContentResolver, CRUD
    • Megjegyzés az 51. diához: a BLOB is egy támogatott adattípus.
  • 13. hét (Gazdi László): Jetpack Compose: @Composable (5 szabálya), @Preview, layoutok (Column, Row, Box), weight, Alignment és Arrangement, Modifier, Scaffold, TextField, Material Design; mappastruktúra, composition / initial composition / recomposition, adatok átadása; ViewModel: MVVM, MVI; navigation graph: funkciók, paraméterek, konstansok; dialógusok: AlertDialog; listák: lazy loading; szálak és coroutine-ok: suspending functions; flow
  • 14. hét (Gazdi László): NFC, Bluetooth, Http, Retrofit, BR, Service, Permissions
  • 15. hét: szünet

Laborok

https://bmeviaubb03.github.io/laborok/

Házi feladatok

Web

A házi feladat során egy Angular alapú webalkalmazást kell készíteni.

Android

Az előadásokon és laborokon bemutatott technológiák segítségével egy komplex alkalmazás készítése önálló funkcionalitással.

Vizsga

  • Kvíz
  • 2023. tavasz
    • Mintavizsga
      • Web
        • Mi az a TypeScript-dekorátor? Milyen szintaktikával használjuk? (kifejtős)
          • kb. ugyanaz, mint Pythonban
          • módosítani lehet vele egy osztályt vagy annak tagjainak működését
          • pl.:
            function logged(originalMethod: any, context: ClassMethodDecoratorContext) {
    return (...args: any[]) => {
        try {
            console.log("Calculation started...");
            return originalMethod.call(this, ...args);
        }
        finally {
            console.log("...finished!");
        }
    }
}

class Calculator {
    @logged
    add(a: number, b: number) {
        return a + b;
    }
}

const calculator = new Calculator();
calculator.add(1, 9);
  • 2024. tavasz
    • A diasorokon szereplő kifejtős kérdések
      • Android
        • 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 callback életciklus-függvények felüldefiniálásakor meg kell-e hívni kötelezően az ősosztály implementációját? Miért?
          • Ha A Activity-ről átváltunk a B Activity-re, milyen sorrendben hívódnak meg az életciklusfüggvények?
        • 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?
          • Hogyan adható meg, hogy egy stílus az egész alkalmazásra érvényes legyen?
        • 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!
          • Milyen lehetőségek vannak a fájlrendszerben való adattárolásra?
          • Mire jó egy content provider?
          • Milyen formában adja vissza az adatokat egy content provider?
        • 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?
          • Mire való a flow, és hogyan használjuk?
    • Vizsga
      • Web
        • Mire való a getElementById függvény? Hogyan lehet elérni? (kifejtős)
          • egy adott ID-jű elem DOM-ban való megtalálására
            • így könnyen lehet a JS-kódból módosítani a DOM-ot
          • a globális document objektumnak van ilyen tagváltozója, azt kell meghívni a JS-kódban
          • pl.:
            <button id="disablerButton">
    Disable the other button
</button>

<button id="buttonToDisable">
    This button will be disabled
</button>

            function disableButton(buttonId) {
    const button = document.getElementById(buttonId);
    button.disabled = true;
}

disablerButton.addEventListener("click", disableButton("buttonToDisable"));
        • Mi a különbség a block és inline típusú HTML-elemek között? (kifejtős)
          • 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ó egy .d.ts kiterjesztésű fájl? (kifejtős)
          • declaration file
          • kizárólag a hozzá tartozó JavaScript-fájl típusinformációit tartalmazza
          • gyakorlatilag ugyanaz, mint Pythonban a type stub, de a TypeScript fordításidőben jelzi a típusokkal kapcsolatos problémákat (Pythonban ezeket csak az IDE mutatja)
        • Mire szolgál az Angular ngIf direktívája? (kifejtős)
          • elemek feltételes megjelenítésére
          • pl.:
            <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
        • 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/CustomStyle">.
          • 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 függvény hívását a MyTheme függvény hívásába kell ágyazni.
        • Mire és hogyan használható egy flow? (kifejtős)
          • A flow 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.
          • A Flow<> típusú változó .collect { } függvényét meghívva egy lambda kifejezést lehet végrehajtani a kapott értékkel.
        • 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. (kódolós) 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. 
          • @Composable
fun loginPage(
    modifier: Modifier = Modifier,
) {
    var emailAddress = "klaf@aut.bme.hu"

    Column() {
        TextField(
            placeholder = "Email",
            value = emailAddress,
        )
        HorizontalDivider()
        TextField(
            placeholder = "Password",
            value = emailAddress,
        )
        HorizontalDivider()
        Spacer()
        Button() {
            Text(text = "Login")
        }
    }
}
1. félév
2. félév
3. félév
4. félév
5. félév
6. félév


A lap eredeti címe: „https://vik.wiki/index.php?title=Kliensalkalmazások&oldid=205760”