{{announcement.body}}
{{announcement.title}}

Building a Desktop App With the RingCentral Embeddable and Electron

DZone 's Guide to

Building a Desktop App With the RingCentral Embeddable and Electron

Electron is a library that helps developers to build a cross-platform desktop app with web technologies like HTML and Javascript.

· Web Dev Zone ·
Free Resource

ringcentral

Recently we released the RingCentral Phone for Linux (Community) which is built with the RingCentral Embeddable and Electron library. In this article, we will show you how to turn a web app into a desktop app with Electron, and also show you how to integrate RingCentral Embeddable into a desktop app.

RingCentral Embeddable is a web widget that we provide for developers to integrate the RingCentral service into their web app. But can we also use the RingCentral Embeddable to build an integration for a desktop app? The solution is the Electron library. Electron is a library that helps developers to build a cross-platform desktop app with web technologies like HTML and Javascript.

Prerequisites

  1. RingCentral Embeddable
  2. Electron.js
  3. NPM or Yarn (We assume you have installed node.js > 8)

Create Your First Electron Project

To create your first Electro project go here.

Init project:

JSON
 







Add start script in 'package.json':

JSON
 




xxxxxxxxxx
1


 
1
{
2
  "scripts": {
3
     "start": "electron ."
4
   }
5
}



Create blank files: main.js and app.html

We will have these three files:

JSON
 




xxxxxxxxxx
1


 
1
{
2
  "scripts": {
3
     "start": "electron ."
4
   }
5
}



Create blank files: main.js and app.html

We will have these three files:

JSON
 







Create your first BrowserWindow:

JSON
 




xxxxxxxxxx
1
16


 
1
// in main.js
2
const { app, BrowserWindow } = require('electron')let mainWindow;function createMainWindow () {
3
  // Create the browser window.
4
  let mainWindow = new BrowserWindow({
5
    width: 300,
6
    height: 530,
7
    webPreferences: {
8
      nodeIntegration: true
9
    },
10
    show: false, // hidden the window before loaded
11
  })// and load the index.html of the app.
12
  mainWindow.loadFile('app.html')// Show the main window when page is loaded
13
  mainWindow.once('ready-to-show', () => {
14
    mainWindow.show();
15
  });
16
}app.on('ready', createMainWindow)



Start your app:

$ yarn start

Now you have your first app running on the desktop.

Before we continue, we need to understand the main and renderer processes in Electron. The main.js which manages the desktop app runs in the main process and each BrowserWindow instance is run in its renderer process. The main process is allowed to access the native app API, such as the file system. So HTML files and JS are run on the renderer process — they can only access the Web API that we use in the Chrome Browser.

RingCentral

Load RingCentral Embeddable

The RingCentral Embeddable is a web widget hosted on our Github Page or our CDN. You will load the Embeddable widget with 'webview' component. You could also load it by 'BrowserWindow' directly, but with the 'webview' component, we can have a more customized UI.

In app.html:

HTML
 




xxxxxxxxxx
1
23


 
1
<html>
2
  <head>
3
     <meta data-fr-http-equiv="Content-Security-Policy" content="script-src 'self' https://ringcentral.github.io">
4
     <title>RingCentral Embeddable app</title>
5
     <style type="text/css">
6
      // your page styles in here
7
     </style>
8
  </head>
9
  <body>
10
    <div id="app">
11
      <webview
12
        partition="persist:rcstorage"
13
        allowpopups
14
        id="rc-widget-adapter-frame"
15
        src="https://ringcentral.github.io/ringcentral-embeddable/app.html"
16
      >
17
      </webview>
18
    </div>
19
    <script>
20
    // your page JS in here
21
    </script>
22
  </body>
23
</html>



We now need to set the “Content-Security-Policy”, so we can load the resources from the web page security. Then we need thepartition for webview component — we need this for persistent data storage from the web page.

Use Preload to Run Your JS With RingCentral Embeddable

After loading the RingCentral Embeddable, we need to interact with it. The RingCentral Embeddable is designed for a web app, so how can we make it interact with our desktop app?

Electron provides a preload API, we can use this API to insert our customized JS into the web page when it loads. This will let us hack the web to interact with our main process.

Add the preload option into the webview component:

HTML
 




xxxxxxxxxx
1


 
1
<webview
2
  partition="persist:rcstorage"
3
  preload="./preload.js"
4
  allowpopups
5
  id="rc-widget-adapter-frame"
6
  src="https://ringcentral.github.io/ringcentral-embeddable/app.html"
7
>
8
</webview>



Create preload.js in the project root folder:

JSON
 




xxxxxxxxxx
1
31


 
1
const { ipcRenderer } = require('electron');window.addEventListener('message', function (event) {
2
  const data = event.data;
3
  if (!data) {
4
    return;
5
  }
6
  let notification;
7
  switch (data.type) {
8
    case 'rc-call-ring-notify':
9
      // get call on ring event
10
      ipcRenderer.send('show-main-window');
11
      const call = data.call;
12
      notification = new Notification('New Call', {
13
        body: 'Incoming Call from ${call.fromUserName || call.from}'
14
      });
15
      notification.onclick = () => {
16
        ipcRenderer.send('show-main-window');
17
      };
18
      break;
19
    case 'rc-inbound-message-notify':
20
      const message = data.message;
21
      notification = new Notification('New Message', {
22
        body: 'Message from: ${message.from && (message.from.phoneNumber || message.from.extensionNumber)}',
23
      });
24
      notification.onclick = () => {
25
        ipcRenderer.send('show-main-window');
26
      };
27
      break
28
    default:
29
      break;
30
  }
31
});



Preload.js redirects messages between RingCentral Embeddable and the main process. For example, when the RingCentral Embeddable gets an incoming call, we can send a message to the main process, so that the main process can make a minimized window show up at the top of the window.

For more information on the API and events from the RingCentral Embeddable go here.

Package Your App With Electron Builder

After we finish the development of the electron app, we need to package our app so users can install it easily, such as dmg for macOS, deb for Debian and Ubuntu, exec for Windows.

We can use electron-builder to package the app, it supports to package the app for macOS, Windows, and Linux.

$ yarn add electron-builder --dev

Create 'electron-builder.yml':

JSON
 




xxxxxxxxxx
1
37


 
1
appId: com.your_org.integration.your_app_name
2
productName: Your app name
3
files:
4
  - package.json
5
  - main.js
6
  - app.html
7
  - preload.js
8
directories:
9
  buildResources: build
10
  output: release
11
publish:
12
  -
13
    provider: github
14
    owner: your_github_account
15
    repo: your_github_repo
16
mac:
17
  category: public.app-category.business
18
  icon: icon.icns
19
dmg:
20
  contents:
21
    -
22
      x: 130
23
      y: 220
24
    -
25
      x: 410
26
      y: 220
27
      type: link
28
      path: /Applications
29
win:
30
  target:
31
    - nsis
32
linux:
33
  target:
34
    - deb
35
    - AppImage
36
  category: Telephony
37
  desktop: rc-ev.desktop



Add scripts command into 'package.json':

JSON
 




xxxxxxxxxx
1
10


 
1
{
2
  "scripts": {
3
    "postinstall": "electron-builder install-app-deps",
4
    "start": "electron .",
5
    "package": "electron-builder",
6
    "package-linux": "electron-builder --linux",
7
    "package-release": "electron-builder --linux -p always",
8
    "package-all": "electron-builder -mwl"
9
  },
10
}



To package for all platforms:

$ yarn package-all

If you add Github information into the 'electron-builder.yml' publish section. It can help you create a release tag and upload install files into the Github releases. This will allow the user to download it from your Github repo releases.

More Information

You can get the full source code here. We have also packaged this app for Linux users, you can go here to download and try it out.

Hopefully, this article was helpful. Please let us know what you think by leaving your questions and comments below!m

Topics:
electron ,html ,json ,linux apps ,ringcentral ,tutorial ,web dev

Published at DZone with permission of Embbnux Ji . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}