Chatbots with DialogFlow and AWS Rest Services

INTRODUCTION

We receive a lot of questions on our Self-paced training courses. Most of these questions belong in an FAQ, but nothing works better than getting your questions answered quickly. A chatbot, implemented correctly, can help offload a lot of these questions and improve customer user experience.

Chatbots answer questions based on keywords identified from customer questions. The chatbot here is trying to guess the customer “intent” based on these keywords. As part of the chatbot implementation, you train the chatbot to identify the customer intent by providing a set of “utterances” (Oracle Chatbot) or “training phrases ( DialogFlow). The more variations provided, the better you chatbot can respond and avoid customer frustration.

Current Chatbot solutions also provide ways of capturing the initial context of the customer query. This helps in designing conversation flows to a set of customer questions keeping this initial context in mind. Intents are mapped to bot actions and responses to answer customer queries and ask further questions if required. Each intent is associated with “entities” that map keyword data to known data types. Part of designing the chatbot experience is defining custom entities that relate to your business. Most of the current chatbot solutions offer a set of entities that are commonly used like current date, numbers or currencies, colors. Any customer query that mentions these keywords are automatically mapped to these system entities. The data types captured by the bot software can then be used to query backend systems.

Responses to customer queries can be formatted using regular html to provide a better interactive experience.

Designing the bot

In this blog, we will go over the experience of creating a simple chatbot using the Google DialogFlow and OpenWeatherMap api. Once the bot is ready, we will integrate with a custom angular app and wordpress. If you don’t have one, create a new DialogFlow account at https://dialogflow.com/

Create a new agent in DialogFlow called MyWeather, accepting the default option. A Google project will be created as part of the agent, unless, of course, you selected your own pre-existing project.

Each agent is configured with the following items:

  • Intents
  • Entities
  • Fulfillment
  • Integrations

Fulfillment using AWS Rest Backend

We will see how easy it is to expose the OpenWeatherMap api using AWS Lambda based rest service on AWS API gateway. If you do not have one, create a free service account for the OpenWeatherMap api here.

Let’s get started with the service development by first creating the models required to store our data. We will be using Java to create our lambda function.

The DialogFlow request JSON is documented very well on their site. You are creating java model class for this JSON Structure:

This JSON should require the following model classes to be used in your service:
DialogFlowMain
QueryResult
Parameters
FullfillmentMessages
OutputContexts
Intent
DiagnosticInfo
OriginalDetectIntentRequest
Payload
Download the attached sample project for more details.

The main request object model in Java should look like this:

Once you have the Dialogflow related model objects created, its time to create a model for the OpenWeatherMap api. The simplest api call here returns hourly forecast from the current time. The api can be invoked using a city name, zip code, latitude/longitude etc. We will be using the following url in this example
api.openweathermap.org/data/2.5/weather?q=London

A quick test with Postman for this api call should help us to build our model.

Chatbot Integrations
Based on this result, you can model this JSON like
AllForecast
OneForecast
MainForecast
Weather
Clouds
Wind
Sys
See the attached sample project for more details

Once you have the mode ready, you can create a lambda function using the Java ide of your choice. I am using Eclipse as AWS provides a nice plugin to help you work with the AWS serverless ecosystem. Make sure you select the your AWS region in the ide before starting any work. We will use the lambda proxy integration pattern for AWS gateway to ensure the entire request from Dialog flow is available in the lambda function. Create a new lambda project called WeatherAPI. Add GSON maven dependency to the project.

DialogFlow request json will be included in the request body that is readily available in the ServerlessInput class.

The above code is pretty self-explanatory. The model class we created for DialogFlow can now be used to extract relevant data for use in the OpenWeather API call.

Extract the action parameters captured by DialogFlow as shown below:

You have enough data now to call the weather api:

Note that this service call might return a JSON string that contains extra ”\” characters. You might have to add in some code to strip out these backslashes before attempting to deserialize them to Weather objects.

We are not utilizing most of the JSON response required by DialogFlow. For now, simply returning a custom JSON string that provides a value for “fulfillmentText” should suffice to display the weather on the client. For eg.,

Deploy this lambda function using eclipse. Now, to wrap up this service by creating a custom api on API Gateway.

Chatbot Integrations
Make sure you enable CORS for this api.
A quick api test using the dialog flow json given above should help you ensure the new lambda function is working.

Chatbot Integrations

Integrating with WordPress

This could not be any simple…at least for Dialogflow. Install this excellent plugin provided by Daniel Powney.
All you need to do is get your DialogFlow agents access token and enter that in the plugin’s configuration as shown below:

Chatbot Integrations

Chatbot Integrations

Chatbot Integrations

A Simple Example using Angular 6

Let’s integrate our super functional chatbot an Angular 6 application. You should have turned on the Web Demo integration in your agent found in the Integrations menu.

Chatbot Integrations

This integration gives you the simplest way to add this bot to your site. Checkout the code below:

All you have to do now is add this to your angular app. Create a new application using the Angular-CLI.

ng new dialogFlowDemo

To perform q quick test, you can add the iframe code in app.component.html. In a real app, however you would want to ensure that the resource url provided for the iframe is sanitized for security Angular provides a built in way called DomSanitizer. Check out the Angular security guide to get a better perspective. In our example, you could add a method in your controller to create a trusted resource url. So

sanitizedURL can now be displayed safely in the UI. Your chatbot should display now:

Chatbot Final Display

REFERENCES

DialogFlow Console
DialogFlow Documentation

vivek

Oracle Fusion Middleware Architect at FUSION Applied
Vivek is an Oracle Certified Fusion Middleware architect. He has over 18 years of experience implementing custom software solutions in the Financial, Health, and Government sectors. He is one of the founders of Fusion Applied.
vivek

Leave a Reply

avatar
  Subscribe  
Notify of