Azure Bot Using NodeJS And FormFlow Template

This is part one of a series of articles where we will learn Azure Bot Framework from scratch. In here, we will learn about the FormFlow template and how to create our first Azure Bot using that.

 

Let us first understand what FormFlow template is and when we can use it.

 

FormFlow template in Azure Bot framework provides us with a template to create a guided conversation with less effort. If we want to create a bot where we need to control the conversation by the user, FormFlow is the key. Basically, it provides only the options which the user can select and performs further action based on that. Consider we wanted to build a bot for a restaurant which takes order by providing different food items as options, quantity, provide a delivery address, phone number, etc.

 

If you are looking for a C# based bot, refer to these articles part 1 and part 2 by Somak Das.

 

Let us create our conversational bot now. 

 

Step 1

 

Log into Azure Portal.

 

Step 2 

 

Click "Create a resource"; select "AI + Machine Learning" and choose "Web App Bot".

 

 

Step 3 

 

Enter the required details as in the following image.

 

 

Next is to select the bot template. Click on the Bot template on the left. It will open a window on the right with an option to select the template.

 

 

Select all the tick-mark (checkbox) option.

 

Select the App Service plan, Azure Storage, and application insights (if required).

• Select Microsoft App Id and password - you can either create it manually or automatically. 
• Click on "Create".
  
  

Step 4 

 

The deployment would start and you will get notification of the "In progress" job.

 

Once completed, you will get the 'Deployment succeeded' notification.

 

 

Step 5

 

Now, the deployment is completed. Let us do "Hello world" testing. Click the "Go to resource" button. We will get the below screen.

 

 

Click on "Test in Web Chat". The below window will open and you can test it out.

 

 

Step 6

 

Now, let us customize it a little so as to understand how to make changes to a bot and test it again. On the left pane, click "Build".

 

 

 Click on "Open Online Code Editor". This will open the below window.

 

 

In this project, we need to find app.js. FormFlow is being controlled by this file. Let us customize it.

 

For this article, we will change a little bit of the text being prompted to the user. 

 

Below is the code which controls our conversation.

bot.dialog('/', [
    function (session) {
        builder.Prompts.text(session, "Hello... What's your name?");
    },
    function (session, results) {
        session.userData.name = results.response;
        builder.Prompts.number(session, "Hi " + results.response + ", How many years have you been coding?");
    },
    function (session, results) {
        session.userData.coding = results.response;
        builder.Prompts.choice(session, "What is your primary skillset?", ["SharePoint","Office 365", ".NET", "NodeJS"]);
    },
    function (session, results) {
        session.userData.language = results.response.entity;
        session.send("Got it... " + session.userData.name +
                    " you've been programming for " + session.userData.coding +
                    " years and primary skillset is " + session.userData.language + ".");
    }
]);

I have made changes to the function which asks for languages.

builder.Prompts.choice(session, "What is your primary skillset?", ["SharePoint","Office 365", ".NET", "NodeJS"]);

It will be automatically saved. Come back to Azure and click on "Test in Web Chat". Try again now and you can see the changes being made.

 

 

That's it. Simple, right?

 

Wait until you implement a real use case :)  In the second part of this series, we will learn how to connect a bot with SharePoint Online. 

 

Hope this helps. Happy coding!