Botpress v12 Acties gebruiken met de Giphy API

In een recente blogpost en video hebben we laten zien hoe je Botpress v12 installeert met behulp van de Docker Playground. Docker Play is slechts een voorproefje van wat Docker en Botpress v12 samen kunnen bereiken! In de blog van vandaag laat ik je zien hoe je een paar eenvoudige - maar zeer nuttige! - Botpress elementen.

• Hoe gebruik je een Action in Botpress om een API aan te roepen?
• Hoe standaardinhoud weergeven in een actie
• De standaardstructuur van een ingebouwd element in Botpress

Ik heb hier ook video's van gemaakt! Klik hier om de eerste video bij deze blog te bekijken, en het tweede deel is uit

Wat is een actie?

Een Botpress Action is een stuk code dat Botpress v12kan gebruiken in een flow. Standaard zijn de Axios en andere bibliotheken gebundeld in een Botpress actie. De actie die ik ga maken zal een API-aanroep naar het GIPHY endpoint gebruiken, waarmee mijn Botpress chatbot gifs zal ophalen om te delen met zijn gebruiker.

Even terzijde: Botpress Acties en Botpress Hooks lijken erg op elkaar. Omdat ik wil dat de Botpress conversatiestroom het ophalen triggert, ga ik een actie gebruiken. Hooks worden vaker gebruikt om codes uit te voeren op specifieke punten in de levenscyclus van de chatbot.

GIPHY API

Voordat je de code Botpress aanmaakt, moet je een geldige API Giphy-sleutel hebben. Deze sleutel kan worden gevonden op de GIPHY-ontwikkelaarswebsite. Je begint met het maken van een Giphy App.

Je moet je aanmelden voor een Giphy-account, of inloggen als je er al een hebt.

Maak op de hoofdpagina een toepassing en selecteer de rechter API-keuze.

Ja, vanaf de rechterkant - degene die niet wordt aanbevolen.

De SDK-versie is zeker een optie, maar dan moet je een extra stap uitvoeren in Botpress - de SDK-bibliotheek moet worden geïnjecteerd in de actiecomponent. We zullen het injecteren van een externe bibliotheek in Botpress in een toekomstige blog behandelen!

Geef de app vervolgens een naam en een beschrijving.

Op het volgende scherm geeft GIPHY je de API-sleutel die is aangemaakt - houd deze bij je! Je zult deze sleutel gebruiken in je Botpress chatbot.

Het is tijd om Botpress te openen!

Start Botpress

Er zijn een paar manieren om Botpress v12 te starten:

Als u Botpress lokaal uitvoert, vanaf de bron:

garen run start

Of vanuit het binaire bestand

./bp

• Of van Docker.
  

docker-compose up -d

Eenmaal in Botpress voegen we de API-sleutel en de nieuwe acties toe aan een bot. U kunt de bot gebruiken die u in onze vorige blog hebt gemaakt, of er een helemaal opnieuw maken.

Op dit punt kun je je API-sleutel van GIPHY toevoegen.

Een omgeving gebruiken & je API-sleutel instellen

Je moet in je chatbot gaan - ik heb mijn chatbot giphy genoemd. Eenmaal in je chatbot, ga naar de Code Editor > Configuraties > bot.config.json. Aan het einde van het bestand voeg je je API-sleutel toe, met de naam van de chatbot en de variabele apiKey:

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

Nu kun je deze omgeving gebruiken in je actie. Daarover later meer, maar het idee hier is dat de variabele botConfig alle variabelen uit je bot.config.json zal bevatten. De giphy.js actie die je gaat maken in de volgende stap zal die variabele definiëren en gebruiken, en de eerste parameter van mergeBotConfig is de naam van je bot (in dit geval, giphy).

Creëer de actie

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.

Hier is de code die ik schreef voor mijn giphy.js actie - om de giphy.com API aan te roepen en de afbeelding terug te geven.

‍

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

‍

```

‍

Maak de knooppunten en overgangen in Botpress

Maak in de stroomeditor twee nieuwe knooppunten en een nieuwe Overgang.

In het ingangsknooppunt met het label #1 gebruik ik een onbewerkte tekstverklaring als opdracht.

(Maak je geen zorgen over de tweede overgang of het derde knooppunt - die werken we later in deze blog bij).

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

De actie maken om de carrousel weer te geven

Het teruggeven van een giphy is op zich prima, maar we kunnen het krachtiger maken. Daarvoor kunnen we een carrouselcomponent gebruiken. BotpressEen carrouselcomponent kan worden gebruikt om veel nuttige dingen weer te geven aan chatbotgebruikers - individuele t-shirts van een e-commercesite, items op een menu van een restaurant, voertuigen te huur, enz. In deze bot ga ik afbeeldingen weergeven van de zoekopdracht die naar de Giphy API is gestuurd.

Opnieuw maak ik een nieuwe actie aan, deze heet Carousel.js. Deze actie zal 5 afbeeldingen tonen die terugkomen van Giphy wanneer we de zoekopdracht van de gebruiker verzenden, en de gebruiker de optie geven om te kiezen. Volg hetzelfde proces als hierboven om een nieuwe actie te maken en voeg deze code toe:

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

Nadat je de carrouselactie hebt gemaakt, kun je de knooppunten in je flow-editor bijwerken zodat ze het carrouselcommando herkennen.

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

Je nieuwe Giphy Chatbot gebruiken

En u bent klaar! Nu kan uw bot slechts twee commando's begrijpen en opvolgen:

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

Dit is wat ik kreeg toen ik!giphy dog tegen mijn bot zei:

En dit is wat ik kreeg toen ik!carousel cat tegen mijn bot zei:

Volgende stappen en verder leren

Ik hoop dat deze tutorial je geholpen heeft! Als je geïnteresseerd bent, ga dan naar onze Botpress community, waar je vragen kunt stellen en kunt leren van andere Botpress ontwikkelaars.

Als je meer informatie wilt over wat we vandaag hebben behandeld, is hier een lijst met bronnen die je verder kunt onderzoeken:

• Botpress Documenten over het maken van acties
• Documenten over het aanroepen van een externe API vanuit Botpress
• Overzicht van het Botpress v12 Platform, met name de ontwikkelaarservaring (video)

En als deze inhoud je bevalt, schrijf je dan in voor de Botpress nieuwsbrief!

‍