Name: Learning Electron: Build Desktop Apps using JS+HTML+CSS
Rating: 3.7 (26 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byHaider Malik

Last updated 1/2020

English

What you'll learn

Build Cross Platform Desktop Applications for Mac, Windows and Linux
Understand the near-entire Electron API in detail.
Mastering the Basics fo Electron Framework
Develop both traditional single-window apps and status tray-based apps
Get an Understanding about how Electron works
Debug Electron Application
Testing Electron Application

Course content

12 sections • 75 lectures • 6h 6m total length

Hello world in Electron5:25
Loading Html file in Electron MainBrowserWindow2:10
In this video, you are going to learn how to load html file in electron browser window
Generate file path to display web page5:31
In this video, I will show you how to generate a file path using url.format method with file protocol
Load Content on BrowserWindow after rendering web page4:54
While loading the page, the ready-to-show event will be emitted when the renderer process has rendered the page for the first time if the window has not been shown yet. Showing the window after this event will have no visual flash:
This event is usually emitted after the did-finish-load event, but for pages with many remote resources, it may be emitted before the did-finish-load event.
BrowserWindow Properties3:31
BrowserWindow title and alwaysOnTop property3:55
Returns Boolean - Whether the window is always on top of other windows.
Create Frameless window to Remove title and toolbar3:51
Open a window without toolbars, borders, or other graphical "chrome".
A frameless window is a window that has no chrome, the parts of the window, like toolbars, that are not a part of the web page. These are options on the BrowserWindow class.
Create Transparent Window1:13
By setting the transparent option to true, you can also make the frameless window transparent:

Create Custom Menu9:56
Create native application menus and context menus.
Define Keyboard Shortcuts and MenuItem Roles6:23
Accelerators are Strings that can contain multiple modifiers and a single key code, combined by the +character, and are used to define keyboard shortcuts throughout your application.
Roles allow menu items to have predefined behaviors.
It is best to specify role for any menu item that matches a standard role, rather than trying to manually implement the behavior in a click function. The built-in role behavior will give the best native experience.
The label and accelerator values are optional when using a role and will default to appropriate values for each platform.
Add Styling to Fix background text color warning1:49
In this video, you will learn how to fix background text color warning message. I will also teach you how to add css in electron
Types of MeuItem6:05
type String (optional) - Can be normal, separator, submenu, checkbox or radio.
Build MacOS Application Menu5:25
In this video, we are going to build MacOS Application menu. I will teach how to add preferences, services, and about menu item
Reload app on file changes using electron-reload1:27
In this video, you are going to learn how to reload the electron application using electron-reload package.
Create a View Menu Item4:59
Create a window Menu Item2:56
Create a Custom Menu6:58
In this vide, I will show to how to create a custom menu in electronJs

Communicate synchronously between main and renderer process10:30
ipcRenderer: Communicate asynchronously from a renderer process to the main process.
The ipcRenderer module is an instance of the EventEmitter class. It provides a few methods so you can send synchronous and asynchronous messages from the render process (web page) to the main process. You can also receive replies from the main process.
ipcMain: Communicate asynchronously from the main process to renderer processes.
Process: Main
The ipcMain module is an instance of the EventEmitter class. When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page). Messages sent from a renderer will be emitted to this module.
Communicate Asynchronously between main and renderer process4:22
Send a message to the main process asynchronously via channel, you can also send arbitrary arguments. Arguments will be serialized in JSON internally and hence no functions or prototype chain will be included.

Open File Dialog to select files and directories8:27
Display native system dialogs for opening and saving files, alerting, etc.
Add additional options for FileDialog3:03
In this lesson, I will show how to some additional properties on FileDialog such as title, message, labelButton and defaultPath
Open the File in NodeJs using fs.open()3:41
Reading Writing and deleting the File5:22
In this lesson, You are going to learn how to read, write and delete the file. You use fs.readFile to read the contents from the File. fs.writeFile to write contente asynchronously to the file. fs.unlink is used to delete the contents from the file
Watch for changes on file2:25
Watch for changes on filename. The callback listener will be called each time the file is accessed.
Creating, Reading and Deleting Directory3:39
In this video, I will teach how to create new directory using fs.mkdir method. You will also learn how read contents from the directory using fs.readdir. There is also delete method available in fs module to delete the directory which is fs.rmdir.
Choose a File from PC using File Save Dialog5:51
Returns String, the path of the file chosen by the user, if a callback is provided it returns undefined.
The browserWindow argument allows the dialog to attach itself to a parent window, making it modal.
The filters specifies an array of file types that can be displayed, see dialog.showOpenDialog for an example.
If a callback is passed, the API call will be asynchronous and the result will be passed via callback(filename).
MessageBox Dialog10:43
Returns Integer, the index of the clicked button, if a callback is provided it returns undefined.
Shows a message box, it will block the process until the message box is closed. It returns the index of the clicked button.
The browserWindow argument allows the dialog to attach itself to a parent window, making it modal.
If a callback is passed, the dialog will not block the process. The API call will be asynchronous and the result will be passed via callback(response)
Adding custom Icons in showMessageBox Dialog6:58
In Electron, for the APIs that take images, you can pass either file paths or NativeImage instances. An empty image will be used when null is passed.

Understanding webContents API7:49
webContents is an EventEmitter. It is responsible for rendering and controlling a web page and is a property of the BrowserWindow object. An example of accessing the webContents object:
Capture the snapshot of the BrowserWindow and save as a PNG File11:19
Captures a snapshot of the page within rect. Upon completion callback will be called with callback(image). The image is an instance of NativeImage that stores data of the snapshot. Omitting rectwill capture the whole visible page.
Prints window's web page as PDF6:08
Prints window's web page as PDF with Chromium's preview printing custom settings.
The callback will be called with callback(error, data) on completion. The data is a Buffer that contains the generated PDF data.

Update Image associated with Dock Icon2:20
In this video, you will learn how to set the image associated with this dock icon.
Make Dock Icon Bounce2:44
type String (optional) - Can be critical or informational. The default is informational
When critical is passed, the dock icon will bounce until either the application becomes active or the request is canceled.
When informational is passed, the dock icon will bounce for one second. However, the request remains active until either the application becomes active or the request is canceled.
Returns Integer an ID representing the request.
Change Dock Icon and set badge2:09
In this video, you will learn how to set the notification badge on Dock Icon
Make System Alert sound using shell module1:42
In this video, you are going to learn how to make system alert sound using beep method
Open Files in Finder and External Browser4:02
Shell module provides openExternal method to open files in the browser. You can also find files in the finder with the help of showItemInFolder

Detect online and offline inside rendererjs5:20
In order to build a good offline-capable web application, you need to know when your application is actually offline. You also need to know when your application has returned to an 'online' status again. Effectively, the requirements break down as such:
You need to know when the user comes back online, so that you can re-synchronize with the server.
You need to know when the user is offline, so that you can queue your server requests for a later time.
It is this process that online/offline events help to simplify.
Pros and Cons of Renderer-Only Solutions0:30
Detect online or offline status using electron-online1:59
detect that your electron app is online or not.

Getting setup with Main Window7:48
In this video, I will show you how to create a Main Browser Window in Electron
Adding Bootstrap in Electron Application1:39
In this video, I will show you how to add bootstrap in electron application
File Structure for Todo App1:58
In this video, I will place a renderer related files into separate folder
Setup DataStore10:03
Simple data persistence for your Electron app or module - Save and load user preferences, app state, cache, etc
Iterate all Todos and display them in MainBrowserWindow4:19
In this video, I will show you how to display all todos on the fronetend browserwindow
Create new Menu Item and open a new Browser Window7:32
In this video, we will open a new browserwindow by clicking on the menu item. You will also learn how to create a bootstrap form in electron app
Save new Record in DataStore6:48
In this video, I will show you how to save new record in DataStore.
Delete Record from DataStore13:10
In this video, I will show you how to delete the record from Datastore. We will create a checkbox to finish the task

Testing setup with Spectron, Mocha, and Chai13:54
Test Electron apps using ChromeDriver.
Chai is a BDD / TDD assertion library for nodeand the browser that can be delightfully paired with any javascript testing framework.
Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub.
Testing Spectron BrowserWindow Api4:18
In this video, we will write test case to test the isVisible, isMinimized, isDevToolsOpened methods from spectron browserwindow
Testing BrowserWindow size2:42
In this video, we will write a test case to test the browserwindow size. You will learn how to use getBounds() method in test case
Testing inter process communication with main process and renderer process11:10
In this video, we will write a test case to test the ipc

Requirements

Should have experience of building static web pages using HTML & CSS.
Knowledge of Javascript is required
Knowledge of NodeJs is required

Description

Electron helps us develop cross-platform applications by using existing web technologies. You don't need specific skills, for most cases, to develop apps with Electron. If you are a web developer and are interested in developing an app with Electron, then make sure you check out tutorials that will follow this article in this series.

If you want your application to be available for all the platforms we talked about, you need to deploy your app using different technologies. This is very manual and time-consuming. Now, if we talk about Electron, it is obvious that this is a JavaScript-based framework. Because all the platforms support web technologies, Electron helps in developing cross-platform apps easier. Popular applications that use Electron include Visual Studio Code, Slack, and Atom Editor.

Electron Features

Security

You don’t need to think much when migrating your existing application to Electron as the application we are creating is a desktop application and data stays locally in the system. Because of this, you can ensure data security. In case you need to store data in the cloud, check whether your cloud network has enough security functions beforehand to avoid any unwanted surprises.

Low-Level Accessibility

Before starting out, you also have to check whether all the functionalities you are providing for your desktop application are also available in Electron. In my experience, Electron provides enough control to have the extended interactive features in your application, such as Keyboard Shortcuts. It also provides low-level accessibility to the hardware and operations system components.

Hardware Accessibility

Developers can get complete access to the all hardware level access APIs expose over the JavaScript/Plugin. There is no need to compromise for the feature if you want to migrate to Electron.

Performance

Electron thrives in this aspect. If proper care is taken while developing (load only what you need), Electron can show some great gains in the terms of performance when compared to native applications. Electron saves a lot of time and provides more options to play with or develop by having a single code base for all the major platforms. These are the major problems when we deal with the native development of applications, which are all effectively solved by Electron.

However, a lot of people say that Electron is very memory hungry. I agree with this statement, but only if you develop the applications without proper care.

Code and App Management

As a Product Owner, you don’t need to maintain different teams for each platform and you will be relieved from the hassle of re-explaining your requirements with different teams. It will also reduce the auditing work to make sure the product has the same functionality across platforms.

As a developer, you need not worry about different codebases. If you encounter a bug on any platform, you can fix it at the code base. The bug will never show up on other platforms. However, you should still keep an eye on the OS level functionalities.

Reusability

Because we are using a single code base, it means we can use this for both web applications and desktop applications. We are, in a way, also reusing the base code across different platforms since we “code once, distribute everywhere.”

Production

The more known frameworks we use, the more support we get. This, in turn, gives us more open source libraries we can reuse and the decreased time to production but with more features.

Deployment/Build

This is one of the interesting aspects of Electron. There is an electron-packager module available that helps us bundle the whole code base into the respective packages. Although people debate that Electron takes a lot of memory, as I said, Electron needs a little care during development to avoid this.

UI/UX

With web technologies, you are open to multiple technologies that provide great User Interface (UI) and User Experience (UX) to all your users with great comfort. Also, you can be sure that you are providing the same experience to all your users across different platforms.

Cost and Time

You will save a lot of development time and money because, for the tech stack we use, there are a lot of developers who can do it for less and achieve good results. You can save a lot of time using the single code base and any developer can work on anything.

History of Electron

When we talk about any technology we need to talk a little about the history behind it. Let's briefly look at the history of Electron.

Electron was founded by Cheng Zhao, during the development of Atom a cross-platform text editor released in July 2013. It was made open source, developed, and supported by GitHub using C++, JavaScript, Objective C, and Python. It was intended to make cross-platform development easier for Atom creation.

Who this course is for:

Anyone who wants to create compelling native desktop applications

What you'll learn

Explore related topics

Course content

Getting Started with Electron8 lectures • 31min

Custom Menu in Electron9 lectures • 46min

Inter Process Communication(IPC)2 lectures • 15min

Working with Dialog Module9 lectures • 50min

WebContents, Capture Screen, Print Pdf3 lectures • 25min

Dock Icon on MacOs5 lectures • 13min

Detect Online and Offline Status3 lectures • 8min

Todo App with Electron, HTML, CSS and Javascript8 lectures • 53min

Debugging Electron Application3 lectures • 4min

Testing Electron Application with Spectron, Mocha, and Chai4 lectures • 32min

Requirements

Description

Who this course is for: