Electron

Szerző: Sallai András
Copyright © 2022, Sallai András
Szerkesztve: 2022, 2024
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Az electron projektekről

Az electron projektek valójában normál weblapok, amiket automatikusan egy saját böngészőablakban indítunk el.

Electron projekt kezdés

mkdir app01
cd app01
yarn init -y

yarn add --dev electron

Írjunk indító scriptet:

  "script": {
    "start": "electron ."
  }

Példa program

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Háromszög</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <div class="container">
        <h1>Háromszög terület</h1>
        <div>
            <label for="base">Alap</label>
            <input type="text" id="base">
        </div>
        <div>
            <label for="height">Magasság</label>
            <input type="text" id="height">
        </div>
        <button id="calcButton">Számít</button>
        <div>
            <label for="area">Eredmény</label>
            <input type="text" id="area">
        </div>
 
 
    </div>
    <div id="about">
        Sallai András, 2022-12-22
    </div>
    <script src="app.js"></script>
</body>
</html>

style.css

body {
    font-family: sans-serif;
}
input {
    margin-bottom: 15px;
}
label {
    display: inline-block;
    width: 80px;
}
#about {
    background-color: gold;
    padding: 5px;
    margin: 0;
}
button {
    margin-bottom: 10px;
}

app.js

const calcButton = document.querySelector("#calcButton")
const baseElem = document.querySelector("#base")
const heightElem = document.querySelector("#height")
const areaElem = document.querySelector("#area")
calcButton.addEventListener('click', () => {
    let base = Number(baseElem.value)
    let height = Number(heightElem.value)
    let area = base * height / 2
    areaElem.value = area
})

Az electron nevű könyvtárból, böngészőablakot indítunk, amibe betöltjük a weblapot.

main.js

const { app, BrowserWindow } = require('electron')
 
const createWindow = () => {
    const win = new BrowserWindow({
        width: 350,
        height: 260,
        autoHideMenuBar: true
    })
    win.loadFile('index.html')
}
 
app.whenReady().then(() => {
  createWindow()
})

package.json

{
  "name": "triangle",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^22.0.0",
  },
  "scripts": {
    "start": "electron --disable-gpu .",
  }
}

Build

A kész program, elkészíthető a következő paranccsal:

yarn add --dev electron-builder

Írjuk az utasítást package.json fájlba.

package.json fájlban:

  "scripts": {
     "pack": "electron-builder --dir",
     "dist": "electron-builder"
  }

A --dir kapcsoló hatására nem jön létre a csomag, de az előkészítő könyvtár igen. Tesztelési célra lehet jó. A dist feladat elkészíti a csomagot.

A létrejövő csomag neve függ a package.json fájlban megadott name és version értékektől.

Linkek

https://www.electron.build/ (2022)
https://www.electronjs.org/docs/latest/ (2022)