A JavaScript a legelterjedtebb programozási nyelvek közé tartozik. Az a tény, hogy backend és frontend fejlesztésre is használható, sok ember számára kedveltté tette.
A JavaScript számos könyvtárral és keretrendszerrel rendelkezik, amelyek a vaníliás (sima) JavaScripten túlmutatnak.
Az Electron.js egy hatékony nyílt forráskódú keretrendszer, amely lehetővé teszi a webfejlesztők számára, hogy meglévő készségeik birtokában natív alkalmazásokat fejlesszenek. Ez a cikk megtanítja az Electron.js-ről, és arról, hogyan használható fel a következő csodálatos ötlet megvalósítására.
Tartalomjegyzék
Electron JS
Az Electron JS egy keretrendszer, amellyel a fejlesztők asztali alkalmazásokat hozhatnak létre HTML, CSS és JavaScript használatával. Az Electron JS-t a GitHub hozta létre és tartja karban.
A keretrendszer a Node.JS és a Chromium keveréke, amely lehetővé teszi a felhasználók számára, hogy egyetlen JavaScript-kódbázist karbantarthassanak, és platformokon átívelő asztali alkalmazásokat fejlesszenek ki, amelyek Windowson, macOS-en és Linuxon is működnek.
Az Electron.js története 2013 januárjában kezdődött. Az eredeti ötlet egy többplatformos szövegszerkesztő létrehozása volt, amely JavaScripttel, HTML-lel és CSS-sel is működhet.
Az Electron.js eredeti elnevezése Atom Shell volt, és 2014-ben nyílt forráskódúvá vált. A projektet később 2015 áprilisában Electron névre keresztelték, első API-ja pedig 2016-ban jelent meg.
Az Electron JS jellemzői
- Kompatibilis az összes JavaScript könyvtárral és keretrendszerrel. A Vue.js, az Angular és a React.js csak példák a JavaScript-keretrendszerekre, amelyeket a fejlesztők az Electron JS-sel együtt használhatnak. Ez a kompatibilitás megkönnyíti e könyvtárak és keretrendszerek funkcióinak/funkcióinak használatát az Electron alkalmazás létrehozásakor.
- Újrafelhasználható keret. A különböző ügyfelek igényeinek kielégítése költséges lehet. Az Electron JS-ben az a jó, hogy webes és asztali alkalmazásokhoz is használható. Az egyetlen kódbázis azt jelenti, hogy különböző operációs rendszereken is használható.
- Hozzáfér a natív API-khoz. Az Electron JS-n dolgozó fejlesztők hozzáférhetnek az általuk használt operációs rendszerek natív API-jához. A fejlesztők így olyan asztali alkalmazásokat hozhatnak létre, amelyek hasonló hozzáféréssel rendelkeznek az alacsony szintű funkciókhoz, például az értesítések megjelenítéséhez.
- Támogatja a webtechnológiát. Az Electron JS adaptálható, mivel a fejlesztőknek nem kell új programozási nyelvet tanulniuk az alkalmazások fejlesztéséhez. Ez azt jelenti, hogy ha megért egy bizonyos nyelvi csomagot, amelyet már webalkalmazások létrehozásához használ, akkor asztali alkalmazás létrehozására is használhatja.
- Kód- és alkalmazáskezelés. Nem kell különböző csapatokat fenntartania az alkalmazások és a kódok különböző operációs rendszerekhez való karbantartásához. Az Electron JS lehetővé teszi ugyanazt a kódbázist a Linux, Windows és Mac operációs rendszerekhez.
- Könnyű felépítés/telepítés. Az Electron csomagkezelő segít a fejlesztőknek a megfelelő csomagokba történő becsomagolásban. Ezzel a csomagkezelővel kiadhat egy Linux, Mac és Windows asztali alkalmazást ugyanabból a kódbázisból.
Építészet Electron JS
Az Electron architektúrája nagyon hasonlít egy modern webböngészőhöz, mivel többfolyamatos architektúráját a Chromiumtól örökli.
Az Electron architektúrája a V8 JavaScript Engine-ből, a Node.JS-ből és a Libchromiumcontentből áll.
- Node.JS – egy nyílt forráskódú JavaScript futtatókörnyezet, amely a V8 JavaScript motoron fut. A Node.JS lehetővé teszi a fejlesztők számára a JavaScript futtatását a böngészőablakon kívül. A Node.JS azt is lehetővé teszi a felhasználók számára, hogy nyers JavaScript-kódot hajtsanak végre az interaktív shelljén keresztül.
- Libchromiumcontent – egy nyílt forráskódú Chromium renderelő könyvtár, amelyet a Google Chrome karbantart. A Chrome minimalista felhasználói felülettel rendelkezik, és a blink-et használja elrendezési motorként, a V8-at pedig JavaScript-motorként.
- V8 JavaScript Engine – egy nyílt forráskódú JavaScript motor, amelyet C++ és JavaScript nyelven írtak és a Google fejlesztett ki.
#1. Node.js
Az Electron JS használatának megkezdéséhez telepítenie kell a Node.js-t a helyi gépen.
Válassza ki a megfelelő csomópont-verziót a számítógépén futó operációs rendszertől függően.
Ellenőrizze, hogy a Node.js megfelelően lett-e telepítve ezen parancsok futtatásával;
node -v
npm -v
Ha megfelelően van telepítve, ezek a parancsok a csomópont és az npm verziót mutatják.
#2. Parancs sor
A parancssor elérésének módja az operációs rendszertől függ.
- A Linux a disztribúciótól függ.
- Windows: PowerShell vagy Parancssor.
- macOS: Terminál.
Egyes kódszerkesztők, például a Visual Studio Code, integrált terminállal rendelkeznek.
#3. Kódszerkesztő
Az Electron JS kód írásához kódszerkesztőre van szüksége. A Visual Studio Code az egyik legjobb, amit kipróbálhat.
Az Electron JS telepítése
1. lépés: Hozzon létre egy node.js projektet.
A kezdéshez használja ezeket a parancsokat;
mkdir my-electron-app && cd my-electron-app
npm init
Az npm init parancs néhány mező kitöltését kéri, például az alkalmazás nevét, belépési pontját és leírását.
Alkalmazásnévként kiválaszthatja a mappa alapértelmezett nevét. Ne felejtse el azonban beállítani az alkalmazás belépési pontját main.js-ként.
Az olyan mezők, mint a szerző és a leírás, bármilyen értéket felvehetnek. A package.json valahogy így fog kinézni, ha végzett az alábbi lépésekkel:
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}
2. lépés: Telepítse az elektront
Használja ezt a parancsot;
npm install --save-dev electron
3. lépés: Adja hozzá a „start” parancsot a package.json fájlhoz
{
"scripts": {
"start": "electron ."
}
}
4. lépés: Indítsa el az alkalmazást
Ezzel a paranccsal indítsa el az alkalmazást fejlesztői módban
npm start
Electron JS munkafolyamat
Folytatjuk az alkalmazás építését a fenti beállítások alapján. Egy Electron alkalmazásnak kétféle folyamata van; fő és megjelenítő.
A fő folyamat
A fő szkript bármely elektronalkalmazás belépési pontja. Az alkalmazás teljes Node.js környezetben fog futni. Az Electron megkeresi a fő szkriptet a package.json fájlban, amelyet már konfigurált az alkalmazás állványozása során.
A fő szkript inicializálásához hozza létre a main.js fájlt a gyökérmappában. Megteheti manuálisan vagy használja ezt a parancsot;
touch main.js
A következő kódot adhatja hozzá a main.js fájlhoz
const { app, BrowserWindow } = require('electron');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile('index.html');
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Az Electronban lévő weboldalak távoli webcímről vagy helyi HTML-fájlból tölthetők be. Helyi HTML-fájlt fogunk használni demonstrációs célokra.
Hozzon létre egy index.html fájlt a gyökérmappában. Az index.html kód mindig rendelkezésre áll, de ezt is megadhatja kezdőkódként;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> <p id="info"></p> </body> <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script> </html>
Renderelő folyamat
A renderer webes tartalmat jelenít meg. Az előbetöltő szkriptek olyan kóddal érkeznek, amely a webtartalom betöltésének megkezdése előtt lefut egy renderelő folyamatban.
Hozzon létre preload.js fájlt a gyökérmappában, és adja hozzá ezt a kódot;
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Futtassa a fejlesztőkiszolgálót az npm start segítségével, és ez jelenik meg
Példák alkalmazásokra: Electron JS
#1. Slack asztali alkalmazás
A Slack az egyik legnépszerűbb távoli együttműködési eszköz. A felhasználók ezzel az alkalmazással küldhetnek és fogadhatnak üzeneteket, hívhatnak, és megoszthatnak fájlokat. A Slack webalapú és asztali alkalmazásokkal is rendelkezik Mac, Linux és Windows operációs rendszereken. A Slack asztali alkalmazása Chromium motort és Node.js-t használ a jó minőségű kód megjelenítéséhez.
#2. WordPress asztali alkalmazás
A WordPress a legnagyobb tartalomkezelő rendszer. Az a tény, hogy alapvető kódolási ismeretek nélkül is elindíthat egy webhelyet, sok felhasználót vonzott. A WordPress a böngészőn keresztül, valamint az asztali alkalmazásokon keresztül érhető el Mac, Linux és Windows rendszeren. A megújult WordPress asztal Electron JS-t használ.
#3. WhatsApp asztali alkalmazás
A WhatsApp az egyik legnépszerűbb üzenetküldő alkalmazás a modern világban, mivel több mint 2 milliárd ember használja. A WhatsApp-ot eredetileg mobilalkalmazásnak tervezték, de mára több eszközön is használható platformmá vált. A WhatsApp asztali számítógép az Electron JS-t használja, és elérhető a fő operációs rendszereken.
#4. Visual Studio kód
A Microsoft tulajdonában lévő Visual Studio Code a legnépszerűbb kódszerkesztők közé tartozik. A Visual Studio Code támogatja a HTML-t, a CSS-t és a különféle programozási nyelveken írt kódokat, mint például a JavaScript, a Python, a PHP, a Java és a Ruby, hogy néhányat említsünk. Az Electron JS segítségével létrehozott asztali alkalmazás Windows, Mac és Linux operációs rendszerekhez érhető el.
Tanulási források: Electron JS
#1. Az Electronjs hivatalos dokumentációja
Az Electronjs dokumentációját az Electronjs.org készítette és tartja karban. Megtudhatja, mi az Electron JS, hogyan állíthatja be az első Electron alkalmazást, és hogyan készíthet platformok közötti asztali alkalmazásokat különféle technológiák segítségével. A dokumentáció mindig frissül, amikor fejlesztést vagy új funkciót vezetnek be.
#2. Master Electron: asztali alkalmazások HTML-lel, JavaScripttel és CSS-sel
A Master Electron egy fizetett Udemy tanfolyam, amely bemutatja az Electron JS-t. Megtanulja, hogyan hozhat létre asztali alkalmazásokat különböző operációs rendszerekre, például Macre, Linuxra és Windowsra. A Master Electron tökéletes forrás, ha meg akarja érteni a teljes Electron API folyamatot.
#3. Electron React oktatóanyag
Az Electron React az Udemy fizetős tanfolyama, amely megtanítja a fejlesztőknek, hogyan hozhatnak létre Electron alkalmazásokat a React.js használatával. A React az egyik leghíresebb JavaScript-könyvtár, és a Meta (korábban Facebook) hozta létre.
Becsomagolás
Az Electron JS egy fantasztikus JavaScript-könyvtár asztali alkalmazások létrehozásához a modern világban, ahol a platformok közötti alkalmazásokat is fel kell ölelni. Az a tény, hogy használhat HTML-t, CSS-t és JavaScriptet, azt jelenti, hogy a fejlesztőknek nem kell új technológiai halmokat megtanulniuk az ilyen alkalmazások létrehozásához. A nagy és támogató közösség jelenléte is plusz, hiszen mindig garantált a támogatás.
Felfedezhet néhány legjobb JavaScript-keretrendszert is, hogy rövidebb idő alatt modern alkalmazást készítsen.