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

HTML:n, CSS:n ja JavaScriptin integrointi

Ymmärtäkää, miten web-teknologiat muodostavat Electronin käyttöliittymän perustan ja mahdollistavat aiemman web-kehitysosaamisenne hyödyntämisen.

Oppitunti 1/411 vaihetta

HTML:n, CSS:n ja JavaScriptin integrointi on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Verkkokäyttöliittymä HTML:llä, CSS:llä ja JS:llä

Tervetuloa! Electronissa työpöytäsovellusten käyttöliittymät rakennetaan samoilla tekniikoilla kuin verkkosivustot: HTML:llä, CSS:llä ja JavaScriptillä.

Tämä tarkoittaa, että aiemmin hankkimianne verkkokehitystaitoja voi hyödyntää suoraan. Katsotaan, miten!

Tutustu Renderer-prosessiin

Electron-sovelluksessa on Main-prosessi ja vähintään yksi Renderer-prosessi.

Main-prosessi käsittelee käyttöjärjestelmän natiivit toiminnot.
Renderer-prosessi on käytännössä Chromium-verainselainistanssi. Siinä suoritetaan HTML-, CSS- ja JavaScript-koodi, joka muodostaa sovelluksen käyttöliittymän.

Ajatelkaa jokaista Electron-ikkunaa omana renderer-prosessinaan.

HTML rakenteen ja sisällön määrittämiseen

HTML (HyperText Markup Language) on jokaisen verkkosivun, myös Electron-sovelluksen käyttöliittymän, perusta.

Se määrittää rakenteen ja sisällön:

Otsikot (<h1>, <h2>)
Kappaleet (<p>)
Painikkeet (<button>)

Se toimii sovelluksen asettelun piirustuksena.

HTML-sisällön näyttäminen

Electronin main-prosessi lataa HTML-tiedoston renderer-prosessiin eli uuteen ikkunaan. Tästä HTML-tiedostosta tulee sovelluksen alkunäkymä.

Näin `main.js` lataa yksinkertaisen `index.html`-tiedoston:

`index.html`-tiedosto voi sisältää seuraavaa:<h1>Hello Electron!</h1><p>My first desktop UI.</p>

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  // Load the index.html file
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

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

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

CSS käyttöliittymän tyylittelyyn

CSS (Cascading Style Sheets) -tyylikieltä käytetään HTML-sisällön ulkoasun hallintaan. Se määrittää, miltä sovellus näyttää.

CSS:llä voitte määrittää:

Värit ja taustat
Fontit ja tekstikoot
Asettelun, kuten marginaalit, sisennykset ja sijoittelun

Se muuttaa HTML-piirustuksen visuaalisesti miellyttäväksi käyttöliittymäksi.

Tyylien linkittäminen ja käyttäminen

CSS-tiedosto linkitetään HTML-tiedostoon käyttämällä <link>-tagia `index.html`-tiedoston <head>-osiossa.

Voitte esimerkiksi tyylitellä aiemmin esitetyn `h1`-elementin seuraavasti:

`index.html`-tiedostossa olisi:<link rel="stylesheet" href="style.css">

Ja `style.css` voisi sisältää:h1 { color: #3366ff; text-align: center; }

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

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

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

JavaScript vuorovaikutteisuuteen

JavaScript (JS) lisää Electron-sovelluksen käyttöliittymään dynaamista toimintaa ja vuorovaikutteisuutta.

Sen avulla voitte:

Reagoida käyttäjän toimintoihin, kuten napsautuksiin ja näppäinpainalluksiin
Muokata HTML-sisältöä ja CSS-tyylejä
Hakea tietoja rajapinnoista

JS muuttaa staattisen sivun dynaamiseksi ja reagoivaksi sovellukseksi.

Käyttöliittymälogiikan toteuttaminen JS:llä

Voitte upottaa JavaScript-koodin suoraan HTML-tiedostoon käyttämällä <script>-tageja tai linkittää ulkoisia .js-tiedostoja.

Lisätään painike ja määritetään se näyttämään ilmoitus, kun sitä napsautetaan:

`index.html`-tiedostossa olisi:<button id="myButton">Click Me!</button><script>document.getElementById('myButton').addEventListener('click', () => { alert('Hello from Electron!'); });</script>

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });
  win.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

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

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

HTML, CSS ja JS: yhtenäinen pino

Yhdessä HTML, CSS ja JavaScript muodostavat tehokkaan ja tutun pinon Electronin käyttöliittymien rakentamiseen.

HTML tarjoaa sisällön ja rakenteen.
CSS määrittää visuaalisen ulkoasun.
JavaScript lisää vuorovaikutteisuutta ja dynaamista toimintaa.

Näin verkkokehittäjät voivat hyödyntää aiempaa osaamistaan monipuolisten työpöytäsovellusten luomiseen.

Verkkotekniikoiden roolit

Mitkä seuraavista väitteistä kuvaavat oikein HTML:n, CSS:n ja JavaScriptin roolia Electronin renderer-prosessissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus: verkkokäyttöliittymien perusteet

Tänään opimme, että Electron käyttää tuttuja verkkotekniikoita – HTML:ää, CSS:ää ja JavaScriptiä – työpöytäsovellusten käyttöliittymien rakentamiseen.

Renderer-prosessissa nämä verkkotekniikat suoritetaan.
HTML jäsentää sisällön.
CSS määrittää ulkoasun.
JavaScript lisää dynaamista toimintaa.

Ymmärrätte nyt Electron-käyttöliittymän keskeiset rakennuspalikat. Seuraavaksi tutustumme suosittujen frontend-kehysten integrointiin.

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 ”HTML:n, CSS:n ja JavaScriptin integrointi” ilmainen?

Kyllä – oppitunnin ”HTML:n, CSS:n ja JavaScriptin integrointi” 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 ”HTML:n, CSS:n ja JavaScriptin integrointi”?

Ymmärtäkää, miten web-teknologiat muodostavat Electronin käyttöliittymän perustan ja mahdollistavat aiemman web-kehitysosaamisenne hyödyntämisen. 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 1/4.

Kuinka kauan ”HTML:n, CSS:n ja JavaScriptin integrointi”-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

HTML:n, CSS:n ja JavaScriptin integrointi
Frontend-kehysten käyttäminen
Responsiivinen työpöytäsuunnittelu
Teemat ja tumman tilan tuki

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