Cum să construiți cu ușurință aplicații desktop cu HTML, CSS și Javascript

Pot fi folosite cu adevărat HTML, CSS și Javascript pentru a crea aplicații desktop?

Raspunsul este da.

În acest articol ne vom concentra în principal asupra modului în care Electron poate fi utilizat pentru a crea aplicații desktop cu tehnologii web precum HTML, CSS și Javascript.

Electron

Electron poate fi folosit pentru a crea aplicații desktop cu HTML, CSS și Javascript. De asemenea, aceste aplicații funcționează pentru mai multe platforme precum Windows, Mac, Linux și așa mai departe.

Electronul combină Chromium și NodeJS într-un singur timp de rulare. Acest lucru ne permite să rulăm codul HTML, CSS și Javascript ca aplicație desktop.

Electron Forge

Dacă Electron este utilizat direct, atunci este necesară o configurare manuală înainte de a vă crea aplicația. De asemenea, dacă doriți să utilizați Angular, React, Vue sau orice alt cadru sau bibliotecă, va trebui să configurați manual pentru asta.

Electron Forge face lucrurile de mai sus mult mai ușoare.

Oferă aplicații șablon cu Angular, React, Vue și alte cadre care evită configurările manuale suplimentare.

De asemenea, oferă o modalitate ușoară de a construi și a împacheta aplicația. De asemenea, oferă multe alte caracteristici care pot fi găsite în documenare.

Condiții prealabile

Asigurați-vă că aveți instalat NodeJS. Poate fi instalat de la Aici.

Instalați Electron Forge la nivel global utilizând următoarea comandă:

npm install -g electron-forge

Să începem cu aplicația

Utilizați următoarea comandă pentru a vă crea aplicația:

electron-forge init simple-desktop-app-electronjs

simplu-desktop-app-electronjs este numele aplicației.

Comanda de mai sus va dura ceva timp pentru a rula.

Odată ce a terminat de rulat, porniți aplicația folosind următoarele comenzi:

cd simple-desktop-app-electronjsnpm start

Aceasta ar trebui să deschidă o fereastră ca cea de mai jos:

Înțelegerea structurii și codului dosarelor existente

Aplicația are o anumită structură de dosare. Aici voi menționa câteva dintre lucrurile importante din această structură de dosare.

pachet.json

Are informații despre aplicația pe care o creați, toate dependențele necesare pentru aplicație și câteva scripturi. Unele dintre scripturi sunt deja pre-configurate și puteți adăuga și scripturi noi.

config.forge calea are toate configurațiile specifice ElectronJS. De exemplu face-ținte este folosit pentru a specifica fișierele țintă pentru diverse platforme, cum ar fi Windows, Mac sau Linux.

De asemenea, package.json are "main": "src/index.js" ceea ce indică faptul că src / index.js este punctul de plecare al aplicației

src / index.js

Conform package.json, index.js este scenariul principal. Procesul care execută scriptul principal este cunoscut sub numele de proces principal. Deci, procesul principal rulează scriptul index.js.

Procesul principal este utilizat pentru a afișa elemente GUI. Face acest lucru prin crearea de pagini web.

Fiecare pagină web creată rulează într-un proces numit proces de redare.

Procesul principal și procesul de redare

Scopul proces principal este de a crea pagini web folosind un BrowserWindow Instanță.

BrowserWindow Instanța folosește un proces de redare pentru a rula fiecare pagină web.

Fiecare aplicație poate avea un singur proces principal, dar poate avea multe procese de redare.

Este posibil să comunicați și între procesul principal și cel de redare. Cu toate acestea, acest lucru nu va fi acoperit în acest articol.

abcd.html este afișat ca a doua pagină web în arhitectura de mai sus. Dar în codul nostru nu vom avea o a doua pagină web.

src / index.html

index.js încarcă fișierul index.html într-o nouă instanță BrowerWindow.

Ceea ce înseamnă, în principiu, că index.js creează o nouă fereastră GUI și o încarcă cu pagina web index.html. Pagina web index.html rulează în propriul proces de redare.

Codul din index.js explicat

Majoritatea codului creat în index.js are comentarii bune care explică ce face. Aici voi menționa câteva puncte cheie de menționat în index.js:

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

Fragmentul de cod de mai sus creează practic un fișier BrowserWindow Instanță și încărcări index.html în BrowserWindow.

Vei vedea aplicație folosit des în cod. De exemplu, luați fragmentul de cod de mai jos:

app.on('ready', createWindow);

aplicație este folosit pentru a controla ciclul de viață al evenimentelor aplicației.

Fragmentul de cod de mai sus spune că atunci când aplicația este gata, încărcați prima fereastră.

În mod similar, aplicație poate fi folosit pentru a efectua alte acțiuni la diferite evenimente. De exemplu, poate fi folosit pentru a efectua unele acțiuni chiar înainte de închiderea aplicației și așa mai departe.

Să creăm o aplicație desktop pentru convertorul de temperatură

Permiteți-ne să folosim aceeași aplicație pe care am folosit-o anterior și să o modificăm ușor pentru a crea o aplicație de transformare a temperaturii.

Mai întâi permiteți-ne să instalăm Bootstrap cu următoarea comandă:

npm install bootstrap --save

Copiați următorul cod în src / index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Temperature Converter</title>
    <link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/how-to-easily-build-desktop-apps-with-html-css-and-javascript-d3e3f03f95a5/node_modules/bootstrap/dist/css/bootstrap.min.css">

  </head>
  <body>
    <h1>Temperature Converter</h1>
    <div class="form-group col-md-3">
      <label for="usr">Celcius:</label>
      <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">
    </div>
    <div class="form-group col-md-3">
      <label for="pwd">Fahrenheit:</label>
      <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">
    </div>
    <script src="./renderer.js"></script>
  </body>
  </body>
</html>

Codul de mai sus face următoarele:

1. Creează o casetă de text cu id Celcius. Ori de câte ori este introdus ceva în această casetă text, fișierul celciusToFahrenheit () funcția se numește.
2. Creează o casetă de text cu id Fahrenheit. Ori de câte ori este introdus ceva în această casetă text, fișierul fahrenheitToCelcius () funcția se numește.
3. Ori de câte ori este introdusă o nouă valoare în caseta de text Celcius, valoarea din caseta de text Fahrenheit afișează aceeași temperatură în Fahrenheit
4. Ori de câte ori este introdusă o nouă valoare în caseta de text Fahrenheit, valoarea din caseta de text Celcius afișează aceeași temperatură în Celcius

Cele 2 funcții care fac conversia temperaturii sunt prezente în renderer.js.

Creați un fișier numit renderer.js interior src. Copiați următorul cod în el:

function celciusToFahrenheit(){
    let celcius = document.getElementById('celcius').value;
    let fahrenheit = (celcius* 9/5) + 32;
    document.getElementById('fahrenheit').value = fahrenheit;

}

function fahrenheitToCelcius(){
    let fahrenheit = document.getElementById('fahrenheit').value;
    let celcius = (fahrenheit - 32) * 5/9
    document.getElementById('celcius').value = celcius;
}

celciusToFahrenheit () funcția citește valoarea din Celcius text, o convertește în Fahrenheit și scrie noua temperatură în Fahrenheit casetă de text.

fahrenheitToCelcius () funcția face exact opusul acestui lucru.

Rularea aplicației

Rulați aplicația utilizând următoarea comandă:

npm start

Aceasta ar trebui să afișeze următoarea fereastră. Încercați-l cu valori diferite.

Ambalarea aplicației

Comanda pentru împachetarea aplicației este:

npm run package

Această comandă va dura ceva timp pentru a rula. Odată ce se termină, verificați afară folder din folderul proiectului.

Am testat acest lucru pe o mașină Windows. Aceasta creează un folder numit app-desktop-simplu-electronjs-win32-x64 în interiorul afară pliant

Deci în out / simple-desktop-app-electronjs-win32-x64 folder, comanda creează un .executabil fișier pentru această aplicație. Dând clic pe fișierul exe pornește automat aplicația desktop.

Numele folderului app-desktop-simplu-electronjs-win32-x64 poate fi defalcat ca appname-platform-architecture Unde

• appname = simplu-desktop-aplicație-electronjs
• platforma = win32
• arhitectura = x64

Când rulați această comandă fără parametri, implicit, aceasta împachetează platforma pe care o utilizați pentru dezvoltare.

Să presupunem că doriți să pachetați pentru o altă platformă și arhitectură. Apoi puteți utiliza următoarea sintaxă:

npm run package -- --platform=<platform> arch=<architecture>

De exemplu, pentru a împacheta pentru Linux, puteți utiliza următoarea comandă:

npm run package -- --platform=linux --arch=x64

Aceasta va crea un folder numit app-desktop-simplu-electronjs-linux-x64 în interiorul afară pliant.

Crearea unui fișier make

Pentru a crea un fișier make sau un program de instalare pentru aplicație, utilizați următoarea comandă:

npm run make

Această comandă va dura ceva timp pentru a rula. Odată ce se termină, verificați afară folder din folderul proiectului.

out / make folderul va avea un program de instalare Windows pentru aplicația desktop.

Când executați această comandă fără parametri, în mod implicit creează programul de instalare pentru platforma pe care o utilizați pentru dezvoltare.

Cod

Codul acestei aplicații desktop este disponibil în repo-ul meu GitHub:

https://github.com/aditya-sridhar/simple-desktop-app-electronjs

Felicitări ?

Acum știți cum să creați aplicații desktop folosind HTML, CSS și Javascript.

Acest articol a acoperit concepte de bază despre Electron și Electron-Forge.

Pentru a afla mai multe despre ele, puteți consulta documentația acestora.

Despre autor

Îmi place tehnologia și urmăresc progresele în domeniu. De asemenea, îmi place să îi ajut pe ceilalți cu cunoștințele mele tehnologice.

Nu ezitați să vă conectați cu mine pe contul meu LinkedIn https://www.linkedin.com/in/aditya1811/

Poți să mă urmărești și pe twitter https://twitter.com/adityasridhar18

Site-ul meu: https://adityasridhar.com/

Citiți mai multe articole pe blogul meu la adityasridhar.com.