Enterprise-grade Chatbot with Google Dialogflow & Flutter (Part I)

See Part II here.

1) A.I. and Virtual Assistant revolution

Image via Canva under license to Catherine Torchy (my wife)

Consumer-grade virtual assistants (e.g. Google Assistant, Alexa, Siri) have transformed deeply the way that people engage with technology in their personal lives. But I’m one of those who believe that one day, Virtual Assistants and AI will be used massively to transform the way employees interact with their systems at work and automate their day-to-day tasks.

For now, challenges are mostly the integration part with existing business solutions (e.g. ERP), the capacity to connect with external data that is not present on the user’s systems, and finally, the ability to have a coherent user experience on various platforms, including web and mobile devices.

The idea of this series of 3technical articles was born following an evaluation of several chatbots and conversational engines proposed by the market. Most of them offer a comprehensive list of integrations with languages (NodeJS, Java, Python..), messaging systems (Facebook Messenger, Slack, Telegram, Hangouts…) but it’s not always easy to figure out how to integrate them within a business solution. Additionally, they often have a very limited rendering to offer an acceptable user experience for business needs.

I’ve read a lot of articles that provided partial solutions. Then started a triple challenge:

• How to integrate easily a conversational engine with external APIs
• How to resolve the layout limitations of the default rendering engine (e.g. Google Assistant limitations) by using custom messages and a rich set of components for better user experience
• How to manage a multi-platform/mobile frontend with the same code

So, i’ve selected one of the most powerful NLP conversational engines, Google Dialogflow, but it could have been Microsoft Bot or Amazon Lex. Then I combine a Google Flutter application to break out the layout limitation of Google Assistant, Slack and others.

If you already read me, the answer is… ‘yes’, this article is yet another straightforward step-by-step tutorial for those who intend to remain hands-on. It will be concentrated on knowledge needed to go beyond a basic design of a virtual assistant. Some knowledge is also required on Dialogflow, NodeJS, APIs/Webservices and Flutter. As usual, the entire source code of these articles (Dialogflow & Flutter projects) will be published on my Gitlab ( https://gitlab.com/osadey)

There are plenty of tutorials describing how to configure Intents in Dialogflow. This one will focus on Dialogflow Intents & Fulfillment NodeJS code related to Business API usage. The next will use the same Intent within a Google Assistant integration then, same within a customized Flutter mobile application.

2) Introduction to Euler Hermes Financial Open Data API

Image by author

The purpose of this section is to allow you to configure conversations that understand the user’s request when asking for financial data. Each request can be formulated in various ways and has parameters. If missing, the user will be asked to complete them. Once the fulfillment is met then an Opendata API is called and returns financial data back to the user.

Our Financial Virtual Assistant will get some financial data from Euler Hermes Economics Open Data and display them to the user (see https://opendata.eulerhermes.com/pages/home-page/) but it could also be the impressive DB.Nomics economics data provider. ( https://db.nomics.world/)

Mostly everything you can see in these 2 websites can be queried by RESTful APIs.

Now let’s explore some international trade data from Euler Hermes. In our case, we will connect to a data set that provides Trade Flows and Payment Defaults between importing and exporting countries (see: https://opendata.eulerhermes.com/explore/dataset/exports-vs-claims/information/)

The dataset is composed of 8 data elements:

• Year/month
• Importer/buying Country
• Exporter/selling Country
• Importer company trade sector NACE code
• Total of trade flows (€) declared to Euler Hermes on the given month
• Total of payment defaults (€) declared to Euler Hermes on the given month
• Traffic light is the risk indicator, of the given buyer population
• Loss rate proxy for the given population

3) Configure your Dialogflow Agent & Intent

Image by author

3.1. Our Use Case

An Agent is a configuration of a group of conversations on the same subject, sharing a same goal. Our Agent will display a list of Trade Flows and Payment Defaults from an exporter country to an importer one between 2 dates. Then the user will be able to filter the list by several criterias. (e. g. ‘Construction’)

The user could ask questions using different phrases that should give the same result.

The following sections assume that you already have a basic knowledge on Dialogflow.

3.2. Create the Agent

Let’s create a basic Dialogflow Agent

Once logged into the Google Dialogflow Console ( https://dialogflow.cloud.google.com/)

1. Create a new agent and name it BusinessAPIBot
2. Add a description on the General tab

You can leave the other default values on the other tabs as they are.

3.2. Create an Intent

An Intent represents a typical conversation between the user and the virtual assistant.

Let’s create our first Intent.

1. Click on ‘+’ button the left menu to add an Intent
2. Name it ‘eco-eh-exports-vs-claims’
3. Enter your first Training phrase as following “what’s the volume of foreign trade for the top 10 export countries from 2018–05–01 to 2018–05–02 filtered by filter”

As you can notice, the training phrase has some parameters highlighted in different colors. Each element of the training phrase can be selected then added as a parameter. Parameters can have several types: e.g. Integer, Date or can be user defined.

Parameters need to be associated with an Entity.

In cases where Dialogflow cannot create them automatically, you will first need to create them manually with the ‘Entities’ menu on the left, then to add each of them to the entity list.

Now we will add parameters to our training phrase:

1. Select the ‘from’ date (here ‘2018–05–01’)
2. A pop-up will appear. Select a ‘@sys.date’ entity
3. Name the parameter ‘date-period-from’
4. Do the same for the ‘to’ date ‘2018–05–01’ and name it ‘date-period-to’
5. Do the same for the ‘10’ value and assign it to a ‘@sys.number-integer’ entity. Name it ‘topnn’
6. Finally, do the same for the ‘filter’ value and assign it to a ‘@sys.any’ entity. Name it ‘filter’

Your first training phrase should look like this:

Image by author

Now let’s add 2 other training phrases to allow the conversational engine to better understand its request if he asks it differently.

Enter you second training phrase as follow: “ what’s the top 10 volume of foreign trade between FR and DE countries for a period from 2018–05–01 to 2018–05–02 filtered by filter”

You can notice that this one is a little bit different. The ‘topnn’ parameter appears at the beginning and there are 2 new additional parameters: Exporter and Importer countries.

1. Select the ‘FR’ country value and assign it to a new ‘@geo-country-code-export’ entity. Name the parameter ‘geo-country-code-export’
2. Select the ‘DE’ country value and assign it to a new ‘@geo-country-code-import’ entity. Name the parameter ‘geo-country-code-import’
3. Do the same as for the first training phrase to identify the other parameters

Your second training phrase should look like this:

Image by author

Finally, add a 3rd training phrase to the list as following: “ I’d like to get trade flows and payment defaults between FR and EN for period from 2018–05–01 to 2018–05–02 filtered by filter”

As you can see, it has the same parameters as the previous training phrase. We have simply replaced ‘volume of foreign trade’ by ‘get trade flows’.

Then, do the same as with the second training phrase to identify all the parameters.

The NLP Dialogflow engine allows you to train the AI with only a small set of training phrases. Ideally you better add some more training phrases to allow better performance of your agent.

On the screen below you can see all your defined parameters:

Image by author

Parameters can be optional or mandatory. If they are missing, Dialogflow will ask the user to complete them automatically.

1. On the top field, please type the following: ‘input.getTradeFlows’
2. Check the ‘Mandatory’ box for ‘geo-country-code-export’, ‘date-period-from’ and ‘date-period-to’
3. Add a prompt text ‘From which period?’ to the ‘date-period-from’ parameter
4. Add a prompt text ‘To which period?’ to the ‘date-period-to’ parameter
5. Add a prompt text ‘What’s the Export Country Code (DE, FR, SP…)’ to the ‘geo-country-code-export’ parameter

You can also send back a response including a formatted value of your input parameters.

For that, add the following text on the Response section:

Ok, here’s the data I’ve selected for you: — Exporter country $geo-country-code-export — importer country $geo-country-code-import — period from $date-period-from.original to $date-period-to.original

Click on the ‘Save’ button to save your Intent and create your Agent.

Now we are able to do a very basic test of the Agent.

3.3. Basic Test of our Agent

Image by author

On the right screen box you can test your agent and see if the training phrases are recognized and the parameters correctly identified and parsed.

Dialogflow should ask additional questions If a mandatory parameter is missing.

For our very basic test, let’s type the following:

• “get trade flows from FR to DE”
• The agent should ask for the missing mandatory date “From which period?”
• Enter “20200101”
• The agent should ask for the missing mandatory date “To which period?”
• Enter “20201231”

Then the Agent’s answer should be as following:

“ Ok, here’s the data I’ve selected for you:

- Exporter country FR — importer country DE

- period from 20200101 to 20201231 “

Image by author

The next article (Part II) will show you how to:

• integrate your new Agent with Euler Hermes API using NodeJS
• present the data to the user
• filter data using an Agent Followup Intent
• configure Small Talk