O predmete
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.
Stretnutia
32. WebSockety - subscribe a disconnect
Dokončenie četovacieho projektu.
31. WebSockety - princíp a napojenie
Vysvetlíme si, ako fungujú WebSockety, čo je to STOMP, message broker, topic, SockJS a začneme vyrábať service na komunikáciu cez WebSockety.
30. Angular - HttpParams, DataSource
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.
29. Angular - MatTableDataSource, filtrovanie tabuľky, HttpOptions, token v HTTP hlavičke
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.
28. Angular - FormArray, MatTableDataSource, MatPaginator, MatSort
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.
27. Angular - Material dialog
Zrealizujeme mazanie používateľov. Vytvoríme si dialóg na overenie, či používateľ chce naozaj vymazať používateľa.
26. Angular - Material table
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.
25. Angular - Asynchrónny validátor
Napíšeme si asynchrónny validátor pre kontrolu konfliktu s menom a emailom na serveri. Prichystáme si modul na správu používateľov.
24. Angular - obhajoby projektov a validácia hesla
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.
23. Angular - validátory a reaktívne formuláre
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.
22. Angular - Material toolbar
Dorobíme menu a funkciu odhlásenia. Poslednú hodinu budeme pracovať na svojich projektoch.
21. Angular - Material snackbar
Dorobíme službu na výpis úspechových a chybových stavov. V druhej polke budeme pracovať na svojich projektoch.
20. Angular - Material komponenty
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.
19. Angular - Strážcovia routovania II.
Strážcovia CanDeactivate a CanLoad.
18. Angular - Strážcovia routovania
Dorobíme komponent na pridanie skupiny a využijeme ho aj na editáciu skupiny. Strážcovia CanActivateTo, CanActivateChild, CanDeactivate.
17. Angular - routovanie s parametrami, hierarchické routovanie
Nastavíme si routovanie modulu - najprv parametrické, potom hierarchické. Vyskúšate si sami vytvoriť editačný komponent na pridanie skupiny.
16. Angular - editácia a mazanie používateľa, common moduly
Dokončíme CRUD operácie s entitou používateľa - editácia a mazanie. Vytvoríme si Common modul pre skupiny používateľov.
15. Angular - validácia formulára, komunikácia v hierarchii komponentov
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.
13. Angular - localStorage, sessionStorage, Subscriber
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.
12. Angular - routing, ng-model
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
Vytvoríme si service a napojíme sa na REST server. Pohráme sa so spracovaním rôznych druhov HTTP odpovedí.
Server spustíme v konzole, ak máme nainštalovanú javu aspoň vo verzii 17, príkazom:
10. Angular - komponenty
Vytvoríme si Angular projekt, vysvetlíme si základnú štruktúru, porozprávame si o entitách a princípe MVC v komponentoch.
9. Higher-order funkcie v poliach IV
Budeme pracovať s JSON dokumentmi z adresy swapi.dev, podľa úloh uvedených nižšie.
Úlohy:
- Vypíšte mená všetkých postáv v tvare:
[ 'Luke Skywalker', 'C-3PO', 'R2-D2', 'Darth Vader',... ]
- Vypíšte mená všetkých postáv usporiadané podľa mena:
[ 'Ackbar', 'Adi Gallia', 'Anakin Skywalker', 'Arvel Crynyd', 'Ayla Secura',... ]
- Vypíšte mená všetkých postáv usporiadané podľa "priezviska":
[ 'Ackbar', 'Mas Amedda', 'Padmé Amidala', 'Wedge Antilles', 'Raymus Antilles',... ]
- Vypíšte mená všetkých postáv spolu s ich živočíšnym druhom v tvare:
[ { name: 'Luke Skywalker', specimen: [] }, { name: 'C-3PO', specimen: [ 'Droid' ] }, { name: 'R2-D2', specimen: [ 'Droid' ] }, { name: 'Darth Vader', specimen: [] },... ]
- Vypíšte pre každú planétu, aké postavy tam žijú v tvare:
[ { planet: 'Tatooine', people: [ {'name':'Luke Skywalker','url':'https://swapi.dev/api/people/1/'}, {'name':'C-3PO','url':'https://swapi.dev/api/people/2/'}, {'name':'Darth Vader','url':'https://swapi.dev/api/people/4/'}, ...]}, { planet: 'Alderaan', people: [ {"name":"Leia Organa","url":"https://swapi.dev/api/people/5/"}, {"name":"Bail Prestor Organa","url":"https://swapi.dev/api/people/68/"}, {"name":"Raymus Antilles","url":"https://swapi.dev/api/people/81/"} ...] }, { planet: 'Yavin IV', people: [] },...]
- Vypíšte pre každú planétu, aké živočíšne druhy na nej poznáme v tvare:
[ { planet: 'Tatooine', species: [ 'Droid' ] }, { planet: 'Alderaan', species: [ 'Human' ] }, { planet: 'Yavin IV', species: [] }, ... { planet: 'Naboo', species: [ 'Droid', 'Gungan', 'Human' ] }, ...]
8. Higher-order funkcie v poliach III
Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.
Úlohy:
- 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.
{ Pashto: 27657145, Uzbek: 59233545, Turkmen: 32408265, Swedish: 15415580, ...}
-
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).
[ { language: 'Pashto', count: 27657145 }, { language: 'Uzbek', count: 59233545 }, { language: 'Turkmen', count: 32408265 }, ...]
- 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:
English: 2.655 mld Chinese: 1.414 mld Hindi: 1.296 mld ...
7. Higher-order funkcie v poliach II
Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.
Úlohy:
- Vráťte objekt, kde vlastnosti sú jazyky z Južnej Ameriky a ich hodnotami polia krajín z Južnej Ameriky, v
ktorých sa nimi hovorí, teda:
{ Spanish: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...], Portuguese: [ 'Brazil' ], English: [ 'Falkland Islands (Malvinas)', 'Guyana',...], ... }
- Vráťte pole objektov s dvoma vlastnosťami, jazyk z Južnej Ameriky a krajiny z Južnej Ameriky, v ktorých sa
ním hovorí, teda:
[ { language: 'Spanish', countries: ['Argentina', 'Bolivia (Plurinational State of)', 'Chile',...]}, { language: 'Portuguese', countries: [ 'Brazil' ]}, { language: 'English', countries: [ 'Falkland Islands (Malvinas)', 'Guyana',...]}, ... ]
- 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:
[ { currency: 'New Zealand dollar', countries: [ 'Cook Islands', 'New Zealand', 'Niue', 'Pitcairn', 'Tokelau' ], count: 5 }, { currency: 'Central African CFA franc', countries: ['Cameroon', 'Central African Republic', 'Chad', 'Congo', 'Equatorial Guinea', 'Gabon'], count: 6 }, ... ]
6. Higher-order funkcie v poliach
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:
[ { name: 'Bangladesh', area: '147570 km2' }, { name: 'Brazil', area: '8515767 km2' }, { name: 'China', area: '9640011 km2' }, ... ]
- Vráťte pole všetkých jazykov, ktoré sa používajú Južnej Amerike bez duplicít, teda:
[ { iso639_1: 'es', iso639_2: 'spa', name: 'Spanish', nativeName: 'Español' }, { iso639_1: 'gn', iso639_2: 'grn', name: 'Guaraní', nativeName: "Avañe'ẽ" }, { iso639_1: 'ay', iso639_2: 'aym', name: 'Aymara', nativeName: 'aymar aru'}, ... ]
5. EJS + CSS + Vybrané súčasti Javascriptu
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.
4. CSS
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.
3. EJS
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.
2. NodeJS + EJS
Spravíme dynamický web s pomocou EJS: Rozkrájame stránku na hlavičku, pätičku, bočnú navigáciu a hlavný obsah.
1. HTML5
Upravíme stránku Ranča Transylwahnja. Pridáme sémantické elementy.