Webové techológie

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

29. Angular - MatTableDataSource, MatPaginator, MatSort, filtrovanie tabuľky, HttpOptions, token v HTTP hlavičke

pdf iconAngular - jedenásta časť jar file iconfilms-server.jar (java 17) jar file iconfilms-server-java8.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

Predstavíme si komponent na pagináciu a jeho použitie v tabuľke cez MatTableDataSource, tiež usporiadanie tabuľky cez MatSort a 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. Vyskúšame si expandovateľné riadky v Material tabuľke.

27. Angular - Tabuľka v Angular Material

pdf iconAngular - jedenásta časť jar file iconfilms-server.jar (java 17) jar file iconfilms-server-java8.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

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. Zrealizujeme mazanie používateľov. Vytvoríme si dialóg na overenie, či používateľ chce naozaj vymazať používateľa.

26. Angular - Vlastné validátory

pdf iconAngular - desiata časť jar file iconfilms-server.jar (java 17) jar file iconfilms-server-java8.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

Dokončíme registráciu používateľa. 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. Napíšeme si asynchrónny validátor pre kontrolu konfliktu s menom a emailom na serveri a synchrónny validátor na zhodu hesiel registrácie.
Stretnutie prebehne prezenčne, ale pre tých, čo sa nevedia dostaviť prezenčne, budem zdieľať obrazovku cez MS Teams.

25. Angular - NGXS, validátory a reaktívne formuláre

pdf iconAngular - deviata časť pdf iconAngular - desiata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

Dorobíme AuthGuard pre CanLoad a CanActivate spolupracujúci s úložiskom s funkcionalitou presmerovania na pôvodnú url po prihlásení. Nastavíme si automatické odhlásenie pri vypršaní platnosti tokenu po prihlásení.
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.
Stretnutie prebehne dištančne cez MS Teams.

24. Angular - NGXS a snackbar material komponent

pdf iconAngular - deviata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

Ukážeme si rôzne selektory na získanie aktuálneho stavu a počúvanie na zmenu stavu. Zrealizujeme odhlásenie cez úložisko aj s podporou routovania. Dorobíme navigačnú lištu. Vytvoríme si službu na zobrazovanie správ cez material component snackbar. Cez túto službu budeme zobrazovať chybové aj úspešné hlášky z prihlasovania, odhlasovania, straty session, nedostupnosti servera a pod. Nastavíme si automatické odhlásenie pri vypršaní platnosti tokenu.
Stretnutie prebehne dištančne cez MS Teams.

23. Angular - NGXS

pdf iconAngular - deviata časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/films

Centrálne úložisko na ukladanie zdieľaných dát, na ktorého zmeny sa dá napísať listener, to je NGXS. Jedno si nainštalujeme spolu s užitočnými pluginmi a vysvetlíme si generovanie udalostí, princíp reakcií (@Action, reducerov) a zmenu immutable stavu v nich.
Stretnutie prebehne prezenčne, ale pre tých, čo sa nevedia dostaviť prezenčne, budem zdieľať obrazovku cez MS Teams.

21. Angular - Práca na vlastnom projekte

Samostatná práca na vlastnom záverečnom projekte.

20. Angular - Práca na vlastnom projekte

Samostatná práca na vlastnom záverečnom projekte.

13. Angular - localStorage, sessionStorage, Subscriber

pdf iconAngular - štvrtá časť jar file iconfilms-server.jar github iconhttps://gitlab.kosickaakademia.sk/wt2021/users-management

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.

9. Higher-order funkcie v poliach IV

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2021/countries

Budeme pracovať s JSON dokumentmi z adresy swapi.dev, podľa úloh uvedených nižšie.

Úlohy:

  1. Vypíšte mená všetkých postáv v tvare:
    [ 'Luke Skywalker', 'C-3PO', 'R2-D2', 'Darth Vader',... ]
  2. Vypíšte mená všetkých postáv usporiadané podľa mena:
    [ 'Ackbar', 'Adi Gallia', 'Anakin Skywalker', 'Arvel Crynyd', 'Ayla Secura',... ]
  3. Vypíšte mená všetkých postáv usporiadané podľa "priezviska": 
    [ 'Ackbar', 'Mas Amedda', 'Padmé Amidala', 'Wedge Antilles', 'Raymus Antilles',... ]
  4. 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: [] },... ]
  5. 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: [] },...]
  6. 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

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2021/countries

Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.

Úlohy:

  1. Postupne vytvorte nasledovné funkcie a zreťazte ich cez pipe/flow:
    1. 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.
    2. 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,
    ...}
    3. 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 },
  ...]
    4. Vytvorte funkciu sortArray, ktorá vezme výsledok predošlej metódy a usporiada ho od najväčších po najmenšie počty.
    5. 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.
    6. 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".
    7. 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

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2021/countries

Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.

Úlohy:

  1. 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'},
    ...
  ]
  2. 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',...],
    ...
  }
  3. 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',...]},
    ...
  ]
  4. 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

pdf iconVybrané súčasti Javascriptu github iconhttps://gitlab.kosickaakademia.sk/wt2021/countries

Budeme pracovať s JSON dokumentom countries.json z adresy restcountries.eu, podľa úloh uvedených nižšie.

Úlohy:

  1. Vráťte pole s názvami všetkých krajín.
  2. Vráťte pole s názvami európskych krajín.
  3. 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' },
    ...
  ]

5. CSS + Vybrané súčasti Javascriptu

pdf iconVybrané súčasti Javascriptu

Pozrieme sa na riešenia úloh z predchádzajúcej hodiny, vyriešime prípadné problémy a otázky z konkrétnych CSS. 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. Vysvetlíme si základné higher-order funkcie v poliach - forEach, filter, map, flat, flatMap, reduce a reduceRight.

4. CSS

pdf iconZáklady CSS3 pdf iconPoziciovanie v CSS github iconhttps://gitlab.kosickaakademia.sk/wt2021/transylwahnja

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:

  1. Hlavný layout: zabezpečte, že šírka obsahu je maximálne 1000px. Pre užšie displaye ako 1000px nech je šírka 100%.
  2. 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.
  3. 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.
  4. 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).
  5. Zabezpečte pre celý web, aby sa žiadne elementy neprekrývali a aby nevytŕčali z hlavného obsahu pri všetkých šírkach.

Riešenia:

Nedodané riešenie: Henrieta Štovčíková