استخدام Botpress إجراءات الإصدار 12 باستخدام واجهة برمجة تطبيقات Giphy

جدول المحتويات

الخطوة 1. عنوان الخطوة يذهب هنا كما هو متوقع

في منشور مدونة وفيديو حديث ، أوضحنا لك كيفية التثبيت Botpress v12 باستخدام ملعب Docker. اللعب مع Docker هو مجرد فاتح للشهية لما Docker و Botpress V12 يمكن أن يحقق معا! بالنسبة لمدونة اليوم ، سأوضح لك كيفية استخدام بعض الأدوات الأساسية - ولكنها مفيدة للغاية! - Botpress عناصر.

كيفية استخدام إجراء في Botpress لاستدعاء واجهة برمجة تطبيقات
كيفية عرض المحتوى الافتراضي في إجراء
فهم البنية الافتراضية لعنصر مضمن في Botpress

لقد صنعت مقاطع فيديو لهذا أيضا! انقر هنا لمشاهدة الفيديو الأول المصاحب لهذه المدونة ، والجزء الثاني خارج

ما هو الإجراء؟

A Botpress الإجراء هو جزء من التعليمات البرمجية التي Botpress يمكن استخدام الإصدار 12 في تدفق. بشكل افتراضي ، يتم تجميع Axios والمكتبات الأخرى في ملف Botpress فعل. سيستخدم الإجراء الذي سأقوم بإنشائه استدعاء واجهة برمجة التطبيقات إلى نقطة نهاية GIPHY ، والتي من خلالها Botpress سيقوم ChatBot باسترداد صور GIF لمشاركتها مع مستخدمه.

جانبا: Botpress الإجراءات و Botpress السنانير متشابهة جدا. بما أنني أريد Botpress تدفق المحادثة لبدء الاسترجاع ، سأستخدم إجراء. تستخدم الخطافات بشكل أكثر شيوعا لتنفيذ الرموز في نقاط محددة في دورة حياة chatbot.

واجهة برمجة تطبيقات GIPHY

قبل إنشاء ملف Botpress رمز ، تحتاج إلى الحصول على مفتاح API Giphy صالح. يمكن العثور على هذا المفتاح على موقع مطور GIPHY. تبدأ بإنشاء تطبيق Giphy.

ستحتاج إلى التسجيل للحصول على حساب Giphy ، أو تسجيل الدخول إذا كان لديك حساب بالفعل.

في الصفحة الرئيسية ، قم بإنشاء تطبيق وحدد اختيار واجهة برمجة التطبيقات الأيمن.

نعم ، من الجانب الأيمن - الجانب الذي لا ينصح به.

يعد إصدار SDK خيارا بالتأكيد ، ولكنك ستحتاج إلى القيام بخطوة إضافية في Botpress - يجب حقن مكتبة SDK في مكون الإجراء. سنغطي حقن مكتبة خارجية في Botpress في مدونة مستقبلية!

بعد ذلك ، قم بإعطاء التطبيق اسما ووصفا.

في الشاشة التالية ، سيعطيك GIPHY مفتاح API الذي تم إنشاؤه - تمسك به! ستستخدم هذا المفتاح في Botpress روبوت الدردشة.

حان وقت الافتتاح Botpress!

بدء Botpress

هناك عدة طرق للبدء Botpress الإصدار 12:

إذا كنت تشغيل Botpress محليا ، من المصدر:

بدء تشغيل الغزل

أو من الملف الثنائي

./bp

أو من دكر.

عامل ميناء يؤلف -D

مرة واحدة في Botpress، سنضيف مفتاح واجهة برمجة التطبيقات والإجراءات الجديدة إلى الروبوت. يمكنك استخدام الروبوت الذي أنشأته في مدونتنا الأخيرة ، أو إنشاء واحد من البداية.

في هذه المرحلة ، يمكنك إضافة مفتاح API الخاص بك من GIPHY.

استخدام بيئة وإعداد مفتاح API الخاص بك

تحتاج إلى الذهاب إلى chatbot الخاص بك - لقد سميت chatbot giphy الخاص بي. بمجرد الدخول إلى روبوت الدردشة الخاص بك ، انتقل إلى محرر التعليمات البرمجية > التكوينات > 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

لقد انتهيت! الآن يمكن للروبوت الخاص بك فهم أمرين فقط والتصرف بناء عليهما:

!giphy <subject>
!carousel <subject>

إليك ما حصلت عليه عندما قلت !giphy dog للروبوت الخاص بي:

وإليك ما حصلت عليه عندما قلت !carousel cat للروبوت الخاص بي:

الخطوات التالية والتعلم الإضافي

آمل أن يكون هذا البرنامج التعليمي قد ساعدك! إذا كنت مهتما ، فيرجى التوجه والانضمام إلينا Botpress المجتمع، حيث يمكنك طرح الأسئلة والتعلم من الآخرين Botpress المطورين.

إذا كنت تريد المزيد من المعلومات حول ما قمنا بتغطيته اليوم ، فإليك قائمة بالموارد لمزيد من الاستكشاف: