Electron From Scratch: Build Desktop Apps With JavaScript

Name: Electron From Scratch: Build Desktop Apps With JavaScript
Price: 9 USD
Availability: InStock

5h 48m 24s

English

Paid

April 29, 2024

Create 3 useful desktop applications with web technologies using Electron. This is a hands on, project based course on learning how to build and package cross-platform desktop applications using Electron. Many popular apps including VSCode, Slack and Skype are built on Electron.

We will build 3 apps

ImageShrink - An app to optimize images for websites

SystTop - RealTime CPU monitor with notifications and system tray

BugLogger - CRUD app to track logs which uses React and the MongoDB Atlas cloud database

Some stuff you will learn:

Create app windows with BrowserWindow
Create menus with custom items
Menu roles
Shell module to open files and folders
Create system tray icons with context menus
App events
Main process & Renderer process
Communication between processes with IPCMain & IPCRenderer
Packaging Electron apps
Creating log files
Interact with system hardware
Create a data store file with settings data
Integrate React with Electron
Integrate a MongoDB database with Mongoose
Some JavaScript stuff that you may not have known

Requirements:

JavaScript Fundamentals

Who this course is for:

Developers that want to build desktop apps with web technologies

What you'll learn:

Learn how to build desktop apps with Electron
Create and package 3 complete cross-platform applications
Use IPC to communicate between Main & Renderer Processes
Use Vanilla JS & React with Electron
Create custom menu items, system tray apps and more
Work with local data as well as MongoDB Atlas database

Watch Online Electron From Scratch: Build Desktop Apps With JavaScript

Join premium to watch

Go to premium

#	Title	Duration
1	Welcome To The Course	04:19
2	Electron: What & Why?	04:35
3	How Electron Works	03:12
4	Environment & Code Repo	05:16
5	Project Intro	03:19
6	Setup & BrowserWindow	06:19
7	Loading a Window File & Adding an Icon	07:09
8	Environment & Platform Check	07:22
9	Using Nodemon With Electron	03:15
10	Creating a Menu Template	07:22
11	Menu & Global Shortcuts	05:01
12	Menu Roles	04:53
13	Open Window From Menu	05:08
14	Creating The Interface	11:10
15	Renderer Node Integration	05:12
16	IPC Communication	07:01
17	Implementing Imagemin & Plugins	13:25
18	Send Events To Renderer	03:30
19	Creating Log Files	05:10
20	Package & Test Our App	07:38
21	Project Intro	03:16
22	Boilerplate Setup	03:52
23	Template Assets Setup	04:42
24	Creating The Interface	10:49
25	Static System Stats	11:08
26	Interval/Dynamic System Stats	09:12
27	Progress Bar & CPU Overload	04:39
28	Notifications API	05:42
29	Notification Timing	09:49
30	Creating a Store	10:02
31	Set Default Settings To Renderer	04:32
32	Saving Data To Our Store/File	09:26
33	Use Settings Data In Monitor	05:34
34	Creating a Tray Icon	06:14
35	Tray Context Menu	05:27
36	Nav Toggle Menu Item	04:29
37	MainWindow Class	04:49
38	AppTray Class	05:44
39	Package & Test Our App	03:10
40	Project Intro	02:33
41	React-Electron Boilerplate Setup	10:19
42	Log State & Table	08:15
43	LogItem Component	09:00
44	Formatting Dates With Moment	03:29
45	AddLogItem Component	08:47
46	Adding a Log (UI Only)	06:14
47	Displaying Alerts	07:13
48	Deleting a Log (UI Only)	03:58
49	Setup MongoDB Atlas	04:19
50	Connect To Database With Mongoose	04:41
51	Create Log Model	04:08
52	Get Logs From Database	08:40
53	Add Log To Database	04:56
54	Delete Logs From Database	04:45
55	Clear Logs Menu Item	08:06
56	Package & Test Our App	04:42
57	Custom Icon	01:27