oktató videó - tanfolyam

A nativefier lehetőséget ad arra, hogy egy weboldalból, vagy web alkalmazásból Windows programot készíts nagyon egyszerűen. De arra is van mód, hogy pusztán HTML, CSS, Javascript használatával Windows programokat készíts, amelyekhez internet sem kell. Vagyis semmi újat nem kell tanulnod ahhoz, hogy programokat készíts! Ebben a leírásban mindkét lehetőséget megnézzük.

Kövesd az alábbi lépéseket!

Telepítés

Innen letöltheted a Node.js-t (LTS verzió javasolt). A telepítés során legjobb mindent úgy hagyni, ahogy van.

Nyisd meg a parancssort: kattints a Start menüre > gépeld be ezt: cmd > nyomj ENTER-t

Másold be ezt (CTRL+V a parancssorban, ha nem működik, akkor jobb klikk):

npm install nativefier -g

majd nyomj ENTER-t.



Várd meg, míg a folyamat befejeződik.



Ennyi a telepítése, ezt csak egyszer kell elvégezni. Most már használható.

Használat

A használata sem bonyolultabb, hozz létre egy mappát valahol (lehetőleg ékezet betűk és egyéb egzotikus karakterek nélkül) válaszd ki (tehát kattints rá) majd nyomd le a SHIFT billentyűt, tartsd lenyomva és kattints a mappára jobb egérrel.

Windows 10 esetén válaszd a "PowerShell-ablak megnyitása itt" lehetőséget, Windows 7 esetén pedig a "Parancsablak nyitása itt" lehetőséget.

Ez után a megnyílt ablakba másold be (kattints a jobb gombbal) vagy gépeld be ezt:

nativefier "weboldal címe"

vagyis például:

nativefier "https://web.skype.com"

majd ENTER. Várd meg míg végez. A megadott mappában létrejön a teljes program.



Ha egy másik weboldalból szeretnél ilyen programot készíteni, akkor hozz létre egy új mappát és ismételd meg ugyanezt.

Ha szeretnél egyedi program nevet adni neki, akkor megteheted:

nativefier --name "Ez lesz a program neve" "https://web.skype.com"

vagyis például

nativefier --name "Skype" "https://web.skype.com"

És ennyi.

Használat internet nélküli weboldalak, alkalmazások esetén

Internet nélkül is használható weboldalak, alkalmazások készítésére is van mód, vagyis lényegében HTML, CSS, Javascript ismeretekkel készíthetsz egy hagyományos programot.

Mindent csinálj ugyanúgy, de az alábbi parancsot használd (csak a --name részt módosítsd!):

nativefier --name "Ez a program neve" --insecure --ignore-certificate index.html

Ha végzett, akkor a keletkezett mappába másold be az index.html, egyéb HTML, CSS, Javascript, stb. Az index.html közvetlenül legyen a mappában (tehát ahol az exe is van), ne legyen almappában!

Így nézzen ki valahogy:



Majd nyisd meg szerkesztésre ezt a fájlt: resources\app\nativefier.json

Keresd meg ezt:

"targetUrl":"http://index.html"

és írd át erre:

"targetUrl":"file:///index.html"

Figyelj, hogy semmi mást ne írj át!

Kész, ha mindent jól csináltál, akkor van egy tisztán webes technológiákkal készített programod.

Ebben a példában egy egyszerű teendők program készült, amelyet valójában HTML, CSS és Javascript működtet.

Tippek

Itt találsz egy részletes leírást arról, hogy a program készítése során milyen lehetőségek vannak. Az egyik legfontosabb talán a program ablak mérete, amely alapból átméretezhető, de ez letiltható, illetve megadható kezdeti méret is (width = szélesség, height = magasság).

--width <méret>
--height <méret>

Vagyis például:

nativefier --name "Teendok" --width 250 --height 400 --insecure --ignore-certificate index.html

Megadható ugyanígy minimum és maximum méret is.

--min-width <méret>
--min-height <méret>
--max-width <méret>
--max-height <méret>

Így meghatározhatod a kezdeti méretet és a maximum méretet is, de ha még hozzáírod a minimum méreteket is, akkor egyáltalán nem méretezhető program ablakot készíthetsz.

nativefier --name "Teendok" --width 250 --height 400 --max-width 250 --max-height 400 --insecure --ignore-certificate index.html

Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!