Kompletní průvodce vytvářením desktopových aplikací s Electron

  • Electron vám umožňuje vytvářet multiplatformní nativní aplikace pomocí webových technologií.
  • Architektura založená na nezávislých procesech: main a renderer.
  • Kompatibilita s moderními frameworky jako Vue, Angular nebo React.
  • Zahrnuje přístup k systému a balení s nástroji jako Electron Forge.
Daniel Terrasa

5 minut

elektron js

Dnes je vytváření multiplatformních desktopových aplikací snazší než kdy jindy díky nástrojům jako Elektron. Tento framework, používaný velkými projekty, jako je Visual Studio Code, Slack nebo Discord, umožňuje kombinovat webové technologie, jako jsou HTML, CSS a JavaScript. vytvářet výkonné aplikace schopné běhu Windows, macOS y Linux.

Pokud jste webový vývojář a chcete posunout své dovednosti na další úroveň vývojem desktopových aplikací, je to skvělý nástroj. V této příručce vysvětlíme od začátku Jak funguje elektron, jak jsou jeho aplikace strukturovány a jak se integruje do moderních technologií jako např Vue o ANGULAR nabízet atraktivní a profesionální rozhraní.

Co je Electron a proč byste jej měli používat?

Electron je framework původně vyvinutý GitHubem pod názvem atom-shell. Jeho návrh je jednoduchý, ale silný: použití Chróm (motor Google Chrome) a Node.js aby aplikace mohla zobrazovat webový obsah a zároveň přistupovat k funkcím operačního systému, jako je souborový systém, nativní procesy atd.

V podstatě Electron rozděluje svůj provoz na dva procesy:

  • Hlavní proces (Hlavní proces): Řídí základní logiku aplikace, oken, nabídek a nativních funkcí. Běží na Node.js.
  • Proces vykreslování (Proces vykreslování): Každé okno má jedno. Zde se načítá uživatelské rozhraní pomocí HTML, CSS y JavaScript.

Tato architektura umožňuje jasné oddělení odpovědností mezi obchodní logikou a rozhraním, což usnadňuje používání moderních knihoven, jako je např. REACT, Vue o ANGULAR bez nadměrných komplikací.

struktura aplikace Electron

Příprava vašeho vývojového prostředí

Než začnete psát kód, musíte jej mít nainstalovaný Node.js. Ačkoli Elektron obsahuje vlastní verzi Uzel, potřebujete jej ve svém systému ke správě paquetes y skripty skrz npm.

Zkontrolujte instalaci pomocí:

node -v
npm -v

Po ověření můžete vytvořit svůj projekt zadáním následujících příkazů do terminálu:

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

Tím se vygeneruje soubor package.json základní a nainstaluje se Elektron jako vývojová závislost. Přidejte také skript pro spuštění aplikace:

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

Připraveno! Nyní máte připravený základ pro vaši první aplikaci Elektron.

Vytváření prvního souboru: main.js

Toto bude vstupní soubor pro hlavní proces. Vytvořte soubor s názvem main.js s následujícím obsahem:

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();
  }
});

Pomocí tohoto jednoduchého skriptu vygenerujete nativní okno, které načte stránku HTML z vaší místní složky.

vytvářet aplikace s elektron

Vytvoření rozhraní: index.html a preload.js

V kořenovém adresáři projektu vytvořte soubor index.html se základní strukturou:

<!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>

Přidejte také soubor renderer.js které, stejně jako v běžném webovém prostředí, manipuluje s DOM a tiskne verze prostředí:

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

Meziprocesová komunikace s IPC

Jeden z klíčů k Elektron je to, že Hlavní proces a procesy vykreslování nemohou sdílet proměnné přímo pro bezpečnost. Místo toho používají systém zasílání zpráv tzv IPC (meziprocesová komunikace). Chcete-li se hlouběji ponořit do tohoto typu komunikace, doporučujeme přečíst si o vznikající programovací jazyky.

Skládá se ze dvou částí:

  • ipcMain: poslouchá zprávy v hlavním procesu.
  • ipcRenderer: odesílá zprávy z rendereru.

Jednoduchým příkladem by bylo odeslání „pingu“ z rozhraní a přijetí „pong“ z main.js. Ve skriptu předběžného načtení můžete vystavit funkce takto:

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

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

A v main.js:

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

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

V rendereru můžete použít window.electronAPI.ping() ke spuštění funkce.

vyhlídka

Použití moderních frameworků: Vue, Angular nebo React

Electron je kompatibilní s jakoukoli frontend knihovnou nebo frameworkem, protože to, co v podstatě vykresluje, je HTMLa funguje jako prohlížeč. Můžete použít Žije jako balič, se kterým se skvěle pracuje stavitel elektronů o elektronová kovárna. Pokud potřebujete další informace o použití Žije, konzultace Tento článek o vzdálených plochách.

Například pro zahájení projektu Žije y Vue:

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

Tím získáte strukturu připravenou k použití. Vue nebo dokonce TypeScript. Budete muset pouze nakonfigurovat vite.renderer.config.mjs pro Žije správně zpracovat .vue a přidejte cesty ke svým komponentám a souborům.

Balení vaší aplikace pro distribuci

Po dokončení aplikace je dalším krokem její zabalení. K tomu můžete použít nástroje jako:

  • Elektronová kovárna: jednoduché a vysoce integrované s moderními šablonami.
  • Tvůrce elektronů: univerzálnější, ale s větší konfigurační křivkou.

s Elektronová kovárna Zabalení aplikace je stejně jednoduché jako spuštění:

npm run make

Tím se vygeneruje spustitelný soubor připravený k instalaci Windows, macOS o Linux v závislosti na operačním systému.

Přidání pokročilejších funkcí

Jakmile budete mít svou základní aplikaci spuštěnou, můžete zvážit následující vylepšení:

  • Implementujte systémové funkce, jako je výběr souborů pomocí dialog.
  • Usar fs číst a zapisovat soubory z rendereru přes preload.
  • Integrujte řešení jako např TailwindCSS zlepšit design vašeho rozhraní.
  • Navažte pokročilou komunikaci mezi procesy s ipcMain.handle() aby mohli snadno vrátit odpovědi.

Pokud vám jde spíše o moderní frontend, můžete dokonce vytvářet herní aplikace, jako je posuvné puzzle, pomocí knihoven jako slide-puzzle-engine a renderování desky v reálném čase v rámci rendereru s Vue.js.

To ukazuje neomezený potenciál, který má Elektron v různých typech projektů, od administrativních nástrojů po neformální hry.