Tres buenos amigos: Bot Framework SDK v4, LUIS y Xamarin (Parte 4)
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 cuarta y última 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). En la Parte 2 (disponible aquí) creamos el backend del bot que interactúa con el usuario utilizando Bot Framework. El resultado fue una aplicación web que recibe mensajes del usuario y emite una respuesta. Después, en la Parte 3 (disponible aquí) configuramos el proyecto para publicarlo en Azure, donde estará procesando mensajes para enviar mensajes en respuesta a la conversación iniciada por los usuarios de alguna aplicación.
Parte 4. Uso de canales y aplicación móvil en Xamarin
El día de hoy vamos a conectar el bot en Azure a un canal para su posterior implementación en una app móvil de Xamarin. El código fuente de esta entrada está disponible en mi repositorio de GitHub. ¡Comenzamos!
Paso 1. Accede al Web App Bot creado en la parte anterior (WeatherBotv4). Da clic en Channels y selecciona DirectLine en la lista de canales destacados que puedes agregar. Este canal nos ayudará a hacer las peticiones desde Azure mediante un REST API.
Paso 2. Configura Direct Line, simplemente da clic en Mostrar la clave secreta del servicio, cópiala y luego en Listo.
Paso 3. Ahora vamos a Visual Studio. Crea un nuevo proyecto de tipo Mobile app (Xamarin.Forms) llamado WeatherBotv4App.
Paso 4. Selecciona la estrategia de código compartido .NET Standard, así como Xamarin.Forms para nuestra tecnología de interfaz de usuario. Elige las plataformas que deseas soportar.
Paso 5. Una vez creado el proyecto, da clic derecho sobre la solución y selecciona Administrar paquetes Nuget para la solución.
Paso 6. Agrega en primer lugar el paquete Microsoft.Bot.Connector.DirectLine en todos los proyectos de tu aplicación.
Paso 7. El segundo paquete a instalar es Microsoft.Rest.ClientRuntime
Paso 8. Crea las siguientes carpetas en el proyecto WeatherBotv4App:
Paso 9. En la carpeta Helpers, agrega la clase Constants, con el código mostrado a continuación. Hay 3 constantes: el nombre del bot, el secret de Direct Line (obtenido en el paso 2) y el nombre del usuario de la app móvil:
Paso 11. En la carpeta Converters agrega la clase UserAlignmentConverter, que se utilizará para alinear el texto dentro de la conversación: los mensajes del usuario estarán alineados a la derecha, mientras que los del bot a la izquierda (tal como aparece en muchas aplicaciones populares de mensajería). El código se muestra a continuación:
Paso 12. A continuación, crea la clase DirectLineService dentro de la carpeta Services, la cual maneja la comunicación directamente en el canal creado desde el portal de Azure. Explicación:
- El constructor inicializa los elementos requeridos por el servicio (cuenta y cliente) y abre un canal de conversación.
- El método SendMessage prepara un Activity (que contiene el mensaje) y lo envía a la conversación.
- El método GetMessages se ejecuta cada 3 segundos y escucha el canal por nuevos elementos para actualizar la colección de mensajes dentro de la conversación.
Paso 13. A continuación crea la clase BaseViewModel dentro de la carpeta ViewModels; simplemente es una base que utilizaremos para simplificar el ViewModel de la página de conversación:
Paso 14. En la misma carpeta, crea la clase ConversationViewModel, que hereda de BaseViewModel y contiene varios elementos:
- Una instancia del DirectLineService
- Una colección observable de Messages.
- Una propiedad de tipo string llamada Query (es el texto enviado por el usuario al bot)
- Un ICommand llamado SendQueryCommand que será utilizado por un botón para ejecutar enviar el mensaje del usuario a través del método SendMessage del DirectLineService a través de la función local SendMessage, que actualiza la colección de mensajes a su vez.
- El método StartConversation que llama al método GetMessages del DirectLineService.
Paso 15. Ahora procedemos a crear la interfaz de usuario. En la carpeta Views agrega un ContentPage llamado BotView. El código XAML se muestra a continuación y contiene una interfaz muy sencilla:
- Un ListView para mostrar los mensajes de la conversación.
- Un Entry para que el usuario introduzca un mensaje para el bot.
- Un Button para enviar el mensaje.
- Todo dentro de un StackLayout.
Y su code-behind es realmente muy sencillo, pues solo se establece el BindingContext de la vista haciendo uso de una instancia de nuestro ConversationViewModel:
Paso 16. Finalmente, en App.xaml.cs establece la página de inicio:
Paso 17. ¡Eso es todo! Vamos a probar la aplicación, compila y ejecuta. ¡Veamos lo que sucede!
Esta es la pantalla inicial del bot…
Si introducimos un mensaje…
Al hacer clic en el botón y esperar unos instantes, ¡obtendremos la respuesta del bot! ¡Funciona!
¿Qué tal te pareció este desarrollo? Sencillo, ¿cierto? Como puedes ver, la integración de un canal y una aplicación móvil es realmente fácil, el trabajo fuerte está en el servicio de LUIS (para definir todas las entidades que necesitas, los ejemplos de entrenamiento del modelo) y en el proyecto de Bot Framework (para manejar el flujo de la conversación). Los canales simplemente son un medio que escuchan la conversación y la muestran.
Te recuerdo que el proyecto está disponible en mi repositorio de GitHub para que lo descargues y verifiques su funcionamiento ?
En esta entrada aprendiste a conectar tu bot a un canal externo para posteriormente integrarlo en la aplicación móvil de Xamarin. Como puedes ver, fue muy sencillo realizarlo. Las aplicaciones son ilimitadas, todo depende de lo que quieras realizar a partir de este punto.
Y con esto terminamos la serie Tres buenos amigos: Bot Framework SDK v4, LUIS y Xamarin pero no es el fin de las publicaciones de bots. Para el próximo mes mejoraremos el bot con más funcionalidad, veremos cómo se conecta a algún canal adicional y a ver qué más se nos ocurre.
¡Espero que la sesión haya sido útil para tí!
Agradezco tu visita al blog. Si la publicación fue de tu interés, no olvides compartirla en tus redes sociales.
¡Hasta la próxima!
Luis
