Osnove Electron-a: Kako konfigurirati i pokrenuti aplikaciju Angular Electron

Electron vam omogućuje izradu desktop aplikacija za Windows, Mac i Linux. Kada izradite aplikaciju koristeći Electron, možete pregledati i pokrenuti aplikaciju kroz prozor aplikacije za radnu površinu.

kako testirati ako vaš tvrdi disk ne radi

Možete koristiti Electron za konfiguriranje Angular aplikacije za pokretanje na prozoru radne površine, umjesto uobičajenog web preglednika. To možete učiniti pomoću JavaScript datoteke unutar same aplikacije.

Nakon što konfigurirate Electron, možete nastaviti s razvojem kao što biste radili na običnoj Angular aplikaciji. Glavni dijelovi aplikacije i dalje će slijediti istu standardnu Angular strukturu.

Kako instalirati Electron kao dio vaše aplikacije

Da biste koristili Electron, trebate preuzeti i instalirati node.js i upotrijebiti npm install da biste dodali Electron svojoj aplikaciji.

Preuzmite i instalirajte čvor.js . Možete potvrditi da ste ga ispravno instalirali provjerom verzije:
```
node -v
```
Čvor također uključuje npm, JavaScript upravitelj paketa . Možete potvrditi da imate instaliran npm provjerom verzije npm-a:
```
npm -v
```
Stvorite novu Angular aplikaciju pomoću novih naredba. Ovo će stvoriti mapu koja sadrži sve potrebne datoteke potrebne za Angular projekt na posao.
```
ng new electron-app
```
U korijenskoj mapi vaše aplikacije koristite npm za instaliranje Electron.
```
npm install --save-dev electron
```
Ovo će stvoriti novu mapu za Electron u mapi node_modules aplikacije.
Također možete instalirati Electron globalno na svoje računalo.
```
npm install -g electron 
```

Struktura datoteke aplikacije Angular Electron

Electron će zahtijevati glavnu JavaScript datoteku za stvaranje i upravljanje prozorom radne površine. Ovaj će prozor prikazati sadržaj vaše aplikacije unutar njega. JavaScript datoteka također će sadržavati druge događaje koji se mogu dogoditi, kao što je ako korisnik zatvori prozor.

Tijekom izvođenja, prikazani sadržaj dolazi iz datoteke index.html. Prema zadanim postavkama možete pronaći datoteku index.html unutar src mapu, a tijekom izvođenja automatski se stvara njezina izgrađena kopija unutar mape dist mapa.

Lokacija glavne komponente aplikacije u mapi

Datoteka index.html obično izgleda ovako:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

Unutar oznake tijela nalazi se oznaka . Ovo će prikazati glavnu komponentu aplikacije za Angular aplikaciju. Glavnu komponentu aplikacije možete pronaći u src/aplikacija mapa.

Kako koristiti Electron za otvaranje Angular aplikacije u prozoru radne površine

Stvorite datoteku main.js i konfigurirajte je da otvara sadržaj aplikacije unutar prozora radne površine.

Stvorite datoteku u korijenu svog projekta pod nazivom glavni.js . U ovoj datoteci inicijalizirajte Electron tako da ga možete koristiti za stvaranje prozora aplikacije.
```
const { app, BrowserWindow } = require('electron');
```
Napravite novi prozor radne površine određene širine i visine. Učitajte datoteku indeksa kao sadržaj za prikaz u prozoru. Provjerite odgovara li put do datoteke indeksa nazivu vaše aplikacije. Na primjer, ako ste svoju aplikaciju nazvali 'electron-app', put će biti 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Kada je aplikacija spremna, pozovite funkciju createWindow(). Ovo će stvoriti prozor aplikacije za vašu aplikaciju.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
u src/index.html datoteka, u baza oznaku, promijenite href atribut u './'.
```
<base href="./">
```
U paket.json , dodati glavni i uključite datoteku main.js kao vrijednost. Ovo će biti ulazna točka za aplikaciju, tako da aplikacija pokreće datoteku main.js dok pokreće aplikaciju.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

u .browserslistrc datoteku, izmijenite popis kako biste uklonili iOS Safari verzije 15.2-15.3. To će spriječiti prikazivanje pogrešaka kompatibilnosti u konzoli prilikom kompajliranja.

last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3

Izbrišite zadani sadržaj u src/app/app.component.html datoteka. Zamijenite ga nekim novim sadržajem.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Dodajte malo stila za sadržaj u src/app/app.component.css datoteka.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

Dodajte malo cjelokupnog stila src/styles.css datoteku za uklanjanje zadanih margina i ispuna.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Kako pokrenuti Electron aplikaciju

Da biste svoju aplikaciju pokrenuli u prozoru, konfigurirajte naredbu u nizu skripti package.json. Zatim pokrenite svoju aplikaciju pomoću naredbe u terminalu.

U paket.json , unutar niza skripti dodajte naredbu za izradu Angular aplikacije i pokretanje Electrona. Provjerite jeste li dodali zarez nakon prethodnog unosa u polje skripti.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Za pokretanje vaše nove Angular aplikacije u prozoru radne površine, pokrenite sljedeće u naredbenom retku, u korijenskoj mapi vašeg projekta:
```
npm run electron
```
Pričekajte da se vaša aplikacija kompajlira. Nakon dovršetka, umjesto otvaranja vaše Angular aplikacije u web pregledniku, otvorit će se prozor radne površine. Prozor radne površine prikazat će sadržaj vaše Angular aplikacije.
Ako i dalje želite vidjeti svoju aplikaciju u web pregledniku, i dalje možete pokrenuti naredbu ng serve.
```
ng serve
```
Ako koristite od služiti naredba, sadržaj vaše aplikacije i dalje će se prikazivati u web pregledniku na lokalni host: 4200.

Izrada desktop aplikacija s Electronom

Electron možete koristiti za izradu desktop aplikacija na Windows, Mac i Linux. Prema zadanim postavkama, možete testirati Angular aplikaciju pomoću web preglednika putem naredbe ng serve. Možete konfigurirati svoju Angular aplikaciju da se također otvara u prozoru radne površine umjesto web preglednika.

To možete učiniti pomoću JavaScript datoteke. Također ćete morati konfigurirati svoje datoteke index.html i package.json. Cjelokupna aplikacija i dalje će slijediti istu strukturu kao i obična Angular aplikacija.

Ako želite saznati više o tome kako izraditi desktop aplikacije, također možete istražiti Windows Forms aplikacije. Windows Forms aplikacije vam omogućuju da kliknete i povučete elemente korisničkog sučelja na platno dok također dodajete bilo koju logiku kodiranja u C# datoteke.