Cómo crear un bot para Facebook Messenger


facebook messenger bot

En el siguiente post vamos a aprender cómo crear y configurar un bot para Messenger de Facebook soportado en Microsoft Azure, pero vale aclarar que este bot no tendrá inteligencia alguna si no por el contrario será nuestra “interfaz gráfica” del bot.

Para crear dicha inteligencia podemos hacer uso de servicios como LUIS de Microsoft Azure o Watson de IBM que lo verás en otros post.

Descargando el código base

Facebook nos colabora con una plantilla básica creada en Node.js para crear nuestro primer bot, requiere ciertas configuraciones pero las veremos más adelante. En el siguiente enlace podrás encontrar el código fuente:

https://github.com/fbsamples/messenger-platform-samples

Cuando hayas entrado al sitio podrás descargar el zip o clonar el proyecto en alguna parte de tu máquina, ya sea por consola o por alguna herramienta que te gestione los repositorios de GIT.

Configuración de Facebook

Directamente en Facebook necesitamos crear un Fanpage y una aplicación, ya que nuestro bot debe responder desde algún Fanpage. No importa el orden de creación, pero vamos a llevar cierto orden en esta sección.

Creando la aplicación en Facebook

Has click en el siguiente enlace para entrar a la página de administración de aplicaciones:

https://developers.facebook.com/apps

Allí podrás ver una consola parecida y encontrarás en la parte superior derecha un botón de color predominante donde dice “Agregar una nueva aplicación”, hacer click en ese botón de color verde.

Seguido a ese click se abre una ventana de diálogo donde debes escribir el nombre para mostrar (si requiere de permisos especiales como información del usuario es importante, de lo contrario no mucho), correo electrónico de contácto y lo más importante es seleccionar que sea de categoría “Aplicaciones para Messenger“, ya que esta selección nos preconfigurará toda nuestra aplicación y así nos evitamos más pasos.

Al haber escrito todas las configuraciones necesarias tienes que hacer click en el botón de “Crear identificador de la aplicación“.

Vamos a dejar esta pantalla abierta y presente para que ahora podamos unir esta aplicación con el Fanpage que vamos a crear a continuación.

Creando el Fanpage de Facebook

Este paso es más sencillo y común, si lo sabes hacer puedes pasar a la siguiente sección de lo contrario puedes entrar en el siguiente enlace y seguir todas las instrucciones, esto depende de la temática de tu Fanpage.

https://www.facebook.com/pages/create

Configuración del código de ejemplo

Ahora debemos completar todas las configuraciones de nuestro proyecto de ejemplo proporcionado por Facebook para que pueda trabajar correctamente.

Lo primero que vas a hacer es crear un repositorio nuevo en GitHub, y ahí almacenarás todo el código fuente necesario para correr el bot en Microsoft Azure, para eso deberás copiar ciertos archivos a la raíz del repositorio.

Los archivos que copiaremos son los siguientes:

Node/

| config/*

| public/*

| views/*

| app.js

| package.json

Luego de haberlos copiado al repositorio si estás usando GitHub for Windows vas a hacer Sync,  si es en consola harás el commit y pull.

Con Visual Studio Code o algún otro editor de código preferido abrirás el archivo llamado “config/default.json” y encontrarás las siguientes configuraciones:

Obteniendo el “AppSecret”

En la superior izquerda de nuestra aplicación de Facebook que creamos en los pasos anteriores encontrarás un botón que dice “Panel”, si haces click ahí te dirigirá al “inicio” de la aplicación.

Allí podrás encontrar el nombre, la versión del api, entre otros datos; pero el que nos interesa es el dato que se llama “Clave secreta de la aplicación“, en la parte derecha de ese mismo campo verás un botón que dice “Mostrar” y si haces click en el te pedirá la contraseña de tu Facebook, te autenticas y listo, ese es el dato que necesitas como AppSecret.

Obteniendo el “PageAccessToken”

En la misma página donde obtuviste la clave secreta de la aplicación encontrarás en el menú de la parte izquierda la opción que dice “Messenger” y seguido la opción de configuración.

Cuando hayas navegado a la configuración de Messenger podrás encontrar varios paneles de información, en uno de ellos (por lo general el tercero) tendrá como título “Generación de token“, ahí debes seleccionar el Fanpage que previamente creaste para este fin, te autenticas nuevamente y en la parte derecha del botón de selección encontrarás el token que necesitas en la configuración.

Para copiarlo solo necesitas hacer click encima del texto y listo, queda copiado.

Creando el “ValidationToken”

Este es el más sencillo, porque es como la palabra secreta que vas a asignar a todos los token, entonces si es una aplicación empresarial es importante que generes una cadena de caracteres larga y que no sea sencilla de descifrar; de lo contrario, si es un bot de pruebas, puedes poner algo sencillo, siempre y cuando al separar las palabras sea un con un underscore, en mi caso usaré el siguiente:

my_own_token

Obteniendo el “ServerURL”

Ya solo queda crear una aplicación web en Microsoft Azure y listo, entonces ahora solo es necesitas iniciar sesión en el porta de Azure y crear una Web App.

Cuando haya finalizado la creación en el panel principal podrás encontrar la URL que se generó, copiarla pero es super importante poner que va a ser por HTTPS, ya que si no nos va a generar problemas.

Listo, ahora solo debes sincronizar tu GitHub con la Web App que acabaste crear, para eso debes hacer click en Microsoft Azure en la sección de “Deployment Options”, ahí seleccionar que es por GitHub y configurar correctamente todos los datos solicitados.

Configurando los WebHooks

Luego de que se haya configurado correctamente la WebApp y se haya desplegado todo nuestro código fuente volvemos a la configuración de Messenger pero esta vez iremos a la sección que se llama “Webhooks” y ahí encontrarás un botón que dice “Configurar Webhooks”.

El que nos desplegará una ventana como la siguiente:

En los datos que solicita escribes la URL que está las configuraciones pasadas pero ahora es muy importante agregarlo al final “/webhook”, en mi caso quedaría de la siguiente manera:

https://botcami.azurewebsites.net/webhook

Y en el campo de “Verificar token” pondrás el valor que pusiste como “validationToken” en las configuraciones previas, en mi caso es:

my_own_token

Y en los campos de la suscripción debes seleccionar “Messenger” y “Messaging_Postback”. Así que completando todos los datos quedaría algo parecido a la siguiente foto:

Si todo quedó bien configurado al hacer click en “Verificar y guardar” no debería salir ningún error y refrescar la página. Si te salió algún error, verifica cada letra de la URL, que tenga HTTPS, que finalice en webhook, que el token sea el mismo, que el appsecret y el pageAccessToken sea el correcto (ya me pasó eso jeje).

Configuración final

Listo, luego de que haya guardado correctamente, nos recargará la página y nos aparecerá otra sección abajo de webhooks donde podremos seleccionar la página que queremos “adjuntarle” este bot que acabamos de crear, ahí por supuesto seleccionas el fanpage correspondiente y haces click en “suscribir”.

LISTO!, a probar el bot, solo tienes que acceder a la página como visitante y chatear con tu nuevo bot que responde lo mismo que le escribes.

Entonces en próximos post veremos integraciones inteligentes de LUIS o de Watson, también veremos muchos post de Xamarin y este tipo de herramientas.

Event Hubs orientado a IoT


Para tener un centro de eventos listo para usar en nuestro sistema de IoT (hacer click aquí) es necesario seguir la siguiente guía.

Crear Event Hub

Seguir leyendo “Event Hubs orientado a IoT”

Node.js App orientado a IoT


Para esta primera aplicación respecto al diagrama del post primario ( click aquí ) se usará Node.js y Socket.io para comunicar el front-end y Raspberry Pi, lo que será nuestro servidor de backend.

Crear máquina virtual

Seguir leyendo “Node.js App orientado a IoT”

Mini sistema orientado a IoT


El pasado lunes 6 de abril se llevó a cabo IoT Expert Day, el cual durante el día se llevaron a cabo charlas introductorias al Internet de las Cosas y se mostraron ejemplos de cada tema; luego, después del medio día se llevó a cabo un taller para crear un sistema orientado a IoT para que todos los participantes pudieran tener un primer acercamiento.

Este taller que ahora dejo en disposición de manera online consta de los siguientes elementos:

  • Programa escrito en Arduino para encender un led
  • Aplicación hecha con Node.js y Socket.io, para servir de interface de conexión
  • Aplicación en Python para recibir todos los comandos por medio de Internet
  • Web App para controlar el led
  • Event Hub para registrar todos los eventos
  • Programa en C# para demostrar el funcionamiento de los Event Hub
  • Finalmente dejaré una aplicación móvil para que sea más realista el ejemplo

diagrama del sistema Seguir leyendo “Mini sistema orientado a IoT”

Ejecutar Socket.io en Xamarin.Android


Es muy frecuente querer ejecutar esta grandiosa tecnología en la mayoría de recursos que usamos, por lo que esta vez les enseñaré a implementar Socket.io sin necesidad de usar terceros y sacarse las canas entre versiones y dependencias en servidor, etc etc… como me pasó a mi.

La ejecución es muy sencilla, tenemos un WebView donde se ejecuta código en Razor, HTML y un poco de JS donde se hará un hilo de comunicación de doble vía entre el WebView y el Code-Behind, a esta técnica la llamé BlackOps, ya que aquí se harán todas estas tareas oscuras y transparentes al usuario final, la cual darán una sensación de que corre de manera nativa.

  • En Xamarin Studio crear un nuevo proyecto tipo “Android WebView Application”, en este caso lo llamaré “EtonMessy_And”. 
  • En la carpeta Assets crear otra carpeta llamada “js” y crear un archivo llamado “blackOpsHelper”, descargar el cliente de Socket.io desde https://cdn.socket.io/socket.io-1.0.4.js y JQuery desde http://code.jquery.com/jquery-1.11.0.min.js 
  • En el archivo RazorView.cshtml agregar las referencias necesarias a los script.
  • Como buena práctica es encapsular toda la lógica en un archivo *.js que podría llamarse BlackOpsHelper.js, sin embargo, por razones del diseño del control WebView en Xamarin no es posible ejecutar llamados a Internet (probablemente se corrija más adelante), por el momento..  añadir el código base que he diseñado en una etiqueta “script”.

Seguir leyendo “Ejecutar Socket.io en Xamarin.Android”

Crear un backend rápido y poderoso con Socket.io en Azure


Siguiendo con el demo del 11 de diciembre el siguiente paso es crear un backend donde todo orquestará y hará armonía; pero para ello decidí usar Socket.io, ya que es una tecnología muy flexible y desde mi punto de vista, muy sencilla de implementar.

Básicamente en Socket.io se generan eventos y listener de estos eventos donde se necesite, si necesito ejecutar un evento en el backend, simplemente defino el emisor y el receptor, con sus lógicas de negocio dependiendo de como sea el callback.

Para comenzar es vital generar una máquina virtual en el ambiente que nosotros deseemos, sin embargo, con fines de esta práctica todo se hizo en Microsoft Azure y su implementación de Virtual Machines.

Crear Website básico en Microsoft Azure


El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

Seguir leyendo “Crear Website básico en Microsoft Azure”