Sådan opbygges nemt desktop-apps med HTML, CSS og Javascript

Kan HTML, CSS og Javascript virkelig bruges til at opbygge Desktop-applikationer?

Svaret er ja.

I denne artikel vil vi primært fokusere på, hvordan Electron kan bruges til at oprette desktop-applikationer med webteknologier som HTML, CSS og Javascript.

Elektron

Electron kan bruges til at oprette Desktop Apps med HTML, CSS og Javascript. Disse apps fungerer også for flere platforme som Windows, Mac, Linux og så videre.

Electron kombinerer Chromium og NodeJS til en enkelt kørselstid. Dette giver os mulighed for at køre HTML-, CSS- og Javascript-koden som en desktopapplikation.

Electron Forge

Hvis Electron bruges direkte, er der behov for en vis manuel opsætning, før du bygger din applikation. Også hvis du vil bruge Angular, React, Vue eller andre rammer eller biblioteker, skal du manuelt konfigurere det.

Electron Forge gør ovenstående ting meget lettere.

Det giver skabelonapplikationer med Angular, React, Vue og andre rammer, som undgår de ekstra manuelle opsætninger.

Det giver også en nem måde at opbygge og pakke applikationen på. Det giver også mange andre funktioner, som kan findes i deres dokumentation.

Forudsætninger

Sørg for, at du har NodeJS installeret. Det kan installeres herfra.

Installer Electron Forge globalt ved hjælp af følgende kommando:

npm install -g electron-forge

Lad os komme i gang med applikationen

Brug følgende kommando til at oprette din applikation:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs er navnet på applikationen.

Ovenstående kommando vil tage noget tid at køre.

Når det er kørt, skal du starte applikationen ved hjælp af følgende kommandoer:

cd simple-desktop-app-electronjsnpm start

Dette skal åbne et vindue som det vist nedenfor:

Forståelse af den eksisterende mappestruktur og kode

Applikationen har en bestemt mappestruktur. Her vil jeg nævne nogle af de vigtige ting i denne mappestruktur.

pakke.json

Det har oplysninger om den applikation, du opretter, alle de afhængigheder, der er nødvendige for appen, og nogle scripts. Nogle af scripts er allerede forudkonfigureret, og du kan også tilføje nye scripts.

Den config.forge sti har alle de konfigurationer, som er specifikke for ElectronJS. For eksempel bruges make-targets til at specificere target make-filerne til forskellige platforme som Windows, Mac eller Linux.

Også package.json har, "main": "src/index.js"hvilket indikerer, at src / index.js er startpunktet for applikationen

src / index.js

Ifølge package.json er index.js det vigtigste script. Processen, der kører hovedskriptet, er kendt som hovedprocessen . Så hovedprocessen kører index.js-scriptet.

Hovedprocessen bruges til at vise GUI-elementer. Det gør det ved at oprette websider.

Hver oprettet webside kører i en proces kaldet renderer-processen.

Hovedproces og rendererproces

Formålet med hovedprocessen er at oprette websider ved hjælp af en BrowserWindowInstance.

Den BrowserWindowInstans bruger en renderer proces til at køre hver webside.

Hver app kan kun have en hovedproces, men kan have mange rendererprocesser.

Det er også muligt at kommunikere mellem hoved- og rendererprocessen. Dette vil dog ikke blive dækket af denne artikel.

abcd.html vises som en anden webside i ovenstående arkitektur. Men i vores kode har vi ikke en anden webside.

src / index.html

index.js indlæser index.html-filen i en ny BrowerWindow-instans.

Hvad dette grundlæggende betyder, er at index.js opretter et nyt GUI-vindue og indlæser det med index.html webside. Webstedet index.html kører i sin egen rendererproces.

Kode i index.js forklaret

Det meste af koden oprettet i index.js har gode kommentarer, der forklarer, hvad den gør. Her vil jeg nævne et par nøglepunkter, der skal bemærkes i index.js:

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/

Læs flere af mine artikler på min blog på adityasridhar.com.