Byg Kraftfulde Desktop-Apps med Electron og Web

Har du nogensinde ønsket at udgive din eksisterende webapplikation som en desktop- eller mobilapp? I dagens digitale landskab er der et væld af muligheder for webudviklere, der ønsker at udvide deres rækkevidde ud over browseren. Blandt de mest populære og effektive værktøjer finder vi Electron, en robust ramme, der gør det muligt at transformere webapps til fuldt funktionsdygtige desktop-applikationer. Denne artikel vil udforske Electrons kernefunktionalitet, dets dybe integration med Node.js, og hvordan det sammenlignes med løsninger som Capacitor til mobiludvikling. Vi vil også gennemgå en detaljeret guide til, hvordan du bygger og afvikler en app ved hjælp af Electron, Angular, Ionic og Capacitor, hvilket giver dig en komplet forståelse af cross-platform udvikling.

Electron har revolutioneret måden, hvorpå udviklere tænker på desktop-applikationer. Ved at udnytte de velkendte webteknologier – HTML, CSS og JavaScript – kan udviklere skabe komplekse og native-lignende apps, der kører problemfrit på tværs af Windows, macOS og Linux. Dette fjerner behovet for at lære platformspecifikke sprog som C++ eller Swift, hvilket dramatisk reducerer udviklingstiden og omkostningerne. Ideen er simpel, men kraftfuld: Hvis du kan bygge en webapp, kan du bygge en desktop-app.

Hvad er Electron, og hvordan fungerer det?

I sin kerne er Electron en runtime-miljø, der tillader udviklere at pakke webapplikationer og køre dem som desktop-applikationer. Det opnår dette ved at kombinere Googles Chromium-rendering-engine (den samme som bruges i Chrome-browseren) med Node.js runtime. Forestil dig det som en mini-webbrowser, der er bundtet med din applikation og har adgang til operativsystemets ressourcer.

Når en Electron-app startes, åbner den et Chromium-baseret "webview"-vindue, som render din HTML, CSS og JavaScript, præcis som en almindelig webbrowser ville gøre. Den afgørende forskel er dog, at dette "webview" er forbundet til et Node.js-miljø, der kører uden for browserens sandkasse. Denne Node.js-proces giver din webapplikation adgang til filsystemet, netværksgrænseflader, operativsystemets notifikationer og andre native-funktioner, som normalt er utilgængelige for en standard webapplikation, der kører i en browser.

Dette design betyder, at du kan bruge alle de webteknologier og frameworks, du allerede kender og elsker – React, Angular, Vue, Tailwind, Material UI osv. – til at bygge brugergrænsefladen. Samtidig kan du udnytte Node.js's rige økosystem af pakker (NPM) til at håndtere backend-logik, datahåndtering og interaktion med operativsystemet. Denne kombination af kendte webstandarder og kraftfuld native-adgang er grunden til, at Electron er blevet et så populært valg for udvikling af cross-platform desktop-applikationer. Mange populære apps, som du sandsynligvis bruger dagligt, er bygget med Electron, herunder Slack og VS Code.

Electron og Node.js: Et Kraftfuldt Par

For at forstå Electron fuldt ud er det afgørende at gribe fat i den symbiotiske relation mellem Electron og Node.js. Electron betyder i bund og grund, at et "webview" (baseret på Chromium) er forbundet til JavaScript, der kører udenfor dette "webview". Og dette JavaScript er specifikt Node.js. Dette er kernen i Electrons funktionalitet.

Inde i et "webview" kan vi altid bruge JavaScript, præcis som i en almindelig browser. Men begrænsningen for en standard webapp er, at den er isoleret fra det underliggende operativsystem af sikkerhedsmæssige årsager. Her kommer Node.js ind i billedet. Når Electron starter, kører det en hovedproces, der er et Node.js-miljø. Denne hovedproces kan oprette "webview"-vinduer (renderprocesser), og den fungerer som en bro mellem webindholdet og operativsystemet.

Via Node.js-processen kan din Electron-app udføre opgaver som:

• Adgang til filsystemet (læse/skrive filer).
• Interaktion med netværk på et lavere niveau.
• Bruge native dialogbokse (f.eks. filåbningsdialoger).
• Oprette og administrere applikationsmenuer.
• Håndtere operativsystemets notifikationer.

Forestil dig, at du ønsker at gemme en fil, som brugeren har oprettet i din webbaserede editor. I en almindelig browser ville dette kræve en server-side-komponent eller begrænsede browser-API'er. Med Electron og Node.js kan du direkte bruge Node.js's fs modul til at gemme filen på brugerens harddisk, præcis som en traditionel desktop-applikation ville gøre. Denne direkte adgang til systemressourcer er det, der adskiller Electron-apps fra almindelige webapps og giver dem en native følelse og funktionalitet.

Det er værd at bemærke, at denne forbindelse er parallel med andre teknologier. For eksempel er Chromium "webview" forbundet til Python i "CEF Python". På Android er det sædvanlige "webview" (også baseret på Chromium) forbundet til en Java VM. Hvis man vil have et Android "webview" forbundet til JavaScript, kan det gøres via Java VM, eller ved at bruge løsninger som nodejs-mobile-cordova, eller ved selv at bygge "webview" fra Chromium uden Java VM involvering. Dette understreger, at Electrons model med at forbinde et "webview" til en ekstern JavaScript (Node.js) runtime er en velprøvet arkitektur for cross-platform applikationer.

Capacitor: "Electron til Mobil"

Mens Electron er en massivt populær løsning til at bygge cross-platform desktop-applikationer, opstår spørgsmålet ofte: "Hvad er analogien til Electron, men for mobilapps?" Svaret er Capacitor.

Ligesom Electron tager Capacitor en standard webapp, der kører i browseren, og udvider den med adgang til kraftfulde native API'er og native UI (som kamera og filsystem). Disse API'er fungerer på iOS, Android, Web og endda Electron. Den primære forskel ligger i, hvordan de håndterer "webview"-komponenten.

Hvor Electron bundter et "webview" gennem Chromium direkte ind i applikationen, bruger Capacitor de standard indlejrede "Web View" native-kontroller, der er tilgængelige på iOS og Android. Dette betyder, at Capacitor ikke lider af de samme "bloat"-problemer, som Electron kan gøre, da det ikke behøver at inkludere en hel Chromium-instans med hver app. Resultatet er, at Capacitor er en slags "Electron til Mobil", der tilbyder en lettere og mere integreret oplevelse på mobile platforme.

For webudviklere er den korteste vej til at bygge en mobilapp ofte via Capacitor. Det kræver ikke, at du skriver kode specifikt til hver platform, i modsætning til React Native eller Flutter, som abstraherer over systemets UI-kontroller og API'er for at give en "web-lignende" oplevelse, snarere end et sandt webmiljø. Med Capacitor kan du genbruge din eksisterende webkode og biblioteker direkte, hvilket gør overgangen fra web til mobil utrolig effektiv.

Et eksempel på dette er brugen af Ionic Framework med React for en native-kvalitets mobil brugerflade, og Capacitor til at implementere den native på iOS, Android og web. Koden forbliver en almindelig React-app, der blot bruger Ionic Framework til UI-komponenter. Ved at køre nogle Capacitor-kommandoer kan appen pakkes og køres direkte i Xcode (for iOS) eller Android Studio (for Android).

Capacitor leveres også med et JS-modul, @capacitor/core, der giver en konsistent, cross-platform tilgang til at få adgang til enhedsfunktionalitet. For eksempel kan du bruge den samme kode til at få adgang til Filesystem API på iOS, Android, Web og Electron:

import {
 Plugins,
 FilesystemDirectory,
 FilesystemEncoding
} from '@capacitor/core';
const { Filesystem } = Plugins;

async fileWrite() {
 try {
 const result = await Filesystem.writeFile({
 path: 'secrets/text.txt',
 data: "This is a test",
 directory: FilesystemDirectory.Documents,
 encoding: FilesystemEncoding.UTF8
 })
 console.log('Wrote file', result);
 } catch(e) {
 console.error('Unable to write file', e);
 }
}

Denne kode demonstrerer, hvordan Capacitor muliggør en ægte "skriv én gang, kør overalt"-strategi for native enhedsfunktionalitet, hvilket er en game-changer for cross-platform udvikling.

Sådan Afvikler du en App med Electron (med Ionic/Angular/Capacitor)

At bygge og afvikle en cross-platform app, der spænder over mobil og desktop ved hjælp af Ionic, Angular, Capacitor og Electron, er en strømlinet proces. Her er en detaljeret guide til alle de nødvendige trin:

Forudsætninger

Før vi begynder, er det vigtigt at have de nødvendige værktøjer installeret på din computer:

• Node.js og Node Package Manager (NPM): Disse er afgørende for at køre de fleste moderne JavaScript-udviklingsværktøjer. Du kan downloade dem fra den officielle Node.js hjemmeside.
• SDK'er til mobiludvikling: For at integrere din Angular-app med iOS og Android skal du have de tilsvarende Software Development Kits (SDK'er) installeret.
• Til iOS skal du bruge Xcode (hvilket betyder, at du skal arbejde på en Mac).
• Til Android skal du bruge Android Studio.

Trin 1: Installer Ionic CLI

Det første skridt er at installere Ionic Command Line Interface (CLI), et værktøj, der giver dig mulighed for at oprette og administrere Ionic-projekter fra kommandolinjen. Åbn et terminalvindue og kør følgende kommando:

npm install -g @ionic/cli

Trin 2: Opret et Nyt Ionic Angular Projekt

Når Ionic CLI er installeret, kan du bruge det til at oprette et nyt Ionic-aktiveret Angular-projekt. Kør denne kommando i din terminal:

ionic start myAppName tabs --type=angular

Denne kommando vil oprette et nyt Angular-projekt med Ionic, navnet "myAppName" og "tabs" starter-skabelonen, hvilket giver dig en grundlæggende app-struktur med navigationsfaner.

Trin 3: Tilføj Capacitor til Projektet

Capacitor vil give din Angular-app adgang til native API'er på iOS og Android. For at tilføje Capacitor til dit Angular-projekt skal du køre følgende kommando i din terminal:

npm install @capacitor/cli @capacitor/core
npx cap init myAppName com.example.myapp

Den første kommando installerer Capacitor CLI og kernepakken. Den anden kommando initialiserer Capacitor i dit projekt, opretter en capacitor.config.json fil og indstiller et app-navn og et pakke-ID.

Trin 4: Integrer med iOS, Android og Electron

Forudsat at du har de nødvendige mobile SDK'er installeret, kan du nu integrere disse i dit projekt.

Integrer med iOS

For at bygge din Ionic Angular-app til iOS skal du køre følgende kommandoer i din terminal:

npx cap add ios
npx cap open ios

Den første kommando tilføjer iOS-platformen til dit Capacitor-projekt, hvilket skaber et Xcode-projekt. Den anden kommando åbner Xcode, hvor du kan bygge og køre din app på en simulator eller en fysisk enhed.

Integrer med Android

For at bygge din Ionic Angular-app til Android skal du køre følgende kommandoer i din terminal:

npx cap add android
npx cap open android

Tilsvarende tilføjer den første kommando Android-platformen og opretter et Android Studio-projekt. Den anden kommando åbner Android Studio, hvorfra du kan køre og debugge din app på en emulator eller en Android-enhed.

Integrer med Electron

For at kunne køre din Ionic Angular-app på et desktop-operativsystem skal du integrere den med Electron. Dette opnås ved at bruge pakken @capacitor-community/electron, som er et community-vedligeholdt Electron-plugin til Capacitor. Det er vigtigt at bemærke, at dette er et community-vedligeholdt pakke og muligvis ikke er lige så stabil eller funktionsrig som officielle Capacitor-plugins. Grundig test anbefales, før implementering i produktion.

For at installere plugin'et i din applikation skal du køre følgende kommando i terminalen:

npm install @capacitor-community/electron

Du skal også registrere plugin'et i din capacitor.config.json fil ved at tilføje det til plugins-array'et:

{
 "plugins": {
 "Electron": {
 "path": "./node_modules/@capacitor-community/electron"
 }
 }
}

Derefter kan du bruge følgende kommando til at tilføje Electron-platformen til dit projekt:

npx cap add electron

For at køre appen på Electron kan du bruge kommandoen:

npx cap open electron

Dette vil åbne Electron-udviklingsmiljøet, hvor du kan køre appen og foretage fejlfinding. Med denne Electron-understøttelse og Capacitor-understøttelse for iOS og Android er du i stand til at levere en langt mere omfattende løsning til dine slutbrugere og øge din apps rækkevidde.

Fejlfinding på iOS, Android og Desktop

Når din Ionic Angular-app er integreret med iOS og Android ved hjælp af Capacitor, kan du bruge standard fejlfindingsværktøjer til at debugge din app på hver mobilplatform.

For iOS:

1. Åbn dit Xcode-projekt og vælg "myAppName"-målet.
2. Vælg "myAppName"-målet og gå til "Signing & Capabilities".
3. Vælg dit udviklingsteam, og tryk derefter på "Run" for at starte fejlfinding på en iOS-simulator eller en iOS-enhed.

For Android:

1. Åbn dit Android Studio-projekt og vælg "myAppName"-målet.
2. Vælg "myAppName"-målet og tryk på "Run"-knappen for at starte fejlfinding på en Android-emulator eller en Android-enhed.

Derudover kan du også bruge browserens udviklerværktøjer til at debugge din app, mens den kører på enheden. For at gøre dette kan du bruge npx cap serve kommandoen til at starte en lokal udviklingsserver for din app. Derefter kan du oprette forbindelse til denne server fra din enhed ved hjælp af browserens udviklerværktøjer. Sørg for, at din enhed og din computer er på det samme netværk, og brug computerens IP-adresse til at oprette forbindelse.

For Electron:

Når du kører npx cap open electron, åbnes appen i et Electron-vindue. Du kan derefter bruge Chromiums indbyggede udviklerværktøjer (typisk ved at trykke F12 eller Cmd+Option+I på macOS) til at inspicere HTML, CSS, JavaScript og debugge din app, præcis som du ville gøre med en webapp i en browser. Dette giver en velkendt og effektiv fejlfindingsoplevelse for webudviklere.

Hvem bruger Capacitor (og hvorfor det er relevant for Electron)

Capacitor bliver brugt til at drive store apps i dag. Virksomheder som Burger King, Popeyes og BBC (som har skrevet en fremragende artikel om deres brug af Capacitor til at bygge universelle, web-native apps) bruger Capacitor til at bygge apps på tværs af iOS, Android, Web og Desktop med én kodebase og standard webteknologi. Capacitor er også det nye native fundament for Ionic Framework, som driver over 15% af alle apps i app-butikken i dag.

Denne udbredte anvendelse af Capacitor understreger pointen om, at webteknologier er mere end i stand til at levere højtydende og funktionsrige native-applikationer. For Electron-udviklere betyder dette, at den viden og de færdigheder, de opbygger med webteknologier og Node.js, er direkte overførbare til mobilverdenen via Capacitor. Det skaber et sammenhængende økosystem, hvor udviklere kan maksimere kode-genbrug og produktivitet på tværs af alle platforme.

Ofte Stillede Spørgsmål

Kan Electron-apps bygges med Node.js?

Ja, absolut! Node.js er en fundamental komponent i Electron. Electron forbinder et Chromium "webview" til en Node.js-proces, der kører udenfor "webview"'et. Denne Node.js-proces giver din webapplikation adgang til operativsystemets API'er og ressourcer, hvilket gør det muligt for Electron-apps at fungere som fuldgyldige desktop-applikationer. Uden Node.js ville Electron-apps blot være browsere, der viser lokalt indhold uden systemadgang.

Hvordan gemmer Electron enhedstilladelser?

Information om, hvordan Electron specifikt gemmer enhedstilladelser (f.eks. adgang til kamera, mikrofon, filsystem) er ikke detaljeret i den angivne tekst. Generelt håndterer Electron-applikationer enhedstilladelser ved at interagere med operativsystemets indbyggede tilladelsessystemer. Når en Electron-app anmoder om adgang til en ressource (f.eks. mikrofonen), vil operativsystemet (Windows, macOS, Linux) typisk vise en prompt til brugeren, der beder om godkendelse. Selve lagringen af disse tilladelser er en funktion af operativsystemet, ikke en intern Electron-mekanisme, der er beskrevet her. Electron fungerer som en mellemmand, der formidler anmodningen til OS'et.

Hvad er forskellen mellem Electron og Capacitor?

Selvom både Electron og Capacitor gør det muligt at bygge cross-platform apps med webteknologier, er der afgørende forskelle:

• Målgruppe: Electron er primært designet til desktop-applikationer (Windows, macOS, Linux), mens Capacitor er fokuseret på mobile applikationer (iOS, Android), men understøtter også web og Electron.
• Webview-håndtering: Electron bundter sin egen Chromium "webview" med hver app, hvilket kan resultere i større filstørrelser ("bloat"). Capacitor bruger de native "Web View"-komponenter, der allerede er indbygget i iOS- og Android-operativsystemerne, hvilket typisk resulterer i mindre app-størrelser.
• Native Adgang: Begge giver adgang til native API'er, men deres implementering adskiller sig. Electron bruger Node.js's adgang til operativsystemet, mens Capacitor bruger et sæt standardiserede JavaScript-API'er, der oversættes til native opkald på de respektive mobilplatforme.
• Kompleksitet: For webudviklere, der ønsker at springe direkte ud i mobiludvikling med minimal ny læring, kan Capacitor føles mere "native-lvenlig" i sin integration med mobil-SDK'er.

Kort sagt kan man betragte Capacitor som "Electron til mobil", der tilbyder en optimeret tilgang til at levere webapps som native mobilapps.

Er Electron godt til alle desktop-apps?

Electron er fremragende til mange typer desktop-apps, især dem, der drager fordel af en rig brugergrænseflade og webudviklingshastighed. Det er ideelt til produktivitetsværktøjer, chat-applikationer, kodeeditorer og lignende. Dog er det måske ikke det bedste valg for yderst ressourcekrævende applikationer som tunge spil eller videoredigeringssoftware, hvor absolut native-ydelse er kritisk. Electron-apps kan også have en større hukommelsesforbrug end traditionelle native-apps på grund af den indlejrede Chromium-browser.

Konklusion

Med hjælp fra Capacitor, Ionic og Electron kan webudviklere nemt integrere deres Angular-apps med iOS, Android og desktop-operativsystemer og debugge dem ved hjælp af standard fejlfindingsværktøjer. Dette giver mulighed for en strømlinet udviklingsproces og hurtigere tid til markedet for dine mobil- og desktop-apps. Evnen til at genbruge en enkelt kodebase på tværs af så mange platforme er en utrolig fordel, der sparer tid og ressourcer. Uanset om du sigter mod at bygge en simpel desktop-app eller en kompleks cross-platform løsning, tilbyder Electron (og dets mobile modstykke, Capacitor) en kraftfuld og fleksibel vej frem for moderne app-udviklere.

Hvis du vil læse andre artikler, der ligner Byg Kraftfulde Desktop-Apps med Electron og Web, kan du besøge kategorien Software.