Book Image

Electron Projects

By : Denys Vuika

Book Image

Electron Projects

By: Denys Vuika

Overview of this book

The Electron framework allows you to use modern web technologies to build applications that share the same code across all operating systems and platforms. This also helps designers to easily transition from the web to the desktop. Electron Projects guides you through building cross-platform Electron apps with modern web technologies and JavaScript frameworks such as Angular, React.js, and Vue.js. You’ll explore the process of configuring modern JavaScript frameworks and UI libraries, real-time analytics and automatic updates, and interactions with the operating system. You’ll get hands-on with building a basic Electron app, before moving on to implement a Markdown Editor. In addition to this, you’ll be able to experiment with major JavaScript frameworks such as Angular and Vue.js, discovering ways to integrate them with Electron apps for building cross-platform desktop apps. Later, you’ll learn to build a screenshot snipping tool, a mini-game, and a music player, while also gaining insights into analytics, bug tracking, and licensing. You’ll then get to grips with building a chat app, an eBook generator and finally a simple digital wallet app. By the end of this book, you’ll have experience in building a variety of projects and project templates that will help you to apply your knowledge when creating your own cross-platform applications.

Preface

Who this book is for

What this book covers

Release cycle note

To get the most out of this book

Free Chapter

Building Your First Electron Application

Building Your First Electron Application

Technical requirements

What is Electron?

Preparing a development environment

Creating a simple application

Packaging for multiple platforms

Building a Markdown Editor

Building a Markdown Editor

Technical requirements

Configuring a new project

Integrating the editor component

Fitting the screen size

Integrating the application menu

Adding drag and drop support

Supporting automatic updates

Changing the title of the application

Integrating with Angular, React, and Vue

Integrating with Angular, React, and Vue

Technical requirements

Building an Electron application with Angular

Building an Electron application with React

Building an Electron application with Vue.js

Building a Screenshot Snipping Tool

Building a Screenshot Snipping Tool

Technical requirements

Preparing the project

Configuring frameless windows

Transparent windows

Making application windows draggable

Adding a snip toolbar button

Using the desktopCapturer API

Calculating the primary display size

Generating and saving a thumbnail image

Resizing and cropping the image

Testing the application's behavior

Integrating with the system tray

Hiding the main application window on startup

Registering global keyboard shortcuts

Making a 2D Game

Making a 2D Game

Technical requirements

Configuring a game project

Running a Hello World example

Rendering background images

Preventing window resizing

Rendering a sprite

Scaling sprites

Handling keyboard input

Flipping sprites based on their direction

Controlling sprite coordinates

Controlling sprite speed

Building a Music Player

Building a Music Player

Technical requirements

Creating a project scaffold

Exploring the music player component

Exploring the playback control buttons

Implementing a song progress bar

Displaying music metadata

Improving the user interface

Reviewing the final structure

Analytics, Bug Tracking, and Licensing

Analytics, Bug Tracking, and Licensing

Technical requirements

Understanding analytics and tracking

Creating your own solution or using an existing service

Using Nucleus for Electron applications

Creating a new Nucleus account

Creating a new project with tracking support

Installing the Nucleus Electron library

Inspecting real-time analytics data

Disabling tracking per user request

Verifying real-time user statistics

Supporting offline mode

Handling application updates

Loading global server settings

License checking and policies

Building a Group Chat Application with Firebase

Building a Group Chat Application with Firebase

Technical requirements

Creating an Angular project

Creating a Firebase account

Creating a Firebase application

Configuring Angular Material components

Building a login dialog

Connecting the login dialog to Firebase Authentication

Configuring the Realtime Database

Rendering the group list

Implementing the group messages page

Displaying group messages

Sending group messages

Verifying the Electron Shell

Building an eBook Editor and Generator

Building an eBook Editor and Generator

Technical requirements

Creating the project structure

Updating the code to use React Hooks

Controlling keyboard shortcuts

Integrating with the application menu

Setting up the book generator

Invoking Docker commands from Electron

Generating PDF books

Generating ePub books

Building a Digital Wallet for Desktops

Building a Digital Wallet for Desktops

Technical requirements

Generating the project scaffold with React

Integrating the Ant Design library

Setting up a personal Ethereum blockchain

Configuring the Ethereum JavaScript API

Displaying Ethereum Node information

Integrating with the application menu

Rendering a list of accounts

Showing our account balance

Transferring Ether to another account

Packaging the application for distribution

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

What is Electron?

Electron is an open-source framework for building cross-platform applications with the modern web technology stack: HTML, CSS, and JavaScript.

It is developed and maintained by GitHub Inc. and has had an active community of contributors since it appeared and was released on July 15, 2013 (its first commit appeared in April 2013) as part of the Atom editor, a free and open-source code editor for Linux, Windows, and macOS. Initially, it was called Atom Shell until GitHub renamed it Electron and started shipping it as a separate project.

The secret sauce of Electron is a combination of Chromium, an open-source project behind the Google Chrome browser and Google Chrome OS, and Node.js, a JavaScript runtime built on Chrome's V8 JavaScript engine.

Electron uses Chromium for the frontend and Node.js for the backend. It provides a rich set of application programming interfaces (APIs) that allow developers to build cross-platform applications that share the same HTML, CSS, and JavaScript code. Also, Electron provides us with access to operating system resources and specific platform features and supports thousands of JavaScript libraries and utilities that you can use with the Node.js portion of the application.

Since its release, the Electron framework has won the hearts of all web and desktop developers. Many popular applications have been built with Electron that you may have used in the past or are using daily, such as Skype, Slack, WhatsApp, Discord, Signal, Visual Studio Code, Microsoft Teams, Keybase, and many others. Please check out the official list of Electron-based applications that are featured online at https://electronjs.org/apps—it has more than 700 entries and counting.