Booking options
Price:
BuyContact Us£58.99
Course Images
Electron from Scratch: Build Desktop Applications with JavaScript
By Packt
🔥 Limited Time Offer 🔥
Get a 10% discount on your first order when you use this promo code at checkout: MAY24BAN3X
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
5 hours 47 minutes
All levels
Description
Create 3 useful desktop applications with web technologies using ElectronBe ready to get hands-on in this interactive project-based course designed to help you build and package cross-platform desktop applications using Electron. If you didn't already know, many popular apps such as VS Code, Slack, and Skype are built on Electron! Throughout this course, you'll be building 3 apps - • ImageShrink - An app to optimize images for websites • SystTop - A real-time CPU monitor with notifications and system tray • BugLogger - A CRUD app to track logs, which uses React and the MongoDB Atlas cloud database In the first section of this course, you will start with an introduction to Electron and how it works. As you progress, you will start creating your first app- ImageShrink. You will also learn how to create menus with custom items. The next section will take you through the steps to create the interface, log files, and IPC communication. In addition to this, you will go on to build a menu template. In later sections, you'll get up to speed with working through 2 more applications, SystTop and BugLogger. The course will also help you focus on how to work with Interval/Dynamic System Stats. By the end of this course, you will be able to build desktop apps with Electron and even establish communication between processes with IPCMain and IPCRenderer. All codes and supporting files are available at- https://github.com/PacktPublishing/Electron-from-Scratch-Build-Desktop-Applications-with-JavaScript
What You Will Learn
Become well-versed with how to use IPC to communicate between Main and Renderer Processes
Understand how to create and package 3 complete cross-platform applications
Delve into working with local data as well as the MongoDB Atlas database
Audience
This course is designed for developers who are looking to build desktop apps with web technologies.
Approach
This is a hands-on, project-based course for learning how to build and package cross-platform desktop applications using Electron. It is carefully structured and contains effective explanations and examples to help you learn easily.
Key Features
Gain proficiency in building desktop applications with Electron * Understand how to use Vanilla JS and React with Electron * Create custom menu items, system tray apps, and more
Github Repo
https://github.com/packtpublishing/electron-from-scratch-build-desktop-applications-with-javascript
About the Author
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.
Course Outline
1. Introduction
1. Welcome To The Course Introduction: Welcome To The Course |
2. Electron: What & Why? Introduction: Electron: What & Why? |
3. How electron works Introduction: How electron works |
4. Environment & Code Repo Introduction: Environment & Code Repo |
2. Starting Project 1 - ImageShrink App
1. Project Intro Starting Project 1 - ImageShrink App: Project Intro |
2. Setup & BrowserWindow Starting Project 1 - ImageShrink App: Setup & BrowserWindow |
3. Loading a Window File & Adding an Icon Starting Project 1 - ImageShrink App: Loading a Window File & Adding an Icon |
4. Environment & Platform Check Starting Project 1 - ImageShrink App: Environment & Platform Check |
5. Using Nodemon With Electron Starting Project 1 - ImageShrink App: Using Nodemon With Electron |
3. Working with the menu
1. Creating a Menu Template Working with the menu: Creating a Menu Template |
2. Menu & Global Shortcuts Working with the menu: Menu & Global Shortcuts |
3. Menu Roles Working with the menu: Menu Roles |
4. Open Window From Menu Working with the menu: Open Window From Menu |
4. Interface, IPC, ImageMin & Packaging
1. Creating The Interface Interface, IPC, ImageMin & Packaging: Creating The Interface |
2. Renderer Node Integration Interface, IPC, ImageMin & Packaging: Renderer Node Integration |
3. IPC Communication Interface, IPC, ImageMin & Packaging: IPC Communication |
4. Implementing Imagemin & Plugins Interface, IPC, ImageMin & Packaging: Implementing Imagemin & Plugins |
5. Send Events To Renderer Interface, IPC, ImageMin & Packaging: Send Events To Renderer |
6. Creating Log Files Interface, IPC, ImageMin & Packaging: Creating Log Files |
7. Package & Test Our App Interface, IPC, ImageMin & Packaging: Package & Test Our App |
5. Project 2 - SysTop App
1. Project Intro Project 2 - SysTop App: Project Intro |
2. Boilerplate Setup Project 2 - SysTop App: Boilerplate Setup |
3. Template Assets Setup Project 2 - SysTop App: Template Assets Setup |
4. Creating The Interface Project 2 - SysTop App: Creating The Interface |
6. System Stats & Renderer Process
1. Static System Stats System Stats & Renderer Process: Static System Stats |
2. Interval/Dynamic System Stats System Stats & Renderer Process: Interval/Dynamic System Stats |
3. Progress Bar & CPU Overload System Stats & Renderer Process: Progress Bar & CPU Overload |
4. Notifications API System Stats & Renderer Process: Notifications API |
5. Notification Timing System Stats & Renderer Process: Notification Timing |
7. Storing local data
1. Creating a Store Storing local data: Creating a Store |
2. Set Default Settings To Renderer Storing local data: Set Default Settings To Renderer |
3. Saving Data To Our Store/File Storing local data: Saving Data To Our Store/File |
4. Use Settings Data In Monitor Storing local data: Use Settings Data In Monitor |
8. Tray Icon & Wrap Up
1. Creating a Tray Icon Tray Icon & Wrap Up: Creating a Tray Icon |
2. Tray Context Menu Tray Icon & Wrap Up: Tray Context Menu |
3. Nav Toggle Menu Item Tray Icon & Wrap Up: Nav Toggle Menu Item |
4. MainWindow Class Tray Icon & Wrap Up: MainWindow Class |
5. AppTray Class Tray Icon & Wrap Up: AppTray Class |
6. Package & Test Our App Tray Icon & Wrap Up: Package & Test Our App |
9. Project 3 - BugLogger App & Creating The React UI
1. Project Intro Project 3 - BugLogger App & Creating The React UI: Project Intro |
2. React-Electron Boilerplate Setup Project 3 - BugLogger App & Creating The React UI: React-Electron Boilerplate Setup |
3. Log State & Table Project 3 - BugLogger App & Creating The React UI: Log State & Table |
4. LogItem Component Project 3 - BugLogger App & Creating The React UI: LogItem Component |
5. Formatting Dates With Moment Project 3 - BugLogger App & Creating The React UI: Formatting Dates With Moment |
6. AddLogItem Component Project 3 - BugLogger App & Creating The React UI: AddLogItem Component |
7. Adding a Log (UI Only) Project 3 - BugLogger App & Creating The React UI: Adding a Log (UI Only) |
8. Displaying Alerts Project 3 - BugLogger App & Creating The React UI: Displaying Alerts |
9. Deleting a Log (UI Only) Project 3 - BugLogger App & Creating The React UI: Deleting a Log (UI Only) |
10. Main Process, IPC & MongoDB
1. Setup MongoDB Atlas Main Process, IPC & MongoDB: Setup MongoDB Atlas |
2. Connect To Database With Mongoose Main Process, IPC & MongoDB: Connect To Database With Mongoose |
3. Create Log Model Main Process, IPC & MongoDB: Create Log Model |
4. Get Logs From Database Main Process, IPC & MongoDB: Get Logs From Database |
5. Add Log To Database Main Process, IPC & MongoDB: Add Log To Database |
6. Delete Logs From Database Main Process, IPC & MongoDB: Delete Logs From Database |
7. Clear Logs Menu Item Main Process, IPC & MongoDB: Clear Logs Menu Item |
8. Package & Test Our App Main Process, IPC & MongoDB: Package & Test Our App |
9. Custom Icon Main Process, IPC & MongoDB: Custom Icon |
Course Content
- Electron from Scratch: Build Desktop Applications with JavaScript
About The Provider
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Reviews
There are no reviews for Electron from Scratch: Build Desktop Applications with JavaScript yet.Why not be the first one to review this course?