Creating a Desktop Application using Electron

Introduction

• Focus: Building a cross-platform app using HTML, CSS, and JavaScript via Electron.
• Electron: Enables creation of desktop apps. Common apps using Electron: VS Code, Atom, Postman, Slack.
• Favorite Technology: One of the favorite technologies of the presenter.
• Course Update: The Udemy course is being updated. Previous project 'Image Shrink' being replaced with 'Image Resizer'.
• Goal: Learn fundamental skills for Electron development.

Features of 'Image Resizer'

• Functionality: Edits the dimensions of an image (width and height).
• Example Use: Shrinking a large bird image.
• Output: Displays resized image in a specific folder.

Prerequisites

• Skills Needed: Basic JavaScript. No need for Node.js.
• Tools: Documentation available at electronjs.org.
• Supplementary: Links to final repository and theme files provided.

Setup and Initialization

• Starter Files: Clone or download from repository. Contains HTML, CSS, images, etc.
• Initialize Project: Instructions provided for setting up with npm.
• Main Process: Described as the back-end of the app.
• Renderer Process: Described as the front-end of the app.
• First Steps: Console log from main.js to verify setup.

Creating the Main Window

• Configurations: Setting width, height, and title of the application window.
• Loading HTML File: Uses path.join to load 'index.html' in the renderer folder.
• Ready Event: Listening for app.whenReady to call the createMainWindow function.
• Cross-Platform Handling: Boilerplate code to handle app quitting and window behavior specific to MacOS vs. other platforms.
• Development Setup: Auto-open DevTools in development mode.
• Auto-Reload Setup: Using electron-mon for auto-reload during development.

Adding UI and Theme

• HTML and CSS: Integrated custom Tailwind CSS and basic HTML structure for UI.
• Meta Tags: Added necessary meta tags to avoid security warnings.
• Preparing JavaScript: Cleaned up provided scripts and renamed for clarity.

Customizing the Menu

• Menu Template: Created a custom menu template for the app.
• File Menu: Added Quit option to the File menu.
• Menu Roles: Used menu roles to simplify menu creation.
• About Window: Created a separate About window.
• Cross-Platform Menus: Different configuration for Mac and Windows.

Handling Image Selection and Form

• Event Listeners: Added event listeners for image input and form submission.
• File Validation: Ensured the uploaded file is an image.
• Displaying Form: Made form visible upon selecting a valid file.
• Original Dimensions: Displayed the original width and height of the image in inputs.
• Output Path: Displayed output path for resized image using Node.js os and path modules exposed via a preload script.

Resizing the Image

• IPC Communication: Used IPC renderer and main for inter-process communication.
• Form Submission: Sent image details to main process via IPC upon form submission.
• Handling Resize in Main Process: Used resize-img package to resize the image.
• Destination Path: Checked and created destination folder if not existing.
• File Writing: Wrote resized image to the designated output path.
• Success Feedback: Opened destination folder and displayed success message to the user.

Final Steps and Packaging

• Testing: Verified development setup and made adjustments as needed.
• Production vs Development: Ensured correct configuration for production.
• Packaging: Brief mention of Electron packager with recommendation to explore further based on platform.
• Summary: Covered fundamental aspects of Electron including main vs renderer process, preload scripts, IPC, menu creation, and modular structure.