Build a Flight Tracker ✈ with Bot Framework Composer 🤖 - Part 2
Tags: botframework, azure, composer, luis
Published: 2020-02-29 13:24:03

In our previous <a href="https://www.arafattehsin.com/build-a-flight-tracker-using-bot-framework-composer-part-1/">post</a>, I talked about how can we create a simple Flight Tracker bot with the fixed Adaptive Cards information. In this post, we're going to learn how can you handle interruptions during a bot's conversation and what it takes to integrate the same bot with Azure Functions followed by the publishing to different channels with just point and click experience.

<h2>Handle Interruptions</h2>
People like to talk in a natural way and natural way is not always sequential. For example, during a fund transfer flow, people may change their mind and ask about their balance. Therefore, handling interruptions is an essential part of a robust bot.

Since there's no right or wrong answer to this situation, I have listed down a few questions for you to consider while designing your experience.
<ul>
 	<li>Do you want to answer the user first?</li>
 	<li>Do you want to discard your previous context and start from the new one?</li>
 	<li>Should you resume from the previous discussion after answering this?</li>
</ul>
In our case, we just have <strong>Help Dialog </strong>but a production ready bot can have multiple dialogs where you may have to deal with frequent interruptions. As the Bot Framework Composer has encapsulated Adaptive Dialog system in itself, interruption handling has become much easier.

Having said that, we will just create another Trigger similar to what we created earlier (<em>Track Flight</em>) and name it as <strong>Help</strong>. So now if anyone writes <strong><em>*I want help*</em></strong> or the similar phrase, with the help of LUIS, we will know that it's a help intent.

However, if you notice, I have defined a condition with the score which means that if the intent score has more than 50% of confidence in detection, only then this should be triggered.

&nbsp;
<h2><img class="aligncenter size-full wp-image-30853" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/HelpTrigger.png" alt="Help Trigger" width="753" height="414" /></h2>
On the trigger of Help intent, we're simply calling a <strong>HelpDialog </strong>where we will just define 3 responses in the LG editor so that they can be sent randomly to the user whenever the Help intent is triggered.

<img class="aligncenter wp-image-30854 size-full" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/HelpDialog.png" alt="Help Dialog" width="934" height="511" />

Now, to turn on the interruptions in the middle of bot's conversation, we have to go back to your <strong>TrackingDialog</strong> and set Allow Interruptions to <em><strong>true</strong></em>. What will happen then? Even if our bot is expecting an input <em>such as source or destination, </em>the bot will still handle responses from the user even if they are not related to the source / destination (i.e. they are related to help, see .GIF below).
<h2><img class="aligncenter size-full wp-image-30855" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/Interruptions.png" alt="" width="1095" height="503" /></h2>
This is how the experience will look like;
<h2><img class="aligncenter size-full wp-image-30859" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/FlightTracker-Interruption.gif" alt="FlightTracker-Interruption" width="516" height="560" /></h2>
<h2>Azure Functions ⚡</h2>
I'm using the Azure Functions 2.0 for this and it's a sample service where I am not calling any real APIs (as I was not able to secure any trial for these <em>airline</em> services).
<blockquote>The purpose is not to show you how to develop an API but to consume it within our Bot Framework Composer.</blockquote>
So, you can see that I just created a sample response which is going to be sent upon receiving a request from the Bot.

<script src="https://gist.github.com/arafattehsin/aae7806d0244d312c562b32a04e16388.js"></script>

Now let's go back to our Bot Framework Composer where we're going see how easy it is to call a function (or any API over HTTP(s)). As we have already created a function therefore we will put that URL along with the Flight Number (<em>conversation.FlightDetails.flightNumber</em>) in a query string for a function to get me the appropriate response. Once the response is received, it can be stored in <em><strong>dialog.response </strong></em>property of our dialog.

After this, following a good practice, we check whether the response has been returned as success (statusCode = 200, HTTP OK) or not. If yes then we set the property <strong>conversation.FlightDetails </strong>which then can be sent as a parameter to AdaptiveCards template (remember our previous <a href="https://www.arafattehsin.com/build-a-flight-tracker-using-bot-framework-composer-part-1/">post</a>?).
<blockquote>I know you must be wondering what's conversation? For this, you must read this, the team has done a fantastic job in explaining the <a href="https://docs.microsoft.com/en-us/composer/concept-memory">memory and their scopes</a></blockquote>
<img class="aligncenter size-full wp-image-30864" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/AzureFunctions-BotFrameworkComposer.gif" alt="Azure Functions Bot Framework Composer" width="1366" height="654" />
<h2>Publish to the World 🌏</h2>
The support for more than 15 channels is one of the key reasons to love Bot Framework. Not because of the count of channels but because of the point and click experience for almost 13 of them. The rest are from <a href="https://github.com/BotBuilderCommunity">community</a> and they have a really <a href="https://github.com/BotBuilderCommunity/botbuilder-community-dotnet#adapters">helpful docs</a> for you to get started.

These <a href="https://docs.microsoft.com/en-us/composer/how-to-publish-bot">docs</a> will help you get started with the initial setup on Azure with necessary Resources and Bot Service.

<img class="aligncenter size-full wp-image-30865" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/Deploy-Azure.png" alt="Deploy Bot Framework Bot to Azure" width="611" height="243" />

Once you've deployed your bot to Azure Bot Service. You can configure any channels where you want to publish your bot. In our case, we will deploy our bot to Teams (<em>reason: it's fairly new and simple</em>).

Teams integration has now come to a point and click experience (<em>trust me, it was not simple before</em>) and this <a href="https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/apps-package">tutorial</a> will make your life even more easier. With the help of same tutorial, I've created a simple app, registered the manifest and viola! It works like a charm. All without writing a single line of code (because you don't really have to!)

<img class="aligncenter size-full wp-image-30868" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/BotFramework-Teams.gif" alt="Bot Framework Teams Integration" width="1366" height="728" />

I am sure you've must have got the enough experience to create a production ready bot for your customers (or for yourself 😉). In case you're stuck somewhere and want some more help in detail, please reach out to me on <a href="https://twitter.com/arafattehsin">twitter</a> as I am quite active there.

<img class="aligncenter size-full wp-image-30869" src="https://www.arafattehsin.com/wp-content/uploads/2020/02/Annotation-2020-02-25-234136.png" alt="AMA Airlines on Teams" width="1098" height="637" />

Until next time.