Що розробляють за допомогою Electron JS?

Що таке Electron JS?

Electron JS – потужний фреймворк для створення крос-платформених настільних застосунків із використанням JavaScript, HTML і CSS.

Історія Electron почалася 2013 року, коли розробники з GitHub створювали текстовий редактор Atom і потрібен був інструмент для крос-платформної розробки на основі веб-технологій. Так з’явився фреймворк Atom Shell, який потім став відомий як Electron. З моменту свого випуску в 2014 році, Electron став популярним завдяки своїй гнучкості та простоті використання.

За час розвитку Electron привернув увагу безлічі компаній і розробників, що призвело до створення активного співтовариства та екосистеми навколо фреймворка. Сьогодні Electron використовується для створення відомих застосунків, таких як Visual Studio Code, Slack і Discord. Активна спільнота та постійна підтримка роблять Electron одним із найпопулярніших інструментів для створення настільних додатків на базі веб-технологій.

У матеріалі ми розглянемо уроки electron js, а також інструкцію зі створення першого застосунку.

Основні переваги

Фреймворк має низку ключових особливостей і переваг, які роблять його привабливим вибором для розробки настільних додатків:

• Крос-платформеність: додатки Electron JS можуть працювати на Windows, macOS і Linux без необхідності модифікації коду.
• Використання веб-технологій: HTML, CSS і JavaScript використовуються для створення користувацького інтерфейсу застосунку.
• Модульність: електрон фреймворк заснований на Node.js, що дає змогу використовувати широкий спектр модулів і бібліотек.
• Швидка розробка: завдяки використанню веб-технологій та Node.js розробка застосунків з Electron JS може бути значно швидшою ніж використання традиційних інструментів розробки настільних застосунків.
• Простота вивчення: якщо ви вже знаєте JavaScript, HTML і CSS, то вам буде легко почати працювати з фреймворком. Якщо ж ні, радимо вам звернути увагу на курс компанії FoxmindED – JavaScript Start.

Приклади додатків, побудованих на Electron JS, включають такі відомі продукти, як Visual Studio Code, Slack, Discord і GitHub Desktop, Tilda.

Як працює

Electron JS складається з двох процесів:

• Основний процес (main): написаний на JavaScript і працює в середовищі Node.js. Він відповідає за керування життєвим циклом програми, створення вікон, доступ до системних ресурсів і взаємодію з рендеринговими процесами.
• Рендеринговий процес (renderer): написаний на JavaScript, HTML і CSS і працює в Chromium. Він відповідає за відтворення користувацького інтерфейсу програми.

Основний і рендеринговий процеси взаємодіють один з одним через IPC (Inter-Process Communication). IPC дає їм змогу обмінюватися даними та подіями.

Electron javascript також взаємодіє з цими двома компонентами (Chromium і Node.js), щоб створювати потужні та функціональні крос-платформні настільні додатки.

• Chromium: використовується для відтворення користувацького інтерфейсу програми. Він забезпечує високу продуктивність і крос-платформну сумісність.
• Node.js: використовується для управління життєвим циклом додатка, доступу до системних ресурсів і взаємодії з рендеринговими процесами. Забезпечує широкий спектр модулів і бібліотек, які можна використовувати в додатках Electron JS.

Перші кроки

Для початку роботи з Electron JS необхідно встановити його і налаштувати оточення розробки.

Шаг 1: Встановіть Node.js і npm з офіційного сайту nodejs.org.

Крок 2: Створіть нову папку для проєкту і перейдіть у неї.

mkdir my-electron-app

cd my-electron-app

Шаг 3: Ініціалізуйте проєкт npm.

npm init -y

Крок 4: Встановіть Electron як залежність розробки.

npm install electron --save-dev

Крок 5: Створіть файли для додатка, наприклад, index.html, main.js і styles.css.

Крок 6: Відредагуйте файли програми на ваш розсуд.

Крок 7: Додайте скрипт для запуску Electron у package.json.

"scripts": {

  "start": "electron ."

}

Крок 8: Запустіть застосунок за допомогою команди npm start і протестуйте його.

Розробка інтерфейсу програми

Розробка призначеного для користувача інтерфейсу в настільному застосунку з використанням Electron JS нагадує створення веб-сторінки, де основу складають HTML і CSS. HTML використовується для структурування контенту додатка, включно з розміщенням елементів інтерфейсу, а CSS застосовується для його стилізації та оформлення. Спочатку створюються HTML-файли, що визначають елементи інтерфейсу, такі як кнопки, поля введення і таблиці. Потім використовуються CSS для надання стилю і візуального оформлення цим елементам, включно з позиціонуванням, розмірами, кольорами та анімацією, роблячи інтерфейс програми привабливим і зручним для користувача.

 Інтеграція з Node.js

Framework electron дозволяє використовувати Node.js у своїх додатках. Це означає, що ви можете використовувати всі можливості Node.js, такі, як:

• Доступ до файлової системи: ви можете читати, писати і видаляти файли на комп’ютері користувача.
• Мережеві запити: можете надсилати HTTP-запити до веб-серверів і отримувати дані.
• Робота з базами даних: можете підключатися до баз даних і виконувати SQL-запити.
• Використання криптографії: можете шифрувати дані та підписувати їх електронним підписом.

Припустимо, ви хочете створити додаток для роботи з файлами на вашому комп’ютері. З використанням Node.js ви можете легко реалізувати функціональність читання і запису файлів, перевірки їхнього існування, створення нових каталогів і багато іншого.

const fs = require('fs');

// Reading a file

fs.readFile('example.txt', 'utf8', (err, data) => {

  if (err) throw err;

  console.log(data);

});

// Write to file

fs.writeFile('example.txt', 'Hello, world!', (err) => {

  if (err) throw err;

  console.log('File has been saved.');

});

Цей приклад демонструє, як за допомогою модуля fs у Node.js ви можете легко виконувати операції читання і запису файлів у додатку Electron.

Розширені функції та модулі Electron

Electron надає безліч вбудованих модулів, як-от Notification, Menu і Dialog, які спрощують створення застосунків із розширеним функціоналом.

1. Notification: Дозволяє додаткам створювати сповіщення, які можуть сповіщати користувача про різні події. Повідомлення можуть містити текст, заголовок, зображення та інші параметри.

Приклад:

const { Notification } = require('electron');

const notification = new Notification({

  title: 'Notification',

  body: 'Hello World!'

});

notification.show();

2. Menu: використовується для створення та керування меню додатка. Він дозволяє додавати пункти меню, підменю, гарячі клавіші та інші елементи керування.

Приклад:

const { Menu } = require('electron');

const template = [

  {

    label: 'File',

    submenu: [

      { label: 'Open' },

      { label: 'Save' },

      { type: 'separator' },

      { label: 'Exit', role: 'quit' }

    ]

  }

];

const menu = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(menu);

3. Dialog: використовується для відображення діалогових вікон, таких як вікна вибору файлу, вікна збереження файлу, вікна повідомлення та інших.

Приклад:

const { dialog } = require('electron');

dialog.showOpenDialog({ properties: ['openFile', 'openDirectory', 'multiSelections'] })

  .then(result => {

    console.log(result.filePaths);

  })

  .catch(err => {

    console.log(err);

  });

4. BrowserWindow: використовується для створення та керування вікнами додатка. Він дозволяє налаштовувати розмір, положення, заголовок та інші параметри вікон.

Приклад:

const { BrowserWindow } = require('electron');

let mainWindow = new BrowserWindow({

  width: 800,

  height: 600,

  title: 'My application'

});

mainWindow.loadFile('index.html');

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

Налагодження та тестування додатків 

Налагодження та тестування є важливими етапами розроблення будь-якого додатка, зокрема й на Electron JS. 

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

• DevTools: вбудовані інструменти розробника, подібні до Chrome DevTools, для відстеження DOM, мережевих запитів і помилок JavaScript.
• console.log(): стандартний метод JavaScript для виведення налагоджувальної інформації в консоль.
• Брейкпоінти: можливість призупинення виконання коду для вивчення його стану.

Розглянемо підходи до тестування та забезпечення якості коду:

• Модульне тестування: використання Mocha, Jest або Ava для тестування окремих модулів програми.
• Інтеграційне тестування: використання Spectron для автоматизації перевірки взаємодії різних компонентів програми.
• Ручне тестування: перевірка функціональності та зручності використання вручну.
• Code Review: регулярні сесії код-рев’ю для виявлення помилок і поліпшення якості коду.
• Статичний аналіз коду: використання ESLint або TSLint для виявлення потенційних проблем і забезпечення відповідності стандартам кодування.

Застосування цих методів та інструментів допоможе створювати надійні додатки на Electron JS з високою продуктивністю та безпекою.

Розгортання та дистрибуція додатків

Розгортання та дистрибуція додатків на Electron JS означає пакування готового додатка у виконувані файли, які можуть бути запущені на різних ОС. Для цього використовуються інструменти, такі як electron-builder, electron-packager або electron-forge, що дають змогу створювати інсталяційні файли для Windows, macOS і Linux. При цьому важливо забезпечити наявність іконок і маніфестів для застосунку на кожній платформі, щоб він мав привабливий вигляд і коректно працював.

Крім того, для забезпечення оновлень застосунку можна використовувати вбудований модуль autoUpdater в Electron або сторонні сервіси, такі як GitHub Releases. Це дає змогу користувачам отримувати автоматичні оновлення застосунку та забезпечує легкий доступ до останніх версій.

Майбутнє і спільнота

Майбутнє Electron JS обіцяє подальше поліпшення його продуктивності, розширення API і підтримку нових технологій, таких як WebAssembly і PWA. Розробники також активно працюють над поліпшенням інструментів розробки, щоб зробити процес створення додатків зручнішим і ефективнішим. Спільнота Electron JS надає широкі ресурси для навчання та підтримки, включно з офіційною документацією, форумами, GitHub репозиторієм та онлайн курсами, допомагаючи розробникам освоїти та використовувати цей фреймворк на повну потужність.

У нас також ви можете пройти курс Node.js, який допоможе вам освоїти один із найпопулярніших серверних JavaScript-фреймворків і розширити ваші знання та навички в галузі веб-розробки.