Ghid complet și resurse de învățare

de
Tweet
Share
Share
Pin

JavaScript este printre cele mai comune limbaje de programare. Faptul că poate fi folosit atât pentru dezvoltarea backend, cât și pentru dezvoltarea frontend a făcut-o un dragut pentru mulți oameni.

JavaScript are multe biblioteci și framework-uri care își extind cazurile de utilizare dincolo de JavaScript vanilla (pur).

Electron.js este un cadru puternic open-source care oferă dezvoltatorilor web capacitatea de a dezvolta aplicații native cu abilitățile lor existente. Acest articol vă va învăța despre Electron.js și cum poate fi folosit pentru a vă alimenta următoarea idee uimitoare.

Electron JS

Electron JS este un cadru pe care dezvoltatorii îl pot folosi pentru a crea aplicații desktop folosind HTML, CSS și JavaScript. Electron JS a fost creat și este întreținut de GitHub.

Cadrul este un amestec de Node.JS și Chromium, permițând utilizatorilor să mențină o bază de cod JavaScript și să dezvolte aplicații desktop multiplatforme care pot funcționa pe Windows, macOS și Linux.

Povestea Electron.js a început în ianuarie 2013. Ideea inițială a fost de a crea un editor de text multiplatform care ar putea funcționa cu JavaScript, HTML și CSS.

Electron.js a fost inițial denumit Atom Shell și a devenit open source în 2014. Proiectul a fost redenumit ulterior Electron în aprilie 2015, iar primul său API a fost lansat în 2016.

Caracteristicile Electron JS

  • Compatibil cu toate bibliotecile și cadrele JavaScript. Vue.js, Angular și React.js sunt doar exemple de cadre JavaScript pe care dezvoltatorii le pot folosi împreună cu Electron JS. Această compatibilitate face ușoară utilizarea caracteristicilor/funcționalităților acestor biblioteci și cadre atunci când creați o aplicație Electron.
  • Cadru reutilizabil. Atingerea nevoilor diferiților clienți poate fi costisitoare. Lucrul bun cu Electron JS este că poate fi folosit atât pentru aplicații web, cât și pentru desktop. Baza de cod unică înseamnă că poate fi folosită și pe diferite sisteme de operare.
  • Are acces la API-urile native. Dezvoltatorii care lucrează pe Electron JS au acces la API-urile native ale sistemelor de operare pe care operează. Dezvoltatorii pot crea astfel aplicații desktop care au acces similar la funcționalități de nivel scăzut, cum ar fi afișarea notificărilor.
  • Suporta tehnologia web. Electron JS este adaptabil, deoarece dezvoltatorii nu trebuie să învețe un nou limbaj de programare pentru a dezvolta aplicații. Astfel, înseamnă că, dacă înțelegeți un anumit pachet de limbă pe care îl utilizați deja pentru a crea aplicații web, îl puteți folosi și pentru a crea o aplicație desktop.
  • Administrarea codului și a aplicațiilor. Nu trebuie să mențineți diferite echipe pentru a întreține aplicații și cod pentru diferite sisteme de operare. Electron JS vă permite să mențineți aceeași bază de cod pentru sistemele de operare Linux, Windows și Mac.
  • Construire/implementare ușoară. Managerul de pachete Electron ajută dezvoltatorii să împacheteze în pachetele lor respective. Astfel, puteți elibera o aplicație desktop Linux, Mac și Windows din aceeași bază de cod folosind acest manager de pachete.
  Cele mai bune 10 instrumente Ping Sweep pentru a vă spune mai multe despre rețeaua dvs

Arhitectura Electron JS

Arhitectura lui Electron este foarte asemănătoare cu cea a unui browser web modern, deoarece moștenește arhitectura sa multi-proces de la Chromium.

Arhitectura Electron cuprinde V8 JavaScript Engine, Node.JS și Libchromiumcontent.

  • Node.JS – un runtime JavaScript open-source care rulează pe motorul JavaScript V8. Node.JS le permite dezvoltatorilor să ruleze JavaScript în afara ferestrei browserului. De asemenea, Node.JS permite utilizatorilor să execute cod JavaScript brut prin intermediul shell-ului său interactiv.
  • Libchromiumcontent – o bibliotecă de randare Chromium care este open source și întreținută de Google Chrome. Chrome are o interfață de utilizator minimalistă și folosește blink ca motor de aspect și V8 ca motor JavaScript.
  • V8 JavaScript Engine – un motor JavaScript open-source scris în C++ și JavaScript și dezvoltat de Google.

#1. Node.js

Pentru a începe cu Electron JS, trebuie să aveți instalat Node.js pe mașina dvs. locală.

Selectați versiunea de nod potrivită, în funcție de sistemul de operare pe care îl executați pe computer.

Verificați dacă Node.js a fost instalat corect rulând aceste comenzi;

node -v
npm -v

Dacă sunt instalate corect, aceste comenzi vor afișa versiunile node și, respectiv, npm.

#2. Linie de comanda

Modul în care accesați linia de comandă va depinde de sistemul dvs. de operare.

  • Linux va depinde de distribuție.
  • Windows: PowerShell sau Command Prompt.
  • macOS: Terminal.

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

#3. Editor de coduri

Aveți nevoie de un editor de cod pentru a vă scrie codul Electron JS. Codul Visual Studio este printre cele mai bune pe care le puteți încerca.

Cum se instalează Electron JS

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

  Cum să gestionați abonamentele în iTunes pe iPhone-ul dvs

Utilizați aceste comenzi pentru a începe;

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

Comanda npm init vă va solicita să completați unele câmpuri, cum ar fi numele aplicației, punctul de intrare și descrierea.

Puteți alege numele implicit al folderului dvs. ca nume al aplicației. Cu toate acestea, nu uitați să setați punctul de intrare al aplicației dvs. ca main.js.

Câmpuri precum autor și descriere pot lua orice valoare. Package.json va arăta cam așa după ce ați terminat cu acești pași:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Pasul 2: Instalați electronul

Utilizați această comandă;

npm install --save-dev electron

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

{

  "scripts": {

    "start": "electron ."

  }

}

Pasul 4: Porniți aplicația

Utilizați această comandă pentru a porni aplicația în modul de dezvoltare

npm start

Procesul de lucru Electron JS

Vom continua construirea aplicației din configurația pe care tocmai l-am făcut mai sus. O aplicație Electron are două tipuri de procese; principal și redator.

Procesul principal

Scriptul principal este punctul de intrare al oricărei aplicații electronice. Aplicația va rula într-un mediu complet Node.js. Electron va căuta scriptul principal în fișierul package.json pe care l-ați configurat deja în timpul schelei aplicației.

Creați main.js în folderul rădăcină pentru a inițializa scriptul principal. Puteți face acest lucru manual sau utilizați această comandă;

touch main.js

Puteți adăuga următorul cod la 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 fie de la o adresă web de la distanță, fie de la un fișier HTML local. Vom folosi un fișier HTML local în scopuri demonstrative.

Creați un fișier index.html în folderul rădăcină. Codul pentru index.html este întotdeauna furnizat, dar îl puteți avea ca cod de pornire;

<!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>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from 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

Rendererul redă conținut web. Scripturile de preîncărcare vin cu cod care se execută într-un proces de redare înainte ca conținutul web să înceapă să se încarce să fie necesar.

Creați 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])

  }

})

Rulați serverul de dezvoltare folosind npm start și acesta este ceea ce va fi afișat

  5 moduri de a elimina pachetele instalate pe Ubuntu

Exemple de aplicații: Electron JS

#1. Aplicația desktop Slack

Slack este unul dintre cele mai populare instrumente de colaborare la distanță. Utilizatorii pot trimite și primi mesaje, pot efectua apeluri și pot partaja fișiere folosind această aplicație. Slack are atât aplicații bazate pe web, cât și aplicații desktop pe sistemele de operare Mac, Linux și Windows. Aplicația desktop Slack folosește motorul Chromium și Node.js pentru a reda codul de înaltă calitate.

#2. Aplicație desktop WordPress

WordPress este cel mai mare sistem de gestionare a conținutului. Faptul că poți lansa un site web chiar și fără cunoștințe de bază de codare a atras mulți utilizatori. WordPress poate fi accesat prin browser și prin aplicații desktop pe Mac, Linux și Windows. Desktopul WordPress reînnoit folosește Electron JS.

#3. Aplicația desktop WhatsApp

WhatsApp este printre cele mai populare aplicații de mesagerie din lumea modernă, deoarece este folosit de peste 2 miliarde de oameni. WhatsApp a fost conceput inițial ca o aplicație mobilă, dar acum a trecut la o platformă pentru mai multe dispozitive. Desktopul WhatsApp utilizează Electron JS și este disponibil pe sistemele de operare majore.

#4. Codul Visual Studio

Visual Studio Code, deținut de Microsoft, este printre cei mai populari editori de cod. Visual Studio Code acceptă HTML, CSS și cod scris în diferite limbaje de programare, cum ar fi JavaScript, Python, PHP, Java și Ruby, pentru a menționa câteva. Aplicația desktop, creată folosind Electron JS, este disponibilă pentru sistemele de operare Windows, Mac și Linux.

Resurse de învățare: Electron JS

#1. Documentația oficială Electronjs

Documentația Electronjs este creată și întreținută de Electronjs.org. Veți învăța ce este Electron JS, cum să vă configurați prima aplicație Electron și cum să creați aplicații desktop multiplatforme folosind diverse tehnologii. Documentația este întotdeauna actualizată ori de câte ori este introdusă o îmbunătățire sau o funcție nouă.

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

Master Electron este un curs plătit pe Udemy care vă prezintă 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, de asemenea, resursa perfectă dacă doriți să înțelegeți întregul proces Electron API.

#3. Tutorial Electron React

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

Încheierea

Electron JS este o bibliotecă JavaScript minunată pentru crearea de aplicații desktop într-o lume modernă în care aplicațiile multiplatforme trebuie să fie adoptate. Faptul că puteți utiliza HTML, CSS și JavaScript înseamnă că dezvoltatorii nu trebuie să învețe noi stive de tehnologie pentru a crea astfel de aplicații. Prezența unei comunități mari și de susținere este, de asemenea, un plus, deoarece aveți întotdeauna sprijin garantat.

De asemenea, puteți explora unele dintre cele mai bune cadre JavaScript pentru a construi o aplicație modernă în mai puțin timp.