Sử dụng Botpress Hành động v12 với API Giphy

Trong một bài đăng trên blog và video gần đây, chúng tôi đã chỉ cho bạn cách cài đặt Botpress v12 sử dụng Sân chơi Docker. Chơi với Docker chỉ là một món khai vị cho những gì Docker và Botpress V12 có thể đạt được cùng nhau! Đối với blog hôm nay, tôi sẽ chỉ cho bạn cách sử dụng một vài điều cơ bản - nhưng rất hữu ích! - Botpress Yếu tố.

• Cách sử dụng Hành động trong Botpress để gọi API
• Cách hiển thị nội dung mặc định trong một hành động
• Hiểu cấu trúc mặc định của một phần tử tích hợp trong Botpress

Tôi cũng đã làm video về điều này! Bấm vào đây để xem video đầu tiên đi kèm với blog này và phần thứ hai đã ra mắt

Hành động là gì?

Một Botpress Hành động là một đoạn mã Botpress v12có thể sử dụng trong một luồng. Theo mặc định, Axios và các thư viện khác được đóng gói trong một Botpress hành động. Hành động tôi sẽ tạo sẽ sử dụng lệnh gọi API đến điểm cuối GIPHY , qua đó Botpress Chatbot sẽ truy xuất ảnh GIF để chia sẻ với người dùng.

Một bên: Botpress Hành động & Botpress Móc rất giống nhau. Vì tôi muốn Botpress luồng hội thoại để kích hoạt truy xuất, tôi sẽ sử dụng một hành động. Hook được sử dụng phổ biến hơn để thực thi mã tại các điểm cụ thể trong vòng đời chatbot.

GIPHY API

Trước khi tạo Botpress mã, bạn cần lấy khóa API Giphy hợp lệ. Khóa này có thể được tìm thấy trên trang web của nhà phát triển GIPHY. Bạn bắt đầu bằng cách tạo một Ứng dụng Giphy.

Bạn sẽ cần đăng ký tài khoản Giphy hoặc đăng nhập nếu bạn đã có.

Trên trang chính, tạo một ứng dụng và chọn lựa chọn API phù hợp.

Có, từ phía bên tay phải - cái không được khuyến khích.

Phiên bản SDK chắc chắn là một tùy chọn, nhưng bạn sẽ cần thực hiện thêm một bước Botpress - thư viện SDK cần được đưa vào thành phần hành động. Chúng tôi sẽ đề cập đến việc đưa một thư viện bên ngoài vào Botpress trong một blog trong tương lai!

Tiếp theo, đặt tên và mô tả cho ứng dụng.

Trên màn hình tiếp theo, GIPHY sẽ cung cấp cho bạn khóa API đã được tạo - hãy giữ lấy nó! Bạn sẽ sử dụng khóa này trong Botpress chatbot.

Đã đến lúc mở Botpress!

Bắt đầu Botpress

Có một vài cách để bắt đầu Botpress Câu 12:

Nếu bạn Chạy Botpress Tại địa phương, từ nguồn:

Bắt đầu chạy sợi

Hoặc từ tệp nhị phân

./Bp

• Hoặc từ Docker.
  

docker-compose up -d

Một lần vào Botpress, chúng ta sẽ thêm khóa API và các hành động mới vào bot. Bạn có thể sử dụng bot bạn đã tạo trong blog cuối cùng của chúng tôi hoặc tạo một bot từ đầu.

Tại thời điểm này, bạn có thể thêm khóa API của mình từ GIPHY.

Sử dụng Môi trường và Thiết lập Khóa API của bạn

Bạn cần vào chatbot của mình - Tôi đã đặt tên cho chatbot của mình là giphy. Khi ở trong chatbot của bạn, hãy vào Trình chỉnh sửa mã > Cấu hình > bot.config.json. Ở cuối tệp, thêm khóa API của bạn, với tên của chatbot và biến apiKey:

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

Bây giờ bạn có thể sử dụng môi trường này trong hành động của bạn. Thêm về điều đó sau, nhưng ý tưởng ở đây là biến botConfig sẽ chứa tất cả các biến từ bot.config.json của bạn. Hành động giphy.js mà bạn sẽ tạo trong bước tiếp theo sẽ xác định và sử dụng biến đó và tham số đầu tiên của mergeBotConfig là tên bot của bạn (trong trường hợp này là giphy).

Tạo hành động

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.

Đây là mã mà tôi đã viết cho hành động giphy.js của mình - để gọi API giphy.com và trả về hình ảnh.

‍

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

‍

'''

‍

Tạo các nút & chuyển tiếp trong Botpress

Trong trình chỉnh sửa luồng, tạo hai nút mới và một Chuyển tiếp mới.

Trong nút nhập với nhãn #1, tôi đang sử dụng câu lệnh văn bản thô làm lệnh.

(Đừng lo lắng về chuyển đổi thứ hai hoặc nút thứ ba - chúng tôi sẽ cập nhật chúng sau trong blog này.)

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

Tạo hành động để hiển thị băng chuyền

Tự trả lại một giphy tốt, nhưng chúng ta có thể làm cho nó mạnh hơn. Chúng ta có thể sử dụng một thành phần băng chuyền để làm điều đó. BotpressThành phần băng chuyền của Carousel có thể được sử dụng để hiển thị nhiều thứ hữu ích cho người dùng chatbot - áo phông cá nhân từ trang thương mại điện tử, các mặt hàng trên menu từ nhà hàng, xe cho thuê, v.v. Trong bot này, tôi sẽ hiển thị hình ảnh từ truy vấn tìm kiếm được gửi đến API Giphy.

Một lần nữa, tôi sẽ tạo ra một hành động mới, hành động này được gọi là Carousel.js. Hành động này sẽ hiển thị 5 hình ảnh được trả về từ Giphy khi chúng tôi gửi truy vấn tìm kiếm của người dùng và cung cấp cho người dùng tùy chọn để chọn. Thực hiện theo quy trình tương tự như trên để tạo một hành động mới và bao gồm mã này:

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

Sau khi tạo hành động quay vòng, bạn có thể cập nhật các nút trong trình chỉnh sửa luồng để nhận dạng lệnh quay vòng.

event.payload.text.startsWith("!băng chuyền")

Sử dụng Chatbot Giphy mới của bạn

Và bạn đã hoàn tất! Bây giờ bot của bạn có thể hiểu và hành động chỉ dựa trên hai lệnh:

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

Đây là những gì tôi nhận được khi tôi nói !giphy dog với bot của tôi:

Và đây là những gì tôi nhận được khi tôi nói !carousel cat với bot của tôi:

Các bước tiếp theo & Học thêm

Tôi hy vọng hướng dẫn này đã giúp bạn! Nếu bạn quan tâm, vui lòng đi qua và tham gia Botpress cộng đồng, nơi bạn có thể đặt câu hỏi và học hỏi từ những người khác Botpress Phát triển.

Nếu bạn muốn biết thêm thông tin về những gì chúng tôi đã đề cập hôm nay, dưới đây là danh sách các tài nguyên để khám phá thêm:

• Botpress Tài liệu về cách tạo hành động
• Tài liệu về cách gọi API bên ngoài từ Botpress
• Tổng quan về Botpress Nền tảng v12, đặc biệt là trải nghiệm của nhà phát triển (video)

Và nếu bạn thích nội dung này, Đăng ký Botpress Bản tin!

‍