Utilizzo delle azioni di Botpress v12 con l'API di Giphy

In un recente post e video, abbiamo mostrato come installare Botpress v12 utilizzando Docker Playground. Play with Docker è solo un antipasto di ciò che Docker e Botpress v12 potrebbero realizzare insieme! Nel blog di oggi, vi mostrerò come utilizzare alcuni elementi di base - ma molto utili! - Botpress .

• Come usare un'azione in Botpress per chiamare un'API
• Come rendere il contenuto predefinito in un'azione
• Comprendere la struttura predefinita di un elemento incorporato in Botpress

Ho fatto dei video anche di questo! Cliccate qui per vedere il primo video che accompagna questo blog, e la seconda parte è in uscita

Cos'è un'azione?

Un'azione Botpress è un pezzo di codice che Botpress v12 può essere utilizzato in un flusso. Per impostazione predefinita, Axios e altre librerie sono raggruppate in un'azione Botpress . L'azione che sto per creare utilizzerà una chiamata API all'endpoint di GIPHY, attraverso la quale il mio chatbot Botpress recupererà le gif da condividere con i suoi utenti.

Un inciso: Botpress Le azioni e gli hook di Botpress sono molto simili. Poiché voglio che sia il flusso di conversazione di Botpress a innescare il recupero, utilizzerò un'azione. Gli hook sono più comunemente usati per eseguire codici in momenti specifici del ciclo di vita del chatbot.

API GIPHY

Prima di creare il codice Botpress , è necessario ottenere una chiave API Giphy valida. Questa chiave può essere trovata sul sito web degli sviluppatori di GIPHY. Si inizia creando un'app Giphy.

È necessario registrare un account Giphy o accedere se ne avete già uno.

Nella pagina principale, creare un'applicazione e selezionare la scelta API di destra.

Sì, dal lato destro, quello sconsigliato.

La versione SDK è sicuramente un'opzione, ma è necessario fare un passo in più in Botpress : la libreria SDK deve essere iniettata nel componente action. Parleremo dell'iniezione di una libreria esterna in Botpress in un prossimo blog!

Quindi, assegnare all'applicazione un nome e una descrizione.

Nella schermata successiva, GIPHY vi fornirà la chiave API che è stata creata: tenetela stretta! Questa chiave verrà utilizzata nel chatbot Botpress .

È ora di aprire Botpress!

Avvio Botpress

Ci sono alcuni modi per avviare Botpress v12:

Se si esegue Botpress localmente, dalla sorgente:

avvio dell'esecuzione del filato

Oppure dal file binario

./bp

• O da Docker.
  

docker-compose up -d

Una volta entrati in Botpress, aggiungeremo la chiave API e le nuove azioni a un bot. È possibile utilizzare il bot creato nell'ultimo blog o crearne uno da zero.

A questo punto, è possibile aggiungere la propria chiave API da GIPHY.

Utilizzo di un ambiente e impostazione della chiave API

È necessario entrare nel proprio chatbot - io ho chiamato il mio chatbot giphy. Una volta entrati nel chatbot, andare nell'editor di codice > Configurazioni > bot.config.json. Alla fine del file aggiungere la chiave API, con il nome del chatbot e la variabile apiKey:

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

Ora si può usare questo ambiente nella propria azione. Per saperne di più in seguito, l'idea è che la variabile botConfig conterrà tutte le variabili del bot.config.json. L'azione giphy.js che creeremo nel prossimo passo definirà e userà questa variabile e il primo parametro di mergeBotConfig è il nome del bot (in questo caso, giphy).

Creare l'azione

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.

Ecco il codice che ho scritto per la mia azione giphy.js - per chiamare l'API di giphy.com e restituire l'immagine.

‍

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

‍

```

‍

Creare i nodi e le transizioni in Botpress

Nell'editor di flusso, creare due nuovi nodi e una nuova transizione.

Nel nodo di ingresso con l'etichetta #1, sto usando un'istruzione di testo grezzo come comando.

(Non preoccupatevi della seconda transizione o del terzo nodo: li aggiorneremo più avanti in questo blog).

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

Creare l'azione per il rendering del carosello

La restituzione di un giphy va bene da sola, ma possiamo renderla più potente. Per farlo, possiamo usare un componente carosello. BotpressIl componente carosello può essere usato per mostrare molte cose utili agli utenti del chatbot: singole magliette di un sito di e-commerce, voci di menu di un ristorante, veicoli da noleggiare, ecc. In questo bot, mostrerò le immagini della query di ricerca inviata all'API Giphy.

Ancora una volta, creerò una nuova azione, questa volta chiamata Carousel.js. Questa azione mostrerà 5 immagini restituite da Giphy quando invieremo la query di ricerca dell'utente e darà all'utente la possibilità di scegliere. Seguiamo la stessa procedura di cui sopra per creare una nuova azione e includiamo questo codice:

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

Dopo aver creato l'azione carosello, è possibile aggiornare i nodi nell'editor di flusso per riconoscere il comando carosello.

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

Utilizzo del nuovo Chatbot Giphy

E il gioco è fatto! Ora il vostro bot può capire e agire in base a due soli comandi:

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

Ecco cosa ho ottenuto quando ho detto!giphy dog al mio bot:

Ed ecco cosa ho ottenuto quando ho detto!carousel cat al mio bot:

Prossimi passi e ulteriore apprendimento

Spero che questo tutorial vi sia stato utile! Se siete interessati, visitate e unitevi alla nostra comunità Botpress , dove potrete porre domande e imparare da altri sviluppatori di Botpress .

Se desiderate maggiori informazioni su ciò che abbiamo trattato oggi, ecco un elenco di risorse da approfondire:

• Botpress documenti sulla creazione di azioni
• Documenti su come chiamare un'API esterna da Botpress
• Panoramica della piattaformaBotpress v12, in particolare dell'esperienza degli sviluppatori (video)

E se vi piace questo contenuto, iscrivetevi alla newsletter di Botpress !

‍