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.
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:
- Default Welcome Intent : Helps to greet the users.
- Default Fallback Intent : Catches all the questions your bot does not understand.
Wanna Test !!!!???
Enter hello, and see the bot responding back.
Step 3 : Create Intent
Click on Create Intent…
Give a name to the intent, say Schedule Appointment.
Step 4 : Add 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 $ 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.
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
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.jsonNOTE :
The path here (in dart code), should be the same (fileJson: “assets/credentials.json”)
AuthGoogle authGoogle = await AuthGoogle(fileJson: "assets/credentials.json").build();
Good Evening Sir.
Lovely tut although in my following the tut, the bot does not respond. Instead VSCode debbuger shows me an error and I think it is complaining about the following code. Please do assist.
void response(query) async {
_textController.clear();
AuthGoogle authGoogle = await AuthGoogle(fileJson: “assets/kyri-10d68f5dd7b6.json”,).build();
Dialogflow dialogflow = Dialogflow(authGoogle: authGoogle,language: Language.ENGLISH,);
AIResponse response = await dialogflow.detectIntent(query);
ChatMessage message = new ChatMessage(text: response.getMessage() ??
new CardDialogflow(
response.getListMessage()[0],
).title,
name: “Kyuri”,
type: false,
);
setState(() {
_messages.insert(0, message);
});
}
Did you include the assets file in pubspec.yaml ?
name: kyri
description: A new Flutter project to become the Kyri skeleton.
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying –build-name and –build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: “>=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
flutter_dialogflow: ^0.1.1
#for geolocation
rxdart: ^0.20.0
# geoflutterfire:
google_maps_flutter: ^0.2.0+3
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
– assets/kyri-10d68f5dd7b6.json
– images/law.png
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.io/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.io/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# – family: Schyler
# fonts:
# – asset: fonts/Schyler-Regular.ttf
# – asset: fonts/Schyler-Italic.ttf
# style: italic
# – family: Trajan Pro
# fonts:
# – asset: fonts/TrajanPro.ttf
# – asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.io/custom-fonts/#from-packages
I have attahced the content of the pubspec.yaml in in the reply. Thanks so much for your response
Good morning sir,
Can you help me with this error..I got it after I click the submit button?
NoSuchMethodError (NoSuchMethodError: The method ‘[]’ was called on null.
Receiver: null
Tried calling: [](“queryText”))