Написание графического приложения на Electron JS (начало: Создание окна)

Приветствую! Если вы зашли на эту статью, значит скорее всего вам крайне неохота лезть в официальную документацию (а очень зря. Она и написана подробно, и имеет перевод на русский язык) и вы пришли за простым решением вашей проблемы — написание кросс-платформенного приложения для компьютера с использованием лишь Web технологий. предлагаю не тянуть, и сразу начать. Но т. к. это первая статья, думаю стоит рассказать в двух словах о том, что же вообще такое Electron JS и для чего оно нужно.

Официальная документация гласит:

Если Вы можете сделать сайт, то Вы сможете сделать настольное приложение. Electron это фреймворк для создания нативных приложений с веб-технологиями, такими как: JavaScript, HTML и CSS. Он заботится о трудных частях, так что Вы можете сосредоточиться на главных элементах Вашего приложения.

Приложения, созданные посредством Electron – это обычные веб-сайты, которые запускаются посредством предустановленного веб-обозревателя Chromium. В добавок к классическим стандартам API HTML5, есть возможность применять весь список модулей Node.js и уникальных функций Electron. Модули сервиса как раз и обеспечивают доступ к ОС.

Да, сперва вам было-бы не плохо ознакомиться с тем, как создаются сайты. Я не буду заострять внимание на деталях кода на HTML и CSS.

Так-же рекомендую ознакомиться со списком приложений, написанных на Electron JS. Среди них такие известные вам программы как: Skype, Visual Studio Code, Slack и многие другие.

Теперь можем приступить к созданию самого приложения.
И начать я предлагаю с организации среды разработки. Я буду использовать Visual Studio Code.
Создадим папку для проекта, пропишем в терминале команду

npm init

и следуем инструкциям (я оставил все поля пустыми, они заполняются автоматически).

И в нашей папке появляется файл:

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

В нем нужно добавить строчку:

"start": "electron ."

Что бы получилось вот так:

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

Это нужно для того, что бы запускать нашу программу по одной команде. Рассмотрим это позже. Сейчас нам нужно установить непосредственно Electron JS. Для начала установим Electron глобально:

npm install -g electron

И после этого установим его локально

npm install electron -save

После установки библиотеки в папке появится еще один файл — package-lock.json и папка — node_modules. С ними нам ничего делать не нужно. А нужно нам создать файл, который будет непосредственно запускать программу. В файле package.json есть строчка:

  "main": "index.js"

Она говорит нам о том, что вся программа будет запускаться из файла "index.js". Давайте создадим этот файл:

const path = require('path');
const url = require('url');
const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

В данной статье я не буду рассказывать о том, что означает каждая строчка программы выше, отмечу лишь пару моментов:

1. Параметры "width" и "height" отвечают за размер окна которое мы создаем. в моем случае это 700 в ширину и 500 в высоту.
2. pathname: path.join(__dirname, 'index.html') говорит нам о том, что программа "index.js" вызывает файл, находящийся в той же директории с названием "index.html"
3. Поскольку мы работаем с простым веб-обозревателем Chromium строка win.webContents.openDevTools(); вызывает известный всем разработчикам Chrome DevTools.

Со всем остальным вы можете ознакомиться в официальной документации (или же в моих будущих статьях о чем будет cказанно в конце).

Теперь давайте создадим файл index.html и в тег <body> запишем, конечно-же, Hello world:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

И наконец мы можем запустить только-что написанное приложение. Для этого нам нужно прописать в терминал команду:

npm start

Как вы помните, мы добавили команду start в файл package.json. Запускаем. Ждем. Видим запущенное приложение:

Вот и все, мы с вами создали графическое приложение. Пока, правда, оно не очень функционально и полезно, но если вы имеете опыт в Web разработке или готовы изучать новые технологии, то вам будет не сложно сделать из этого приложения нечто большее.

P.S. Это моя первая статья, и во время ее написания я даже не уверен, что она пройдет песочницу, но если вас заинтересовала тема написание графического приложения с помощью библиотеки Electron, то в будущих статьях я подробнее расскажу о "фишках" Electron`а, о его плюсах и минусах (очевидных и не очень) и о том, как можно написать и собрать для разных платформ рабочее и полезное приложение с помощью данной библиотеки.

Критика приветствуется.