Bygg skrivebordsapper med Electron.js: Den komplette guiden!

by
Tweet
Share
Share
Pin
0 Shares

JavaScript er et av de mest brukte programmeringsspråkene i dag. Populariteten skyldes i stor grad at det er fleksibelt og kan anvendes både til backend- og frontend-utvikling.

JavaScript sin funksjonalitet kan utvides ytterligere ved hjelp av diverse biblioteker og rammeverk. Dette gjør det mulig å skape enda mer komplekse løsninger utover det som er mulig med vanlig, standard JavaScript.

Electron.js er et kraftfullt, åpent rammeverk som gir webutviklere muligheten til å lage skrivebordsapplikasjoner ved å utnytte sine eksisterende webutviklingsferdigheter. Denne artikkelen introduserer Electron.js og ser nærmere på hvordan du kan bruke det til å realisere dine ideer.

Hva er Electron JS?

Electron JS er et rammeverk som tillater utviklere å bygge skrivebordsapplikasjoner ved hjelp av HTML, CSS og JavaScript. Det er utviklet og vedlikeholdt av GitHub, og er dermed et prosjekt med solid støtte.

Rammeverket kombinerer Node.JS og Chromium, noe som gjør det mulig å bruke én enkelt JavaScript-kodebase til å utvikle applikasjoner for flere plattformer. Dette betyr at applikasjoner kan fungere på Windows, macOS og Linux, uten at man må skrive separate kodebaser for hvert operativsystem.

Ideen bak Electron.js oppstod i januar 2013. Det opprinnelige målet var å lage en tverrplattform tekstredigerer som var basert på JavaScript, HTML og CSS.

Prosjektet startet under navnet Atom Shell og ble gjort til åpen kildekode i 2014. I april 2015 ble det omdøpt til Electron, og det første API-et ble publisert i 2016.

Funksjoner i Electron JS

  • Kompatibilitet med JavaScript-biblioteker og rammeverk: Electron JS er kompatibelt med et bredt spekter av JavaScript-biblioteker og rammeverk. Eksempler inkluderer Vue.js, Angular og React.js. Denne kompatibiliteten forenkler prosessen med å utnytte funksjonaliteten til disse verktøyene når du lager en Electron-app.
  • Gjenbrukbart rammeverk: Det er kostbart å tilpasse seg ulike kunders behov. Electron JS er unikt i sin evne til å brukes for både web- og skrivebordsapplikasjoner, noe som reduserer kostnadene og forenkler utviklingsprosessen. En enkelt kodebase kan brukes på tvers av forskjellige operativsystemer.
  • Tilgang til native APIer: Utviklere har tilgang til de native APIene for de operativsystemene de jobber på. Dette gir muligheten til å lage skrivebordsapplikasjoner med tilgang til lavnivå-funksjonalitet, som for eksempel muligheten til å vise varsler.
  • Støtte for webteknologier: Utviklere trenger ikke å lære et helt nytt programmeringsspråk for å utvikle applikasjoner med Electron JS. Det betyr at dersom du allerede har kunnskap om teknologier du bruker til å lage webapplikasjoner, kan du gjenbruke denne kunnskapen når du utvikler en skrivebordsapp.
  • Forenklet kode- og appadministrasjon: Du trenger ikke lenger separate team for å vedlikeholde apper og kode for forskjellige operativsystemer. Electron JS lar deg bruke den samme kodebasen for Linux, Windows og macOS.
  • Enkel distribusjon: Electron sin pakkebehandling hjelper utviklere å pakke applikasjonene sine i passende format. Dette betyr at du kan publisere en skrivebordsapp for Linux, macOS og Windows fra den samme kodebasen.

Arkitektur i Electron JS

Arkitekturen i Electron er ganske lik den i en moderne nettleser, da den arver multiprosessarkitekturen fra Chromium.

Electron sin arkitektur består av V8 JavaScript Engine, Node.JS og Libchromiumcontent.

  • Node.JS: En åpen kildekode JavaScript-kjøretid som kjører på V8 JavaScript-motoren. Node.JS gir utviklere muligheten til å kjøre JavaScript utenfor et nettleservindu, og lar brukere kjøre rå JavaScript-kode gjennom sitt interaktive skall.
  • Libchromiumcontent: Et Chromium-renderingsbibliotek som er åpen kildekode og vedlikeholdes av Google Chrome. Chrome har et minimalistisk brukergrensesnitt og bruker Blink som layoutmotor og V8 som JavaScript-motor.
  • V8 JavaScript Engine: En åpen kildekode JavaScript-motor som er skrevet i C++ og JavaScript, og utviklet av Google.

#1. Node.js

For å komme i gang med Electron JS, må du ha Node.js installert på din maskin.

Velg riktig Node-versjon basert på operativsystemet du bruker.

Du kan sjekke om Node.js er riktig installert ved å kjøre følgende kommandoer:

node -v
npm -v

Hvis installasjonen er vellykket, vil disse kommandoene vise henholdsvis node- og npm-versjonen.

#2. Kommandolinje

Hvordan du får tilgang til kommandolinjen vil avhenge av operativsystemet ditt.

  • Linux: Avhenger av distribusjonen.
  • Windows: PowerShell eller ledetekst.
  • macOS: Terminal.

Noen kodeeditorer, som Visual Studio Code, har en innebygd terminal.

#3. Kodeeditor

Du trenger en kodeeditor for å skrive Electron JS-koden. Visual Studio Code er et utmerket alternativ.

Hvordan installere Electron JS

Trinn 1: Opprett et node.js-prosjekt.

Bruk disse kommandoene for å starte prosjektet:

mkdir my-electron-app && cd my-electron-app
npm init

`npm init`-kommandoen vil be deg om å fylle ut noen felter, som appens navn, inngangspunkt og beskrivelse.

Du kan bruke mappenavnet som appnavn, men husk å sette inngangspunktet til appen din til `main.js`.

Felter som forfatter og beskrivelse kan ha hvilken som helst verdi. `package.json` vil se omtrent slik ut etter disse trinnene:

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Peter Drury",
"license": "MIT"
}

Trinn 2: Installer Electron

Bruk denne kommandoen:

npm install --save-dev electron

Trinn 3: Legg til «start»-kommandoen i `package.json`

{
"scripts": {
  "start": "electron ."
  }
}

Trinn 4: Start appen

Bruk denne kommandoen for å starte appen i utviklingsmodus:

npm start

Electron JS sin arbeidsprosess

Vi fortsetter å bygge appen fra det oppsettet vi har gjort ovenfor. En Electron-applikasjon har to typer prosesser: hovedprosessen og renderer-prosessen.

Hovedprosessen

Hovedskriptet er inngangspunktet til enhver Electron-app. Appen vil kjøre i et Node.js-miljø. Electron ser etter hovedskriptet i `package.json`-filen du konfigurerte tidligere.

Lag `main.js` i rotmappen for å initialisere hovedskriptet. Du kan gjøre dette manuelt eller ved å bruke denne kommandoen:

touch main.js

Legg til følgende kode i `main.js`:

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();
  }
});

Nettsider i Electron kan lastes fra en ekstern URL eller en lokal HTML-fil. Vi bruker en lokal HTML-fil i dette eksempelet.

Lag en `index.html`-fil i rotmappen. Koden for `index.html` er alltid oppgitt, men du kan bruke denne som utgangspunkt:

<!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>

Renderer prosess

Renderer-prosessen gjengir webinnhold. Forhåndsinnlastede skript inneholder kode som kjøres i en renderer-prosess før webinnholdet begynner å lastes.

Lag en `preload.js`-fil i rotmappen og legg til denne koden:

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])
  }
})

Kjør utviklingsserveren med `npm start`, og resultatet skal se ut som dette:

Eksempler på apper: Electron JS

#1. Slack desktop-app

Slack er et populært verktøy for eksternt samarbeid. Brukere kan sende og motta meldinger, ringe og dele filer gjennom appen. Slack finnes som både nettbasert og skrivebordsapplikasjon for macOS, Linux og Windows. Skrivebordsappen benytter Chromium-motoren og Node.js for å levere kvalitetskode.

#2. WordPress desktop-app

WordPress er det største innholdsstyringssystemet, og mange brukere tiltrekkes av at man kan lage nettsider uten dyp kodekompetanse. WordPress kan brukes via nettleseren, eller via skrivebordsapper for macOS, Linux og Windows. Den fornyede WordPress-skrivebordsappen bruker Electron JS.

#3. WhatsApp desktop-app

WhatsApp er en av de mest populære meldingsappene i verden, med over 2 milliarder brukere. Opprinnelig var WhatsApp en mobilapp, men den er nå tilgjengelig på flere plattformer. WhatsApp sin skrivebordsapp benytter Electron JS og er tilgjengelig for de store operativsystemene.

#4. Visual Studio Code

Visual Studio Code, eid av Microsoft, er en populær kodeeditor. Den støtter HTML, CSS og kode skrevet i forskjellige programmeringsspråk som JavaScript, Python, PHP, Java og Ruby. Skrivebordsappen, som er laget med Electron JS, er tilgjengelig for Windows, macOS og Linux.

Læringsressurser: Electron JS

#1. Electronjs offisielle dokumentasjon

Electronjs sin dokumentasjon er opprettet og vedlikeholdt av Electronjs.org. Her lærer du hva Electron JS er, hvordan du setter opp din første Electron-app og hvordan du bygger skrivebordsapper for flere plattformer ved å bruke forskjellige teknologier. Dokumentasjonen oppdateres jevnlig ved nye forbedringer eller funksjoner.

#2. Master Electron: Desktop-apper med HTML, JavaScript og CSS

Master Electron er et betalt kurs på Udemy som introduserer deg til Electron JS. Du lærer hvordan du lager skrivebordsapper for forskjellige operativsystemer, som macOS, Linux og Windows. Kurset er også en god ressurs dersom du ønsker å lære hele Electron API-prosessen.

#3. Electron React-veiledning

Electron React er et betalt kurs på Udemy som lærer utviklere hvordan man lager Electron-apper ved hjelp av React.js. React er et av de mest kjente JavaScript-bibliotekene, og er utviklet av Meta (tidligere Facebook).

Oppsummering

Electron JS er et fantastisk JavaScript-bibliotek for å lage skrivebordsapper i dagens verden, hvor det er viktig at apper fungerer på tvers av plattformer. Det faktum at du kan bruke HTML, CSS og JavaScript betyr at utviklere ikke trenger å lære nye teknologier for å lage slike apper. I tillegg finnes det et stort og hjelpsomt fellesskap som gir støtte når du trenger det.

Du kan også se nærmere på noen av de beste JavaScript-rammeverkene for å bygge moderne applikasjoner raskere.