Úvod do desktopových aplikací HTML5 s Node-Webkit

Pomocí Node.js můžeme snadno vytvářet webové aplikace. Nyní, díky node-webkitu, s ním můžeme vytvářet i desktopové aplikace, a to pomocí jedinečné kombinace HTML5 a Node.

Úvod

Knihovna jedinečným způsobem kombinuje WebKit engine a Node.js. WebKit i Node sdílejí stejný kontext, což vám umožňuje psát kód tak, jako by měl být spuštěn v prohlížeči, ale s přidáním všech funkcí Node.

Seznam použití je nekonečný. Můžete vytvářet obchodní aplikace, textové a obrázkové editory, hry, prezentace, administrátorské panely atd. Stačí pojmenovat desktopovou aplikaci, kterou byste chtěli vytvořit, a mohu vás ujistit, že to bude možné s node-webkit.

V tomto tutoriálu vám ukážu, jak začít tím, že vám ukážu, jak vytvořit jednoduchý textový editor.

Příprava

Nejprve musíte získat knihovnu. Stáhněte si verzi vhodnou pro váš operační systém (aplikace samotná poběží na všech z nich) z githubu a rozbalte ji, kdekoli budete chtít. Nyní vytvoříme základní strukturu složek. Budeme mít složky pro soubory HTML (.html ) a pro soubory JavaScript (.js ). Vytvořte také package.json soubor ve stejném adresáři jako nw spustitelný soubor je in a node_modules složku, do které si uchováme moduly, které vytvoříme.

Package.json

První věc, kterou musíte udělat, je vyplnit požadovaná pole v package.json soubor. V případě node-webkit jsou to name a main (na Githubu můžete najít úplný seznam dostupných package.json možnosti). První je úplně stejný jako v případě obyčejné aplikace Node.js. Druhá by měla být (relativní nebo absolutní) cesta k hlavnímu HTML souboru, který se zobrazí po spuštění aplikace. V případě našeho příkladu package.json soubor by měl vypadat takto:

{
	"name": "simple-text-editor",
	"main": "./html/index.html"
}

Nyní, pokud spustíte aplikaci pomocí nw spustitelný soubor, měli byste vidět prázdnou obrazovku, jako je tato:


Hlavní soubor

Vytváření uživatelského rozhraní pomocí node-webkit se neliší od vytváření webové stránky (s drobným rozdílem, že znáte vykreslovací jádro, takže nemusíte poskytovat žádné záložní nástroje pro starší prohlížeče nebo používat knihovny jako jQuery – a vlastně vy by neměly, protože obsahují záložní kód, který zpomalí vaši aplikaci). Vytvořme index.html soubor, který budeme používat:

<!DOCTYPE html>
<html>
<head>
	<title>Simple Text Editor</title>
</head>
<body>

</body>
</html>

Pojďme také zahrnout (a vytvořit) hlavní soubor JavaScriptu, který budeme používat, do těla, takže bude spuštěn po načtení DOM:

<script src="../js/main.js"></script>

Nyní jediné, co se po otevření aplikace změní, bude název.

Pojďme použít nějaký uzel

Abychom vám ukázali, jak snadno můžete použít Node.js v node-webkit, přečtěte si obsah package.json a vytiskněte jej na obrazovku. Vytvořte js/main.js soubor a vložte do něj následující kód:

var fs = require('fs');

fs.readFile('./package.json', 'utf-8', function (error, contents) {
	document.write(contents);
});

Jak vidíte, kód vypadá úplně stejně, jako byste ho psali pro Node. Pak ale použijeme document.write k umístění obsahu souboru na stránku. Není třeba nastavovat žádný místní server.

Nyní otevřete aplikaci a měli byste vidět něco takového:


Moduly

Na node-webkit je ještě jedna pěkná věc; Nemusíte zahrnout řadu <script> tagy ve vašem HTML, pokud chcete rozdělit kód do modulů. Můžete to udělat stejně jako v Node.js – pomocí require . Vytvořme jednoduchý modul pro čtení obsahu souboru do textové oblasti nebo jeho zápis do souboru. Soubor pojmenujte file.js a vložte jej do node_modules adresář. Nyní do něj vložte celkovou strukturu modulu:

var fs = require('fs');

function File() {
	function open(path, document) {
		
	}
	
	function save(path, document) {
		
	}
	
	this.open = open;
	this.save = save;
}

module.exports = new File;

Jak můžete vidět, bude to statická třída se dvěma veřejnými metodami – jednou pro otevírání souborů a druhou pro jejich ukládání.

open metoda bude vypadat takto:

function open(path, document) {
	fs.readFile(path, 'utf-8', function (error, contents) {
		document.getElementById('editor').value = contents;
	});
}

Docela jednoduché, že? Funkce přijímá cestu k souboru jako první parametr a vloží obsah souboru do prvku s id "editor". Musíme také předat document objekt k funkci, protože skript je volán pomocí uzlu require a nemá přímý přístup k obsahu WebKit.

save metoda je stejně jednoduchá jako předchozí:

function save(path, document) {
	var text = document.getElementById('editor').value;
	fs.writeFile(path, text);
}

Nyní vyzkoušíme, zda vše funguje. Změňte obsah js/main.js na toto:

var file = require('file.js');

console.log(file.open, file.save);

Nyní přejděte do konzoly nástrojů pro vývojáře a klikněte na Obnovení pro vývojáře v pravém rohu okna byste měli vidět dvě funkce z tohoto modulu přihlášené. Toto je další užitečná věc v node-webkit – váš console.log volání se zobrazují v konzole nástrojů pro vývojáře, takže je snazší ladit vaše aplikace.


Vstupy souborů Node-Webkit

Přidejme dva souborové vstupy, které budeme později potřebovat:

<input id="open" type="file" style="display:none" accept="text/*"/>
<input id="save" type="file" nwsaveas style="display:none" accept="text/*"/>

Všimněte si nwsaveas atribut ve druhém vstupu. Jedná se o speciální typ vstupu z node-webkit, který umožňuje uživateli vybrat neexistující soubor. Oba vstupy jsou skryté, protože k nim budeme přistupovat pouze z JavaScriptu. V node-webkit jsou vstupy souborů upraveny způsobem, který vám umožní spustit click událost na nich, takže můžete otevřít dialogové okno souboru, aniž by uživatel klikal na vstup (bez nutnosti řešení, jako jsou neviditelné vstupy nad tlačítkem). Nyní můžeme přejít k JavaScriptu.

Nejprve odstraňte console.log volání z js/main.js soubor. Nyní tam vložte tento kód:

function clickInput(id) {
	var event = document.createEvent('MouseEvents');
	event.initMouseEvent('click');
	document.getElementById(id).dispatchEvent(event);
}

document.addEventListener('keyup', function (e) {
	if (e.keyCode == 'O'.charCodeAt(0) && e.ctrlKey) {
		clickInput('open');
	} else if (e.keyCode == 'S'.charCodeAt(0) && e.ctrlKey) {
		clickInput('save');
	}
});

Tento kód je zodpovědný za zobrazení Otevřeno a Uložit dialogy. clickInput funkce zde dělá hlavní práci - simuluje událost kliknutí na vstupní prvek - v běžném prohlížeči by to z bezpečnostních důvodů nebylo možné, ale zde se o bezpečnostní hrozbu vůbec nejedná. Později je tu normální keyup obsluha události, která kontroluje, zda byla stisknuta správná kombinace kláves (Ctrl+O nebo Ctrl+S ) a „klikne“ na vstupy. Všimněte si, že toho by nebylo možné dosáhnout ani v prohlížeči – kombinace jako Ctrl+O a Ctrl+S jsou vyhrazeny pro interní použití prohlížeče a při jejich stisknutí se nespustí žádná událost (u nich spouští pouze Firefox).

Nyní stiskněte tlačítko Obnovení pro vývojáře a po stisknutí Ctrl+S byste měli vidět příslušný dialog nebo Ctrl+O . Samozřejmě, že zatím nic nedělají.

Vytvoření editoru

Nyní, protože budeme vytvářet textový editor, potřebujeme něco, na čem bychom mohli psát. Přidejte textarea do HTML:

<textarea id="editor" style="position:fixed;top:0;bottom:0;left:0;right:0"></textarea>

Dále musíme dokončit otevření/uložení kódu. Pojďme vytvořit onchange posluchače událostí pro open a save vstupy:

document.getElementById('open').addEventListener('change', function (e) {
	file.open(this.value, document);
});

document.getElementById('save').addEventListener('change', function (e) {
	file.save(this.value, document);
});

Díky dříve vytvořenému modulu je kód opravdu jednoduchý. To je také možné díky node-webkit, protože v prohlížečích (opět z bezpečnostních důvodů) je hodnota vstupního prvku souboru nastavena na falešnou cestu - zde je to cesta, která byla vybrána. Nyní otevřete aplikaci (nebo stiskněte tlačítko Obnovení pro vývojáře tlačítko, pokud jste jej nezavřeli) a měli byste mít perfektně fungující textový editor.

Další vylepšení

Můžeme také udělat několik dalších věcí, aby byl editor o něco pokročilejší a užitečnější. Například, když uživatel stiskne Ctrl+N, otevřeme nové okno . Nejprve přidejte toto require na začátek skriptu:

var gui = require('nw.gui');

nw.gui module je knihovna node-webkit související s uživatelským rozhraním (více si o tom můžete přečíst na Githubu Node-webkit). Dále přidejte toto else if na keyup dokumentu posluchač:

} else if (e.keyCode == 'N'.charCodeAt(0) && e.ctrlKey) {
	gui.Window.open('index.html');
}

A violu! Pokud aplikaci aktualizujete, můžete nyní stisknout Ctrl+N otevřete nové okno. Tato funkce se liší od normální window.open ačkoli. Jako druhý parametr můžete předat různé možnosti okna. Seznam toho, co tam můžete nastavit, je k dispozici v dokumentaci.

Další věc, která může být užitečná v textovém editoru, je nabídka aplikace (ta, která se nachází pod záhlavím ve Windows/Linuxu a v horní části obrazovky na Macu). V node-webkit je to docela jednoduché. Nejprve vytvoříme nabídku:

var menu = new gui.Menu({ type: 'menubar' });

Typ menubar je vyhrazeno pro nabídku aplikací. Nyní do něj můžeme přidávat položky. Nechť je to File menu:

menu.append(new gui.MenuItem({
	label: 'File',
	submenu: new gui.Menu()
}));

Nyní do této nabídky přidáme některé položky:

menu.items[0].submenu.append(new gui.MenuItem({
	label: 'New',
	click: function () {
		gui.Window.open('index.html');
	}
}));
menu.items[0].submenu.append(new gui.MenuItem({
	type: 'separator'
}));
menu.items[0].submenu.append(new gui.MenuItem({
	label: 'Close',
	click: function () {
		gui.Window.get().close();
	}
}));

menu.items[0] je první položkou nabídky naší aplikace (pokud chcete, můžete ji také přiřadit k proměnné při jejím vytváření). K jeho submenu přidáváme nové položky a každá položka dostane click zpětné zavolání pro zpracování kliknutí na něj. gui.Window.get metoda získá aktuální okno, takže jej můžeme zavřít, když uživatel vybere Zavřít možnost v Soubor menu.

Nakonec můžeme oknu přiřadit menu:

gui.Window.get().menu = menu;

Opět používáme gui.Window.get abychom získali aktuální okno, pak přiřadíme naší nabídce jeho menu vlastnictví. Vezměte prosím na vědomí, že i když můžeme každému oknu přiřadit jinou nabídku, na OSX (Mac) může mít jedna aplikace pouze jednu nabídku (která je globální pro všechna okna), takže pokud chcete, aby se vaše aplikace používala na počítačích Mac, měli byste se vyhnout používání různých nabídek v různých oknech.

Nyní, když otevřete nebo obnovíte aplikaci, měla by se zobrazit systémová nabídka pod titulkem :


Zabalení aplikace

Nyní, pokud chcete svou aplikaci sdílet s ostatními uživateli, můžete ji zabalit do jednoho souboru, aby si uživatelé mohli stáhnout spustitelný soubor node-webkit vhodný pro jejich platformu a spustit s ním vaši aplikaci. Nejprve odeberme panel nástrojů díky tomu okno vypadá jako prohlížeč – je to hezké mít během vývoje, ale vaši uživatelé to pravděpodobně nechtějí vidět. Toho můžeme dosáhnout nastavením window.toolbar na false v package.json , takže to vypadá takto:

{
	"name": "example-app",
	"main": "./html/index.html",
	"window": {
		"toolbar": false
	}
}

Nyní, když otevřete aplikaci (nic se nezmění, pokud ji pouze obnovíte, package.json se načte pouze při spuštění), měli byste vidět konečný výsledek:


Balení aplikace je velmi jednoduché. Stačí vytvořit .zip archivovat se všemi vašimi aktivy (všechny soubory, které jste vytvořili, bez souborů dodaných s node-webkit) a změnit jeho příponu na .nw . To je vše. Pokud si uživatel stáhne node-webkit a váš balíček, stačí jej vložit do adresáře node-webkit a spustit nw spustitelný. Podrobné popisy s několika dalšími tipy jsou k dispozici na githubu node-webkit.

Nyní je váš editor připraven k odeslání vašim uživatelům.

Závěr

Jak můžete vidět, node-webkit je velmi slibná a výkonná knihovna. Vzhledem k častým aktualizacím a opravám a podpoře společnosti Intel není téměř žádná šance, že bude ukončena, což se u projektů s otevřeným zdrojovým kódem někdy může stát.

Podělte se o své názory na tento projekt v komentářích níže. Osobně si myslím, že je to nejlepší věc, pokud chcete vytvořit desktopovou aplikaci pomocí Node.js a HTML.

Podívejte se také na výběr užitečných skriptů a aplikací Node.js a HTML5 na Envato Market.