[Из песочницы] Создание десктопного приложения с помощью Electron и веб-технологий
Знакомство с Electron
Официальная страница проекта Electron.
Изначально Electron был разработан для редактора Atom компанией GitHub.
Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.
Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Таким образом это не что иное как среда в которой будет выполнятся наше веб приложение.
На текущий момент Electron v0.35.0 включает в себя:
- Node: 4.1.1
- Chromium: 5.0.2454.85
- V8: 4.5.103.294
Альтернативой для Electron является проект NW.js (ранее известный как node-webkit). О различиях можно почитать здесь.
Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.
Интерфейсом взаимодействия с пользователем является созданная нами веб-страница. В данном случае мы не ограничены системным набором элементов интерфейса нашей платформы и можем создавать нужные нам UI элементы с помощью веб-технологий. А учитывая, что в коробочке у нас один из самых продвинутых браузеров, мы можем использовать самые новые веб-технологии.
Я предполагаю, что вы будете использовать ваш основной текстовый редактор (или IDE), и у вас установлен Node.js/npm. Я также надеюсь, что у вас есть знания HTML/CSS/JavaScript (знания Node.js не помешали бы, но не является обязательными) так что я могу не беспокоится о вашем понимании создания веб-страниц. Если же таких знаний нет, то вы, наверное, будете чувствовать себя несколько потерянными, и я рекомендую вам вначале изучить основы веб-разработки.
Итак, как же работает Electron.
Входной точкой является основной файл определенный в файле package.json, именно он и выполняется, когда стартует ваше приложение. В этом основном файле (который обычно называется main) создаются окна приложения, в которых происходит рендеринг и отображение веб-страниц с дополнительною возможностью взаимодействия с нативным GUI вашей операционной системы. Процесс, который запускает основной скрипт, называется основной процесс (main process).
Electron использует Chromium для отображения веб-страниц, мульти-процессорная архитектура Chromium тоже используется. Каждая веб-страница в Electron запускается в своем собственном процессе, который называется рендер процессом (renderer process).
В обычном браузере веб-страницы запускаются в закрытом окружении (так называемой песочнице) и не имеют доступ к нативным ресурсам. Пользователи Electron, однако, имеют возможность использовать Node.js API на веб-страницах, имея доступ к взаимодействию с операционной системой на низком уровне.
Исходя из того, что мы уже знаем, для создания самого простого приложения нам нужно всего три файла:
package.json
main.js
index.html
Напишем простое приложение Hello world
Наше первое приложение будет выводит информацию о версиях тех частей, которые входят в Electron.
package.json в нашем случае будет выглядеть так:
{
"name" : "electron-simple-app",
"version" : "0.0.1",
"main" : "main.js"
}
«name»: «electron-simple-app» — это имя для вашего приложения;
«version»:»0.0.1» — это его версия, соответственно;
«main»: «main.js» — и основной скрипт.
Если поле main не будет указано в pakage.json, то по умолчанию Electron будет пытаться загрузить index.js файл.
В main.js мы должны создать окно нашего приложения и обрабатывать системные события, вот так будет выглядеть основной скрипт нашего приложения:
const electron = require('electron');
const app = electron.app; // Модуль контролирующей жизненный цикл нашего приложения.
const BrowserWindow = electron.BrowserWindow; // Модуль создающий браузерное окно.
// Опционально возможность отправки отчета о ошибках на сервер проекта Electron.
electron.crashReporter.start();
// Определение глобальной ссылки , если мы не определим, окно
// окно будет закрыто автоматически когда JavaScript объект будет очищен сборщиком мусора.
var mainWindow = null;
// Проверяем что все окна закрыты и закрываем приложение.
app.on('window-all-closed', function() {
// В OS X обычное поведение приложений и их menu bar
// оставаться активными до тех пор пока пользователь закроет их явно комбинацией клавиш Cmd + Q
if (process.platform != 'darwin') {
app.quit();
}
});
// Этот метод будет вызван когда Electron закончит инициализацию
// и будет готов к созданию браузерных окон.
app.on('ready', function() {
// Создаем окно браузера.
mainWindow = new BrowserWindow({width: 800, height: 600});
// и загружаем файл index.html нашего веб приложения.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Открываем DevTools.
mainWindow.webContents.openDevTools();
// Этот метод будет выполнен когда генерируется событие закрытия окна.
mainWindow.on('closed', function() {
// Удаляем ссылку на окно, если ваше приложение будет поддерживать несколько
// окон вы будете хранить их в массиве, это время
// когда нужно удалить соответствующий элемент.
mainWindow = null;
});
});
index.html — это веб-страница которую мы хотим отобразить:
Hello World!
Hello World!
Мы используем Node ,
Chrome ,
и Electron .
Репозиторий с кодом — https://github.com/DangelZM/electron-simple-app.
Когда вы создадите все файлы или склоните репозиторий, вы захотите попробовать запустить ваше приложение локально и проверить, работает ли оно как задумано.
Для запуска приложения нам понадобится модуль electron-prebuilt.
Его мы можем с помощью npm поставить глобально или локально в наше приложение.
В случае глобальной установки для запуска приложения мы выполняем в корне нашего приложения команду:
electron .
В случае локальной установки выполняем:
./node_modules/.bin/electron .
В подготовленном мной репозитории для запуска приложения вам нужно установить зависимости:
npm install
и запустить скрипт с помощью npm:
npm start
Пример запуска созданного приложения можно посмотреть на видео ниже:
