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.

Related Content you might be interested in

Current Title:

Small book image
Electron Projects
Denys Vuika
Nov, 2019 | 436 pages
Small book image
Building Cross-Platform Desktop Applications with Electron
Muhammed Jasim
Apr, 2017 | 336 pages
Small book image
Cross-platform Desktop Application Development: Electron, Node, NW.js, and React
Dmitry Sheiko
Jul, 2017 | 300 pages
Small book image
Angular Projects
Aristeidis Bampakos
Jul, 2021 | 344 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
Release cycle note
To get the most out of this book
Get in touch
Free Chapter
1
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
Summary
2
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
Summary
3
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
Summary
4
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
Summary
5
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
Summary
6
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
Summary
7
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
Summary
8
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
Summary
9
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
Summary
10
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
Summary
11
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Building a Screenshot Snipping Tool

In this chapter, we are going to build a small screenshot snipping tool using the latest Electron framework, React.js, and the Blueprint UI toolkit for React.

As part of the practical exercise in this chapter, you are going to generate screenshots using the Electron API and manage the application's window state and visibility. This will help you understand how to control application windows in Electron. You will also be working with desktopCapture features and generating thumbnails from code. Finally, you will learn how to integrate with the System Tray and invoke its functionality with the global keyboard shortcut.

In this chapter, we will learn about the following topics:

  • Preparing the project
  • Configuring frameless windows
  • Transparent windows
  • Making application windows draggable
  • Adding a Snip toolbar button
  • Using the desktopCapturer...
Previous Section
End of Section 1
Next Section