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.
Vytvoríme si dialóg na overenie, či používateľ chce naozaj vymazať používateľa. Vytvoríme si aj komponent na editáciu
používateľa. Použijeme FormArray reaktívnych formulárov na dynamické pridávanie input elementov, špeciálne dynamicky
generované checkboxy s label-mi.
Ukážeme si na príklade tabuľky používateľov použitie mat-table
s jednoduchými stĺpcami mat-text-column aj zložitejšími cez mat-cell.Ukážeme si tvorbu vlastnej Pipe na
zobrazovanie zoznamu skupín a práv používateľa.
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.