Побудова electron додатки

Основні відмінності

Далі Electron я буду називати «Електрон».

Ні для кого не секрет, що io.js повернувся до складу Node.js, який тепер регулюється Linux Foundation. Справа в тому, що io.js зіграв злий жарт з NW.js моргнувши до нього творця на свою сторону. Творці Електрону теж не залишалися осторонь, але, на щастя, вже встигли повернутися на Node.js і успішно його підтримують, в той час як NW.js 12-ої і 13-ої версії все ще базуються на io.js, причому не першої свіжості.

Насправді, це не всі відмінності Електрону від NW.js, є й інші - більш технічні. З повним списком можна ознайомитися в документації проекту.

Принцип роботи

Принцип роботи Електрона заснований на двох типах процесів:

Перший тип - основний процес. який відповідає за інтеграцію та взаємодію з GUI операційної системи. Під цим поняттям ховається інтеграція в док на OS X або панель задач на Windows, а також згортання в трей, повноекранний режим і інші звичайні і нативні для ОС штуки. Такий процес може бути запущений тільки один раз на все життя додатки.

Другий тип - процес рендеринга. відповідальний за відображення вікна браузера, в якому за допомогою однієї магічної рядки може бути відкрита сторінка додатка або будь-яка інша веб-сторінка. Таких процесів може бути довільне число. За створення процесу рендеринга відповідає основний процес.

Для того, щоб породити основний процес використовується наступна схема народження програми:

• Електрон Новомосковскет package.json і шукає в ньому секцію main. в якій визначено основний файл програми. Цей файл далі в статті я буду називати «точкою входу».
• Потім відбувається обробка «точки входу» і створюється основний процес, який в свою чергу, при бажанні розробника, відкриває якусь сторінку або сторінки, тобто створює вікно браузера. А якщо говорити точніше, то породжує процес або процеси рендеринга.

Якщо спробувати графічно зобразити життя додатки, побудованого на Електроні, то вона буде мати наступний вигляд:

можливості Electron

Перед тим, як приступити до написання js-файлу, який буде виступати в ролі точки входу для всього програми, необхідно поглянути на доступний розробнику API (набір модулів), щоб пізніше можна було посилатися на модуль без приведення його опису.

Для компактності статті я виніс опис доступних API Електрону версії 0.33.3 в окремий Gist.

Налаштування оточення

Думаю, не варто згадувати, що для роботи з Електроном вам потрібен Node.js і пакетний менеджер npm актуальної версії. Крім цього, я рекомендую глобально встановити пакет electron-prebuilt. який дозволить автоматично завантажувати актуальну версію Електрону і запускати додатки без необхідності попереднього складання.

Після установки пакет автоматично завантажить поточну стабільну версію Електрону. Тепер, для того, щоб запустити додаток, необхідно всього лише виконати команду electron. в директорії проекту. Для подальшої автоматизації процесу розробки я раджу додати цю команду в секцію скриптів в package.json:

Ця запис дасть можливість ініціювати запуск програми по команді npm start.

До слова, ви можете встановити цей пакет локально, але в цьому випадку команда electron. перетвориться в страшний і потворний набір символів:

Крім самого Електрону я також раджу встановити пакет XO. який є обгорткою над ESLint:

ESLint є самим передовим Лінтера js-коду, що розробляється Ніколасом Закасом.

Налаштування WebStorm

З коробки WebStorm не вміє автоматично доповнювати, пропонувати методи, та й взагалі працювати з Electron. Щоб виправити цю несправедливість потрібно виконати пару нехитрих операцій.

Натискаємо кнопку Download і вибираємо зліва вгорі канал пакетів TypeScript community stubs. Потім шукаємо в великому списку всякої всячини запис github-electron. вибираємо її і натискаємо на кнопку Download and install. Готово!

Для пошуку за списком клікніть на будь-якому елементі списку і почніть вводити потрібне слово.

перше додаток

Першим кроком на початку розробки будь-якого Node.js додатки буде створення файлу package.json. Ви можете створити його в напівавтоматичному режимі за допомогою команди npm init. відповідаючи на питання, чи ж вручну, додавши лише найпотрібніше:

Так як я ще не вирішив, що ми будемо розробляти протягом всієї серії статей, поки що додаток буде мати ім'я app.

Тепер саме час виконати команду, що додає в package.json підтримаю js-Лінтера XO:

Ця команда автоматично додасть в package.json все найнеобхідніше, а також встановить локальну копію XO. Залишається лише додати виклик XO в скрипт start. щоб перед запуском програми, написаний раніше js-код, завжди залишався чистим і добре пахнув:

Я також додав і змінив кілька правил перевірки коду, щоб Линтер відповідав моїм особистим вимогам і був зручний у використанні.

Саме час створити який-небудь простенький html-файл, який надалі буде завантажуватися при старті програми. Як мені здається, немає нічого кращого, ніж вивести на екран версію Node.js, Electron і Chrome. Для цього звернемося до модуля process. який був розширений Electron. Тепер, крім інформації про поточний процес, він також може надавати інформацію про тип процесу (основний або рендер), версію Chrome і Electron, а також шлях до виконуваного js-файлу.

Файл main.js є «точкою входу» для всього програми. У ньому будуть створюватися вікна і оброблятися системні події.

Спочатку необхідно підключити модуль app. що відповідає за управління життєвим циклом додатка і browser-window. створює нове вікно браузера.

При закритті всіх вікон програми випливає з нього вийти. В OS X ця подія є загальним для додатків і їх барів меню, тому тут присутній умова, що відкидає цю платформу.

Після того, як Електрон повністю буде инициализирован, стане доступним API керування додатком. Нижче представлений код, який створює нове вікно браузера розмірами 800 на 600 пікселів. Потім в цьому вікні завантажується раніше створений нами html-файл.

Важливо зауважити, що навіть якщо ви не завантажте жоден з html-файлів, процес рендеринга все одно буде запущений, так як раніше вже було створено вікно браузера.

В кінці вішається обробник події closed. яке спливає тоді, коли вікно браузера вже було закрито. Після того, як ви отримали цю подію, необхідно видалити посилання на вікно і більше його не використовувати.

До слова, не варто плутати подія closed з схожим на нього подією close. яке посилається, коли вікно буде закрито, тобто перед closed.

Взагалі, тема подій в Електроні гідна окремої статті, але в силу моєї ліні, бажаючі можуть звернутися до документації. Скажу лише, що життєвий цикл додатка в події буде виглядати наступним чином:

• will-finish-launching
• ready
• browser-window-created
• page-title-updated
• close
• before-quit
• will-quit
• quit
• window-all-closed
• closed

Події, подіями, але повернемося до нашого додатком - саме час запустити його, використовуючи команду npm start.

У підсумку ми маємо вікно, в якому відображається поточна версія Node.js, Electron і Chrome. Крім того, вікно програми має службове меню з невеликим набором стандартних пунктів. Службовим воно називається через те, що після складання проекту, як ви побачите пізніше, воно зникає.

поширення застосування

На відміну від статті про NW.js я дам найнеобхідніший матеріал відразу ж в першій статті, щоб найактивніші Новомосковсктелі вже мали можливість почати вивчати цей інструмент самостійно.

Для збірки додатку я пропоную скористатися пакетом electron-packager. Спочатку встановимо його глобально:

Цього разу ми обійдемося без планувальника завдань, на зразок Grunt або Gulp. Ми ж дорослі люди? - думаю так!

Тепер, виконавши команду npm run build ви отримаєте збірку свого застосування під операційну систему Windows. Якщо ж вам необхідна збірка під всі три платформи, то команда буде мати вигляд:

Після складання програми під всі три платформи буде створено, як це не дивно, п'ять директорій:

Але найсмішніше, що повністю зібраний «комплект» важить всього лише якихось жалюгідних 500Мб.

Крім явного вказівки імені додатки і версії Електрону в команді, можна скористатися даними з package.json. Створимо два поля, які будуть містити ім'я опублікованого додатка і версію, за допомогою якої необхідно буде зібрати його:

Після цього в команді стануть доступні змінні:

Зрозуміло, що вам ніхто не забороняє використовувати поле name як назва програми:

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

На жаль, на Windows я так і не зміг змусити electron-packager використовувати $ npm_package_ *. Зате на OS X це чудово працює.

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

• platform - платформа (all або win32. linux. darwin)
• arch - розрядність (all або ia32. x64)
• version - версія Електрону для збірки

• all - еквівалент --platform = all --arch = all
• out - директорія, в яку будуть поміщені збірки
• icon - іконка програми (.icns або .ico)
• app-bundle-id - ідентифікатор додатки в plist
• app-version - версія програми
• build-version - версія збірки додатку для OS X
• cache - директорія, в якій буде розташовуватися кеш додатка
• helper-bundle-id - ідентифікатор додатки для помічника plist
• ignore - виняток файлів з збірки
• prune - запуск команди npm prune --production в додатку
• overwrite - перезапис вже створених збірок
• asar - упаковка початкових кодів додатка в asar-архів
• asar-unpack - розпакування зазначених файлів в директорію app.asar.unpacked
• sign - ідентифікатор для входу в codesign (OS X)
• version-string - ключі для збірки (Windows). Список ключів дивіться в документації пакета

Про те, як додавати іконки, що взагалі слід робити перед розповсюдженням додатка і як створити інсталятор для збірки, я розповім в заключній частині цієї серії статей.

Список літератури

За традицією залишаю посилання на те, що можна почитати, щоб розширити свій кругозір в рамках цієї статті. Російською мовою нічого немає, так як у нас Електрон якось не особливо популярний.

Ділимося на оплату хостингу або кави.
Чим частіше п'ю каву, тим частіше пишу статті.