This post is trending. 5,351 Views

Let’s Make Desktop Application With Ionic 2 and Electron: Part 2

In part 1 of this tutorial we were able to

  1. Create an Ionic 2 project and serve
  2. Install electron dependencies in our project
  3. Add webpack config and electron main script and run project as electron application

If you don’t know how to carry out above steps I suggest you to follow part 1 of this tutorial.
In this tutorial we will carry on from where we left off and carry out following tasks.

  1. Create a simple angular 2 service access electron apis
  2. Build a redistributable package of our application for different platforms

You guys loved this tutorial so much that I had to Make a video tutorial. Here is the link to the video in YouTube. As this is my first video tutorial, I would love to hear feedback from you guys so that I can improve my next tutorials. Thank you all for your love and support.

1. Create a simple Angular 2 service and access electron apis

In electron there are two processes, the main and renderer process. This comes from chromium architecture. The main process is responsible for creating and managing BrowserWindow instances and various application events. It can also do things like register global shortcuts, create native menus and dialogs, respond to auto-update events, and more. The render process is responsible for running the user-interface of your app, or in other words, a web page which is an instance of webContents. All DOM APIs, node.js APIs, and a subset of Electron APIs are available in the renderer.
In this tutorial we will be creating a angular 2 service which accesses the electron renderer apis. So let’s get started.

Create a simple angular 2 service

You can generate a service using Ionic 2 Cli. In the terminal inside root of your project folder type the following command
ionic generate provider electron
This generates a ionic 2 provider (it’s a angular 2 service). We will use this provider to access electron apis that are available in renderer process.
We need to add this provider to ionic’s provider list, to do that, open src/app/app.module.ts and import Electron
import { Electron } from '../providers/electron
Also add Electron to the providers array.

Import electron and access it’s apis

In order to demonstrate accessing electron apis we will creat a simple zoom in and zoom out function in our app.
Open src/providers/electron.ts and change the code to the following

import { Injectable } from '@angular/core';
import * as electron from 'electron';

@Injectable()
export class Electron {
  currentZoom: number = 0;
  constructor() {

  }
  zoomIn(){
    electron.webFrame.setZoomLevel(++this.currentZoom);
  }
  zoomOut(){
    electron.webFrame.setZoomLevel(--this.currentZoom);
  }

}
  • Here, import * as electron from 'electron'; is importing electron module and making it’s libraries available.
  • currentZoom variable holds the current level of zoom for the page.
  • Two function zoomIn() and zoomOut() carries out the task of increasing and decreasing the zoom level using electron apis.

Now lets, create two buttons and add the functionality to zoom in and out in our home page.
Open src/pages/home/home.html and change the code to following

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <button ion-button (click)="zoomIn()">Zoom In</button>
  <button ion-button (click)="zoomOut()">Zoom Out</button>
</ion-content>

Here, we just added two buttons that calls zoomIn and out functions.

Open src/pages/home/home.ts and change the code to following

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Electron } from '../../providers/electron';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public electron: Electron) {
  }
  zoomIn(){
    this.electron.zoomIn();
  }
  zoomOut(){
    this.electron.zoomOut();
  }
}

Here, we imported and injected the electron provider that we generated.
Then we created two functions zoomIn() and zoomOut() to call the actual zoom in and out implementation from our electron provider. After this is complete you should have following result

ion9-functionality.gif

We could have directly imported the electron module and called the functions in here, but we are creating a provider to collect all electron related apis in one place and make it more accessible.

2 Build a redistributable package of our application for different platforms

Now we will learn how we can package our app as a stand alone application for various operating system. And for this task we will use electron-builderpackage. We have already added the dependencies and build scripts in the first part of this tutorial. So lets package our application.
To do this, run the following command from your terminal while you are in the project root
npm run ebuild
This will build your application for the operating system you are currently using
npm run ebuild -l building for linux
npm run ebuild -w building for windows
npm run ebuild -m building for mac
For more details on using electron-builder please visit their repository and read the documentation.

Thank you. Please provide us feedback on what do you think. Will you develop your next desktop application using Ionic 2 and Electron?

Related Posts

This post is trending.

Build Responsive App with Ionic Responsive Grid

Up until now, Ionic Framework mostly focused on mobile screens. There were no in built support for targetting larger screens like tablets. […]

This post is trending.

Beautiful Timeline Component in Ionic 3

In this tutorial we will be building a beautiful timeline component to display any suitable content from blog posts to comments or […]

This post is trending.

Let’s Make Desktop Application With Ionic 2 and Electron: Part 1

With the addition of components like Split Pane and Responsive Grid, it is now easier than ever to develop a desktop application […]

%d bloggers like this: