Integrating Monaca with Dialogflow (formerly api.ai)
Dialogflowis 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:
- Go to Developer console.
- Select an agent.
- Click on
Settingsicon (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
Cloud powered HTML5 hybrid app development environment. Code and build iOS/Android/Windows apps cross-platform.monaca.mobi
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.
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:
lang.html. These 3 pages are created using ons-template within
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:
This is a stylesheet file for styling each page of the application. Here is a complete code for it.
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
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
updateLanguage(): update the language of the conversation based on the predefined agents.
Here is the code snippet of this controller:
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.