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

Reviewing the final structure

Now, we have a nice-looking music player application based on Electron and the Amplitude library. In this section, we are going to review the final state of the code and verify that we have done everything correctly.

Please refer to the following index.html file in case your application's layout looks different or you think you may have missed a certain step:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Music Player</title>
    <link rel="stylesheet" href="player.css" />
  </head>
  <body>
    <img class="cover-image" data-amplitude-song-info="cover_art_url" />

    <div class="song-progress-container">
      <div>
        <span class="amplitude-current-minutes"></span>:<span...