Integrate Alan.app with flutter

Making a simple voice chat integration using flutter and Alan.app to navigate to other pages.

You can find the Source code in Github

You can find also the script from Alan.app in here.

Lets start with creating a account in Alan.app

• Open Alan.app and create your account.
• After login you will be redirect to the studio.alan.app/projects
• Now you will see a create voice assistant button, when you click on it you will see like this.

• Now click on empty project to create a blank project and add the name for your project and click on create to create a project.

• Now you will see a page like:

• Here (1) is the list of scripts that you have created, (2) is the main editor screen where you can write script, (3) is for testing, (4) is for integrations for it in Web or IOS or Android and few other steps to follow, (5) is your project name, (6) is for adding a default scripts that is already present in the application.
• Here we can write script in two ways inform of intent,play or question,reply
• Intent() / question() is the basic commonly used function to describe by a user commands.
  Intent is basically of two parts 1) Pattern 2) Action
  Action will be executed when Pattern is matched.
  Play() / reply() is predefined function that is used to reply the message or command in the form of JSON Object (key:value pairs) for your questions.

• From the above code, if you say hello world then assistant will reply “hello there” or “hi there”
• Now write some simple script and play with it.

question(
    'What is your name',
    reply('I am Alex','I a new assistant called Alex')
)
question(
    'Tell me some jokes',
    reply("What did one plate say to his friend? Tonight, dinner's on me!",
          "I tried to sure the airport for misplacing my luggage. I lost my case",
         "What did one traffic light say to the other? Stop looking! I am changing!",
          "What's red and moves up and down? A tomato in an elevator!",
          "My girlfriend treats me like God. She ignores my existence and only talks to me when she needs something."
         )
)

• This will be the output when you try ask some questions to it from our script.
• In the Script the reply will give you a random text which is under comma separated text values.

Now lets integrate it in flutter application

• Create a project in flutter using:

flutter create interate_alan_app

• After create the project open it in your VsCode / Android Studio
• Follow the package :

alan_voice | Flutter Package (pub.dev)

• Add the alan_voice dependency in pubspec.yaml file.

• Now import Alan-voice package dependency in your main.dart file

import 'package:alan_voice/alan_voice.dart';

• Now create a initState() method in your statefulwidget class:

• initState () is a method of class State and it is considered as an important lifecycle method in Flutter. initState () is called only Once and we use it for one time initializations
• Now create a default method called setUpAlan() in your statefulwidget class and add this:

setUpalan() {
    AlanVoice.addButton("***KEY***/stage",buttonAlign:       AlanVoice.BUTTON_ALIGN_RIGHT);
}

• Now add setUpalan() method in initState(). Because when we start app / run app initiallysetUpalan() method will run.

@override
void initState() {
    super.initState();
    setUpalan();
}

• To get the Key to run the app, Now to studio.alan.app/projects now click on Integration you will see three different types, click on IOS or Android and enable the Hey Alan wake word

• Now you change the button visual style by clicking on “change” button.

• Select your own color for each state and click on save button. Then click back , Now you will see a Alan SDK Key copy that and paste it over setUpalan() method.
• If your Platform type is Android go to android/app/build.gradle file and change the minSdkVersion to 21 and for IOS no need to change.

• In main.dart the basic code is:

• Now run the app in your mobile you will see like:

• Click on logo ask something and you will receive a answer from bot.
• Add new questions with answer and start try it in your mobile app by asking to alan.

Now Lets start with Navigating the screens through voice chat.

• Create two different dart file called like Abouts.dart, Cart.dart file.
• Add basic code for those both files which display some text.

• Now go to Alan Studio and go to current project.
• Write some queries ‘ what to do when you ask to navigate to other page’, Now in p.play we need to add key:value pairs like command:Aboutus or route:/main

• Now go to flutter project, in main.dart go to setUpalan() method and add callbacks to alanvoice.

AlanVoice.callbacks.add((command) => _handleCmd(command.data));

• Create a method called _handleCmd (name as you wish):

_handleCmd(Map<String, dynamic> res) {
}

• Now add a switch Case to the method to check weather which command to be executed.

switch (res["command"]) {
case "Aboutus":
    print('About us');
    break;
default:
  print("Nothing");
  break;
}

• Now we need to navigate to other page. Add the navigation cmd to navigate between screens for each case and required import statement for dart file

Navigator.push(
context, MaterialPageRoute(builder: (context) => AboutUs()));

• Now run the app you will see like:

Thanks for Reading the Article!

You can find the Source code in Github

You can find also the script from Alan.app in here.

You can get Free Interactions from MTECHVIRAL upto 2500 Interations.

Enjoy trying with new things

Follow me in Github, Twitter, Linkedin.