Electron-työpöytäsovellusten kehitys · Oppitunti

Ensimmäinen Electron-sovelluksenne

Seuratkaa vaiheittaista opasta ja luokaa perustason Hello World -Electron-sovellus tutustuen main- ja renderer-prosessien perusteisiin.

Oppitunti 3/412 vaihetta

Ensimmäinen Electron-sovelluksenne on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Hei, Electron-maailma!

On aika rakentaa ensimmäinen Electron-sovelluksesi — yksinkertainen työpöydän "Hello World". Se esittelee keskeiset tiedostot, jotka tuovat verkkoteknologiat työpöydälle.

Projektin määrittäminen

Luo ensin projektin perusrakenne: tee kansio, suorita npm init ja asenna Electron kehitysriippuvuudeksi. Komennot ovat alla.

Pääprosessi (main.js)

Jokaisella sovelluksella on pääprosessi — Node.js-ympäristö, joka hallitsee elinkaarta, kommunikoi käyttöjärjestelmän kanssa ja luo ikkunat. Se käynnistyy tiedostosta main.js.

main.js: ikkunan perusmääritys

Tiedostossa main.js tuot Electron-moduulit ja määrität, miten verkkosisällön sisältävä ikkuna luodaan. Kokeile alla olevaa perusmääritystä.

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

Renderöintiprosessi (index.html)

Renderöintiprosessi on käyttöliittymäsi suorituspaikka — käytännössä Chromium-ikkuna, joka renderöi HTML:ää, CSS:ää ja JS:ää. Se lataa sisällön tiedostosta index.html.

index.html: käyttöliittymämme sisältö

Tiedosto index.html sisältää Hello World -viestisi — aivan tavallisen verkkosivun, samanlaisen kuin selaimelle rakennettava sivu.

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

Pää- ja renderöintiprosessin yhdistäminen

Yhdistä nyt nämä kaksi: käske ikkunaa näyttämään sivusi kutsumalla win.loadFile()-metodia createWindow-funktion sisällä. Yksi rivi yhdistää käyttöliittymän pääprosessiin.

main.js: HTML:n lataaminen

Tässä on päivitetty main.js, joka lataa sivun. Huomaa, miten __dirname paikantaa index.html-tiedoston suhteessa komentosarjaan riippumatta siitä, missä komentosarja suoritetaan.

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

Electron-sovelluksen suorittaminen

Lisää käynnistyskomento tiedostoon package.json, jotta voit käynnistää sovelluksen yhdellä komennolla sen sijaan, että kirjoittaisit electron-komennon joka kerta.

package.json: käynnistyskomento

Tiedoston package.json pitäisi näyttää tältä. "electron ." suorittaa main.js-tiedoston nykyisessä kansiossa — tallenna tiedosto ja käynnistä sovellus suorittamalla "npm start".

{
  "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"
  }
}

Pikakertaus: pääprosessin rooli

Olet nähnyt, miten main.js ja index.html toimivat yhdessä. Testataan, kuinka hyvin ymmärrät niiden tärkeimmät roolit.

Vastaa interaktiivisessa oppitunnissa

Kertaus: ensimmäinen Electron-sovelluksesi

Rakensit ensimmäisen Electron-sovelluksesi: pääprosessi hallitsee elinkaarta ja ikkunoita, renderöintiprosessi käyttöliittymää, ja käynnistyskomento yhdistää nämä.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 47

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Ensimmäinen Electron-sovelluksenne” ilmainen?

Kyllä – oppitunnin ”Ensimmäinen Electron-sovelluksenne” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Ensimmäinen Electron-sovelluksenne”?

Seuratkaa vaiheittaista opasta ja luokaa perustason Hello World -Electron-sovellus tutustuen main- ja renderer-prosessien perusteisiin. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Ensimmäinen Electron-sovelluksenne”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Electron-työpöytäsovellusten kehitys