Uso de las acciones de Botpress v12 con la API de Giphy

En una reciente entrada de blog y vídeo, le mostramos cómo instalar Botpress v12 utilizando Docker Playground. ¡Jugar con Docker es sólo un aperitivo de lo que Docker y Botpress v12 podrían lograr juntos! En el blog de hoy, te mostraré cómo utilizar algunos elementos básicos - ¡pero muy útiles! - Botpress elementos.

• Cómo utilizar una acción en Botpress para llamar a una API
• Cómo mostrar contenido por defecto en una acción
• Comprender la estructura por defecto de un elemento incorporado en Botpress

¡También he hecho vídeos de esto! Haga clic aquí para ver el primer video que acompaña a este blog, y la segunda parte está fuera

¿Qué es una acción?

Una acción Botpress es un fragmento de código que Botpress v12puede utilizar en un flujo. Por defecto, Axios y otras librerías están incluidas en una acción Botpress . La acción que voy a crear utilizará una llamada API al endpoint GIPHY, a través del cual mi chatbot Botpress recuperará gifs para compartir con su usuario.

Un inciso: Botpress Las acciones y los ganchos de Botpress son muy similares. Como quiero que el flujo de conversación de Botpress active la recuperación, voy a utilizar una acción. Los ganchos se utilizan más comúnmente para ejecutar códigos en puntos específicos del ciclo de vida del chatbot.

API DE GIPHY

Antes de crear el código Botpress , necesitas obtener una clave API Giphy válida. Esta clave se puede encontrar en el sitio web para desarrolladores de GIPHY. Empieza por crear una Giphy App.

Tendrás que registrarte para obtener una cuenta de Giphy, o iniciar sesión si ya tienes una.

En la página principal, cree una aplicación y seleccione la opción API de la derecha.

Sí, por la derecha, la que no se recomienda.

La versión SDK es definitivamente una opción, pero necesitarás hacer un paso extra en Botpress - la librería SDK necesita ser inyectada en el componente de acción. Cubriremos la inyección de una biblioteca externa en Botpress en un futuro blog.

A continuación, asigna un nombre y una descripción a la aplicación.

En la siguiente pantalla, GIPHY te dará la clave API que se ha creado - ¡consérvala! Utilizarás esta clave en tu chatbot de Botpress .

¡Es hora de abrir Botpress!

Inicio Botpress

Hay varias formas de iniciar Botpress v12:

Si está ejecutando Botpress localmente, desde la fuente:

inicio de la ejecución del hilo

O desde el archivo binario

./bp

• O de Docker.
  

docker-compose up -d

Una vez en Botpress, añadiremos la clave API y las nuevas acciones a un bot. Puedes usar el bot que creaste en nuestro último blog, o crear uno desde cero.

En este punto, puedes añadir tu clave API de GIPHY.

Uso de un entorno y configuración de la clave API

Tienes que entrar en tu chatbot - yo llamé a mi chatbot giphy. Una vez en tu chatbot, ve al Editor de Código > Configuraciones > bot.config.json. Al final del archivo añade tu clave API, con el nombre del chatbot y la variable apiKey:

"giphy": { "apiKey": "DQHOmOjCRpGvFCQ9lY46C3gPTZzEq77Q"}

Ahora puedes usar este entorno en tu acción. Más sobre esto más adelante, pero la idea aquí es que la variable botConfig contendrá todas las variables de tu bot.config.json. La acción giphy.js que vas a crear en el siguiente paso definirá y usará esa variable, y el primer parámetro de mergeBotConfig es el nombre de tu bot (en este caso, giphy).

Crear la acción

Now let’s add the actions that will make the chatbot work. In the left side panel, go in the Code Editor `</>`, choose the Actions tab, and click on the +. The first action I’m going to create is called giphy.js, then I click `Submit.` This action will contain the code to call the Giphy API and return an image based on the search query you pass to it.

Aquí está el código que escribí para mi acción giphy.js - para llamar a la API giphy.com y devolver la imagen.

‍

``jsx

function action(bp: typeof sdk, event: sdk.IO.IncomingEvent, args: any, { user, temp, session } = event.state) { /** Your code starts below */ const axios = require('axios') /** * Fetch one GIF image * @title Get image from Giphy * @category Example * @author Botpress */ const giphy = async () =&gt; { const regex = /!giphy/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!giphy `' const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } // const apiKey = await bp.ghost.forBot('giphy').readFileAsObject('/', 'bot.config.json') const botConfig = await bp.config.mergeBotConfig('giphy', {}) const response = await axios.get( `https://api.giphy.com/v1/gifs/search?q=${parsedText}&amp;api_key=${botConfig.giphy.apiKey}` ) if (response.data.data.length === 0) { parsedText = `Didn't find any picture for the following Query **${parsedText}**` const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } const payloads = await bp.cms.renderElement( 'builtin_image', { image: response.data.data[0]['images']['original']['url'], title: response.data.data[0]['title'] }, event ) return await bp.events.replyToEvent(event, payloads) } return giphy() /** Your code ends here */}

‍

```

‍

Cree los Nodos y Transiciones en Botpress

En el editor de flujo, cree dos nuevos nodos y una nueva Transición.

En el nodo de entrada con la etiqueta #1, estoy usando una declaración de texto sin formato como comando.

(No te preocupes por la segunda transición ni por el tercer nodo: los actualizaremos más adelante en este blog).

event.payload.text.startsWith("!giphy")

Crear la acción para renderizar el carrusel

Devolver un giphy está bien por sí solo, pero podemos hacerlo más potente. Para ello podemos utilizar un componente carrusel. BotpressEl componente carrusel del bot puede utilizarse para mostrar muchas cosas útiles a los usuarios del chatbot: camisetas individuales de un sitio de comercio electrónico, elementos de un menú de un restaurante, vehículos de alquiler, etc. En este bot, voy a mostrar imágenes de la consulta de búsqueda enviada a la API de Giphy.

Una vez más, voy a crear una nueva acción, esta vez llamada Carousel.js. Esta acción mostrará 5 imágenes devueltas desde Giphy cuando enviemos la consulta de búsqueda del usuario, y le dará al usuario la opción de elegir. Sigue el mismo proceso que arriba para crear una nueva acción, e incluye este código:

function action(bp: typeof sdk, event: sdk.IO.IncomingEvent, args: any, { user, temp, session } = event.state) { /** Your code starts below */ const axios = require('axios') /** * Giphy Carousel * @title Created A giphy Carousel * @category Custom * @author Botpress */ const carousel = async () =&gt; { const regex = /!carousel/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!carousel &lt;Picture to search&gt;`' const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } const botConfig = await bp.config.mergeBotConfig('giphy', {}) const response = await axios.get( `https://api.giphy.com/v1/gifs/search?q=${parsedText}&amp;api_key=${botConfig.giphy.apiKey}` ) let cards = [] for (let i = 0; i &lt; 5; i++) { // If the response is empty don't push the value if (response.data.data[i]) cards.push({ title: response.data.data[i]['title'], subtitle: response.data.data[i]['subtitle'], image: response.data.data[i]['images']['original']['url'], actions: [ { action: 'Open URL', url: response.data.data[i]['images']['original']['url'], title: response.data.data[i]['title'] } ] }) } console.log(cards) const payloads = await bp.cms.renderElement( 'builtin_carousel', { items: cards }, event ) return await bp.events.replyToEvent(event, payloads) } return carousel() /** Your code ends here */}

Después de crear la acción de carrusel, puede actualizar los nodos en su editor de flujo para que reconozcan el comando de carrusel.

event.payload.text.startsWith("!carrusel")

Cómo usar tu nuevo chatbot de Giphy

Y ya está. Ahora tu bot puede entender y actuar con sólo dos comandos:

• !giphy <subject>
• !carousel <subject>

Esto es lo que obtuve cuando le dije!giphy dog a mi bot:

Y esto es lo que obtuve cuando le dije!carousel cat a mi bot:

Próximos pasos y perfeccionamiento

Espero que este tutorial te haya ayudado. Si está interesado, únase a nuestra comunidad Botpress , donde podrá plantear preguntas y aprender de otros desarrolladores de Botpress .

Si desea más información sobre lo que hemos tratado hoy, aquí tiene una lista de recursos para profundizar:

• Botpress docs sobre la creación de acciones
• Documentos sobre cómo llamar a una API externa desde Botpress
• Visión general de la plataformaBotpress v12, en particular la experiencia del desarrollador (vídeo)

Y si te gusta este contenido, suscríbete al boletín de Botpress .

‍