Utiliser les actions de Botpress v12 avec l'API Giphy

Dans un récent article de blog et une vidéo, nous vous avons montré comment installer Botpress v12 à l'aide de Docker Playground. Player with Docker n'est qu'un avant-goût de ce que Docker et Botpress v12 pourraient réaliser ensemble ! Pour le blog d'aujourd'hui, je vais vous montrer comment utiliser quelques éléments de base - mais très utiles ! - Botpress - mais très utiles.

• Comment utiliser une action dans Botpress pour appeler une API ?
• Comment rendre le contenu par défaut dans une action
• Comprendre la structure par défaut d'un élément intégré dans Botpress

J'ai aussi fait des vidéos sur ce sujet ! Cliquez ici pour regarder la première vidéo qui accompagne ce blog, et la deuxième partie est disponible .

Qu'est-ce qu'une action ?

Une action Botpress est un morceau de code que Botpress v12 peut utiliser dans un flux. Par défaut, Axios et d'autres bibliothèques sont regroupées dans une action Botpress . L'action que je vais créer utilisera un appel API vers le point de terminaison GIPHY, grâce auquel mon chatbot Botpress récupérera des gifs à partager avec son utilisateur.

Une parenthèse : Botpress Les actions et les crochets Botpress sont très similaires. Puisque je veux que le flux de conversation de Botpress déclenche la récupération, je vais utiliser une action. Les hooks sont plus couramment utilisés pour exécuter des codes à des moments spécifiques du cycle de vie du chatbot.

GIPHY API

Avant de créer le code Botpress , vous devez obtenir une clé API Giphy valide. Cette clé peut être trouvée sur le site web du développeur GIPHY. Commencez par créer une application Giphy.

Vous devez vous inscrire pour obtenir un compte Giphy, ou vous connecter si vous en avez déjà un.

Sur la page principale, créez une application et sélectionnez l'API de droite.

Oui, du côté droit - celui qui n'est pas recommandé.

La version SDK est certainement une option, mais vous devrez faire une étape supplémentaire dans Botpress - la bibliothèque SDK doit être injectée dans le composant d'action. Nous aborderons l'injection d'une bibliothèque externe dans Botpress dans un prochain blog !

Ensuite, donnez un nom et une description à l'application.

Sur l'écran suivant, GIPHY vous donne la clé API qui a été créée - conservez-la ! Vous utiliserez cette clé dans votre chatbot Botpress .

Il est temps d'ouvrir Botpress!

Démarrage Botpress

Il y a plusieurs façons de démarrer Botpress v12 :

Si vous exécutez Botpress localement, à partir de la source :

yarn run start

Ou à partir du fichier binaire

./bp

• Ou de Docker.
  

docker-compose up -d

Une fois sur Botpress, nous ajouterons la clé API et les nouvelles actions à un bot. Vous pouvez utiliser le bot que vous avez créé dans notre dernier blog, ou en créer un de toutes pièces.

À ce stade, vous pouvez ajouter votre clé API à partir de GIPHY.

Utilisation d'un environnement et mise en place d'une clé API

Vous devez aller dans votre chatbot - j'ai nommé mon chatbot giphy. Une fois dans votre chatbot, allez dans l'éditeur de code > Configurations > bot.config.json. A la fin du fichier, ajoutez votre clé API, avec le nom du chatbot et la variable apiKey:

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

Vous pouvez maintenant utiliser cet environnement dans votre action. Nous y reviendrons plus tard, mais l'idée ici est que la variable botConfig contiendra toutes les variables de votre bot.config.json. L'action giphy.js que vous allez créer dans l'étape suivante va définir et utiliser cette variable, et le premier paramètre de mergeBotConfig est le nom de votre bot (dans ce cas, giphy).

Créer l'action

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.

Voici le code que j'ai écrit pour mon action giphy.js - pour appeler l'API giphy.com et renvoyer l'image.

‍

``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 */}

‍

```

‍

Créer les nœuds et les transitions dans Botpress

Dans l'éditeur de flux, créez deux nouveaux nœuds et une nouvelle transition.

Dans le nœud d'entrée avec l'étiquette #1, j'utilise un texte brut comme commande.

(Ne vous inquiétez pas pour la deuxième transition ou le troisième nœud - nous les mettrons à jour plus tard dans ce blog).

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

Créer l'action pour afficher le carrousel

Renvoyer un giphy est une bonne chose en soi, mais nous pouvons la rendre plus puissante. Pour ce faire, nous pouvons utiliser un composant carrousel. BotpressLe composant carrousel d'EMC peut être utilisé pour afficher un grand nombre de choses utiles aux utilisateurs du chatbot - des t-shirts individuels provenant d'un site de commerce électronique, des éléments du menu d'un restaurant, des véhicules à louer, etc. Dans ce bot, je vais afficher des images provenant de la requête de recherche envoyée à l'API Giphy.

Une fois de plus, je vais créer une nouvelle action, cette fois-ci appelée Carousel.js. Cette action affichera 5 images renvoyées par Giphy lorsque nous enverrons la requête de recherche de l'utilisateur, et donnera à l'utilisateur la possibilité de choisir. Suivez le même processus que ci-dessus pour créer une nouvelle action, et incluez ce code :

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 */}

Après avoir créé l'action carrousel, vous pouvez mettre à jour les nœuds dans votre éditeur de flux afin qu'ils reconnaissent la commande carrousel.

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

Utiliser votre nouveau Chatbot Giphy

Et le tour est joué ! Désormais, votre robot peut comprendre et agir en fonction de deux commandes seulement :

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

Voici ce que j'ai obtenu lorsque j'ai dit!giphy dog à mon robot :

Et voici ce que j'ai obtenu lorsque j'ai dit!carousel cat à mon robot :

Prochaines étapes et formation continue

J'espère que ce tutoriel vous a aidé ! Si vous êtes intéressé, n'hésitez pas à rejoindre notre communauté Botpress , où vous pourrez poser des questions et apprendre des autres développeurs Botpress .

Si vous souhaitez obtenir davantage d'informations sur les sujets abordés aujourd'hui, voici une liste de ressources à explorer :

• Botpress docs sur la création d'actions
• Docs sur l'appel d'une API externe à partir de Botpress
• Vue d'ensemble de la plateformeBotpress v12, en particulier l'expérience des développeurs (vidéo)

Et si vous aimez ce contenu, inscrivez-vous à la lettre d'information Botpress !

‍