Kako svoju web stranicu pretvoriti u desktop aplikaciju uz Electron

Danas su mnoge aplikacije za stolna računala koje svakodnevno koristite izrađene pomoću web tehnologija kao što su HTML, CSS i JavaScript. Alati poput Visual Studio Code, Slack, Discord ili Postman To su u biti web stranice koje funkcioniraju kao desktop aplikacije zahvaljujući vrlo moćnom okviru: Elektron. Da biste saznali više o ovom procesu, možete provjeriti kako transformirati web-aplikacije u aplikacije za stolna računala pomoću Chromea.

Ali što ovo zapravo znači? To znači da možete uzeti bilo koju web aplikaciju, čak i jednostavnu stranicu izrađenu s React, Vue ili bilo koji drugi moderni JavaScript framework, i pretvoriti ga u program koji se može instalirati za Windows, Linux ili macOS. Ova je mogućnost otvorila vrata tisućama programera da transformiraju svoj web rad u izvorne alate za stolna računala bez učenja kompliciranih jezika ili okvira kao što su C++ ili Java.

Što je Electron i zašto je toliko relevantan?

Electron je open source framework razvijen od strane GitHub koji kombinira Chromium (motor preglednika Google Chrome) s Node.js, što vam omogućuje pokretanje web aplikacija kao da su izvorne na različitim platformama. Jednostavnim riječima, Electron djeluje kao inkapsulirani preglednik koji učitava vaš web projekt i daje mu pristup značajkama operativnog sustava.

To ima mnoge prednosti: možete koristiti isti tehnološki skup koji već poznajete (HTML, CSS, JS), ponovno koristiti postojeće komponente i biblioteke i stvoriti jedan izvorni kod za više projekata. OS.

Osnovna struktura Electron aplikacije

Aplikacija u Electronu uglavnom se dijeli na dva procesa:

• Glavni postupak: To je srž aplikacije, gdje se prozori kreiraju i kontroliraju pomoću modula BrowserWindow. Ovaj proces ima puni pristup operativnom sustavu zahvaljujući Node.js.
• Proces renderera: Ovdje se prikazuje korisničko sučelje (UI), ekvivalentno onome što biste vidjeli u a web preglednik. Svaki prozor koji stvorite imat će vlastiti proces iscrtavanja.

Ovi su procesi izolirani iz sigurnosnih razloga, pa je komunikacija između njih nužna za pristup izvornim funkcijama (kao što je otvaranje datoteka ili prikazivanje obavijesti). To se radi kroz module ipcMain e ipcRenderer.

Oba procesa mogu pristupiti funkcionalnosti Node.js., što otvara niz mogućnosti poput čitanja sistemskih datoteka, postavljanja HTTP zahtjeva, rukovanja baza podataka lokalni, između ostalog.

Početak rada: Instaliranje i konfiguriranje Electrona

Prije nego što počnete, morate instalirati Node.js y NPM (Upravitelj paketa Node). Zatim možete instalirati Electron kao razvojnu ovisnost u svom web projektu:

npm install electron --save-dev

Možete ga instalirati i globalno:

npm install -g electron

Nakon instaliranja, morate stvoriti glavnu ulaznu datoteku procesa. Po dogovoru se zove main.js o electron.js i mora biti navedeno u paket.json s imovinom main:

"main": "electron.js"

Ova će datoteka sadržavati nešto poput sljedećeg za otvaranje vaše aplikacije:

const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);

Ovaj kod stvara prozor određene veličine koji učitava vašu datoteku index.html.

Kako integrirati web aplikaciju u Electron

Bez obzira je li vaša aplikacija napravljena s React, Vue, Angular ili vanilla JavaScript, cilj je isti: poslužiti web-sadržaj procesu obrade. Za to imate dvije mogućnosti:

• Način razvoja: učitavanje aplikacije iz http://localhost:3000 pomoću win.loadURL() u razvojnom modu.
• Način proizvodnje: Izradite svoju web-aplikaciju i učitavajte iz nje file:// izravno index.html s win.loadFile().

Na primjer, ako koristite React s Viteom, nakon što ste to učinili npm run build, rezultirajuća datoteka nalazi se u dist/index.html a učitava se ovako:

mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));

Prethodno učitavanje skripti i međuprocesna komunikacija

Za poboljšanje sigurnosti i funkcionalnosti, mnoge aplikacije uključuju datoteku pod nazivom preload.js koji se pokreće prije renderiranja, ali nakon što je prozor kreiran. To omogućuje da se određene metode izlažu na kontrolirani način.

contextBridge.exposeInMainWorld('electronAPI', {
  closeApp: () => ipcRenderer.send('close')
});

I u glavnom procesu:

ipcMain.on('close', () => {
  app.quit();
});

Na taj način možete komunicirati procese bez gubitka sigurnosti ili izlaganja osjetljivih varijabli. Ako želite saznati više o tome kako funkcioniraju aplikacije za stolna računala, možete istražiti članak o rušenju aplikacije za stolna računala. Whats App.

Pakiranje i distribucija na više platformi

Nakon što vaša aplikacija ispravno radi, možete koristiti alate kao što su elektron-graditelj o pakir elektrona Za pakiranje aplikacije u formate koji se mogu instalirati:

• Windows: .exe ili NSIS instalacijski programi
• macOS: .dmg ili .app
• Linux: .AppImage, .deb ili .tar.gz

Instalirate sa:

npm install --save-dev electron-builder

I definirate u svom package.json konfiguracija izrade:

"build": {
  "appId": "com.miempresa.miapp",
  "productName": "MiApp",
  "directories": {
    "output": "dist_electron"
  },
  "files": ,
  "win": {
    "target": "nsis"
  }
}

Zatim pokrenete:

npm run build
npm run dist

Poboljšanja koja možete integrirati u svoju desktop aplikaciju

Nakon što svoju aplikaciju pretvorite i pokrenete kao aplikaciju za stolno računalo, možete je poboljšati izvornim značajkama:

• Pokaži obavijesti sustava s vašeg sučelja.
• Izvorni jelovnici datoteka, uređivanje, pomoć itd.
• Pristup datotečnom sustavu za čitanje i pisanje.
• Prečice na tipkovnici običaj globalno definiran.

Također možete integrirati biblioteke kao što su:

• slajd-puzzle-motor za puzzle igre.
• sqlite3 o nedb za lokalne baze podataka.
• oštar za obradu slike.

Je li Electron uvijek najbolja opcija?

Elektronika ima nešto nedostaci to treba uzeti u obzir:

• Velika potrošnja memorije, budući da pokreće Chromium + Node.js.
• Znatna veličina izvršne datoteke, čak i za jednostavne aplikacije.
• Problemi s performansama na starijim računalima ili računalima s malo RAM-a.

Ipak, ako optimizirate svoj kod i izbjegavate učitavanje nepotrebnih biblioteka, možete postići dobre rezultate. Neke aplikacije poput Visual Studio Code to pokazuju. U slučaju da vas zanima kako će mobilni uređaji prestati podržavati WhatsApp u travnju 2025., ovo je važna činjenica koju treba uzeti u obzir.

Sve ovisi o cilju vašeg projektaAko trebate brzi razvoj, kompatibilnost s više platformi i moderno sučelje, Electron je idealan. Ali ako tražite maksimalnu učinkovitost resursa, možda je razvoj izvornih aplikacija za vas.

Kao što vidiš, Electron vam omogućuje izradu desktop aplikacija s istim tehnologijama koje koristite za web.. Svestran je, dobro dokumentiran i ima rastuću zajednicu. Od alata za produktivnost do igra jednostavno, mogućnosti su otvorene za programere koji svoje web iskustvo žele prenijeti izvan preglednika. Ako imate web projekt koji želite distribuirati kao aplikaciju, bez sumnje Electron je savršen alat da to učinite brzo i bez ponovnog pronalaženja kotača..