Tres buenos amigos: Bot Framework SDK v4, LUIS y Xamarin (Parte 2)

Esta publicación es parte del Mes Xamarin, una iniciativa liderada por Luis Matos. Revisa ésta y muchas más publicaciones interesantes relacionadas con Xamarin publicadas por y para miembros de la comunidad. ¿Quieres ser parte de esta iniciativa apoyando con una publicación en tu blog? ¡Aún hay lugares disponibles! Da clic en el enlace anterior para más información al respecto. 

¡Hola! Bienvenido a la segunda parte de la serie Tres buenos amigos: Bot Framework SDK v4, LUIS y Xamarin. En la Parte 1 (disponible aquí) diseñamos una app de LUIS capaz de interpretar intenciones del usuario (quiero conocer el clima) y detectar entidades (una ciudad o ubicación).

Parte 2. Creación del bot con Bot Framework SDK v4

El día de hoy vamos a construir el backend del bot que interactuará con el usuario. Lo haremos utilizando Bot Framework SDK v4, que es la versión más actualizada al momento del framework. El año pasado escribí una publicación sobre la versión 3. Para diseñar y probar el bot, hay que instalar 2 componentes: el template y el emulador. ¡Manos a la obra!

(Por cierto, el código fuente final está disponible en mi repositorio de GitHub. La idea es que primero intentes realizar estos pasos por tu cuenta y tomes mi código como una guía o para comparar en caso de que te aparezca un error).

Paso 1. Descarga e instala el Bot Builder V4 SDK Template para Visual Studio desde este enlace.

Paso 2. Ahora accede al siguiente enlace para descargar e instalar el Bot Framework Emulator.

Paso 3a. Como paso adicional y para añadir funcionalidad a nuestro bot, vamos a crear una cuenta gratuita en el sitio de OpenWeatherMap para acceder a su API y consultar información del clima de una ciudad. Ingresa al sitio.

Paso 3b. Da clic en el menú API y luego suscríbete al servicio Current weather data.

Paso 3c. Selecciona el esquema gratuito dando clic en el botón Get API key and Start.

Paso 3d. Una vez que valides tu cuenta, inicia sesión y en la sección API Keys podrás acceder a tu clave. Cópiala, porque la usaremos en el código de nuestra aplicación.

Paso 4. Abre Visual Studio 2017 y crea un nuevo proyecto de tipo EchoBot (lo encuentras en la categoría BotFramework, la cual apareció después de instalar el template). El nombre del proyecto es WeatherBotv4.

Paso 5. Una vez creado el proyecto, da clic en Build Solution para descargar los paquetes Nuget requeridos por la plantilla y verificar que se instaló sin errores.

Paso 6. Instala el paquete Nuget Microsoft.Bot.Builder.AI.Luis en el proyecto (botón derecho sobre el proyecto en el explorador de soluciones –> Manage Nuget packages…)

Paso 6b. Si te aparece un mensaje de error al instalar el paquete (por incompatibilidad de las versiones) actualiza Bot Framework. Es muy fácil, sólo accede a la pantalla Updates (en el Package Manager del proyecto) y actualiza a la misma versión del paquete Microsoft.Bot.Builder.AI.Luis. Una vez actualizado, intenta instalar dicho paquete nuevamente y deberías poder hacerlo sin problemas.

Paso 7. Crea 3 carpetas en el proyecto: Helpers, Models y Services.

Paso 8. Ahora viene lo bueno, el código. En la carpeta Helpers crea la clase Constants con el siguiente código.

Además:

• LuisEntities es un elemento propio de la cadena json obtenida al consultar el servicio de LUIS (creado en la parte 1)
• Location y Location_PatternAny hacen referencia a las entidades creadas en el servicio de LUIS (parte 1).
• OpenWeatherMapURL es, por supuesto, la dirección URL del API de OpenWeatherMap.
• OpenWeatherMapKey es la llave de acceso requerida por el API de OpenWeatherMap, por lo que tienes que asignar el valor correspondiente (es la clave obtenida en el paso 3d)

Paso 9. A continuación, crea la clase LuisParser en la misma carpeta Helpers; su código es el siguiente.

Básicamente, este código procesa la cadena json que el servicio de LUIS envía como respuesta a una petición y se trata de buscar si el usuario indicó una ciudad (ubicación).

Paso 10. En la carpeta Models crea el archivo WeatherModel.cs, que contiene la definición de clases (modelos) retornados al hacer una petición al API de OpenWeatherMap. La información se retorna en formato JSON, por lo que más adelante utilizaremos Newtonsoft.Json para deserializar la respuesta.

Paso 11. En la carpeta Services crea la clase WeatherService, la cual lanza una petición al servicio de OpenWeatherMap una vez obtenida la ubicación indicada por el usuario. Como puedes ver, es un código muy sencillo, una simple petición de tipo GET a la URL. Además, se procesa la temperatura para convertirla a grados centígrados, pues de acuerdo a la documentación, esta información se retorna en grados Kelvin.

Paso 12. Ahora abre el archivo WeatherBotv4Bot.bot (es un archivo en formato json) y actualizalo agregando una nueva entrada de configuración con el nombre (name) WeatherBotv4Bot de tipo (type) luis y con el resto de propiedades indicadas a continuación:

• En lugar de luis-application-id coloca el Application Id obtenido en el paso 23 de la Parte 1 de esta serie.
• Así mismo, en el paso 24 obtuviste una Authoring Key del proyecto. Ése es el valor que debes colocar (dos veces) en donde dice authoring-key (es decir, se ocupa tanto para el authoringKey como para el subscriptionKey).
• Finalmente, reemplaza westus por la región que corresponda (mismo paso 24).

Paso 13. Regresando a la carpeta Services, ahora crea la clase BotService, la cual tiene el siguiente código:

Básicamente, busca si el servicio luis existe en el archivo de configuración y crea un reconocedor (recognizer) a partir de la información (id, llaves de autorización) contenida en dicho archivo.

Paso 14. El siguiente paso es modificar el archivo Startup.cs (se han removido los comentarios):

Las modificaciones consistieron en reorganizar el código del método ConfigureServices para añadir el patrón Singleton (una única instancia) hacia el objeto botConfig (que, por supuesto, contiene la configuración esencial del bot a partir del archivo de configuración).

Paso 15. La última modificación en código es del archivo WeatherBotv4Bot.cs:

Se modificó el método OnTurnAsync para interactuar con el usuario. Primero se manda un mensaje de bienvenida con el método SendWelcomeMessageAsync y a continuación el bot se establece en modo escucha para interceptar mensajes del usuario; si se envía un mensaje que puede interpretar, se emite una respuesta:

• Se simula que el bot está “escribiendo/pensando” gracias al Activity typing que es de tipo ITypingActivity y se mostrará con una animación de 5 segundos (delay)
• Se consulta al servicio WeatherService para obtener el clima de la ubicación indicada por el usuario.
• Se envía la respuesta en otra Activity a manera de mensaje.
• Se agradece al usuario por utilizar el servicio.

Paso 16. ¡Ya solo nos resta probar el servicio! Compila y ejecuta este proyecto.

Paso 17a. Abre el Bot Framework Emulator y da clic en el botón Open Bot.

Paso 17b. Localiza el archivo WeatherBot.bot que corresponde al proyecto que estamos trabajando en Visual Studio 2017.

Observa cómo el bot envía el mensaje de bienvenida.

Paso 17c. Introduce un mensaje válido, por ejemplo “what is the current weather in Zlin” o en tu ciudad por ejemplo. Al momento de enviar el mensaje, se hace una consulta al servicio de LUIS y, si es exitosa (como debería ser), observa que aparece el Activity de typing (tres puntos suspensivos animados) durante 5 segundos.

Mientras tanto, también se está consultando al servicio de OpenWeatherMap para consultar el clima de la ciudad detectada. Una vez obtenida la respuesta, se le presenta al usuario a través de un mensaje y agradeciendo por el uso del servicio.

Recuerda que puedes descargar el código fuente desde mi repositorio de GitHub. ¿Qué tal te fue? ¿Pudiste lograrlo? Espero que sí, y en caso de que hayas obtenido un error házmelo saber en los comentarios y le damos seguimiento.

¡Y eso es todo de momento! Hasta aquí vamos a dejar de momento esta entrada. En la próxima publicación,  publicaremos nuestro Bot en Azure para que sea accesible desde varios canales: Facebook Messenger por ejemplo, y una aplicación propia (desarrollada en Xamarin).

¡Espero que esta publicación haya sido de interés para tí!

Agradezco tu visita al blog. Si la publicación fue útil, no olvides compartirla en tus redes sociales.

¡Hasta la próxima!

Luis