Gamit Botpress v12 Mga Pagkilos gamit ang Giphy API

Sa isang kamakailang post sa blog at video , ipinakita namin sa iyo kung paano mag-install Botpress v12 gamit ang Docker Playground. Ang Play with Docker ay isang appetizer lamang para sa kung ano ang Docker at Botpress v12 ay maaaring makamit nang magkasama! Para sa blog ngayon, ipapakita ko sa iyo kung paano gumamit ng ilang pangunahing - ngunit lubhang kapaki-pakinabang! - Botpress mga elemento.

• Paano gumamit ng Action sa Botpress para tumawag ng API
• Paano mag-render ng default na content sa isang aksyon
• Pag-unawa sa default na istraktura ng isang built-in na elemento sa Botpress

Gumawa din ako ng mga video nito! Mag-click dito upang panoorin ang unang video na kasama ng blog na ito, at ang pangalawang bahagi ay lumabas na

Ano ang isang Aksyon?

A Botpress Ang aksyon ay isang piraso ng code na Botpress v12 ay maaaring gamitin sa isang daloy. Bilang default, ang Axios at iba pang mga library ay naka-bundle sa a Botpress aksyon. Ang aksyon na gagawin ko ay gagamit ng API na tawag sa GIPHY endpoint, kung saan ang aking Botpress kukunin ng chatbot ang mga gif na ibabahagi sa user nito.

Isang tabi: Botpress Mga aksyon at Botpress Ang mga kawit ay halos magkapareho. Dahil gusto ko ang Botpress daloy ng pag-uusap upang ma-trigger ang retrieval, gagamit ako ng aksyon. Ang mga hook ay mas karaniwang ginagamit upang magsagawa ng mga code sa mga partikular na punto sa lifecycle ng chatbot.

GIPHY API

Bago likhain ang Botpress code, kailangan mong kumuha ng wastong API Giphy key. Ang susi na ito ay matatagpuan sa website ng developer ng GIPHY . Magsisimula ka sa paggawa ng Giphy App.

Kakailanganin mong mag-sign up para sa isang Giphy account, o mag-log in kung mayroon ka na nito.

Sa pangunahing pahina, lumikha ng isang application at piliin ang kanang kamay na pagpipilian ng API.

Oo, mula sa kanang bahagi - ang hindi inirerekomenda.

Ang bersyon ng SDK ay talagang isang opsyon, ngunit kakailanganin mong gumawa ng karagdagang hakbang Botpress - ang SDK library ay kailangang mai-inject sa action component. Tatalakayin namin ang pag-inject ng isang panlabas na library sa Botpress sa isang blog sa hinaharap!

Susunod, bigyan ang app ng pangalan at paglalarawan.

Sa susunod na screen, ibibigay sa iyo ng GIPHY ang API key na ginawa - hawakan ito! Gagamitin mo ang key na ito sa iyong Botpress chatbot.

Oras na para buksan Botpress !

Nagsisimula Botpress

Mayroong ilang mga paraan upang magsimula Botpress v12:

Kung nagpapatakbo ka Botpress nang lokal , mula sa pinagmulan:

pagsisimula ng yarn run

O mula sa binary file

./bp

• O mula sa Docker .
  

docker-compose up -d

Sabay pasok Botpress , idaragdag namin ang API key at ang mga bagong aksyon sa isang bot. Maaari mong gamitin ang bot na ginawa mo sa aming huling blog , o lumikha ng isa mula sa simula .

Sa puntong ito, maaari mong idagdag ang iyong API key mula sa GIPHY.

Paggamit ng Environment at Pagse-set up ng iyong API Key

Kailangan mong pumunta sa iyong chatbot - pinangalanan ko ang aking chatbot na giphy . Kapag nasa iyong chatbot, pumunta sa Code Editor > Configurations > bot.config.json. Sa dulo ng file idagdag ang iyong API key, na may pangalan ng chatbot at ang variable na apiKey :

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

Ngayon ay magagamit mo na ang kapaligirang ito sa iyong pagkilos. Higit pa tungkol doon sa ibang pagkakataon, ngunit ang ideya dito ay ang variable na botConfig ay maglalaman ng lahat ng mga variable mula sa iyong bot.config.json. Ang pagkilos na giphy.js na gagawin mo sa susunod na hakbang ay tutukuyin at gagamitin ang variable na iyon, at ang unang parameter ng mergeBotConfig ay ang pangalan ng iyong bot (sa kasong ito, giphy ).

Lumikha ng Aksyon

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.

Narito ang code na isinulat ko para sa aking aksyon na giphy.js - upang tawagan ang giphy.com API at ibalik ang imahe.

‍

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

‍

```

‍

Gawin ang mga Node at Transition sa Botpress

Sa editor ng daloy, lumikha ng dalawang bagong node at isang bagong Transition.

Sa entry node na may #1 na label, gumagamit ako ng raw text statement bilang isang command.

(Huwag mag-alala tungkol sa pangalawang paglipat o pangatlong node - ia-update namin ang mga iyon mamaya sa blog na ito.)

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

Gumawa ng Aksyon para I-render ang Carousel

Ibinabalik ang isang giphy sa sarili nitong multa, ngunit maaari nating gawin itong mas malakas. Maaari tayong gumamit ng bahagi ng carousel para gawin iyon. Botpress Ang bahagi ng carousel ng carousel ay maaaring gamitin upang magpakita ng maraming kapaki-pakinabang na bagay sa mga user ng chatbot - mga indibidwal na t-shirt mula sa isang e-commerce na site, mga item sa isang menu mula sa isang restaurant, mga sasakyang paparentahan, atbp. Sa bot na ito, pupunta ako upang magpakita ng mga larawan mula sa query sa paghahanap na ipinadala sa Giphy API.

Muli, gagawa ako ng bagong aksyon, ito ay tinatawag na Carousel.js. Ang pagkilos na ito ay magpapakita ng 5 larawang ibinalik mula sa Giphy kapag ipinadala namin ang query sa paghahanap ng user, at binibigyan ang user ng opsyong pumili. Sundin ang parehong proseso tulad ng sa itaas upang lumikha ng bagong aksyon, at isama ang code na ito:

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

Pagkatapos mong gawin ang carousel action, maaari mong i-update ang mga node sa iyong flow editor para makilala ang carousel command.

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

Gamit ang iyong Bagong Giphy Chatbot

At tapos ka na! Ngayon ay naiintindihan at nagagawa ng iyong bot ang dalawang utos:

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

Narito ang nakuha ko noong sinabi kong !giphy dog sa aking bot:

At narito ang nakuha ko nang sabihin kong !carousel cat sa aking bot:

Mga Susunod na Hakbang at Karagdagang Pag-aaral

Sana nakatulong sa iyo ang tutorial na ito! Kung interesado ka, mangyaring magtungo at sumali sa aming Botpress komunidad, kung saan maaari kang magtanong at matuto mula sa iba Botpress mga developer.

Kung gusto mo ng higit pang impormasyon sa tinalakay namin ngayon, narito ang isang listahan ng mga mapagkukunan para sa karagdagang paggalugad:

• Botpress docs sa paggawa ng mga aksyon
• Docs sa pagtawag sa isang panlabas na API mula sa Botpress
• Pangkalahatang-ideya ng Botpress v12 Platform , partikular na ang karanasan ng developer (video)

At kung gusto mo ang nilalamang ito, mag-sign up para sa newsletter ng Botpress !

‍