Vytvořte obrázkovou hlasovací hru pomocí Node.js (část 1)

Node.js je stále populárnější. Tento JavaScript server je dokonalým nástrojem pro aplikace v reálném čase, jako jsou chaty, hry pro více hráčů a nástroje pro spolupráci. Můžete jej však použít i k vytváření běžných webových aplikací. Vše, co musíte udělat, je vybrat správné rámce. To je to, co budeme dnes dělat. Nakódujeme obrázkovou hlasovací hru typu „Hot or Not“, která bude ukládat svá data do databáze typu NoSQL.

Tutoriál bude rozdělen do dvou částí. První, kterou si můžete přečíst níže, pokrývá nastavení, adresářovou strukturu a databázi. V příštím díle se budeme věnovat trasování a pohledům. Přečtěte si část 2.

Nápad

Naše aplikace node.js bude postavena na platformě Express, bude používat engine řídítek pro šablony a nedb pro ukládání dat. Aplikace umožní návštěvníkům hlasovat o fotografiích, jeden obrázek po druhém. K dispozici bude také žebříček s fotografiemi seřazenými podle hlasů. Bude povolen pouze jeden hlas pro obrázek na IP adresu.

V této aplikaci nebude žádný JavaScript na straně klienta – vše bude spuštěno na serveru. Například stisknutím tlačítka "Roztomilé" odešlete formulář jako za starých časů. Rozhodl jsem se jít touto cestou, abyste mohli soustředit svou pozornost výhradně na kód na straně serveru a nechtěl jsem věci komplikovat knihovnami na straně klienta, jako je Angular nebo Ember.

Instalace Node.js

Abyste mohli postupovat podle tohoto návodu, musíte mít v počítači nainstalovaný node.js. To je jednoduché – jednoduše si vezměte správný balíček pro váš operační systém ze stránky pro stahování uzlu. Pokud používáte Linux nebo OSX, budete muset archiv někde rozbalit, například v $HOME/node (kde $HOME je váš domovský adresář) a přidejte $HOME/node/bin k vaší cestě úpravou souboru .bashrc. Pokud používáte Windows, použijte dodaný instalační program na stránce stahování.

Pokud vše funguje správně, spusťte node příkaz v okně konzoly vám poskytne příkazový řádek node.js.

Spuštění ukázky

Pokud si přejete aplikaci spustit v tomto okamžiku, musíte si stáhnout zdrojový kód jako zip z tlačítka v horní části článku a extrahovat jej někde v počítači. Poté musíte přejít do složky, kde je umístěn soubor index.js, a spustit npm install příkaz. Tím se stáhnou všechny požadované knihovny z registru npm. Pak vše, co musíte udělat, je spustit node index.js a ve svém počítači budete mít svou vlastní obrázkovou hlasovací hru!

Protože aplikace umožňuje pouze jeden hlas pro každou fotografii z IP, poté, co jste hlasovali pro všechny fotografie, můžete smazat soubor /data/users, abyste mohli znovu hlasovat.

Adresářová struktura

Nejprve si vysvětlíme, jak bude náš projekt organizován. Bude se skládat z několika složek a souborů, které budete muset vytvořit ručně.

• data/ složka obsahuje databázové soubory nedb. Jsou to soubory ve formátu prostého textu obsahující dokumenty JSON – můžete je dokonce otevřít v textovém editoru a upravit je.
• The node_modules/ složka je automaticky vytvořena programem npm, když spustíte příkaz npm install. Zde se ukládají stažené knihovny.
• veřejnost/ složka obsahuje JavaScript, CSS, obrázky a další položky, které by měly být přístupné prohlížeči. Umístěte tam pouze věci, které chcete, aby lidé viděli.
• zobrazení/ složka obsahuje šablony, které aplikace používá. Probíhají přes handlebars šablonovací engine předem, jak uvidíte, až budeme příště diskutovat o souboru tras.
• Soubor package.json popisuje závislosti vaší aplikace (které knihovny z registru npm je třeba stáhnout), název, licenci kódu a další informace. Tento soubor vytvoříme v další sekci.
• Soubor .js soubory obsahují logiku aplikace. Jsou organizovány jako moduly node.js a jsou součástí index.js, který je také vstupním bodem aplikace. Aplikaci spustíte spuštěním příkazu node index.js .

Vytvořte jednotlivé složky a soubory. Soubory můžete zatím ponechat prázdné.

Vytvoření souboru package.json

Až budete mít soubory na svém místě, dalším krokem k vytvoření naší aplikace node.js je vytvoření souboru package.json. Popisuje, jak má vaše aplikace fungovat, jakou má licenci, její úložiště, autora a další (viz interaktivní příklad zde). Node je dodáván s praktickou utilitou, kterou můžete použít k rychlému vytvoření platného souboru package.json. Otevřete konzolu, přejděte do adresáře projektu, který obsahuje index.js a další soubory, a spusťte následující příkaz:

npm init

Nástroj vám položí několik otázek a poté vytvoří váš soubor package.json. Od tohoto okamžiku, když instalujete nové knihovny pomocí npm, budete muset používat příznak --save, aby npm aktualizoval váš package.json za vás. Zkuste to spuštěním těchto příkazů:

npm install express --save
npm install nedb --save
npm install express3-handlebars --save

(Samozřejmě můžete nainstalovat všechny tři pomocí jednoho příkazu.) Tyto příkazy dají správci balíčků uzlů pokyn ke stažení knihoven express, nedb a express3-handlebars z registru a jejich uložení do node_modules adresář a aktualizovat vlastnosti závislostí vašeho package.json soubor.

Zde je obsah souboru package.json:

{
  "name": "picture-voting-game",
  "version": "0.0.1",
  "description": "This is a simple picture voting game with node.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "game",
    "picture",
    "voting"
  ],
  "author": "Martin Angelov",
  "license": "MIT",
  "dependencies": {
    "express": "~3.4.7",
    "nedb": "~0.9.4",
    "express3-handlebars": "~0.5.0"
  }
}

Databázový modul

Nyní se zaměřme na databázi. Jak jsem zmínil na začátku článku, pro ukládání dat budeme používat nedb. Jedná se o odlehčenou čistou JavaScriptovou databázi. Je nerelační (NoSQL) a umožňuje vám ukládat libovolné objekty JSON (nebo dokumenty). Žije ve stejném procesu jako vaše aplikace node.js, podporuje indexy a je poměrně rychlý. Není vhodný pro velké množství záznamů (k tomu budete potřebovat něco jako MongoDB), ale je ideální pro menší aplikace, jako je ta, kterou dnes píšeme. Vše, co je potřeba k používání této databáze, je nainstalovat nedb balíček, který jsme již provedli v předchozí části.

Naše aplikace potřebuje dva typy souborů dat – jeden pro fotografie a druhý pro uživatele. Každý uživatel bude mít jeden záznam a každý bude obsahovat IP adresu a pole se všemi obrázky, pro které uživatel hlasoval. V běžné databázi, jako je MySQL, bychom vytvořili samostatnou databázovou tabulku s hlasy, což by věci komplikovalo, ale zde to není potřeba takto dělat.

Abychom usnadnili údržbu kódu, extrahujeme funkcionalitu pro vytváření datových sad do jejich vlastního modulu node.js. Viz kód níže:

database.js

// Require the nedb module
var Datastore = require('nedb'),
    fs = require('fs');

// Initialize two nedb databases. Notice the autoload parameter.
var photos = new Datastore({ filename: __dirname + '/data/photos', autoload: true }),
    users = new Datastore({ filename: __dirname + '/data/users', autoload: true });

// Create a "unique" index for the photo name and user ip
photos.ensureIndex({fieldName: 'name', unique: true});
users.ensureIndex({fieldName: 'ip', unique: true});

// Load all images from the public/photos folder in the database
var photos_on_disk = fs.readdirSync(__dirname + '/public/photos');

// Insert the photos in the database. This is executed on every 
// start up of your application, but because there is a unique
// constraint on the name field, subsequent writes will fail 
// and you will still have only one record per image:

photos_on_disk.forEach(function(photo){
    photos.insert({
        name: photo,
        likes: 0,
        dislikes: 0
    });
});

// Make the photos and users data sets available to the code
// that uses require() on this module:

module.exports = {
    photos: photos,
    users: users
};

Ještě jedna věc, kterou tento modul dělá, je skenování /public/photos složku (kde jsou uloženy naše kočičí obrázky) pro soubory pomocí vestavěného modulu fs. Fotografie jsou poté vloženy do datové sady fotografií.

Hodnota přiřazená vlastnosti module.exports je výsledkem, který bude vrácen, když je database.js required()-d v jiných souborech.

Pokračujte částí 2

Tím končí první část tutoriálu! Ve druhé části uvidíte zbytek modulů a pohledy. Přečtěte si to zde.