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

| | 0 Comments| 12:08 PM
Categories:

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

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

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

Електрон JS

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

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

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

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

Особливості Electron JS

  • Сумісний з усіма бібліотеками та фреймворками JavaScript. Vue.js, Angular і React.js — лише приклади фреймворків JavaScript, які розробники можуть використовувати разом із Electron JS. Ця сумісність дозволяє легко використовувати функції/функціональні можливості цих бібліотек і фреймворків під час створення програми Electron.
  • Багаторазовий каркас. Задовольнення потреб різних клієнтів може бути дорогим. Хороша річ Electron JS полягає в тому, що його можна використовувати як для веб-додатків, так і для настільних програм. Єдина кодова база означає, що її також можна використовувати в різних операційних системах.
  • Має доступ до нативних API. Розробники, які працюють над Electron JS, мають доступ до власних API операційних систем, на яких вони працюють. Таким чином, розробники можуть створювати додатки для настільних комп’ютерів, які мають аналогічний доступ до низькорівневих функцій, наприклад відображення сповіщень.
  • Підтримує веб-технології. Electron JS є адаптивним, оскільки розробникам не потрібно вивчати нову мову програмування для розробки програм. Це означає, що якщо ви розумієте певний мовний пакет, який уже використовуєте для створення веб-програм, ви також можете використовувати його для створення настільної програми.
  • Управління кодом і додатком. Вам не потрібно підтримувати різні команди, щоб підтримувати програми та код для різних операційних систем. Electron JS дозволяє підтримувати ту саму кодову базу для операційних систем Linux, Windows і Mac.
  • Легке збирання/розгортання. Менеджер пакунків Electron допомагає розробникам пакувати у відповідні пакети. Таким чином, ви можете випустити настільну програму для Linux, Mac і Windows з однієї кодової бази за допомогою цього менеджера пакетів.
  13 класних ігор для Apple Arcade

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

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

Архітектура Electron включає V8 JavaScript Engine, Node.JS і Libchromiumcontent.

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

#1. Node.js

Щоб розпочати роботу з Electron 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.

  Як виправити повільний або нереагуючий Mac

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

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

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

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

npm install --save-dev electron

Крок 3: Додайте команду «старт» до вашого package.json

{

  "scripts": {

    "start": "electron ."

  }

}

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

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

npm start

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

Ми продовжимо створювати програму на основі налаштувань, які ми щойно зробили вище. Програма 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>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./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 для відтворення високоякісного коду.

  Виправити помилку Boot Camp Assistant Not Enough Space Error

#2. Настільна програма WordPress

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

#3. Настільна програма WhatsApp

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

#4. Код Visual Studio

Visual Studio Code, що належить Microsoft, є одним з найпопулярніших редакторів коду. Visual Studio Code підтримує 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 — платний курс на Udemy, який навчає розробників створювати програми Electron за допомогою React.js. React — одна з найвідоміших бібліотек JavaScript, створена Meta (раніше Facebook).

Підведенню

Electron JS — чудова бібліотека JavaScript для створення програм для настільних комп’ютерів у сучасному світі, де мають бути прийняті кросплатформні програми. Той факт, що ви можете використовувати HTML, CSS і JavaScript, означає, що розробникам не потрібно вивчати нові технологічні стеки для створення таких програм. Наявність великої спільноти, яка підтримує вас, також є плюсом, оскільки вам завжди гарантована підтримка.

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