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:

Add start script in ‘package.json’:

Create blank files: main.js and app.html

We will have these three files:

Create blank files: main.js and app.html

We will have these three files:

Create your first BrowserWindow:

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:

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:

Create preload.js in the project root folder:

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‘:

Add scripts command into ‘package.json’:

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



Source link

Write A Comment