في منشور مدونة وفيديو حديث ، أوضحنا لك كيفية التثبيت Botpress v12 باستخدام ملعب Docker. اللعب مع Docker هو مجرد فاتح للشهية لما Docker و Botpress V12 يمكن أن يحقق معا! بالنسبة لمدونة اليوم ، سأوضح لك كيفية استخدام بعض الأدوات الأساسية - ولكنها مفيدة للغاية! - Botpress عناصر.
- كيفية استخدام إجراء في Botpress لاستدعاء واجهة برمجة تطبيقات
- كيفية عرض المحتوى الافتراضي في إجراء
- فهم البنية الافتراضية لعنصر مضمن في Botpress
لقد صنعت مقاطع فيديو لهذا أيضا! انقر هنا لمشاهدة الفيديو الأول المصاحب لهذه المدونة ، والجزء الثاني خارج
ما هو الإجراء؟
A Botpress الإجراء هو جزء من التعليمات البرمجية التي يمكن أن يستخدمها Botpress v12 في التدفق. بشكل افتراضي، يتم تجميع أكسيوس والمكتبات الأخرى في إجراء Botpress . سيستخدم الإجراء الذي سأقوم بإنشائه مكالمة API إلى نقطة نهاية GIPHY، والتي من خلالها سيسترجع Botpress chatbot الخاص بي صور متحركة لمشاركتها مع مستخدمه.
جانباً: Botpress الإجراءات و Botpress الخطافات متشابهة جدًا. نظرًا لأنني أريد تدفق المحادثة Botpress لتشغيل الاسترجاع، سأستخدم إجراءً. تُستخدم الخطافات بشكل أكثر شيوعًا لتنفيذ الرموز في نقاط محددة في دورة حياة chatbot .
واجهة برمجة تطبيقات GIPHY
قبل إنشاء ملف Botpress رمز ، تحتاج إلى الحصول على مفتاح API Giphy صالح. يمكن العثور على هذا المفتاح على موقع مطور GIPHY. تبدأ بإنشاء تطبيق Giphy.
ستحتاج إلى التسجيل للحصول على حساب Giphy ، أو تسجيل الدخول إذا كان لديك حساب بالفعل.
في الصفحة الرئيسية ، قم بإنشاء تطبيق وحدد اختيار واجهة برمجة التطبيقات الأيمن.
نعم ، من الجانب الأيمن - الجانب الذي لا ينصح به.
يعد إصدار SDK خيارا بالتأكيد ، ولكنك ستحتاج إلى القيام بخطوة إضافية في Botpress - يجب حقن مكتبة SDK في مكون الإجراء. سنغطي حقن مكتبة خارجية في Botpress في مدونة مستقبلية!
بعد ذلك ، قم بإعطاء التطبيق اسما ووصفا.
في الشاشة التالية، ستعطيك GIPHY مفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه - احتفظ به! ستستخدم هذا المفتاح في حسابك Botpress chatbot .
حان وقت الافتتاح Botpress!
بدء Botpress
هناك عدة طرق للبدء Botpress الإصدار 12:
إذا كنت تشغيل Botpress محليا ، من المصدر:
بدء تشغيل الغزل
أو من الملف الثنائي
./bp
- أو من دكر.
عامل ميناء يؤلف -D
مرة واحدة في Botpress، سنضيف مفتاح واجهة برمجة التطبيقات والإجراءات الجديدة إلى الروبوت. يمكنك استخدام الروبوت الذي أنشأته في مدونتنا الأخيرة ، أو إنشاء واحد من البداية.
في هذه المرحلة ، يمكنك إضافة مفتاح API الخاص بك من GIPHY.
استخدام بيئة وإعداد مفتاح API الخاص بك
تحتاج إلى الانتقال إلى chatbot الخاص بك - لقد قمت بتسمية chatbot giphy. بمجرد الدخول إلى chatbot الخاص بك، انتقل إلى محرر التعليمات البرمجية > التكوينات > bot.config.json. في نهاية الملف أضف مفتاح API الخاص بك، مع اسم chatbot والمتغير 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 وإرجاع الصورة.
'''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يمكن استخدام مكون الرف الدائري لعرض الكثير من الأشياء المفيدة لمستخدمي chatbot - قمصان فردية من موقع تجارة إلكترونية، أو عناصر في قائمة طعام من مطعم، أو سيارات للإيجار، إلخ. في هذا الروبوت، سأعرض صورًا من استعلام البحث المرسل إلى واجهة برمجة تطبيقات Giphy.
مرة أخرى ، سأقوم بإنشاء إجراء جديد ، هذا الإجراء يسمى 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 للروبوت الخاص بي:
الخطوات التالية والتعلم الإضافي
آمل أن يكون هذا البرنامج التعليمي قد ساعدك! إذا كنت مهتما ، فيرجى التوجه والانضمام إلينا Botpress المجتمع، حيث يمكنك طرح الأسئلة والتعلم من الآخرين Botpress المطورين.
إذا كنت تريد المزيد من المعلومات حول ما قمنا بتغطيته اليوم ، فإليك قائمة بالموارد لمزيد من الاستكشاف:
- Botpress مستندات حول إنشاء الإجراءات
- مستندات حول استدعاء واجهة برمجة تطبيقات خارجية من Botpress
- نظرة عامة على Botpress منصة v12 ، وخاصة تجربة المطور (فيديو)
وإذا أعجبك هذا المحتوى ، اشترك في Botpress النشرة الإخبارية!
جدول المحتويات
ابق على اطلاع دائم بأحدث ما توصل إليه وكلاء الذكاء الاصطناعي
شارك هذا على:
.svg)
