Asztali alkalmazás készítése Node.js segítségével

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:
webkitHello_screen_toolbar_1

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:
webkitHello_screen_without_toolbar

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.
webkitHello_screen_toolbar_2

Így már jobban hasonlít egy asztali alkalmazásra.

Míg el nem felejtem, így néz ki a natív menü:
webkitHello_screen_menu

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.

Kategória: Programozás Címke: ,