Botpress v12 Eylemlerini Giphy API ile kullanma

Yakın tarihli bir blog yazısı ve videoda, Docker Playground'u kullanarak Botpress v12'yi nasıl kuracağınızı gösterdik. Docker ile oynamak, Docker ve Botpress v12'nin birlikte başarabilecekleri için sadece bir iştah açıcı! Bugünün blogunda, size birkaç temel - ama çok kullanışlı! - Botpress öğelerini nasıl kullanacağınızı göstereceğim.

• API çağırmak için Botpress adresinde bir Eylem nasıl kullanılır?
• Bir eylemde varsayılan içerik nasıl oluşturulur?
• Yerleşik bir öğenin varsayılan yapısını anlama Botpress

Bunun da videosunu çektim! Bu bloga eşlik eden ilk videoyu izlemek için buraya tıklayın ve ikinci bölüm çıktı

Eylem nedir?

Bir Botpress Eylemi, Botpress v12'nin bir akışta kullanabileceği bir kod parçasıdır. Varsayılan olarak, Axios ve diğer kütüphaneler bir Botpress eyleminde paketlenmiştir. Oluşturacağım eylem, GIPHY uç noktasına bir API çağrısı kullanacak ve bu sayede Botpress sohbet botum, kullanıcısıyla paylaşmak üzere gifleri alacak.

Bir kenara: Botpress Eylemler ve Botpress Kancaları birbirine çok benzer. Botpress konuşma akışının geri almayı tetiklemesini istediğim için bir eylem kullanacağım. Kancalar daha çok sohbet botu yaşam döngüsünün belirli noktalarında kodları çalıştırmak için kullanılır.

GIPHY API

Botpress kodunu oluşturmadan önce geçerli bir API Giphy anahtarı almanız gerekir. Bu anahtar GIPHY geliştirici web sitesinde bulunabilir. Bir Giphy Uygulaması oluşturarak başlarsınız.

Bir Giphy hesabına kaydolmanız veya zaten bir hesabınız varsa giriş yapmanız gerekir.

Ana sayfada, bir uygulama oluşturun ve sağ taraftaki API seçeneğini seçin.

Evet, sağ taraftan - tavsiye edilmeyen taraftan.

SDK sürümü kesinlikle bir seçenektir, ancak Botpress adresinde fazladan bir adım atmanız gerekecektir - SDK kütüphanesinin eylem bileşenine enjekte edilmesi gerekir. Harici bir kütüphaneyi Botpress adresine enjekte etmeyi gelecekteki bir blogda ele alacağız!

Ardından, uygulamaya bir ad ve açıklama verin.

Bir sonraki ekranda, GIPHY size oluşturulan API anahtarını verecektir - bu anahtarı elinizde tutun! Bu anahtarı Botpress sohbet botunuzda kullanacaksınız.

Botpress adresini açma zamanı!

Başlangıç Botpress

Botpress v12 adresini başlatmanın birkaç yolu vardır:

Eğer Botpress adresini yerel olarak çalıştırıyorsanız, kaynaktan:

iplik çalıştırma başlangıcı

Veya ikili dosyadan

./bp

• Ya da Docker'dan.
  

docker-compose up -d

Botpress adresine girdikten sonra, API anahtarını ve yeni eylemleri bir bota ekleyeceğiz. Son blogumuzda oluşturduğunuz botu kullanabilir veya sıfırdan bir tane oluşturabilirsiniz.

Bu noktada, API anahtarınızı GIPHY'den ekleyebilirsiniz.

Bir Ortam Kullanma ve API Anahtarınızı Ayarlama

Sohbet botunuza girmeniz gerekiyor - ben sohbet botuma giphy adını verdim. Sohbet botunuza girdikten sonra Kod Düzenleyici > Yapılandırmalar > bot.config.json'a gidin. Dosyanın sonuna API anahtarınızı, sohbet botunun adını ve apiKey değişkenini ekleyin:

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

Artık bu ortamı eyleminizde kullanabilirsiniz. Bu konuda daha sonra bilgi vereceğiz, ancak buradaki fikir botConfig değişkeninin bot.config.json dosyanızdaki tüm değişkenleri içerecek olmasıdır. Bir sonraki adımda oluşturacağınız giphy.js eylemi bu değişkeni tanımlayacak ve kullanacaktır ve mergeBotConfig'in ilk parametresi botunuzun adıdır (bu durumda giphy).

Eylemi Oluşturun

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.

İşte giphy.js eylemim için yazdığım kod - giphy.com API'sini çağırmak ve görüntüyü döndürmek için.

‍

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

‍

```

‍

Düğümleri ve Geçişleri Oluşturma Botpress

Akış düzenleyicisinde iki yeni düğüm ve yeni bir Geçiş oluşturun.

#1 etiketli giriş düğümünde, komut olarak ham bir metin ifadesi kullanıyorum.

(İkinci geçiş veya üçüncü düğüm için endişelenmeyin - onları bu blogun ilerleyen bölümlerinde güncelleyeceğiz).

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

Karuseli Oluşturmak için Eylem Oluşturma

Bir giphy'yi kendi başına döndürmek iyidir, ancak bunu daha güçlü hale getirebiliriz. Bunu yapmak için bir carousel bileşeni kullanabiliriz. Botpress'in carousel bileşeni, chatbot kullanıcılarına birçok yararlı şeyi görüntülemek için kullanılabilir - bir e-ticaret sitesinden tek tek tişörtler, bir restoranın menüsündeki öğeler, kiralanacak araçlar vb. Bu botta, Giphy API'sine gönderilen arama sorgusundaki resimleri görüntüleyeceğim.

Bir kez daha, Carousel.js adında yeni bir eylem oluşturacağım. Bu eylem, kullanıcının arama sorgusunu gönderdiğimizde Giphy'den döndürülen 5 görüntüyü gösterecek ve kullanıcıya seçme seçeneği sunacak. Yeni bir eylem oluşturmak için yukarıdaki işlemin aynısını uygulayın ve bu kodu ekleyin:

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

Karusel eylemini oluşturduktan sonra, akış düzenleyicinizdeki düğümleri karusel komutunu tanıyacak şekilde güncelleyebilirsiniz.

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

Yeni Giphy Chatbot'unuzu Kullanma

Ve işiniz bitti! Artık botunuz sadece iki komutu anlayabilir ve bunlara göre hareket edebilir:

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

İşte botuma!giphy dog dediğimde elde ettiğim şey:

Ve işte botuma!carousel cat dediğimde elde ettiğim şey:

Sonraki Adımlar ve İleri Öğrenim

Umarım bu eğitim size yardımcı olmuştur! Eğer ilgileniyorsanız, lütfen Botpress topluluğumuza katılın, burada sorularınızı sorabilir ve diğer Botpress geliştiricilerinden öğrenebilirsiniz.

Bugün ele aldıklarımız hakkında daha fazla bilgi edinmek isterseniz, işte daha fazla araştırma yapabileceğiniz kaynakların bir listesi:

• Botpress eylem oluşturma dokümanları
• Harici bir API'nin çağrılmasına ilişkin dokümanlar Botpress
• Botpress v12 Platformuna, özellikle de geliştirici deneyimine genel bakış (video)

Ve bu içeriği beğendiyseniz, Botpress haber bültenine kaydolun!

‍