Build a Flight Tracker ✈ with Bot Framework Composer 🤖 - Part 1
Tags: botframework, azure, composer, luis
Published: 2020-02-09 10:35:10

<div data-pm-slice="1 1 []" data-en-clipboard="true">Knowledge increases when it is shared. As a strong believer of this notion, it always cheers me up when I see a new tool, technology or even a blog post which helps people solve their problems.</div>
<div></div>
<div>In today's world, there are thousands of organizations, SMEs and individuals who are solving some day to day problems and coming up with the better solutions, every day.</div>
<!--more-->
<blockquote>
<div><em>Technology has become ubiquitous now. It's a part of our lives. </em></div></blockquote>
<div>Similarly, in the software industry, from big giants to startups to individuals, we've got many people working on making other developers life easier. Their mission is to empower developers with the tools, features and the like to create better solutions with constructive output and <a href="https://github.com/microsoft/botframework-sdk">Microsoft Bot Framework Engineering team</a> is NO different than those who're cooking some really good recipes for your conversational apps.</div>
<div></div>
<div>Ever since I started working with Bot Framework (<a href="https://chatbotsmagazine.com/chatbots-and-ivr-customer-services-perspective-7b0b719f60da">~2017</a>), the excitement of Conversational AI is growing if not monthly then every quarter of the year.</div>
<blockquote>
<div><i>According to <a href="https://www.gartner.com/en/newsroom/press-releases/2019-10-29-gartner-identifies-top-digital-experience-trends-for-">Gartner</a>, Digital Agents (or Assistants) are marked as top 3rd trend for 2020 in Digital Transformation.</i></div></blockquote>
<div>We've come a long way where we're not just discussing the improvements of a single stack (e.g. C# or Node) but exploring the ways on how you (as a developer) can create awesome bots for channels ranging from <a href="https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-for-teams">Microsoft Teams</a> to <a href="https://github.com/BotBuilderCommunity/botbuilder-community-dotnet/tree/develop/libraries/Bot.Builder.Community.Adapters.Google">Google Assistant</a> to <a href="https://www.youtube.com/watch?v=KI2NA2tMdxk">your next car</a>.</div>
<div></div>
<div>Microsoft Bot Framework is the only (yes, THE ONLY) framework for building your conversational apps (Digital Assistant, Personal Virtual Assistants, usual chat bots etc.) which is <a href="https://github.com/microsoft/botframework-sdk#quicklinks">purely open source</a> with clarity, conciseness and consistency.</div>
<div></div>
<blockquote>
<div><i>We also have an <a href="https://github.com/BotBuilderCommunity">awesome community projects</a> on GitHub but that's not a scope for this post.</i></div></blockquote>
<div>As a second post of my <strong>AI for Developer Series</strong>, we will talk about <a href="https://github.com/microsoft/BotFramework-Composer">Bot Framework Composer</a> today and see how easy it is to build a Flight Tracker bot with this newly released visual editing canvas. In addition to this, we will learn some really new concepts in this space such as Language Generation and Common Language Expression. <del>Lastly, we'll see how can we integrate Azure Function using the same tool to get the flight details and display it on Facebook Messenger.</del> After realizing this post's length, I've decided to break it into 2 parts and I will try to cover integration with Azure Functions, Handling Interruptions and much more in the upcoming one! 🙏</div>
<h2>Bot Framework Composer</h2>
<div>Bot Framework Composer is a visual editing canvas for authoring and visualizing the conversational flow. It's a low-code development tool (again, <a href="https://github.com/microsoft/BotFramework-Composer">opensource</a> 🙂) that allows you to build bots using Microsoft Bot Framework. Below are some of the key features of this tool;</div>
<ol>
 	<li>You don't have to write any code to create complex / dialogs conversational flows</li>
 	<li>It enables you to train, test and manage your natural language processing components such as LUIS and QnA</li>
 	<li>There's a special language generation system which allows you to build multiple variations of the phrase and do a lot of magic (which we will learn later in this post)</li>
 	<li>Ability to incorporate the rich cards (even <a href="https://adaptivecards.io/">Adaptive Cards</a>)</li>
 	<li>Ready to use bot</li>
</ol>
<blockquote>Bot Framework Composer is in Preview therefore, it's not recommended to be used in production. Similarly, all the Preview concepts I will mention should not be used in production as well.</blockquote>
<h3>Pre-Requisites</h3>
In order to avoid any re-invention of a wheel, I recommend you to go through these steps:
<ol>
 	<li>To start with building our bot, we first have to setup the Composer which you can easily do that by following this <a href="https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/setup-yarn.md">document</a></li>
 	<li>The baseline of this current post is the <a href="https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/tutorial-create-echobot.md">echo bot</a> &amp; <a href="https://github.com/microsoft/BotFramework-Composer/blob/stable/docs/tutorial/bot-tutorial-introduction.md">weather bot</a> that'd give you a basic walkthrough of how and what you can do with Bot Framework Composer.</li>
</ol>
<blockquote>This bot is not 100% complete and it is solely created for the sake of this post. Therefore, you must add some more features for better user experience before making it public.</blockquote>
Let's start creating our very first bot from the <strong>scratch</strong>! <em>I named it as AMA Airlines</em>.

<img class="aligncenter size-full wp-image-30799" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/AMAAirlines.png" alt="AMA Airlines - Bot Creation" width="511" height="300" />

<hr />

<h3>Language Understanding (LU)</h3>
This is one of the core components of Bot Framework Composer. It allows you to add natural language capabilities to your bot by using Recognizers or Language Understanding Intelligent Service (LUIS). It enables you to draft your <a href="https://preview.luis.ai/home">LUIS</a> / <a href="https://github.com/microsoft/Recognizers-Text/tree/master/Patterns/English">Regular Expression Recognizers</a> in a <a href="https://github.com/Microsoft/botbuilder-tools/blob/master/packages/Ludown/docs/lu-file-format.md">.lu file format</a> which is just like a markdown text , right inside the Composer and then train it on the fly. LU supports a markdown like styling to define intents, entities and other components of LUIS so it gets super easy once you're familiar with it.

Once you're done with the changes in Composer, for the first time, it will ask you some information about your LUIS subscription and then, it will update automatically everytime it detects any change (upon <del>restarting</del>/re-building the bot).

<hr />

So, for the scope of this post, let's choose the Recognizer type as LUIS and define your intents and entities in the LU text editor.

<em><img class="aligncenter size-full wp-image-30801" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/LUIS.png" alt="" width="431" height="611" /></em>

<em>I know you're in a hurry to test your LUIS; if you are then I recommend you to go to the LUIS portal and you can test it there. </em>

Now, let's add the the first response of your Bot's message. Go to your Greeting trigger on the left and then add a response to this as shown below. <em>If you notice, I entered the messages under the Language Generation text editor.</em>
<h3><img class="aligncenter size-full wp-image-30802" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/Greeting.gif" alt="Conversation Update" width="1364" height="652" /></h3>

<hr />

<h3>Language Generation (LG)</h3>
Language Generation (LG) allows you to define multiple variations of your response, execute simple expressions based on context, and refer to conversational memory. From text to the complex object such as Adaptive Cards, LG can send as an activity.

You can also define the LG templates in a similar way as .lu file but with <a href="https://github.com/microsoft/BotBuilder-Samples/blob/master/experimental/language-generation/docs/lg-file-format.md">.lg format</a>. It also supports the data binding with the bot's memory so you can easily access the dialog, user or conversation state and enable your bot to act accordingly.

<hr />

We will be using this through out this post so I am sure you'll be able to understand this well. Moving on, now we will add a trigger that will be fired once the intent <strong>TrackFlight</strong> is received.

<img class="aligncenter size-full wp-image-30803" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/Trigger.png" alt="Intent Trigger" width="487" height="388" />

Once it's triggered, we will then open up a new dialog that'd be responsible just for the flight tracking / statuses conversation.

<img class="aligncenter size-full wp-image-30804" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/TrackingDialog-opt.gif" alt="" width="1364" height="652" />

So, let's consider that our intent has been recognized as <strong>TrackFlight</strong> and the request has landed on this dialog. What will you do first? <strong>You must get entities from the utterance</strong>.

You can do this by accessing the memory objects <strong>(user, dialog, conversation etc.) </strong>and it's quite simple with Language Generation.

<img class="aligncenter size-full wp-image-30806" src="https://www.arafattehsin.com/wp-content/uploads/2020/01/Conversation-Memory-1.gif" alt="Conversation Memory" width="963" height="595" />

If you notice I am just setting the required information into our memory (conversation) variable so that I can use that information later on to populate our response and send it back to the Flight Service (I will discuss more about it in a bit).

Now, in order to get the flight details, you need either of two entities;
<ol>
 	<li>Flight Number</li>
 	<li>Source &amp; Destination</li>
</ol>
<blockquote>If you're based in Sydney and want to learn more about Bot Framework Composer and other bot goodness then mark your calendar to join my session at <a href="https://www.eventbrite.com/e/power-platform-saturday-sydney-2020-registration-86099380565">Power Platform Bootcamp</a>, 2020!</blockquote>
So we will build our conversation flow based upon this requirement and it should look like below.

<blockquote>As this portal does not support ❌ the larger .GIF files ❌ therefore, you can have a look it <a href="https://www.arafattehsin.com/wp-content/uploads/2020/02/Conversational-Flow.gif">here.</a></blockquote>

<hr />

<h3>Common Language Expression</h3>
Another cool feature for Bot Framework which is still in Preview but extremely useful. According to their official <a href="https://github.com/microsoft/BotBuilder-Samples/tree/master/experimental/common-expression-language#common-expression-language-preview">docs</a>, Bot Framework Composer leverages the power of Common Language Expression to evaluate the outcome of a condition based on run time information available in memory or to the dialog or the language generation system.

<hr />

There are plenty of pre-built functions which you can use in your bot. For example, if you notice exists method in above GIF, you can see that I am using it to identify whether the entity exists in memory or not. Based upon its presence, I am then deciding my next step of dialog.

Now, let's say that I have got the required details to get the status of the flight then I pass this to Adaptive Card to display the information. <em>I know that I did not fetch it using any service (let's not hurry).</em>

How Adaptive Card from Language Generation editor is processing it? Well! That's the magic I would like to show you. If you go to the Bot Responses tab on the left hand side, you can notice that all the responses you set in your Composer are being shown here as a centralized template separating from logic layer. Over here, you can define the templates which can be noticed in the following GIF I am passing <strong>flightDetails </strong>as a parameter in Adaptive Cards method and processing them according to my requirements. I am then getting the Flight Number, Source and Destination from the object and populating the Adaptive Card on the fly!

<blockquote>As this portal does not support ❌ the larger .GIF files ❌ therefore, you can have a look it <a href="https://www.arafattehsin.com/wp-content/uploads/2020/01/Bot-Responses.gif">here.</a></blockquote>

This Adaptive Card will now show the dynamic values based upon the Source and Destination provided by the user.

<img class="aligncenter size-full wp-image-30833" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/AMA-Airlines-BFv4.7-Emulator.gif" alt="AMA Airlines BFv4.7 Emulator" width="512" height="591" />

In my next post, we will learn how to use external APIs within the Bot Framework Composer by writing an Azure Function for Flight Statuses. In addition to this, we will also see how can we publish the same to some famous channels (such as Facebook Messenger, Teams etc.)

Until next time.