Lekce 4 - Databázový klient v Angular - Příprava projektu

V minulé lekci, Dokončení kalkulačky v Angular frameworku, jsme se podívali na implementaci komponentů pro kalkulačku

Dnes začneme pracovat na aplikaci pro databázi filmů a osobností, představujících režiséry nebo herce. Komunikace s databází bude realizována prostřednictvím předem připraveného RESTful API v Node.js. Klient bude umožňovat pohodlnou správu jednotlivých záznamů (filmů i osobností) v databázi a jejich výpis v seznamu bude možné filtrovat podle různých dostupných parametrů.

Kód aplikace bude maximálně stavět na využití funkcionality TypeScript a samotné knihovny Angular, aby byl kurz maximálně univerzální. Pokud budete chtít později přidat jakékoli další knihovny, není to problém.

Je potřeba mít nainstalované Node.js a pro účely testování i MongoDB databázi.

Vytvoření projektu

Náš projekt bude rozdělen do dvou hlavních částí:

• klientská Angular aplikace, kterou si postupně naprogramujeme v rámci tohoto tutoriálu
• serverová část v Node.js pro spojení s MongoDB databází, která je dostupná ke stažení na konci článku

Použitou architekturu s rozdělením jednotlivých částí projektu a jejich vzájemnou komunikaci znázorňuje následující diagram:

Začneme tedy vytvořením prázdného kořenového adresáře projektu, např. movie-database/, který bude obsahovat podadresáře client/ a server/. Tyto složky zatím nevytvářejte. Samozřejmě není nutné mít obě části takto pohromadě, ale usnadníme si tím práci.

Šablona Angular klienta

Ke stažení Angular šablony pro klientskou aplikaci můžeme použít následující příkaz, spuštěný z kořenového adresáře projektu:

ng n client

Kde client/ je cílový adresář (vytvoří se automaticky) pro uložení šablony.

Dále se nás konzole zeptá, jestli chceme používat tzv. routing. Zaškrtněme y jako ano. Ve větších projektech (jako tohoto typu) dává smysl používat nějaké směrování různých URL adres. Směrování si ještě podrobně vysvětlíme v následujících lekcích. Konzole se nás dotáže ještě na jednu otázku a to jaký chceme používat jazyk pro styly. Já zde, z důvodů zachování projektu co nejvíce pochopitelným, použiji klasické css. Zájemci samozřejmě mohou použít scss nebo less.

Počkáme na dokončení operace a pak přejdeme do adresáře aplikace. Nyní je vhodné otestovat spuštění aplikace příkazem ng serve z podadresáře client/. Aplikace by měla do prohlížeče vypsat toto:

Kód Node.js serveru

Pokud jsme úspěšně zprovoznili Angular klienta, můžeme se přesunout zpět do kořene projektu. Zde vytvoříme složku server/ a vložíme do ní zdrojový soubor serveru index.js, který si stáhneme z odkazu na konci článku. K jeho zprovoznění musíme dále stáhnout knihovny mongoose, joi a express, použité v serverovém kódu. Přesuneme se proto do složky server/ a spustíme příkaz:

npm init -y && npm i mongoose joi express

Pomocí npm init jsme před stažením závislostí zároveň vytvořili soubor package.json. Po stahování můžeme server otestovat. To můžeme udělat příkazem npm start, pokud předtím do pole "scripts" v nově vytvořeném souboru package.json přidáme položku "start": "node index.js". Celý obsah souboru server/package.json by měl vypadat takto:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "joi": "^17.6.3",
    "mongoose": "^6.6.5"
  }
}

Alternativně můžeme skript spustit "ručně" příkazem node index.js z adresáře server/.

Pozor, dodržuj přesné verze komponent! Pokročilé projekty jako tento jsou složené z komponent. Možná by tě napadlo použít nejnovější verzi nějaké komponenty, co zrovna včera vyšla. Projekt ti pak ale bez odborné úpravy pravděpodobně nebude fungovat! U verzí komponent neplatí jako např. u aktualizace Windows, že chceme každý den používat tu nejnovější. Neustálé aktualizace všeho by totiž vyžadovaly každodenní a komplexní změny kódu projektu a reálně se tak neprovádějí. Ze stejného důvodu i my aktualizujeme kurzy v pravidelných intervalech a nové verze k sobě pak sladíme tak, aby vše fungovalo.

Konfigurace paralelního spuštění

Během vývoje často budeme chtít naši aplikaci spustit, abychom otestovali její funkcionalitu. U aplikace typu databázového klienta to ovšem zpravidla nemá smysl, pokud není zároveň spuštěn i kód serveru, se kterým komunikuje.

Nebylo by příjemné, kdybychom pokaždé museli obě aplikace spouštět zvlášť. V tomto případě je vhodné použít např. Node.js knihovnu concurrently, která umožňuje paralelní spouštění skriptů definovaných v souboru package.json pomocí nástroje npm.

Přesuneme se tedy do kořenového adresáře projektu (na úroveň složek client/ a server/), kde si vytvoříme třetí soubor package.json (společný pro obě části projektu) a nainstalujeme zmíněnou knihovnu:

npm init -y && npm i concurrently

Následně otevřeme nový soubor package.json a do pole "scripts" přidáme následující položku, kterou definujeme paralelní spuštění skriptů po použití příkazu:

"start": "concurrently \"cd server && node index.js\" \"cd client && ng serve\""

Celý kód souboru package.json v kořeni projektu by měl vypadat takto:

{
  "name": "databaze",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"cd server && node index.js\" \"cd client && ng serve\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^7.4.0"
  }
}

Nyní, kdykoliv budeme chtít otestovat komunikaci našeho klienta a serveru, stačí zavolat příkaz npm start v kořenovém adresáři projektu, který automaticky spustí obě komunikující strany současně.

To je pro tuto lekci prozatím vše.

Příště, v lekci Databázový klient v Angular - Zprovoznění routování, si vytvoříme první Angular komponentu a ukážeme si základy routingu.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.