Phenquestions
Tento článek se bude věnovat příručce o instalaci Electronu a vytvoření jednoduché aplikace „Hello World“ Electron v systému Linux.
O společnosti Electron
Electron je rámec pro vývoj aplikací používaný k vytváření desktopových aplikací napříč platformami pomocí webových technologií v samostatném webovém prohlížeči. Poskytuje také API specifická pro operační systém a robustní balicí systém pro snadnější distribuci aplikací. Typická aplikace Electron vyžaduje ke svému fungování tři věci: Uzel.js runtime, samostatný prohlížeč založený na chromu, který je dodáván s API specifickými pro Electron a OS.
Nainstalujte uzel.js
Node můžete nainstalovat.Správce balíčků js a „npm“ spuštěním následujícího příkazu v Ubuntu:
$ sudo apt install nodejs npmTyto balíčky můžete nainstalovat do jiných distribucí systému Linux ze správce balíčků. Případně si stáhněte oficiální binární soubory dostupné na Node.web js.
Vytvořte nový uzel.js projekt
Jakmile nainstalujete Node.js a „npm“, vytvořte nový projekt s názvem „HelloWorld“ spuštěním následujících příkazů za sebou:
$ mkdir HelloWorld$ cd HelloWorld
Dále spusťte terminál v adresáři „HelloWorld“ a spuštěním následujícího příkazu inicializujte nový balíček:
$ npm initProjděte si interaktivního průvodce v terminálu a podle potřeby zadejte jména a hodnoty.
Počkejte na dokončení instalace. Nyní byste měli mít „balíček.soubor json v adresáři „HelloWorld“. Mít „balíček.Soubor json ”v adresáři projektu usnadňuje konfiguraci parametrů projektu a umožňuje přenositelnost projektu pro snazší sdílení.
Balík.Soubor json ”by měl mít takový záznam:
"main": "index.js ""Index.js “je místo, kde by byla umístěna veškerá logika vašeho hlavního programu. Můžete vytvořit další.js “,„.html “a„.css ”soubory podle vašich potřeb. Pro účely programu „HelloWorld“ vysvětleného v této příručce vytvoří následující příkaz tři požadované soubory:
$ dotykový index.index js.html index.cssNainstalujte Electron
Electron můžete nainstalovat do adresáře projektu spuštěním následujícího příkazu:
$ npm instalační elektron - save-devPočkejte na dokončení instalace. Elektron bude nyní přidán do vašeho projektu jako závislost a ve vašem adresáři projektu byste měli vidět složku „node_modules“. Instalace Electronu jako závislosti na projektu je doporučeným způsobem instalace Electronu podle oficiální dokumentace Electronu. Pokud však chcete do svého systému nainstalovat Electron globálně, můžete použít níže uvedený příkaz:
$ npm instalace elektronu -gPřidejte následující řádek do sekce „skripty“ v „balíčku.soubor JSON ”pro dokončení instalace Electron:
"start": "elektron ."Vytvořit hlavní aplikaci
Otevřít „index.soubor js ”v textovém editoru podle vašeho výběru a přidejte do něj následující kód:
const app, BrowserWindow = require ('elektron');funkce createWindow ()
const okno = nové BrowserWindow (
šířka: 1600,
výška: 900,
webPreferences:
nodeIntegration: true
);
okno.loadFile ('index.html ');
aplikace.whenReady ().then (createWindow);
Otevřít „index.html ”ve svém oblíbeném textovém editoru a vložte do něj následující kód:
Ahoj světe !!
Kód javascript je docela vysvětlující. První řádek importuje potřebné elektronové moduly potřebné k tomu, aby aplikace fungovala. Dále vytvoříte nové okno samostatného prohlížeče, který je dodáván s elektronem, a načtěte index.html ”soubor. Značka v „indexu.Soubor html vytvoří nový odstavec „Hello World !!„Zabaleno do“
”. Zahrnuje také referenční odkaz na „index.css ”soubor stylů použitý později v článku.
Spusťte elektronovou aplikaci
Spuštěním následujícího příkazu spusťte aplikaci Electron:
$ npm startPokud jste dosud správně postupovali podle pokynů, měli byste získat nové okno podobné tomuto:
Otevřít „index.css “a přidáním níže uvedeného kódu změníte barvu„ Hello World !!" tětiva.
červená barva;
Spusťte následující příkaz znovu a uvidíte styl CSS aplikovaný na „Hello World !!" tětiva.
$ npm start
Nyní máte minimální sadu požadovaných souborů pro spuštění základní aplikace Electron. Máte „index.js “pro zápis logiky programu,„ index.html “pro přidání značek HTML a„ indexu “.css “pro styling různých prvků. Máte také „balíček.soubor json a složka „node_modules“ obsahující požadované závislosti a moduly.
Balíček elektronových aplikací
K zabalení aplikace můžete použít Electron Forge, jak doporučuje oficiální dokumentace Electron.
Spuštěním následujícího příkazu přidejte do svého projektu Electron Forge:
$ npx @ electron-forge / cli @ nejnovější importMěli byste vidět nějaký výstup, jako je tento:
✔ Kontrola vašeho systému✔ Inicializace úložiště Git
✔ Psaní upraveného balíčku.soubor JSON
✔ Instalace závislostí
✔ Psaní upraveného balíčku.soubor JSON
✔ Upevnění .gitignore
Pokusili jsme se převést vaši aplikaci do formátu, kterému elektronická kovárna rozumí.
Děkujeme, že používáte „elektronovou kovárnu“!!!
Zkontrolovat „balíček“.json ”a upravte nebo odeberte položky z sekcí„ tvůrci “podle svých potřeb. Například pokud nechcete vytvořit soubor „RPM“, odeberte položku související s vytvářením balíčků „RPM“.
Spuštěním následujícího příkazu vytvořte balíček aplikace:
$ npm spuštění značkyMěli byste získat nějaký výstup podobný tomuto:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> značka výroby elektronů
✔ Kontrola vašeho systému
✔ Řešení Forge Config
Než aplikaci stihneme, musíme ji zabalit
✔ Příprava žádosti o balíček pro arch: x64
✔ Příprava nativních závislostí
✔ Balicí aplikace
Tvorba pro následující cíle: deb
✔ Vytvoření pro target: deb - Na platformě: linux - Pro arch: x64
Upravil jsem „balíček.soubor json ”k vytvoření pouze balíčku„ DEB “. Vytvořené balíčky najdete ve složce „out“ umístěné v adresáři projektu.
Závěr
Electron je skvělý pro vytváření aplikací napříč platformami založených na jediné kódové základně s malými změnami specifickými pro OS. Má nějaké vlastní problémy, nejdůležitější z nich je spotřeba zdrojů. Vzhledem k tomu, že je vše vykresleno v samostatném prohlížeči a je spuštěno nové okno prohlížeče s každou aplikací Electron, mohou být tyto aplikace náročné na zdroje ve srovnání s jinými aplikacemi pomocí nativních sad nástrojů pro vývoj aplikací specifických pro OS.
