How to use Bot Service in Xamarin.Forms project (WebView version)

Background

Nowaways Microsoft focuses on the Azure products especially in the AI area. This article is to demonstrate how to migrate Bot Framework into Xamarin.

The reason why I wrote this article is simple. I support Xamarin product in MS, and I’d love to learn the technology for Bot. After this article, I will write different topics also, such as how to migrate Azure Cognitive Service to Xamarin, etc.

Technical Skills

Xamarin (WebView)

Bot Framework (Web Chat)

What you need to know

You should have some basic knowledge on Xamarin and Bot Framework to read this article. This article will demonstrate how to migrate a Web App Bot into Xamarin application. Since it’s a web app bot, so it’s possible to use it directly in the WebView.

There will be one more artile regarding how to use Direct Line Service as the channel to communicate between Bot and Xamarin. In that case, the channel of the Bot will be Direct Line.

Since the token is got via a GET Web Request, so the token is unique and random, which cause the URl will also be unique. So the best pro for this approach is: other people will not be able to get the URL and use your Bot Framework to their own applications.

Cons:

The process is more complicated. And since needs to use a web request to get the token, so there might be more time-cost for this approach to render the WebView than directly use the secret key.

Notice that I used the `Application.Current.Properties` to store the token. In that case, if the user happened to go back to the previous page, we will not need to get the token again until the token expires.

Now we create a new page (ContentPage) called BotWebView. There is only one WebView element in that page. Code as below:

Notice that we did not assign the value to the `Source` attribute. This is due to the URL will be generated in the backend code.

Now in the code behind source code file, we need to re-define one constructor for this page. First we need to get the value of the token which will be pushed by the MainPage. The other thing is that we will directly assign the URL to WebView.Source. Code as below:

After these steps, the demo should be working now. But there is a small bug there, which is the WebView will not be resized when click on the Input textbox in the Bot WebView under Android. This is unreasonable, but it’s true and it’s by-design.

To fix this, we need to add below code to the constructor of the App function under App.xaml.cs file. Code as below:

Additional Content

There will be some potential issue with this demo. Based on my testing, this approach will work better in normal website’s iframe element. But if we used it on mobile app, after several times switching back to previous pages, there will be some issue that the bot will stuck and not work anymore.

But there is advantage for this approach is that this is really very easy to implement and you don’t need to have so much experience in developing Xamarin application.

If you do not have time to learn and you want to have a simple bot working on your mobile app, use this method!