Description

Create 3 useful desktop applications with web technologies using Electron

Be 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 Images

Electron from Scratch: Build Desktop Applications with JavaScript

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews