Lekce 1 - Úvod do ElectronJS

Vítejte u první lekce seriálu o JavaScriptovém frameworku ElectronJS. V tomto díle si řekneme, co to je ElectronJS, k čemu je a vytvoříme si naši první aplikaci.

ElectronJS

ElectronJS je JavaScriptový framework, který se používá na vývoj cross-platformových desktopových aplikací s pomocí HTML, CSS a JS. Na technologii Elektronu jsou postavené nástroje, které běžně používáme, například: Atom IDE, VSCode IDE, HTTP klient Postman nebo třeba Gitový klient GitKraken.

Co je potřeba

Začít s frameworkem jen tak bez znalostí je velmi problematické. Proto doporučuji si osvojit nejprve kurz JavaScriptu a HTML/CSS. K samotnému běhu frameworku je potřeba nainstalovat Node.js a k samotnému programování nějaké to IDE.

K čemu desktopové aplikace?

Desktopové aplikace mají svoje pro i proti. Hůř se dostávají mezi lidi a když už se o nich někdo dozví, tak si aplikaci musí stáhnout a zprovoznit na svém počítači. Na rozdíl od webových aplikací mají lepší přístup k službám, která má počítač zabudované v sobě. Například aktuální poloha, push notifikace, místní databáze a další.

Proč zrovna ElectronJS?

Možná si říkáte: proč dělat desktopové aplikace zrovna v Electronu? Proč nepoužít třeba C#, Javu, Python nebo třeba Swift? Odpověď je jednoduchá. Použijeme skoro stejný kód jako na webu, místo toho, abychom používali jiný jazyk a vše předělávali. Je taky možné vytvořit Electron aplikaci nejen s pomocí Vannila JavaScript, ale dokonce i s pomocí frameworků jako je React, Angular nebo VueJS. Hodně to ulehčí práci a dokonce s pomocí nástrojů jako je Ionic) můžeme vytvořit aplikaci na web, desktop a telefon s pomocí jen jednoho kódu Pokud se tedy nepočítají věci jako třeba push notifikace.

Jak to funguje?

Electron kombinuje Chromium (něco jako má prohlížeč Google Chrome) a NodeJS (JS server runtime). Každá aplikace je vlastně Chromium, do kterého NodeJS načte náš obsah. V každé aplikaci běží několik procesů. Jeden je hlavní a pak je několik vedlejších nebo taky renderovacích. Hlavní proces spustí naši aplikaci a "drží ji při životě". Vedlejší procesy pak pracují se samotnou stránkou.

Instalace NodeJS

Pokud máme NodeJS nainstalované, tak tuto část můžeme přeskočit.

Jako první navštívíme web nodejs.org kde klikneme na tlačítko s verzí Node a nápisem Recommended For Most Users. Installer projdeme jako u normální instalace, jen musíme zaškrtnout, že chceme instalovat ještě NPM a přidat Node do proměnné PATH. Samotný Node nebudeme používat, ale použijeme node package manager (NPM). S pomocí NPM nainstalujeme Electron a spustíme naši aplikaci.

Tvorba naši první aplikace

Jako první si musíme stáhnout a nainstalovat NodeJS, to už předpokládám máme. Potom je potřeba si stáhnout Elektron. To uděláme tak, že si otevřeme příkazový řádek a zadáme příkaz:

npm install -g electron

Tím jsme připraveni na tvorbu naši aplikace.

Vytvoříme složku s názvem hello-electron a otevřeme si ji v našem oblíbeném IDE. Já budu používat VSCode. Jako první ve složce spustíme příkaz:

npm init --yes

Ten vytvoří soubor package.json, ve kterém budeme spravovat všechny závislosti našeho projektu. Potom spustíme příkaz:

npm i electron -save

Tím stáhneme Electron přímo do našeho projektu. Vygeneruje se soubor package-lock.json, který drží více informací o našich závislostech (balíčků). Složka node_modules/ obsahuje stažené všechny závislosti, tu můžeme kompletně ignorovat spolu se zmíněném souboru. Potom upravíme soubor package.json aby vypadal 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 jsme vytvořili npm script start na sestavení a spuštění aplikace. V každém projektu budeme potřebovat takový start script.

Vytvoříme si soubor main.js a vložíme do něj tento kód:

// HLAVNÍ PROCES
// Importujeme vše potřebné
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

// Pár dalších proměnných
const prod = false;
let win;

// Funkce která vytvoří okno
function createWindow() {
    // Vytvoříme nové okno
    win = new BrowserWindow({
        width: 800,
        height: 600
    });

    // Načteme soubor src/index.html do nově vytvořeného okna
    win.loadURL(url.format({
        pathname: path.join(__dirname + "/src/index.html"),
        protocol: "file:",
        slashes: true
    }));

    // Pokud jsme ve vývoji, otevřeme vývojářské nástroje
    if(!prod) {
        win.webContents.openDevTools();
    }

    // Pokud uživatel zavře okno, okno se zničí
    win.on("closed", () => {
        win = null;
    });
}

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

// Vypneme aplikaci pokud jsou všechna okna zavřená
app.on('window-all-closed', () => {

    // Pokud platforma není MacOS, ukonči aplikaci
    // Na MacOS se aplikace ukončí, až po spuštění příkazu quit
    if(process.platform !== "darwin") {
        app.quit();
    }
});

To je hlavní script který vytvoří okno a načte do něj náš obsah.

Do souboru src/index.html vložíme následující 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 soubor, který se nám zobrazí. Není na něm nic speciálního. Můžeme ho editovat jako normální HTML soubor.

Doufám, že jsem kód s pomocí komentářů dostatečně popsal. Kdybyste něčemu nerozuměli, napište to do komentářů. Teď už stačí jen spustit start script a ukáže se nám naše desktopová aplikace. Pokud už budeme s aplikací spokojeni, tak proměnnou prod změníme na hodnotu true a aplikace bude hotová.