Kaip paversti savo svetainę darbalaukio programa naudojant Electron

Šiandien daugelis kasdien naudojamų darbalaukio programų yra sukurtos naudojant tokias žiniatinklio technologijas kaip HTML, CSS ir „JavaScript“ . Tokie įrankiai kaip „Visual Studio Code“, „Slack“, „Discord“ ir „Postman“ iš esmės yra svetainės, kurios veikia kaip darbalaukio programos dėl galingos sistemos: „Electron“ . Norėdami sužinoti daugiau apie šį procesą, galite peržiūrėti, kaip transformuoti žiniatinklio programas į darbalaukio versijas naudojant „Chrome“.

Bet ką tai iš tikrųjų reiškia? Tai reiškia, kad galite paimti bet kurią žiniatinklio programą, net ir paprastą puslapį, sukurtą naudojant „React“, „Vue“ ar bet kurią kitą modernią „JavaScript“ sistemą , ir paversti ją įdiegiamąja programa, skirta „Windows“ , „Linux“ ar „macOS“ . Ši galimybė atvėrė duris tūkstančiams kūrėjų paversti savo žiniatinklio darbus vietiniais darbalaukio įrankiais, nereikia mokytis sudėtingų kalbų ar sistemų, tokių kaip C++ ar Java.

Kas yra Electron ir kodėl jis toks aktualus?

„Electron“ yra „GitHub“ sukurta atvirojo kodo sistema , kuri sujungia „Chromium“ ( „Google Chrome“ naršyklės variklį ) su „Node.js“, leisdama žiniatinklio programoms veikti taip, tarsi jos būtų gimtosios skirtingose ​​platformose. Paprastai tariant, „Electron“ veikia kaip įkapsuluota naršyklė , kuri įkelia jūsų žiniatinklio projektą ir suteikia jam prieigą prie operacinės sistemos funkcijų.

Tai turi daug privalumų: galite naudoti tą patį technologijų rinkinį, kurį jau žinote (HTML, CSS, JS), pakartotinai naudoti esamus komponentus ir bibliotekas bei sukurti vieną šaltinio kodą kelioms operacinėms sistemoms.

Pagrindinė elektronų programos struktūra

„Electron“ programa daugiausia suskirstyta į du procesus:

• Pagrindinis procesas: Tai yra programos pagrindas, kuriame langai kuriami ir valdomi naudojant modulį BrowserWindow. Šis procesas turi visišką prieigą prie operacinės sistemos dėka Node.js.
• Atvaizdavimo procesas: čia pateikiama vartotojo sąsaja (UI), atitinkanti tai, ką pamatytumėte a interneto naršyklė. Kiekvienas jūsų sukurtas langas turės savo atvaizdavimo procesą.

Šie procesai yra izoliuoti dėl saugumo priežasčių; todėl norint pasiekti vietines funkcijas (pvz., atidaryti failus ar rodyti pranešimus), būtinas jų tarpusavio ryšys. Tai atliekama naudojant „ ipcMain“ ir „ipcRenderer“ modulius.

Abu procesai gali pasiekti „Node.js“ funkcijas , kurios atveria daugybę galimybių, tokių kaip sistemos failų skaitymas, HTTP užklausų teikimas, vietinių duomenų bazių valdymas ir kt.

Darbo pradžia: „Electron“ diegimas ir konfigūravimas

Prieš pradėdami, turite įdiegti „Node.js“ ir „npm“ („Node“ paketų tvarkyklę). Tada galite įdiegti „Electron“ kaip kūrimo priklausomybę savo žiniatinklio projekte:

npm install electron --save-dev

Taip pat galite įdiegti visame pasaulyje:

npm install -g electron

Įdiegę turite sukurti pagrindinį proceso įvesties failą. Pagal susitarimą jis vadinamas main.js o electron.js ir turi būti nurodyta paketas.json su turtu main:

"main": "electron.js"

Šiame faile bus kažkas panašaus į šį, kad atidarytumėte programą:

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

Šis kodas sukuria konkretaus dydžio langą, į kurį įkeliamas failas index.html.

Kaip integruoti žiniatinklio programą į Electron

Nesvarbu, ar jūsų programa sukurta naudojant „React“, „Vue“, „Angular“, ar paprastą „JavaScript“ , tikslas yra tas pats: pateikti žiniatinklio turinį atvaizduojančiam vartotojui. Tam turite dvi galimybes:

• Kūrimo režimas: įkelti programą iš http://localhost:3000 naudojant win.loadURL() kūrimo režimu.
• Gamybos režimas: sukurkite žiniatinklio programą ir įkelkite iš file:// tiesiogiai index.html su win.loadFile().

Pavyzdžiui, jei naudojate React with Vite, po to npm run build, gautas failas yra dist/index.html ir įkeliama taip:

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

Iš anksto įkelkite scenarijus ir tarpprocesinį ryšį

Siekiant pagerinti saugumą ir funkcionalumą, daugelyje programų yra failas, vadinamas preload.js kuris veikia prieš atvaizduojant, bet sukūrus langą. Tai leidžia kontroliuoti tam tikrus metodus.

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

Ir pagrindiniame procese:

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

Tokiu būdu galite perduoti procesus nepakenkdami saugumui ir neatskleisdami jautrių kintamųjų. Jei norite sužinoti daugiau apie tai, kaip veikia darbalaukio programos, galite peržiūrėti straipsnį apie „WhatsApp“ darbalaukio programos užrakinimą.

Kelių platformų pakavimas ir platinimas

Kai jūsų programa veiks tinkamai, galite naudoti tokius įrankius kaip „electron-builder“ arba „electron-packager“ , kad supakuotumėte ją į diegiamus formatus:

• Windows: .exe arba NSIS diegimo programos
• macOS: .dmg arba .app
• Linux: .AppImage, .deb arba .tar.gz

Diegiate su:

npm install --save-dev electron-builder

Ir jūs apibrėžiate savo package.json kūrimo konfigūracija:

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

Tada bėgate:

npm run build
npm run dist

Patobulinimai, kuriuos galite integruoti į savo darbalaukio programą

Konvertavus programą ir paleidus ją kaip darbalaukio programą, galite ją patobulinti naudodami savąsias funkcijas:

• Rodyti pranešimus iš savo sąsajos.
• Vietiniai meniu failas, redagavimas, pagalba ir kt.
• Prieiga prie failų sistemos skaitymui ir rašymui.
• Spartieji klavišai paprotys globaliai apibrėžta.

Taip pat galite integruoti tokias bibliotekas kaip:

• slydimas-dėlionė-variklis dėlionės žaidimams.
• sqlite3 o nedb vietinėms duomenų bazėms.
• aštrus vaizdo apdorojimui.

Ar „Electron“ visada yra geriausias pasirinkimas?

Elektronika turi tam tikrų trūkumų , į kuriuos reikėtų atsižvelgti:

• Didelis atminties suvartojimas, nes jame veikia Chromium + Node.js.
• Nemažas vykdomojo failo dydis, net ir paprastoms programėlėms.
• Senesnių arba mažai RAM turinčių kompiuterių našumo problemos.

Vis dėlto, jei optimizuosite savo kodą ir neįkelsite nereikalingų bibliotekų, galite pasiekti gerų rezultatų. Kai kurios programos, pvz., „Visual Studio Code“, tai rodo. Jei domitės, kaip mobilieji įrenginiai nustos palaikyti „WhatsApp“ 2025 m. balandžio mėn., į tai svarbu atsižvelgti.

Viskas priklauso nuo jūsų projekto tikslo : jei jums reikia greito kūrimo, suderinamumo su skirtingomis platformomis ir modernios sąsajos, „Electron“ yra idealus pasirinkimas. Tačiau jei ieškote maksimalaus išteklių naudojimo efektyvumo, vietinių programų kūrimas gali būti tinkamas pasirinkimas.

Kaip matėte, „Electron“ leidžia kurti darbalaukio programas naudojant tas pačias technologijas, kurias naudojate žiniatinklyje . Ji yra universali, gerai dokumentuota ir turi augančią bendruomenę. Nuo produktyvumo įrankių iki paprastų vaizdo žaidimų – kūrėjams, norintiems perkelti savo žiniatinklio patirtį už naršyklės ribų, galimybės yra neribotos. Jei turite žiniatinklio projektą, kurį norite platinti kaip programėlę, „Electron“ neabejotinai yra puikus įrankis tai padaryti greitai ir neišradinėjant dviračio.