Пълно ръководство за създаване на десктоп приложения с Electron

  • Electron ви позволява да създавате родни приложения за различни платформи, като използвате уеб технологии.
  • Архитектура, базирана на независими процеси: основен и рендеринг.
  • Съвместимост с модерни рамки като Vue, Angular или React.
  • Включва системен достъп и опаковане с инструменти като Electron Forge.
Daniel Terrasa

5 Minutos

електрон js

Днес създаването на междуплатформени настолни приложения е по-лесно от всякога благодарение на инструменти като Електрон. Тази рамка, използвана от големи проекти като Visual Studio Code, Slack или Discord, ви позволява да комбинирате уеб технологии като HTML, CSS и JavaScript, за създавайте мощни приложения, които могат да работят Windows, macOS y Linux.

Ако сте уеб разработчик, който иска да издигне уменията си на следващото ниво чрез разработване на настолни приложения, това е чудесен инструмент. В това ръководство ще обясним от нулата Как работи Electron, как са структурирани неговите приложения и как се интегрира в съвременни технологии като напр Vue o ъглов да предлага атрактивни и професионални интерфейси.

Какво е Electron и защо трябва да го използвате?

Electron е рамка, първоначално разработена от GitHub под името atom-shell. Предложението му е просто, но силно: използване Хром (движката на Google Chrome) и Node.js така че приложението да може да показва уеб съдържание и в същото време да има достъп до функции на операционната система като файлова система, собствени процеси и т.н.

По същество Electron разделя работата си на два процеса:

  • Основен процес (Основен процес): Управлява основната логика на приложението, прозорците, менютата и естествената функционалност. Работи на Node.js.
  • Процес на изобразяване (Процес на изобразяване): Всеки прозорец има един. Това е мястото, където потребителският интерфейс се зарежда с помощта на HTML, CSS y JavaScript.

Тази архитектура позволява ясно разделяне на отговорностите между бизнес логиката и интерфейса, улеснявайки използването на модерни библиотеки като Реагират, Vue o ъглов без прекомерни усложнения.

структура на приложение Electron

Подготовка на вашата среда за разработка

Преди да започнете да пишете код, трябва да имате инсталиран Node.js. Все пак Електрон включва своя собствена версия на Възел, трябва да го управлявате във вашата система пакети y скриптове чрез npm.

Проверете вашата инсталация с:

node -v
npm -v

След като бъдете потвърдени, можете да създадете своя проект, като въведете следните команди във вашия терминал:

mkdir mi-electron-app
cd mi-electron-app
npm init -y
npm install electron --save-dev

Това ще генерира файл package.json основен и ще се инсталира Електрон като агенция за развитие. Също така добавете скрипт за стартиране на приложението:

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

Готови! Вече имате готова основа за първото си приложение Електрон.

Създаване на вашия първи файл: main.js

Това ще бъде входният файл за основния процес. Създайте файл, наречен main.js със следното съдържание:

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

С този прост скрипт ще генерирате естествен прозорец, който зарежда HTML страница от вашата локална папка.

създавайте приложения с електрон

Създаване на интерфейса: index.html и preload.js

В корена на проекта създайте файла index.html с основна структура:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera App con Electron</title>
</head>
<body>
  <h1>Hola mundo desde Electron</h1>
  <p>Node: <span id="node-version"></span></p>
  <p>Chrome: <span id="chrome-version"></span></p>
  <p>Electron: <span id="electron-version"></span></p>
  <script>require('./renderer.js')</script>
</body>
</html>

Също така добавете файл renderer.js който, както в конвенционална уеб среда, манипулира DOM и отпечатва версии на средите:

document.getElementById('node-version').textContent = process.versions.node;
document.getElementById('chrome-version').textContent = process.versions.chrome;
document.getElementById('electron-version').textContent = process.versions.electron;

Междупроцесна комуникация с IPC

Един от ключовете за Електрон е, че Основният процес и процесите на изобразяване не могат да споделят директно променливи за безопасност. Вместо това те използват система за съобщения, наречена IPC (Комуникация между процесите). За да се задълбочите в този тип комуникация, препоръчваме да прочетете за нововъзникващи езици за програмиране.

Състои се от две части:

  • ipcMain: слуша съобщения в главния процес.
  • ipcRenderer: изпраща съобщения от рендерера.

Един прост пример би бил изпращането на „ping“ от интерфейса и получаването на „pong“ от main.js. В скрипта за предварително зареждане можете да изложите функционалност по следния начин:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  ping: () => ipcRenderer.invoke('ping')
});

И в main.js:

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

ipcMain.handle('ping', () => {
  return 'pong';
});

В рендера, който можете да използвате window.electronAPI.ping() за изпълнение на функцията.

Vue

Използване на модерни рамки: Vue, Angular или React

Electron е съвместим с всяка интерфейсна библиотека или рамка, тъй като това, което по същество изобразява, е HTML, и работи като браузър. Можете да използвате бързо като пакетиращ инструмент, с който работи чудесно електрон-строител o електрон-ковашка. Ако имате нужда от повече информация как да използвате бързо, консултация Тази статия за отдалечени настолни компютри.

Например, за да започнете проект бързо y Vue:

npm init electron-app@latest mi-app -- --template=vite

Това ще ви донесе готова за използване структура. Vue или дори написан на пишеща машина. Ще трябва само да конфигурирате vite.renderer.config.mjs така че бързо правилно обработете .vue и добавете пътищата към вашите компоненти и файлове.

Опаковане на вашето приложение за разпространение

След като приложението ви е готово, следващата стъпка е да го опаковате. За целта можете да използвате инструменти като:

  • Електронна ковачница: прост и силно интегриран с модерни шаблони.
  • Електрон Builder: по-гъвкав, но с по-голяма конфигурационна крива.

Con Електронна ковачница Опаковането на вашето приложение е толкова просто, колкото стартирането:

npm run make

Това ще генерира изпълним файл, готов за инсталиране Windows, macOS o Linux в зависимост от вашата операционна система.

Добавяне на още разширени функции

След като стартирате и стартирате основното си приложение, можете да обмислите следните подобрения:

  • Внедрете системни функционалности като избор на файл с dialog.
  • употреба fs за четене и писане на файлове от рендера чрез preload.
  • Интегрирайте решения като напр Попътен вятърCSS за подобряване на дизайна на вашия интерфейс.
  • Установете разширена комуникация между процесите с ipcMain.handle() така че да могат лесно да връщат отговори.

Ако модерният преден край ви харесва повече, можете дори да създавате подобни на игри приложения като плъзгащ се пъзел, като използвате библиотеки като slide-puzzle-engine и рендиране на дъската в реално време в рамките на рендера с Vue.js.

Това показва неограничения потенциал, който притежава Електрон в различни видове проекти, от административни инструменти до случайни игри.