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

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