Настало время настоящего программирования — собираем приложение из исходников.
У нас есть веб-страницы, они работают в браузере. С помощью JavaScript и CSS эти веб-страницы могут выглядеть и работать так же хорошо, как и приложения на компьютере — с интерфейсом, интерактивностью, хранением данных и т. д.
И есть сами приложения: они работают на компьютерах без браузера.
«Почему бы их не объединить? — подумали разработчики, — пусть приложения из веба живут на компьютерах как десктопные приложения!» Так появился Electron.
Electron — фреймворк, который позволяет создавать на базе веб-страниц приложения для настольных операционных систем. В его основе — библиотека отображение страниц Chromium и Node.js, который расширяет возможности JavaScript. В результате из HTML-страницы с помощью Электрона получится готовое приложение, которое будет работать само по себе.
На базе Электрона построен, например, VSCode — один из любимых инструментов многих программистов. Если вы не знаете, что это — почитайте наш обзор средств разработки. Ещё на Электроне собрали новую версию Скайпа и десктопный клиент Вордпресса.
В этой статье мы соберём программу из нашего генератора паролей.
Предупреждение. Эта статья рассчитана на тех, у кого совсем нет опыта в разработке и сборке программ. Все примеры и код, который приводится в статье, направлены на максимально быстрое создание своего первого приложения и наверняка написаны не оптимально с точки зрения разработчиков. Но мы пожертвуем правильностью ради простоты, и нам не стыдно.
Также мы будем показывать все примеры на Windows. Для мака читайте документацию — всё будет почти так же, но с некоторыми небольшими нюансами.
Устанавливаем Node.js
Переходим наnodejs.org/en/download/и выбираем свою операционную систему. Скачивание и установка дистрибутива займёт около 5 минут. В результате у вас на компьютере появится несколько новых программ, среди которых будет командная строка Node.js — Node.js command promt. В ней мы и будем дальше собирать наш генератор.
В состав 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. В содержимое можно пока не вникать.
Наполняем main.js
Делаем то же самое — копируем код, вставляем и сохраняем как файл main.jsв папке gen.
Копируем генератор в папку проекта
Прелесть Электрона в том, что если у вас проект — это одна 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 .
Вот, что она сделает:
- поймёт, что проект лежит в текущей папке
- возьмёт название программы и номер версии из файла package.json
- поймёт, на какой операционной системе и на какой архитектуре запущена командная строка и сделает программу под эту же систему
- соберёт все файлы в один, который нам нужен
- положит готовый результат в папку electron-app-win32-x64 (для Виндоус, на маке название будет отличаться)
Заходим в эту папку, находим файл electron-app.exe, запускаем — всё работает!
Что дальше
Если вам понравилось создавать свои программы таким способом, почитайте документацию проекта: electronjs.org/docs.
Электрон — не единственный фреймворк, который так умеет, ещё есть NW.js. Он немного отличается от Электрона, но принцип работы у них похож.
Подписывайтесь на наш канал, потому что нет предела совершенству!