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.
Vyskúšame si expandovateľné riadky v Material tabuľke. Rozšírime metódu na získanie filmov zo servera s voliteľnými
parametrami. Vysvetlíme si, ako sa používa DataSource pre Material tabuľku, navrhneme si neskoršie spojenie viacerých
prúdov udalostí do jedného.
Ukážeme si vlastné usporiadanie riadkov a doplníme filtrovanie riadkov.
Vytvoríme si nový modul na zobrazovanie zoznamu filmov. Ukážeme si, ako sa vkladá token do HTTP hlavičky.
Vytvoríme si servis na získanie filmov zo servera.
Začneme druhou priebežnou obhajobou.
Vytvoríme si 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.
Predstavíme si komponent na pagináciu a jeho použitie v tabuľke cez MatTableDataSource, tiež
usporiadanie tabuľky cez MatSort.
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.
V prvej polovičke študenti ukážu akutálny stav ich projektov.
Nainštalujeme si knižnizu na overovanie sily hesla 'zxcvbn' a použijeme ju vo vlastnom validátore.
Pridáme validátor emailov cez pattern, vytvoríme si tiež notifikácie chýb používateľovi cez mat-error
a hintov cez mat-hint. Vytvoríme si synchrónny validátor na zhodu hesiel registrácie.
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.
Poslednú hodinu budeme pracovať na svojich projektoch.
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.
Dorobíme formulár na editáciu používateľa, vyhodnotíme si korektnosť formulára cez validáciu a zašleme formulár
rodičovskému komponentu na spracovanie.
14. Angular - služba na správy, Subject, zložitejší formulár
Spravíme si refaktor: Službu na správy pre zmenu cez RXJS Subject a spracovanie HTTP chybových hlášok.
Vytvoríme si komponent na editáciu používateľa ako modálne okno Bootstrapu.
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 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:
Pozrieme sa na riešenia zadaných úloh (generovanie noviniek, stránkovanie, CSS), vyriešime prípadné problémy a otázky.
V druhej časti si prejdeme 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.
Zo stránky odstránime pôvodné CSS súbory a začneme vytvárať vlastné. 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.
Pradstaví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:4000/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.
Dodáme dynamiku do menu tak, že obsah menu určuje JSON súbor. V závislosti na kliknutej
položke v menu zobrazíme príslušný hlavný obsah a zvýrazníme vybranú položku v menu. Vygenerujeme novinky a pagináciu.