Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:szoftverfejlesztes:asztali:electron:angular-electron [2024/12/21 12:53] – [Bevezetés] admin
+++ oktatas:szoftverfejlesztes:asztali:electron:angular-electron [2024/12/21 15:42] (aktuális) – admin
@@ Sor 3: / Sor 3: @@
 ====== Angular-Electron ======
-  * **Szerző:** Sallai András
+  * [[oktatas:szoftverfejlesztes:asztali:electron:angular-electron:Kezdés]]
-  * Copyright (c) 2024, Sallai András
+  * [[oktatas:szoftverfejlesztes:asztali:electron:angular-electron:Menü]]
-  * 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.
-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.