ในบล็อกโพสต์และวิดีโอล่าสุดเราได้แสดงวิธีการติดตั้ง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("!ม้าหมุน")
การใช้ Giphy Chatbot ใหม่ของคุณ
และคุณทําเสร็จแล้ว! ตอนนี้บอทของคุณสามารถเข้าใจและดําเนินการกับคําสั่งเพียงสองคําสั่ง:
- !giphy <subject>
- !carousel <subject>
นี่คือสิ่งที่ฉันได้รับเมื่อฉันพูดว่า !giphy dog กับบอทของฉัน:
และนี่คือสิ่งที่ฉันได้รับเมื่อฉันพูดว่า !carousel cat to my bot:
ขั้นตอนต่อไปและการเรียนรู้เพิ่มเติม
ฉันหวังว่าบทช่วยสอนนี้จะช่วยคุณได้! หากคุณสนใจโปรดตรงไปและเข้าร่วมกับเรา Botpress ชุมชนที่คุณสามารถตั้งคําถามและเรียนรู้จากผู้อื่น Botpress นัก พัฒนา
หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เรากล่าวถึงในวันนี้นี่คือรายการแหล่งข้อมูลสําหรับการสํารวจเพิ่มเติม:
- Botpress เอกสารเกี่ยวกับ การสร้างการดําเนินการ
- เอกสารเกี่ยวกับการ เรียกใช้ API ภายนอก จาก Botpress
- ภาพรวมของการ Botpress แพลตฟอร์ม v12 โดยเฉพาะประสบการณ์ของนักพัฒนา (วิดีโอ)
และถ้าคุณชอบเนื้อหานี้ ลงทะเบียนสําหรับ Botpress จดหมายข่าว!
สารบัญ
ติดตามข่าวสารล่าสุดเกี่ยวกับตัวแทน AI
แบ่งปันสิ่งนี้บน:
.svg)
