Chatbot Mobile App Development with Botframework & Xamarin

When I learnt to create a bot using Microsoft Bot Framework, I am thinking how I can integrate the chatbot into Xamarin Mobile App. When I searched online, I found there are two ways to do, either Embed Code with Web View or Native with DirectLine.

Today, I tried the first one with the embed code and Web View on Xamarin.Forms. I found the solution is quite simple and interesting, that’s why would like to share with all of you! =D

Pre-requisites

Once you are ready, we shall do just 7 steps as below. 7 Steps? REALLY 7 STEPS!

  1. First, we need to create a Xamarin Cross Platform Mobile App.
  2. Secondly, you would need an intelligent bot with Bot Framework.
  3. Thirdly, create a Content Page class that will do render a WebView with embedded bot. To do so, right click .Core project -> Add -> New Item
    Develop a Chatbox Mobile App with Bot Framework
  4. Choose Content Page (C#) with a name WebPage.csand then click Add.
    Develop a Chatbox Mobile App with Bot Framework
  5. Replace all the code within the WebPage() Constructor with the following code.
    public WebPage ()
    {
      var browser = new WebView();
      browser.Source = "https://webchat.botframework.com/embed/hmhengbotdemo?s=V37IXxSkZjw.cwA.aoc.vvN-aIl-pPiidxJrpD4CY7XdTjudPtcuAJ6wHe8Mll8";
      this.Content = browser;
    }
    
  6. Last but not least, we need to get the App to load the bot once it is being started. So, head to App.cs -> App() constructor -> replace with the following line.
       
    public App(){        
      InitializeComponent();
      //MainPage = new HmhengXamBot.MainPage();
      this.MainPage = new WebPage { Title = "Web Page" };
    }
    

     

  7. Now, compile and run it on your mobile device. It should response with what you have told it!
    Develop a Chatbox Mobile App with Bot Framework

Really 7 Steps right?! Even though this chatbox is built with Xamarins’ Webview, it is still customizable at the backend hosted on Azure.
So, make some fun with your own idea about this chatbox!

I am still discovering how can I build with Direct Line instead of embed code. Do you have any idea? If yes, please kindly share with me at the comment below! Thank you!

Develop a Chatbox Mobile App with Bot Framework

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...

2 Responses

  1. November 15, 2017

    […] 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 […]

  2. February 5, 2018

    […] Further then, I tried to integrate it into Mobile app, so I embed it to Xamarin App with WebView method. […]

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

%d bloggers like this: