在最近的博文和视频中，我们向您展示了如何使用 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-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")
使用新的 Giphy 聊天机器人
然后就大功告成了！现在，你的机器人只需听懂两条命令并执行即可：
- !giphy <subject>
- !carousel <subject>
这就是我对机器人说!giphy dog 时得到的结果：
这就是我对机器人说!carousel cat 时得到的结果：
下一步行动和进一步学习
希望本教程对您有所帮助！如果您感兴趣，请加入我们的Botpress 社区，在这里您可以提出问题并向其他Botpress 开发人员学习。
如果您想了解更多关于我们今天所讲内容的信息，这里有一份资源清单，供您进一步探索：
- Botpress 关于创建动作的文档
- 调用外部应用程序接口的文档Botpress
- Botpress v12平台概述，特别是开发人员体验（视频）
如果您喜欢这些内容，请订阅 Botpress 新闻通讯！
.svg)
