Osnove Electron: Kako konfigurirati in zagnati aplikacijo Angular Electron

Electron vam omogoča izdelavo namiznih aplikacij za Windows, Mac in Linux. Ko ustvarite aplikacijo z uporabo Electrona, si lahko predogledate in jo zaženete v oknu namizne aplikacije.

Electron lahko uporabite za konfiguracijo aplikacije Angular za zagon v namiznem oknu namesto v običajnem spletnem brskalniku. To lahko storite z datoteko JavaScript v sami aplikaciji.

Ko konfigurirate Electron, lahko nadaljujete z razvojem, kot bi v običajni aplikaciji Angular. Glavni deli aplikacije bodo še vedno sledili isti standardni strukturi Angular.

Kako namestiti Electron kot del vaše aplikacije

Če želite uporabljati Electron, morate prenesti in namestiti node.js ter uporabiti npm install, da dodate Electron svoji aplikaciji.

Prenesite in namestite vozlišče.js . Lahko potrdite, da ste ga pravilno namestili, tako da preverite različico:
```
node -v
```
Vozlišče vključuje tudi npm, upravitelj paketov JavaScript . Lahko potrdite, da imate nameščen npm, tako da preverite različico npm:
```
npm -v
```
Ustvarite novo aplikacijo Angular z uporabo novega ukaz. To bo ustvarilo mapo, ki vsebuje vse potrebne datoteke, potrebne za projekt Angular v službo.
```
ng new electron-app
```
V korenski mapi vaše aplikacije uporabite npm za namestitev Electron.
```
npm install --save-dev electron
```
To bo ustvarilo novo mapo za Electron v mapi node_modules aplikacije.
Electron lahko v svoj računalnik namestite tudi globalno.
```
npm install -g electron 
```

Datotečna struktura aplikacije Angular Electron

Electron bo za ustvarjanje in upravljanje namiznega okna potreboval glavno datoteko JavaScript. V tem oknu bo prikazana vsebina vaše aplikacije v njem. Datoteka JavaScript bo vsebovala tudi druge dogodke, ki se lahko zgodijo, na primer, če uporabnik zapre okno.

windows ni mogel samodejno zaznati nastavitev proxyja tega omrežja google chrome

indeksirajte lokacijo datoteke HTML v projektu

Med izvajanjem bo prikazana vsebina iz datoteke index.html. Privzeto lahko najdete datoteko index.html znotraj src in med izvajanjem se njena zgrajena kopija samodejno ustvari znotraj mape dist mapo.

Lokacija glavne komponente aplikacije v mapi

Datoteka index.html je običajno videti takole:

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

Znotraj oznake body je oznaka . To bo prikazalo glavno komponento aplikacije za aplikacijo Angular. Glavno komponento aplikacije najdete v src/app mapo.

Kako uporabljati Electron za odpiranje aplikacije Angular v oknu namizja

Ustvarite datoteko main.js in jo konfigurirajte za odpiranje vsebine aplikacije znotraj okna namizja.

Ustvarite datoteko v korenu svojega projekta z imenom main.js . V tej datoteki inicializirajte Electron, da ga lahko uporabite za ustvarjanje okna aplikacije.
```
const { app, BrowserWindow } = require('electron');
```
Ustvarite novo okno namizja določene širine in višine. Naložite indeksno datoteko kot vsebino za prikaz v oknu. Prepričajte se, da se pot do indeksne datoteke ujema z imenom vaše aplikacije. Če ste na primer svojo aplikacijo poimenovali 'electron-app', bo pot 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Ko je aplikacija pripravljena, pokličite funkcijo createWindow(). To bo ustvarilo okno aplikacije za vašo aplikacijo.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
V src/index.html datoteka, v osnova spremenite atribut href v './'.
```
<base href="./">
```
notri package.json , dodajte a glavni in kot vrednost vključite datoteko main.js. To bo vstopna točka za aplikacijo, tako da aplikacija zažene datoteko main.js, ko zažene aplikacijo.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

V .browserslistrc datoteko, spremenite seznam, da odstranite iOS safari različice 15.2–15.3. To bo preprečilo prikaz napak združljivosti v konzoli med prevajanjem.

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 privzeto vsebino v src/app/app.component.html mapa. Zamenjajte ga z novo vsebino.

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

Dodajte nekaj sloga za vsebino v 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 nekaj splošnega stila src/styles.css datoteko za odstranitev privzetih robov in obrob.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Kako zagnati aplikacijo Electron

Če želite aplikacijo zagnati v oknu, konfigurirajte ukaz v nizu skriptov paketa.json. Nato zaženite aplikacijo z ukazom v terminalu.

notri package.json , znotraj niza skriptov dodajte ukaz za izdelavo aplikacije Angular in zaženite Electron. Prepričajte se, da ste dodali vejico za prejšnjim vnosom v polje skriptov.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Če želite zagnati svojo novo aplikacijo Angular v namiznem oknu, v ukazni vrstici v korenski mapi vašega projekta zaženite naslednje:
```
npm run electron
```
Počakajte, da se vaša aplikacija prevede. Ko končate, se namesto odprtja aplikacije Angular v spletnem brskalniku odpre okno namizja. Okno namizja bo prikazalo vsebino vaše aplikacije Angular.
Če si še vedno želite ogledati svojo aplikacijo v spletnem brskalniku, lahko še vedno zaženete ukaz ng serve.
```
ng serve
```
Če uporabljate služiti bo vsebina vaše aplikacije še vedno prikazana v spletnem brskalniku na lokalni gostitelj: 4200.

Izdelava namiznih aplikacij z Electronom

Electron lahko uporabite za izdelavo namiznih aplikacij v sistemih Windows, Mac in Linux. Privzeto lahko preizkusite aplikacijo Angular s spletnim brskalnikom prek ukaza ng serve. Svojo aplikacijo Angular lahko konfigurirate tako, da se namesto v spletnem brskalniku odpre tudi v namiznem oknu.

ali lahko spremenite svoje uporabniško ime za snapchat

To lahko storite z uporabo datoteke JavaScript. Prav tako boste morali konfigurirati datoteke index.html in package.json. Celotna aplikacija bo še vedno sledila isti strukturi kot običajna aplikacija Angular.

Če želite izvedeti več o izdelavi namiznih aplikacij, lahko raziščete tudi aplikacije Windows Forms. Aplikacije Windows Forms vam omogočajo, da kliknete in povlečete elemente uporabniškega vmesnika na platno, hkrati pa dodate poljubno logiko kodiranja v datoteke C#.