hi I'm TK and welcome back to red stapler Channel this is the updated
version of electron tutorial I'll try to make it short and concise as possible
and this video you'll write a simple app to monitor CPU usage together using HTML
CSS and JavaScript the electron framework and also learn how to package
the app and create an installer for distribution ready let's check it out
before we can start you need to install node.js and gate first just download the
Installer from their website and follow instruction
and here's the empty folder I created for this project first we are going to
open git bash and install the electron with NPM install command
this would take a while let's talk about how to create a new
project you can create it from scratch if you want to but I'm a lazy person so
there is a tool called electron Forge which will help you set up a project
very quickly with some skeleton code to start from
so once the electron has been installed we will install electron Forge by using
NPM install create electron app
after the install has finished you can create a new project by typing create electron
app followed by a project name let's name it cool app this will take some time
and here's the created project folder the project comes with skeleton code and
necessary script so let's run the app using NPM run start command
and here's the application a simple text with developer console open it looks
similar to google chrome since electron is based on chromium browser this means
you can use HTML CSS and JavaScript to code this app like you do on a website
now the code for this app is in the source folder these files are generated
by the electron forge I'm going to use VSCode to open it
so this is HTML page representing the app window and there's CSS
the javascript file here is the main logic of the app here's the function to
create a new window for the app then load the HTML file into that window
and then open the dev console electron needs some time to initialize
so we will call the function above on ready event and the rest of the code is
to handle when user click the close button on the window or click the
shortcut on the dock icon in MacOS this is why I use the electron Forge to
create a new project instead of creating a new one from scratch I just don't want
to rewrite this code every time when starting a new project so let's start
coding since we are going to create an app to monitor the CPU usage you'll need
to use node.js module calling os-utils the cool thing about electron is you can
use any node.js module or any JavaScript library for your app so first install
the os-utils to our project using npm install command
then import it to our javascript file using require
and call CPU usage method which will return the value with a callback function
and print it on a console
I will also pull the memory usage and system total memory as example
now we will run the app again
so you will see that the data is on the window console but not the app console
this because the main JavaScript file and the HTML file are running on a
separate process the main js is on a main process and the HTML in browser
window is on a renderer process if we want to put the data from the main
process to the renderer process we will need to use an inter process
communication or IPC let's see how it works so in the main process we will
send the data using send method from mainWindow.webContents
you can name the message so you can receive them correctly in renderer process
the important step is to enable the node integration in the web preferences so we
can use node.js model in HTML file to receive the message
in the html file first import electron
and then IpcRenderer
you can receive the message by listen to the message name
then get the data from the event handler I will put them on the dev console
okay looks good let's run the app again
now we have successfully communicate between process the next step is to work
on user interface I'm going to create a div and two spans inside for each data
run for level and one for value
then the CSS first set the root elements
to 100% of the viewport
then set the size of the body to 100 center of the root element add some padding
overflow:hidden to hide a scroll bar then change the background color to gray and use
flex layout to Center everything on the screen
then for each box again use flex layout Center
also sets the flex direction to column so the level is on top then set the font
size line height and padding
also sets the font styles of the level
finally we need to add JavaScript to put the data we receive from the main
process to span element just use getElementById and change the inner HTML
I will use ToFixed to limit the decimal place to two
let's run the app again
okay looks good now we will need to add code
to refresh the data every second also the window is too small so let's fix that in
the main process first let's change the window width to 1000 pixels also change
the app icon to the one in a source folder
here's the icon that I'm going to use
next use set interval to retrieve CPU usage every one second
then remove all console log and dev console code
and run the app again
the app is almost ready the next step is to package it and create an installer
actually the electron for which can do this easily by just using NPM run make a
man your app will be packaged into executable file on your current machine
platform the output will be an out folder in your project
the app exe file for windows looks good but as for the Installer I don't really
like it much because it's a one-click installer which install immediately
without any confirmation window or allow users to change the install pack so I'm
going to use another packager called electron builder let's install it with
npm since it's a packager I will install it with dev option next we'll add build
setting for our own installer in package.json first we will change the
product name cool app is our project name and we don't want to use that for
real application name so I will change to CPU monitor you can also change the
description if you like next is to create a new script to run electron builder
so now we can build the Installer by typing npm run build installer next we
are going to setup a build configuration first we need to add app ID which is our
project name
and win for window platform which then we will set a target to NSIS which is
an installer type that we are all familiar with then send the app shortcut
icon to our app icon
then this is optional if your app needs to run as admin you can set the
requested execution level to require administrator
then for NSIS section we will change the Installer and uninstaller icons
then change the uninstall display name that user will see in a control panel
if you want to show the app license you can a path to data license file here
I will set oneClick install option to false and allowed to change installation
directory to true so users can change the install path
then create a text file for our license
also don't forget to change the app name on a browser window in our HTML file
now I'm going to run our script you create installer this will take some time
the output will be in dist folder
and here's the installer let's try it
and here's our app name on the control panel
and that's all for this tutorial you can find source code in a description box
below I hope this video helped you get start
with electron basic if you want to see more dev tips and tutorials
subscribe this channel to stay tuned for weekly update thanks for watching see
you next time bye