Написание графического приложения на 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`а, о его плюсах и минусах (очевидных и не очень) и о том, как можно написать и собрать для разных платформ рабочее и полезное приложение с помощью данной библиотеки.

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