Mogu li se HTML, CSS i Javascript zaista koristiti za izgradnju aplikacija za radnu površinu?

Odgovor je da.

U ovom ćemo se članku uglavnom usredotočiti na to kako se Electron može koristiti za stvaranje stolnih aplikacija s web tehnologijama poput HTML-a, CSS-a i Javascripta.

Elektron

Electron se može koristiti za izgradnju stolnih aplikacija s HTML-om, CSS-om i Javascriptom. Također ove aplikacije rade za više platformi poput Windows, Mac, Linux i tako dalje.

Electron kombinira Chromium i NodeJS u jedno vrijeme izvođenja. To nam omogućuje pokretanje HTML-a, CSS-a i Javascript koda kao radne površine.

Electron Forge

Ako se Electron koristi izravno, potrebno je ručno postavljanje prije izrade aplikacije. Također ako želite koristiti Angular, React, Vue ili bilo koji drugi okvir ili knjižnicu, morat ćete ručno konfigurirati za to.

Electron Forge znatno olakšava gore navedene stvari.

Pruža aplikacije za predloške s Angular, React, Vue i drugim okvirima što izbjegava dodatne ručne postavke.

Također pruža jednostavan način za izradu i pakiranje aplikacije. Također pruža mnoge druge značajke koje se mogu naći u njihovoj documenaciji.

Preduvjeti

Provjerite je li instaliran NodeJS. Može se instalirati odavde.

Instalirajte Electron Forge globalno pomoću sljedeće naredbe:

npm install -g electron-forge

Krenimo s aplikacijom

Upotrijebite sljedeću naredbu za izradu aplikacije:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs naziv je aplikacije.

Izvršenju gornje naredbe trebat će neko vrijeme.

Nakon što se završi, pokrenite aplikaciju pomoću sljedećih naredbi:

cd simple-desktop-app-electronjsnpm start

Ovo bi trebalo otvoriti prozor poput prikazanog dolje:

Razumijevanje postojeće strukture i koda mape

Aplikacija ima određenu strukturu mapa. Ovdje ću spomenuti neke važne stvari u ovoj strukturi mapa.

paket.json

Sadrži informacije o aplikaciji koju izrađujete, svim ovisnostima potrebnim za aplikaciju i nekim skriptama. Neke su skripte već unaprijed konfigurirane, a možete dodati i nove skripte.

Put config.forge ima sve konfiguracije specifične za ElectronJS. Na primjer, make-target koristi se za određivanje ciljnih datoteka izrade za razne platforme kao što su Windows, Mac ili Linux.

Također package.json ima "main": "src/index.js"što ukazuje da je src / index.js početna točka aplikacije

src / index.js

Prema package.json, index.js je glavna skripta. Proces koji pokreće glavnu skriptu poznat je kao glavni proces . Dakle, glavni proces pokreće skriptu index.js.

Glavni postupak koristi se za prikaz GUI elemenata. To čini stvaranjem web stranica.

Svaka izrađena web stranica izvodi se u procesu koji se naziva postupak prikazivanja.

Glavni postupak i postupak prikazivanja

Svrha glavnog postupka je stvaranje web stranica pomoću BrowserWindowInstance.

BrowserWindowInstance koristi proces prikazivača pokrenuti svaku web stranicu.

Svaka aplikacija može imati samo jedan glavni postupak, ali može imati mnogo procesa prikazivanja.

Moguće je komunicirati i između glavnog i procesa prikazivanja. Međutim, ovo neće biti obrađeno u ovom članku.

abcd.html prikazan je kao druga web stranica u gornjoj arhitekturi. Ali u našem kodu nećemo imati drugu web stranicu.

src / index.html

index.js učitava datoteku index.html u novu instancu BrowerWindow.

To u osnovi znači da index.js stvara novi GUI prozor i učitava ga s index.html web stranicom. Web stranica index.html radi u vlastitom postupku prikazivanja.

Objašnjen kod u index.js

Većina koda stvorenog u index.js ima dobre komentare koji objašnjavaju što čini. Ovdje ću spomenuti nekoliko ključnih točaka koje treba napomenuti u index.js:

mainWindow = new BrowserWindow({ width: 800, height: 600, }); // and load the index.html of the app. mainWindow.loadURL(`file://${__dirname}/index.html`);

Gornji isječak koda u osnovi stvara instancu BrowserWindow i učitava index.html u BrowserWindow.

U kodu ćete vidjeti aplikaciju koja se često koristi. Na primjer, uzmite donji isječak koda:

app.on('ready', createWindow);

aplikacija se koristi za upravljanje životnim ciklusom aplikacije.

Gornji isječak koda kaže da kada je aplikacija spremna, učitajte prvi prozor.

Slično tome, aplikacija se može koristiti za obavljanje drugih radnji na raznim događajima. Na primjer, može se koristiti za izvođenje neke radnje neposredno prije zatvaranja aplikacije i tako dalje.

Stvorimo stolnu aplikaciju Pretvarač temperature

Upotrijebimo istu aplikaciju koju smo koristili prije i malo je izmijenimo kako bismo stvorili aplikaciju pretvarača temperature.

Prvo instalirajte Bootstrap sa sljedećom naredbom:

npm install bootstrap --save

Kopirajte sljedeći kod u src / index.html:

    Temperature Converter    
Temperature Converter
 Celcius: Fahrenheit: 

Gornji kod čini sljedeće:

1. Stvara okvir za tekst s id Celciusom . Kad god se nešto upiše u ovaj okvir za tekst, poziva se funkcija celciusToFahrenheit () .
2. Stvara okvir za tekst s id Fahrenheita . Kad god se nešto upiše u ovaj okvir za tekst, poziva se funkcija fahrenheitToCelcius () .
3. Kad god se u tekstualni okvir Celciusa upiše nova vrijednost, vrijednost u tekstualnom okviru Fahrenheita prikazuje istu temperaturu u Fahrenheitu
4. Kad god se u okvir za tekst Fahrenheita upiše nova vrijednost, vrijednost u polju Celcius prikazuje istu temperaturu u Celciusu

The 2 functions which do the temperature conversion are present in renderer.js.

Create a file called renderer.js inside src. Copy the following code into it:

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; }

The celciusToFahrenheit() function reads the value in the Celcius text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit text box.

The fahrenheitToCelcius() function does the exact opposite of this.

Running the application

Run the application using the following command:

npm start

This should display the following window. Try it out with different values.

Packaging the application

The command to package the application is:

npm run package

This command will take some time to run. Once it finishes check the out folder within the project folder.

I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside the out folder

So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.

The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where

• appname = simple-desktop-app-electronjs
• platform = win32
• architecture = x64

When you run this command without any parameters, by default it packages for the platform which you are using for development.

Let’s say you want to package for a different platform and architecture. Then you can use the following syntax:

npm run package -- --platform= arch=

For example, in order to package for linux you can use the following command:

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

This will create a folder called simple-desktop-app-electronjs-linux-x64 inside the out folder.

Creating a make File

In order to create a make file or an installer for the application, use the following command:

npm run make

This command will take some time to run. Once it finishes check the out folder within the project folder.

The out/make folder will have a Windows installer for the desktop application.

When you run this command without any parameters, by default it creates the installer for the platform which you are using for development.

Code

The code for this desktop application is available in my GitHub repo:

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

Congrats ?

You now know how to create desktop applications using HTML, CSS and Javascript.

This article covered very basic concepts of Electron and Electron-Forge.

To know more about them, you can check out their documentation.

About the author

I love technology and follow the advancements in the field. I also like helping others with my technology knowledge.

Feel free to connect with me on my LinkedIn account //www.linkedin.com/in/aditya1811/

You can also follow me on twitter //twitter.com/adityasridhar18

My Website: //adityasridhar.com/

Read more of my articles on my blog at adityasridhar.com.