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.

Cómo generar APK con Xamarin


Luego de que hayas creado tu aplicación en Xamarin necesitas probar la app en distintos dispositivos o publicarla en el Play Store, sin embargo, para generar el apk debe estar firmado digitalmente. La ventaja es que no se necesita una cuenta de desarrollador para generar dicho apk.

Con Xamarin se puede llevar a cabo con unos cuantos pasos.

Generar el Keystore

Lo primero que debemos hacer es localizar la herramienta keytool, que está en nuestro JDK (Java Development Kit) que debemos tener previamente instalado, en mi caso C:\Program Files (x86)\Java\jdk1.7.0_71\bin

  1. Abrir una consola de comandos con permisos de administrador
  2. Cambiar a la ruta a nuestro JDK (cd “RUTA_DEL_JDK”)
  3. Generar el Keystore con el siguiente comando
keytool -genkeypair -v -keystore <filename>.keystore -alias <key-name> -keyalg RSA -keysize 2048 -validity 10000

Seguir leyendo “Cómo generar APK con Xamarin”

Capturar credenciales de Facebook con una extensión de Google Chrome


Hace unos días comencé a revisar las API de Google Chrome que ofrece para crear extensiones y decidí crear una sencilla extensión que captura el email y la contraseña de Facebook al momento de hacer login (hay gente que le llama hackear Facebook), esto lo logro al hacer un hook en el evento “submit” del formulario de login.

En términos más técnicos lo que estoy haciendo es un event listener al documento y bajo ciertos parámetros solo opero en el login de Facebook.

También me pareció interesante tomar pantallazos de Facebook cada determinado tiempo, para ello se cuenta con un botón que habilita esta opción.

Sin embargo la idea es que esta información salga del navegador de la víctima y vaya a nuestras manos, para ello configuré la aplicación para que responda a un servidor hecho con Node.js y Socket.io, de ahí para adelante es historia. Seguir leyendo “Capturar credenciales de Facebook con una extensión de Google Chrome”

Usando el sensor de latidos en Microsoft Band


Microsoft Band nos ofrece diversos sensores con el cual podemos acceder mediante el SDK que nos ofrece Microsoft.

Esta aplicación es bastante sencilla y dejo todo el código en C# comentado (por lo menos lo más relevante) y dejo el proyecto publicado en Github. Seguir leyendo “Usando el sensor de latidos en Microsoft Band”

¿Cómo integrar Instagram en App Studio?


Hace unos días en un evento llevado a cabo en Bogotá, Colombia, me hicieron una pregunta la cual dejaré plasmada en este blog y es ¿Cómo integrar Instagram en una aplicación hecha con App Studio?.

Para ello supongo que ya se tendrán las bases necesarias para hacer una aplicación base en esta plataforma, aquí usaré la plantilla de “Mi banda favorita” y haré alusión a un grupo de música electrónica llamado Disclosure.


Seguir leyendo “¿Cómo integrar Instagram en App Studio?”

Arduino orientado a IoT


Luego de tener todos los componentes es necesario ahora conectar el backend (click aquí) con los Arduino necesarios el cual tendrán un código genérico ya que todos harán lo mismo, encender el led que trae por defecto cuando una aplicación de FrontEnd de la orden.

Si va a compilar desde Raspberry PI

Suponiendo que no se tiene instalado Arduino IDE es necesario ejecutar los siguientes comandos en la consola, cada uno por separado y donde dice “pi” es el usuario.

sudo apt-get update
sudo apt-get install arduino
sudo usermod -a -G tty pi
sudo usermod -a -G dialout pi

Seguir leyendo “Arduino orientado a IoT”

Raspberry PI orientado a IoT


Bien, ahora se usará una Raspberry PI para poder conectarse con nuestro backend creado anteriormente con Node.js (click aquí) y así poder interactuar con nuestra aplicación de frontend y los dispositivos conectados.

Para mayor agilidad en el taller se conectarán por medio de USB ya que esto no requiere de ninguna configuración ni dispositivos externos.

Conectarse por escritorio remoto

  • Conociendo la IP asignada a la Raspberry presione en su teclado las teclas Windows + R, tener en cuenta que la tecla Windows tiene la bandera de Windows y por lo general está al lado del botón ALT, este comando ejecutará un ventana y allí escribir “mstsc

Seguir leyendo “Raspberry PI orientado a IoT”