Showing posts with label NodeJs. Show all posts
Showing posts with label NodeJs. Show all posts

Thursday, September 21, 2017

ElectronJs: Native Desktop Application with Web Technologies(JavaScript, CSS and HTML)

Today's blog will be about developing a Hello World Application with ElectronJs. We will build a Countdown Timer Native Desktop App with ElectronJs. ElectronJs is a framework which lets you build cross platform Native desktop Application with JavaScript, CSS and HTML. So all those web developers who have been working for a long time with JS, HTML and CSS, it's a good news for you all. Building desktop app is now made easy. Now if you can build a web app then you can easily create a desktop app. Electron comes with all features and API to make your desktop application development easy.

Prerequisites

In order to build a Desktop application with Electron you will need following tools/libraries installed:
1. NodeJs is necessary :)
2. A Text Editor of your choice. I prefer Visual Studio Code
3. Electronjs npm install electron

Countdown Timer

I'll try to walk you step by step towards the development of a countdown timer.

Initialize Project: package.json

4. First Initialize your project with npm.
Follow this article for associating your project with GitHub. Or simply initialize project with this command: npm init -y


5. Edit main to src/main.js
6. Define start command as "electron ."

Install Electron

7. Now install electron from node package manager: npm install electron

Create main.js

You can see we have imported ./countdown in line no 2.
8. Create a countdown.js file
9. Note that countdown.js and main.js should be inside src folder. Because in package.json file we have defined main file as src/main.js
10. At countdown.js we will write code to create a countdown timer which will be displayed in the app.
11. Create a html file where your countdown timer will be displayed. "countdown.html"
12. At line 11 you see <script>require('./renderer')</script> Which means there is one more JavaScript we need to create. This renderer.js is the one which  works as a mediator. A renderer script keeps proper account of HTML elements and actions which it to be performed to the application or to be returned back from the applicaiton. In our case our renderer file looks like this:
At line 3 see a constant ipc instantiated for electron ipcRenderer. IPC means inter process communication which handles communication between ipcMain anc renderer processes. ipc.send listens to the request performed by user via Html elements: buttons and forms submit evets. To know more about ipcRenderer view the link: ipcMain. 
13. Now that we have defined ipc.on and ipc.send in the renderer script file, we need to have ipcMain somewhere in the main file which responds to those requests.
14. On your main.js file you need to do some modification  and perform actions to respond the ipc events.
Now you can see: ipcMain instantiated as constant ipc in the code.const ipc = electron.ipcMain
Accordingly you can see a method which starts the countdown timer after the renderer sends a signal to the main file saying that countdown-start is initiated.
15. This is how your file folder structure should look like:
16.  Now open your command prompt or terminal and start the project: npm start
17. If you have followed above steps correctly, you shouldn'y see any issue and a desktop application's interface will be displayed like one shown below:
18. Electron builds native application which also means the application is portable and runs on Linux, Windows and MacOS. I started building this application on Windows and also tested the same code at my ubuntu. All you need is to do npm install electron.
Author:
Tags: , , ,
Subscribe to: Posts (Atom)

About Me

authorHello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
Learn More →