将Botpress v12 操作与 Giphy API 结合使用 |Botpress 博客

步骤 1：该步骤的标题如期出现在这里

在最近的博文和视频中，我们向您展示了如何使用 Docker Playground 安装Botpress v12。Docker Playground 只是 Docker 和Botpress v12 的开胃菜！在今天的博客中，我将向您展示如何使用一些基本但非常有用的元素！-Botpress 元素。

如何在Botpress 中使用 Action 调用 API
如何在操作中呈现默认内容
了解内置元素的默认结构Botpress

我还制作了相关视频！点击这里观看本博客的第一段视频，第二部分已经发布

什么是行动？

Botpress 动作是Botpress v12 可以在流程中使用的一段代码。默认情况下，Axios 和其他库捆绑在Botpress 动作中。我要创建的动作将使用 API 调用GIPHY端点，通过它，我的Botpress 聊天机器人将获取 gifs 与用户分享。

题外话：Botpress 操作和Botpress 钩子非常相似。因为我想让Botpress 对话流触发检索，所以我要使用动作。钩子更常用于在聊天机器人生命周期的特定时间点执行代码。

GIPHY API

在创建Botpress 代码之前，你需要获得一个有效的 API Giphy 密钥。该密钥可在GIPHY 开发者网站上找到。首先创建一个 Giphy 应用程序。

您需要注册一个 Giphy 账户，如果已经有账户，也可以登录。

在主页上创建应用程序，然后选择右侧的 API 选项。

是的，从右手边--不建议使用的那个。

SDK 版本无疑是一种选择，但您需要在Botpress 中执行额外的步骤--SDK 库需要注入到动作组件中。我们将在今后的博客中介绍如何将外部库注入Botpress ！

接下来，给应用程序起个名字并加以描述。

在下一个屏幕中，GIPHY 会给你创建的 API 密钥--请妥善保管！您将在Botpress 聊天机器人中使用这个密钥。

是时候打开Botpress 了！

开始Botpress

启动Botpress v12 有几种方法：

如果您在本地运行Botpress ，请从源代码运行：

yarn run start

或来自二进制文件

./bp

或来自 Docker。

docker-compose up -d

进入Botpress 后，我们将把 API 密钥和新操作添加到机器人中。您可以使用上一篇博客中创建的机器人，也可以从头开始创建一个。

这时，你可以从 GIPHY 添加你的 API 密钥。

使用环境和设置 API 密钥

你需要进入你的聊天机器人--我给我的聊天机器人起名叫giphy。进入聊天机器人后，进入代码编辑器 > 配置 > bot.config.json。在文件末尾添加你的 API 密钥、聊天机器人名称和变量apiKey：

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

现在，你可以在操作中使用这个环境。稍后再详述，但这里的意思是，变量 botConfig 将包含 bot.config.json 中的所有变量。下一步要创建的 giphy.js 操作将定义并使用该变量，而 mergeBotConfig 的第一个参数就是机器人的名称（在本例中为giphy）。

创建行动

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.

以下是我为 giphy.js 操作编写的代码，用于调用 giphy.com API 并返回图片。

‍

```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 () => { 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}&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 */}

‍

```

‍

在Botpress

在流程编辑器中，创建两个新节点和一个新转场。

在带有 #1 标签的入口节点中，我使用原始文本语句作为命令。

(不用担心第二个过渡或第三个节点，我们稍后会在本博客中更新）。

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

创建渲染旋转木马的动作

返回 giphy 本身没有问题，但我们可以让它变得更强大。为此，我们可以使用旋转木马组件。Botpress旋转木马组件可用于向聊天机器人用户显示许多有用的东西--电子商务网站上的单件 T 恤、餐厅菜单上的菜品、出租的车辆等。在这个机器人中，我将显示发送到 Giphy API 的搜索查询中的图片。

我将再次创建一个新操作，这个操作名为 Carousel.js。当我们向用户发送搜索查询时，该操作将显示从 Giphy 返回的 5 张图片，并让用户进行选择。按照上面的相同流程创建一个新动作，并包含这段代码：

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 () => { const regex = /!carousel/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!carousel <Picture to search>`' 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}&api_key=${botConfig.giphy.apiKey}` ) let cards = [] for (let i = 0; i < 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 */}

创建旋转木马操作后，可以更新流程编辑器中的节点，以识别旋转木马命令。

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