[[oktatas:szoftverfejlesztes:asztali:electron:angular-electron|< Angular-Electron]]

====== Angular-Electron - Kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Bevezetés =====

Manapság népszerű asztali alkalmazásként egy Electron alapú alkalmazást létrehozni. Itt megnézzük, hogyan kell ezt elkezdeni Angular keretrendszerrel, hogyan lesz belőle futtatható alkalmazás.


A leírásban elkészített alkalmazás elérhető itt:
  * https://github.com/oktat/electron-app.git
===== Projekt létrehozása =====

Legyen a projekt neve "electron-app". Létrehozzuk az ng paranccsal, majd VSCode-dal szerkesztjük a projektet.

<code>
ng new electron-app
cd electron-app
code .
</code>

Függőségek hozzáadása:

<code>
npm install --save-dev electron electron-builder
</code>


===== A projekt beállítása =====

Az alábbi minta nem a teljes package.json, csak amivel ki kell egészíteni:

<code javascript package.json>
{
  "main": "src/electron.js",
  "scripts": {
      "electron": "ng build && electron --disable-gpu .",
      "electron-build": "ng build && electron-builder"
  },
  "build": {
    "files": [
        "./src/electron.js",
        "./dist/electron-app/browser/*"
    ]
  }
}
</code>

A <nowiki>--disable-gpu</nowiki> kihagyható.

A "build" rész, a "scripts": { "electron-build" } számára szükséges. Ennek hatására a dist könyvtárat is figyelembe veszi az alkalmazás létrehozása során. 

<note important>
Az electron-app helyett minden helyen saját projekt nevünk kell szerepeljen.
</note>

A scripts nevek lehet más nevek, ez csak egy ajánlás.


Az src/index.html fájlban javítsuk a <base> elem href tulajdonságának értékét:

<code html>
<base href="./">
</code>

===== Az Electron belépési pontja =====

Hozzunk létre az src könyvtárban egy **electron.js** fájlt:

<code javascript src/electron.js>
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800, 
    height: 600
  });
  win.loadFile('dist/electron-app/browser/index.html');  
}

app.whenReady().then(() => {
  createWindow()
})
</code>

A win.loadFile() paraméterében javítsuk a saját projektünk nevére az útvonalat.

===== Fejlesztés =====

A fejlesztés során használhatjuk továbbra is a **ng serve** beépített szervert.

Ha szeretnénk megnézni hogyan fog ez kinézni asztali alkalmazásként:
  npm run electron

===== Az asztali alkalmazás elkészítése =====

  npm run eclectron-build


Az utasítás hatására létrejön a dist könyvtárban (verziószámtó függően) egy ehhez 
hasonló nevű futtatható fájl:

  * electron-app-0.0.1.AppImage

Próbáljuk ki a futtatást, például egy fájlkezelőből.