Ghid complet și resurse de învățare

de
Tweet
Share
Share
Pin

JavaScript se distinge ca unul dintre cele mai răspândite limbaje de programare. Popularitatea sa este amplificată de versatilitatea sa, fiind utilizat atât în dezvoltarea backend, cât și frontend, devenind o opțiune preferată pentru mulți programatori.

Ecosistemul JavaScript este bogat în biblioteci și framework-uri care extind funcționalitățile sale dincolo de forma sa „vanilla” (pură).

Electron.js este un framework puternic, cu sursă deschisă, care le oferă dezvoltatorilor web posibilitatea de a crea aplicații native folosind abilitățile lor existente. Acest articol își propune să vă introducă în lumea Electron.js și să vă arate cum poate fi folosit pentru a da viață următoarei dvs. idei inovatoare.

Electron JS

Electron JS este un framework care permite programatorilor să construiască aplicații desktop folosind tehnologii web familiare precum HTML, CSS și JavaScript. Dezvoltat și susținut de GitHub, Electron JS oferă o soluție eficientă pentru crearea de aplicații desktop.

Acest framework combină puterea Node.JS cu motorul Chromium, permițând dezvoltatorilor să utilizeze o bază de cod JavaScript unică pentru a dezvolta aplicații desktop multiplatformă compatibile cu Windows, macOS și Linux.

Istoria Electron.js începe în ianuarie 2013, cu scopul inițial de a crea un editor de text multiplatformă care să utilizeze JavaScript, HTML și CSS.

Inițial numit Atom Shell, proiectul a devenit open-source în 2014. Ulterior, în aprilie 2015, a fost redenumit Electron, iar primul său API a fost lansat în 2016.

Caracteristicile Electron JS

  • Compatibilitate extinsă: Electron JS este compatibil cu numeroase biblioteci și framework-uri JavaScript, precum Vue.js, Angular și React.js. Această compatibilitate ușurează integrarea funcționalităților oferite de aceste instrumente în aplicațiile Electron.
  • Reutilizarea codului: Electron JS reduce costurile de dezvoltare, permițând utilizarea aceleiași baze de cod atât pentru aplicații web, cât și pentru aplicații desktop. Această abordare simplifică dezvoltarea și implementarea pe diferite sisteme de operare.
  • Acces la API-uri native: Dezvoltatorii pot accesa API-urile native ale sistemelor de operare, ceea ce permite crearea de aplicații desktop care beneficiază de funcționalități la nivel scăzut, cum ar fi notificările.
  • Suport pentru tehnologii web: Electron JS valorifică cunoștințele dezvoltatorilor de tehnologii web, permițându-le să creeze aplicații desktop fără a învăța noi limbaje de programare.
  • Administrare eficientă a codului: Nu este necesară menținerea unor echipe separate pentru fiecare sistem de operare. Electron JS permite gestionarea aceleiași baze de cod pentru Linux, Windows și Mac.
  • Implementare simplificată: Managerul de pachete Electron facilitează crearea de pachete de instalare specifice fiecărui sistem de operare, simplificând procesul de lansare a aplicațiilor desktop.

Arhitectura Electron JS

Arhitectura Electron este similară cu cea a unui browser web modern, moștenind structura multi-proces de la Chromium.

Structura Electron include motorul V8 JavaScript, Node.JS și Libchromiumcontent.

  • Node.JS – un mediu runtime JavaScript open-source care rulează pe motorul JavaScript V8. Permite executarea codului JavaScript în afara browserului și executarea codului prin intermediul shell-ului interactiv.
  • Libchromiumcontent – o bibliotecă de randare Chromium open-source, întreținută de Google Chrome. Chrome utilizează un interfață de utilizator minimalistă, cu blink ca motor de aspect și V8 ca motor JavaScript.
  • V8 JavaScript Engine – un motor JavaScript open-source scris în C++ și JavaScript, dezvoltat de Google.

#1. Node.js

Pentru a utiliza Electron JS, trebuie să aveți Node.js instalat pe computerul dvs.

Alegeți versiunea potrivită de Node.js, în funcție de sistemul dvs. de operare.

Verificați dacă instalarea a fost realizată cu succes, executând următoarele comenzi:

node -v
npm -v

Dacă Node.js și npm sunt instalate corect, comenzile vor afișa versiunile respective.

#2. Linie de comandă

Modul de accesare al liniei de comandă diferă în funcție de sistemul de operare.

  • Linux: Depinde de distribuția utilizată.
  • Windows: PowerShell sau Command Prompt.
  • macOS: Terminal.

Unele editoare de cod, cum ar fi Visual Studio Code, includ un terminal integrat.

#3. Editor de cod

Un editor de cod este esențial pentru scrierea codului Electron JS. Visual Studio Code este una dintre cele mai bune opțiuni disponibile.

Cum se instalează Electron JS

Pasul 1: Creați un proiect node.js.

Folosiți aceste comenzi pentru a inițializa proiectul:

mkdir my-electron-app && cd my-electron-app
npm init

Comanda npm init vă va cere să completați câmpuri precum numele aplicației, punctul de intrare și descrierea.

Puteți utiliza numele implicit al folderului ca nume al aplicației. Asigurați-vă că punctul de intrare este setat la main.js.

Câmpurile precum autor și descriere pot fi completate cu orice valoare. După acești pași, fișierul package.json va arăta similar cu următorul:

{
"name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Peter Drury",
  "license": "MIT"
}

Pasul 2: Instalați Electron

Utilizați această comandă:

npm install --save-dev electron

Pasul 3: Adăugați comanda „start” în package.json

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

Pasul 4: Lansați aplicația

Folosiți această comandă pentru a lansa aplicația în modul dezvoltare:

npm start

Procesul de lucru Electron JS

Vom continua dezvoltarea aplicației pornind de la configurația creată anterior. O aplicație Electron are două tipuri principale de procese: principal și renderer.

Procesul principal

Scriptul principal reprezintă punctul de intrare al oricărei aplicații Electron. Aplicația va rula într-un mediu Node.js complet. Electron va căuta scriptul principal în fișierul package.json configurat în prealabil.

Creați un fișier main.js în folderul rădăcină pentru a inițializa scriptul principal. Puteți face acest lucru manual sau folosind această comandă:

touch main.js

Adăugați următorul cod în 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();
 }
});

Paginile web din Electron pot fi încărcate dintr-o adresă web externă sau dintr-un fișier HTML local. Pentru demonstrație, vom folosi un fișier HTML local.

Creați un fișier index.html în folderul rădăcină. Un exemplu de cod index.html este oferit mai jos, dar îl puteți personaliza:

<!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>Salut din Electron renderer!</title>
 </head>
 <body>
   <h1>Salut din 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>

Procesul de redare

Renderer-ul afișează conținutul web. Scripturile de preîncărcare conțin cod care este executat într-un proces de redare înainte ca conținutul web să fie încărcat.

Creați un fișier preload.js în folderul rădăcină și adăugați acest cod:

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])
  }
})

Lansați serverul de dezvoltare folosind `npm start`. Veți obține rezultatul dorit.

Exemple de aplicații: Electron JS

#1. Aplicația desktop Slack

Slack este un instrument popular pentru colaborare la distanță. Utilizatorii pot trimite mesaje, efectua apeluri și partaja fișiere. Slack are atât aplicații web, cât și aplicații desktop pentru macOS, Linux și Windows. Aplicația desktop Slack folosește motorul Chromium și Node.js pentru a oferi un cod de înaltă calitate.

#2. Aplicația desktop WordPress

WordPress este cel mai mare sistem de gestionare a conținutului. Accesibilitatea sa, inclusiv posibilitatea de a lansa un site web fără cunoștințe avansate de codare, atrage mulți utilizatori. WordPress poate fi accesat prin browser și prin aplicații desktop pe Mac, Linux și Windows. Aplicația desktop WordPress utilizează Electron JS.

#3. Aplicația desktop WhatsApp

WhatsApp este una dintre cele mai populare aplicații de mesagerie din lume, folosită de peste 2 miliarde de oameni. Dezvoltată inițial ca aplicație mobilă, WhatsApp a evoluat într-o platformă pentru mai multe dispozitive. Aplicația desktop WhatsApp este construită folosind Electron JS și este disponibilă pe principalele sisteme de operare.

#4. Visual Studio Code

Visual Studio Code, dezvoltat de Microsoft, este un editor de cod popular. Suportă HTML, CSS și o gamă largă de limbaje de programare, printre care JavaScript, Python, PHP, Java și Ruby. Aplicația desktop este construită cu Electron JS și este disponibilă pentru Windows, macOS și Linux.

Resurse de învățare: Electron JS

#1. Documentația oficială Electronjs

Documentația oficială Electronjs este creată și susținută de Electronjs.org. Veți găsi informații despre ce este Electron JS, cum să configurați prima aplicație Electron și cum să construiți aplicații desktop multiplatformă folosind diverse tehnologii. Documentația este actualizată în mod regulat, odată cu introducerea unor îmbunătățiri sau funcții noi.

#2. Master Electron: aplicații desktop cu HTML, JavaScript și CSS

Master Electron este un curs plătit pe Udemy care oferă o introducere în Electron JS. Veți învăța cum să creați aplicații desktop pentru diferite sisteme de operare, cum ar fi Mac, Linux și Windows. Master Electron este o resursă excelentă pentru a înțelege funcționalitățile API-ului Electron.

#3. Tutorial Electron React

Electron React este un curs plătit pe Udemy care îi învață pe dezvoltatori cum să construiască aplicații Electron folosind React.js. React este una dintre cele mai populare biblioteci JavaScript, creată de Meta (fostul Facebook).

Încheierea

Electron JS este un instrument valoros pentru crearea de aplicații desktop multiplatformă. Posibilitatea de a utiliza HTML, CSS și JavaScript le permite dezvoltatorilor să construiască astfel de aplicații fără a învăța noi tehnologii. O comunitate mare și suportivă este un avantaj, oferind ajutor constant.

De asemenea, puteți explora unele dintre cele mai bune framework-uri JavaScript pentru a construi aplicații moderne mai rapid.