用 Botpress v12 使用 Giphy API 的操作

步驟 1。步驟的標題按預期顯示在此處

在最近的博客文章和視頻中，我們向您展示了如何安裝 Botpress v12 使用 Docker Playground。玩 Docker 只是 Docker 和 Botpress V12可以一起實現！在今天的博客中，我將向您展示如何使用一些基本但非常有用的方法！- Botpress 元素。

如何在中使用操作 Botpress 調用介面
如何在動作中呈現預設內容
瞭解內置元素的預設結構 Botpress

我也製作了這個視頻！點選此處觀看此部落格隨附的第一個影片，第二部分已出爐

什麼是操作？

一個 Botpress 操作是一段代碼 Botpress v12可以在流中使用。默認情況下，Axios 和其他庫捆綁在 Botpress 行動。我將要創建的操作將使用對 GIPHY 端點的 API 調用，通過該 Botpress 聊天機器人將檢索 GIF 以與其用戶共用。

題外話： Botpress 行動和 Botpress 鉤子非常相似。因為我想要 Botpress 要觸發檢索的對話流，我將使用一個操作。鉤子更常用於在聊天機器人生命週期的特定點執行代碼。

吉菲原料葯

在創建 Botpress 代碼，您需要獲取有效的 API Giphy 金鑰。這個金鑰可以在 GIPHY 開發者網站上找到。您首先創建一個 Giphy 應用程式。

您需要註冊一個 Giphy 帳戶，或者如果您已經有一個帳戶，則需要登錄。

在主頁上，創建一個應用程式並選擇右側的 API 選項。

是的，從右側 - 不推薦的那個。

SDK 版本絕對是一個選項，但您需要執行額外的步驟 Botpress - 需要將 SDK 庫注入到操作元件中。我們將介紹如何將外部庫注入到 Botpress 在將來的博客中！

接下來，為應用命名和說明。

在下一個螢幕上，GIPHY 會給你創建的 API 金鑰 - 抓住它！您將在 Botpress 聊天機器人。

是時候打開了 Botpress!

開始 Botpress

有幾種方法可以開始 Botpress 12版：

如果你是運行 Botpress 本地，從源：

紗線運行開始

或從二進位檔

./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 的搜索查詢中的圖像。

我將再次創建一個新操作，這個操作稱為輪播.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”）