Chatbot Mobile App with Bot Framework Direct Line

Botframework provides RESTful API – DirectLine that allows communication between your bot built on Azure and your own chatbot application. Instead of embedding the bot using WebView, today, we are going to learn how to create a Chatbot mobile app with Xamarin connecting to DirectLine of Botframework. (Thanks to Daniel & Albilaga on sharing the sample for using DirectLine)

Pre-requisites

 

As a reference, get your sample code from

Develop a Chatbox Mobile App with Direct Line

  1. First, we need to create a Xamarin Cross Platform Mobile App. Don’t have one yet? Click to learn how to create one!
  2. Secondly, you would need to create an intelligent bot with Bot Framework by following this tutorial.
  3. Thirdly, we need to add few NuGet Packages, right click Solution in the Solution Explorer -> Manage NuGet Packages for Solution…
    ChatbotWithDirectline
  4. One of the package we need to install to all projects is Microsoft.Bot.Connector.DirectLine.
    ChatbotWithDirectline
  5. Then, another one would be Microsoft.Rest.ClientRuntime, select it and install to all projects.
    ChatbotWithDirectline
  6. Create two new folders – Models & Services to .NETStandard project.
    ChatbotWithDirectline
  7. Right click Services folder and add a new class named BotConnection.cs.
    ChatbotWithDirectline
  8. Create & initialize the following variables in BotConnection.cs and replace BotId & directLineSecret value with your configured ones.
    public string botId = “";
    	public string directLineSecret = ";
    public DirectLineClient directLineClient;
    public Conversation MainConversation;
    	public ChannelAccount Account;
    
  9. Add a constructor BotConnection along with the following code in BotConnection.cs.
    public BotConnection(string accountName)
    {
    // Obtain a token using the Direct Line secret
    	var tokenResponse = new DirectLineClient(directLineSecret).Tokens.GenerateTokenForNewConversation();
    
    	// Use token to create conversation
    	directLineClient = new DirectLineClient(tokenResponse.Token);
    	MainConversation = directLineClient.Conversations.StartConversation();
    	Account = new ChannelAccount { Id = accountName, Name = accountName };
    }
    
    
  10. Now, we need to create a function SendMessage to send our message to the Bot Service on Azure via DirectLine.
    public void SendMessage(string message)
    {
    	Activity activity = new Activity
    	{
    		From = Account,
    Text = message,
    Type = ActivityTypes.Message
    };
    directLineClient.Conversations.PostActivity(MainConversation.ConversationId, activity);
    }
    
    
  11. Then, let’s create GetMessagesAsync function to periodically check for new message that sent by Bot Services.
    public async Task GetMessagesAsync(ObservableCollection collection)
    {
    	string watermark = null;
    	while (true)
    	{
    		Debug.WriteLine("Reading message every 3 seconds");
    	var activitySet = await 	directLineClient.Conversations.GetActivitiesAsync(MainConversation.ConversationId, watermark);
    watermark = activitySet?.Watermark;
    		
    		foreach (Activity activity in activitySet.Activities)
    		{
    			if (activity.From.Id == botId)
    			{
    				collection.Add(new Message(activity.Text, activity.From.Name));
    			}
    		}
    		await Task.Delay(3000);
    	}
    }
    
  12. After that, let’s create another class – Message.cs under Models folder.
    ChatbotWithDirectline
  13. In the Message.cs class file, add the following codes to Message class and save it.
    class Message
    {        
    	public string Text { get; set; }        
    	public string Sender { get; set; }        
    	public TextAlignment LblMessageHorizontalTextAlignment { get; set; }
    	public TextAlignment LblSenderHorizontalTextAlignment { get; set; }
    
    	public Message(string text, string sender)        
    	{            
    		Text = text;
    		Sender = sender;
    		if (Sender.ToUpper() == "ME")
    		{
    			LblMessageHorizontalTextAlignment = TextAlignment.End;
    			LblSenderHorizontalTextAlignment = TextAlignment.End;
    		}
    	else
    		{
     			LblMessageHorizontalTextAlignment = TextAlignment.Start;
    			LblSenderHorizontalTextAlignment = TextAlignment.Start;
    		}
    	}
    }
    
    
  14. Once we are ready, now let’s head to our user interface file – MainPage.xaml and add some StackLayout and ListView to show all the messages.
    <ContentPage.Content>
           <StackLayout Spacing="10" Padding="10" HorizontalOptions="Fill" VerticalOptions="Fill" Orientation="Vertical">
             <ListView x:Name="MessageListView“ VerticalOptions="StartAndExpand“ HorizontalOptions="Fill“ HasUnevenRows="true">
                <ListView.ItemTemplate>
                  <DataTemplate>
                   <ViewCell>
                     <StackLayout Orientation="Vertical">
                       <Label VerticalOptions="StartAndExpand" HorizontalOptions="Fill“ HorizontalTextAlignment="{Binding LblMessageHorizontalTextAlignment}“ Text="{Binding Text}"/>
                      <Label VerticalOptions="End" HorizontalOptions="Fill" HorizontalTextAlignment="{Binding LblSenderHorizontalTextAlignment}" TextColor="Accent" Text="{Binding Sender}"/>
                   </StackLayout>
                 </ViewCell>
              </DataTemplate>
           </ListView.ItemTemplate>
         </ListView>
       </StackLayout>
    </ContentPage.Content>
  15. Furthermore, still with MainPage.xaml, below the ListView component, add the following Entry component to allow users to type their message and do the send when they are completed.
     <Entry Placeholder="Message" VerticalOptions="End" HorizontalOptions="Fill" HorizontalTextAlignment="End" Completed="Send" />
  16. Moving on, in the MainPage partial class, add the following variables & constructor.
    //Initialize a connection with ID and Name        
    BotConnection connection = new BotConnection("ME");        
    
    //ObservableCollection to store the messages to be displayed        
    ObservableCollection messageList = new ObservableCollection();        
    public MainPage()
    {            
    	InitializeComponent();
    	//Bind the ListView to the ObservableCollection
    
    	MessageListView.ItemsSource = messageList;
    	//Start listening to messages
    	var messageTask = connection.GetMessagesAsync(messageList);        
    }
    
    
  17. Last but not least, we are going to add a Send function in the MainPage class to send out the entered message to the Bot Service.
    //Send method for message entry        
    public void Send(object sender, EventArgs args)        
    {            
    	//Get text in entry            
    	var message = ((Entry)sender).Text;            
    	if (message.Length > 0)            
    	{                
    		//Clear entry                
    		((Entry)sender).Text = "";             
       
    		//Make object to be placed in ListView                
    		var messageListItem = new Message(message, connection.Account.Name);
    		messageList.Add(messageListItem);
    
    		//Send the message to the bot
    		connection.SendMessage(message);
    	}
    }
    
    
  18. Finally, let’s compile and run it on your mobile device. It should response what you have told it!
    ChatbotWithDirectline

 

 

 

 

 

Grab Sample Code @ GitHub
Don’t forget to follow me @
Twitter: @hmheng
More slides @ SlideShare: https://www.slideshare.net/HiangMengHengMarvin
Blog: http://hmheng.pinsland.com

 

You may also like...

3 Responses

  1. November 20, 2017

    […] may be interested in learning how to create an Intelligent Bot on your mobile app […]

  2. December 23, 2017

    […] possibilities that can involve more natural human interaction, such as creating a chat bot on web, on mobile app using BotFramework, LUIS mobile app using LUIS, a PictureTeller app using Vision API, till the […]

  3. March 8, 2018

    […] ML has been around for Microsoft to support the community through Cortana, Cognitive Services, Bot Service, Azure Machine Learning and CNTK. Let’s see these will boost the development of AI & ML […]

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

%d bloggers like this: