Háromszög

[[oktatas:web:nodejs|< Node.js]] ====== Electron ====== * **Szerző:** Sallai András * Copyright (c) 2022, Sallai András * Szerkesztve: 2022, 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====





    
    
    Háromszög
    



    
        Háromszög terület
        
            Alap
            
        
        
            Magasság
            
        
        
        
            Eredmény
            
        


    
    
        Sallai András, 2022-12-22


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


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.


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


{
  "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. ===== Hibakeresés ===== A DevTools megnyitható Ctrl + Shift + I billentyűkkel. Megnyitható programból:


win.webContents.openDevTools();

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