Bots (segunda parte): Publicando un bot y conectándolo a Facebook Messenger y Xamarin
Bienvenido a la segunda parte de nuestra serie de bots. La primer parte generó una gran expectativa (¡muchas gracias por tu visita!) y bueno, aquí estamos cumpliendo con la última parte (por el momento). ¡En esta entrada vamos a dar a conocer nuestro bot en el mundo para que pueda ser utilizado por nuestros usuarios! Para ello, involucraremos varias tecnologías:
- Azure, para la administración del bot en general.
- Web App Bot, donde se publicará el bot a través de un App Service
- Bot Channel, donde se configurará el bot para comunicarlo con otros canales
- Facebook Messenger, para probar el bot en un canal de alto número de usuarios
- Xamarin, para integrar (y consumir) el bot en una app
¡Continuemos a partir de donde nos quedamos entonces!
Parte 4. Publicación y configuración del bot
Desde Visual Studio da clic derecho en tu proyecto y selecciona la opción Publicar.
Se lanzará un asistente de publicación a continuación. En la sección destino de publicación elige la opción Crear nuevo
Escribe un nombre de aplicación (debe ser único, pues se verificará disponibilidad). Además, selecciona la suscripción donde será creado el servicio.
En la sección Grupo de recursos puedes seleccionar uno ya existente o crear uno Nuevo:
De igual forma, en la sección Plan de hospedaje selecciona uno ya existente o crea uno Nuevo. En este caso, puedes elegir la Ubicación y también establecer el tamaño de la instancia (Gratuito o algún otro esquema con mayor capacidad si es con fines de producción).
Listo. Da clic en Publicar y observa que se abre una ventana del navegador con la URL del bot (una vez aprovisionados los recursos para el servicio). Copia esta URL porque la vamos a utilizar.
Sin embargo, el bot aún no está listo para ser consumido por servicios externos. Requiere una configuración adicional.
Ingresa al portal de bot framework: https://dev.botframework.com y da clic en My bots.
Da clic en el botón Crear bot.
Serás redirigido al portal de Azure en la sección de Bot Service. Selecciona la categoría Bot Channels Registration y da clic en Crear.
Ahora ingresa los datos solicitados:
- Nombre del bot (debe ser único)
- Suscripción
- Grupo de recursos (si eres organizado, recomendable seleccionar el que creaste hace unos instantes al publicar el bot)
- Ubicación (la misma o cercana a la del bot publicado)
- Plan de tarifa (gratuito, pero también puedes optar por un servicio de pago)
- Punto de conexión de mensajería (es la URL donde se publicó el bot con 2 cambios):
- Se reemplaza http por https
- Se agrega api/messages a la URL
- Opcionalmente activa o desactiva App Insights
- Deja la opción de Crear automáticamente id y contraseña de la aplicación de Microsoft.
Después de dar clic en Crear espera un instante. Una vez publicado el canal de bot recibirás una notificación.
Ingresa a la sección Configuración del bot. Copia el dato Controlador de bots e ingresa una descripción. Después, da clic en el botón Adminstrar dentro del Microsoft App ID.
Copia el Application Id y da clic en Generar nueva contraseña.
Aparecerá un diálogo con una contraseña. Es la única oportunidad que tienes para visualizar este dato, así que cópialo.
Da clic en Guardar (al final de la página).
Una vez de regreso en el portal de Azure, también da clic en Guardar.
Regresa a tu proyecto en Visual Studio y abre el archivo Web.config. Dentro de appSettings en este archivo habrá 3 elementos: BotId, MicrosoftAppId y MicrosoftAppPassword. En la propiedad value ingresa la información correspondiente a cada elemento:
Vuelve a publicar el bot.
Da clic en Publicar.
¡Y listo! Una vez finalizado el proceso regresa al portal de Azure y da clic en la sección Probar en el Chat en web. Haz una prueba platicando con el bot. Observa que el funcionamiento es correcto y similar a como lo habíamos hecho en la primer parte.
Llegado a este punto, analiza todo lo que hemos hecho. ¿Tiene sentido? Espero que sí =)
Parte 5. Conexión del bot a Facebook Messenger
Una vez publicado el bot, ¡vamos a conectarlo a un canal donde pueda ser utilizado!
Da clic en Canales dentro del portal de tu app y selecciona Facebook Messenger.
Te serán solicitadas algunas claves e información para conectar un bot a Messenger.
Si avanzas más hacia abajo de la pantalla de configuración, observarás que aparecen dos datos adicionales: Dirección URL y Token de verificación. Estos datos serán usados por un webhook posteriormente (en Facebook). Cópialos.
Accede al sitio https://developers.facebook.com/ y da clic en Agregar una aplicación nueva.
Ingresa la información solicitada (no podemos colocar la palabra face en el nombre).
Una vez creada tu aplicación, accede a la sección Configuración Básica y copia tanto el identificador como la clave secreta de la aplicación.
El siguiente paso es ir al Panel de la aplicación y agregar Messenger. Para ello, simplemente da clic en el botón Configurar.
En la sección Configuración busca la categoría Generación de token y da clic en la opción Crear una página.
Elige una de las opciones disponibles. En este caso voy a seleccionar Comunidad o figura pública.
Ingresa los datos requeridos (nombre y categoría en este caso).
Aparecerá la página recién creada.
Accede a la sección Información y localiza el identificador de tu página. Cópialo.
Ahora selecciona la página recién creada en la sección Generación de token.
Aparecerá la pantalla de inicio del producto. Da clic en Continuar.
Inicia sesión, en caso de que esta pantalla aparezca.
Aparecerá un token de acceso a la página, el cual deberás copiar.
Justo debajo de esta sección está Webhooks. Da clic en el botón Configurar webhooks.
Coloca los datos que obtuviste desde el portal de Azure al inicio (Dirección URL de devolución de llamada y token de verificación). Además, selecciona los 4 campos de suscripción indicados en la imagen: messages, message_deliveries, messaging_postbacks y messagint_optins. Da clic en Verificar y guardar.
Si la verificación es exitosa, selecciona la página para que se suscriba al webhook y pueda canalizar los mensajes al bot.
Da clic en Suscribir.
Como último paso en este portal, da clic en Configuración Avanzada y selecciona la opción Si en Permitir acceso de API a configuración de la aplicación.
Regresa al portal de Azure e introduce los datos requeridos por el Bot Connector, los cuales obtenemos desde el portal de Facebook:
- Id de la página
- Id de la aplicación de Facebook
- Llave secreta de la aplicación de Facebook
- Token de acceso a la página
¡Listo! Cuando el canal sea agregado correctamente, accede a Canales y verifica que Facebook Messenger ha sido agregado. Da clic en Facebook Messenger.
Accederás al chat de messenger, donde podrás interactuar con el bot tal y como lo hemos hecho en el emulador y desde el portal de Azure. ¡Observa que funciona correctamente!
NOTA: Esta interacción solo es posible para el administrador. Si deseas que otros usuarios accedan a tu bot primero necesitas publicar tu aplicación en Facebook y esperar a que pase el proceso de revisión, lo cual puede tomar cierto tiempo. Recuerda revisar las directivas de publicación de una aplicación de Facebook.
Parte 6. Creación de la app de Xamarin
Como último paso, podemos crear una app propia que consuma el bot que tenemos publicado en Azure.
En el portal de Azure agrega un nuevo canal: Direct Line, que nos ayudará a hacer las peticiones desde Azure mediante un Api REST
Configura Direct Line, simplemente obtén la clave secreta del servicio y da clic en Listo.
Ahora vamos a Visual Studio. Crea un nuevo proyecto de tipo Mobile app (Xamarin.Forms) llamado XamarinFaceBot.
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.
Una vez creado el proyecto, da clic derecho sobre la solución y selecciona Administrar paquetes Nuget para la solución.
Agrega en primer lugar el paquete Microsoft.Bot.Connector.DirectLine en todos los proyectos de tu aplicación.
El segundo paquete a instalar es Microsoft.Rest.ClientRuntime
Crea las siguientes carpetas en el proyecto XamarinFaceBot:
En la carpeta Helpers, agrega la clase Constantes, con el código siguiente:
En la carpeta Modelos, agrega la clase Mensaje, con el siguiente código:
A continuación, crea la clase ServicioDirectLine dentro de la carpeta Servicios, la cual se comunica directamente en el canal creado desde el portal. El código es el siguiente:
Ahora procedemos a crear la interfaz de usuario. En la carpeta Páginas agregamos un ContentPage llamado PaginaBot. El código XAML es el siguiente:
Y su code-behind es:
Finalmente, en App.xaml.cs establecemos la página de inicio:
¡Eso es todo! Vamos a probar la aplicación, compila y ejecuta. ¡Veamos lo que sucede!
El proyecto está disponible en mi repositorio de GitHub para que lo descargues y verifiques su funcionamiento ?
NOTA: La integración de la imagen (fotografía del usuario) no alcancé a implementarla, pero publicaré una actualización muy pronto al respecto 🙂
Por cierto, en mi canal de YouTube también puedes seguir el paso a paso del desarrollo de esta app:
En esta entrada aprendiste a publicar tu bot así como conectarlo a canales externos (primero Facebook Messenger y después una aplicación propia mediante Direct Line). Como puedes ver, es muy sencillo realizarlo. Las aplicaciones son ilimitadas, todo depende de lo que quieras realizar a partir de este punto.
¡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!
