Building a Glip Translation Bot with BotBuilder and Dialogflow

Published in

RingCentral Developers

5 min readMar 8, 2018

Communication between users using different languages can be difficult. This can happen when global teams use Glip so we want to build a Glip Bot to translate conversations with the Microsoft BotBuilder framework and Dialogflow. This bot uses new RingCentral Glip bot provision flow and is deployed in Heroku.

You can get source codes in this Github Repo . It’s a Node.js Project. A step-by-step tutorials that show how to use BotBuilder with Glip is available here.

Prerequisites

A free RingCentral Developer account to create a Bot app
A Heroku account to deploy the bot
A Microsoft Translator Text API app
A Dialogflow Agent to understand conversation text

The Structure of the Bot

Create a new Glip bot app

Firstly, we need to create a RingCentral Glip Bot app in RingCentral Developer Platform. Please follow this tutorial to create a Glip bot app.

In step 2, you can choose Public as Application Type, so the bot can be added to different Company Account with different bot user.

In step 3, please keep Redirect URI blank. we will update it after we get Heroku app url.

After created, we can get RingCentral API server URL, Client ID and Client Secret. And a sandbox account to test. We will use those data in following tutorial

Create a Translation Agent in Dialogflow

In this bot, we will use Dialogflow to parse conversation text to command and params.

First, need to create a Agent in Dialogflow.

After the agent has been created, we can get an access token which we will use to request Dialogflow API.

Add to prebuilt translate agent to your agent

Add bot to Heroku

We use heroku-cli to create a Heroku app.

$ git clone https://github.com/embbnux/translate-bot.git
$ cd translate-bot
$ npm install -g heroku-cli
$ heroku login
$ heroku create your_heroku_bot_app_name

After created, we can get a heroku publish url, such as https://your_heroku_bot_app_name.herokuapp.com . We need to add a public redirect URI to Glip bot app in RingCentral Developer Platform. Update it in App > Settings > OAuth Settings.

update OAuth redirect URI in RingCentral platform

Our bot requires MongoDB to save bot data. So we need to add Mongo DB to our Glip bot Heroku app. Go to Resources tab in your app, and add MongoDB to your add-ons.

Add following environment variables to your Heroku app:

GLIP_API_SERVER=https://platform.devtest.ringcentral.com
GLIP_CLIENT_ID=your_ringcentral_client_id
GLIP_CLIENT_SECRET=your_ringcentral_client_secret
GLIP_BOT_SERVER=your_bot_server_url
GLIP_BOT_VERIFICATION_TOKEN=random_chars_length_32
DIALOGFLOW_TOKEN=your_dialogflow_agent_token
TRANSLATE_TEXT_SUBSCRIPTION_KEY=your_microsoft_translate_text_subscription_key
MONGODB_URI=your_mongodb_uri, such as: mongodb://localhost:27017
MONGODB_DB=your_mongodb_db_name

Bot Setup

Start the bot

We can start the bot by heroku-cli

$ heroku restart -a your_heroku_bot_app_name

So the bot is running on Heroku

Add bot to Glip

We need to Add bot to your RingCentral Glip Company Account. Go to RingCentral Developer Website. Click Add to Glip button in Bot section.

After added, we can get this bot in Glip App or Website. Because our app is in sanbox, we need to go to Glip sandbox website. https://glip.devtest.ringcentral.com

How it works

Connect Glip with BotBuilder

We build a Glip Connector for BotBuilder. Just pass the Glip Connector to BotBuilder and it will works with RingCentral OAuth, Glip API and Webhook.

const storage = new MongoStorage({ url: process.env.MONGODB_URI, db: process.env.MONGODB_DB });const server = restify.createServer();
server.use(restify.plugins.queryParser());
server.use(restify.plugins.bodyParser());const connector = new GlipConnector({
  botLookup: async (botId) => {
    const botEntry = await storage.find('bots', botId)
    return botEntry;
  },
  verificationToken: process.env.GLIP_BOT_VERIFICATION_TOKEN,
  clientId: process.env.GLIP_CLIENT_ID,
  clientSecret: process.env.GLIP_CLIENT_SECRET,
  server: process.env.GLIP_API_SERVER,
  redirectUrl: `${process.env.GLIP_BOT_SERVER}/oauth`,
  webhookUrl: `${process.env.GLIP_BOT_SERVER}/webhook`,
  replyOnlyMentioned: true,
});
server.get('/oauth', connector.listenOAuth());
server.post('/webhook', connector.listen());const bot = new builder.UniversalBot(connector);bot.on('installationUpdate', (event) => {
  const botId = event.sourceEvent.TokenData.owner_id;
  console.log(`New bot installed: ${botId}`);  const botData = {
    identity: event.address.bot,
    token: event.sourceEvent.TokenData
  };
  storage.insert('bots', botId, botData);
});

Connect Dialogflow with Botbuilder

Just pass Dialogflow Recognizer to BotBuilder Bot, and it will work.

const { DialogflowRecognizer } = require('./dialogflowRecognizer');const recognizer = new DialogflowRecognizer(process.env.DIALOGFLOW_TOKEN);const intents = new builder.IntentDialog({ recognizers: [recognizer] })

Handle the message from Glip and send

We can get Glip message in BotBuilder session, and send message by “session.send”.

const intents = new builder.IntentDialog({ recognizers: [recognizer] })
  .matches('translate.text', async (session, args) => {
    console.log('Receive message: ', session.message.text);
    console.log('Entities: ', args.entities);
    let text = builder.EntityRecognizer.findEntity(args.entities, 'text');
    let language = builder.EntityRecognizer.findEntity(args.entities, 'lang-to');
    const translation = await translateAPI.translate({ text: text.entity, language: language.entity });
    const reply = `Hi, "${text.entity}" in ${language.entity} is: \n> ${translation}`;
    session.send(reply);
    session.endConversation();
  }).onDefault((session , args) => {
    session.send('Hi');
  });
bot.dialog('/', intents);

Conclusion

In this article, we show you how to build a Glip translation bot with BotBuilder framework and deploy it as a Heroku app. You can get full codes from this Github Repo. This is a step-by-step tutorials that show how to use BotBuilder with Glip.

Give it a try. Any kind of feedback is welcome!