Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Electron Projects

By : Denys Vuika

3 (4)

Electron Projects

3 (4)

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

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

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

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

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

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

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

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

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

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

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

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

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Integrating with Angular, React, and Vue

With the rapid evolution of web technologies and frameworks, we no longer need to build our web applications from scratch. There's a vast variety of component libraries, feature libraries, extensions, and frameworks that combine the most reusable building blocks for our needs.

In this chapter, we are going to focus on three essential frameworks that most modern developers use, as follows:

Angular, which is backed by Google
React, which is backed by Facebook
Vue.js, which is backed by Evan You and its sponsors

You are about to go through the process of setting up three different projects for each web framework. As part of this practical exercise, you will learn how to configure the live reloading feature, integrate UI toolkits and component libraries, and set up application routing.

In this chapter, we will cover the following topics...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Electron Projects

Search

Your notes and bookmarks