Tutorials>How to build a RingCentral App with RingCentral Widgets

How to build a RingCentral App with RingCentral Widgets

Start Tutorial

Prerequisites

  • Install Node.js with version >= 8
  • Create a RingCentral developer free account
  • Create a new RingCentral app
    • App type: REST API App
    • 3-legged OAuth flow: Client side web app
  • Add Read Accounts to permissions
  • Install ringcentral-widgets-cli >= 0.3.0

Initialize project

we initialize widgets project with RingCentral Widgets CLI.

$ rc-widgets new ringcentral-widgets-demo
$ cd ringcentral-widgets-demo
$ yarn

Read more

The app is based on RingCentral Commons and RingCentral Widgets.

Commons modules are built with RcModule and Dependency Injection.

RingCentral Commons depend on Redux.

RingCentral Widgets depend on React and RingCentral Commons.

Update .env with app info in ringcentral developer website.

vim .env

RINGCENTRAL_CLIENT_ID is your ringcentral app client id.

RINGCENTRAL_SERVER_URL is ringcentral api server, https://platform.devtest.ringcentral.com for sandbox environment and https://platform.ringcentral.com for production.

REDIRECT_URI is redirect uri that needs to add in your app settings in RingCentral Developer Website. For development in local, it should be http://localhost:8080/redirect.html. After your deploy this app to network space, it should be your_host_address/redirect.html.

Start development server

yarn start

Visit on http://localhost:8080 in browser

Build for production

  • Update .env file with production config, such as RINGCENTRAL_SERVER_URL and REDIRECT_URI.
  • Build project
$ yarn build
  • Upload files in release folder to your network space and visit it in browser.

Now you have finished a based RingCentral app with Widgets. So let's start to add call history feature to it.

It includes 3 steps:

  • Add call history related modules to Phone module
  • Add call history UI container and router to App container
  • Add call history tab to MainView

Add permissions

Before we start, you need to add Read CallLog and Edit Presence permissions to your RingCentral app.

Update Phone module

  • Import call history related modules
  • Add call history related modules to dependencies

Update App container

  • Import CallHistoryPage
  • Add containers to routers

Update tabs

  • Import tab icon
  • Add Call History tab

Play with Call History feature

Congratulations! Now you have finished adding call history feature to your app.

Visit or refresh http://localhost:8080 to play with it.

In this section, we will add RingOut Call feature to your ringcentral widgets app.

It includes 3 steps:

  • Add call related modules to Phone module
  • Add call related container and router to App container
  • Add dialer tab to MainView

Add permissions

Before we start, you need to add RingOut permissions to your RingCentral app.

Update Phone module

  • Import call related modules
  • Add call related modules to dependences

Update App container

  • Import CallingSettingsPage, ActiveCallsPage, DialerAndCallsTabContainer and DialerPage
  • Add containers to routers

Add dialer tab

  • Import tab icon
  • Add Dial Pad tab

Play with Call feature

Congratulations! Now you have finished adding call feature to your app. Now it supports to call with RingCentral Phone Desktop and RingOut mode. Change calling mode in Calling Setting on Setting Page.

Visit or refresh http://localhost:8080 to play with it.

In this section, we will add Web Phone feature to your ringcentral widgets app.

It includes 5 steps:

  • Add web phone related modules to Phone module
  • Add web phone related container and router to App container
  • Add web phone hook into Phone module
  • Add contacts matcher into Phone module
  • Add WebphoneBadge to AppView container

Add permissions

Before we start, you need to add VoIP Calling permissions to your RingCentral app.

Update Phone module

  • Import web phone related modules
  • Add web phone related modules to dependencies

Update App container

  • Import IncomingCallPage, CallCtrlPage, CallBadgeContainer, and AudioSettingsPage containers
  • Add containers to routers

Add webphne hooks

  • Add webphone hook to drive route

Add contact matcher

  • Match call phone number with contact name

Play with Web phone feature

Congratulations! Now you have finished adding web phone feature to your app. Now it supports to call with chrome in browser mode. Change calling mode in Calling Setting on Setting Page.

Visit or refresh http://localhost:8080 to play with it.

After adding calls feature, you must want to add messages feature to this app to send and receive message with RingCentral.

It includes 3 steps:

  • Add messages related modules to Phone module
  • Add messages UI container and router to App container
  • Add messages tab to MainView

Add permissions

Before we start, you need to add SMS, Internal Messages, Read Messages and Edit Messages permissions to your RingCentral app.

Update Phone module

  • Import messages history related modules
  • Add message related modules to dependencies

Update App container

  • Import ComposeTextPage, ConversationsPage and ConversationPage
  • Add containers to routers

Update tabs

  • Import tab icon
  • Add Messages tab

Play with messages feature

Congratulations! Now you have finished adding messages feature to your app.

Visit or refresh http://localhost:8080 to play with it.

Use CLI to generate module scaffold

$ rc-widgets g Module LocalPresence -d Presence

It will create a module named LocalPresence with dependence Presence in src/modules.

Import LocalPresence and add to phone module.

Check if there are calls changed on state changed.

Storage - ActionTypes

We save data into storage by a data mapping with redux.

Before we create a reducer, let's add some actionTypes.

Storage - Reducer

Add two reducer

Storage - Register

  • Inject GlobalStorage and Storage module. GlobalStorage is used for global storage. It's data will not be cleaned still local storage cleaned. Storage is used for personal data. Data will be cleaned after user logout.

  • Register reducer into storage module

  • Save data into storage by dispatch

  • Get data by storage key

You can set data by phone.localPresence.updateCustomizeData(data) in chrome console. And read day by phone.localPresence.customizeData.