7

Opakování: Café Lóra

Všechno, co jsme se doposud naučili si procvičíme na projektu takzvaně „ze života“.

Tato lekce v našem kurzu uzavírá téma čistého nebo-li „vanilla“ JavaScriptu. Do této chvíle vše směřovalo k tomu, abyste pochopili základní principy, na kterých je JavaScript postaven. Tyto znalosti můžete využít k vytvoření funkční webové stránky či aplikace. V dalších lekcích se přesuneme k framworku Rect, ve kterém se mnoho věcí bude dělat jinak, než jsme byli doteď zvyklí. Pojďme si proto na závěr vytvořit stránku ještě v čistém JavaScriptu jako jedno velké opakovací cvičení.

Zadání

Vaším úkolem bude vytvořit webovou stránku fiktivní kavárny s názvem Café Lóra. Jde o takzvanou Single Page Application (SPA), neboli aplikaci, která sestává pouze z jedné stránky. Café Lóra poskytuje zajímavou službu, kdy si přímo na stránce můžete objednat kávu, kterou vám poté přinesou ke stolu.

Design, CSS styly a všechny obrázky potřebné po tvorbu stránky máte již připraveny. Vaším úkolem je doplnit JavaScriptovou část. Cílem je vyzkoušet si práci na větším uceleném projektu. Nejprve budeme upravovat CSS a HTML, poté hlavní index.js a nakonec si vytvoříme komponenty, do kterých náš kód umístíme.

Projekt Café Lóra

1

Založení projektu

to dáš

Nejprve pro naši aplikace založíme projekt.

  1. Udělejte si vlastní fork repozitáře github.com/Czechitas-podklady-WEB/Cafe-Lora.
  2. V terminálu se přesuňte do složky, ve které běžně skladujete své projekty a naklonujte si váš repozitář. Ve VS Code otevřete naklonovanou složku Cafe-Lora.
  3. Ve složce byste měli vidět mimo jiné soubor package.json. Nainstalujte podle něj všechny potřebné závislosti.
    npm install
    
  4. Pomocí npm run start, spusťte vývojový server. Prohlédněte si design stránky a vyzkoušejte si její responzivitu. Všimněte si, že například ikonka navigace zatím moc nefunguje.
2

Seznámení s projektem a úprava menu

to dáš

Seznamte se se zdrojovým kódem, který je pro vás v projektu připraven. Postupujte dle následujících kroků.

  1. Prohlédněte si HTML a CSS projektu.
  2. Podívejte se do složky assets. Toto je speciální složka, kterou Webpack beze změny zkopíruje do výsledné dist složky. Složka assets obsahuje obrázky. Ty nejsou nalinkovány uvnitř CSS a nejsou tedy součástí designu, ale budou tvořit obsah stránky a my pomocí nich vytvoříme naše interaktivní café menu.
  3. Všimněte si, že ikonka pro zobrazení navigace se zobrazuje i v případě, že jsme na širokém monitoru. Upravte CSS v souboru style.css tak, aby se ikonka na široké obrazovce nezobrazovala. Breakpoint zjistíte při prohlížení různých šířek stránky v devtools. Po úpravě CSS proveďte commit vašich změn s nějakou dobře popisnou zprávou.
  4. Položky navigace v hlavičce stránky nefungují. Doplňte tedy v index.html atributy id pro jednotlivé sekce a pozměňte odkazy v nabídce tak, abychom se vždy po kliknutí na odkaz přesunuli na správnou část stránky. Commitněte vaše změny se smysluplnou commit zprávou.
  5. Sekce s názvem galerie je momentálně jen jeden velký obrázek. My budeme chtít, aby přes obrázek byl text popisující kavárnu. Doplňte do sekce odstaveček textu popisující interiér kavárny a nastylujte ho tak, aby byl přes obrázek čitelný (přidejte například zašednutí nebo rozmazání pod text).
  6. Opět proveďte commit vašich změn s odpovídající commit zprávou. Pushněte do repozitáře na GitHubu.
3

Zprovoznění navigace

zapni hlavu

Chceme zařídit, aby se na úzkých displejích po kliknutí na hamburger ikonku zobrazovala navigace. Zatím se to neděje a tím přichází ke slovu JavaScript.

  1. V JavaScriptu vyberte ze stránky ikonku #nav-btn. Připojte k ní posluchač události click. Tento posluchač prvku nav odebere nebo přidá třídu nav-closed. Klikáním na ikonku tak můžeme zobrazovat nebo skrývat navigaci.
  2. Navigaci budeme chtít schovat i po přesunutí na nějakou sekci. Připojte tedy posluchač události také na všechny položky navigace. Zařiďte, aby se navigace při kliknutí na libovolnou její položku schovala. Zde se vám jistě bude hodit metoda querySelectorAll.
  3. Jakmile je váš kód funkční, proveďte commmit s hezky popisnou zprávou a pushněte do vzdáleného repozitáře.
4

Objednávání

to dáš

Zařiďte, aby fungovalo objednání nápoje. Momentálně máme na stránce jeden nápoj, capuccino, později jich však bude mnohem více.

  1. Na tlačíko se třídou order-btn pověste posluchač, při kliknutí změní nápis na tlačítku na Zrušit. Zároveň přidá na prvek se třídou drink__cup třídu drink__cup--selected.
  2. Při opětovném kliknutí na tlačítko chceme zařídit, aby se objednávka zrušila a změny na prvku .drink__cup i na tlačítku .order-btn se vrátily (odebrala se třída drink__cup--selected a vrátil se text tlačítka na Objednat). Tohoto můžete docílit například tak, že si vytvoříte globální proměnnou ordered, která bude obsahovat true nebo false podle toho, zde je nápoj objednaný či nikoliv.
  3. Ve chvíli, kdy máte objednávání funkční commitněte váš kód se smysluplnou zprávnou a pushněte jej.
5

Ingredience jako komponenty

zapni hlavu

Každý nápoj bude obsahovat seznam ingrediencí. Na stránce vidíme příklad pro cappuccino. Budeme přepisovat kód tak, aby ingredience (vrstva) byla komponenta.

  1. V hlavním souboru index.js vytvořte komponentu Layer, která očekává props v následujícím tvaru.
    {
      color: '#feeeca',
      label: 'mléčná pěna',
    }
    
    Podívejte se do index.html na strukturu jednotlivých layers. Komponenta nechť vrací řetězec obsahující výsledné HTML pro jednu vrstvu. V index.html si jednotlivé ingredience pro capuccino (divy .layer) zakomentujte nebo smažte.
  2. Použijte vaši komponentu a pomocí vlastnosti innerHTML zapojte do stránky tři dané ingredience pro cappuccino. Stránka by měla pro uživatele vypadat stejně jako na začátku.
  3. Skvělá práce! Teď si komponentu Layer přesuneme do samostatné složky. Ve vašem projektu vytvořte pro vaši komponentu separátní složku s názvem Layer. V této složce bude index.js a style.css V souboru index.js bude JavaScriptový kód vaší komponenty. Kompnentu správně exportujte a správně ji importujte v hlavním index.js celého projektu. Vyzkoušejte, že váš projekt funguje.
  4. Z hlavního souboru style.css přesuňte do CSS styly, které se týkají komponenty Layer do našeho nového style.css ve složce Layer. Nezapomeňte váš CSS soubor správně importovat do index.js aby jej Webpack zahrnul do výsledného sestavení.
  5. Jakmile váš projekt funguje, commitněte váš kód s výborně napsanou commit zprávou a pushněte do vzdáleného repozitáře.
6

Seznam ingrediencí

to dáš

V tomto cvičení budeme chtít zařídit, abychom seznam ingrediencí dokázali zobrazit podle dat uložených v poli.

  1. Uvnitř hlavního index.js si vytvořte následujicí globální proměnnou.

    const layers = [
      {
        color: '#feeeca',
        label: 'mléčná pěna',
      },
      {
        color: '#fed7b0',
        label: 'teplé mléko',
      },
      {
        color: '#613916',
        label: 'espresso',
      },
    ];
    
  2. V současné chvíli používáme komponentu Layer tak, že třikrát opakujeme skoro stejný kód. Zobrazte nyní jednotlivé ingredience pomocí komponenty Layer tak, že použijte cyklus for nebo forEach a jako props použijete položky pole layers.

  3. Jakmile je váš kód funkční, udělejte commit s profesionálně napsanou zprávou a pushněte váš kód do vzdáleného repozitáře.

7

Nápoj jako komponenta

zapni hlavu

Abychom nakonec mohli zobrazit celou nabídku nápojů, budeme potřebovat, aby každý nápoj byl jedna komponenta. Podívejte se do index.html nebo do devtools na strukturu jednoho nápoje. Tento obsah si v index.html zakomentujte. Zakomentujte si také přidávání ingrediencí capuccina pomocí komponenty Layer v hlavním index.js.

  1. Jak už jsme zvyklí, vytvořte pro komponentu složku Drink s index.js a style.css. Do style.css přesuňte styly související s komponentou. Pozor na to, že tentokrát ke stylu komponenty patří také obrázek cup-selected.png. Abychom měli vše hezky pohromadě, vytvořte ve složce komponenty složku img, do které tento obrázek přesuňte. (Dané styly musíte smazat nebo zakomentovat v hlavním style.css, protože tam bude obrázek cup-selected.png teď chybět).

  2. V index.js vytvořte komponentu Drink, která očekává props v následujícím tvaru.

    {
      id: 'romano',
      name: 'Romano',
      ordered: false,
      layers: [
        {
          color: '#fbdf5b',
          label: 'citrón',
        },
        {
          color: '#613916',
          label: 'espresso',
        },
      ],
    };
    

    Komponentu napište tak, aby vracela DOM element. DOM element je potřeba vrátit pouze ten obalový. Vnitřek komponenty stačí jako innerHTML obalového prvku.

  3. Uvnitř vaší komponenty bude potřeba použít komponentu Layer. Dejte si pozor, abyse ji správně importovali.

  4. Komponentu Layer v naší komponentě Drink použijte pomocí innerHTML, stejně jako jsme to dělali v hlavním index.js.

  5. Název obrázku, který se má zobrazit, můžete vzít z vlastnosti id. Je tak pouze potřeba sestavit správnou cestu pro atribut src.

  6. Tlačítko zatím pouze staticky zobrazte, fuknčnost mu přidáme v dalším kroku.

  7. Zobrazte na stránce nápoj dle dat uvedených výše. V hlavním index.js na správný prvek použijte funkci appendChild, neboť naše komponenta vrací DOM element. Měli byste vidět teď jeden nápoj, ‘Romano’.

  8. V této fázi si commitněte kód se užitečně napsanou commit zprávou a pushněte do vzdáleného repozitáře.

8

Dynamická komponenta nápoje

zapni hlavu
  1. Zprovozněte tlačítko pro objednávání tak, aby veškerý kód byl součástí komponenty Drink. V tomto případě se budeme muset zbavit globální proměnné ordered. Ke stejnému účelu však můžeme využít vlastnost ordered, která je obsažena v každém objektu nápoje. Tak zaručíme, že každý nápoj bude mít svoji vlastní informaci o tom, zde je objednaný či nikoliv.
  2. Vyzkoušejte si na stránce, že objednávání funguje.
  3. Jakmile váš kód správně funguje, commitněte jej se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře.
9

Seznam nápojů

to dáš

V tomto cvičení budeme chtít na stránce zobrazit vícero nápojů.

  1. Uvnitř hlavního index.js si vytvořte následujicí globální proměnnou.

    const drinks = [
      {
        id: 'cappuccino',
        name: 'Cappuccino',
        ordered: false,
        layers: [
          {
            color: '#feeeca',
            label: 'mléčná pěna',
          },
          {
            color: '#fed7b0',
            label: 'teplé mléko',
          },
          {
            color: '#613916',
            label: 'espresso',
          },
        ],
      },
      {
        id: 'romano',
        name: 'Romano',
        ordered: false,
        layers: [
          {
            color: '#fbdf5b',
            label: 'citrón',
          },
          {
            color: '#613916',
            label: 'espresso',
          },
        ],
      },
    ];
    
  2. Použijte cyklus for nebo forEach, projděte seznam nápojů a pomocí komponenty Drink zobrazte každý nápoj na stránce. Vyzkoušejte, že si každý nápoj můžete objednat nebo u něj zrušit objednávku.

  3. Jakmile stránka funguje, proveďte commit se vstřícně napsanou zprávou a pushněte váš kód do vzdáleného repozitáře.

10

Backend

to dáš

V tomto cvičení budeme chtít napojit naši stránku na backend, ze kterého si stáhneme seznam všech nabízených nápojů.

  1. Seznam všech nápojů si můžete stáhnout z API pro Café Lóra na adrese
    https://apps.kodim.cz/daweb/cafelora/api/drinks
    
  2. Prohlédněte si data, která tento endpoint vrací.
  3. Pomocí funkce fetch data stáhněte a zobrazte je na vaší stránce stejným způsobem, jako jste je zobrazovali doposud.
  4. Ve chvílí, kdy stránka funguje, commitněte váš kód s hezky napsanou zprávou a pushněte do vzdáleného repozitáře.