Lekce 3 - Rozběhnutí projektu a první řádky v Expressu

V minulé lekci, REST API, SOAP, GraphQL a JSON, jsme si představili různé typy webových API a formát JSON.

V dnešním Node.js tutoriálu začneme pracovat na jednoduchém API. Založíme si nový projekt, nainstalujeme framework Express a ukážeme si několik základních operací s RESTful API.

V první lekci jsme vytvořili server pomocí vestavěného http modulu. Moduly jsou silná zbraň samotného Nodu. Teď si ale zjednodušíme práci a půjdeme na to přímočařeji - použijeme oblíbenou knihovnu Express. Nejprve však založíme projekt.

Založení projektu

Protože nám dříve nebo později začne kód přibývat, je čas začít ho nějak organizovat. Budeme stejně jako v první lekci pracovat z terminálu v rámci IDE nebo z příkazové řádky. Založíme si nový adresář node-api/ a otevřeme v něm nové okno příkazové řádky z průzkumníku Windows pomocí klávesy Shift a pravého tlačítka myši, jako jsme si to již ukazovali. Budeme používat balíčkovací systém npm, o kterém jsme se dozvěděli už v lekci Úvod do Node.js. Pro jeho inicializaci potřebujeme vytvořit soubor package.json.

Soubor package.json obsahuje základní informace o projektu, jméno autora, popis, verzi, odkaz na git repozitář, seznam závislostí a také skripty na spouštění projektu z příkazové řádky. Pro jeho vytvoření zadáme do příkazové řádky:

npm init

A postupně odpovíme na všechny otázky.

Klávesou Enter můžeme akceptovat nabízené odpovědi.

Po dokončení příkazu se v adresáři projektu vytvoří soubor package.json, který obsahuje hodnoty zadané při inicilaizaci.

Příkaz npm init můžeme rovněž spustit s parametrem --yes, který za nás odpoví kladně na všechny otázky.

Framework Express

Framework Express je jedním z populárních frameworků pro běžnou práci v Node.js. Je rychlý, minimalistický a dobře pochopitelný. Má velmi přehledně napsanou dokumentaci. Je to nástroj, o který se opírá mnoho dalších knihoven pro Node.js, proto se vyplatí ho znát. Je nedogmatický (unopinionated), což znamená, že se nesnaží nabízet nějaké "nejlepší postupy" nebo doporučené komponenty, ale nechává na vývojáři, aby si našel a použil takové postupy a komponenty, které mu vyhovují.

Díky Expressu bude náš kód mnohem kratší. Node.js je nízkoúrovňový, a pokud bychom používali přímo http modul, měli bychom mnoho práce s parsováním požadavků, routováním pomocí regulárních výrazů, nastavováním hlaviček a podobně. Express nám s tímhle vším pomůže, při zachování rychlosti a nedogmatičnosti.

Instalace frameworku Express

Pro instalaci frameworku Express opět použijeme balíčkovací systém npm. Z příkazové řádky spustíme:

npm install express@~4.18.1

Pozor, musíme dodržet přesné verze komponent! Pokročilé projekty jako tento jsou složené z komponent. Použít nejnovější verzi nějaké komponenty, co zrovna včera vyšla, opravdu není dobrý nápad. Projekt pak 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.

Při instalaci Expressu se staly dvě věci. Změnil se soubor package.json, kde se objevila nová vlastnost dependencies, jejíž hodnotou je objekt a první vlastností tohoto objektu je express. Jako hodnota vlastnosti express je uvedena jeho verze. Před verzí se často objevují neobvyklé znaky, jako šipka nahoru (^) nebo tilda (~). Označují, jaké budoucí verze daného balíčku jsou ještě vhodné pro náš projekt.

Konkrétně tilda, která se objevila u Expressu, znamená, že nám vyhovuje jakákoliv budoucí verze, která zhruba odpovídá této. Tedy v níž se může změnit jen číslo patche (tedy poslední číslo), ale další čísla se měnit nemohou. "~4.18.1" tedy znamená to samé jako "4.18.x".

Aktuálně soubor package.json vypadá takto:

{
  "name": "node-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "~4.18.1"
  }
}

Dále se vytvořil adresář node_modules/, do kterého se Express nainstaloval včetně spousty dalších balíčků. Je to proto, že na těchto balíčcích je Express závislý a potřebuje je ke své činnosti. Každý z těchto balíčků (včetně Expressu) má vlastní soubor package.json, ve kterém je uvedené, kdo je jeho autor, jaká je jeho verze, jeho popis, ale i seznam závislostí na dalších balíčcích.

První kód v Expressu

Prostředí máme připravené, pojďme tedy napsat první řádky kódu. V kořenovém adresáři projektu si vytvoříme nový soubor index.js a do něj vložme následující řádky:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello World!');
});

app.listen(port, () => console.log("Listening on port " + port + "..."));

Na začátku je potřeba Node.js sdělit, že budeme používat Express. Na to používáme funkci require(). Jejím zavoláním se vrátí další funkce, tu uložíme do konstanty express. Tu také ihned zavoláme a vzniklý objekt typu express opět uložíme do konstanty, kterou podle konvence pojmenujeme app.

Tento app objekt v sobě obsahuje spoustu užitečných metod. Mimo jiné jsou to:

• app.get(),
• app.post(),
• app.put() a
• app.delete().

Tyto metody evidentně odpovídají HTTP metodám pro RESTful API. Dnes se zaměříme na metodu GET, příště se budeme věnovat dalším.

Metodě app.get() předáváme dva parametry. První je cesta, druhý je funkce zpětného volání (callback). Ta přebírá dva parametry, požadavek a odpověď na něj (request a response, v kódu pojmenované req a res). A pomocí res.send() zobrazíme odpověď.

Pro naslouchání na zvoleném portu opět používáme metodu objektu app, a to konkrétně app.listen(). Její parametry jsou samovysvětlující - číslo portu a funkce zpětného volání, která bude zavolána po tom, co aplikace začne naslouchat na portu daného čísla.

Nyní již stačí naši aplikaci spustit z příkazového řádku:

node index.js

A v prohlížeči do adresního řádku zadat http://localhost:3000:

Vracení statických dat

Zatím jsme napsali to samé, co v první lekci, vlastně možná ještě méně, a minule jsme ani nepotřebovali Express. Tak kdy konečně začneme dělat něco navíc? Teď 🙂

Zavoláme ještě jednou metodu app.get(), tentokrát s jinými parametry. Do souboru index.js za konec prvního volání app.get() přidáme kód:

app.get('/api', (req, res) => {
    res.send([10, 20, 30]);
});

Nyní při požadavku s cestou /api vrátíme tříprvkové pole. Mohli jsme vracet cokoliv, pole je jen pro ilustraci.

Abychom mohli nové změny otestovat, musíme aplikaci nejprve restartovat. V příkazovém řádku stiskneme klávesovou zkratku Ctrl + C a poté spustíme příkaz:

node index.js

Po zadání localhost:3000/api do adresního řádku prohlížeče se zobrazí ono pole:

Pokud z cesty vymažeme api, bude aplikace vracet to, co vracela původně.

Reakce API na parametry

A co konečně zkusit něco zajímavého? Vytvořme aplikaci, která vezme část cesty z adresního řádku (například tento-text-prosim-napiste-pozpatku) a napíše ji pozpátku. Pomůže nám k tomu následující kód:

app.get('/reverse/:text', (req, res) => {
    res.send([...req.params.text]);
});

Pomocí dvojtečky v syntaxi :text definujeme parametr, který pak bude v objektu req.params. Celé volání tedy bude req.params.text. Tři tečky jsou spread operátor. Tato část kódu nám vrátí pole znaků:

["t","e","n","t","o","-","t","e","x","t","-","p","r","o","s","i","m","-","n","a","p","i","s","t","e","-","p","o","z","p","a","t","k","u"]

Nad tímto polem následně zavoláme metody reverse() a join(), které známe ze základního JavaScriptu:

app.get('/reverse/:text', (req, res) => {
    res.send([...req.params.text].reverse().join(''));
});

Po přidání kódu aplikaci znovu restartujeme. Nyní do adresního řádku vložme napříkald localhost:3000/reverse/tento-text-prosim-napiste-pozpatku. Výsledek je zde:

To by pro tuto lekci bylo vše.

Příště, v lekci Kompletní RESTful API v Node.js, si povíme, jak se používají v Expressu metody POST, PUT a DELETE v RESTful API. Také si ukážeme, co by se dalo udělat pro to, abychom nemuseli aplikaci neustále restartovat.

 

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š.