Predmet Webové technológie je určený pre študentov Košickej akadémie
softvérového vývoja,
druhý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s Javascript-om, Typescript-om a frameworkom Angular.
Stretnutia
25. Angular - obhajoby projektov a vlastné validátory
Na začiatku si spravíme prvú obhajobu projektov. Ak ani jeden člen tímu nie je prítomný v škole, tu je link na dištančnú obhajobu.
Vytvoríme si synchrónny validátor na zhodu hesiel registrácie. Napíšeme si asynchrónny
validátor pre kontrolu konfliktu s menom a emailom na serveri.
Vytvoríme si komponent na registráciu používateľov a zrealizujeme neoverenú registráciu. Ukážeme si zabudované
validátory, aj ako ich aktivovať v template-driven formulároch.
Predstavíme si alternatívnu formu prepojenia DOM modelu a dát - reaktívne formuláre. Porovnáme ich s
template-driven prístupom.
22. Angular - vlastná knižnica, Material snackbar, Material toolbar
Dorobíme službu na výpis úspechových a chybových stavov. Vytvoríme si tiež Angular knižnicu, pošleme ju do
repozitára NPMJS a použijeme ju v projekte.
Dorobíme menu a funkciu odhlásenia. Vyskúšame si signály.
21. Angular - strážcovia routovania 2, Material knižnica
Strážcovia Resolver, CanMatchFn. Začneme nový projekt na správu používateľov a filmov v Angular 19. Tentoraz však nebudeme používať Bootstrap, ale použijeme knižnicu komponentov v Material dizajne, začneme Login komponentom.
Vytvoríme si hierarchické routovanie modulu pre skupiny. Vyskúšate si sami vytvoriť editačný
komponent na pridanie skupiny. Dorobíme komponent na pridanie skupiny a využijeme ho aj na
editáciu skupiny.
18. Angular - feature moduly, routovanie s parametrami, hierarchické routovanie
Dokončíme editáciu používateľa. Vytvoríme si feature modul na prácu so skupinami, nastavíme mu vlastné routovanie a natiahneme ho lazy štýlom do routra. Ukážeme si parametrické pravidlo pre router a prijatie parametra v komponente.
17. Angular - komunikácia komponentov rodič-dieťa, validácia v template-driven formulároch
Ukážeme si vytvorenie pomocného modelu pre zoznam
checkboxov. Predstavíme si niekoľko validačných direktív a validačné hodnoty, ktoré sú použiteľné pre vizualizáciu.
Zrealizujeme mazanie používateľa aj s jednoduchým konfirmačným oknom.
Vysvetlíme si použitie komunikácie komponentov rodič-dieťa cez @Input a @Output premenné. Použijeme novú
metódu životného cyklu ngOnChanges(), ktorá je volaná, keď sa zmenia @Input premenné.
16. Angular - služba na správy, Subject, odchytávanie všetkých chýb Http klienta, modálne okno Bootstrapu
Spravíme si refaktor: Službu na úspechové aj chybové správy cez RXJS Subject a spracovanie HTTP chybových hlášok. Prichystáme
detský komponent na pridávanie a editáciu používateľa.
Uložíme sme si token v localStorage, ktorý prežije aj zmenu URL "zvonku".
Ukážeme si navigáciu zo šablóny tak, aby sme nekontaktovali server. Upravíme si navigačnú lištu tak,
že vždy ukazuje správne stav prihlásenia a zrealizujeme odhlásenie na strane klienta.
14. Angular - throwError pre Observable, komponent pre zoznam rozšírených používateľov
Odchytíme chyby v Observable a nahradíme ich iným prúdom, rozšírime si používateľov o skupiny, použijeme token na získanie rozšírených používateľov a zobrazíme si ich v tabuľke. Na záver si vytvoríme navigáciu na stránku.
Vytvoríme si komponent na prihlasovanie a spracujeme prihlásenie v službe. Odchytíme chyby v servise a zobrazíme
ich v komponente. Vysvetlíme si princíp routingu, nastavíme základný router aj s presmerovaním a odchytením
všetkých zlých URL adries.
12. Angular - servisy, komunikácia so serverom, Observable
Vráťte mená všetkých postáv filmu Impérium vracia úder zoradené podľa dĺžky celého mena od najkratších. V rámci rovnakých dĺžok nech sú usporiadané ako reťazce (podľa mena):
Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.
Úlohy:
Vypíšte prvých 10 najhustejšie obývaných krajín - pre každú krajinu jej názov a hustotu obyvateľstva
v počte ľudí na km2 zaokrúhlenú na 2 desatiné miesta.
Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe alebo flow:
Vytvorte funkciu languageToCountArray, ktorá vráti pre každý výskyt jazyka objekt s názvom
jazyka a počtom obyvateľov krajiny, kde ste tento jazyk našli.
Vytvorte funkciu languageToCountObject, ktorá vezme výsledok predošlej metódy a vráti objekt,
kde vlastnosti sú jazyky a hodnoty sú súčty počtov obyvateľov pre jednotlivé jazyky.
Vytvorte funkciu arrayOfLanguages, ktorá vezme výsledok predošlej metódy a vráti pole, v ktorom
pre každý jazyk máme objekt s názvom jazyka a počtom obyvateľov, ktorý týmto jazykom rozprávajú
(predpokladáme, že
každý obyvateľ, ktorý žije v krajine, kde sa používa, túto reč ovláda).
Vytvorte funkciu sortArray, ktorá vezme výsledok predošlej metódy a usporiada ho od najväčších
po najmenšie počty.
Vytvorte funkciu topTen, ktorá vezme výsledok predošlej metódy a vráti pole iba prvých 10
objektov z pôvodného poľa.
Vytvorte funkciu humanReadable, ktorá vezme výsledok predošlej metódy a vráti podobné pole, ale
počty sú uvedené ako reťazce v tvare napr. "1.414 mld", teda číslo v miliardách zaokrúhlené na milióny a
s pridaným reťazcom " mld".
Vytvorte funkciu toString, ktorá vezme výsledok predošlej metódy a vráti reťazec obsahujúci
výslednú tabuľku najpoužívanejších 10 jazykov aj s počtom ľudí teda:
Povieme si ako reťaziť funkcie prostredníctvom rúry. Budeme pracovať s
JSON dokumentom countries.json, podľa úloh uvedených nižšie.
Úlohy:
Vráťte pre každú menu, ktorá sa používa aspoň v 5 krajinách, krajiny, v ktorých sa ňou platí a ich počet.
Výsledkom je usporiadané pole od najmenej používaných po najviac používané meny, teda:
Vysvetlíme si ďalšie higher-order funkcie v poliach - flat, flatMap, reduce a reduceRight. Budeme pracovať s
JSON dokumentom countries.json, podľa úloh uvedených nižšie.
Úlohy:
Vráťte pole všetkých jazykov, ktoré sa používajú Južnej Amerike bez duplicít, teda:
Prejdeme si také súčasti jazyka JavaScript, ktoré sa v Jave nenachádzajú - globálne vs. lokálne premenné a
konštanty, template strings, pravdivé a nepravdivé výrazy, rôzna práca s objektami a poľami, object
destructuring, spread operátor, klasické vs. arrow funkcie a použitie this v nich. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight.
Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.
Úlohy:
Vráťte pole s názvami všetkých krajín.
Vráťte pole s názvami európskych krajín.
Vráťte pole objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov,
teda:
Samostatne si zopakujte tému CSS, so špeciálnym zameraním na poziciovanie a responzívny dizajn (Flexbox, Grid, @media)
Riešenie nasledovných úloh zašlite cez classrom githubu do piatka 27.septembra 2024. Na stránke má fungovať navigácia na stránky domov, kompostovanie a kompostovanie_galeria a výsledné HTML má byť validné. Pre CSS majú platiť nasledovné vlastnosti:
Hlavný layout: zabezpečte, že šírka obsahu je maximálne 1000px. Pre užšie displaye ako 1000px nech je šírka
100%.
Trojstĺpcový formát zmeňte pre stredne široké displeje na dvojstĺpcový a pre veľmi úzke na jednostĺpcový -
pravý panel sa presúva pod hlavnú sekciu a ľavé menu sa schová pod hamburgerové toggle tlačidlo.
Naštýlujte fotogalégiu na adrese http://localhost:8080/kompostovanie_galeria tak, aby obrázky boli umiestnené v
rámčekoch s rovnakou veľkosťou, pričom fotky s popiskom majú v rámčeku aj popis. Počet vedľa seba umiestnených
fotiek záleží od šírky displeja. V prípade veľmi úzkych displejov (keď už máme iba jednostĺpcový formát stránky)
sú obrázky oddelené iba horizontálnou čiarou namiesto rámčeka.
Cez @Media query nastavte pre tlačiareň zneviditeľnenie menu a pravého panela a zmenu farieb na čierne a
biele (využite print media simuláciu v prehliadači).
Zabezpečte pre celý web, aby sa žiadne elementy neprekrývali a aby nevytŕčali z hlavného obsahu alebo okna pri všetkých šírkach.
Na začiatku si spoločne zladíme HTML zo zadania z minulého stretnutia. Spravíme dynamický web s pomocou EJS: Rozkrájame stránku na hlavičku, pätičku, bočnú navigáciu a hlavný obsah. Zobrazíme správnu podstránku v závislosti od url adresy.