<section className="mb-16 text-black">
 
 Az Electron JS (vagy csak simán Electron) pont ezt a célt szolgálja.
 Segítségével Javascriptben írhatjuk a kódot, majd ezt lefordítva kapunk
 egy futtatható állományt, mely nem igényel sem internetkapcsolatot,
 sem pedig külön böngészőt.
 

 <h num="{{2}}" className="mb-4">
 Hogy működik pontosan? Mik az előnyei? Biztosan van valami trükk a háttérben
 </h>

 
 Van bizony, de nem olyan súlyos, mint amennyire elsőre gondolnánk.
 Miután megírtuk a forráskódot, a fordítás (azaz build) pillanatában
 az Electron az egészhez hozzácsomagol egy Chromium motort, amely a háttérben
 értelmezi és végrehajtja a JS funkciókat. A Chromium egy nyílt-forráskódú
 projekt, amelyből a jól ismert Chrome webböngésző is építkezik. Ez persze nem
 azt jelenti, hogy ez csak ennyit tud.
 
 Valójában kapunk operációs rendszer specifikus funkciókat is.
 Ilyen például a Taskbar Customization, amellyel a Windows tálcán
 megjelenő ikonjára tehetünk rá egy fedőréteget, képfájlok felhasználásával.
 
 Ennek köszönhetően megjeleníthetőek például “x számú új üzenet” buborékok az ikon sarkában.
 
 
 Valószínűleg már egyértelmű, hogy ha vannak Windows specifikus funkciók,
 akkor bizony Linux és MacOS specifikusak is, azaz egy Cross-Platform megoldásról beszélhetünk,
 mely képes minden ma használt operációs rendszeren jól működő, futtatható állományt generálni.
 Egyértelmű előny, hogy a kódbázis gyakorlatilag ugyanaz mindhárom esetben, hiszen ezzel rengeteg
 időt meg tudunk spórolni, mivel nem kell minden egyes új funkciót újraírni az adott nyelven, egy konkrét környezetre.
 
 Persze, mint ahogy azt már megszokthattuk a platformfüggetlen technológiáknál,
 az elérhető maximális teljesítmény alacsonyabb, de szerencsére nem minden esetben
 kell kihasználnunk az utolsó MHz-et is a hardverünkön és gyakran optimálisabb megoldásokat is kapunk
 egy-egy problémára egy ilyen csomagban, mint amilyeneket magunktól írnánk elsőre.
 

 <h num="{{2}}" className="mb-4">
 Hogyan tudom használni az Electron JS-t?
 </h>
 
 Itt kicsit ködössé válhat a helyzet az elején, mert többféle releaset választhatunk,
 a git repoból klónozott kész állományok teljesen máshogy néznek ki mint amihez szoktunk,
 de valójában elkezdhetjük nagyon egyszerűen is, nem kell hozzá giten és npm-en kívül semmi.
 
 
 Először klónozzuk az electron-quick-start repót:
 
 <codeblock className="mt-3 mb-3 ml-6">git clone https://github.com/electron/electron-quick-start</codeblock>
 
 Aztán a mappán belülről tegyük fel a szükséges csomagokat és indítsuk el a projektet:
 
 <codeblock className="mt-3 mb-3 ml-6">cd electron-quick-start
npm install
npm start</codeblock>
 
 Itt rögtön kapunk egy ablakot egy Hello World példával, ami pontosan úgy néz ki,
 mintha egy rendes asztali program lenne, pedig tudjuk, hogy a háttérben böngészőmotor fut.
 
 
 Ha megnézzük a forráskódot, találkozhatunk néhány olyan kifejezéssel, amellyel valószínűleg máshol még nem, a JS-en belül.
 
 
 Nézzük a main.js-t.
 Az egész egy BrowserWindow Object létrehozásával kezdődik, ezen belül fog futni minden amit látunk:
 
 <codeblock className="mt-3 mb-3 ml-6">const mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 preload: path.join(__dirname, 'preload.js')
 }
})</codeblock>
 
 Ezzel egy 800x600-as felbontású ablakot hozunk létre. A preload.js az a fájlunk lesz, ami legelőször fut le.
 Ezután a megjelenített tartalmat kell betölteni:
 
 <codeblock className="mt-3 mb-3 ml-6">mainWindow.loadFile('index.html')</codeblock>
 
 Itt elsőre úgy tűnik, hogy nincs nagy csoda, szabványos HTML szintaxis van ebben a fájlban, azzal a Hello World + 3 verzió stringgel amit már láttunk az indításnál.
 Annyi érdekesség azonban esetleg lehet benne, hogy a verziók utólag kerülnek be az ezeknek fenntartott span elemekbe, ezt csinálja a preload.js. Ha belenézünk,
 találunk benne egy process objectet, amiben a chrome, nodejs és electron verziók is megtalálhatóak. Ha kiírjuk konzolra, akkor ennél sokkal többet is találhatunk benne.
 
 
 Például a getSystemMemoryInfo függvény visszaadja a rendszermemória állapotát egy objectben, egész pontosan így:
 
 <codeblock className="mt-3 mb-3 ml-6">{
 free: 15087720
 swapFree: 9032416
 swapTotal: 38462052
 total: 33481316
}</codeblock>
 
 Ez értelemszerűen bájtban van, látszik, hogy nagyjából 28GB lapozófájl (jelenleg windowson fut, így ez nem a hagyományos, linuxos értelemben vett swap) és kb 17GB tényleges ram le van foglalva. 
 
 Ezen kívül például lekérhetünk rendszerverziót a getSystemVersion metódussal. Windows 10 esetében egy ehhez hasonló stringet fogunk visszakapni: 10.0.19044
 
 Ennek persze csak akkor van értelme, ha tudjuk a platformot. A process.platform ezt is megadja, ez esetben “win32”.
 
 
 Összességében tehát az Electron sokkal többet tud, mint azt elsőre gondolnánk,
 valós alternatíva lehet ha asztali környezetben szeretnénk fejleszteni és már van egy alapvető Javascript tudásunk.
 
 </section>

Vegye fel velünk a kapcsolatot! Szívesen segítünk bármilyen szoftverfejlesztési probléma megoldásában!

Az Electron JS alapú megoldások egyre erősödnek, a korábban megszokott Java és C alapú asztali szoftverekhez képest, mivel sokkal könnyebben tanulható.

Korábban az asztali szoftverek nagyrészt Javaban vagy valamilyen C-szerű nyelven íródtak. Mára ez fordulni látszik, a JS alapú megoldások egyre erősödnek.

Electron JS használata asztali programkörnyezetben

<section className="mb-16 text-black">
 Ez alapvetően két dolognak köszönhető:
 <ul className="list-outside list-disc mb-3">
 <li className="ml-6">
 Borzasztó nehéz több kódbázist szinkronban fejleszteni, még akkor is ha az adott platformon
 megfelelő képzettséggel rendelkező szakemberekkel rendelkezünk. Sokkal több időt vesz
 igénybe, illetve a menedzsment a nagyobb létszám miatt értelemszerűen
 bonyolultabb feladat.
 </li>
 <li className="ml-6">
 A megnövekedett időigény egyenes következménye a költségek növekedése, ez
 pedig azt jelenti majd, hogy rengeteg jó ötlet nem valósulhat meg,
 egyszerű pénzhiány miatt.
 </li>
 </ul>

 
 A cross-platform megoldásoknál ezek a problémák mérséklődnek.
 

 
 Minden ilyen megoldásnak a központi céljai között van, hogy a kódbázis
 amiből a végleges állományokat fordítjuk, minél kevesebb platformspecifikus
 részt tartalmazzon. Ez a gyakorlatban azt jelenti, hogy ha van egy iPhoneunk
 és egy Androidos telefonunk is, akkor az általunk megírt dolgok ne
 igényeljenek külön kezelést az egyes eszközökre, azaz ne kelljen különbséget
 tennünk a forrásban, hogy most éppen milyen telefonon vagy tableten fut a
 kész állományunk.
 

 
 A natívhoz képest a másik véglet a web, itt egy úgynevezett WebViewt hozunk
 létre, ami gyakorlatilag egy böngészőablak, kezelőfelület nélkül, teljes
 kijelzőre méretezve. Mivel a böngészőmotorok nagyon hasonló funkciólistával
 rendelkeznek, egyszerre implementálhatunk mindent PC-re és okostelefonra.
 Így az egész nagyon gyorsan elkészül és ha nem kell a hardvert elérni (pl.
 rezgőmotort, értesítő ledet, ujjlenyomat olvasót), akkor verhetetlenül olcsó
 is.
 
 
 Persze van hátránya is:
 
 
 A futásteljesítmény és az előbb említett hardverkezelés. Előbbi ritkán
 jelent problémát, a jó optimalizáción múlik igazán, nem azon, hogy miben
 készül a termékünk.
 
 
 Utóbbi már képes nagyobb gondokat okozni, mivel valahogy kötnünk kell a
 WebView tartalmát a natív funkciókhoz. Talán a legkézenfekvőbb egy saját
 API-t gyártani, amely csak a szükséges natív funkciókat implementálja, de ez
 olyan, mint újra feltalálni a kereket: Már van rá megoldás, az esetek nagy
 részében nem éri meg újat csinálni.
 
 
 Erre nyújtanak megoldást a hybrid frameworkök, melyek általában webhez
 hasonló szintaxissal rendelkeznek, de olyan komponenseket is tartalmaznak,
 melyekkel kihasználhatóak a natív funkciók.
 
 
 Gyakran használt kombináció a React Native és az Expo párosítása. Ha
 megnézzük előbbi dokumentációját, akkor viszonylag kevés alap komponenst
 találunk és ezek is inkább a layout kialakítására fókuszálnak. Az Expo ezt
 egészíti ki jónéhány hasznos dologgal.
 
 
 Az egyszerűség kedvéért nézzük meg például, hogy miképpen lehet az
 akkumulátor töltöttségét lekérdezni. Ugye WebViewnál natív oldalon le kell
 kérdeznünk a BatteryManagertől ezt az adatot, aztán valahogy visszaadni egy
 végponton. Ezzel szemben a hibrid megoldást is elbonyolíthatjuk
 mindenfélével, de a lényeg nagyjából ennyi:
 
 <codeblock className="mt-3 mb-3 ml-6"
 >await Battery.getBatteryLevelAsync(); // 0.8</codeblock
 >
 
 Ennél könnyebb dolgunk nem igazán lehetne, JSX-ben simán egyetlen sor a
 lekérdezés, ami egy 0 és 1 közötti float értéket ad vissza, illetve -1-et ha
 nem támogatott (pl. Android TV-ben hiába keresnénk akkumulátort).
 
 
 Persze nem csak ennyi a történet, rengeteg mindent paraméterezhetünk.
 Például a gyorsulásmérő lekérdezésénél megadható az adatok frissítési
 intervalluma:
 

 <codeblock className="mt-3 mb-3 ml-6"
 >Accelerometer.setUpdateInterval(1000);</codeblock
 >
 
 Ebben az esetben 1000ms-re állítottuk, azaz másodpercenként egyszer fog
 frissülni a mért érték.
 
 Ugyanígy például az IP címet is lekérhetjük:
 <codeblock className="mt-3 mb-3 ml-6"
 >await Network.getIpAddressAsync();</codeblock
 >
 
 Illetve nem csak függvényeket, de propertyket is kapunk:
 
 <codeblock className="mt-3 mb-3 ml-6">Device.totalMemory;</codeblock>

 
 Így megkapjuk byteban az eszközbe épített RAM méretét. Ez értelemszerűen
 időben nem változik, így felesleges lenne aszinkron lekérdezés hozzá.
 
 
 Látható tehát, hogy ha szeretnénk az eszköz beépített funkcióit is használni
 a
 <a className="underline" href="{{routes.app}}" locale="hu"
 >mobil alkalmazás fejlesztés</a
 >
 során, akkor érdemes a hibrid megoldásokat is számításba venni, mivel
 jelentősen megkönnyítheti a dolgunkat és rengeteg pénzt, illetve időt
 spórolhat nekünk.
 
</section>

Vegye fel velünk a kapcsolatot! Csapatunk szívesen segít bármilyen digitális megoldás elkészítésében.

A cross-platform appok segítségével egyszerre fejleszthetünk mindkét nagy rendszerre. Cikkünkben megismerheti a natív megoldásokkal szembeni előnyöket.

Az okostelefon elterjedése óta számos megoldás született arra, hogy a programozó minél könnyebben, gyorsabban tudjon fejleszteni. A piac a natív appoktól egyre inkább a cross-platform megoldások felé mozdult.

Az appok 2022-ben: A natív, a webes és a hibrid

Nézzük is mik ezek:
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Let
 </h>
 
 A var kulcsszóhoz hasonló, változókat tudunk deklarálni vele, azonban a
 scope kicsit más. Amennyiben blokkon belül hozzuk létre, azaz valahogy
 így:
 
 <codeblock className="mt-3 mb-3 ml-6">{
 let x = 1;
}</codeblock>
 
 Úgy a kapcsos zárójeleken kívül az x bizony már nem lesz 1. Ha korábban
 deklaráltuk, akkor az előző értéket veszi fel, ha nem, akkor undefined
 lesz. Ha ugyanezt varral csináljuk, a blokkon belüli értékünk marad a
 zárás után is.
 
 
 Function-scope tekintetében a let és a var között nincs igazán különbség,
 az elérésük ugyanolyan, a function zárásakor kívül már nem lesz elérhető
 az értékük.
 
 
 Global-scopeban is lehet használni, egyszerűen csak blokkon és függvényen
 kívül hozzuk létre
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 const
 </h>
 
 Gyakorlatilag ugyanúgy működik mint a let, azzal az egy különbséggel, hogy
 csak deklarálásnál tudunk neki értéket adni. Így biztosak lehetünk abban,
 hogy később nem írjuk felül véletlenül.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Arrow function
 </h>
 
 Shorthand a függvény deklarációkhoz. A segítségével elhagyhatjuk a
 function kulcsszót egy névtelen függvénynél, illetve akár a kapcsos
 zárójeleket és a returnt is
 
 <codeblock className="mt-3 mb-3 ml-6">const c = (a,b) => a * b
console.log(c(2,3)); // 6
</codeblock>
 Ennek az ES5-ös megfelelője így néz ki:
 <codeblock className="mt-3 mb-3 ml-6">var c = function(a, b) {
 return a * b;
}
console.log(c(2,3));
</codeblock>
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 For/Of ciklus
 </h>
 
 Leginkább a foreachre hasonlít, egy iterable objektumon tudunk végigmenni
 vele:
 
 <codeblock className="mt-3 mb-3 ml-6">let arr = ["1", "6", "37", "52"];
for (let x of arr) {
	console.log(x);
}
</codeblock>
 
 Nem csak tömbökön működik. Például egy string is iterable, ezáltal így is
 használhatjuk:
 
 <codeblock className="mt-3 mb-3 ml-6">let s = "ES6";
for (let y of s) {
	console.log(s[y]);
}
</codeblock>
 
 Vegyük észre, hogy ebben az esetben nem a konkrét betűket, hanem annak
 indexeit kapjuk meg az y-ban, ezért van szükség a címzésre.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Map
 </h>
 
 kulcs-érték párokat tartalmaz, melyeknek megtartja a hozzáadási sorrendjét
 is:
 
 <codeblock className="mt-3 mb-3 ml-6">let x = new Map();
x.set(y, 10);
x.set(z, 3);
</codeblock>
 
 Tartalmaz néhány beépített metódust minden létrehozott Map:
 
 <ul className="mb-3">
 <li>set: érték beállítása egy kulcshoz</li>
 <li>get: érték lekérdezése kulccsal</li>
 <li>clear: map kiürítése</li>
 <li>delete: elem törlés kulcs alapján</li>
 <li>has: tartalmazza-e a megadott kulcsot a map</li>
 <li>entries: A kulcs-érték párokat adja vissza egy iterator objectben</li>
 <li>keys: ugyanaz mint az entries csak kulcsokkal</li>
 <li>values: ugyanaz mint a keys csak értékekkel</li>
 </ul>
 
 Ezen kívül a már megszokott forEach is működik rajta, illetve van egy size
 propertyje, ami az elemszámot adja vissza.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Set
 </h>
 
 Hasonló a maphoz, annyi különbséggel, hogy egyedi értékeket tárolhatunk
 benne, nincsenek kulcs-érték párok.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Class
 </h>
 
 Magyarul osztályként találkozhatunk vele, az objektumok számára egy
 sablon, belső metódusokkal és tulajdonságokkal:
 
 <codeblock className="mt-3 mb-3 ml-6">class Fruit {
	constructor(name, color) {
		this.name = name;
		this.color = color;
 }
}
</codeblock>
 
 A construcor mindig kötelező, a példányosításnál ez a függvény fog
 lefutni:
 
 <codeblock
 className="mt-3 mb-3 ml-6"
 >var example = new Fruit("apple", "red");</codeblock>
 
 Példányosítás után pedig a beállított tulajdonságokat le tudjuk kérdezni:
 
 <codeblock className="mt-3 mb-3 ml-6">console.log(example.name); //apple
console.log(example.color); //red
</codeblock>
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Symbol
 </h>
 
 Egyedi azonosítónak használják, mely minden létrehozásnál más értéket vesz
 fel.
 
 <codeblock className="mt-3 mb-3 ml-6">var truck = {
	color: "red",
};
var id = Symbol(‘id’);
truck[id] = 856334;
</codeblock>
 
 Így a Symbol által létrehozott egyedi azonosítóval kérhetjük le a truck
 objektum id-ját, ami csak és kizárólag a felette létrehozott Symbol
 objektummal működik, ha ugyan ezekkel a paraméterekkel létrehozunk egy
 másikat, azzal már nem fog.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Alapértelmezett értékek a paramétereknél
 </h>
 
 A függvénydeklarációknál megadható a paraméterek kezdőértéke, amely akkor
 állítódik be, ha oda a függvényhívásnál nem adtunk meg semmit.
 
 <codeblock className="mt-3 mb-3 ml-6">function add(x, y = 1) {
 return x + y;
}
 
add(3); //4
</codeblock>
 Így létrehozhatunk opcionálisan megadható függvényparamétereket.
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Rest paraméter
 </h>
 
 Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:
 
 <codeblock className="mt-3 mb-3 ml-6">function write(a, b, …args) {
	console.log(a);
	console.log(b);
	for(let current of args) console.log(current);
}

write(1,2,3,4,5,6,7,8);</codeblock>
 
 Így az első 2 számot fixen kiírja a write, míg a harmadikat vagy azután
 következőket már nem kötelező megadnunk. Ha mégis megadjuk, azokat is
 kiírja.
 
 
 Persze önmagában is használhatjuk, abban az esetben így kezdődne a
 létrehozás:
 
 <codeblock
 className="mt-3 mb-3 ml-6"
 >function write(...args) }</codeblock>
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 String.includes()
 </h>
 
 Megvizsgálhatjuk, hogy egy stringben megtalálható-e egy másik:
 
 <codeblock className="mt-3 mb-3 ml-6">var text = "Test String";
text.includes("rin"); //true
</codeblock>
 
 Ezen kívül a startsWith() és az endsWith() metódusokkal ellenőrizhetjük,
 hogy a megadott szöveggel kezdődik vagy végződik-e a stringünk.
 
 </section>
 <section className="mb-16 text-black">
 <h num="{{2}}" className="mb-4">
 Array.from()
 </h>
 Tömböt csinál egy iterable objektumból.
 <codeblock
 className="mt-3 mb-3 ml-6"
 >Array.from("123"); //[1,2,3]</codeblock>
 
 Az ES6-nak itt nincs még vége, számos Javascript trükk épül rá amit a <a className="underline" href="{{routes.webDev}}" locale="hu">honlapkészítés</a> során felhasználhatunk. Egy következő cikkben ismertetjük a további hasznos funkciókat, amelyek ezzel a szabvánnyal kerültek be a nyelvbe.
 
 </section>

Cikkünkben megismerheti az ES6-os Javascript pár nagy újítását, melyre a legtöbb modern framework épül.

Mára a legtöbb weboldal dobta a régi Flash Playeres funkciókat, felváltotta őket a HTML5 és a Javascript használata.
Ez utóbbi viszonylag gyakran kap frissítéseket, de aki nem követi, annak kevés esélye van észlelni, hiszen a böngészők nem igazán szoktak szólni róla, ha bejön egy-egy új szabvány amit implementálnak.
1997 óta nagy utat tett meg a JS, mára a legtöbb keretrendszer alapvető elvárásnak tekinti az ES6-ot.
Az ECMAScript 2015 (azaz az ES6) számos új funkciót hozott a 4-6 évvel korábbi (attól függ, hogy az 5.1-et el akarjuk-e fogadni vagy sem) megoldáshoz képest.

Javascript

Electron JS használata asztali programkörnyezetben

Az appok 2022-ben: A natív, a webes és a hibrid

Modern Javascript funkciók - ES6 I.