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
Discord Clone - Learn MERN Stack with WebRTC and SocketIO
Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
MERN Stack From Scratch
Sources: Brad Traversy
We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user profiles with orde...
13 hours 32 minutes 38 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Sources: udemy
If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course i...
13 hours 2 minutes 12 seconds
Loopback 4: Modern ways to Build APIs in Typescript & NodeJs
Sources: udemy
LoopBack is a highly-extensible, open-source Node.js framework that enables you to create dynamic end-to-end REST APIs with little or no coding. LoopBack 4 is t
5 hours 14 minutes 32 seconds
MongoDB
Sources: Amigoscode (Nelson Djalo)
MongoDB is a very popular for any project. It's a no sql database which offers high performance and scalability. Having MongoDB in your skills set will set you
3 hours 3 minutes 57 seconds