Python týden Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, REST API, SOAP, GRAPH a JSON, jsme si představili různé typy webových API. Lekce byla hodně teoretická, dnes se vrátíme k praxi a začneme se ponořovat do tajů jednoduchého RESTful API v Node.js.

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

Express

Express je populární framework pro běžnou práci v Node.js. Je rychlý, minimalistický a dobře pochopitelný. Má velmi přehledně napsanou dokumentaci (což bych se neodvážil tvrdit o Nodu samotném). 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 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.

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žte si nový adresář a vstupte do něj. Budeme používat balíčkovací systém npm (viz opět první lekce). Pro jeho inicializaci potřebujeme vytvořit soubor package.json.

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

npm init

A postupně odpovězme na všechny otázky. (Můžete akceptovat nabízené odpovědi a jen odpovídat klávesou Enter.) Po proběhnutí by se měl v adresáři projektu vytvořit soubor package.json, kde jsou vidět data, která jste zadali při inicializaci.

Pokud se nechcete zdržovat, můžete npm init spustit s parametrem --yes, který za vás odpoví na všechny otázky "yes".

Pokud bychom provedli i vytvoření složky a přesun do ní přes příkazovou řádku, vypadala by posloupnost příkazů následovně:

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

Instalace Expressu

Pro instalaci Expressu opět použijeme balíčkovací systém npm. Spusťte z příkazové řádky:

npm install express

A za chvíli máte Express nainstalovaný. U starších verzí npm se musel přidávat parametr --save, aby se balíček vůbec uložil do závislostí v souboru package.json, dnes se již tento parametr přidávat nemusí a balíček se přidá do package.json automaticky.

Při instalaci Expressu se staly dvě věci. Za prvé se změnil 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ě šipka nahoru, která se objevila u Expressu, znamená, že nám vyhovuje jakákoliv budoucí verze, v níž se číslo hlavní verze (major, tedy první číslo před tečkou) nezmění, ale další čísla se měnit mohou. "^4.16.4" tedy znamená to samé jako "4.x" (nebo, logičtěji, "4.x.x").

Níže vidíte ukázku souboru 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"
  }
}

Za druhé se vytvořil adresář node_modules/, do kterého se Express nainstaloval. Když se podíváte do tohoto adresáře, zjistíte, že se nainstaloval nejen Express, ale i spousta 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 se můžete dočíst, 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 si konečně napsat nějaký kód. V kořenovém adresáři projektu si založme soubor index.js a do něj vložme následující řádky:

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čátku je potřeba Nodu 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().

Asi jste si všimli, že tyto metody 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í bude cesta, druhá bude funkce zpětného volání (callback). Ta bude přebírat dva parametry, požadavek a odpověď na něj (request a response). A pomocí response.send() zobrazíme odpověď.

Pro naslouchání na zvoleném portu opět použijeme 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).

Poznámka: Používáme zde běžně syntaxi ES6. Víme, v jakém prostředí náš kód poběží (je to náš server), takže se nemusíme bát starobylých prohlížečů a můžeme si to dovolit. Pro ty z vás, kteří ES6 neznají, tak se pro rychlý výklad mrkněte do poznámky na konci článku.

No a teď 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

To je sice hezké, říkáte si. Ale 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?

Odpověď zní: Teď :)

Zavoláme ještě jednou metodu app.get(), tentokrát s jinými parametry:

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

(kód si jen přidejte do index.js k původnímu kódu)

Nyní při požadavku s cestou /api vracíme tříprvkové pole (mohli jsme vracet cokoliv, pole je jen pro ilustraci). Restartujte aplikaci (v příkazovém řádku nebo v terminálu obvykle Ctrl + C na Windows, Cmd + C na Macu a znovu spusťte 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? Mohli bychom vytvořit aplikaci, která vezme kus cesty z adresního řádku 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].reverse().join(''));
});

Pomocí dvojtečky v syntaxi :jmeno-parametru definujeme parametr, který pak můžeme najít v objektu req.params. Celé volání tedy bude req.params.jmeno-parametru.

Metody reverse() a join() jsou metody ze základního JavaScriptu, dají se najít v dokumentaci. Pokud by vás zarazily ty tři tečky, jedná se o spread operátor, jednu z novinek v ES6.

Po přidání kódu aplikaci znovu restartujte. Nyní můžeme do adresního řádku napsat třeba localhost:3000/reverse/tento-text-prosim-napiste-pozpatku.

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

Poznámka na závěr: Použité prvky z ES6

Pokud ES6 neznáte, tak v rychlosti vysvětlím to, co z něj používáme:

  • const (podobně jako let) je nové klíčové slovo v ES6. Na rozdíl od var označuje proměnné (let) a konstanty (const), jejichž rozsah působnosti (scope) není omezen na obalující funkci, ale na obalující blok. Blok je definovaný pomocí složených závorek {}.
  • Spread operátor (tři tečky ...) dokáže rozdělit pole na jednotlivé prvky. Zde je použit k roztrhání řetězce na jednotlivá písmena (která se pak nasypou do pole).
  • Pak je zde ještě použita arrow funkce:
(req, res) => console.log("Hello World!");

Je to opět syntaxe z ES6, přibližně ekvivalentní s následujícím zápisem:

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

Arrow funkce se od běžné funkce liší hlavně v tom, jak nastavuje kontext funkce, s nímž pracuje klíčové slovo this. Pro podrobnější výklad bych už raději odkázal na místní kurz OOP v JavaScriptu.


 

Stáhnout

Staženo 89x (889 B)

 

 

Aktivity (6)

 

 

Komentáře

Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:12. ledna 15:34

Zatiaľ len 3 lekcie, ale vyzerá to na super seriál o Node.js. Len tak ďalej ;-)

Odpovědět  +1 12. ledna 15:34
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Petr Novák
Člen
Avatar
Petr Novák:16. ledna 22:08

Já jsem osobně moc rád,že se na seriálu opět pracuje.Začal někdy v květnu,ale původní autor pak již nepokračoval.Tak jsem moc rád,že se našel nový autor. Těším se na další díly.
Nevič,jak pravidelně je budeš publikovat?
Díky moc a hodně zdaru.

 
Odpovědět  +1 16. ledna 22:08
Avatar
Odpovídá na Petr Novák
Petr Sedláček:17. ledna 0:08

V nejbližší době (možná už příští týden) vyjde další díl, možná i dva díly. Dále se uvidí.
Každopádně, pište a komentujte. Když uvidím, že jsou komentáře, tak poznám, že je zájem a budu psát o to rychleji :)

Editováno 17. ledna 0:09
 
Odpovědět  +1 17. ledna 0:08
Avatar
 
Odpovědět  +1 17. ledna 13:09
Avatar
Petr Novák
Člen
Avatar
Odpovídá na Petr Sedláček
Petr Novák:18. ledna 9:08

No i když nebudou komentáře,tak si nemyslím,že to odpovídá tomu,jestli je seriál chtěnej nebo ne.

 
Odpovědět 18. ledna 9:08
Avatar
Jokertwo
Člen
Avatar
Jokertwo:18. ledna 9:24

Ahoj, díky za první 3 lekce !!! Dále bych byl moc rád kdyby měl seriál pokračování.

 
Odpovědět 18. ledna 9:24
Avatar
Jiří Zeman
Člen
Avatar
Jiří Zeman:20. ledna 21:53

Ahoj. Super seriál. Škoda, že toho je zatím tak málo :/ . Určitě to brzy rozšíříš, je to fakt super :). Nechtěl by jsi napsat i něco kolemp grun / gulp tasků například převod sass/less do css, svg a tak? Určitě by to taky hodně lidí zajímalo :)

Odpovědět  +1 20. ledna 21:53
Chybami se člověk učí.
Avatar
Wolf
Člen
Avatar
Wolf:31. ledna 12:01

Dobrý den mám problem keď napíšem http://localhost:3000/ tak mi zobrazí toto:
Pre informáciu používam editor webstorm od JetBrains.

Odpovědět 31. ledna 12:01
"Whether you think you can, or you think you can't - you're right."(Henry Ford)
Avatar
Odpovídá na Jiří Zeman
Petr Sedláček:13. února 21:05

Ahoj, to bohužel zatím nemám v plánu :)

 
Odpovědět 13. února 21:05
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.