Electron From Scratch: Build Desktop Apps With JavaScript
5h 48m 24s
English
Paid
Course description
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.
Read more about the course
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
0:00
/ #1: Welcome To The Course
All Course Lessons (57)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome To The Course Demo | 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 |
Unlock unlimited learning
Get instant access to all 56 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)
Sources: udemy, Academind Pro
Join the most comprehensive Node.js course on Udemy and learn Node in both a practical as well as theory-based way! Node.js is probably THE most popular and modern server-side p...
38 hours 51 minutes 43 seconds
Database Mastery: MongoDB
Sources: jsmastery.pro, Adrian Hajdin
Enhance your backend development skills with the intensive Database Mastery: MongoDB course! This course is perfect for beginners and developers who...
11 minutes 58 seconds
Full-Stack React with GraphQL and Apollo Boost
Sources: udemy
This course is designed for anyone who wants to start building applications with React and GraphQL! In this course, we will build a recipe application from scratch with full aut...
6 hours 54 minutes 31 seconds
The Complete Developers Guide to MongoDB
Sources: udemy, Stephen Grider
Master MongoDB and Mongoose design with a test-driven approach. MongoDB is the hottest database solution in the tech world right now, able to power anything from your growing pe...
13 hours 32 minutes 42 seconds