DEV Community: Varun Raj

Building Gmail Addons

Varun Raj — Mon, 30 Nov 2020 12:17:59 +0000

Addons and integrations are the most impactful features when it comes to building SaaS products. The reason being the more your tool integrates with others, the more reach and user base it gets. Basically when you integrate with popular tools or products like Gmail which is already used by millions of people, your product just gets super charged.

Today, you’ll learn how to build one such cool add-on for your app, and yes, it's gonna run on Gmail.

Step 1: The Setup

One new thing about this, is that you don't need to worry about your local environment when developing, as everything happens inside your browser on a platform called Google App Scripts

Navigate to http://script.google.com/home and create a new project from the sidebar option.

A new editor window opens where you’re going to spend most of your time building the addon.

Click on the “Untitled project” to edit the project name to your app name, in my case I'm going to create an addon to show the latest news.

Once you name the project, you need to create a manifest file. It's more like the manifest file we create for our Chrome Apps or an Outlook Plugin. It contains meta information, scope to access, and other such information about the app.

Click on “View → Show manifest file” from the menu bar and it opens a new file named “appsscript.json”

The contents of the manifest file is in JSON format and will hold the below information by default,

{
  "timeZone": "Asia/Kolkata",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

Step 2: Configuration

Now that we’ve our base of the addon, let's configure it to work in Gmail.

Under the dependencies section of the manifest add the gmail service with the following config,

"dependencies":{
    "enabledAdvancedServices":[
      {
        "userSymbol":"Gmail",
        "serviceId":"gmail",
        "version":"v1"
      }
    ]
  },

After defining that we’re going to use the Gmail service, we need to define the behaviour, appearance of the addon inside Gmail.

Create a new block with the key “gmail” in the manifest root where you enter all the config of Gmail.

"gmail":{
    "name":"Today's News",
    "logoUrl":"https://www.gstatic.com/images/icons/material/system/1x/receipt_black_24dp.png",
    "contextualTriggers":[
      {
"unconditional":{

        },

        "onTriggerFunction":"startApp"
      }
    ],
    "primaryColor":"#F47041",
    "secondaryColor":"#2E8B57",
    "version":"TRUSTED_TESTER_V2"
  }

In the config above, the main part to notice is the contextualTriggers section. It’s an array of functions.

Currently we’re going to use a simple trigger onTriggerFunction, which as the name explains will get triggered when the app is opened in the addons section of Gmail. This will call a function defined in any of our .gs files.

There’s also other cosmetic configurations like name, icon and colors.

Step 3: Creating the UI

The UI is also created by the script in Gmail addon. Open the code.gs and create a new function called startApp. This function will be triggered when we open the app from the addons section.

Note: In app script the function names are unique no matter which file you write it.

Lets create a simple card in the UI

function startApp() {
  var card = CardService.newCardBuilder();
  card.setName("NewsListCard").setHeader(CardService.newCardHeader().setTitle("News"));

  var sectionNews = CardService.newCardSection();

  sectionNews.addWidget(CardService.newTextParagraph().setText("News of the day"));

  return card.addSection(sectionNews).build();
}

Save the file and lets try to run and see the result

To test the addon, click on “Publish → Deploy from manifest” in the menu bar,

This brings up another window that lists all the versions of your addon. Click on the Install add-on button in the “Latest Version (Head) Version 0” since this is the development version.

Once installed, you can open your Gmail account (the one where the app script project was created) to see the addon in the sidebar.

In the first run, you need to authorize access to the app to use it. After authorization you can see the cards that we created in the script.

Step 4: Loading Data From API

We’ve set up the basic card section to show the basic static information of the app. Now let's try to pull in some data from remote API to show in the addons section. Currently I'm going to use a public API for the demo purpose, but you can also use your own APIs to pull your app’s data.

For this demo I'm going to use https://newsapi.org/ API since it has a free plan and public.

We’ll be using the UrlFetchApp class to make external API calls. For writing clean code, I’ve created a new file called “APIs.gs” from the file menu

Write the below function to make an API call to the new API with your token in the payload to get the news articles.

function getNews() {
  var response = UrlFetchApp.fetch("http://newsapi.org/v2/top-headlines?country=us", {
    method: "GET",
    muteHttpExceptions: true,
    headers: {
      "X-Api-Key": "YOUR NEWS API KEY HERE",
    },
  });

  Logger.log(response.getContentText());
  var responseText = response.getContentText();
  var responseJSON = JSON.parse(responseText);
  return responseJSON;
}

Now that our API call is ready, let's call it and render the data in the UI. Open your Code.gs file and add the following

function startApp() {
  // .....
  var newsResult = getNews();
  var news = newsResult.articles;

  for (var i = 0; i < news.length; i++) {
    var newsItem = news[i];
    var newsBlock = CardService.newDecoratedText().setText(newsItem.title);
    sectionNews.addWidget(newsBlock);
  }

  // …..
  // .....
  return card.addSection(sectionNews).build();
}

This will call the getNews function and render each item into the sectionNews Card section.

Save the file and refresh the addon from your Gmail addon panel.

After refreshing you’ll get the list of news title in the addon screen

And we’ve created a simple addon which can list your daily news inside Gmail! This can be your app’s addon too. The best part is that most of your business users can adopt it so quickly which helps your app grow faster.

In the next article, I’ll write about how to use user credentials to get the current user info and also session storage. Until then, keep exploring! :D

Building and Using Custom Entities in Dialogflow

Varun Raj — Mon, 28 Sep 2020 16:28:36 +0000

In this article, I'll cover how we can create custom entities that cover your business requirements.

Before proceeding, I strongly recommend you to read my previous article in case if you missed it: https://www.skcript.com/svr/building-a-serverless-telegram-chatbot-with-dialogflow-and-firebase-functions/

What are the entities? a quick recap.

Entities as something similar to your data types in a programming language that helps you define what sort of data is stored in a variable. Here, entities in chatbot language are nothing but the pattern or the meaning we classify certain parts or elements of the conversation.

For example, in the below message, the user is asking for weather information in the city of Dubai. So, when configuring the chatbot we classify "Dubai" as the city, and post the training the bot will understand any city.

What is the limitation with inbuilt entities?

In Dialogflow, the inbuilt entities are trained based on the generic scenarios like date, city, and other standard units. But in most cases, we've to create our entities to satisfy the business requirements.

For an instance consider the below statement in an HR chatbot.

Here, we can easily train the bot to extract the start date and end date since it's a very general information class. But the challenge comes when we try to extract the type of leave. The type of leave is information related to a specific requirement. Leave type could change between one organization to another.

These are the cases that can't be solved with built-in entities and we need to depend on custom entities.

How do we create custom entities?

Let's take our leave application use case for this article. To Dialogflow classify the leave type, we need to create a new entity called "Leave".

Navigate to the Entities section in the sidebar of the project console.

Here you get to see all the custom entities that you created in your project, let's create our first custom entity.

If you notice, the Dialogflow gives us the option to create the Entity and various items under that entity. This works more like your enum in programming as I mentioned earlier.

In our case, under the leave types, we've sick leave, annual leave, and vacation leave. So I create those under the entity items. Also providing more synonyms will help the bot to train for understanding better.

You can simply save after you created the required items for the entity. Post the training we can start using these new custom entities in the intent configuration page similar to system entities.

Now let's ask the bot question to see if it can classify all the leaves properly.

Similar to this you can create any number of custom entities based on your requirements and use them together as well in the intent. Here is a small example from another chatbot project where I've used more than one custom entity in a statement.

Here both the facility attribute as well as facility entities are custom built for this hotel chatbot where the user asks for details of a facility in the hotel.

Building a Serverless Telegram Chatbot with Dialogflow and Firebase Functions

Varun Raj — Mon, 17 Aug 2020 03:18:55 +0000

A couple of years back, I was struggling to manage my documents - tried all available cloud storages and even thumb drives. Nothing came handy and also searching documents in cloud storage was never easier for me. So, I decided to build a chatbot which can send me documents whenever I ask for it. That's when I built Nila, my first personal chatbot.

Often people ask me how I built Nila. They were surprised when I said it is not a rule-based chatbot and it can understand my language. So, later I added more features to it, but that's a different story.

Since it created a lot of interest among my friends and community, I thought of writing an article about how I built it. And, here it is.

The Tech Stack

I wanted it to be a very thin setup and without major maintenance. As soon as this requirement was decided, the first thing that popped into my mind was serverless architecture. The best thing about it is that I don't have to maintain a server - deploying code was a lot easier compared to server infrastructure. The next question that came to my mind was where to store all this information. This is where my 'Swiss army knife' of product development comes into play. In addition, I decided to use Firebase for everything other than the NLP part.

So, the final tech stack was drilled down to:

Firebase Cloud Functions - Backend Processing
Firebase Storage - File Storage
Firebase Firestore - For Database
Dialogflow - For NLP

The Infrastructure

The next step was to come up with an infrastructure to build an architecture design that becomes the core. Since the entire system is broken down into distributed modules, I came up with the below setup.

The Use Case

In this article, I'm going to set a simple use case of requesting weather information from the chatbot. And for this, we'll be using the OpenWeatherMap API. So in case, you're going to try the same, sign up for it and get yourself an API Key

Creating the Telegram Bot

Creating bots in telegram is pretty much fun but there is no fancy UI to do that. All you have to do is just ask another bot to create your bot.

There is a bot in telegram called Bot Father and you have to message the bot to create or manage your bots.

Send /start to bot father and it will show you the list of the available options.

Just click on the /newbot hyperlink and it will automatically send the slash command to create a new bot for you. Following that, you'll be asked for some basic information like Name for the bot, username (remember it should end with "bot").

On completing, you'll get a token displayed in the final message from bot father. This token is very important so copy it safely somewhere. In the following sections, we'll refer to this token as the telegram bot token or shortly bot token.

Setting Up Dialogflow

The user-facing piece is now ready. Let's now focus on the bridge part which is our Dialogflow. Setting up DialogFlow is as simple as setting up the telegram bot. All you've to do is to sign up for Dialogflow and create a new agent.

That's it! You're all set with the Dialogflow project. Now, let's go ahead and connect our telegram to the Dialogflow project.

Navigate to the integration option in the Dialogflow sidebar. This page will list all the possible platforms that Dialogflow can seamlessly integrate. You can navigate to Telegram and enable the platform. This will bring up an option to configure your bot with the help of the bot's token ID - the token that we got from telegram's bot father earlier.

Paste the token in the telegram token field of the modal and click on start to complete your operation. As you connect both of these services, you're ready to talk to your bot.

Click on the bot's link that's available in the last message from bot father to start the bot. Now, all you can send is just "Hi" and a few other basic greetings. This is because Dialogflow comes with basic greetings inbuilt and for anything more you need to configure it.

Setting up the Weather intents

Let's make the bot more meaningful by making it understand what we're trying to ask. To do that we need to create something called Intents in Dialogflow (This is quite a common term used in chatbot domain). Intents are nothing but conversations that happen between the bot and the user. In our case, we're going to ask the bot to give us the weather information, so let's create an Intent called "AskWeather".

The real magic happens when we configure the training phrase.

The training phrases are nothing but the statements that the user asks or tells the bot in the conversation. In our cases, the phrases could be any of the following for weather information

"What's the weather in Dubai?"
"What's the weather in Dubai tomorrow?"

Also, if you notice there is certain information hidden inside these statements, which is nothing but the city of which we're asking the weather for and the time or date. Dialogflow is smart enough to identify these in our conversation and extract them as variables. In case, if the bot is missing it we can also configure ourselves by just selecting and mapping it.

On scrolling down, you can see "Action and Parameters" which is where we define the properties required and action mapped to this specific intent.

Actions in Dialogflow intents are nothing more than a namespace that we give to the action performed in webhook, as a result of this intent to get data from your customer services.

In our case, the city and date are the possible params, but it could be more down the line which we can add on the fly. Also, I've made the city parameter as required field as we won't be able to get the weather information without a city or location. But, the date is optional since we can assume that the user is asking for today's weather, in case if it is not mentioned implicitly.

Now, that we've configured the intent, we can start testing it. Before that, save the intent and then the system will take some time to retrain the agent. So once it's trained, you can try asking the bot in the interface to the right side.

In the right section, after asking your question the DF system will parse the statement and show you the action and parameter for the corresponding user phrases.

Setting Up Cloud Functions

The dialogs are set now! Time for the geeky stuff. Not every dialog can be answered with some static reply or a bunch of static questions. This is where the webhook/fulfilments come into the place where we can configure intents to be handled by your server. In our case, as our title says we're going to use firebase cloud functions as our backend.

Let's get started by creating our new firebase project in our local system. In this article, I'm going to use an existing firebase project.

Setting up the local project

Create a new folder in a location in your machine and initialize a firebase project.

npm install -g firebase-tools
mkdir WeatherKiosk
cd WeatherKiosk
firebase init

The initializer will be a wizard which asks you the project and the modules we need for the project. I'll be selecting the project and the functions as the module.

On completion, you'll be finding a functions folder where we have the server code. Let's write an endpoint for Dialogflow to use as webhook/fulfillment.

functions/index.js

const functions = require("firebase-functions");

exports.chatWebhook = functions.https.onRequest((request, response) => {
  response.json({
    fulfillmentMessages: [
      {
        text: {
          text: ["Text response from webhook"],
        },
      },
    ],
  });
});

Now, this endpoint will send back a simple text response. For now, I'm having this as a dummy text response. In the later stages, we'll configure the weather API for getting the expected weather data.

Let's take it to live by deploying the functions with the below code.

firebase deploy --only functions

After deploying you can get the endpoint from the firebase function's console. Copy the URL, this will be our Webhook's URL in DF.

Configuring the fulfillment in Dialogflow

In the sidebar of the Dialogflow agent, you'll find the fulfillment section where you need to configure.

Post that you can configure the intent to use the fulfillment like below.

Let's check if it works by sending a message to the bot. The bot has to reply "Text response from webhook" then we can confirm that it works.

The Final Code with API Integration

I've updated the function to parse the params and actions and make the corresponding call to Weather API, and generate the text response that will be sent to the user as bot's reply.

function/index.js

const functions = require("firebase-functions");
const Axios = require("axios");

const WEATHER_API_KEY = "YOUR OPENWEATHERMAP HERE";

const responseBuilder = (msg) => ({
  fulfillmentMessages: [{ text: { text: [msg] } }],
});

exports.chatWebhook = functions.https.onRequest((req, res) => {
  let body = req.body;
  let { parameters, action } = body.queryResult;

  if (action !== "askWeather") return res.json(responseBuilder("Unable to process your query"));
  let city = parameters["geo-city"];
  let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${WEATHER_API_KEY}`;

  return Axios.post(url)
    .then((result) => result.data)
    .then((data) => `The temperature is  ${Math.round(data.main.temp - 273.15)} °C`)
    .then((message) => res.json(responseBuilder(message)))
    .catch((err) => res.json(responseBuilder(err.message)));
});

In the above code, we're extracting the action and the parameters from the body which is sent by Dialogflow when the user asks the question.

After deploying the function, the bot will be able to process the user's message with the help of the webhook.

This is just a very small example of what Dialogflow can do, but you can do a lot more with it. It also provides some custom formatting for telegram like inline buttons, links, etc.

Indexing Firebase Data in Algolia For Full-Text Search

Varun Raj — Sat, 01 Aug 2020 12:29:37 +0000

Firebase being a BaaS solution comes with a bunch of features for developers to build their app faster and with real-time capabilities. But, there is one thing that is yet to be addressed by Firebase’s feature set - the ability to perform full-text search on the data that is stored in Firebase databases (like Firestore or Realtime Database). This creates a huge bottleneck for developers since search is one of the primary user experiences for any application we build.

Thankfully we’ve got Algolia that can help us solve this problem. This is a service which helps you store the index of data from firebase, making it searchable. The important advantage of Algolia is that it’s supported in different platforms with a lot of UI components, which can be easily used to develop search modules for your apps.

In this article, I’ll walk you through how to set up your Algolia and index your data when new data is created or modified in your Firebase Firestore. This article is split into the following sections, you can skip any, in case if you’re already aware of them.

Creating an account in Algolia
Setting up Firebase Cloud Function
Index data from Firebase Firestore on create and edit.

Creating an account in Algolia#

As the first step, you can navigate to Algolia and register your account by either signing up with Google or Github or just with email.

Once you’ve created your Algolia account, go to the dashboard and find a default project created under your account. Let’s use that project for this article.

Similar to Firestore collections Algolia has an “Index” - the aggregation of data under a common umbrella. Create your index to store the data.

In this case, I have created an index called “Recipes” to save food recipes

After creating an account, add data to the index. Among the 3 different options for adding the data, we’ll be using the API for importing data with help from the firebase cloud functions.

Setting up Firebase Cloud Functions#

Let’s assume that you’re already having a firebase project and upgraded to Blaze Plan since we have to call external APIs from functions. Then, initialize the functions in your project with the Firebase CLI tool and setup cloud functions.

cd ProjectFolder
firebase init

On completion, you’ll find a folder named “functions” in your project folder. Open the project folder in a text editor like VSCode.

Now we’re going to index data in the “recipes” collection to our new Algolia index. So, let’s create two functions that listen to onCreate and onEdit of any document in the “recipes” collection.

functions/index.js

const functions = require('firebase-functions');
const onCreate = require('./triggers/recipes/onCreate');
const onEdit = require('./triggers/recipes/onEdit');

exports.onRecipeCreate = functions.firestore
                                   .document("recipes/{recipeId}")
                                   .onCreate(onCreate);

exports.onRecipeEdit = functions.firestore
                                   .document("recipes/{recipeId}")
                                   .onUpdate(onEdit);

Create the handler functions for onCreate of recipe docs and onEdit of the same. So, I’ve created two files under the triggers folder of our functions

functions/triggers/recipes/onCreate.js

module.exports = (snap, context) => {
}

functions/triggers/recipes/onEdit.js

module.exports = (change, context) => {
}

Index data from Firebase Firestore on create and update.#

To index the documents in Algolia, configure Algolia keys in the firebase cloud functions. The secured way is to use firebase environment variables.

To get the API keys from Algolia, go API Keys section in Algolia dashboard and copy your Application ID and the Admin API Key

These keys need to be configured to our Firebase Cloud function’s environment variables. You can do that with the help of the firebase CLI tool

firebase functions:config:set algolia.app_id="THE APP ID" algolia.admin_key="THE ADMIN API KEY"

After updating the config, we can start using it in the ‘functions’ code. In order to use Algolia, we need to install the npm package in our functions code base.

cd functions
npm install --save algoliasearch

After installing the package, create a config file to setup Algolia with the API Keys

functions/config/algolia.js

const functions = require('firebase-functions');
const algoliasearch = require('algoliasearch');

const ALGOLIA_ID = functions.config().algolia.app_id;
const ALGOLIA_ADMIN_KEY = functions.config().algolia.admin_key;

module.exports = algoliasearch(ALGOLIA_ID, ALGOLIA_ADMIN_KEY);

This file exports the Algolia Client which we can use to index data and delete the indexed data. Thus, we need to import this in our onCreate and onEdit file.

With the client, you can initialize the index, in our case “Recipes” and we use saveObject function to store the data inside the index.

functions/triggers/recipes/onCreate.js

const client = require("../../config/algolia");
const recipeIndex = client.initIndex('Recipes');

module.exports = (snap, context) => {
 let data = snap.data();
 data.objectID = snap.id;
 recipeIndex.saveObject(data);
}

functions/triggers/recipes/onEdit.js

const client = require("../../config/algolia");
const recipeIndex = client.initIndex('Recipes');

module.exports = (change, context) => {
 let data = change.after.data();
 data.objectID = change.after.id;
 recipeIndex.saveObject(data);
}

In the above two files, we’ve extracted the data from the snap (in onCreate) and changed (in onEdit) to a variable called data. In Algolia, the primary key is stored in the attribute objectID of data, so we’re storing the firebase document ID as the objectID.

Let’s deploy the function and test the setup. Deploy the firebase functions by executing the below command from the project’s root folder.

firebase deploy --only functions

After deploying, create a document under the **recipes **collection and see if it’s indexed in Algolia.

As soon as you create the data in Firestore, the cloud functions will be triggered and the indexes will be created in your Algolia project.

Similarly, the index will be updated every time you edit the data in Firestore. This happens in realtime and thus your search will be always updated.

Thus, you can replicate the data from firebase to Algolia to create a full-text search index. Hope this article helped you to get started with Algolia setup for your firebase project.

Hyperledger Fabric Architecture: Explained in detail

Varun Raj — Mon, 29 Jan 2018 04:29:34 +0000

DOMAIN

This is the top-level namespace for your project. Say you’re building a network for a supply chain, then usually the project name or the domain name is used as the Hyperledger Fabric’s domain.

ORDERERS

Under a domain, there are orderers (can be multiple instances) who are responsible for making sure that all the peers in the network have committed a transaction. When a transaction is proposed and committed by a peer, the orderer is informed about the new transaction and it forwards and commits this block to all adjacent peers.

Note: Orderers are not dependent on one organization. However, it is suggested to have multiple orderers to reduce failure rates.

ORGANIZATIONS

Organizations are the containers for the peers and respective certificate authorities (CA). Each organization has its own CA and a list of peers. Usually, organizations are used for physical separation of the blockchain network where each organization who uses your product can set up their physical machines and join your network.

CERTIFICATE AUTHORITIES

The certificate authority is responsible for creating users certificates. It is used for verifying ownership in the network. Each certificate authority is tied to an organization.

PEERS

The peers are nodes which are connected to clients and are responsible for committing transactions to the world state. Each peer has its own copy of transactions in a couchdb database. An organization can have more than one peer. Though it is advised to have multiple peers in an orderer to avoid data loss, having more than 3 or 4 peers might result in higher latency rates.