Integra a Alexa con Voiceflow – CodesCode

Cómo integrar Alexa y Voiceflow para enfocarse en el diseño de conversación en lugar de la codificación. ¡Esto te ayudará a aprovechar mejores conversaciones!

Alexa tiene muchas capacidades, pero no es fácil crear una conversación compleja. Voiceflow es una herramienta que te permite crear conversaciones complejas con Alexa sin escribir código. Esta integración te permite crear una conversación en Voiceflow y luego implementarla en Alexa.

Por eso, en este repositorio, encontrarás un ejemplo simple de cómo integrar Alexa con Voiceflow utilizando el kit SDK de habilidades de Alexa para Node.js y llamando a la API del administrador de diálogos de Voiceflow.

Pre-requisitos

Necesitas tener una cuenta en Voiceflow
Necesitas tener una cuenta en Alexa Developer
Node.js y npm/yarn instalados en tu computadora

Proyecto de Voiceflow

En Voiceflow, necesitarás crear un proyecto y crear una conversación. Puedes seguir el Inicio rápido de Voiceflow para crear una conversación simple. En Voiceflow, lo único de lo que tienes que preocuparte es el diseño de la conversación.

En este ejemplo, vamos a crear una conversación simple que le pide al usuario información sobre Pokémon. La conversación sería así:

NLU

Voiceflow tiene un NLU incorporado, ya que vamos a llamar a Voiceflow utilizando la API del administrador de diálogos, tendremos que diseñar nuestro NLU en Voiceflow y Alexa.

Siguiendo el ejemplo, vamos a crear un intent llamado info_intent y un slot llamado pokemon que se llenará con el nombre del Pokémon que el usuario desea conocer:

API del administrador de diálogos

La API del administrador de diálogos es una API REST que te permite interactuar con Voiceflow. Puedes encontrar la documentación aquí.

La API del DM crea y gestiona automáticamente el estado de la conversación. Las solicitudes idénticas a la API del DM pueden producir respuestas diferentes dependiendo de la lógica de tu diagrama y de la solicitud anterior que recibió la API.

El punto final de la API del DM es: https://general-runtime.voiceflow.com/state/user/%7BuserID%7D/interact

Se pueden enviar diferentes tipos de solicitudes. Para ver una lista de todos los tipos de solicitud, consulta la documentación del campo de acción a continuación.

Para iniciar una conversación, debes enviar una solicitud de lanzamiento. Luego, para enviar la respuesta del usuario, debes enviar una solicitud de texto. Si tienes tu propio sistema de coincidencia de NLU, entonces es posible que desees enviar directamente una solicitud de intento.

Aquí tienes un ejemplo de una solicitud:

curl --request POST \     --url 'https://general-runtime.voiceflow.com/state/user/{userID}/interact?logs=off' \     --header 'accept: application/json' \     --header 'content-type: application/json' \     --header 'Authorization: VF.DM.96ds3423ds9423fs87492fds79792gf343' \     --data '{  "action": {    "type": "launch"  },  "config": {    "tts": false,    "stripSSML": true,    "stopAll": true,    "excludeTypes": [      "block",      "debug",      "flow"    ]  }}'

Como puedes ver, necesitas pasar el userID y el encabezado Authorization. Este userID es el ID del usuario con el que deseas interactuar. El encabezado Authorization es la clave de API que puedes encontrar en la configuración del proyecto de Voiceflow.

Puedes encontrar el proyecto de Voiceflow que utilicé para este ejemplo en voiceflow/project.vf.

Habilidad de Alexa

Para crear una habilidad de Alexa, debes ir a Alexa Developer y crear una nueva habilidad. Sigue el Inicio rápido de la Consola de Desarrollador de Alexa para crear una habilidad simple.

NLU

Necesitaremos replicar la NLU de Voiceflow (intents y entities) en nuestra habilidad de Alexa.

Como puedes ver, estamos utilizando el tipo SearchQuery. Este tipo se utiliza para obtener la entrada del usuario y enviarla directamente a Voiceflow. Puedes encontrar más información sobre este tipo aquí.

Código Lambda

El código de la habilidad de Alexa va a ser genérico, lo cual significa que se puede utilizar con cualquier proyecto de Voiceflow. Para hacer esto, vamos a implementar una función Lambda que llamará a la API del Dialog Manager de Voiceflow. Vamos a utilizar el SDK de Alexa Skills Kit para Node.js y Axios para llamar a la API.

Solo vamos a necesitar modificar dos controladores, el LaunchRequestHandler y el ListenerIntentHandler. El LaunchRequestHandler se utilizará para iniciar la conversación y el ListenerIntentHandler se utilizará para enviar la entrada del usuario a Voiceflow.

Empecemos con el LaunchRequestHandler:

const LaunchRequestHandler = {    canHandle(handlerInput) {        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'LaunchRequest';    },    async handle(handlerInput) {        let chatID = Alexa.getUserId(handlerInput.requestEnvelope).substring(0, 8);        const messages = await utils.interact(chatID, {type: "launch"});        return handlerInput.responseBuilder            .speak(messages.join(" "))            .reprompt(messages.join(" "))            .getResponse();    }};

Este controlador se ejecuta cuando se lanza la habilidad. Vamos a obtener el ID del usuario y llamar a la API del Dialog Manager de Voiceflow con la acción launch. Luego, devolveremos la respuesta.

Las siguientes interacciones serán gestionadas por el ListenerIntentHandler:

const ListenerIntentHandler = {    canHandle(handlerInput) {        return Alexa.getRequestType(handlerInput.requestEnvelope) === 'IntentRequest'    },    async handle(handlerInput) {        let chatID = Alexa.getUserId(handlerInput.requestEnvelope).substring(0, 8);        const intent = Alexa.getIntentName(handlerInput.requestEnvelope);        const entitiesDetected = utils.alexaDetectedEntities(handlerInput.requestEnvelope);        const request = {             type: "intent",             payload: {                 intent: {                    name: intent                },                entities: entitiesDetected            }        };        const messages = await utils.interact(chatID, request);        return handlerInput.responseBuilder            .speak(messages.join(" "))            .reprompt(messages.join(" "))            .getResponse();    }};

Este controlador se ejecuta cuando el usuario dice algo. Vamos a obtener la entrada del usuario y llamar a la API del Dialog Manager de Voiceflow con la acción intent. Dado que la inferencia de NLU la realiza Alexa, tenemos que obtener las entidades y los intenciones detectadas y enviarlas a Voiceflow. Luego, devolveremos la respuesta.

Para obtener las entidades detectadas, vamos a utilizar la siguiente función:

module.exports.alexaDetectedEntities = function alexaDetectedEntities(alexaRequest) {    let entities = [];    const entitiesDetected = alexaRequest.request.intent.slots;    for ( const entity of Object.values(entitiesDetected)) {        entities.push({            name: entity.name,            value: entity.value        });    }    return entities;}

Puedes encontrar el código de esta función en lambda/utils.js.

Finalmente, tenemos que asegurarnos de agregar los controladores a la habilidad:

exports.handler = Alexa.SkillBuilders.custom()    .addRequestHandlers(        LaunchRequestHandler,        ListenerIntentHandler,        HelpIntentHandler,        CancelAndStopIntentHandler,        FallbackIntentHandler,        SessionEndedRequestHandler,        IntentReflectorHandler)    .addErrorHandlers(        ErrorHandler)   .withCustomUserAgent('sample/hello-world/v1.2')

En los controladores anteriores, puedes ver que estamos utilizando una función llamada utils.interact. Esta función va a llamar a la API del Dialog Manager de Voiceflow. Puedes encontrar el código de esta función en lambda/utils.js:

const axios = require('axios');const VF_API_KEY = "VF.DM.96ds3423ds9423fs87492fds79792gf343";module.exports.interact = async function interact(chatID, request) {    let messa

Esta función va a devolver un array de mensajes. Vamos a usar este array para construir la respuesta. También hemos añadido algo de código para eliminar los saltos de línea y los caracteres extraños:

module.exports.filter = function filter(string) {    string = string.replace(/\'/g, '\'')    string = string.replace(/(<([^>]+)>)/ig, "")    string = string.replace(/\&/g, ' y ')    string = string.replace(/[&\\#,+()$~%*?<>{}]/g, '')    string = string.replace(/\s+/g, ' ').trim()    string = string.replace(/ +(?= )/g,'')    return string;};

Con este código, hemos terminado la Skill de Alexa. Puedes encontrar el código de la función Lambda en lambda/index.js.

Pruebas

Una vez que hayas creado la Skill de Alexa y el proyecto de Voiceflow, puedes probarlo. Para probarlo, puedes utilizar el Simulador de Alexa o puedes usar un dispositivo real.

Siguiendo el ejemplo que estábamos usando, puedes probar la Skill de Alexa con las siguientes frases para solicitar información sobre Pokémon:

Conclusión

Como puedes ver, es sencillo integrar Alexa con Voiceflow. Puedes crear conversaciones complejas con Voiceflow y luego desplegarlas en Alexa. ¡Así que tu enfoque estará en la conversación y no en el código!

Espero que hayas disfrutado de este tutorial.

Puedes encontrar el código de este tutorial aquí.

¡Feliz codificación!