Mi primer Bot con Microsoft Bot Framework en .NET y Xamarin

Los desarrolladores siempre tratamos de encontrar la manera más fácil de resolver problemas. Esta vez, me complace presentarles una manera fácil de crear su propio Bot en cuestión de minutos, desde su computadora local hasta la nube. Pero eso no es suficiente, daremos un paso más y conectaremos nuestro Bot con Xamarin, veremos lo fácil que es empezar.

Entonces, antes de comenzar necesitamos descargar algunas cosas:

0. Requerimientos

1. Descarga la plantilla para Visual Studio aquí. Al tener esta plantilla evitarás tener que instalar los Nuget Packages y tener un código inicial.
2. Para instalar la plantilla, necesitas copiar el archivo zip (no lo extraigas) a tu carpeta de plantillas de Visual Studio, en mi caso es: C:\Users\Christian\Documents\Visual Studio 2017\Templates\ProjectTemplates\Visual C# ... Solamente tienes que cambiar "Christian" con tu usuario.
3. Descarga e instala el emulador del Bot Framework aquí
4. Cuenta en Azure para publicar el Bot (que podría ser en cualquier lugar, pero es más fácil aquí)

1. Crear el Bot

Vamos a crear el Bot siguiendo estos pasos:

• Abrir VS y dentro de Visual C# verás el proyecto Bot Application (si has movido el archivo zip con VS abierto, debes cerrarlo y abrirlo de nuevo), haz clic y luego OK
• Crea una nueva carpeta en el proyecto llamado Ordenes o elege un nombre diferente, no importa
• Dentro de esta nueva carpeta, crea una nueva clase llamada OrdenDeComputadora, aquí es donde vamos a definir las preguntas del Bot y las opciones. En este caso estamos eligiendo una manera fácil de crear una conversación guiada usando un diálogo FormFlow, es como si estuviéramos creando un formulario usando propiedades en la clase, soporta algunos tipos básicos y en nuestro caso, utilizaremos sólo el tipo Enumeración, puedes encontrar más información en la documentacion aquí.
• Agrega el atributo [Serializable] a la clase OrdenDeComputadora (si no, el mensaje no se serializará al enviarlo a la API)

[Serializable]
public class OrdenDeComputadora
{

}

• Vamos a crear nuestra primera pregunta mediante la creación de un enum como este (crealo en el mismo namespace o en un archivo separado, sólo asegúrate de hacer referencia a él):

public enum Memoria
{
    _4GB,
    _8GB,
    _16GB
}

• En la clase OrdenDeComputadora añade una nueva propiedad llamada OpcionDeMemoria del tipoMemoria (el enum que acabas de crear). El nombre de la clase debe estar en CamelCase para tener una pregunta más legible, en este caso la pregunta será 'Por favor seleccione una Opcion De Memoria`.

public Memoria? OpcionDeMemoria { get; set; }

• Ahora, un aspecto importante de un Bot es que necesita ser presentado con un mensaje, para hacerlo agregamos dentro del método BuildForm de la clase OrdenDeComputadora. Debería de verse así:

[Serializable]
public class OrdenDeComputadora
{
    public Memory? OpcionDeMemoria { get; set; }

    public static IForm<OrdenDeComputadora> BuildForm()
    {
        return new FormBuilder<OrdenDeComputadora>()
            .Message("Bienvenido al Bot de Venta de Computadoras!")
            .Message("Con mi ayuda puedes armar tu computadora, solo elige una option o escribe el numero que deseas.")
            .Build();
    }
}

• Vuelve a la Controller en el proyecto y en el MessagesController necesitas agregar las referencias para el usar el diálogo FormFlow, Bot Connector y la clase que incluye todas las preguntas:

using Microsoft.Bot.Builder.FormFlow;
using Microsoft.Bot.Connector;
using BotVentaDeComputadoras.Ordenes;

• Dentro del Controlador, crea el método que generará el diálogo para el Bot:

internal static IDialog<OrdenDeComputadora> MakeRootDialog()
{
    return Chain.From(() => FormDialog.FromForm(OrdenDeComputadora.BuildForm));
}

• Dentro de la acción Post del Controlador, encontrarás algo como esto:

await Conversation.SendAsync(activity, () => new Dialogs.RootDialog());

• Debes reemplazarlo por lo siguiente:

await Conversation.SendAsync(activity, MakeRootDialog);

• Prueba tu Bot lanzando el sitio web localmente (como usualmente lanzas aplicaciones de sitios web locales)
• Abre el emulador del Bot Framework y pega la URL que VS acaba de lanzar y agrega la ruta del controlador /api/messages, algo así como http://localhost:3979/api/messages

• En un mundo real, sólo una pregunta no es suficiente, por lo que puedes seguir agregando más enums y propiedades a la clase y el Bot tendrá más preguntas que hacer al usuario.

2. Publica el Bot

No importa si no agregaste más "preguntas", ya estás listo para publicar el bot. Voy a utilizar Azure para facilitar esta tarea y esta vez voy a publicar directamente desde Visual Studio, pero esto es sólo para empezar rápidamente, no recomiendo quedarse asi, en su lugar debemos configurar un pipeline automatizado utilizando herramientas como Jenkins o Team Services. Por lo tanto, por ahora puedes seguir estos pasos:

1. Haz clic derecho en el proyecto Web y luego clic en "Publish"
2. Elige "Microsoft Azure App Service" y "Create New"
3. Llena los espacios en blanco (nombre de la aplicación de la API, suscripción, grupo de recursos y el App Service Plan)
4. Al elegir un App Service Plan puedes crear uno nuevo y elegir la opción Free (yo lo hice)
5. Haz clic en Create y espera un poco de tiempo, cuando termine VS lanzará la API en el navegador

3. Registrar el Bot

Necesitas registrar tu Bot para que puedas agregar fácilmente más integraciones y enfocarte sólo en el Bot. Así que para esto solo tienes que ir a: https://bots.botframework.com, inicia sesión con tu cuenta y luego:

• Haz clic en el botón "Crete a bot"
• Lanzará una nueva página, haz clic en el botón "Register"
• Completa los espacios en blanco con todos los detalles de perfil de tu Bot
• En la sección de configuración, debes colocar la URL del Bot (el que hemos publicado en Azure) utilizando HTTPS, por ejemplo: https://computersalebot20170731064536.azurewebsites.net/api/messages
• Haz clic en el botón "Create Microsoft App ID and password" para generar las claves, copia estos valores generados temporalmente porque los usaremos para conectar nuestra aplicación Xamarin con el Bot.
• Acepta las condiciones de uso (obviamente)
• Haz clic en "Register"
• Ahora, esto es muy importante, para que esto funcione necesitas publicar el Webapi de nuevo pero con las claves generadas que acabas de copiar al registrar el Bot. Para ello, ve al archivo Web.config del proyecto y llena todos los espacios en blanco de la sección appSettings: BotId, MicrosoftAppId y MicrosoftAppPassword.
• Publicar de nuevo y listo
• Puedes ir a la página donde has registrado el Bot y probarlo, lanzará el mismo simulador que lanzaste localmente pero en el navegador, haz esto solo para asegurarte de que el Bot está bien configurado

4. Integrar con Xamarin

La forma en que vamos a integrar el Bot con nuestra aplicación Xamarin es mediante la integracion Direct Line, esta es una API REST que utiliza la autenticación estándar de claves/token, si estás interesado en saber más puees ir a la documentacion aquí. Esta vez, yo te daré una aplicación donde solo necesitas cambiar la llave del Bot, puedes profundizar leyendo el código y extendiéndolo (podría escribir un artículo despues). La idea aquí es ensuciarte las manos lo antes posible y demostrarte lo fácil que es empezar. Por lo tanto, sige estos pasos:

• Ve a la página de tus Bots en https://dev.botframework.com/bots
• Haz clic en el nombre del bot que acabas de crear
• En la sección "Add a channel", haz clic en el icono de Direct Line

• Haz clic en el botón "+ Add new site" y ponle un nombre, luego haz clic en "Done"
• Las claves generadas son las que vamos a usar para conectar la aplicación Xamarin con el Bot
• Haz clic en el enlace "Show" y copia el valor
• Haz clic en el botón "Done" en la parte inferior izquierda de la página
• Ahora es hora de descargar el código de ejemplo, para esto debes ir aquí y clonar/descargarlo
• Ir al archivo MainPageViewModel.cs, en donde dice "botSecret" (línea # 88) sustituye el texto "SecretKey" por el que acabas de copiar al crear el canal Direct Line
• Y eso es todo, inicia el simulador en tu computadora (o publica directamente a un dispositivo) y empieza a hablar con tu Bot

Esto es lo que debes ver cuando se ejecuta la aplicación ...

Enlaces de Referencia

1. Codigo fuente del Bot: https://github.com/christianhxc/BotVentaDeComputadoras
2. Codigo fuente del app en Xamarin: https://github.com/christianhxc/XamarinFormsBot
3. Presentacion: https://www.slideshare.net/christianhxc/mi-primer-bot-bot-framework-xamarin
4. Ejemplos: https://github.com/Microsoft/BotBuilder-Samples
5. Video del Taller 'Mi Primer Bot': https://www.youtube.com/watch?v=v6fgn8GB5KY

Esta es mi propia versión, el contenido original es de: @HJaimesDev y @JorgeCupi

Yo he dado esta charla como un taller para el Xamarin Fest en la Ciudad de Guatemala, puedes echar un vistazo a otra gran charla sobre cómo integrar Custom Vision con Xamarin de Guillermo Zepeda @cloudzepeda en este [link]

Resumen

Espero que hayas disfrutado de este artículo y experimentado por ti mismo lo fácil que es empezar con el Bot Framework y no sólo eso, conectarlo con tu aplicación Xamarin. Esto es sólo un jumpstart, no hice un deep dive en cada sección porque la intención era lograr comenzar rápido (sí, lo he escrito tantas veces lol). Si quieres hacer todo lo que hice aquí puedes seguirme en el video de Youtube que puse en los enlaces de referencia, ese es el video de mi charla que mencioné, así que si algo me falto o no me logre explicar bien entonces puedes usar el video como referencia tambien (me disculpo de antemano por los errores que cometi, los nervios traicionan siempre lol)