3. diel - Rozbehnutie projektu a prvé riadky v Expressu

V minulej lekcii, REST API, SOAP, GRAPH a JSON , sme si predstavili rôzne typy webových API. Lekcia bola veľa teoretická, dnes sa vrátime k praxi a začneme sa ponárať do tajov jednoduchého Restful API v Node.js.

V prvej lekcii sme vytvorili server pomocou vstavaného http modulu. Moduly sú silná zbraň samotného NOD. Pre začiatok si ale zjednodušíme prácu a pôjdeme na to priamočiarejšie - použijeme obľúbenú knižnicu Express.

Express

Express je populárny framework pre bežnú prácu v Node.js. Je rýchly, minimalistický a dobre pochopiteľný. Má veľmi prehľadne napísanou dokumentáciu (čo by som sa neodvážil tvrdiť o Nodu samotnom). Je to nástroj, o ktorý sa opiera mnoho ďalších knižníc pre Node.js, preto sa oplatí ho poznať. Je nedogmatický (unopinionated), čo znamená, že sa nesnaží ponúkať nejaké "najlepšie postupy" alebo odporúčané komponenty, ale necháva na vývojári, aby si našiel a použil také postupy a komponenty, ktoré mu vyhovujú.

Vďaka Expressu bude náš kód oveľa kratšia. Node je nízkoúrovňový, a ak by sme používali priamo http modul, mali by sme veľa práce s parsováním požiadaviek, routovaním pomocou regulárnych výrazov, nastavovaním hlavičiek a podobne. Express nám s týmto všetkým pomôže, pri zachovaní rýchlosti a nedogmatičnosti.

Založenie projektu

Pretože nám skôr alebo neskôr začne kód pribúdať, je čas začať ho nejako organizovať. Budeme, rovnako ako v prvej lekcii, pracovať z terminálu v rámci IDE alebo z príkazového riadku. Založte si nový adresár a vstúpte do neho. Budeme používať balíčkovací systém NPM (pozri opäť prvej lekcie). Pre jeho inicializáciu potrebujeme vytvoriť súbor package.json.

package.json obsahuje základné informácie o projekte, meno autora, popis, verziu, odkaz na git repozitár, zoznam závislostí alebo tiež skripty na spúšťanie projektu z príkazového riadku. Pre jeho vytvorenie zadajte do príkazového riadku:

npm init

A postupne odpovedzme na všetky otázky. (Môžete akceptovať ponúkané odpovede a len odpovedať klávesou Enter.) Po prebehnutí by sa mal v adresári projekte vytvoriť súbor package.json, kde sú vidieť dáta, ktoré ste zadali pri inicializácii.

Ak sa nechcete zdržiavať, môžete npm init spustiť s parametrom --yes, ktorý za vás odpovie na všetky otázky "yes".

Ak by sme vykonali aj vytvorenie zložky a presun do nej cez príkazový riadok, vyzerala by postupnosť príkazov nasledovne:

mkdir node-projekt
cd node-projekt
npm init --yes

Inštalácia Expressu

Pre inštaláciu Expressu opäť použijeme balíčkovací systém NPM. Spustite z príkazového riadku:

npm install express

A za chvíľu máte Express nainštalovaný. U starších verzií NPM sa musel pridávať parameter --save, aby sa balíček vôbec uložil do závislostí v súbore package.json, dnes sa už tento parameter pridávať nemusí a balíček sa pridá do package.json automaticky.

Pri inštalácii Expressu sa stali dve veci. Po prvé sa zmenil súbor package.json, kde sa objavila nová vlastnosť dependencies, ktorej hodnotou je objekt a prvou vlastnosťou tohto objektu je express. Ako hodnota vlastnosti express je uvedená jeho verzia. Pred verzií sa často objavujú neobvyklé znaky, ako šípka nahor (^) alebo tilda (~). Označujú, aké budúce verzie daného balíčku sú ešte vhodné pre náš projekt.

Konkrétne šípka hore, ktorá sa objavila u Expressu, znamená, že nám vyhovuje akákoľvek budúca verzia, v ktorej sa číslo hlavnej verzie (major, teda prvé číslo pred bodkou) nezmení, ale ďalšie čísla sa meniť môžu. "^4.16.4" teda znamená to isté ako "4.x" (alebo, logickejšie, "4.xx").

Nižšie vidíte ukážku súboru package.json:

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

Po druhé sa vytvoril adresár node_modules/, do ktorého sa Express nainštaloval. Keď sa pozriete do tohto adresára, zistíte, že sa nainštaloval nielen Express, ale aj veľa ďalších balíčkov. Je to preto, že na týchto balíčkoch je Express závislý a potrebuje ich k svojej činnosti. Každý z týchto balíčkov (vrátane Expressu) má vlastný súbor package.json, v ktorom sa môžete dočítať, kto je jeho autor, aká je jeho verzia, jeho opis, ale aj zoznam závislosťou na ďalších balíčkoch.

Prvý kód v Expressu

Prostredie máme pripravené, poďme si konečne napísať nejaký kód. V koreňovom adresári projekte si založme súbor index.js a doň vložme nasledujúce riadky:

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

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

app.listen(3000, () => console.log('Listening on port 3000...'));

Na začiatku je potreba Nodu oznámiť, že budeme používať Express. Na to používame funkciu require(). Jej zavolaním sa vráti ďalšie funkcie, tú uložíme do konštanty express. Tú tiež ihneď zavoláme a vzniknutý objekt typu express opäť uložíme do konštanty, ktorú podľa konvencie pomenujeme app.

Tento app objekt v sebe obsahuje veľa užitočných metód. Okrem iného sú to:

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

Asi ste si všimli, že tieto metódy zodpovedajú HTTP metódam pre Restful API. Dnes sa zameriame na metódu GET, nabudúce sa budeme venovať ďalším.

Metóde app.get() odovzdávame dva parametre. Prvou je cesta, druhý je funkcia spätného volania (callback). Tá preberá dva parametre, požiadavku a odpoveď na neho (request a response). A pomocou response.send() zobrazíme odpoveď.

Pre načúvanie na zvolenom porte opäť používame metódu objektu app, a to konkrétne app.listen(). Jej parametre sú samovysvetľujúce (číslo portu a funkcia spätného volania, ktorá bude zavolaná po tom, čo aplikácia začne načúvať na porte daného čísla).

Poznámka: Používame tu bežne syntax ES6. Vieme, v akom prostredí náš kód pobeží (je to náš server), takže sa nemusíme báť starobylých prehliadačov a môžeme si to dovoliť. Pre tých z vás, ktorí ES6 nepoznajú, tak sa pre rýchly výklad mrknite do poznámky na konci článku.

No a teraz už stačí našu aplikáciu spustiť z príkazového riadka:

node index.js

A v prehliadači do adresného riadku zadať http://localhost:3000/:

Vrátení statických dát

To je síce pekné, hovoríte si. Ale zatiaľ sme napísali to isté, čo v prvej lekcii, vlastne možno ešte menej, a minule sme ani nepotrebovali Express. Tak kedy konečne začneme robiť niečo navyše?

Odpoveď znie: Teraz

Zavoláme ešte raz metódu app.get(), tentoraz s inými parametrami:

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

(kód si len pridajte do index.js k pôvodnému kódu)

Teraz pri požiadavke s cestou /api vraciame trojprvkové pole (mohli sme vracať čokoľvek, pole je len pre ilustráciu). Reštartujte program (v príkazovom riadku alebo v termináli zvyčajne Ctrl + C na Windows, Cmd + C na Macu a znova spustite node index.js). Po zadaní localhost:3000/api do adresného riadku prehliadača sa zobrazí ono poľa. Pokiaľ z cesty vymastíme api, bude aplikácia vracať to, čo vracala pôvodne.

Reakcia API na parametre

A čo konečne skúsiť niečo zaujímavé? Mohli by sme vytvoriť aplikáciu, ktorá zoberie kus cesty z adresného riadku a napíše ju pospiatky. Pomôže nám k tomu nasledujúci kód:

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

Pomocou dvojbodky v syntaxi :jmeno-parametru definujeme parameter, ktorý potom môžeme nájsť v objekte req.params. Celé volanie teda bude req.params.jmeno-parametru.

Metódy reverse() a join() sú metódy zo základného JavaScriptu, dajú sa nájsť v dokumentácii. Ak by vás zarazili tie tri bodky, jedná sa o spread operátor, jednu z noviniek v ES6.

Po pridaní kódu aplikácii znovu reštartujte. Teraz môžeme do adresného riadku napísať treba localhost:3000/reverse/tento-text-prosim-napiste-pozpatku:

Nabudúce, v lekcii Kompletné Restful API v Node.js , si povieme, ako sa používajú v Expressu ostatné metódy Restful API. Tiež si ukážeme, čo by sa dalo urobiť pre to, aby sme nemuseli aplikácii neustále reštartovať.

Poznámka na záver: Použité prvky z ES6

Ak ES6 nepoznáte, tak v rýchlosti vysvetlím to, čo z neho používame:

• const (podobne ako let) je nové kľúčové slovo v ES6. Na rozdiel od var označuje premenné (let) a konštanty (const), ktorých rozsah pôsobnosti (scope) nie je obmedzený na obaľujúca funkciu, ale na obaľujúca blok. Blok je definovaný pomocou zložených zátvoriek {}.
• Spread operátor (tri bodky ...) dokáže rozdeliť pole na jednotlivé prvky. Tu je použitý k roztrhania reťazca na jednotlivé písmená (ktorá sa potom nasypú do poľa).
• Potom je tu ešte použitá arrow funkcie:

(req, res) => console.log("Hello World!");

Je to opäť syntaxe z ES6, približne ekvivalentná s nasledujúcim zápisom:

function(req, res) {
    console.log("Hello World!");
};

Arrow funkcie sa od bežnej funkcie líšia hlavne v tom, ako nastavuje kontext funkcie, s ktorým pracuje kľúčové slovo this. Pre podrobnejšie výklad by som už radšej odkázal na miestne kurz OOP v JavaScripte.