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 HTML5, CSS3, Typescript-om a frameworkom Angular.
Pridáme validátor emailov cez pattern. Nainštalujeme si knižnizu na overovanie sily hesla 'zxcvbn-ts' a použijeme
ju vo vlastnom validátore. 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.
21. 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 a nový flow control.
Začneme nový projekt na správu používateľov a filmov. Tentoraz však nebudeme používať Bootstrap, ale použijeme
knižnicu komponentov v Material dizajne. Spoznáme standalone komponenty.
Vytvoríme si detský komponent na pridávanie a editáciu používateľa. 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.
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é.
14. Angular - služba na správy, Subject, odchytávanie všetkých chýb Http klienta
Dorobíme si navigáciu na stránku. 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.
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.
11. Angular - servisy, komunikácia so serverom, Observable
Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe/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:
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 objektov s vlastnosťami name a area, popisujúce krajiny s počtom obyvateľov nad 100 miliónov,
teda:
Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map.
Budeme pracovať s JSON dokumentom countries.json podľa úloh uvedených nižšie.
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:
Povieme si ako písať prehľadné
selektory. Porozprávame si rôzne poziciovania - relatívne, absolútne, fixné, sticky. Ukážeme si ako
uložiť blokový element do stredu okna a ako sa dá transformovať element - posun, otočenie, zošikmenie.
Predstavíme si vlastnosti float a clear. Zopakujeme si, ako funguje Flexbox a predstavíme dvojrozmerný Grid layout.
Povieme si, čo všetko grid layout zvláda, nastavíme hlavný layout stránky cez pomenovania oblastí a
využijeme ich pre rôzne šírky displeja.
Úlohy:
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 pri
všetkých šírkach.
Úlohy vyriešte do stredy 4.10.2023 8:00 a pošlite mi ich mailom v zip súbore, kde budú 3 html súbory (home, kompostovanie a kompostovanie_galeria) a 1 css súbor, aby som nemusel rozbehávať váš server.
Zobrazíme správnu podstránku v závislosti od url adresy. Dodáme dynamiku do menu tak, že obsah menu určuje JSON súbor. Zvýrazníme vybranú položku v menu. Vygenerujeme novinky a pagináciu.