Electron From Scratch Build Desktop Apps With JavaScript
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
Requirements
JavaScript Fundamentals
Description
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 appsImageShrink – An app to optimize images for websitesSystTop – RealTime CPU monitor with notifications and system trayBugLogger – CRUD app to track logs which uses React and the MongoDB Atlas cloud databaseSome stuff you will learn:Create app windows with BrowserWindowCreate menus with custom items Menu rolesShell module to open files and foldersCreate system tray icons with context menusApp eventsMain process & Renderer processCommunication between processes with IPCMain & IPCRenderer Packaging Electron apps Creating log filesInteract with system hardwareCreate a data store file with settings dataIntegrate React with ElectronIntegrate a MongoDB database with MongooseSome JavaScript stuff that you may not have known
Overview
Section 1: Introduction
Lecture 1 Welcome To The Course
Lecture 2 Electron: What & Why?
Lecture 3 How Electron Works
Lecture 4 Environment & Code Repo
Lecture 5 Links
Section 2: Project 1 – Image Shrink App & Getting Started With Electron
Lecture 6 Project Intro
Lecture 7 Setup & BrowserWindow
Lecture 8 Loading a Window File & Adding an Icon
Lecture 9 Important! Absolute Icon Paths
Lecture 10 Environment & Platform Check
Lecture 11 Using Nodemon With Electron
Section 3: Working With The Menu
Lecture 12 Creating a Menu Template
Lecture 13 Menu & Global Shortcuts
Lecture 14 Menu Roles
Lecture 15 Open Window From Menu
Section 4: Interface, IPC, ImageMin & Packaging
Lecture 16 Creating The Interface
Lecture 17 Renderer Node Integration
Lecture 18 IPC Communication
Lecture 19 Implementing Imagemin & Plugins
Lecture 20 Send Events To Renderer
Lecture 21 Creating Log Files
Lecture 22 Package & Test Our App
Section 5: Project 2 – SysTop App
Lecture 23 Project Intro
Lecture 24 Boilerplate Setup
Lecture 25 Template Assets Setup
Lecture 26 Creating The Interface
Section 6: System Stats & Renderer Process
Lecture 27 Static System Stats
Lecture 28 Interval/Dynamic System Stats
Lecture 29 Progress Bar & CPU Overload
Lecture 30 Notifications API
Lecture 31 Notification Timing
Section 7: Storing Local Data
Lecture 32 Creating a Store
Lecture 33 Set Default Settings To Renderer
Lecture 34 Saving Data To Our Store/File
Lecture 35 Use Settings Data In Monitor
Section 8: Tray Icon & Wrap Up
Lecture 36 Creating a Tray Icon
Lecture 37 Tray Context Menu
Lecture 38 Nav Toggle Menu Item
Lecture 39 MainWindow Class
Lecture 40 AppTray Class
Lecture 41 Package & Test Our App
Section 9: Project 3 – BugLogger App & Creating The React UI
Lecture 42 Project Intro
Lecture 43 React-Electron Boilerplate Setup
Lecture 44 Log State & Table
Lecture 45 LogItem Component
Lecture 46 Formatting Dates With Moment
Lecture 47 AddLogItem Component
Lecture 48 Adding a Log (UI Only)
Lecture 49 Displaying Alerts
Lecture 50 Deleting a Log (UI Only)
Section 10: Main Process, IPC & MongoDB
Lecture 51 Setup MongoDB Atlas
Lecture 52 Connect To Database With Mongoose
Lecture 53 Create Log Model
Lecture 54 Get Logs From Database
Lecture 55 Add Log To Database
Lecture 56 Delete Logs From Database
Lecture 57 Clear Logs Menu Item
Lecture 58 Package & Test Our App
Lecture 59 Custom Icon
Developers that want to build desktop apps with web technologies
Course Information:
Udemy | English | 5h 48m | 2.05 GB
Created by: Brad Traversy
You Can See More Courses in the Developer >> Greetings from CourseDown.com