How to develop a desktop app using Electron

Have you ever thought that you can use HTML, CSS and JavaScript as front-end technologies to build cross-platform desktop applications?

This can be done using Electron.

This article takes you deep into the core concepts of Electron.

[[216364]]

After reading this article, you will know how to build cross-platform desktop applications using Electron, HTML, and CSS.

Before we get started, you can take a look ahead at the application we’re going to build in this tutorial.

Hear Me Type [Translator's note: The sample app in this article is called Hear Me Type] is simple and straightforward. Each key in the app will play a unique sound. For example, if I press "A", the app will play the unique sound of the letter A.

There are currently two versions of the app available for download: the source code for this tutorial, and an advanced version recommended for more experienced Electron users.

Because I am still working on improving the app and adding some new features, the code will change, so please be sure to pay attention to see what updates are there.

That’s it! Let’s start learning Electron and creating our first app with it!

What is Electron?

Electron is a cross-platform desktop application framework based on Chrome and Node.js.

It is easy to build cross-platform applications based on HTML, CSS and JavaScript technologies in this framework. The built applications will be well compatible with Mac, Windows and Linux operating systems.

It also has some other features:

• Automatic Updates - The app supports automatic updates
• Native Menus and Notifications - Create native application menus and context menus
• Application crash reporting - crash reports can be submitted to a remote server
• Debugging and Profiling - Chrominum's content modules can cause performance bottlenecks and slow operations. You can also use your favorite Chrome developer tools in your application.
• Windows installer - can quickly and easily create installation packages.

If you're comfortable with Electron's capabilities, let's move on and create a simple Electron application.

You need to install Node.js before you start. You should also apply for a GitHub account to save and update the application. Although this account is not required, I strongly recommend that you apply for one. Github is an industry standard, and it is very important to learn how to use Github.

I will be using Github in this tutorial.

start

When you are ready, open a terminal window on your system.

Follow the instructions below to clone the Electron Quick Start Git repository to your computer.

We will create our own software based on the Electron Quick Start.

 # Clone the Quick Start repository
 git clone
 # Go into the repository
 cd electron-quick-start
 #Install the dependencies and run
 npm install && npm start

After completing the above steps, you will see an application that looks like a browser window open. It is indeed a browser window!

This window will look different on different operating systems. I chose to use the classic style of Windows. Very nice!

As I mentioned before, you can use Chrome Developer Tools in your app, and the usage of this tool is the same as the developer tools in the browser. Thumbs up!

Electron Application Architecture

Let’s take a look at the source code of this application and its file structure. You can open the project in your favorite editor or IDE, I use Atom… you guessed it… it is built with Electron! [Translator’s note: I prefer VSCode, which is also built on Electron]

The directory and file structure of the new application.

We have a basic file structure:

electron-quick-start

• - index.html
• - main.js
• - package.json
• - render.js

The file structure is similar to the structure we use to create web pages.

We have:

• index.html is an HTML5 page that has an important role: providing a canvas
• main.js creates a window and handles system events
• package.json is the startup script of the application. It contains the information of the application and runs in the main process
• render.js handles the rendering process of the application

Maybe you have doubts about the main process and renderer process. What are they and what are they used for?

I’m glad you asked. Be aware, if you’re coming from the world of browser JavaScript, this may be new territory for you!

What is a process?

When you see the word "process," think of an operating system-level process. That's an instance of a computer program running on the system.

After launching the Electron app, check the Windows Task Manager or macOS Activity Monitor to see the processes associated with the app.

These processes all run in parallel, and the memory and resources allocated to each process are isolated from each other.

If I want to create a for loop to step through some events in the render process.

 var a = 1;
 for ( a = 1; a < 10; a ++) {
 console.log( 'This is a for loop' );
 }

These changes only take effect in the renderer process and will not affect the main process at all. The "This is a for loop" message will only appear in the renderer module.

Main Process

The main process controls the life cycle of the application. It has a complete Node.js API built in, which can open dialog boxes, create rendering processes, and handle other interactions with the operating system, including starting and exiting applications.

By convention, this process is written in a file called main.js, but you can use another name if you want.

You can configure the name of the main process file in the package.json file.

To try it out, open package.json and change

 “main”: “main.js”,

Modified to

 "main": "mainTest.js",

Launch the app to see if it still works properly.

Note that there is only one main process.

Rendering Process

The renderer process in an application is a browser window. Unlike the main process, there can be multiple independent renderer processes.

Because the rendering processes are independent, if one of them crashes, it will not affect other processes, thanks to Chrominum's multi-process architecture.

These browser windows, like the demo web pages, can also be hidden or customized.

However, Electron has a complete Node.js API built in, which means we can open dialog boxes or perform other interactions with the operating system.

Think about it this way;

One more question, can they be connected somehow?

These processes are all running independently, but they still need to communicate because they are responsible for different tasks, which requires communication.

For this purpose, there is an inter-process communication system or IPC. You can use IPC to communicate between the main process and the renderer process. For a more in-depth explanation of this point, please read Christian Engvall's article.

The above are all the basic knowledge of developing Electron applications.

Now back to our code!

Privatization

Let's give the directory where our application will reside a suitable name.

Change the directory name from electron-quick-start to hear-me-type-tutorial.

Reopen this directory in your editor or IDE, and open package.json to further customize the application identity.

package.json contains vital application information, including the application name, version, main file, author, license agreement, etc.

Now that I have changed the author's name to my own, I feel a sense of pride.

Find the "author" parameter and change the value to your own name. It should look like this:

 "author": "Carol Pelu",

We also need to change some other parameters. Find the name and description in package.json and modify them:

Awesome! Now the app has a new name and a short and clear description.

Remember, you can run the app by running npm start in your terminal to see the changes you made.

We will continue to add some desired functionality to our application. We want to play a different sound when each key is pressed.

Oh, interesting feature!

What is an app without functionality? Nothing…

Now we're going to add functionality to it.

In order for our application to respond to input, we must define an element to capture the event and then trigger the desired action.

To do this, we'll create several audio elements with special names, corresponding to the keys that are pressed. We'll then use a switch statement to locate the key that was pressed and play the sound associated with it.

If this seems a bit complicated to you right now, don't be afraid, I will guide you step by step.

Download this zip file, which contains all the sound files we're going to use. We'll need them soon!

We will open the index.html file and create an <audio> element to add sound to our application.

Inside the <body> element, create a div element and set its class attribute to audio.

In the div element just created, create an <audio> element, name its ID "A", set the source attribute to "sounds/A.mp3", and set the preload attribute to "auto".

preload="auto" tells the application to load the complete sound file when the page loads. index.html is the main file of the application, and all sounds will be loaded when the application starts.

Here is the code:

 <div class= "audio" >
 <audio id= "A" src= "sounds/A.mp3" preload= "auto" ></audio>
 </div>

Your index.html should look like this.

Now it points to an unknown file. We are going to create a directory called soudes and extract all the sound files into this directory.

Great! Now the only thing missing is the JavaScript code.

Create a new file called functions.js and reference it in index.html through require so that the JS code will be executed when the application is run.

In the require(./renderer.js') of the example, add a line like this:

 require( './functions.js' )

Afterwards the project looks like this:

Great! Everything is ready, now it’s time to witness the miracle.

Open the functions.js file and add the following code to the file. I will explain this code later.

 document.onkeydown = function (e) {
 switch (e.keyCode) {
 case 65:
            document.getElementById( 'A' ).play();
 break;
 default :
            console.log( "Key is not found!" );
 }
 };

The code now looks like this:

Open a Bash or terminal window, make sure you are in the project directory, and run npm start to start the application.

Adjust the speaker volume and hit the keys.

 #MindBlown

The JS code is very simple and clear.

We use the onkeydown event on the document object to find the element being accessed here. Remember, the document object is the main window of the application.

We use a switch statement in the anonymous function to determine the key press based on the Unicode value.

If the Unicode value corresponding to the key is found, the corresponding sound will be played, otherwise a "not found" error will be thrown. This error should be found in the console.

What a joyful process!

You may have noticed that our sound file contains the keys AZ and 0-9, use them all.

In index.html create an element for each key that has a corresponding sound file.

Afterwards the code looks like this:

Of course you can copy and paste:

 <audio id= "B" src= "sounds/B.mp3" preload= "auto" ></audio>
 <audio id= "C" src= "sounds/C.mp3" preload= "auto" ></audio>
 <audio id= "D" src= "sounds/D.mp3" preload= "auto" ></audio>
 <audio id= "E" src= "sounds/E.mp3" preload= "auto" ></audio>
 <audio id= "F" src= "sounds/F.mp3" preload= "auto" ></audio>
 <audio id= "G" src= "sounds/G.mp3" preload= "auto" ></audio>
 <audio id= "H" src= "sounds/H.mp3" preload= "auto" ></audio>
 <audio id= "I" src= "sounds/I.mp3" preload= "auto" ></audio>
 <audio id= "J" src= "sounds/J.mp3" preload= "auto" ></audio>
 <audio id= "K" src= "sounds/K.mp3" preload= "auto" ></audio>
 <audio id= "L" src= "sounds/L.mp3" preload= "auto" ></audio>
 <audio id= "M" src= "sounds/M.mp3" preload= "auto" ></audio>
 <audio id= "N" src= "sounds/N.mp3" preload= "auto" ></audio>
 <audio id= "O" src= "sounds/O.mp3" preload= "auto" ></audio>
 <audio id= "P" src= "sounds/P.mp3" preload= "auto" ></audio>
 <audio id= "Q" src= "sounds/Q.mp3" preload= "auto" ></audio>
 <audio id= "R" src= "sounds/R.mp3" preload= "auto" ></audio>
 <audio id= "S" src= "sounds/S.mp3" preload= "auto" ></audio>
 <audio id= "T" src= "sounds/T.mp3" preload= "auto" ></audio>
 <audio id= "U" src= "sounds/U.mp3" preload= "auto" ></audio>
 <audio id= "V" src= "sounds/V.mp3" preload= "auto" ></audio>
 <audio id= "W" src= "sounds/W.mp3" preload= "auto" ></audio>
 <audio id= "X" src= "sounds/X.mp3" preload= "auto" ></audio>
 <audio id= "Y" src= "sounds/Y.mp3" preload= "auto" ></audio>
 <audio id= "Z" src= "sounds/Z.mp3" preload= "auto" ></audio>
 <audio id= "0" src= "sounds/0.mp3" preload= "auto" ></audio>
 <audio id= "1" src= "sounds/1.mp3" preload= "auto" ></audio>
 <audio id= "2" src= "sounds/2.mp3" preload= "auto" ></audio>
 <audio id= "3" src= "sounds/3.mp3" preload= "auto" ></audio>
 <audio id= "4" src= "sounds/4.mp3" preload= "auto" ></audio>
 <audio id= "5" src= "sounds/5.mp3" preload= "auto" ></audio>
 <audio id= "6" src= "sounds/6.mp3" preload= "auto" ></audio>
 <audio id= "7" src= "sounds/7.mp3" preload= "auto" ></audio>
 <audio id= "8" src= "sounds/8.mp3" preload= "auto" ></audio>
 <audio id= "9" src= "sounds/9.mp3" preload= "auto" ></audio>

Now add some code to functions.js.

You can look up the character code (charCode or keyCode) on this website.

Of course, you can also use copy and paste:

 document.onkeydown = function (e) {
 switch (e.keyCode) {
 case 48:
            document.getElementById( '0' ).play();
 break;
 case 49:
            document.getElementById( '1' ).play();
 break;
 case 50:
            document.getElementById( '2' ).play();
 break;
 case 51:
            document.getElementById( '3' ).play();
 break;
 case 52:
            document.getElementById( '4' ).play();
 break;
 case 53:
            document.getElementById( '5' ).play();
 break;
 case 54:
            document.getElementById( '6' ).play();
 break;
 case 55:
            document.getElementById( '7' ).play();
 break;
 case 56:
            document.getElementById( '8' ).play();
 break;
 case 57:
            document.getElementById( '9' ).play();
 break;
 case 65:
            document.getElementById( 'A' ).play();
 break;
 case 66:
            document.getElementById( 'B' ).play();
 break;
 case 67:
            document.getElementById( 'C' ).play();
 break;
 case 68:
            document.getElementById( 'D' ).play();
 break;
 case 69:
            document.getElementById( 'E' ).play();
 break;
 case 70:
            document.getElementById( 'F' ).play();
 break;
 case 71:
            document.getElementById( 'G' ).play();
 break;
 case 72:
            document.getElementById( 'H' ).play();
 break;
 case 73:
            document.getElementById( 'I' ).play();
 break;
 case 74:
            document.getElementById( 'J' ).play();
 break;
 case 75:
            document.getElementById( 'K' ).play();
 break;
 case 76:
            document.getElementById( 'L' ).play();
 break;
 case 77:
            document.getElementById( 'M' ).play();
 break;
 case 78:
            document.getElementById( 'N' ).play();
 break;
 case 79:
            document.getElementById( 'O' ).play();
 break;
 case 80:
            document.getElementById( 'P' ).play();
 break;
 case 81:
            document.getElementById( 'Q' ).play();
 break;
 case 82:
            document.getElementById( 'R' ).play();
 break;
 case 83:
            document.getElementById( 'S' ).play();
 break;
 case 84:
            document.getElementById( 'T' ).play();
 break;
 case 85:
            document.getElementById( 'U' ).play();
 break;
 case 86:
            document.getElementById( 'V' ).play();
 break;
 case 87:
            document.getElementById( 'W' ).play();
 break;
 case 88:
            document.getElementById( 'X' ).play();
 break;
 case 89:
            document.getElementById( 'Y' ).play();
 break;
 case 90:
            document.getElementById( 'Z' ).play();
 break;
 default :
            console.log( "Key is not found!" );
 }
 };

You are done!

The main functionality of the app is complete, but there is still some work to do!

Complete!

The application is functional, but it is not perfect yet.

For example, you can modify the application title and the content of the main window in index.html.

In addition, this app does not have a brightly colored design or use beautiful images.

Use your imagination to find ways to improve your app design.

The code is not bad either, we have a lot of the same code that needs to be optimized to reduce the number of lines of code, at least it doesn't look so bad.

Duplicating code is really not a good idea!

Test! Just test!

Good software needs to be tested.

I suggest you press the button first and see what happens.

In the best case, you will hear a sound for each key. But what happens if you press multiple keys quickly? What happens if you press unexpected keys, such as Home and NumLock?

What happens if you minimize the application and try pressing the buttons? Do you hear the sound? Do you hear the sound when you press the keys without selecting the application window?

The answer is no.

Electron's architecture determines its behavior. It allows you to use all keys like the C# language, but you cannot register personalized keys. This is beyond the scope of Electron applications.

Execute the code line by line and break it deeply to see what happens and what errors Electron throws. This exercise will help you debug better. If you know the flaws of your app, then you know how to fix them and make your app better.

I intentionally used a deprecated JavaScript event in the functions.js file, can you spot it?

If you find one, I hope you can replace it without changing the functionality of your application.

Using deprecated code is a bad idea and can lead to serious errors that you may not even be aware of. Pay attention to the language's official documentation to learn about possible changes and always be aware of the latest status.