Lekce 1 - Real-time kniha návštěv - Příprava prostředí pro projekt

Zajímalo vás někdy, jak Facebook zobrazí bublinu s událostí přesně v moment, kdy nastane? Nebo přemýšleli jste, jak funguje zdejší real-time chat? V tomto seriálu se naučíme, jak obnovit stránku v prohlížeči uživatele a to pouze za použití JavaScriptu, jak na serveru (Node.js), tak i na klientovi (Vanilla JavaScript). Vytvoříme tak moderní službu, kterou vaše konkurence nemá Vše si předvedeme na praktické a jednoduché knize návštěv, která čtenářům zobrazuje nové příspěvky v reálném čase.

Vítejte tedy u prvního dílu seriálu na téma Node.js (Socket.io) – Kniha návštěv. V tomto pilotním díle si řekneme, jak to vlastně vše bude fungovat a také si nainstalujeme Node.js. Dále si vybereme vývojové prostředí, ve kterém budeme celou aplikaci vyvíjet. Do Node.js nainstalujeme knihovnu socket.io a připravíme si základní strukturu projektu. Pokud je vám Node.js novinkou, doporučuji nejdříve projít zdejší Node.js kurz.

Princip Aplikace

Než se do toho pustíme, ukažme si jak celý systém funguje:

1. JavaScript na klientovi data zvaliduje a odešle formulář přes Socket.io
2. Node.js server data uloží do databáze
3. Server odešle nová data všem připojeným klientům
4. Javascript u uživatelů vloží data do stránky a změny se ihned projeví všem čtenářům, kteří mají stránku otevřenou

Vzhledem k tomu, že v aplikaci musí být Socket.io, budeme používat protokol typu full-duplex (Socket.io), kde je možné odesílat nejen z klienta na server a čekat na odpověď, ale také ze serveru na klienty, i když se klienti vůbec na nic neptali. Ve výsledku máme aplikaci, která se vůbec neobnovuje a nové příspěvky se objevují okamžitě bez zbytečného průběžného dotazování. Můžeme hovořit o 100% webové aplikaci, někdy také zvané jako single-page application.

Výběr vývojového prostředí

Z počátku je potřeba si zvolit vývojové prostředí. Já doporučuji WebStorm, ale klidně nám postačí Sublime Text či Atom.io. V seriálu použiji WebStorm. Doporučuji jej hlavně z důvodu, že dokáže napovídat i Node.js syntaxi, ostatní by s tím sice neměly mít problém, ale nejspíše pouze za pomocí dalšího pluginu.

Instalace Node.js

Dále tedy potřebujeme Node.js. Ten stáhneme z adresy https://nodejs.org a taktéž nainstalujeme. Na instalaci není nic složitého. Klasickou instalaci programu by měl umět každý, zejména my

Příprava projektu

Je na čase nainstalovat si knihovnu Socket.io do Node.js. Spustíme si příkazový řádek (například stisknutím kláves Windows+R, což nám otevře okénko spustit, do kterého napíšeme cmd a stiskneme klávesu Enter). Po otevření příkazového řádku jej nejspíše budete mít hodně malý. To spravíme pravým kliknutím na ikonku nahoře v nadpisu příkazového řádku, zvolíme možnost vlastnosti, dále si aktivujeme možnost písmo a velikost nastavíme na 12x16 a nebo na takovou, která vám vyhovuje , změny potvrdíme tlačítkem OK.

Npm je Node.js package manager pro různé platformy jako je Node.js nebo přímo JavaScript. Package manager se nám stará o závislosti balíčků (rozšíření). Nyní si přes npm instalujeme potřebné moduly do Node.js, NPM je již součástí Node.js, takže jej nemusíme nijak instalovat.

Pomalu se dostáváme k tomu, co vlastně musíme napsat do příkazového řádku pro instalaci knihovny socket.io a dalších modulů. Jako první si musíme vytvořit adresář pro náš projekt, například RealtimeKnihaNavstev/, klidně v Dropboxu nebo někde tam, kde máte projekty. V něm si vytvoříme další dva adresáře a to Client/ a Server/.

Server

Přejděme do složky Server/ ve složce s projektem pomocí příkazu:

cd <cestaDoSložky>\Server

Socket.io nainstalujeme pomocí příkazu:

npm install socket.io --save

Tím jsme dokončili instalaci všech potřebných doplňků do Node.js serveru. Pro zajímavost, zdrojáky Socket.io (a všech dalších balíčků) najdeme ve složce node_modules/.

Klient

Do klienta nainstalujeme balíček live-server, který nám umožní auto-reload. Tedy vždy, když změníme kód aplikace, stránka se obnoví. Přejděme tedy do nadřazené složky přes příkazový řádek tímto příkazem:

cd ..

Nyní navigujme do složky Client/:

cd <cestaDoSložky>\Client

A nainstalujeme balíček live-server:

npm install live-server

První kód a zkouška live-serveru

Nyní vyzkoušíme nově nainstalovaný live-server. Ve složce Client/ vytvoříme soubor index.html s následujícím obsahem:

<!DOCTYPE html>
<html>
<head>
    <title>Hello world!</title>
</head>
<body>
    Hello world!
</body>
</html>

Nyní ve složce s klientem spustíme příkaz:

live-server --port=8080

Pokud se server nespustí (příkaz live-server příkaz neexistuje nebo nebyl rozpoznán), zkuste nainstalovat live-server globálně příkazem npm install -g live-server.

Po spuštění příkazu by se nám měl zapnout prohlížeč s URL 127.0.0.1:8080 (nebo localhost:8080). Stránka bude vypadat takto:

Pokud změníme text Hello world! na Hi world! v souboru index.html a uložíme ho, automaticky se nám stránka obnoví a text na stránce se změní.

Pro malý úvod a test funkčnosti balíčku by to dnes stačilo.

V další lekci, Real-time kniha návštěv - Databáze a CRUD, si vytvoříme server a databázi. Procvičíme si zápis do databáze MongoDB a naučíme se upravovat a odstraňovat data v databázi.