How to build a RingCentral App with RingCentral Widgets
Start TutorialRead Accounts to permissionsringcentral-widgets-cli >= 0.5.1we initialize widgets project with RingCentral Widgets CLI.
$ rc-widgets new ringcentral-widgets-demo
$ cd ringcentral-widgets-demo
$ yarn
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.
Build for production
.env file with production config, such as RINGCENTRAL_SERVER_URL and REDIRECT_URI.$ yarn build
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:
Before we start, you need to add Read CallLog and Edit Presence permissions to your RingCentral app.
CallHistoryPageCall History tabCongratulations! 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:
Before we start, you need to add RingOut permissions to your RingCentral app.
CallingSettingsPage, ActiveCallsPage, DialerAndCallsTabContainer and DialerPageDial Pad tabCongratulations! 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:
Before we start, you need to add VoIP Calling permissions to your RingCentral app.
IncomingCallPage, CallCtrlPage, CallBadgeContainer, and AudioSettingsPage containersCongratulations! 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:
Before we start, you need to add SMS, Internal Messages, Read Messages and Edit Messages permissions to your RingCentral app.
ComposeTextPage, ConversationsPage and ConversationPageMessages tabCongratulations! Now you have finished adding messages feature to your app.
Visit or refresh http://localhost:8080 to play with it.
$ 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.
We save data into storage by a data mapping with redux.
Before we create a reducer, let's add some actionTypes.
Add two reducer
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.