Utilizar as acções Botpress v12 com a API Giphy

Numa publicação recente no blogue e num vídeo, mostrámos-lhe como instalar o Botpress v12 utilizando o Docker Playground. Brincar com o Docker é apenas um aperitivo do que o Docker e o Botpress v12 poderiam alcançar juntos! No blogue de hoje, vou mostrar-lhe como utilizar alguns elementos básicos - mas muito úteis! - Botpress elementos.

• Como utilizar uma ação em Botpress para chamar uma API
• Como apresentar conteúdo predefinido numa ação
• Compreender a estrutura predefinida de um elemento incorporado em Botpress

Também fiz vídeos sobre isto! Clique aqui para ver o primeiro vídeo que acompanha este blogue, e a segunda parte está disponível

O que é uma ação?

Uma ação Botpress é uma parte de código que Botpress v12pode utilizar num fluxo. Por predefinição, o Axios e outras bibliotecas são agrupados numa ação Botpress . A ação que vou criar utilizará uma chamada de API para o ponto de extremidade GIPHY, através da qual o meu chatbot Botpress irá obter gifs para partilhar com o seu utilizador.

Um aparte: Botpress As acções e os Botpress Hooks são muito semelhantes. Como eu quero que o fluxo de conversação do Botpress acione a recuperação, vou usar uma ação. Os ganchos são mais frequentemente utilizados para executar códigos em pontos específicos do ciclo de vida do chatbot.

API DO GIPHY

Antes de criar o código Botpress , é necessário obter uma chave API Giphy válida. Esta chave pode ser encontrada no sítio Web do programador GIPHY. Comece por criar uma aplicação Giphy.

Terá de se inscrever numa conta Giphy ou iniciar sessão se já tiver uma.

Na página principal, crie uma aplicação e seleccione a opção API do lado direito.

Sim, do lado direito - o que não é recomendado.

A versão SDK é definitivamente uma opção, mas será necessário executar uma etapa extra em Botpress - a biblioteca SDK precisa ser injetada no componente de ação. Cobriremos a injeção de uma biblioteca externa no Botpress em um blog futuro!

Em seguida, dê um nome e uma descrição à aplicação.

No ecrã seguinte, o GIPHY dá-lhe a chave API que foi criada - guarde-a! Esta chave será utilizada no seu chatbot Botpress .

Está na altura de abrir Botpress!

Início Botpress

Existem algumas formas de iniciar o Botpress v12:

Se estiver a executar Botpress localmente, a partir da fonte:

execução do fio início

Ou a partir do ficheiro binário

./bp

• Ou do Docker.
  

docker-compose up -d

Uma vez em Botpress, adicionaremos a chave da API e as novas acções a um bot. Pode utilizar o bot que criou no nosso último blogue ou criar um de raiz.

Nesta altura, pode adicionar a sua chave de API do GIPHY.

Usando um ambiente e configurando sua chave de API

Tens de entrar no teu chatbot - eu chamei ao meu chatbot giphy. Uma vez no seu chatbot, vá no Editor de Código > Configurações > bot.config.json. No final do ficheiro, adiciona a tua chave API, com o nome do chatbot e a variável apiKey:

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

Agora você pode usar esse ambiente na sua ação. Mais sobre isso depois, mas a ideia aqui é que a variável botConfig vai conter todas as variáveis do seu bot.config.json. A ação giphy.js que você vai criar no próximo passo vai definir e usar essa variável, e o primeiro parâmetro de mergeBotConfig é o nome do seu bot (nesse caso, giphy).

Criar a ação

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.

Aqui está o código que escrevi para a minha ação giphy.js - para chamar a API giphy.com e devolver a imagem.

‍

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

‍

```

‍

Criar os nós e as transições em Botpress

No editor de fluxos, crie dois novos nós e uma nova Transição.

No nó de entrada com a etiqueta #1, estou a utilizar uma declaração de texto em bruto como comando.

(Não se preocupe com a segunda transição ou o terceiro nó - actualizá-los-emos mais tarde neste blogue).

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

Criar a ação para renderizar o carrossel

Retornar um giphy por si só já é bom, mas podemos torná-lo mais poderoso. Podemos usar um componente de carrossel para o fazer. BotpressO componente carrossel do 's pode ser utilizado para mostrar muitas coisas úteis aos utilizadores do chatbot - t-shirts individuais de um site de comércio eletrónico, itens de um menu de um restaurante, veículos para alugar, etc. Neste bot, vou mostrar imagens da consulta de pesquisa enviada para a API Giphy.

Mais uma vez, vou criar uma nova ação, esta chamada Carousel.js. Esta ação irá mostrar 5 imagens devolvidas do Giphy quando enviarmos a consulta de pesquisa do utilizador, e dar ao utilizador a opção de escolher. Siga o mesmo processo acima para criar uma nova ação e inclua este código:

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

Depois de criar a ação de carrossel, pode atualizar os nós no seu editor de fluxo para reconhecer o comando de carrossel.

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

Utilizar o novo Chatbot do Giphy

E já está! Agora seu bot pode entender e agir com apenas dois comandos:

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

Eis o que obtive quando disse!giphy dog ao meu bot:

E aqui está o que obtive quando disse!carousel cat ao meu bot:

Próximas etapas e aprendizagem adicional

Espero que este tutorial o tenha ajudado! Se estiver interessado, junte-se à nossa comunidade Botpress , onde pode colocar questões e aprender com outros programadores de Botpress .

Se pretender obter mais informações sobre o que abordámos hoje, eis uma lista de recursos para aprofundar o assunto:

• Botpress documentos sobre a criação de acções
• Documentos sobre como chamar uma API externa a partir de Botpress
• Descrição geral da plataformaBotpress v12, em particular a experiência do programador (vídeo)

E se gostar deste conteúdo, inscreva-se na newsletter Botpress !

‍