Master Electron: Desktop Apps using HTML, JavaScript & CSS
4.5 (283 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,340 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master Electron: Desktop Apps using HTML, JavaScript & CSS to your Wishlist.

Add to Wishlist

Master Electron: Desktop Apps using HTML, JavaScript & CSS

The Complete Electron course for learning to build Cross Platform Desktop Apps using HTML, JavaScript & CSS
4.5 (283 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,340 students enrolled
Created by Ray Viljoen
Last updated 6/2017
English
English
Current price: $10 Original price: $165 Discount: 94% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build native desktop applications using existing knowledge of HTML, CSS & JavaSript
  • Create applications for both Mac, Windows & Linux
  • Understand the near-entire Electron API in detail.
  • Package Electron applications for distribution.
  • Expand your existing skills beyond the browser & add an invaluable new skill to your resume.
  • Verifiable certificate of completion.
View Curriculum
Requirements
  • A good understanding of JavaScript. Basic understanding of ES6 would be beneficial.
  • Working knowledge of HTML & CSS.
  • Be comfortable with very basic usage of the command line (CLI)
  • Understand JavaScript in the Browser. e.g. Knowing what the global 'window' variable is etc.
  • Basic understanding of Node.js
Description

Go from Web Developer to Desktop Applications Developer by learning
to use the entire Electron API from scratch.

This course is suitable for BOTH complete Electron beginners and existing Electron developers looking to advance to the next level.

  • Learn to develop with Electron using the best tools
  • Understand the different parts of Electron and how they work together
  • Cover the near-entire Electron API, learning one module at a time
  • Learn Electron features & techniques for using API modules together
  • Put your new knowledge to practical use by building a detailed 8-step Electron project from scratch.

An invaluable skill for any Web Developer to expand their career opportunities.

Electron is by far the most popular and fastest growing library for building cross-platform desktop applications using HTML, JavaScript & CSS.

This course will provide a very practical and concise approach to learning Electron from scratch.
You will be able to start building real-world desktop applications immediately.

Content and Overview

With 45 concise and practical lectures, this course will provide a COMPLETE understanding of Electron and it's full API.

  • It is suitable for anyone with a a good understanding of HTML, CSS & JavaScript.
  • Basic command line usage and an understanding of ES2015 (ES6) will be beneficial.

The course starts by setting up the Electron development environment and covers some useful tools to aid in the development process.

The main body of the course then covers the 3 individual sections of the Electron API in great detail, with very practical individual lessons on each API module.

Once the API is covered, the course looks at some useful features and techniques, also demonstrating how Electron integrates with Native HTML5 APIs.

Finally you'll build a real-world application which covers a large chunk of the Electron API in real-world scenarios. The project lessons is divided into 8 individual videos and will take you step-by-step to a complete, distribution-ready desktop application.

Upon completion of this course you will have the practical skills to immediately start building high quality desktop applications for Mac, Windows & Linux.

This course is to the point and everything is demonstrated in the most simple, yet practical ways, to get you become an advanced Electron Developer.

Who is the target audience?
  • This course is designed for developers with a good understanding of web technologies such as HTML, CSS & JS, looking to start building native Desktop applications using their existing knowledge.
  • The course covers almost every aspect of Electron and is very comprehensive.
  • No prior experience with Electron is required.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
47 Lectures
05:24:39
+
Overview
2 Lectures 06:16

An introduction to this course covering:

  • Introduction to me, Ray Viljoen
  • Why you should learn & use Electron
  • What exactly Electron is and how it's different from native apps
  • What and how this course will teach you


Preview 02:04

An overview of lessons' structure, Electron documentation and coding style used in this course.

Lesson Structure
04:12
+
Developing with Electron
6 Lectures 31:33

A first look at installing the Electron command line tools and compiling/running the electron-quick-start app.

Install & Run
05:29

A step-by-step look at how an Electron app starts, creates app windows and loads content into those windows.
This lesson will provide you with a clear understanding of what happens when we compile and run an Electron app and demonstrates the 2 processes that comprises the app.

App Structure
08:54

A quick tutorial on using the Electron-Reload module for live reloads of the Electron browserWindow (renderer process) for a faster and more automated development environment.

Electron-Reload
02:22

Learn to compile native Node modules for Electron on Mac.

Using Native Node Modules on Mac
06:06

Learn to compile native Node modules for Electron on Windows.

This lesson covers installing Windows build tools and rebuilding modules using electron-rebuild.

Using Native Node Modules on Windows
04:56

Learn how to install the Devtron extension for the standard Chrome Developer tools in Electron's BrowserWindow.

Debugging with Devtron
03:46
+
Main Process API
16 Lectures 01:44:48

Electron.app controls the application lifecycle and is key to having apps that truly native.

This lecture will teach you how to listen for app events and invoke actions such as quitting the app or even preventing it from quitting.

App
11:17

Electron.BrowserWindow is responsible for managing the web contents (HTML files) that gets loaded into the app.

In this video we'll see how to manage & control content loading for a truly native user experience.

BrowserWindow: Getting Started
05:55

An Electron app can consist of multiple BrowserWindows and the Electron API allows us to create relationships between these windows.
In this lesson we'll see how to create those relationships and also how to create modal child windows.

Preview 03:27

Some applications will require a cleaner looking BrowserWindow without the native system elements like menu bars.
In this lesson we'll see how to create these minimal windows and define how the user can interact with them.

BrowserWindow: Frameless Window
03:46

This lesson is a broad overview of some of the important, or interesting, Electron.BrowserWindow methods. It covers both static methods and instance methods.

BrowserWindow: Properties, Events & Methods
08:15

A short tutorial on using the Electron-Window-State package to manage and persist the BrowserWindow state between sessions.

BrowserWindow: Managing window state
02:32

Learn to use the BrowserWindow.webContents object to take full control of the contents loaded into the BrowserWindow instance.

This lesson includes a selection of important topics such as:

  • Handling new window actions
  • Intercepting and invoking navigation events
  • Accessing content behind basic auth
  • Listening for media events like play & pause
  • Interpreting context menu events when a user right clicks

And a general overview of the more generic or self-explanatory methods & events.

BrowserWindow: webContents
15:15

Understand the context in which an Electron session exists and how to create & attach custom sessions to specific BrowserWindow instances.

Session: Getting Started
08:37

An quick look at using the Cookies class to read & write cookies on a session instance.

Preview 05:20

Manage app downloads with the downloadItem object on the will-download session event.

This lesson will show you how to manage download state and set predefined download locations.

Session: DownloadItem
08:03

The Electron Dialog module provides easy access to native system dialogs including:

  • Save file dialog
  • Open file dialog
  • Error dialog
  • Message dialog

Learn how to create and customise these dialogs for a completely native solution to user input.

Dialog
07:10

Understand the concept of accelerator strings to define keyboard shortcuts and implement them using the globalShortcut class.

Accelerator strings is an important part of Electron and will come in use when creating Menus also.

Accelerator & globalShortcut
03:52

The Menu class will enable you to create rich, native application menus.

This lesson will teach you how to create menus and then populate them with menu items, using the menuItem class and also how to simplify menu creation through the use of menu templates.

Menu & MenuItem
11:21

This is a follow up lesson on using the the Menus & Menu Items to create context menus on from the webContents' context-menu event, triggered by a user right clicking the app content.

Menu: Context Menu
03:19

Create context menus in the application's notification area. e.g. MacOS menu bar icons.

Tray
04:52

The powerMonitor class is used to monitor power-state changes to the user's machine.
These state changes include:

  • Suspend/Sleep
  • Resume/Wake
  • AC Power
  • Battery Power
PowerMonitor
01:47
+
IPC Communication
1 Lecture 12:07

A crossover lesson, covering Inter-Process Communication. The IPC modules allow Electron's Main process and Renderer Process's to communicate. Learn how to use these modules synchronously or asynchronously and organise data exchanges via custom channels.

ipcMain & ipcRenderer
12:07
+
Renderer Process API
4 Lectures 31:44

Simplify common IPC use-cases with the remote module. Learn how to use this module and understand how it works internally.

Remote
07:23

See how to reference Electron-generated browser windows from the window.open method. This lesson will teach you how to:

  • Control BrowserWindow instance generated from the window.open method
  • Customise new browser windows with native frame features.
  • Inject custom JavaScript into the ew browser window from the renderer process.
BrowserWindowProxy
08:58

Manage basic rendering of the webContents via the webFrame module.
See how to:

  • Control zoom levels
  • Inject custom JavaScript
  • Check resource usage
WebFrame
05:50

Display and manage external content securely within an Electron BrowserWindow using the webView tag.

Webview Tag
09:33
+
Shared API
4 Lectures 26:42

Learn about Electron's unique extensions to the global Node process object.

Use the modified process to invoke app crashes & hangs, check process memory usage and more.

Process
05:39

Screen
08:30

Pass both local and remote files to default system apps instead of handling them inside the Electron app.

Shell
07:07

Use NativeImage objects to take full control of images inside an Electron app.

Learn to:
  • Create a NativeImage instance
  • Save PNG, JPEG, or BMP file from a NativeImage instance
  • Crop, Resize images
Preview 05:26
+
Features & Techniques
4 Lectures 12:55

Learn to perform copy & paste commands on the system clipboard.

Clipboard
03:08

Use offscreen webContents with hidden BrowserWindows to perform tasks on a renderer process in the background.

Offscreen Rendering
05:16

Get notified of changes to a users connection status using the HTML5 navigator object.

Network Detection
02:04

Implement the HTML5 Battery Status API to get real-time feedback on the users battery status.

Battery Status
02:27
+
Project
10 Lectures 01:38:34

An overview of the bookmarking application we'll be building, including features & initial setup.


1 - Project Overview
09:15

Create the main BrowserWindow and add a modal input for submitting new items.

2 - Submitting New Items
11:09

Pass a newly added bookmark item to an offscreen BrowserWindow via IPC messaging, to retrieve the bookmark's thumbnail image and title.

3 - Retrieving Item Details
05:25

Listen for newly retrieved items via an IPC response message and add the items to the main BrowserWindow HTML.

Also implement simple storage to persist newly added items.

4 - Showing & Persisting Items
08:34

Implement item navigation and selection, using the keyboard arrow keys and mouse.

5 - Selecting Items for Opening
11:42

Create a BrowserWindowProxy object when opening an item and pass that item's details to the BrowserWindow for rendering in a secure <webview> tag.

6 - Opening Items in Reader
12:44

Add a button to the reader window for deleting items and persisting changes.

7 - Deleting Items
11:46

Add a complete menu with platform specific menu items and full keyboard control over bookmark items.

8 - Application Menu
15:02

Learn to use the electron-packager module to package the project application into a standalone executable with custom icons and asar archived project files.

Packaging for Distribution
12:21

Outro
00:36
About the Instructor
Ray Viljoen
4.6 Average rating
819 Reviews
5,498 Students
3 Courses
Practical Courses Designed for Learning Efficiency.

Stackacademy provides high-quality Courses for Developers, with learning-efficiency as the #1 priority.

My name is Ray Viljoen,
I have 9 years experience as a Full Stack Developer and have real world experience building, maintaining & improving a wide range of applications.

My courses are concise, teaches practical skills and is designed to also serve as usable future reference material.