Превращаем генератор паролей в настоящую программу

У нас есть веб-страницы, они работают в браузере. С помощью JavaScript и CSS эти веб-страницы могут выглядеть и работать так же хорошо, как и приложения на компьютере — с интерфейсом, интерактивностью, хранением данных и так далее. 

И есть сами приложения: они работают на компьютерах без браузера. 

«Почему бы их не объединить? — подумали разработчики. — Пусть приложения из веба живут на компьютерах как десктопные приложения!» Так появился Electron.

Electron — фреймворк, который позволяет создавать на базе веб-страниц приложения для настольных операционных систем. В его основе — библиотека отображения страниц Chromium Node.js, которая расширяет возможности JavaScript. В результате из HTML-страницы с помощью Электрона получится готовое приложение, которое будет работать само по себе.

На базе Электрона построен, например, VSCode — один из любимых инструментов многих программистов. Если вы не знаете, что это — почитайте наш обзор средств разработки. Ещё на Электроне собрали новую версию Скайпа и десктопный клиент Вордпресса.

В этой статье мы соберём программу из нашего генератора паролей. 

Устанавливаем Node.js

Переходим на nodejs.org/en/download/ и выбираем свою операционную систему. Скачивание и установка дистрибутива займёт около 5 минут. В результате у вас на компьютере появится несколько новых программ, среди которых будет командная строка Node.js — Node.js command prompt. В ней мы и будем дальше собирать наш генератор.

В состав Node.js ещё входит npm — менеджер пакетов, который поможет нам со сборкой. Пакет — это маленькая служебная программа, к которой можно обращаться из своей основной программы за помощью в каких-то делах. Если нам нужен пакет, которого ещё нет на компьютере, его можно установить командой npm install <имя пакета>. Мы будем её использовать несколько раз в нашем проекте.

Чтобы убедиться, что всё установилось правильно, откроем командную строку Node.js и выполним такие команды: 

node -v (Эта команда должны вывести текущую версию Node.js)

npm -v (Эта команда должны вывести текущую версию менеджера пакетов npm)

Просто вводим эти команды в программу и нажимаем клавишу ввода:

Устанавливаем Электрон

Для этого запускаем такую команду:

npm install electron --save-dev

Она установит Электрон и скачает все нужные файлы на компьютер, чтобы не выкачивать их каждый раз из сети.

Подготавливаем папку проекта

Самое простое приложение на Electron будет иметь такую структуру папок:

app_name/

├── package.json

├── main.js

└── index.html

Это значит, что у нас должна быть папка с названием программы, где расположены три файла. Package.json отвечает за то, как Электрон соберёт наш проект,  main.js — скрипт, который открывает окно приложения, определяет некоторые параметры и некоторые обработчики событий, а index.html — это будет наш файл с генератором, только под другим именем.

Создаём папку gen в корне диска С и наполняем её пока пустыми тремя файлами. Как наполнить эти файлы — читайте ниже.

Наполняем package.json

Скопируйте этот код, вставьте в любой текстовый редактор и сохраните файл как package.json. В содержимое можно пока не вникать.

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "devDependencies": {
    "browser-window": "^0.4.0",
    "electron": "^5.0.5",
    "electron-packager": "^14.0.0",
    "electron-prebuilt": "^0.35.2",
    "electron-prebuilt-compile": "^4.0.0",
    "os": "^0.1.1",
    "package": "^1.0.1"
  },
  "scripts": {
    "start": "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

Наполняем main.js

Делаем то же самое — копируем код, вставляем и сохраняем как файл main.js в папке gen.

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
app.on('window-all-closed', function () {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
app.on('ready', function () {
  mainWindow = new BrowserWindow({ width: 1000, height: 625 });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
});

Копируем генератор в папку проекта

Прелесть Электрона в том, что если у вас проект — одна HTML-страница, то всё, что вам нужно сделать, это скопировать её в папку проекта и переименовать в index.html. Так и поступим.

В итоге у нас в папке лежат все три файла, которые нужны для сборки. Можно приступать к основной части.

Устанавливаем модули

Нам понадобятся два модуля: один отвечает за окно браузера, в котором будет работать наша программа, а второй — за сборщик, который соберёт все файлы в один исполняемый автономный файл.

Оба модуля устанавливаются одинаково — в командной строке Node.js выполним по очереди следующее:

npm install browser-window --save-dev

npm install electron-packager -g

Собираем приложение

Не выходя из командной строки Node.js, переходим в папку проекта. Чтобы перейти на папку уровнем выше, используйте команду 

cd ..

А чтобы зайти в нужную папку, нужна такая команда:

cd имя_папки

Если всё сделано правильно, то командная строка будет начинаться так: с:\gen>

Теперь обновляем все зависимости в проекте. Это значит, что Электрон зайдёт в папку проекта, заглянет во все файлы и убедится, что у нас всего хватает. Если не хватает — подскажет, чего именно и где это взять.

npm install

Осталось собрать всё в один файл командой:

electron-packager

Вот, что она сделает:

Заходим в эту папку, находим файл electron-app.exe, запускаем — всё работает!

Что дальше

Если вам понравилось создавать свои программы таким способом, почитайте документацию проекта:  electronjs.org/docs. 

Электрон — не единственный фреймворк, который так умеет, ещё есть NW.js. Он немного отличается от Электрона, но принцип работы у них похож.

Веб-разработка — это новый чёрный

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Начать бесплатно