Повний посібник і навчальні ресурси

Автор

Огляд Electron.js: Повний Посібник та Ресурси для Навчання

JavaScript вважається однією з найбільш поширених мов програмування. Її універсальність, що дозволяє застосування як для бекенд-, так і для фронтенд-розробки, робить її популярною серед багатьох розробників.

JavaScript пропонує широкий спектр бібліотек і фреймворків, що значно розширюють його можливості за межі звичайного JavaScript.

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

Що таке Electron JS?

Electron JS – це фреймворк, який дозволяє розробникам створювати десктопні застосунки, використовуючи HTML, CSS і JavaScript. Він розроблений та підтримується компанією GitHub.

Фреймворк поєднує в собі Node.JS та Chromium, що дає можливість розробникам підтримувати єдину кодову базу JavaScript та розробляти кросплатформні десктопні програми, які можуть працювати на Windows, macOS і Linux.

Історія Electron.js розпочалася в січні 2013 року. Основна ідея полягала у створенні кросплатформного текстового редактора, який би використовував JavaScript, HTML і CSS.

Першопочатково Electron.js називався Atom Shell і став проєктом з відкритим кодом у 2014 році. Згодом, у квітні 2015 року, проєкт перейменували на Electron, а перший його API був випущений у 2016 році.

Ключові Характеристики Electron JS

  • Сумісність з JavaScript-бібліотеками та фреймворками: Electron JS ідеально працює з різними бібліотеками та фреймворками JavaScript, такими як Vue.js, Angular і React.js. Ця сумісність дозволяє легко інтегрувати їхні можливості у ваші Electron-програми.
  • Перевикористання коду: Electron JS дозволяє використовувати одну кодову базу як для веб-, так і для десктопних застосунків. Це значно зменшує витрати на розробку та дозволяє охопити різні операційні системи.
  • Доступ до нативних API: Розробники Electron JS можуть використовувати нативні API операційних систем, що дозволяє створювати десктопні додатки з доступом до низькорівневих функцій, наприклад, для відображення сповіщень.
  • Підтримка веб-технологій: Electron JS є адаптивним, оскільки не вимагає від розробників вивчення нових мов програмування. Якщо ви вже володієте веб-технологіями, ви можете використовувати їх для створення десктопних програм.
  • Управління кодом і застосунками: Electron JS дозволяє підтримувати єдину кодову базу для різних операційних систем, таких як Linux, Windows і Mac, що зменшує витрати на розробку та підтримку.
  • Легке збирання та розгортання: Менеджер пакунків Electron допомагає розробникам легко пакувати програми у відповідні інсталяційні пакети, дозволяючи створювати десктопні програми для різних операційних систем з однієї кодової бази.

Архітектура Electron JS

Архітектура Electron є схожою на сучасний веб-браузер, використовуючи багатопроцесну структуру, що успадкована від Chromium.

Архітектура Electron складається з V8 JavaScript Engine, Node.JS та Libchromiumcontent.

  • Node.JS: це середовище виконання JavaScript з відкритим кодом, яке використовує V8 JavaScript Engine. Node.JS дає можливість розробникам виконувати JavaScript-код поза браузером.
  • Libchromiumcontent: це бібліотека візуалізації Chromium з відкритим кодом, що підтримується Google Chrome. Chrome використовує мінімалістичний інтерфейс, движок макету blink та V8 як JavaScript двигун.
  • V8 JavaScript Engine: це движок JavaScript з відкритим кодом, розроблений Google, написаний на C++ і JavaScript.

#1. Node.js

Для початку роботи з Electron JS вам потрібно встановити Node.js на вашому комп’ютері.

Виберіть відповідну версію Node.js залежно від операційної системи вашого комп’ютера.

Перевірте правильність встановлення Node.js, виконавши ці команди:

node -v
npm -v

Якщо встановлення пройшло успішно, ці команди відобразять версії node та npm відповідно.

#2. Командний рядок

Спосіб доступу до командного рядка залежить від вашої операційної системи.

  • Linux: залежить від дистрибутива.
  • Windows: PowerShell або командний рядок.
  • macOS: термінал.

Деякі редактори коду, як-от Visual Studio Code, мають вбудований термінал.

#3. Редактор коду

Вам потрібен редактор коду для написання вашого Electron JS коду. Visual Studio Code є одним з найкращих варіантів.

Інструкція зі встановлення Electron JS

Крок 1: Створіть проєкт Node.js.

Скористайтеся цими командами для початку:

mkdir my-electron-app && cd my-electron-app
npm init

Команда npm init запропонує вам ввести деякі дані, такі як назва застосунку, точка входу та опис.

Ви можете використовувати ім’я папки за замовчуванням як назву програми. Обов’язково встановіть точку входу вашого застосунку як main.js.

Інші поля, такі як автор і опис, можуть мати будь-які значення. Ваш package.json буде виглядати приблизно так після виконання цих дій:

  {
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "Привіт Світе!",
    "main": "main.js",
    "author": "Ваше Ім'я",
    "license": "MIT"
  }

Крок 2: Встановіть Electron

Використовуйте цю команду:

npm install --save-dev electron

Крок 3: Додайте команду “start” до вашого package.json

    {
      "scripts": {
        "start": "electron ."
      }
    }

Крок 4: Запустіть програму

Використовуйте цю команду, щоб запустити програму в режимі розробки:

npm start

Робочий Процес Electron JS

Далі ми будемо створювати програму на основі налаштувань, зроблених вище. Програма Electron має два основних типи процесів: головний та рендерер.

Головний Процес

Головний сценарій є точкою входу будь-якої Electron-програми. Програма працюватиме в повноцінному середовищі Node.js. Electron шукає головний сценарій у файлі package.json, який ви налаштували при створенні програми.

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

touch main.js

Додайте наступний код у файл main.js:

  const { app, BrowserWindow } = require('electron');
  const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
    });
    win.loadFile('index.html');
  };
  app.whenReady().then(() => {
    createWindow();
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
      }
    });
  });
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });

Веб-сторінки в Electron можна завантажувати з віддалених веб-адрес або з локального HTML-файлу. Для демонстраційних цілей ми використаємо локальний HTML-файл.

Створіть файл index.html у кореневій папці. Код для index.html завжди надається, але ви можете використовувати цей код як стартовий:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta
        http-equiv="Content-Security-Policy"
        content="default-src 'self'; script-src 'self'"
      />
      <meta
        http-equiv="X-Content-Security-Policy"
        content="default-src 'self'; script-src 'self'"
      />
      <title>Привіт від Electron renderer!</title>
    </head>
    <body>
      <h1>Привіт від Electron renderer!</h1>
      <p>👋</p>
      <p id="info"></p>
    </body>
    <script src="./renderer.js"></script>
  </html>

Процес Візуалізації

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

Створіть файл preload.js в кореневій папці та додайте наступний код:

  window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })

Запустіть сервер розробки за допомогою команди npm start, і ви побачите такий результат:

Приклади Застосунків: Electron JS

#1. Настільний додаток Slack

Slack є одним з найпопулярніших інструментів для віддаленої співпраці. Користувачі можуть обмінюватися повідомленнями, здійснювати дзвінки та ділитися файлами. Slack має веб-версію та десктопні застосунки для Mac, Linux і Windows. Настільний додаток Slack використовує Chromium і Node.js для забезпечення якісної роботи.

#2. Настільний додаток WordPress

WordPress є однією з найпопулярніших систем керування контентом. Завдяки простоті використання та можливості створювати веб-сайти без особливих знань програмування, вона завоювала довіру багатьох користувачів. Доступ до WordPress можна отримати через браузер, а також через десктопні додатки на Mac, Linux і Windows. Оновлена версія WordPress використовує Electron JS.

#3. Настільний додаток WhatsApp

WhatsApp є одним з найпоширеніших месенджерів у світі, з понад 2 мільярдами користувачів. Спочатку розроблений як мобільний додаток, він тепер є платформою для різних пристроїв. Десктопна версія WhatsApp використовує Electron JS і доступна на основних операційних системах.

#4. Visual Studio Code

Visual Studio Code, розроблений Microsoft, є одним з найпопулярніших редакторів коду. Він підтримує HTML, CSS, та різні мови програмування, такі як JavaScript, Python, PHP, Java і Ruby. Десктопний додаток, створений за допомогою Electron JS, доступний для Windows, Mac і Linux.

Ресурси для Навчання Electron JS

#1. Офіційна Документація Electronjs

Офіційний сайт electronjs.org надає докладну документацію з Electronjs. Ви можете дізнатися про те, що таке Electron JS, як налаштувати свою першу програму Electron і як створювати кросплатформні десктопні застосунки, використовуючи різні технології. Документація постійно оновлюється з кожним впровадженням нових функцій.

#2. Master Electron: Створення Настільних Застосунків за допомогою HTML, JavaScript та CSS

Master Electron — це платний курс на Udemy, який вводить в світ Electron JS. Ви навчитеся створювати десктопні додатки для різних операційних систем, таких як Mac, Linux і Windows. Master Electron також є ідеальним ресурсом для тих, хто хоче зрозуміти весь процес роботи з Electron API.

#3. Підручник з Electron React

Electron React — це платний курс на Udemy, який навчить розробників створювати Electron-додатки за допомогою React.js. React є однією з найпопулярніших бібліотек JavaScript, створеною Meta (раніше Facebook).

Підсумки

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

Не забудьте також вивчити інші корисні JavaScript фреймворки, які допоможуть вам створювати сучасні програми швидше.