Problem Set #99: Front-End šablóna

Ciele

Vyskúšať si moderné technológie na vývoj webu
Pomôcť vášmu spolužiakovi s jeho záverečnou prácou

Poznámka

Toto je dobrovoľné zadanie. Body, ktoré môžete získať z tohto zadania, sú nad rámec celkového počtu bodov z predmetu. Toto zadanie je potrebné odovzdať do 2024-04-30 23:59:59. Na diskusiu používajte kanál na slack-u #front-end.

Úvod

Cieľom týchto úloh je zhodnotiť náročnosť populárnych webových rámcov pre nováčikov. Vašou úlohou je vyskúšať jednu z troch populárnych rámcov pre vývoj webových aplikácií a pokúsiť sa splniť päť jednoduchých úloh. Po ich splnení vyplníte dotazník, kde pre nás poskytnete užitočné informácie. Úlohy riešte samostatne a čo najlepšie, ako viete.

Výber rámca pre vývoj webových aplikácií

Vyberte si jeden rámec pre vývoj webových aplikácií, v ktorom budete robiť zadané úlohy. Vyberte si taký rámec, s ktorým máte najmenej skúseností, aby sme vedeli čo najobjektívnejšie vyhodnotiť ich náročnosť.

Angular (verzia 16)
React (najnovšia verzia)
Vue (verzia 3)

Pre každý rámec je pripravený projekt s jednoduchou webovou aplikáciou. V týchto projektoch budete riešiť svoje úlohy.

Inštalácia

K práci s projektom potrebujete mať nainštalovaný Node.js aspoň verzie 16 a balíčkovací menežér NPM, ktorý sa inštaluje spolu s Node.js.

Po rozbalení projektu a nainštalovaní Node.js zadajte v termináli v umiestnení projektu príkaz npm install. To doinštaluje do projektu všetky potrebné knižnice. V projekte by sa po tejto operácii mal nachádzať priečinok node_modules.

Poznámka

V prípade problémov skúste odstrániť priečinok node_modules a súbor package-lock.json a príkaz npm install zadajte znova.

Spustenie projektu

Projekt spustíte pomocou príkazu npm start. To spustí lokálny server na porte podľa zvoleného rámca (sledujte výpis v termináli).

Kostra projektu

Projekt pre každý rámec má rovnakú alebo aspoň podobnú štruktúru súborov, v ktorých sa nachádzajú komponenty.

v priečinku src/app/ nájdete súbory s komponentmi, v ktorých budete pracovať na vašom zadaní.

App component:
    V tomto komponente sa renderuje header a potom podľa platformy/knižnice, ktorú ste si
    vybrali router-outlet( pre angular), router-view(pre vue) a Routes(pre React). Tie sú
    súčasťou úlohy 4.Routing a ich úlohou je renderovať komponenty, ktorým priradíte cesty.
    Momentálne renderuje komponent item-container, ktorý je zatiaľ nastavený ako defaultná stránka.

    header:
            - bottom-menu : Obsahuje spodnú časť headeru obsahujúcu klikateľný text.

            - top-menu: Obsahuje vrchnú časť headeru, s touto časťou pracovať nebudte.

    item-container:

            - search-bar: Obsahuje input field a button.

            - product-list:
                V tomto komponente sa nachádza zoznam produktov a logika pre renderovanie týchto
                produktov zo zoznamu.

                            -product-filter: Obsahuje dve rady tlačidiel.
                                            -Prvá rada: obsahuje tlačidla typu radio, aktívne
                                            môže byť len jedno.
                                            -Druhá rada: obsahuje tlačidlá typu button, s
                                            ktorými budete pracovať v prvej úlohe.

                            -product: Tento komponent je renderovaný komponentom product-list
                            a funguje ako šablóna do ktorej sú vkladané dáta z array v product-list.

    service: V service komponente sa nachádza zoznam produktov a funkcia ktorá vracia tento zoznam.


    *Angular obsahuje aj interface ktorý, určuje štruktúru produktu.

Úlohy

1. Úprava tlačidla pre filtrovanie

Komponent product-filter obsahuje dva rady tlačidiel.

Vy budete pracovať s druhým radom, ktorý sa skladá z <button class="trieda">Názov kategórie<button>. Tieto tlačidlá zatiaľ nemajú žiadnú funkciu a ani stav teda po kliknutí na ne sa nič nestane a ich vzhľad sa nezmení. V tejto úlohe ich musíte upraviť tak aby po kliknutí na tlačidlá zenil ich stav z neaktívneho na aktívne a naopak. To znamená, že tlačidlo premeníte na vypínač ktorý bude mať dve stavy aktívny/neaktívny a ichvzhľad bude tieto stavy odzrkadlovať teda ak bude tlačidlo aktívne jeho farba sa zmení. Aká farba to bude je na vás a jediné pravidlo je že musí byť viditeľne odlišná od tej ktorú má tlačidlo teraz.

Zhrnutie:

Upravte tlačidla tak aby sa mohli prepínať z aktívneho stavu na neaktívny a naopak
Zmeňte vzhľad aktívnych tlačidiel aby sa dali rozlíšiť od neaktívnych.

2. Filtrovanie zobrazeného obsahu

Vrámci tejto úlohy spojazdníte filtrovanie obsahu stránky. Každý produkt má id, meno, značku, typ, kategóriu, dostupné farby, cenu, *zľavnenú cenu ak existuje zľava, dostupnosť na sklade a link k obrázku ktorý bude renderovaný.

Príklad produktu v kóde

id: 24,
name: "Natura Sakura",
brand: "NATURA",
type: "home",
category: "women",
color: ["White", "Blue", "Black"],
price: 12,
is_in_inventory: false,
imageURL: "https://www.humanic.net/images/productimages/1802606998_1_plp_thumbnail.jpg"

Pracovať budete v komponente product-filter.

Prvý rad bude filtrovať podľa kategórie, ktorá delí na dámske, pánske a detské. Existuje však aj štvrté tlačidlo “all” ktoré zobrazí produkty pre všetky tri kategórie. Premenná “category” môže mať hodnoty “men”, “women” a “kids”.

Druhý rad bude filtrovať podľa typu, ktorý delí obuv na formálnu, domácu, bežnú, outdoorovú a športovú obuv. Premenná “type” môže mať hodnotu “formal”, “home”, “casual”, “outdoor” a “sport”.

V prvom rade môže byť aktívny iba jeden filter a v druhom ich môže byť aktívnych viac súčasne.

Zhrnutie:

Spojazdnite filter tak, aby sa obsah vykresľoval podľa aktívnych tlačidiel.
Prvý rad filtru môže mať len jednu kategóriu aktívnu.
Druhý rad može mať aktívnych viac kategórií súčasne.

3. Vyhľadávanie

V tejto úlohe implementujete funkcionalitu vyhľadávania. Vyhľadávanie (Search bar) sa skladá z poľa typu input a tlačidla hľadaj. Po zadaní textu do vyhľadávania a stlačení tlačidla hľadaj, upravte obsah stránky tak, že sa zobrazia len predmety, ktoré obsahujú zadaný text vo svojom názve.

Zhrnutie:

Search bar má input a button. Po zadaní textu a kliknutí na button sa bude filtrovať obsah zobrazených produktov.
Obsah sa bude filtrovať podľa toho či sa text nachádza v názve produktu alebo nie.

4. Smerovanie podstránok

Smerovanie (routing) je jeden zo základných funkcionalít webových aplikácií, pretože umožňuje používateľom navigovať sa po stránke pomocou ciest v URL. V projekte sa nachádza header, ktorý sa zobrazuje na stránke neustále, avšak pod ním sa obsah mení na základe URL adresy.

V tejto úlohe priradíte URL cesty k častiam stránky, ktoré je potrebné zobraziť. V projekte sa ako základná stránka zobrazuje komponent pre produkty, tj. item-container. Vy si vytvoríte ďalšie komponenty (na ich obsahu nezáleží) a priradíte im URL cesty. Nakoniec v komponente header => bottom-menu upravíte tagy < a > tak, aby po kliknutí došlo k správnemu presmerovaniu. Po vašej úprave sa ako základná stránka zobrazí vami vytvorený komponent a komponent pre produkty bude dostupný z odkazu pre Produkty.

Zhrnutie:

Vytvorte ďalšie pohľady pre Domov, O nás a Kontakty.
Nastavte pohľad Domov ako základnú stránku aplikácie a priradťe cesty ku komponentom item-container a ďalším stránkam, ktoré ste vytvorili.
V komponente bottom-menu prideľte odkazom cesty k ich odpovedajúcim podstránkam.

5. Dependency injection

Dependency injection je návrhový vzor, ktorý sa používa na uľahčenie modulizácie a znovupoužiteľnosti kódu. Jej hlavným cieľom je oddelenie závislosti medzi komponentami.

V projekte sa aktuálne zobrazujú produkty zo statického poľa v komponente product-list. Avšak v prípade, že by aplikácia mala produkty získavať z iného zdroja (napríklad cez API rozhranie), by sme potrebovali nejakú službu (service), ktorá sa nám bude starať o túto komunikáciu.

K dispozícii máte predpripravenú službu (service) pre poskytovanie produktov. Vašou úlohou je pomocou Dependency injection použiť funkciu z tejto služby (prípadne ju aj podľa potreby upraviť) v komponente product-list pre zobrazenie produktov.

Zhrnutie:

Pomocou dependency injection použite v komponente product-list funkciu z vhodnej služby a podľa potreby tú funkciu upravte.

Odovzdávanie a hodnotenie zadania

Dokončený projekt nahrajte na svoj git repozitár do priečinka s názvom vybraného rámca (angular, react alebo vue). Potom vyplňte dotazník, kde uvediete svoj email a odpoviete na otázky potrebné pre náš výskum.

Za každú úlohu môžete získať až 8 bodov nad rámec celkového hodnotenia zo zadaní. Podmienkou získania bodov je projekt vo vašom git repozitári s vyriešenou danou úlohou a vyplnený dotazník.