En este tutorial voy a replicar lo mostrado por Microsoft para instalar y probar un Bot creado con Bot Framework y su sdk v4.
Con esta nueva versión, o revisión, se pasa a usar ASP .NET Core en lugar de ASP .NET Web. Anteriormente el proceso de instalación y uso pasaba por añadir una plantilla de Bot a Visual Studio y aunque ahora podemos seguir haciendo uso de plantilla, añadiéndola desde la pestaña Tools -> Extensions and Updates -> Bot Builder V4 SDK Template for Visual Studio, en este tutorial vamos a crear el Bot paso a paso añadiendo las clases necesarias a mano en un proyecto de cero. Pero…

Bot Framework

Logo de Bot Framework
figura 1. Logo de Bot Framework

¿Qué es un Bot o un ChatBot?
La palabra Bot es un acortamiento de Robot. En el caso usado en informática, un Bot, es un programa autónomo capaz de realizar una serie de tareas imitando el comportamiento humano. Esto ha llevado a la inclusión de machine learning o aprendizaje de la máquina para que el Bot mejore constantemente como con el uso de servicio cognitivos como LUIS, que analiza el texto que le metamos para interpretar a base de lo aprendido y responder en consecuencia lo más correcto y humano posible. Más adelante intentaré añadir algún tutorial y ejemplos de uso de esta herramienta o servicio entre otros. Pero no nos liemos, un ChatBot es por tanto, un Bot para chats como su nombre indica, usados de forma sencilla para moderar grupos en canales como Telegram o para juegos u otras funciones de respuesta automática para los usuarios. Microsoft, con Bot Framework va un paso más allá ofreciendo a través de la programación o reutilización de APIs de terceros, aumentar las opciones y funcionalidades de nuestro «amigo» para que sea más humano y realice funciones de todo tipo como podría ser comprar o vender productos, consultas turísticas, consulta de vuelos, climatología o aspectos más complejos que incluyan el análisis de video, fotografía o voz para comportarse completamente como si charlaras con una persona.

¿Donde puedo usar mi Bot?
Actualmente Bot Framework ofrece soporte para los canales de Telegram, Facebook Messenger, Skype y Skype for Business, Cortana, WebChat, E-mail, Slack, Direct-Line… En algunos casos hay que tener en cuenta ciertas limitaciones propias de cada framework posteriormente y sus implementaciones al momento de publicar (cada uno tiene sus medidas de seguridad y pasos de implementación, aparte de limitaciones en características directas de Bot Framework como ciertas Cards).

«Para todo lo necesario pondré los enlaces al final del artículo en su sección correspondiente.»


Contenido del artículo:

  • Software y archivos necesarios.
  • Creación del Bot.
  • Descarga y actualización de los Nugets necesarios.
  • Añadiendo la clase principal de nuestro Bot y editando Startup.cs
  • Probando nuestro Bot con el Bot emulator.
  • Conclusión.
  • Despliegue en Azure y próximos tutoriales.
  • Enlaces y referencias.

Software y archivos necesarios

Para poder seguir este tutorial necesitaremos lo siguiente:

  1. Visual Studio 2017 15.6.7 (cualquier versión)
  2. ASP.NET y web development
  3. Azure development
  4. .NET Core cross-platform development
  5. Bot Framework Emulator
  6. Acceso a internet para la descarga de Nugets y actualizaciones

Creación del Bot

Una vez tengamos instalado Visual Studio, vamos a crear nuestro Bot desde el mismo. Para ello lo abrimos y seguimos los siguientes pasos:

  1. Seleccionamos Choose File -> New -> Project
  2. En la ventana de nuevo proyecto, seleccionamos Visual C# -> Web -> ASP .NET Core Web Aplication (punto 1 y 2- figura 2)
  3. Ponemos un nombre al Bot, en nuestro caso BlogBotDemo y donde se creará (punto 3 – figura 2)
Ventana de nuevo proyecto
figura 2. Ventana de nuevo proyecto
  1. En la siguiente ventana seleccionamos Empty y No Authentication (figura 3)
Selección de plantilla de Core
figura 3. Selección de plantilla de Core
  1. Hacemos un Rebuild para que se creen todas las carpetas necesarias de manera limpia (figura 4, 5 y 6)
Rebuild
figura 4. Rebuild
Ejecución del Rebuild
figura 5. Ejecución del Rebuild
Creando archivos de proyecto
figura 6. Creando archivos de proyecto
Estructura del proyecto
figura 7. Estructura del proyecto
  1. En el Solution Explorer, sobre wwwroot pulsamos botón derecho del ratón y seleccionamos Add -> New Item (figura 8)
Añadiendo el nuevo Item
figura 8. Añadiendo el nuevo Item
  1. Seleccionamos Web -> HTML Page y le damos un nombre «default.html» (figura 9)
Añadimos default.html
figura 9. Añadimos default.html
  1. En el html que acabamos de crear, remplazamos todo su contenido por el siguiente:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Your Bot Name Here</title>
    </head>
    <body>
        <p>
            <p>Welcome to your Bot.</p>
            <p>You can access your bot locally via
            <pre><b>http://localhost:your port/api/messages</b></pre></p>
        </p>
    </body>
</html>
  • En Startup.cs borramos el código de la figura 10 y añadimos el de la figura 11 en la línea 28 como se indica en las imágenes.
Archivo Startup.cs y lineas a borrar
figura 10. Archivo Startup.cs y lineas a borrar
Lineas a añadir en Startup.cs
figura 11. Lineas a añadir en Startup.cs
  • Una vez realizados todos estos pasos, pulsaremos F5 o Build para probar si está todo correcto (figura 12) y cerramos todos los documentos para asegurarnos de que en el siguiente paso no quede algún archivo bloqueado por estar abierto.
Comprobación de que todo va bien al lanzar default.html

figura 12. Comprobación de que todo va bien al lanzar default.html
Cierre de todos los documentos
figura 13. Cierre de todos los documentos

Descarga y actualización de los Nugets necesarios

  1. En el Solution Explorer, sobre la solución (no el proyecto), botón derecho del ratón y Manage NuGet Packages for Solution. (figura 14)
Manage Nuget packages
figura 14. Manage Nuget packages
  1. Seleccionamos como en la figura 15, Updates, marcamos Microsoft.AspNetCore.All y desmarcamos Include prerelease y pulsamos Update
Actualización de Nuget
figura 15. Actualización de Nuget
  1. Una vez instalado, marcamos include prerelease y Browse para buscar Microsoft.Bot.Builder.Integration.AspNet.Core y como en la figura 16 marcamos nuestro proyecto e instalamos y hacemos un nuevo Rebuild
Descarga de Nuget Bot Builder
figura 16. Descarga de Nuget Bot Builder
Rebuild
figura 17. Rebuild

Añadiendo la clase principal de nuestro Bot y editando Startup.cs

Ahora que ya tenemos nuestra base configurada y el Nuget instaaldo y actualziado, procedemos al paso real en el que nuestro proyecto web pasa a ser un autentico Bot modificando el archivo Startup.cs.

  • En el Solution Explorer, sobre el proyecto pulsamos botón derecho del ratón y añadimos una clase nueva con Add Class.
  • Le ponemos a nuestra clase un nombre, en este caso el mismo del proyecto, BlogBotDemo
  • Abrimos la clase y remplazamos los using por los siguientes:
    using Microsoft.Bot;
    using Microsoft.Bot.Builder;
    using Microsoft.Bot.Schema;
    using System.Threading.Tasks;
  • Cambiamos la clase para que herede de IBot e implemente una interfaz como se muestra a continuación:
    public class BlogBotDemo : IBot
    {
        public Task OnTurn(ITurnContext turnContext)
        {
        throw new System.NotImplementedException();
        }
    }
  • Abrimos el archivo Startup.cs y remplazamos los using existentes por los siguientes:
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Bot.Builder.BotFramework;
    using Microsoft.Bot.Builder.Integration.AspNet.Core;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
  • Añadimos en el mismo archivo el siguiente campo privado a continuación de los using:
    private IConfiguration configuration;
  • Bajo el campo que acabamos de añadir creamos el siguiente constructor de la clase:
    public Startup(IHostingEnvironment env)
    {
        var builder = new ConfigurationBuilder()
        .SetBasePath(env.ContentRootPath)
        .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
        .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
        .AddEnvironmentVariables();
        configuration = builder.Build();
    }
  • Dentro del método ConfigureServices añadimos el siguiente código:
    services.AddSingleton(configuration);
    services.AddBot(options =>
    {
        options.CredentialProvider = new ConfigurationCredentialProvider(configuration);
    });
  • En el método Configure, añadir las siguientes lineas tras el código existente:
    app.UseStaticFiles():
    app.UseBotFramework();
La clase Startup.cs modificada.
figura 18. La clase Startup.cs modificada.
  • En la clase del Bot, editamos el método OnTurn para hacerlo async con el siguiente cambio:
    public async Task OnTurn(ITurnContext turnContext)
  • Y en el cuerpo del método añadimos las siguientes líneas:
    if (turnContext.Activity.Type is ActivityTypes.Message)
    {
        string userInput = turnContext.Activity.Text;
        await turnContext.SendActivity($"El texto que has escrito es {userInput}");
    }
  • Hacemos un último Rebuild y si todo ha ido bien pasaremos a probarlo en el emulador.
Clase BlogBotDemo tras realizar los cambios.
figura 19. Clase BlogBotDemo tras realizar los cambios.

Probando nuestro Bot con el Bot emulator

Ahora ya tenemos creado nuestro Bot de prueba, pero no lo hemos visto funcionando. Para ello tenemos un emulador de Bots donde crear un acceso a nuestra creación.
Para poder conectar el emulador con nuestro Bot tenemos que conocer la dirección local y el puerto por el que accederemos a el.
Una forma sencilla de obtener estos datos es pulsando botón derecho del ratón sobre el proyecto y seleccionando propiedades. Entonces veremos la figura 20 en donde pulsaremos en Debug y podremos ver el App url. Lo copiamos o anotamos y pasamos al siguiente paso. En este caso en mi ordenador es http://localhost:62465
Otra forma de ver la dirección es ejecutar el Bot y en la ventana del navegador que se abre, nos sale la misma url que atacaremos.

Ventana de Propiedaes y Debug con dirección del Bot
figura 20. Ventana de Propiedaes y Debug con dirección del Bot

Al abrir el emulador, nos ofrece abrir un Bot existente, pero nosotros pulsaremos en File -> New Bot y rellenaremos los datos como en la figura 21 poniendo el nombre de nuestro Bot, BlogBotDemo, la url a la que añadiremos el controller al que atacamos quedando como http://localhost:62465/api/messages y si lo tuviéramos ya registrado, podríamos poner las credenciales debajo, pero por ahora este paso lo saltaremos.

Configuración de nuevo Bot
figura 21. Configuración de nuevo Bot

Con esto ya tendríamos el emulador preparado para cargar nuestro Bot. Si no lo habíamos hecho antes, pulsamos F5 en Visual Studio para que el Bot se ejecute y finalmente en el emulador, save and connect.

Emulador ejecutando nuestro Bot
figura 22. Emulador ejecutando nuestro Bot

El resultado de todo esto, nuestro Bot respondiendo al texto que pongamos. En el ejemplo le saludamos con un Hola y el nos responde que hemos escrito Hola.


Conclusión

Pues ya tenemos nuestro Bot respondiendo! ¿No ha sido tan difícil no? No nos engañemos, esto es solo el principio de un mundo que esta empezando y no dejará de crecer y más con la importancia y relevancia que está teniendo la IA o inteligencia artificial y el machine learning. Seguro que si os digo que vamos pareciéndonos cada vez más al futuro de Terminator con su Skynet os parecerá exagerado, ¿no?. Sin embargo ya tenemos asistentes como Cortana, Alexa, Siri o Google que poco a poco van reconociendo más detalles humanos y actuando como tales.
Microsoft entre sus muchos servicios cognitivos tiene varios de reconocimiento de audio, de visión (no video, sino lo que ve en tiempo real), de texto e incluso de sentimientos. Actualmente por la forma en que nos expresamos y los gestos de nuestra cara, podemos deducir con un porcentaje alto de aciertos el estado sentimental de la persona, triste, alegre, enfadado… Como os digo, esto es solo el principio.


Despliegue en Azure y próximos tutoriales

Nuestro Bot está funcionando y para hacer pruebas o mostrárselo a nuestros amigos o familiares está bien. ¿Pero y si queremos ir un poco más allá? ¿Que tal probar en Telegram y que cualquiera pueda ver nuestro pequeño proyecto?
Próximamente haré un pequeño tutorial con los pasos necesarios para desplegar nuestro Bot en Azure y con ello en el canal de nuestra elección.
Además, probaremos otros servicios interesantes de usar con nuestros Bots como LUIS (Language Understanding Intelligent Service), QnAMaker para Bots sencillos de tipo faq con el que responder directamente a una serie de preguntas predeterminadas y alguna que otra cosilla que vaya surgiendo o parezca interesante.


Enlaces y referencias

Los siguiente enlaces son de las páginas consultadas para realizar este tutorial o fuentes de información útil o de descargas necesarias para el mismo:


Y sin más me despido, espero que os haya gustado. Si tenéis alguna duda dejadla en los comentarios e intentaré resolverla.
Muchas gracias por leerme y nos vemos en próximos tutoriales.
Un saludo 👍

Si te ha gustado y aún no lo has hecho, puedes suscribirte al blog por correo o siguiéndome en Twitter y así te avisaré con cada nuevo artículo o tutorial para que estés al día.


2 commentarios

enrique hernandez rojas · 23 abril, 2019 a las 4:01 pm

Excelente tutorial,
Saludos

    neodreamer · 23 abril, 2019 a las 4:15 pm

    Gracias, pero cuidado que desde que lo publiqué han cambiado cosas. Desde que pueda subo una actualización con algunos cambios 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: