My First Bot with Microsoft Bot Framework in .NET and Xamarin

As developers we always try to find the easiest way to solve problems. This time, I'm glad to introduce you an easy way to create your own Bot in just minutes, from your local computer to the cloud. But that's not enough, we will take one step further and connect our Bot with Xamarin, we'll see how easy is to get started.

Microsoft Bot Framework

So, before we start we need to download a few things:

0. Requirements

  1. Download the template for Visual Studio here. By having this template you'll avoid having to install the Nuget Packages and some initial code.
  2. To install the template, you need to copy the zip file (do not extract it) to your Visual Studio Templates folder, in my case is: C:\Users\Christian\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C# ... Just replace "Christian" with your user.
  3. Download and Install the Bot Framework Emulator here
  4. Azure account to publish the bot (it could be anywhere, but it's easier here)

1. Create the Bot

Visual Studio Template

Let's create the bot by following this steps:

[Serializable]
public class ComputerOrder
{

}
public enum Memory
{
    _4GB,
    _8GB,
    _16GB
}
public Memory? MemoryOption { get; set; }
[Serializable]
public class ComputerOrder
{
    public Memory? MemoryOption { get; set; }

    public static IForm<ComputerOrder> BuildForm()
    {
        return new FormBuilder<ComputerOrder>()
            .Message("Welcome to the Computer Sale Bot!")
            .Message("With my help you can build your custom computer, just choose an option or type the number that you wish.")
            .Build();
    }
}
using Microsoft.Bot.Builder.FormFlow;
using Microsoft.Bot.Connector;
using ComputerSaleBot.Orders;
internal static IDialog<ComputerOrder> MakeRootDialog()
{
    return Chain.From(() => FormDialog.FromForm(ComputerOrder.BuildForm));
}
await Conversation.SendAsync(activity, () => new Dialogs.RootDialog());
await Conversation.SendAsync(activity, MakeRootDialog);

Bot Framework Emulator

2. Publish the Bot

It doesn't matter if you didn't add more "questions", you're ready to publish the bot now. I'm going to use Azure to ease this task and this time I'll publish directly from Visual Studio but this is just to get started quickly, I don't recommend keeping it this way, instead we should configure an automated pipeline using tools like Jenkins or Team Services. So, for now you can follow these steps:

  1. Right click in the Web project and click "Publish"
  2. Choose "Microsoft Azure App Service" and "Create New"
  3. Fill in the blanks (API App Name, Subscription, Resource Group and App Service Plan)
  4. When choosing an App Service Plan you can create a new one and choose the Free option (I did it)
  5. Click Create and wait some time, when finished VS will launch the API in the browser

VS Publish Bot with Azure


VS Publish Bot with Azure - Free


3. Register the Bot

You need to register your Bot so you can easily add more integrations and focus the Bot only. So for this you just need to go to: https://bots.botframework.com, sign in with your account and then:

4. Integrate with Xamarin

The way we're going to integrate the Bot with our Xamarin App is by using the Direct Line channel, this is a REST API that uses standard secret/token authentication, if you're interesting in knowing more go the docs here. This time, I'll give you an app where you just need to change the secret/token, you can go deeper by reading the code and extending it (I might write an article later). The idea here is to get your hands dirty as soon as possible and demonstrate how easy is to get started. So, follow these steps:

Direct Line icon

This is what you should see when the app is running ...

Xamarin App Bot running

Reference Links

  1. Bot source code: https://github.com/christianhxc/BotVentaDeComputadoras
  2. Xamarin app source code: https://github.com/christianhxc/XamarinFormsBot
  3. Slides (Spanish): https://www.slideshare.net/christianhxc/mi-primer-bot-bot-framework-xamarin
  4. Samples: https://github.com/Microsoft/BotBuilder-Samples
  5. Recorded workshop (Spanish): https://www.youtube.com/watch?v=v6fgn8GB5KY

This is my own version, the original content is from: @HJaimesDev and @JorgeCupi

I gave this talk as a workshop for the Xamarin Fest in Guatemala City, you can take a look to another great talk on how to integrate Custom Vision with Xamarin by Guillermo Zepeda @cloudzepeda in this [link]

Summary

I hope you have enjoyed this article and experienced by yourself how easy is to get started with the Bot Framework and not just that, connect it with your Xamarin App. This is just a jumpstart, I didn't do a deep dive on each section because the intention was to get you started fast (yes, I've said that so many times lol). If you'd like to do everything that I did here (with you hopefully) you can follow me in the Youtube video I put in the reference links, that's the video of my talk I mentioned, so even if you don't speak Spanish you can see how all steps connect in case you missed something or I didn't explain myself well enough ;)