Ebben a bejegyzésben megmutatom, hogyan készíthetünk platform független asztali alkalmazást Node.js és webes technológiák segítségével.
A node-webkit egy Chromiumon és Node.js-en alapuló futtató környezet. Segítségével natív alkalmazásokat lehet írni HTML-ben és JavaScriptben. Használhatók Node.js modulok is.
Először is le kell tölteni a megfelelő node-webkit változatot. Majd ki kell tömöríteni a zip fájlt. Érdemes a könyvtárát átnevezni, mondjuk nw-re, hogy könnyebb legyen használni parancssorból.
Hozzunk létre egy új könyvtárt az alkalmazásunknak, nálam ez webkitHello lett. A könyvtárban nyissunk parancssort, majd az
> npm init
parancs segítségével legenerálhatjuk a projekt package.json fájlját. Rá fog kérdezni néhány dologra. A projekt nevét és a belépési pontot (entry point) mindenképpen adjuk meg, a többi adat opcionális. A belépési pont legyen index.html, ezt az oldalt fogjuk látni a Node.js alkalmazásunk betöltődése után.
Az index.html tartalma:
Kicsit többet tud a "Hello World" kiírásánál :)
A JavaScript kóddal létrehozzuk a natív menüt. A "Névjegy" menüpontra kattintva megjelenik egy alert box.
A 26-28. sorban jelenítjük meg az alkalmazás ablakát, miután betöltött mindent.
A 33. sorban a win.close() zárja az ablakot és az alkalmazást.
Az alkalmazás futtatásához először a fájlokat be kell zippelni. A Node.js alkalmazást az
> ..\nw\nw.exe webkitHello.zip
parancs segítségével indíthatjuk el.
Valami ilyesmit kell látnunk:
A toolbar és a címsor árulkodó, kapcsoljuk ki!
A package.json fájl így néz ki:
A 6. sortól kezdődően vannak megadva az ablak beállításai. A toolbar: false kapcsolja ki a címsort. A show: false tiltja le az ablak azonnali megjelenítését. Ezeken kívül még elég sok mindent be lehet állítani, bővebb információért, kattints ide!
Most így néz ki a Node.js alkalmazásunk:
Ha több lapra van szükségünk, akkor egyszerűen hozzunk létre egy új html fájlt, majd linkeljük be, mintha weboldalt készítenénk.
Így már jobban hasonlít egy asztali alkalmazásra.
Míg el nem felejtem, így néz ki a natív menü:
A második oldalban is ki kellett próbálnom valamit. Megnyitja a hello.txt nevű fájlt, kiírja a tartalmát, aztán módosítja. Vegyük észre, hogy a toolbaros képeken van egy elérési út. A node-webkit a temp könyvtárba kicsomagolja a zip fájlt. Az a könyvtár lesz a Node.js alkalmazásunk számára az aktuális. Fontos megjegyezni, hogy az alkalmazás bezárásakor ez az ideiglenes könyvtár törlődik. Tehát, ha fájlműveleteket szeretnénk végezni, akkor szükségünk lesz a zip, később az exe útvonalára. Ezt a következő módon szerezhetjük meg:
var path = require('path');
var exepath = path.dirname(process.execPath);
Ha már szóba került az exe készítés. Lépjünk be a projekt könyvtárába, és telepítsük fel a szükséges modulokat:
> npm install --save-dev gulp gulp-util node-webkit-builder
Létrejön egy node_modules nevű könyvtár, abban lesznek az exe készítéséhez szükséges modulok.
Szükségünk lesz még a következő GulpFile.js nevű fájlra is.
`
A 10. sorban lévő tömbben lehet megadni, hogy milyen platformra készítsen binárist.
Fordítani a
> gulp nw
parancssal lehet.
Létrejön a build és a cache könyvtár. Az előbbiben lesznek a binárisok. Érdemes ezeket a könyvtárakat minden fordítás előtt törölni, különben elkezdi őket is belepakolni az exébe.
A teljes forráskód megtaláható GitHubon.
