Integrating Monaca with Dialogflow (formerly api.ai)

In this article, you will learn how to create a conversational app with Monaca Cloud IDE and Dialogflow.

Dialogflow is a natural language interactions platform created by Google.

We will demonstrate how to integrate Dialogflow with Monaca Cloud IDE using Angular 1 and Onsen UI v2. The integration is done based on apiai-cordova-client plugin.

The implemented features of this sample application are:

  • text conversation in a predefined languages: English and Japanese
  • voice conversation in a predefined languages: English and Japanese
  • language settings: currently available languages are English and Japanese

Tested Environments: Android 7.0 & iOS 10.1

Getting Started with Dialogflow

Dialogflow is a natural language understanding platform that makes it easy for developers (and non-developers) to design and integrate intelligent and sophisticated conversational user interfaces into mobile apps, web applications, devices, and bots.

A Dialogflow agent represents a conversational interface of the application. An intent determines what kind of user requests should be understood and to what actionable data (JSON response) those requests should be converted.

In this sample application, we created two simple agents:

  • MonacaAI_EN: a conversational interface in English
  • MonacaAI_JA: a conversational interface in Japanese

Each agent has the same number of intents about daily conversation such as food, weather, greeting and so on.

Note: We won’t talk about how to create an agent or an intent in this article. Please refer to the official documentation on how to get started with Dialogflow.

Step 1: Prerequisite

In order to integrate Dialogflow with Monaca, Client access token of an agent is required to initialize with apiai-cordova-client plugin.

In order to find the Client access token of an agent, please do as follows:

  1. Go to Developer console.
  2. Select an agent.
  3. Click on Settings icon (see the screenshot below)

4. Then, the following page will be shown and you can find the Client access token here.

Step 2: Importing This Project into Monaca Cloud IDE

Step 3: Understanding the Application

In this sample application, there are 3 main files such as:

  • index.html : The startup page consists of HTML, Onsen UI v2 and Angular 1 elements.
  • style.css: This is a stylesheet for the application.
  • app.js: An Angular 1 file containing a service and a controller used in the application.

index.html

This is, of course, the main page of the application, the one loaded by default. As you can see, this application has 3 tabs represented by 3 pages: text.html, voice.html and lang.html. These 3 pages are created using ons-template within index.html file.

In this section, we will explain how each page components are created. Firstly, we start by creating a tabbar component using ons-tabbar. Here is a code snippet of the tabbar containing 3 tabs:

Now let’s start creating each required page using ons-template component. The first page is text.html for a text conversation. Here is a code snippet of this page:

The second page is voice.html for a voice conversation. In this page, a user will start asking a question by tapping on START RECORDING button. Then, the question will be sent and reply will be displayed. Here is a code snippet of this page:

The last page is lang.html for setting the language of the conversation. In this page, the predefined languages will be displayed. Here is a code snippet of this page:

style.css

This is a stylesheet file for styling each page of the application. Here is a complete code for it.

app.js

This is an Angular 1 file containing a factory and a controller used in the application. In this sample application, we created two agents in Dialogflow representing Japanese and English conversations. The LanguageSettings factory is used to change the language of the conversation. It has the predefined information of the existing agents and a method to config which agent is used in the application. For example, you want to set the default language to English. This factory should be triggered as soon as the page is loaded. When it is called, it will trigger ApiAIPlugin.init() function to initialize the apiai-cordova-client plugin with the selected agent, in this case it is the agent for English conversation. Here is the code snippet of this factory:

Next, we will talk about the HomeCtrl controller. In this controller, there are 3 main functions such as:

  • sendText(): send the user’s text question to Dialogflow with the corresponding agent. After successfully receive a response, both question and corresponding answer will be displayed on text.html page.
  • sendVoice(): send the user’s voice question to Dialogflow with the corresponding agent. After successfully receive a response, both question and corresponding answer will be displayed (as text) on text.html page.
  • updateLanguage(): update the language of the conversation based on the predefined agents.

Here is the code snippet of this controller:

Conclusion

Now that you understand how to create a conversational app with Monaca using Dialogflow. Now, you can start testing your app with Monaca Debugger. Then, try to build and install it on your device.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.