Cvičenia sa konajú sa každý týždeň v utorky 09:50 – 12:05 v SA1C03 (uprostred je 10 min prestávka).

Odporúčam používať vlastné laptopy. Počas semestra budeme potrebovať tieto programy:

Pre používateľov macOS odporúčam všetko inštalovať cez Homebrew.

Pre používateľov Linuxu odporúčam používať distribučné „app story“ a repozitáre. Pozor, Docker Desktop je proprietárny program a väčšina distribúcií ho nemá. Buď si nainštalujte z ich stránky, alebo použite klasický Docker (Engine) bez GUI, ktorý sa v repozitároch nachádza. Pre naše potreby je to jedno.

 

Zdrojové kódy z cvičení nájdete na fakultnom Gitlabe.

1. Cvičenie (17.9.2024)

  • Git – lokálne úložisko, GitHub, Commit, Push, Fetch, Pull, klonovanie, riešenie konfliktov, Merge v spoločnej vetve
  • Úlohy:
    • 1. Urobte si účet na Githube. (Voliteľne: Nastavte si aj SSH prístup a GPG podpisovanie)
    • 2. Vytvorte dvojice a jeden člen vytvorí prázdny verejný projekt na Githube.
    • 3. Majiteľ projektu pridá svojho kolegu ako kolaborátora.
    • 4. Naklonujte si projekt do vášho počítača – buď cez
      git clone
      , alebo cez IntelliJ IDEA
    • 5. Lokálne vytvorte súbor
      autori.md
      a dajte tam prezývku/login a email jedného člena.
    • 6. Zmeny kommitnite a pushnite na Github
    • 7. Druhý člen tímu si pullne zmeny, zapíše sa tiež do
      autori.md
        a kommitne+pushne.
    • 8. Obaja členovia spravia pull a vo svojich lokálnych projektov zmenia svoje riadky. Napr. tam pridajte kde študujete.
    • 9. Obaja členovia po sebe spravia kommit a push. Ten, čo urobí push neskôr dostane chybovú hlášku o konflikte.
    • 10. Skúste spoločne nájst ako vyriešiť merge konflikt u daného člena tímu a pushnite jeho zmeny. Sú dva spôsoby: merge a rebase. (Všimnite si nový `merge` commit ak ste konflikt riešili mergovaním.)

2. Cvičenie (24.9.2024)

  • branche v gite, projekt „Prezenčka“, používateľské požiadavky, návrh tried
  • Zadanie: Potrebujeme aplikáciu na zapisovanie účasti študentov na predmetoch. Aplikácia umožní registrovať študentov, kde každý bude mať meno, priezvisko, pohlavie a dátum narodenia. Každý študent bude jedinečne identifikovateľný umelým číselným identifikátorom. Aplikácia taktiež umožní registrovať predmety. Predmet má názov, ročník štúdia a jedinečný identifikátor a zoznam zapísaných študentov. Aplikácia umožní ukladať prezenčky podľa dátumu a predmetu, kde budeme môct zaškrtávať prítomných študentov. 
  • Úlohy:
    • 1. Identifikujte vhodné triedy a vytvorte ich v novom Maven Java projekte. Odporúčam rovno vytvoriť aj Git repozitár začiarknutím príslušného políčka.
    • 2. Pre jednu vhodnú triedu A vytvorte „servisnú“ triedu AService, ktorá bude schopná z interného zoznamu inštancíí vypočítať nejaký štatistický údaj. Napr. vypočítajte pomer chlapcov a dievčat, alebo počty ľudí s rovnakým krstným menom, atď.. Stačí implementovať jeden príklad. Ak máte svoj nápad, kľudne ho konzultujte s cvičiacim.
    • 3. Projekt zverejnite na Github. Môžete využiť funkciu z IntelliJ (Git/Github/Share Project on Github). Ak to nevidíte, tak vytvorte Git repozitár (dá sa viacero spôsobmi), ak ste to neurobili už rovno pri vytváraní projektu.
    • 4. Nájdite si spolužiaka (napr. z minulého cvičenia) a spravte z neho kolaborátora na vašom projekte (viď. minulé cvičenie).
    • 5. Vymeňte si projekty: Stiahnite si cez „git clone“ (alebo cez IntelliJ IDEA) spolužiakov projekt.
    • 6. V druhom projekte vytvorte novú vetvu (cez „git checkout -b feature-unit-tests„, alebo cez IntelliJ – tlačítko „New Branch“), ktorú nazvite „feature-unit-tests“.
    • 7. V novej vetve druhého projektu vytvorte unit test/y pre metódu z úlohy 2 a pushnite ich (pre push do ešte na serveri neexistujúcej vetvy cez konzolu napíšte „git push –set-upstream origin feature-unit-tests„, push cez IntelliJ funguje normálne). Testy by mali pokryť aspoň prípady nižšie, pričom ak nájdete chybu v implementácii, tak ju opravte (kľudne opravu konzultujte s kolegom):
      • Prázdny vstup
      • Null vstup
      • OK vstup („tzv. Happy Path“)
      • …
    • 8. V Githube vytvorte v druhom žiadosť o spojenie kódu („pull request“), kde chcete spojiť vetvu „feature-unit-tests“ do hlavnej vetvy.
    • 9. Choďte na Github vlastného projektu a schválte a spojte (mergnite) vytvorený pull request.

3. Cvičenie (1.10.2024)

  • JavaFX projekt, FXML, Scene Builder, načítanie CSV súboru
  • Vychádzajte z vetvy c02 gitu projektu attender
  • Hotové riešenie v gite projektu attender – vetva c03
    • Riešenie obsahuje všetky úlohy okrem 8. (tú si urobte sami, ak chcete)
  • Úlohy:
    • 1. Do pom.xml pridajte podporu pre JavaFX ako to bolo ukázané na prednáške.
    • 2. Cez SceneBuilder si vytvorte FXML súbor a Controller triedu. FXML súbor bude okrem kontajnera (AnchorPane) obsahovať komponenty:
      • Label s nejakým textom
      • Button, s nejakým textom, po stlačení zmení text Labela na náhodné číslo (napr. cez Math.random())
    • 3. Stiahnite si 3 súbory s príponou .csv a dajte ich vo vašom projekte do src/resources/[meno.balíčka].
    • 4. Upravte „servisnú“ triedu z minulého cvičenia tak, aby mohla načítať tieto 3 súbory a inicializovať svoj vnútorný zoznam.
      • Napr. StudentService si zo students.csv vytvorí zoznam študentov, kde každý riadok z csv predstavuje jedného študenta.
      • Súbory v priečinku resources vieme otvoriť napr cez VašaService.class.getResourceAsStream(„students.csv“). Výsledok tejto metódy môžete dať do konštruktora triedy Scanner, ktorým môžete čítať súbor riadok po riadku.
    • 5. Tlačidlo z úlohy 2 preprogramujte tak, že po stlačení:
      • Vytvorí inštanciu vašej servisnej triedy.
      • Načíta do nej CSV dáta podľa úlohy 4.
      • Zavolá metódu z vašej servisnej triedy, ktorú ste implementovali v predchádzajúcom cvičení v úlohe 2 (ďalej len servisná metóda).
        • Ak servisná metóda potrebuje parametre, tak ich zatiaľ hardcode-nite.
      • Nastaví zobrazovaný text Labela na výsledok servisnej metódy.
    • 6. Pre „akože“ fajnšmekrov: Ak vaša servisná metóda potrebuje parametre, tak do FXML pridajte TextField(y) na zadávanie parametrov do servisnej metódy užívateľom. Nech tlačidlo si ich pri stlačení načíta a korektne nimi zavolá servisnú metódu.
    • 7. Pre ozajstných fajnšmekrov:  Namiesto kontajnera AnchorPane v úlohe 2 použite kontajner Grid, kde tlačidlo bude na spodku a roztiahnuté cez celú šírku okna. Label nech bude stále (približne) v strede okna. Ak ste implementovali úlohu 6, tak TextField(y) dajte na spodok nad tlačidlo.
    • 8. Pre elitných fajnšmekrov: Preprogramujte tlačidlo tak, že po stlačení otvorí DirectoryChooser, ktorý umožní vybrať si priečinok. Následne skontroluje, či priečinok obsahuje súbory s pevne danými názvami (students.csv, subjects.csv, attendances.csv). Ak nie, potom aplikácia vypíše chybu (napr. do Labela). Ak tie súbory obsahuje, tak ich použite na inicializáciu dát vašej „servisnej“ triedy a následne zavolajte servisnú metódu.

4. Cvičenie (8.10.2024)

  • Otváranie druhého okna, Model, DAO, prispôsobený ListView, ComboBox, CheckBox, skrolovanie, vkladanie závislostí
  • Vychádzajte z vetvy c03 gitu projektu attender
  • Hotové riešenie v gite projektu attender – vetva c04 
  • Úlohy:
    • 1. Prerobte hlavné okno tak, že bude obsahovať
      • tlačidlo na pridanie prezenčky,
      • zoznam všetkých prezenčiek.
    • 2. Implementujte triedy MemoryStudentDao, MemoryAttendanceDao a MemorySubjectDao. Budú poskytovať základné CRUD operácie nad interným zoznamom hodnôt. Implementujte aj inicializáciu pomocou hard-coded CSV súborov, viď. AttendanceService z predchádzajúceho cvičenia.
    • 3. Tlačidlo na pridanie prezenčky otvorí nové modálne okno „New attendance“. Modalita znamená, že počas existencie nového okna bude hlavné okno „zamrznuté“. Nové okno nech má vlastný FXML súbor a príslušný kontrolér. Nech obsahuje:
      • Komponent na výber dátumu.
      • ComboBox na výber zo zoznamu predmetov (Subject). Nech zobrazuje iba názvy predmetov.
      • Zaškrtávací zoznam študentov zapísaných na predmet. Tých, čo v GUI zaškrtneme pridáme do prezenčky.
      • Tlačidlo na uloženie prezenčky do príslušného DAO. Po stlačení tiež zavrie okno.
    • 4. V hlavnom okne upravte zoznam prezenčiek tak, aby:
      • Zobrazoval prezenčky vo formáte „2024-10-08 PAZ1c (4/8 students)“.
      • Položky boli usporiadané od posledného dátumu. Toto urobte v DAO tak, aby usporiadanie nemenilo interný zoznam dát.
    • 5. Prerobte kontrolér z úlohy 3. tak, aby používal vlastný Model.

5. Cvičenie (15.10.2024)

  • Dvojkliky, editovanie existujúceho záznamu, mazanie, ikony. confirm alert, FileChooser.
  • Vychádzajte z vetvy c04 gitu projektu attender
  • Hotové riešenie v gite projektu attender – vetva c05 
  • Úlohy:
    • 1. Nech dvojklik na existujúcu prezenčku v hlavnom okne otvorí nové okno na editáciu prezenčky. Snažte sa to urobiť bez vytvárania nových tried a FXML súborov. Editovať bude môžno iba zoznam študentov. Nebude teda možné editovať dátum a predmet prezenčky. Odporúčam tieto komponenty v okne zobraziť, no zablokovať ich.
    • 2. Do hlavného okna pridajto tlačidlo na zmazanie vybranej prezenčky.
    • 3. Nech tlačidlo na mazanie najprv zobrazí varovanie a až po potvrdení nech zmaže prezenčku.
    • 4. Do tlačidla na mazanie pridajte ikonu smetného koša. Napríklad môžete použiť túto kolekciu ikon.
    • 5. Implementujte návrhový vzor Továreň a refaktorujte všetky miesta, kde sa vytvára DAO za použitia továrne.
    • 6. Do hlavného okna pridajte tlačidlo, ktoré po stlačení otvorí DirectoryChooser. Ten umožní vybrať si priečinok. Ak užívateľ stlačí na OK, tak nech DirectoryChooser skontroluje, či priečinok obsahuje súbory s pevne danými názvami (students.csv, subjects.csv, attendances.csv). Ak nie, potom aplikácia vypíše chybu v podobe Alert-u. Ináč nerobte nič.
    • 7. V prípade, že DirectoryChooser pri stlačení tlačidla OK obsahuje príslušné csv, tak ich použite na inicializáciu dát DAO tried.
      • Refaktorujte metódy „fromResource“, aby neboli statické a aby namiesto hardcodených súborov si ich zobrali z parametra. (Rada: Je OK, ak jedno DAO použije aj iné DAO)
      • Po načítaní nech vypíše počet vložených riadkov v alerte.
      • Dajte pozor, aby ste nepridávali duplicitné položky.
    • 8. Pre fajnšmekrov: Vylepšite logiku načítavania CSV.
      •  Pridajte validáciu na názvy stĺpcov aby sedeli s tým, čo je v príslušnej entitnej triede.
      •  Urobte načítavanie CSV tak, aby fungovalo aj keď poradie „stĺpcov“ v súbore bude iné.

6. Cvičenie (22.10.2024)

  • Vytvorenie databázy
  • Vychádzajte z vetvy c05 gitu projektu attender
  • Hotové riešenie v gite projektu attender – vetva c06 
  • Úlohy:
    • 1. Navrhnite relačnú databázu pre projekt Attender ako ER diagram-
    • 2. Namodelujte databázu v MySQL Workbench EER.
    • 3. Exportujte model ako SQL skript a uložte ho do init.sql v koreňovom priečinku projektu.
    • 5. Vytvorte docker-compose.yml, ktorý spustí MySQL a pri prvotnom spustení si spustí príkazy v súbore init.sql.

Predstavenie DB návrhov projektov (29.10.2024)

7. Cvičenie (5.11.2024)

  • Rozšírenie Factory, Mysql***Dao, časť 1
  • Vychádzajte z vetvy c06 gitu projektu attender
  • Hotové riešenie v gite projektu attender – vetva c07 
    • Vetva obsahuje aj riešenie následujúceho cvičenia
  • Úlohy:
    • 1. Vytvorte triedu MysqlStudentDao, ktorá implementuje rozhranie StudentDao.
    • 2. Vytvorte triedy MysqlSubjectDao, ktorá implementuje rozhranie SubjectDao.

8. Cvičenie (12.11.2024)

  • Cvičenie sa zrušilo

9. Cvičenie (19.11.2024)

  • Rozšírenie Factory, Mysql***Dao, časť 2
  • Hotové riešenie v gite projektu attender – vetva c07 
  • Úlohy:
    • 1. Vytvorte triedu MysqlAttendanceDao, ktorá implementuje rozhranie AttendanceDao.
    • 2. Upravte triedu Factory, aby vytvárala nové implementácie Dao.
    • 3. Implementujte automatické testy nových Dao tried pomocou knižnice TestContainers.

10. Cvičenie (26.11.2024)

  • Prihlasovanie
  • Úlohy:
    • 1. Refaktorujte entitu student na entitu user.
      • Pozor na tabuľku
      • User bude mať nový atribút role, ktorý bude mať hodnoty student, teacher.
      • User bude mať nový atribút password typu varchar(60).
      • User bude mať nový atribút email typu varchar(60).
    • 2. Pridajte ručne do databázy nejakého učiteľa, heslo uložte ako BCrypt hash.
    • 3. Implementujte okienko, ktoré sa umožní prihlásiť učiteľovi na základe emailu a hesla.
      • Prihlasovacie okienko sa spustí spolu s hlavným okienkom, ktoré bude zablokované, kým sa užívateľ príhlási.
      • Vhodne riešte aj zadanie nesprávnych údajov.

11. Cvičenie (2.12.2024)

  • REST server
  • Úlohy:
    • 1. Doplňte do pom.xml závislosti pre spring-boot-starter-pareny a spring-boot-starter-web.
    • 2. Implementujte REST kotroléry pre všetky DAO triedy.
      • Pozor, aby ste vracali HTTP status 201 v prípade POST požiadaviek.
    • 3. Implementujte mechanizmus na vhodné mapovanie výnimiek na HTTP statusy.

12. Cvičenie (9.12.2024)

  • React Web klient
  • Úlohy:
    • 1. Vytvorte projekt webovej aplikácie v Reacte cez nástroj Vite, ktorá bude používať Typescript.
      • Aplikáciu pomenujte attender-web.
    • 2. Doplňte závislosť na Material UI a React Router Dom/Tanstack Router.
    • 3. Implementujte hlavnú funkcionalitu z JavaFX projektu.
      • Hlavná stránka zobrazí zoznam prezenčiek, ktorý bude obsahovať dátum prezenčky, názov predmetu. počet prítomných študentov a počet zapísaných študentov na predmete.
      • Každý riadok bude obsahovať tlačidlo na editovanie a mazanie prezenčky.
      • Nad zoznamom prezenčiek bude tlačitlo na pridanie novej prezenčky.
      • Editovanie a pridávanie prezenčiek riešte na novej stránke. Použite knižnicu React Router Dom, alebo Tanstack Router.
      • Ako „perzistentnú“ vrstvu (DAO) použite volania na REST server z predchádzajúceho cvičenia.