Tartalomjegyzék

< Node.js

Electron

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