Electron From Scratch: Build Desktop Apps With JavaScript

Electron From Scratch: Build Desktop Apps With JavaScript
Electron From Scratch: Build Desktop Apps With JavaScript
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6 Hours | 2.27 GB

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

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
Table of Contents

Introduction
1 Welcome To The Course
2 Electron: What & Why?
3 How Electron Works
4 Environment & Code Repo
5 Links

Project 1 – Image Shrink App & Getting Started With Electron
6 Project Intro
7 Setup & BrowserWindow
8 Loading a Window File & Adding an Icon
9 Important! Absolute Icon Paths
10 Environment & Platform Check
11 Using Nodemon With Electron

Working With The Menu
12 Creating a Menu Template
13 Menu & Global Shortcuts
14 Menu Roles
15 Open Window From Menu

Interface, IPC, ImageMin & Packaging
16 Creating The Interface
17 Renderer Node Integration
18 IPC Communication
19 Implementing Imagemin & Plugins
20 Send Events To Renderer
21 Creating Log Files
22 Package & Test Our App

Project 2 – SysTop App
23 Project Intro
24 Boilerplate Setup
25 Template Assets Setup
26 Creating The Interface

System Stats & Renderer Process
27 Static System Stats
28 Interval/Dynamic System Stats
29 Progress Bar & CPU Overload
30 Notifications API
31 Notification Timing

Storing Local Data
32 Creating a Store
33 Set Default Settings To Renderer
34 Saving Data To Our Store/File
35 Use Settings Data In Monitor

Tray Icon & Wrap Up
36 Creating a Tray Icon
37 Tray Context Menu
38 Nav Toggle Menu Item
39 MainWindow Class
40 AppTray Class
41 Package & Test Our App

Project 3 – BugLogger App & Creating The React UI
42 Project Intro
43 React-Electron Boilerplate Setup
44 Log State & Table
45 LogItem Component
46 Formatting Dates With Moment
47 AddLogItem Component
48 Adding a Log (UI Only)
49 Displaying Alerts
50 Deleting a Log (UI Only)

Main Process, IPC & MongoDB
51 Setup MongoDB Atlas
52 Connect To Database With Mongoose
53 Create Log Model
54 Get Logs From Database
55 Add Log To Database
56 Delete Logs From Database
57 Clear Logs Menu Item
58 Package & Test Our App
59 Custom Icon