1. diel - Úvod do ElectronJS

Vitajte u prvej lekcie seriálu o javascriptové frameworku ElectronJS. V tomto diele si povieme, čo to je ElectronJS, k čomu je a vytvoríme si našu prvú aplikáciu.

ElectronJS

ElectronJS je javascriptový framework, ktorý sa používa na vývoj cross-platformových desktopových aplikácií s pomocou HTML, CSS a JS. Na technológii elektróny sú postavené nástroje, ktoré bežne používame, napríklad: Atom IDE, VSCode IDE, HTTP klient Postman alebo napríklad Gitový klient GitKraken.

Čo je potrebné

Začať s frameworkom len tak bez znalostí je veľmi problematické. Preto odporúčam si osvojiť najprv kurz JavaScriptu a HTML / CSS. K samotnému behu frameworku je treba nainštalovať Node.js ak samotnému programovania nejaké to IDE.

K čomu desktopové aplikácie?

Desktopové aplikácie majú svoje pre i proti. Horšie sa dostávajú medzi ľudí a keď už sa o nich niekto dozvie, tak si aplikáciu musí stiahnuť a sprevádzkovať na svojom počítači. Na rozdiel od webových aplikácií majú lepší prístup k službám, ktorá má počítač zabudované v sebe. Napríklad aktuálna poloha, push notifikácia, miestne databázy a ďalšie.

Prečo práve ElectronJS?

Možno si hovoríte: prečo robiť desktopové aplikácie zrovna v Electronu? Prečo nepoužiť treba C #, Javu, Python alebo napríklad Swift ? Odpoveď je jednoduchá. Použijeme skoro rovnaký kód ako na webe, namiesto toho, aby sme používali iný jazyk a všetko prerábali. Je taky možné vytvoriť Electron aplikáciu nielen s pomocou Vannila JavaScript, ale dokonca aj s pomocou frameworkov ako je React, Angular alebo VueJS. Veľa to uľahčí prácu a dokonca s pomocou nástrojov ako je Ionic) môžeme vytvoriť aplikáciu na web, desktop a telefón s pomocou len jedného kódu:-) Ak sa teda nepočítajú veci ako napríklad push notifikácia.

Ako to funguje?

Electron kombinuje Chromium (niečo ako má prehliadač Google Chrome) a NodeJS (JS server runtime). Každá aplikácia je vlastne Chromium, do ktorého NodeJS načíta náš obsah. V každej aplikácii beží niekoľko procesov. Jeden je hlavné a potom je niekoľko vedľajších alebo taky renderovacích. Hlavný proces spustí našu aplikáciu a "drží ju pri živote". Vedľajšie procesy potom pracujú so samotnou stránkou.

Inštalácia NodeJS

Ak máme NodeJS nainštalované, tak túto časť môžeme preskočiť.

Ako prvý navštívime web nodejs.org kde klikneme na tlačidlo s verziou Node a nápisom Recommended For Most Users. Installer prejdeme ako u normálnej inštalácie, len musíme zaškrtnúť, že chceme inštalovať ešte NPM a pridať Node do premennej PATH. Samotný Node nebudeme používať, ale použijeme node package manager (NPM). S pomocou NPM nainštalujeme Electron a spustíme našu aplikáciu.

Tvorba našu prvú aplikácie

Ako prvý si musíme stiahnuť a nainštalovať NodeJS, to už predpokladám máme. Potom je potrebné si stiahnuť Elektron. To urobíme tak, že si otvoríme príkazový riadok a zadáme príkaz:

npm install -g electron

Tým sme pripravení na tvorbu našu aplikácie.

Vytvoríme priečinok s názvom hello-electron a otvoríme si ju v našom obľúbenom IDE. Ja budem používať VSCode. Ako prvý v priečinku spustíme príkaz:

npm init --yes

Ten vytvorí súbor package.json, v ktorom budeme spravovať všetky závislosti nášho projektu. Potom spustíme príkaz:

npm i electron -save

Tým stiahneme Electron priamo do nášho projektu. Vygeneruje sa súbor package-lock.json, ktorý drží viac informácií o našich závislostiach (balíčkov). Zložka node_modules/ obsahuje stiahnuté všetky závislosti, tú môžeme kompletne ignorovať spolu so spomenutom súboru. Potom upravíme súbor package.json aby vyzeral takto:

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^9.1.1"
  }
}

Tým sme vytvorili NPM script štart na zostavenie a spustenie aplikácie. V každom projekte budeme potrebovať taký štart script.

Vytvoríme si súbor main.js a vložíme do neho tento kód:

// Hlavný proces
// Importujeme všetko potrebné
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

// Pár ďalších premenných
const prod = false;
let win;

// Funkcia ktorá vytvorí okno
function createWindow() {
    // Vytvoríme nové okno
    win = new BrowserWindow({
        width: 800,
        height: 600
    });

    // Načítame súbor src / index.html do novo vytvoreného okna
    win.loadURL(url.format({
        pathname: path.join(__dirname + "/src/index.html"),
        protocol: "file:",
        slashes: true
    }));

    // Ak sme vo vývoji, otvoríme vývojárske nástroje
    if(!prod) {
        win.webContents.openDevTools();
    }

    // Pokiaľ užívateľ zavrie okno, okno sa zničia
    win.on("closed", () => {
        win = null;
    });
}

// Spustíme hlavný proces
app.on("ready", createWindow)

// Vypneme aplikácii ak sú všetky okná zavreté
app.on('window-all-closed', () => {

    // Ak platforma nie je MacOS, ukonči aplikáciu
    // Na MacOS sa aplikácia ukončí, až po spustení príkazu quit
    if(process.platform !== "darwin") {
        app.quit();
    }
});

To je hlavný script ktorý vytvorí okno a načíta do neho náš obsah.

Do súboru src/index.html vložíme nasledujúci kód:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello ElectronJS</title>
    <!-- Import bootstrapu -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello ElectronJS</h1>
</body>
</html>

To bude ten súbor, ktorý sa nám zobrazí. Nie je na ňom nič špeciálne. Môžeme ho editovať ako normálny HTML súbor.

Dúfam, že som kód s pomocou komentárov dostatočne opísal. Keby ste niečomu nerozumeli, napíšte to do komentárov. Teraz už stačí len spustiť štart script a ukáže sa nám naše desktopová aplikácia. Pokiaľ už budeme s aplikáciou spokojní, tak premennú prod zmeníme na hodnotu true a aplikácia bude hotová.