23Aug

Create a simple Chatbot App using Botframework & Xamarin.Forms

We can integrate Chatbot API with Xamarin.Forms App using two methods,

  1. Embed Code with Web View or
  2. Native with DirectLine.

In this blog, I shall explain how to integrate Chatbot using embed code with WebView which is simple.

To achieve this, we need to have below 3 things set up

  1. An Azure account
  2. Create Bot Services on azure (For this demo we are using QnA Maker)
  3. Create a Xamarin App

Firstly, let us build an interactive QnA bot with the Cognitive Services of Microsoft. The purpose of this bot is to answer questions based on predefined set of answers.

Steps:

  1. Login to https://www.qnamaker.ai/  and click on Create a knowledge base.

Image1

 

  1. By clicking on Create a QnA service you will be redirected to Azure portal, please fill in all the required details and create a resource.

Image2

  1. After creating a resource come back to QnA Maker and Connect your QnA service to your KB by selecting all the appropriate details and give a name to your KB.

Image3

 

  1. Provide a QnA page URL or upload a QnA sheet. In this example I am using Azure Support FAQs URL https://azure.microsoft.com/en-in/support/faq/. After providing the URL click on Create your KB.

Image4

 

  1. Once your KB is created, click on My Knowledge Bases tab, it should list all the questions and answers from QnA URL provided or from the document you uploaded, click on Save and Train.

Image5

 

  1. You can also test your bot by clicking on Test on top right corner. You may now ask some questions from the QnA to ensure it answers correctly.

Image6

 

  1. Now under the Publish tab click on Publish to finalize your KB.
  2. Make sure to take a note of these 3 info, QnAKnowledgeBaseIdQnAEndPointHostName and QnAAuthKey.

Image7

  1. Now in the Azure Portal, search for Web App Bot. By creating Web App Bot, we can link the bot to the knowledge base and provide the interactive chatbot services on your website, Skype, Cortana, mobile app and many other channels.

Image8

 

  1. Click on Web App Bot, fill in all the required details and create a Question and Answer Bot.

Image9

 

  1. Before testing the bot, configuration of a QnA bot is mandatory. To test your bot in Web Chat, you must set the Application Settings, using your Hostname, KBId and Authkey what you had noted down earlier while publishing the QnA.

Image10

 

  1. Now you can test the bot by clicking on Test in Web Chat. Bot will respond for all the questions from KB.

Image11

Now your Chatbot is up and running 😊

Finally, all you need to do is, create a Xamarin.Forms App and Page with a WebView.

Image12

 

The source for the WebView and the secret keys can be obtained under the Channels tab

Image13

 

After setting source to the WebView, make sure to set your page as the main page in App.cs file, so that bot WebView is up and running once the app is started.

public App()

{       

  InitializeComponent();

  MainPage = new NavigationPage(new AzureFAQBotPage());

}

Once you build and deploy the app to your device, you are all set to chat with the bot 😊

 

Image14

Related

WPC, Here We Come Again.

Canarys participated in the Microsoft Worldwide Partner Conference (8th and 12th July 2012) in Toron...

Read More >

Canarys has partnered with Openbravo a Spain based ERP solution provider

We are happy to announce our newly acquired partnership with Openbravo, Spain. Openbravo is the prov...

Read More >

Building Xamarin.Android application in C#

OverviewIn this article we’ll look at how to create, deploy, and run a Xamarin.Android applica...

Read More >

End to End Testing Using Visual Studio 2010. (Power of Visual Studio-Ultimate for Testing. )

Scenario:Usage of Manual Test case(MTM) to perform the Load Test using Visual Studio 2010.We call it...

Read More >

Webinar - The process of version migration from older versions of Navision to NAV 2013 R2

The process of version migration from older versions of Navision to NAV 2013 R2 Effectively planning...

Read More >

What are the different Credential Types and How to configure them in NAV 2013 / 2015?

Microsoft Dynamics NAV 2013 onwards there are no “Database Logins” supported. It means, ...

Read More >

Microsoft Azure : Running JAVA Web Application using template

We will create Java web app in Azure App Service by using the Azure portal. The Azure...

Read More >

Swift Mapping and Flat Mapping

In this blog post, I will introduce some of useful tips and techniques of using swift mapping and fl...

Read More >

Authorize access to VSTS REST APIs with OAuth 2.0

Visual Studio Team Services uses the OAuth 2.0 protocol to authorize your app for a user and generat...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Contact Us
  • *
  • *