Vytvoření vaší první desktopové aplikace s HTML, JS a Electron

Webové aplikace jsou každým rokem stále výkonnější, ale stále existuje prostor pro desktopové aplikace s plným přístupem k hardwaru vašeho počítače. Dnes můžete vytvářet aplikace pro stolní počítače pomocí již známých HTML, JS a Node.js, poté je zabalit do spustitelného souboru a podle toho distribuovat mezi Windows, OS X a Linux.

Existují dva populární open source projekty, které to umožňují. Jedná se o NW.js, kterému jsme se věnovali před pár měsíci, a novější Electron, který se chystáme používat dnes (rozdíly mezi nimi naleznete zde). Chystáme se přepsat starší verzi NW.js tak, aby používala Electron, abyste je mohli snadno porovnávat.

Začínáme s Electronem

Aplikace vytvořené pomocí Electronu jsou pouze webové stránky, které se otevírají ve vestavěném webovém prohlížeči Chromium. Kromě běžných HTML5 API mohou tyto webové stránky používat celou sadu modulů Node.js a speciálních modulů Electron, které umožňují přístup k operačnímu systému.

V zájmu tohoto tutoriálu vytvoříme jednoduchou aplikaci, která načte nejnovější články Tutorialzine prostřednictvím našeho RSS kanálu a zobrazí je v cool vypadajícím karuselu. Všechny soubory potřebné pro fungování aplikace jsou k dispozici v archivu, který můžete získat v části Stáhnout v horní části stránky.

Extrahujte jeho obsah do vámi zvoleného adresáře. Soudě podle struktury souborů byste nikdy nehádali, že se jedná o desktopovou aplikaci a ne jen o jednoduchý web.

Za minutu se blíže podíváme na zajímavější soubory a na to, jak to všechno funguje, ale nejprve si aplikaci projdeme.

Spuštění aplikace

Vzhledem k tomu, že aplikace Electron je pouze luxusní aplikace Node.js, budete muset mít nainstalovaný npm. Zde se můžete naučit, jak to udělat, je to docela jednoduché.

Jakmile to zvládnete, otevřete nový cmd nebo terminál v adresáři s extrahovanými soubory a spusťte tento příkaz:

npm install

Tím se vytvoří node_modules složku obsahující všechny závislosti Node.js potřebné pro fungování aplikace. Nyní by mělo být vše v pořádku, ve stejném terminálu jako předtím zadejte následující:

npm start

Aplikace by se měla otevřít ve vlastním okně. Všimněte si, že má horní panel nabídek a všechno!

Pravděpodobně jste si všimli, že spouštění aplikace není příliš uživatelsky přívětivé. Toto je však pouze způsob, jakým vývojář spouští aplikaci Electron. Po zabalení pro veřejnost se program nainstaluje jako běžný program a otevře se jako jiný, pouze dvojitým kliknutím na jeho ikonu.

Jak se vyrábí

Zde budeme hovořit o nejdůležitějších souborech v jakékoli elektronové aplikaci. Začněme souborem package.json, který obsahuje různé informace o projektu, jako je verze, závislosti npm a další důležitá nastavení.

package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "pretty-bytes": "^2.0.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.35.2"
  },
  "scripts": {
    "start": "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

Pokud jste s node.js dříve pracovali, už víte, jak to funguje. Nejdůležitější věcí, kterou je zde třeba poznamenat, jsou skripty vlastnost, kde jsme definovali npm start příkaz, který nám umožňuje spouštět aplikaci jako dříve. Když jej zavoláme, požádáme elektron, aby spustil main.js soubor. Tento soubor JS obsahuje krátký skript, který otevře okno aplikace a definuje některé možnosti a obslužné rutiny událostí.

main.js

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 900, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

Podívejte se, co děláme metodou „připraven“. Nejprve definujeme okno prohlížeče a nastavíme jeho počáteční velikost. Poté načteme index.html soubor v něm, což funguje podobně jako otevření souboru HTML ve vašem prohlížeči.

Jak uvidíte, samotný HTML soubor není nic zvláštního – zobrazí se kontejner pro karusel a odstavec, ve kterém byly statistiky CPU a RAM.

index.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tutorialzine Electron Experiment</title>

    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>

<div class="flipster">
    <ul>
    </ul>
</div>

<p class="stats"></p>

<!-->In Electron, this is the correct way to include jQuery<-->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/jquery.flipster.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>

HTML také odkazuje na potřebné šablony stylů, knihovny JS a skripty. Všimněte si, že jQuery je zahrnut zvláštním způsobem. Další informace naleznete v tomto vydání.

Nakonec je zde skutečný JavaScript pro aplikaci. V něm přistupujeme k RSS kanálu Tutorialzine, načítáme nejnovější články a zobrazujeme je. Pokud se o to pokusíme v prostředí prohlížeče, nebude to fungovat, protože RSS kanál je umístěn na jiné doméně a načítání z něj je zakázáno. V Electronu však toto omezení neplatí a potřebné informace můžeme jednoduše získat pomocí požadavku AJAX.

$(function(){

    // Display some statistics about this computer, using node's os module.

    var os = require('os');
    var prettyBytes = require('pretty-bytes');

    $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
    $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

    // Electron's UI library. We will need it for later.

    var shell = require('shell');

    // Fetch the recent posts on Tutorialzine.

    var ul = $('.flipster ul');

    // The same-origin security policy doesn't apply to electron, so we can
    // send ajax request to other sites. Let's fetch Tutorialzine's rss feed:

    $.get('http://feeds.feedburner.com/Tutorialzine', function(response){

        var rss = $(response);

        // Find all articles in the RSS feed:

        rss.find('item').each(function(){
            var item = $(this);

            var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
            var urlRegex = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g;

            // Fetch the first image of the article.
            var imageSource = content.match(urlRegex)[1];

            // Create a li item for every article, and append it to the unordered list.

            var li = $('<li><img /><a target="_blank"></a></li>');

            li.find('a')
                .attr('href', item.find('link').text())
                .text(item.find("title").text());

            li.find('img').attr('src', imageSource);

            li.appendTo(ul);

        });

        // Initialize the flipster plugin.

        $('.flipster').flipster({
            style: 'carousel'
        });

        // When an article is clicked, open the page in the system default browser.
        // Otherwise it would open it in the electron window which is not what we want.

        $('.flipster').on('click', 'a', function (e) {

            e.preventDefault();

            // Open URL with default browser.

            shell.openExternal(e.target.href);

        });

    });

});

Skvělá věc na výše uvedeném kódu je, že v jednom souboru současně používáme:

• JavaScriptové knihovny – jQuery a jQuery Flipster tvoří kolotoč.
• Elektronové nativní moduly – Shell, který poskytuje rozhraní API pro úlohy související s počítačem, v našem případě otevření adresy URL ve výchozím webovém prohlížeči.
• Moduly Node.js – OS pro přístup k informacím o systémové paměti, Pretty Bytes pro formátování.

A díky tomu je naše aplikace připravena!

Balení a distribuce

Aby byla aplikace připravena pro koncové uživatele, je třeba udělat ještě jednu důležitou věc. Musíte jej zabalit do spustitelného souboru, který lze spustit dvojitým kliknutím na počítačích uživatelů. Protože aplikace Electron mohou fungovat na více operačních systémech a každý OS je jiný, musí existovat samostatné distribuce pro Windows, pro OS X a pro Linux. Nástroje jako tento modul npm jsou dobrým místem pro začátek – Electron Packager.

Vezměte v úvahu, že balíček obsahuje všechna vaše aktiva, všechny požadované moduly node.js a miniifikovaný prohlížeč WebKit a umístí je dohromady do jednoho spustitelného souboru. Všechny tyto věci se sečtou a konečným výsledkem je aplikace o velikosti zhruba 50 MB. To je poměrně hodně a není to praktické pro jednoduchou aplikaci, jako je náš příklad zde, ale to se stává irelevantní, když pracujeme s velkými a složitými aplikacemi.

Závěr

Jediný hlavní rozdíl oproti NW.js, který uvidíte v našem příkladu, je ten, že NW.js otevře stránku HTML přímo, zatímco Electron se spustí spuštěním souboru JavaScript a vy vytvoříte okno aplikace pomocí kódu. Způsob společnosti Electron vám dává větší kontrolu, protože můžete snadno vytvářet aplikace s více okny a organizovat komunikaci mezi nimi.

Celkově Electron je vzrušující způsob, jak vytvářet desktopové webové aplikace pomocí webových technologií. Zde je to, co byste si měli přečíst dále:

• Stručná příručka společnosti Electron
• Dokumentace společnosti Electronic
• Aplikace vytvořené pomocí Electronu