Phenquestions
Ovaj će članak obuhvatiti vodič za instaliranje Electrona i stvaranje jednostavne "Hello World" Electron aplikacije u Linuxu.
O Electronu
Electron je okvir za razvoj aplikacija koji se koristi za stvaranje višeplatformnih desktop aplikacija pomoću web tehnologija u samostalnom web pregledniku. Također pruža API-je specifične za operativni sustav i robustan sustav pakiranja za lakšu distribuciju aplikacija. Tipična aplikacija Electron zahtijeva tri stvari: Node.js runtime, samostalni preglednik zasnovan na Chromiumu koji dolazi s API-jevima specifičnim za Electron i OS.
Instalirajte Node.js
Možete instalirati Node.js i “npm” upravitelj paketa pokretanjem sljedeće naredbe u Ubuntuu:
$ sudo apt instaliraj nodejs npmTe pakete možete instalirati u druge Linux distribucije iz upravitelja paketa. Alternativno, preuzmite službene binarne datoteke dostupne na Nodeu.js web mjesto.
Stvorite novi čvor.js Projekt
Nakon što instalirate Node.js i “npm”, stvorite novi projekt pod nazivom “HelloWorld” izvođenjem sljedećih naredbi:
$ mkdir HelloWorld$ cd HelloWorld
Zatim pokrenite terminal u direktoriju “HelloWorld” i pokrenite donju naredbu za inicijalizaciju novog paketa:
$ npm initProđite kroz interaktivni čarobnjak u terminalu i unesite imena i vrijednosti po potrebi.
Pričekajte da instalacija završi. Sada biste trebali imati “paket.json “u direktoriju„ HelloWorld “. Imati “paket.json ”u vašem direktoriju projekta olakšava konfiguriranje parametara projekta i čini projekt prijenosnim radi lakše dijeljenja.
Paket.json ”datoteka bi trebala imati unos poput ovog:
"main": "indeks.js ""Indeks.js “gdje bi se nalazila sva logika vašeg glavnog programa. Možete stvoriti dodatni “.js ",".html "i".css ”datoteke prema vašim potrebama. U svrhu programa "HelloWorld" objašnjenog u ovom vodiču, naredba u nastavku stvorit će tri potrebne datoteke:
$ dodirni indeks.js indeks.html indeks.cssInstalirajte Electron
Electron možete instalirati u svoj direktorij projekta pokretanjem naredbe u nastavku:
$ npm instaliraj electron --save-devPričekajte da instalacija završi. Electron će se sada dodati vašem projektu kao ovisnost i trebali biste vidjeti mapu "node_modules" u direktoriju vašeg projekta. Instaliranje Electrona kao ovisnosti o projektu preporučeni je način instaliranja Electrona prema službenoj Electron dokumentaciji. Međutim, ako želite instalirati Electron globalno na svoj sustav, možete upotrijebiti naredbu spomenutu u nastavku:
$ npm instaliraj electron -gDodajte sljedeći redak u odjeljak "skripte" u "paketu".json ”za završetak postavljanja Electrona:
"start": "elektron ."Stvorite glavnu aplikaciju
Otvorite “indeks.js ”u uređivaču teksta po vašem izboru i dodajte mu sljedeći kod:
const aplikacija, BrowserWindow = zahtijeva ('elektron');funkcija createWindow ()
const window = novi BrowserWindow (
širina: 1600,
visina: 900,
webPreferences:
nodeIntegration: true
);
prozor.loadFile ('indeks.html ');
app.whenReady ().zatim (createWindow);
Otvorite “indeks.html ”u svoj omiljeni uređivač teksta i u njega unesite sljedeći kôd:
Pozdrav svijete !!
Javascript kôd prilično je objašnjiv. Prva linija uvozi potrebne elektronske module potrebne za rad aplikacije. Zatim stvorite novi prozor samostalnog preglednika koji dolazi s Electronom i učitajte indeks.html ”u njemu. Oznaka u indeksu.html ”datoteka stvara novi odlomak„ Hello World !!"Zamotan u"
”Oznaka. Također uključuje referentnu poveznicu na „indeks.css ”datoteka tablice stilova korištena kasnije u članku.
Pokrenite svoju aplikaciju Electron
Pokrenite naredbu u nastavku da biste pokrenuli svoju aplikaciju Electron:
$ npm početakAko ste do sada pravilno slijedili upute, trebali biste dobiti novi prozor sličan ovome:
Otvorite “indeks.css “i dodajte donji kod da biste promijenili boju„ Hello World !!”Niz.
boja: crvena;
Ponovno pokrenite sljedeću naredbu da biste vidjeli CSS stil primijenjen na “Hello World !!”Niz.
$ npm početak
Sada imate najmanji minimum potrebnih datoteka za pokretanje osnovne aplikacije Electron. Imate “indeks.js "za pisanje programske logike," indeks.html "za dodavanje HTML oznaka i" indeksa.css “za oblikovanje različitih elemenata. Imate i „paket.json “i mapa„ node_modules “koja sadrži potrebne ovisnosti i module.
Paket Elektronska primjena
Možete upotrijebiti Electron Forge za pakiranje vaše prijave, kako preporučuje službena Electron dokumentacija.
Pokrenite naredbu u nastavku da biste dodali Electron Forge u svoj projekt:
$ npx @ electron-forge / cli @ najnoviji uvozTrebali biste vidjeti neke rezultate poput ovog:
✔ Provjera vašeg sustava✔ Inicijalizacija Git spremišta
✔ Pisanje modificiranog paketa.json datoteku
✔ Instaliranje ovisnosti
✔ Pisanje modificiranog paketa.json datoteku
✔ Učvršćivanje .gitignore
POKUŠALI smo pretvoriti vašu aplikaciju u format koji razumje electron-forge.
Hvala što upotrebljavate "electron-forge"!!!
Pregledajte „paket.json “i uredite ili uklonite unose iz odjeljaka„ tvorci “prema vašim potrebama. Na primjer, ako ne želite graditi "RPM" datoteku, uklonite unos vezan uz izgradnju "RPM" paketa.
Pokrenite sljedeću naredbu za izgradnju programskog paketa:
$ npm pokreni makeTrebali biste dobiti neke slične rezultate:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> izrada elektrona
✔ Provjera vašeg sustava
✔ Rješavanje konfiguracije Forge
Moramo spakirati vašu prijavu prije nego što je uspijemo podnijeti
✔ Priprema za prijavu paketa za arch: x64
✔ Priprema izvornih ovisnosti
✔ Primjena pakiranja
Izrada za sljedeće ciljeve: deb
✔ Izrada za cilj: deb - Na platformi: linux - Za arch: x64
Uredio sam „paket.json “za izgradnju samo paketa„ DEB “. Izgrađene pakete možete pronaći u mapi „out“ koja se nalazi unutar direktorija vašeg projekta.
Zaključak
Electron je izvrstan za stvaranje višeplatformskih aplikacija temeljenih na jednoj bazi kodova s manjim promjenama specifičnim za OS. Ima nekih vlastitih problema, najvažniji od njih je potrošnja resursa. Budući da se sve prikazuje u samostalnom pregledniku, a novi prozor preglednika pokreće se sa svakom Electronovom aplikacijom, ove aplikacije mogu zahtijevati puno resursa u usporedbi s drugim aplikacijama koje koriste matične alate za razvoj posebnih OS-a.
