Utveckling av skrivbordsappar med Electron · Lektion

Er första Electron-applikation

Följ en stegvis guide för att skapa en enkel Electron-applikation med 'Hello World', inklusive grunderna i main- och renderer-processerna.

Lektion 3 av 412 steg

Er första Electron-applikation är en gratis lektion i Utveckling av skrivbordsappar med Electron på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av skrivbordsappar med Electron, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Hej, Electron-världen!

Nu är det dags att bygga ditt första Electron-program — ett enkelt datorprogram som visar "Hello World". Det introducerar de centrala filer som tar webbteknik till datorn.

Konfigurera projektet

Börja med att skapa projektets grundstruktur: skapa en mapp, kör npm init och installera sedan Electron som ett utvecklingsberoende. Kommandona finns nedan.

Huvudprocessen (main.js)

Alla program har en huvudprocess — en Node.js-miljö som styr livscykeln, kommunicerar med operativsystemet och skapar fönster. Den startar i main.js.

main.js: Grundläggande fönsterkonfiguration

I main.js importerar du Electron-moduler och definierar hur ett fönster som ska innehålla ditt webbinnehåll skapas. Prova den grundläggande konfigurationen nedan.

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  // We'll load our HTML file here soon!
}

app.whenReady().then(createWindow);

// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Handle re-activating app on macOS
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Renderingsprocessen (index.html)

Renderingsprocessen är där ditt användargränssnitt finns — i praktiken ett Chromium-fönster som renderar HTML, CSS och JS. Det läses in från index.html.

index.html: Vårt användargränssnitt

Den här index.html-filen innehåller ditt Hello World-meddelande — helt enkelt en vanlig webbsida, precis som vilken sida du skulle bygga för webbläsaren som helst.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron App</title>
    <style>
        body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
        h1 { color: #333; }
        p { color: #666; }
    </style>
</head>
<body>
    <h1>Hello from Electron!</h1>
    <p>This is your very first desktop application.</p>
</body>
</html>

Koppla ihop huvudprocessen och renderingsprocessen

Koppla nu ihop dem: ange att fönstret ska visa din sida med win.loadFile() inuti createWindow. En enda rad kopplar användargränssnittet till huvudprocessen.

main.js: Läsa in HTML

Här är main.js uppdaterad för att läsa in sidan. Observera hur __dirname hittar index.html relativt till skriptet, oavsett var det körs.

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Köra ditt Electron-program

Lägg till ett startskript i package.json så att du kan starta programmet med ett enda kommando i stället för att skriva electron varje gång.

package.json: Startskript

Din package.json bör se ut så här. "electron ." kör main.js i den aktuella mappen — spara filen och kör sedan "npm start" för att starta programmet.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

Snabb kontroll: Huvudprocessens roll

Du har sett hur main.js och index.html fungerar tillsammans. Nu testar vi dina kunskaper om deras huvudsakliga roller.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Ditt första Electron-program

Du har byggt ditt första Electron-program: en huvudprocess för livscykel och fönster, en renderingsprocess för användargränssnittet och ett startskript som kopplar ihop dem.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 47

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Er första Electron-applikation” gratis?

Ja – hela texten till ”Er första Electron-applikation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av skrivbordsappar med Electron, kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Vad lär jag mig i ”Er första Electron-applikation”?

Följ en stegvis guide för att skapa en enkel Electron-applikation med 'Hello World', inklusive grunderna i main- och renderer-processerna. Ni övar på Utveckling av skrivbordsappar med Electron med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av skrivbordsappar med Electron?

Du behöver inga förkunskaper. Utbildningen i Utveckling av skrivbordsappar med Electron på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Er första Electron-applikation”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av skrivbordsappar med Electron-lektionen?

Ja. Varje Utveckling av skrivbordsappar med Electron-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Utveckling av skrivbordsappar med Electron