Створення десктопного додатка за допомогою 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, висота: 600});

// і завантажуємо файл index.html нашого веб додатка.
mainWindow.loadURL('file://' + __dirname + '/index.html');

// Відкриваємо DevTools.
mainWindow.webContents.openDevTools();

// Цей метод буде виконаний коли генерується подія закриття вікна.
mainWindow.on('closed', function() {
// Видаляємо посилання на вікно, якщо ваш додаток буде підтримувати кілька 
// вікон ви будете зберігати їх в масиві, це час 
// коли потрібно видалити елемент.
mainWindow = null;
});
});

index.html — це веб-сторінка, яку ми хочемо відобразити:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
Ми використовуємо Node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
і Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

Репозиторій з кодом — https://github.com/DangelZM/electron-simple-app.

Коли ви створите всі файли або схиліть репозиторій, ви захочете спробувати запустити вашу програму локально і перевірити, чи працює воно як задумано.

Для запуску програми нам знадобиться модуль electron-prebuilt.

Його ми можемо з допомогою npm поставити глобально або локально в наш додаток.

У випадку глобальної установки для запуску програми ми виконуємо в корені нашого додатка команду:

electron .

У разі локальної установки виконуємо:

./node_modules/.bin/electron .

У підготовленому мною репозиторії для запуску додатка вам потрібно встановити залежності:

npm install 

і запустити скрипт за допомогою npm:

npm start

Приклад запуску створеного програми можна подивитися на відео нижче:


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.