Configurați Electron și creați aplicația Hello World în Linux

Acest articol va acoperi un ghid despre instalarea Electron și crearea unei aplicații simple „Hello World” Electron în Linux.

Despre Electron

Electron este un cadru de dezvoltare a aplicațiilor utilizat pentru crearea de aplicații desktop multiplataforma folosind tehnologii web într-un browser web independent. De asemenea, oferă API-uri specifice sistemului de operare și un sistem robust de ambalare pentru o distribuție mai ușoară a aplicațiilor. O aplicație tipică Electron necesită trei lucruri pentru a funcționa: Nod.runtime js, un browser independent bazat pe Chromium care vine cu API-uri specifice Electron și OS.

Instalați nodul.js

Puteți instala Node.js și managerul de pachete „npm” executând următoarea comandă în Ubuntu:

$ sudo apt install nodejs npm

Puteți instala aceste pachete în alte distribuții Linux din managerul de pachete. Alternativ, descărcați binare oficiale disponibile pe Node.site-ul js.

Creați un nod nou.js Project

Odată ce ați instalat Node.js și „npm”, creați un nou proiect numit „HelloWorld” executând următoarele comenzi succesiv:

$ mkdir HelloWorld
$ cd HelloWorld

Apoi, porniți un terminal în directorul „HelloWorld” și rulați comanda de mai jos pentru a inițializa un nou pachet:

$ npm init

Parcurgeți expertul interactiv din terminal și introduceți nume și valori după cum este necesar.

Așteptați terminarea instalării. Acum ar trebui să aveți un „pachet.json ”din directorul„ HelloWorld ”. Având un „pachet.fișierul json ”din directorul dvs. de proiect face mai ușoară configurarea parametrilor proiectului și face proiectul portabil pentru facilitarea partajării.

Pachetul.json ”ar trebui să aibă o intrare ca aceasta:

"principal": "index.js "

"Index.js ”este locul în care ar fi localizată toată logica pentru programul dvs. principal. Puteți crea „.js ”,„.html ”și„.css ”în funcție de nevoile dumneavoastră. În scopul programului „HelloWorld” explicat în acest ghid, comanda de mai jos va crea trei fișiere necesare:

$ touch index.js index.index html.css

Instalați Electron

Puteți instala Electron în directorul de proiect executând comanda de mai jos:

$ npm install electron --save-dev

Așteptați finalizarea instalării. Electron va fi acum adăugat la proiectul dvs. ca dependență și ar trebui să vedeți un folder „node_modules” în directorul proiectului. Instalarea Electron ca dependență pe proiect este modalitatea recomandată de instalare a Electron în conformitate cu documentația oficială Electron. Cu toate acestea, dacă doriți să instalați Electron la nivel global pe sistemul dvs., puteți utiliza comanda menționată mai jos:

$ npm instala electron -g

Adăugați următoarea linie în secțiunea „scripturi” din „pachet.json ”pentru a finaliza configurarea Electron:

„start”: „electron ."

Creați aplicația principală

Deschideți „index.js ”în editorul de text la alegere și adăugați următorul cod:

const app, BrowserWindow = require ('electron');
funcția createWindow ()
fereastră const = fereastră Browser nouă (
lățime: 1600,
înălțime: 900,
webPreferences:
nodeIntegration: adevărat

);
fereastră.loadFile ('index.html ');

aplicație.când ești gata().apoi (createWindow);

Deschideți „index.html ”în editorul de text preferat și introduceți următorul cod în el:

Salut Lume !!

Codul javascript este destul de explicativ. Prima linie importă modulele electronice necesare pentru ca aplicația să funcționeze. Apoi, creați o nouă fereastră a browserului independent care vine cu Electron și încărcați „indexul”.html ”din acesta. Marcajul din „index.html ”creează un nou paragraf„ Hello World !!„Înfășurat în„

" etichetă. De asemenea, include un link de referință către „index.css ”fișier de foaie de stil folosit mai târziu în articol.

Rulați aplicația electronică

Rulați comanda de mai jos pentru a lansa aplicația Electron:

$ npm start

Dacă ați urmat corect instrucțiunile până acum, ar trebui să obțineți o nouă fereastră similară cu aceasta:

Deschideți „index.css ”și adăugați codul de mai jos pentru a schimba culoarea„ Hello World !!”Șir.

#hworld
culoarea rosie;

Rulați din nou următoarea comandă pentru a vedea stilul CSS aplicat la „Hello World !!”Șir.

$ npm start

Aveți acum setul minim de fișiere necesare pentru a rula o aplicație de bază Electron. Aveți „index.js ”pentru a scrie logica programului,„ index.html ”pentru adăugarea de markup HTML și„ index.css ”pentru stilizarea diverselor elemente. Aveți și un „pachet.json ”și dosarul„ node_modules ”conținând dependențele și modulele necesare.

Aplicație pachet electron

Puteți utiliza Electron Forge pentru a vă ambala cererea, conform recomandărilor din documentația oficială Electron.

Rulați comanda de mai jos pentru a adăuga Electron Forge la proiectul dvs.:

$ npx @ electron-forge / cli @ ultimul import

Ar trebui să vedeți unele rezultate de genul acesta:

✔ Verificarea sistemului
✔ Inițializarea Git Repository
✔ Scrierea pachetului modificat.fișier json
✔ Instalarea dependențelor
✔ Scrierea pachetului modificat.fișier json
✔ Fixare .gitignore
Am încercat să convertim aplicația dvs. într-un format pe care electron-forge îl înțelege.
Vă mulțumim că ați folosit „electron-forge”!!!

Examinați „pachetul.json ”și editați sau eliminați intrările din secțiunile„ makers ”în funcție de nevoile dvs. De exemplu, dacă nu doriți să creați un fișier „RPM”, eliminați intrarea legată de crearea pachetelor „RPM”.

Rulați următoarea comandă pentru a construi pachetul de aplicații:

$ npm run make

Ar trebui să obțineți o ieșire similară cu aceasta:

> helloworld @ 1.0.0 make / home / nit / HelloWorld
> marca electronică-forjată
✔ Verificarea sistemului
✔ Rezolvarea configurației Forge
Trebuie să vă ambalăm cererea înainte să o putem realiza
✔ Pregătirea pachetului Cerere pentru arch: x64
✔ Pregătirea dependențelor native
✔ Cerere de ambalare
Realizarea pentru următoarele ținte: deb
✔ Realizarea pentru target: deb - Pe platformă: linux - Pentru arch: x64

Am editat „pachetul.json ”pentru a construi doar pachetul„ DEB ”. Puteți găsi pachete construite în folderul „out” situat în directorul proiectului.

Concluzie

Electron este excelent pentru crearea de aplicații multi-platformă bazate pe o singură bază de cod cu modificări minore specifice sistemului de operare. Are unele probleme proprii, cea mai importantă dintre acestea este consumul de resurse. Deoarece totul este redat într-un browser independent și o nouă fereastră de browser este lansată cu fiecare aplicație Electron, aceste aplicații pot consuma resurse în comparație cu alte aplicații folosind seturi de instrumente de dezvoltare de aplicații specifice sistemului de operare nativ.