Xamarin.Forms + Bot Framework + MVVM

With Microsoft’s Botframework, you can build a chat bot which runs on several platforms (Social media, websites…). Now think about Xamarin.Forms with it, you can build apps which run on several platforms too (iOS, Android, UWP…). Thanks to the DirectLineClient, we can build custom clients for our bots. In our case, the client will be a Xamarin.Forms app. (meaning your bot can be available on iOS, UWP, Android… and also Facebook, Skype Telegram…) This means you can be everywhere with just a bit of code and this is Awesome! 

Our main objective

Our main objective in this tutorial is to build a simple Xamarin.Forms application which will communicate with an already existing chat bot (built with the Botframework and hosted on Azure). All that using the MVVM design pattern.

Here is the source code for this tutorial.

Don’t miss any post and subscribe to the mailing list

[zc4wp_za2]

What we will be doing.

Accessing direct-line with the new Azure Bot service

Recently, Microsoft created the bot service and now the creation of chat bots using its bot framework has been moved to Azure so, we will access our bot through Azure. After accessing or creating your bot, we will configure direct-line channel (The channel through which our bot will communicate with the mobile app.) and get the direct-line secrets.

  • After accessing you bot on azure, chose the Channels option of your bot on the options blade.

  • On the next blade which will display, under the Add features channel options, select direct-line. 
  • Create your secrets.
  • Take down your bot handle.

Let’s build the Xamarin.Forms client

We will build the Xamarin.Forms app which will use the DirectLineClient to communicate with the bot. Remenber we will use the MVVM architectural design pattern to build this app, that is why we will divide the task of building the app into several components Model, View, View-Model and the Service.

First, install this package to your solution : Microsoft.Bot.Connector.DirectLine

[zc4wp_za2]

Model

Let’s start with the Model. Our model will be a representation of the message sent by the Bot or by the Client. In reality, what I call Messages is just an abstraction of “An Activity” sent or received by the Bot. There are several types of activities, (see the botframework documentation https://docs.microsoft.com/en-us/bot-framework/dotnet/bot-builder-dotnet-activities) but we are interested here in the message activity in its simplest form.

  • Create a folder in your project directory called “Models”
  • Add a new class “BotMessage”

Here is the code for the model

This is for the simplest messages exchanged by the Bot and the client. Messages containing attachments such as images are not covered in this tutorial now and may be covered in another tutorial but from here implementing it as an additional functionality is not difficult.

The Service

Our service will communicate with the Direct Line, it will be in charge of:

  • Sending Messages to the bot
  • Receiving Messages from the bot
  • Abstract the activity into simple messages. (Remember we receive messages in Activities from which we will get only the attributes and present it to the user).

The service will be used by the ViewModel to communicate with the Bot and produce a BotMessage model which will be represented in the View latter.

NB: The View Model does not contain any view component this is very important to note.

Let’s Describe how the service will send a message:

  • We need to instantiate the DirectLineClient first, this object will be responsible for communicating with the Bot this is done by passing it the DirectLine Secret which we took online earlier in the tutorial.
  • We Setup the DirectLineClient to initiate a conversation with the Bot, and each conversation initiated has a unique ID. So, we will save this conversation created in a Property BotConversation messages will be sent to and received from this conversation later.

Remember what we said earlier, messages are sent to and from the bot using Activities, so we need to create an Activity to send a message to the Bot, the activity contains the message and sender info, after creating this, we send the message asynchronously to the bot using the DirectLineClient and remember we have initiated a conversation, and it is with its ID that we will send the message to the bot.

After sending the message, we call the method to receive messages immediately, cause we know the bot will reply to us.

 

Let’s describe how messages are received

The message will be received using the DirectLineClient, and the id of the conversation which we initiated earlier. Using the following code snippet.

The messages are sent to the response in the form of activities, we need to get only the activities which are from the bot, what will be use here is the Bot Handle  (Which We took earlier from our bot on azure).

We then turn the activities into the simple BotMessage model using the method

Then we invoke an event which will fire containing the messages from the bot, every subscriber will get these messages when it arrives.

Here is the complete code for the BotConnectorService Class.

The ViewModel

The ViewModel is responsible for calling the service, and receiving the messages sent and received into a data structure which will be represented in the View.

To create the ViewModel, we will use a set of helpers which are available here.

The ViewModel will have the BotConnectorService object, which will function in:

  • Sending Messages typed by the user,
  • Receive messages from the bot

The ViewModel will also have a set of properties, which will be bound to the View for data representation or actions performed on the user interface.

Here is the initial code for the ViewModel:

The View:

We will build the view with Xaml. Firstly, remember we are using the MVVM design pattern and we should bind the view to the ViewModel, this is done by assigning a MainViewModel object to the view’s BIndingContext.

  • Go to your MainPage.xaml and add this line of code: BindingContext = new MainViewModel();
  • Inside the Views folder (Or where you have  your views in your project), Create a folder named DataTemplates. This will contain the ViewCells which will serve as data templates for the messages sent by the user or the bot since their message bubbles should be distinct.

Let’s Create the data templates:

  • Create a ViewCell, this will be used to create the message bubble for messages sent by the user.
  • This bubble will be situated on the right and have a light sky blue color.
  • The Message bubble will be rectangular, and fit the messages it contains.
  • The Data template will be data bound to an instance of the BotMessage model

Here is the code for this :

  • Create another ViewCell, this will be used to create the message bubble for messages sent by the user.
  • This bubble will be situated on the left and have a dodger blue color
  • The Message bubble will be rectangular, and fit the messages it contains too.
  • The Data template will be data bound to an instance of the BotMessage model too.

In the Views folder, create a class this class is the Data template selector which will automatically select the data template for the messages sent by the user or the bot depending on the ISent Property of the BotMessage class.

This is its implementation.

The Main page;

The main page will have a basic conversational interface, will a text entry, and a send button. The upper part of the page will contain a list view which will have the data template selector which we made earlier.

  • The list will be bound to the View Model’s BotMessages
  • The text box’s content will be bound to CurrentMessage property of the View Model
  • The button will have its command bound to the SendCommand

Here is the code for this.

The overall application should be up and running smoothly by now, and you should be able to communicate with your bot.

Now you have a client to communicate with your bot directly on your mobile device or your PC, Android, ios, Windows… depending on the platform you target with Xamarin.Forms. When running the sample you should take note that replies from the bot may take a few seconds before arriving it is not always instantaneous.

As I said earlier, this tutorial does not show how to handle messages with rich cards or attachments such as pictures… this will guide you in doing so, because living from this step to the next, is not difficult.

 

[zc4wp_za2]

If you liked this post, or it was useful to you, please ? like it, share it on twitter, facebook or other social media… in case you want to get updated on any new useful post, follow me on twitter  and like my page on facebook.

Want to build an intelligent android application with Natural Language Processing features ? Check this post.

Follow me on social media and stay updated

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.