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
Resolve the captcha to access the links!