How to use App SDK to call API

How to Use SDK

App must operate its extended product through the SDK. The SDK provides some methods for different operations of app, such as get, set, etc. The product provides corresponding App API(JavaScript) for different resources. For example, an app extends the Agent Console Tab. The app will get the current agent information in the Agent Console, you can fetch it through the API currentAgent provided by Agent Control.

Example:

import { APPClient } from "comm100-app";

const client = APPClient.init();
const agent = await client.get("currentAgent");

We provide two ways to reference SDK.

1. You can use the popular scaffolding to build your app, e.g. React + webpack + typescript.

You can install comm100-app through following ways.

Uses npm

npm install comm100-app

Uses yarn

yarn install comm100-app

2. You can reference a SDK through <script/> mark in html file directly as following:

Example:

<script src="https://static.comm100.io/sdk/comm100-app-sdk-v1_0_2.js"></script>

How to Catch Exception

The GET, SET, DO and REQUEST methods will return a promise, so you can catch the exception through following ways.

Error:

Example:

const client = APPClient.init();
client.get("currentAgent")
.then((agent) => {
    // success
})
.catch((err) => {
// handle error here
});

What Methods SDK Provides

SDK provides 6 fundamental methods to help you to execute different operations.

• GET
• SET
• DO
• ON
• OFF
• REQUEST

The type of method used by the API is determined by the API provided.

GET

You can use this method to obtain the data provided by the corresponding product through API. Call this method will return a promise result, you can accept data from resolved function.

Example
Following example to get agent info from Agent Console.

/**
 * @param {string} api - The name of API
 * @param {...any} args - Any specific argument required
 * @return {Promise<Agent>} result
 */
const client = APPClient.init();
const agent = await client.get('currentAgent');

SET

This method mainly updates the product information. The type of parameter is defined by the API. The following example is through agentconsole currentChat.Name API updates the name of the current chat in the agent console.

Example

/**
 * @param {string} api - The name of API
 * @param {any} value - Value
 */
const client = APPClient.init();
client.set('agentconsole.livechat.currentChat.Name', 'Test User');

ON

For register event callback function

Example
The following example listens to the end of chat in Agent Console.

/**
 * @param {string} api - Name of event
 * @param {function} callback - Callback function. Params will be provided accordingly. Callback
 * will be triggered after event, which means callback cannot prevent default behavior of event
 * from happening.
 */
const client = APPClient.init();
client.on('agentconsole.livechat.chats.chatEnded', function () {
    // do stuff
});

OFF

Remove event callback function which registered by the ON API.

Example

/**
 * @param {string} api - Name of event
 * @param {function} callback - Callback function.
 */
const client = APPClient.init();
client.off('agentconsole.livechat.chats.chatEnded', callback);

DO

To execute an action, e.g. sending a notification in the Agent Console.

/**
 * @param {string} api - The name of API
 * @param {...any} args - Any args required
 * @return {Promise<void>} Return promise to indicate if action is done successfully
 */
const client = APPClient.init();
client.do("agentconsole.notification.notify", {
  title: "new-message",
  message: "new message",
});

REQUEST

To send a backend request, if you didn't provide the authorization, it bring current credential with sending request.

Example
Get agents list.

/**
 * @param {string} url - The request address
 * @param {object} config - optional The configuration of web request, the configuration is the same with AXIOS, view this link https://axios-http.com/docs/req_config
 */
const client = APPClient.init();
const agents = await client.request('/api/Global/agents');