Sett opp elektron og opprette Hello World -applikasjon i Linux

Denne artikkelen vil dekke en guide om installasjon av elektron og lage en enkel "Hello World" elektronapplikasjon i Linux.

Om elektron

Electron er et rammeverk for applikasjonsutvikling som brukes til å lage stasjonære applikasjoner på tvers av plattformer ved hjelp av webteknologier i en frittstående nettleser. Det gir også operativsystemspesifikke API -er og et robust emballasjesystem for enklere distribusjon av applikasjoner. En typisk elektronapplikasjon krever tre ting å fungere: node.JS Runtime, en frittstående krombasert nettleser som kommer med elektron og OS -spesifikke API -er.

Installer node.JS

Du kan installere node.JS og "NPM" -pakkeleder ved å kjøre følgende kommando i Ubuntu:

$ sudo apt install nodejs npm

Du kan installere disse pakkene i andre Linux -distribusjoner fra pakkesjefen. Alternativt kan du laste ned offisielle binære filer tilgjengelig på Node.JS nettsted.

Lag en ny node.JS -prosjekt

Når du har installert Node.JS og “NPM”, oppretter et nytt prosjekt som heter “Helloworld” ved å kjøre følgende kommandoer etter hverandre:

$ mkdir helloworld
$ CD Helloworld

Deretter skyter du opp en terminal i "Helloworld" -katalogen og kjører kommandoen nedenfor for å initialisere en ny pakke:

$ npm init

Gå gjennom den interaktive veiviseren i terminalen og skriv inn navn og verdier etter behov.

Vent til installasjonen skal fullføre. Du skal nå ha en "pakke.JSON ”-fil i“ HelloWorld ”-katalogen. Har en "pakke.JSON ”-filen i prosjektkatalogen gjør det lettere å konfigurere prosjektparametere og gjør prosjektet bærbart for enklere delbarhet.

Pakken.JSON ”-filen skal ha en oppføring som denne:

"Main": "Indeks.JS "

“Indeks.JS ”er der all logikk for hovedprogrammet ditt vil være lokalisert. Du kan opprette flere “.JS ”,“.html ”og“.CSS ”-filer i henhold til dine behov. For "Helloworld" -programmet som er forklart i denne guiden, vil kommandoen nedenfor lage tre nødvendige filer:

$ berøringsindeks.JS -indeks.HTML -indeks.CSS

Installer elektron

Du kan installere Electron i prosjektkatalogen din ved å kjøre kommandoen nedenfor:

$ npm installer elektron-spare-dev

Vent til installasjonen skal fullføre. Electron vil nå bli lagt til prosjektet ditt som en avhengighet, og du bør se en "Node_Modules" -mappe i prosjektkatalogen. Installere elektron som en avhengighetsavhengighet er den anbefalte måten å installere elektron i henhold til den offisielle elektrondokumentasjonen. Imidlertid, hvis du vil installere elektron globalt på systemet ditt, kan du bruke kommandoen som er nevnt nedenfor:

$ npm installer elektron -g

Legg til følgende linje i "skript" -delen i "Pakken.JSON ”-fil for å fullføre elektronoppsett:

"Start": "Elektron .""

Lag hovedapplikasjon

Åpne “Indeks.JS ”-fil i Text Editor etter eget valg og legg til følgende kode i den:

const app, nettleserwindow = krever ('elektron');
funksjon CreateWindow ()
const windows = new BrowserWindow (
Bredde: 1600,
Høyde: 900,
webpreferences:
NodeIntegration: True

);
vindu.LoadFile ('Indeks.html ');

app.Når klar ().deretter (CreateWindow);

Åpne “Indeks.HTML ”-filen i din favoritt tekstredigerer, og legg følgende kode i den:

Hei Verden !!

JavaScript -koden er ganske selvforklarende. Den første linjen importerer nødvendige elektronmoduler som trengs for at appen skal fungere. Deretter oppretter du et nytt vindu i den frittstående nettleseren som følger med elektron og laster inn “Indeksen.html ”fil i den. Markeringen i “indeksen.HTML ”-fil oppretter et nytt avsnitt“ Hello World !!”Innpakket i“

" stikkord. Det inkluderer også en referanselink til “Indeks.CSS ”Stylesheet -fil som ble brukt senere i artikkelen.

Kjør elektronapplikasjonen din

Kjør kommandoen nedenfor for å starte elektron -appen din:

$ npm start

Hvis du har fulgt instruksjonene riktig så langt, bør du få et nytt vindu som ligner på dette:

Åpne “Indeks.CSS ”-filen og legg til koden nedenfor for å endre fargen på“ Hello World !!”Streng.

#Hworld
fargen rød;

Kjør følgende kommando igjen for å se CSS -stil brukt på “Hello World !!”Streng.

$ npm start

Du har nå det blotte minimumssettet med nødvendige filer for å kjøre en grunnleggende elektronapplikasjon. Du har “indeks.JS ”for å skrive programlogikk,“ Indeks.HTML ”for å legge til HTML -markering og“ Indeks.CSS ”for styling av forskjellige elementer. Du har også en "pakke.JSON ”-fil og“ Node_Modules ”-mappe som inneholder nødvendige avhengigheter og moduler.

Pakkeelektronapplikasjon

Du kan bruke Electron Forge til å pakke applikasjonen din, som anbefalt av den offisielle elektrondokumentasjonen.

Kjør kommandoen nedenfor for å legge til Electron Forge til prosjektet ditt:

$ npx @electron-rese/cli @siste import

Du bør se noen utdata som dette:

✔ Kontrollere systemet ditt
✔ Initialisering av Git Repository
✔ Skrive modifisert pakke.JSON -fil
✔ Installere avhengigheter
✔ Skrive modifisert pakke.JSON -fil
✔ Fixing .Gitignore
Vi har forsøkt å konvertere appen din til å være i et format som Electron-Forge forstår.
Takk for at du brukte "Electron-Forge"!!!

Gjennomgang “Pakke.JSON ”fil og rediger eller fjerne oppføringer fra“ Makers ”-seksjoner i henhold til dine behov. Hvis du for eksempel ikke vil bygge en "RPM" -fil, må du fjerne oppføring relatert til bygging av "RPM" -pakker.

Kjør følgende kommando for å bygge applikasjonspakken:

$ npm run make

Du bør få noe utgang som ligner på dette:

> [email protected] Make/Home/NIT/Helloworld
> Elektron-Forge Make
✔ Kontrollere systemet ditt
✔ Løsing Forge Config
Vi må pakke søknaden din før vi kan lage den
✔ Forberedelse på å pakke søknad for Arch: x64
✔ Forbereder innfødte avhengigheter
✔ Emballasjeapplikasjon
Making For følgende mål: Deb
✔ Making for Target: Deb - På plattform: Linux - for Arch: x64

Jeg redigerte “Pakken.JSON ”-fil for bare å bygge" Deb "-pakken. Du kan finne bygde pakker i "out" -mappen som ligger i prosjektkatalogen.

Konklusjon

Electron er flott for å lage applikasjoner på tvers av plattformer basert på en enkelt kodebase med mindre OS-spesifikke endringer. Det har noen egne problemer, viktigste av dem er ressursforbruk. Siden alt er gjengitt i en frittstående nettleser og et nytt nettleservindu blir lansert med hver elektron -app, kan disse applikasjonene være ressurskrevende sammenlignet med andre applikasjoner ved bruk av Native OS -spesifikke applikasjonsutviklingsverktøysett.