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
	Tantárgyi adatlap
	Tárgyhonlap

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)
- Megjegyzések a 16. diához:
  - Az OS X már macOS.
  - A Cocoa Touch helyett már egy ideje SwiftUI van.
  - Az Interface Builder már az Xcode része.
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") } } }

Üzemmérnök-informatikus BProf

1. félév	Algoritmusok és gráfok • A programozás alapjai • Bevezető matematika B • Digitális kompetenciák • Hardver alapok • Kalkulus • Testnevelés
2. félév	Hálózatok alapjai és üzemeltetése • Kísérleti fizika • Objektumorientált programozás • Operációs rendszerek B • Valószínűségszámítás B • Testnevelés
3. félév	Adatkezelés • Alkalmazott mesterséges intelligencia • Eseményvezérelt és vizuális programozás • Kódolás és IT biztonság • Szoftvertechnológia és -technikák
4. félév	Elektronika alapjai • Jelek és jelfeldolgozás • Menedzsment és vállalkozásgazdaságtan
5. félév	Önálló laboratórium • Mikro- és makroökonómia B • Jogi alapismeretek • Szabadon választható
6. félév	Projektgyakorlat • Szakdolgozat-készítés • Szabadon választható • Záróvizsga