Flutter and Bots (DialogFlow)

Flutter and Bots (DialogFlow)

If brain is A.I, body is a bot.


As the technology evolves, machines become powerful day by day. There was once a time where we used to dream about A.I , and now

Here I am writing this article.

In this article, we will see how we can use the power of bots to merge with power of Flutter.

Begin…

Introducing Dialog Flow,

As per their official website, Dialog Flow allows us to

Build natural and rich conversational experiences

Give users new ways to interact with your product by building engaging voice and text-based conversational interfaces, such as voice apps and chatbots, powered by AI. Connect with users on your website, mobile app, the Google Assistant, Amazon Alexa, Facebook Messenger, and other popular platforms and devices.


Pre-Requisite:

Dialogflow uses intent and entities to recognize user needs.

An intent represents a mapping between what a user says and what action should be taken by your software.

Entities are used for extracting parameter values from natural language inputs. 

An action corresponds to the step your application will take when a specific intent has been triggered by a user’s input.

Flutter and bots (dialogFlow)
Flutter and bots (dialogFlow)

Step 1 : Setting up DialogFlow

Click on Go to console at the top right corner. 

You need to sign in and authorize with Google Account to use Dialogflow.

Finally click on Create.

Under the hood :

DialogFlow creates a GCP project, which you can view by going to Google Cloud Console.

Step 2 : Testing 

As we clicked on Create (in step 1), we get 2 intents (by default:

  1. Default Welcome Intent : Helps to greet the users.
  2. Default Fallback Intent : Catches all the questions your bot does not understand.

Wanna Test !!!!???

Dialog Flow test console.
Dialog Flow test console.

Enter hello, and see the bot responding back.

Step 3 : Create Intent

Create Intent
Create Intent

Click on Create Intent…

Give a name to the intent, say Schedule Appointment.

Step 4 : Add Training phrases

Training Phrases…
Training Phrases…

Enter some training phrases as per your use-case.

If you notice, there are some words which get highlighted in the training phrase. This is because these keywords are mapped to default entities of DialogFlow. (no need to set them up ) 🙂

DialogFlow uses Google’s ML (machine learning) and NLU (Natural language understanding), implying that you wont need to enter every training phrase.

DialogFlow takes care of that automatically……..:)

Step 5 : Add Response.

Adding Response…
Adding Response…

Adding $ sign helps to access the entity values…

Step 6 : Slot Filling

Situation : What if user asks something while not providing enough information.

e.g User -> Set an appointment.

Here, neither the date nor the time is specified. What to do now ???

Enter Slot Filling.

Slot Filling…
Slot Filling…

Go to Action and Parameters,

Left Hand Side, click on the required field and define prompt accordingly.

Prompt : What the bot asks if the required parameter is missing from the user

ALL SET……………….

BONUS:

Want to share this bot ?

Click on Integrations, and enable the Web Demo

Integrations
Integrations
Output..
Output..

Click on the URL for live demo, or even integrate in your website using the iframe code.

Enter Flutter….

Step 1 : Package install

Install this package, flutter_dialogflowand 

import 'package:flutter_dialogflow/dialogflow_v2.dart';

Step 2 : Download JSON from GCP

Create or select an existing GCP project, in Console Google Cloud

From the GCP console, go to APIs and Services and click on credentials.

Click on Create credentials and choose Service account key.

Select your service account from the dropdown, choose JSON and click Create. This will download the JSON key to your computer. Save it securely.

Step 3 : Use the json file in app

  • In your project create folder assets
  • Move the json file (step 2) in assets folder.
  • open file pubspec.yaml

e.g say you save the file as credentials.json, then

flutter:  uses-material-design: true  assets:    - assets/credentials.json

NOTE :

The path here (in dart code), should be the same (fileJson: “assets/credentials.json”)

AuthGoogle authGoogle = await AuthGoogle(fileJson: "assets/credentials.json").build();