ใช้ Botpress v12 Actions with the Giphy API | ชไนเดอร์ อิเล็คทริค Thailand Botpress บล็อก

สารบัญ

ขั้นตอนที่ 1. ชื่อของขั้นตอนไปที่นี่ตามที่คาดไว้

ในบล็อกโพสต์และวิดีโอล่าสุดเราได้แสดงวิธีการติดตั้งBotpress v12 โดยใช้ Docker Playground เล่นกับ Docker เป็นเพียงอาหารเรียกน้ําย่อยสําหรับสิ่งที่ Docker และ Botpress V12 สามารถบรรลุร่วมกัน! สําหรับบล็อกของวันนี้ฉันจะแสดงวิธีใช้พื้นฐานบางอย่าง - แต่มีประโยชน์มาก! - Botpress องค์ ประกอบ

วิธีใช้การดําเนินการใน Botpress เพื่อเรียกใช้ API
วิธีแสดงเนื้อหาเริ่มต้นในการดําเนินการ
ทําความเข้าใจโครงสร้างเริ่มต้นขององค์ประกอบในตัวใน Botpress

ฉันทําวิดีโอนี้ด้วย! คลิกที่นี่เพื่อดูวิดีโอแรก ที่มาพร้อมกับบล็อกนี้และ ส่วนที่สองออกมาแล้ว

การกระทําคืออะไร?

A Botpress การกระทําเป็นโค้ดชิ้นหนึ่งที่ Botpress V12 สามารถใช้ในโฟลว์ได้ ตามค่าเริ่มต้น Axios และไลบรารีอื่นๆ จะรวมอยู่ใน a Botpress การเคลื่อนไหว การดําเนินการที่ฉันจะสร้างจะใช้การเรียก API ไปยังปลายทาง GIPHY ซึ่งของฉัน Botpress แชทบอทจะดึง GIF เพื่อแชร์กับผู้ใช้

นอกเหนือจาก: Botpress การดําเนินการ & Botpress ตะขอมีความคล้ายคลึงกันมาก เนื่องจากฉันต้องการ Botpress โฟลว์การสนทนาเพื่อทริกเกอร์การดึงข้อมูลฉันจะใช้การกระทํา ตะขอมักใช้เพื่อรันโค้ด ณ จุดเฉพาะในวงจรชีวิตของแชทบอท

GIPHY API

ก่อนสร้าง Botpress รหัส คุณต้องได้รับคีย์ API Giphy ที่ถูกต้อง คีย์นี้สามารถพบได้ใน เว็บไซต์นักพัฒนา GIPHY คุณเริ่มต้นด้วยการสร้างแอป Giphy

คุณจะต้องสมัครบัญชี Giphy หรือเข้าสู่ระบบหากคุณมีอยู่แล้ว

ในหน้าหลัก ให้สร้างแอปพลิเคชันและเลือกตัวเลือก API ที่ถูกต้อง

ใช่จากด้านขวามือ - อันที่ไม่แนะนํา

เวอร์ชัน SDK เป็นตัวเลือกอย่างแน่นอน แต่คุณจะต้องทําตามขั้นตอนเพิ่มเติมใน Botpress - ไลบรารี SDK จําเป็นต้องถูกแทรกลงในคอมโพเนนต์การดําเนินการ เราจะครอบคลุมถึงการฉีดไลบรารีภายนอกเข้าไป Botpress ในบล็อกในอนาคต!

จากนั้นตั้งชื่อและคําอธิบายแอป

ในหน้าจอถัดไป GIPHY จะให้คีย์ API ที่สร้างขึ้นแก่คุณ - กดค้างไว้! คุณจะใช้คีย์นี้ในไฟล์ Botpress แชทบอท

ได้เวลาเปิดแล้ว Botpress!

เริ่ม ต้น Botpress

มีสองสามวิธีในการเริ่มต้น Botpress V12:

ถ้าคุณเป็น กำลัง เรียก ใช้ Botpress ในพื้นที่จากแหล่งที่มา:

เส้นด้ายเริ่มวิ่ง

หรือจากไฟล์ไบนารี

./bp

หรือจาก Docker

นักเทียบท่าเขียนขึ้น -d

เมื่อเข้ามา Botpressเราจะเพิ่มคีย์ API และการดําเนินการใหม่ให้กับบอท คุณสามารถใช้บอทที่คุณสร้างในบล็อกล่าสุดของเรา หรือสร้างบอทใหม่ตั้งแต่ต้น

ณ จุดนี้ คุณสามารถเพิ่มคีย์ API จาก GIPHY ได้

การใช้สภาพแวดล้อมและการตั้งค่าคีย์ 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 และส่งคืนรูปภาพ

‍

'''เจเอสเอ็กซ์

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")

สร้างการดําเนินการเพื่อแสดงภาพสไลด์

คืนกิฟฟี่ด้วยค่าปรับของมันเอง แต่เราสามารถทําให้มันทรงพลังขึ้นได้ เราสามารถใช้ส่วนประกอบแบบหมุนเพื่อทําเช่นนั้นได้ Botpressส่วนประกอบม้าหมุนสามารถใช้เพื่อแสดงสิ่งที่มีประโยชน์มากมายแก่ผู้ใช้แชทบอท เช่น เสื้อยืดแต่ละตัวจากเว็บไซต์อีคอมเมิร์ซ รายการในเมนูจากร้านอาหาร ยานพาหนะให้เช่า ฯลฯ ในบอทนี้ฉันจะแสดงรูปภาพจากคําค้นหาที่ส่งไปยัง Giphy API

อีกครั้งฉันจะสร้างการกระทําใหม่อันนี้เรียกว่า Carousel.js การดําเนินการนี้จะแสดงรูปภาพ 5 ภาพที่ส่งคืนจาก Giphy เมื่อเราส่งคําค้นหาของผู้ใช้ และให้ตัวเลือกแก่ผู้ใช้ในการเลือก ทําตามขั้นตอนเดียวกับด้านบนเพื่อสร้างการดําเนินการใหม่และรวมรหัสนี้:

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("!ม้าหมุน")