Hogyan készíthetünk asztali alkalmazásokat egyszerűen HTML, CSS és Javascript használatával

A HTML, a CSS és a Javascript valóban használható asztali alkalmazások készítéséhez?

A válasz igen.

Ebben a cikkben elsősorban arra fogunk összpontosítani, hogy az Electron hogyan használható asztali alkalmazások létrehozására olyan webes technológiákkal, mint a HTML, CSS és a Javascript.

Elektron

Az Electron használható asztali alkalmazások készítésére HTML, CSS és Javascript használatával. Ezek az alkalmazások több platformon is működnek, például Windows, Mac, Linux és így tovább.

Az Electron egyesíti a Chromiumot és a NodeJS-t egyetlen futási idő alatt. Ez lehetővé teszi számunkra a HTML, CSS és Javascript kód futtatását asztali alkalmazásként.

Electron Forge

Ha az Electron-ot közvetlenül használják, akkor néhány manuális beállításra van szükség az alkalmazás felépítése előtt. Ha az Angular, a React, a Vue vagy bármely más keretrendszert vagy könyvtárat szeretne használni, akkor ezt manuálisan is be kell állítania.

Az Electron Forge sokkal könnyebbé teszi a fenti dolgokat.

Sablonalkalmazásokat biztosít Angular, React, Vue és más keretrendszerekkel, így elkerülhető az extra manuális beállítás.

Emellett egyszerű módszert kínál az alkalmazás felépítésére és csomagolására. Számos egyéb tulajdonságot is tartalmaz, amelyek megtalálhatók a dokumentációjukban.

Előfeltételek

Győződjön meg arról, hogy telepítve van a NodeJS. Innen telepíthető.

Telepítse az Electron Forge alkalmazást globálisan a következő paranccsal:

npm install -g electron-forge

Kezdjük az alkalmazással

Az alkalmazás létrehozásához használja a következő parancsot:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs az alkalmazás neve.

A fenti parancs futtatásához egy kis időre van szükség.

Miután befejezte a futást, indítsa el az alkalmazást a következő parancsokkal:

cd simple-desktop-app-electronjsnpm start

Ennek meg kell nyitnia az alább látható ablakot:

A meglévő mappa felépítésének és kódjának megértése

Az alkalmazás sajátos mappaszerkezettel rendelkezik. Itt megemlítek néhány fontos dolgot ebben a mappastruktúrában.

csomag.json

Információkat tartalmaz a létrehozott alkalmazásról, az alkalmazáshoz szükséges összes függőségről és néhány szkriptről. Néhány szkript már előre be van állítva, és új szkripteket is hozzáadhat.

A config.forge elérési útja tartalmazza az ElectronJS összes konfigurációját. Például a make-targetek segítségével megadhatók a cél make fájlok különböző platformokhoz, például Windows, Mac vagy Linux.

A package.json is rendelkezik, "main": "src/index.js"amely azt jelzi, hogy az src / index.js az alkalmazás kiindulópontja

src / index.js

A package.json szerint az index.js a fő szkript. A fő szkriptet futtató folyamat fő folyamat néven ismert . Tehát a fő folyamat az index.js parancsfájlt futtatja.

A fő folyamat a GUI elemek megjelenítésére szolgál. Ezt weblapok létrehozásával teszi.

Minden létrehozott weboldal a renderelő folyamatnak nevezett folyamatban fut .

Fő folyamat és megjelenítő folyamat

A fő folyamat célja egy weboldal létrehozása egy BrowserWindowpéldány segítségével.

A BrowserWindowpéldány renderelő folyamatot használ az egyes weboldalak futtatásához.

Minden alkalmazásnak csak egy fő folyamata lehet, de sok renderelési folyamat lehet.

Lehetőség van a fő és a renderelő folyamat közötti kommunikációra is. Erre azonban a cikk nem tér ki.

Az abcd.html második weboldalként jelenik meg a fenti architektúrában. De a kódunkban nem lesz második weboldalunk.

src / index.html

Az index.js betölti az index.html fájlt egy új BrowerWindow példányba.

Ez alapvetően azt jelenti, hogy az index.js létrehoz egy új GUI ablakot, és betölti azt az index.html weboldallal. Az index.html weboldal a saját renderelési folyamatában fut.

Az index.js kódját megmagyarázta

Az index.js-ben létrehozott kód nagy részének jó megjegyzései vannak, amelyek elmagyarázzák, hogy mit csinál. Itt megemlítek néhány kulcsfontosságú megjegyzést az index.js fájlban:

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

The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.

You will see app used often in the code. For example take the below code snippet:

app.on('ready', createWindow);

app is used to control the application’s event life cycle.

The above code snippet says that when the application is ready, load the first window.

Similarly, app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.

Let’s create a Temperature Converter Desktop Application

Let us use the same application we used before and modify it slightly to create a temperature converter application.

First let us install Bootstrap with the following command:

npm install bootstrap --save

Copy the following code into src/index.html:

    Temperature Converter    

Temperature Converter

Celcius: Fahrenheit:

The above code does the following:

  1. Creates a text box with id Celcius. Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
  2. Creates a text box with id Fahrenheit. Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called.
  3. Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
  4. Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius

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.