Комплетан водич и ресурси за учење

by
Tweet
Share
Share
Pin

JavaScript je jedan od najrasprostranjenijih programskih jezika. Njegova sposobnost da se koristi za razvoj i backenda i frontenda čini ga omiljenim izborom mnogih programera.

JavaScript poseduje brojne biblioteke i framework-e koji proširuju njegove primene izvan standardnog (vanila) JavaScript-a.

Electron.js je moćan open-source framework koji web programerima omogućava da razvijaju nativne aplikacije koristeći svoje postojeće veštine. Ovaj članak će vam objasniti šta je Electron.js i kako se može iskoristiti za realizaciju vaše sledeće sjajne ideje.

Electron JS

Electron JS je framework koji programeri mogu koristiti za kreiranje desktop aplikacija koristeći HTML, CSS i JavaScript. Electron JS je kreirao i održava GitHub.

Ovaj framework predstavlja kombinaciju Node.JS-a i Chromium-a, omogućavajući korisnicima da održe jednu JavaScript kodnu bazu i razvijaju multi-platformske desktop aplikacije koje funkcionišu na Windows, macOS i Linux operativnim sistemima.

Priča o Electron.js-u počela je u januaru 2013. godine. Prvobitna ideja bila je stvoriti multi-platformski editor teksta koji bi mogao raditi sa JavaScript-om, HTML-om i CSS-om.

Electron.js je prvobitno bio poznat kao Atom Shell i postao je open-source 2014. godine. Projekat je kasnije preimenovan u Electron u aprilu 2015, a njegov prvi API je objavljen 2016. godine.

Karakteristike Electron JS

  • Kompatibilan je sa svim JavaScript bibliotekama i framework-ima. Vue.js, Angular i React.js su samo neki primeri JavaScript framework-a koje programeri mogu koristiti zajedno sa Electron JS-om. Ova kompatibilnost olakšava korišćenje karakteristika/funkcionalnosti ovih biblioteka i framework-a prilikom kreiranja Electron aplikacije.
  • Framework za višekratnu upotrebu. Zadovoljavanje različitih potreba klijenata može biti skupo. Prednost Electron JS-a je što se može koristiti i za web i za desktop aplikacije. Jedinstvena kodna baza znači da se može koristiti na različitim operativnim sistemima.
  • Ima pristup nativnim API-jima. Programeri koji rade sa Electron JS-om imaju pristup nativnim API-jima operativnih sistema na kojima rade. Tako programeri mogu kreirati desktop aplikacije koje imaju sličan pristup funkcionalnostima niskog nivoa, kao što je prikazivanje notifikacija.
  • Podržava web tehnologiju. Electron JS je prilagodljiv jer programeri ne moraju učiti novi programski jezik da bi razvili aplikacije. To znači da ako razumete određeni jezički paket koji već koristite za kreiranje web aplikacija, možete ga koristiti i za kreiranje desktop aplikacije.
  • Upravljanje kodom i aplikacijama. Nema potrebe za održavanjem različitih timova da bi održavali aplikacije i kod za različite operativne sisteme. Electron JS vam omogućava da koristite istu kodnu bazu za Linux, Windows i Mac operativne sisteme.
  • Jednostavna izrada/instalacija. Electron package manager pomaže programerima da pakuju svoje aplikacije u odgovarajuće pakete. Na taj način možete objaviti desktop aplikacije za Linux, Mac i Windows iz iste kodne baze koristeći ovaj package manager.

Arhitektura Electron JS

Arhitektura Electron-a je veoma slična arhitekturi modernog web pretraživača jer nasleđuje svoju multi-procesnu arhitekturu od Chromium-a.

Arhitektura Electron-a uključuje V8 JavaScript Engine, Node.JS i Libchromiumcontent.

  • Node.JS – Open-source JavaScript runtime koji radi na V8 JavaScript mašini. Node.JS omogućava programerima da pokreću JavaScript van prozora pretraživača. Takođe, Node.JS omogućava korisnicima da izvršavaju sirovi JavaScript kod preko njegove interaktivne ljuske.
  • Libchromiumcontent – Chromium biblioteka za prikazivanje koja je open-source i koju održava Google Chrome. Chrome ima minimalistički korisnički interfejs i koristi blink kao mehanizam za raspored i V8 kao JavaScript mehanizam.
  • V8 JavaScript Engine – Open-source JavaScript engine napisan u C++ i JavaScript-u, koji je razvio Google.

#1. Node.js

Da biste počeli sa Electron JS, potrebno je da imate instaliran Node.js na vašoj lokalnoj mašini.

Odaberite odgovarajuću verziju Node.js-a u zavisnosti od operativnog sistema koji koristite na računaru.

Proverite da li je Node.js ispravno instaliran pokretanjem ovih komandi:

node -v
npm -v

Ako su ispravno instalirane, ove komande će prikazati verzije Node.js-a i npm-a.

#2. Komandna linija

Način na koji pristupate komandnoj liniji zavisiće od vašeg operativnog sistema.

  • Linux: Zavisi od distribucije.
  • Windows: PowerShell ili komandna linija.
  • macOS: Terminal.

Neki editori koda, kao što je Visual Studio Code, dolaze sa integrisanim terminalom.

#3. Editor koda

Potreban vam je editor koda da biste napisali svoj Electron JS kod. Visual Studio Code je među najboljim editorima koje možete isprobati.

Kako instalirati Electron JS

Korak 1: Kreirajte projekat Node.js.

Koristite ove komande da biste započeli:

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

Komanda npm init će od vas tražiti da popunite neka polja, kao što su naziv aplikacije, ulazna tačka i opis.

Možete odabrati podrazumevano ime svoje fascikle kao ime aplikacije. Međutim, ne zaboravite da postavite ulaznu tačku svoje aplikacije kao main.js.

Polja kao što su autor i opis mogu imati bilo koju vrednost. Vaš package.json će izgledati otprilike ovako kada završite sa ovim koracima:

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

Korak 2: Instalirajte Electron

Koristite ovu komandu:

npm install --save-dev electron

Korak 3: Dodajte komandu ‘start’ u svoj package.json

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

Korak 4: Pokrenite aplikaciju

Koristite ovu komandu da pokrenete svoju aplikaciju u razvojnom režimu:

npm start

Electron JS radni proces

Nastavićemo da gradimo aplikaciju iz podešavanja koje smo upravo napravili. Elektronska aplikacija ima dve vrste procesa: glavni i renderer.

Glavni proces

Glavna skripta je ulazna tačka bilo koje elektronske aplikacije. Aplikacija će raditi u punom Node.js okruženju. Electron će tražiti glavnu skriptu u datoteci package.json koju ste već konfigurisali tokom postavljanja aplikacije.

Kreirajte main.js u osnovnoj fascikli da biste inicijalizovali glavnu skriptu. Možete to učiniti ručno ili koristiti ovu komandu:

touch main.js

Možete dodati sledeći kod u 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();
 }
});

Web stranice u Electron-u se mogu učitati ili sa udaljene web adrese ili iz lokalne HTML datoteke. Koristićemo lokalnu HTML datoteku u svrhu demonstracije.

Napravite datoteku index.html u svom osnovnom direktorijumu. Kod za index.html je uvek obezbeđen, ali ovo možete imati kao početni kod:

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

Renderer proces

Renderer prikazuje web sadržaj. Preload skripte sadrže kod koji se izvršava u renderer procesu pre nego što je web sadržaj učitan.

Kreirajte preload.js u svom osnovnom direktorijumu i dodajte ovaj kod:

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

Pokrenite razvojni server koristeći npm start i ovo će biti prikazano:

Primeri aplikacija: Electron JS

#1. Slack desktop aplikacija

Slack je jedan od najpopularnijih alata za daljinsku saradnju. Korisnici mogu slati i primati poruke, upućivati pozive i deliti datoteke pomoću ove aplikacije. Slack ima web-bazirane i desktop aplikacije za Mac, Linux i Windows operativne sisteme. Slack-ova aplikacija za desktop koristi Chromium engine i Node.js za prikazivanje visokokvalitetnog koda.

#2. WordPress desktop aplikacija

WordPress je najveći sistem za upravljanje sadržajem. Činjenica da možete pokrenuti web lokaciju čak i bez osnovnih veština kodiranja privukla je mnoge korisnike. WordPress-u se može pristupiti preko pretraživača i preko desktop aplikacija na Mac-u, Linux-u i Windows-u. Obnovljena WordPress desktop aplikacija koristi Electron JS.

#3. WhatsApp desktop aplikacija

WhatsApp je među najpopularnijim aplikacijama za razmenu poruka u savremenom svetu, jer ga koristi preko 2 milijarde ljudi. WhatsApp je prvobitno dizajniran kao mobilna aplikacija, ali je sada prešao u multi-uređajsku platformu. WhatsApp desktop aplikacija koristi Electron JS i dostupna je na glavnim operativnim sistemima.

#4. Visual Studio Code

Visual Studio Code, u vlasništvu Microsoft-a, je među najpopularnijim editorima koda. Visual Studio Code podržava HTML, CSS i kod napisan u različitim programskim jezicima, kao što su JavaScript, Python, PHP, Java i Ruby, između ostalih. Desktop aplikacija, kreirana pomoću Electron JS, dostupna je za Windows, Mac i Linux operativne sisteme.

Resursi za učenje: Electron JS

#1. Electronjs zvanična dokumentacija

Electronjs dokumentaciju kreira i održava Electronjs.org. Naučićete šta je Electron JS, kako da podesite svoju prvu Electron aplikaciju i kako da kreirate multi-platformske aplikacije koristeći različite tehnologije. Dokumentacija se redovno ažurira kad god se uvede poboljšanje ili nova funkcija.

#2. Master Electron: Desktop aplikacije sa HTML, JavaScript i CSS

Master Electron je plaćeni kurs na Udemy-u koji vas upoznaje sa Electron JS-om. Naučićete kako da kreirate desktop aplikacije za različite operativne sisteme, kao što su Mac, Linux i Windows. Master Electron je takođe savršen resurs ako želite da razumete ceo Electron API proces.

#3. Electron React Tutorial

Electron React je plaćeni kurs na Udemy-u koji uči programere kako da kreiraju Electron aplikacije koristeći React.js. React je jedna od najpoznatijih JavaScript biblioteka i kreirala ju je Meta (ranije Facebook).

Zaključak

Electron JS je sjajna JavaScript biblioteka za kreiranje desktop aplikacija u savremenom svetu gde su multi-platformske aplikacije neophodne. Činjenica da možete da koristite HTML, CSS i JavaScript znači da programeri ne moraju da uče nove tehnologije da bi kreirali takve aplikacije. Prisustvo velike zajednice koja pruža podršku je takođe plus, jer vam je podrška uvek zagarantovana.

Takođe možete istražiti neke od najboljih JavaScript framework-a da biste napravili modernu aplikaciju za manje vremena.