Verwendung von Botpress v12 Actions mit der Giphy API

In einem kürzlich erschienenen Blogbeitrag und Video haben wir Ihnen gezeigt, wie Sie Botpress v12 mit dem Docker Playground installieren können. Play with Docker ist nur ein Vorgeschmack auf das, was Docker und Botpress v12 zusammen erreichen können! Im heutigen Blog werde ich Ihnen zeigen, wie Sie einige grundlegende - aber sehr nützliche! - Botpress Elemente.

• So verwenden Sie eine Aktion in Botpress , um eine API aufzurufen
• Wie man Standardinhalte in einer Aktion wiedergibt
• Verstehen der Standardstruktur eines eingebauten Elements in Botpress

Auch davon habe ich Videos gemacht! Klicken Sie hier, um das erste Video zu sehen, das diesen Blog begleitet, und der zweite Teil ist draußen

Was ist eine Aktion?

Eine Botpress Aktion ist ein Stück Code, das Botpress v12 in einem Ablauf verwenden kann. Standardmäßig sind die Axios und andere Bibliotheken in einer Botpress Aktion gebündelt. Die Aktion, die ich erstellen werde, verwendet einen API-Aufruf an den GIPHY-Endpunkt, über den mein Botpress Chatbot Gifs abruft, die er mit seinem Benutzer teilen kann.

Eine Anmerkung: Botpress Aktionen und Botpress Hooks sind sehr ähnlich. Da ich möchte, dass der Botpress Konversationsfluss die Abfrage auslöst, werde ich eine Aktion verwenden. Hooks werden üblicherweise verwendet, um Codes an bestimmten Punkten im Chatbot-Lebenszyklus auszuführen.

GIPHY-API

Bevor Sie den Code Botpress erstellen, benötigen Sie einen gültigen API-Schlüssel von Giphy. Diesen Schlüssel finden Sie auf der GIPHY-Entwickler-Website. Sie beginnen mit der Erstellung einer Giphy-App.

Sie müssen sich für ein Giphy-Konto anmelden, oder sich einloggen, wenn Sie bereits eines haben.

Erstellen Sie auf der Hauptseite eine Anwendung und wählen Sie die rechte API aus.

Ja, von der rechten Seite - derjenigen, die nicht empfohlen wird.

Die SDK-Version ist definitiv eine Option, aber Sie müssen einen zusätzlichen Schritt in Botpress durchführen - die SDK-Bibliothek muss in die Aktionskomponente injiziert werden. Wir werden das Einfügen einer externen Bibliothek in Botpress in einem zukünftigen Blog behandeln!

Als Nächstes geben Sie der App einen Namen und eine Beschreibung.

Auf dem nächsten Bildschirm erhalten Sie von GIPHY den API-Schlüssel, der erstellt wurde - behalten Sie ihn! Sie werden diesen Schlüssel in Ihrem Botpress Chatbot verwenden.

Es ist Zeit, Botpress zu öffnen!

Start: Botpress

Es gibt mehrere Möglichkeiten, Botpress v12 zu starten:

Wenn Sie Botpress lokal ausführen, von der Quelle aus:

Fadenlauf Start

Oder aus der Binärdatei

/bp

• Oder von Docker.
  

docker-compose up -d

Unter Botpress fügen wir den API-Schlüssel und die neuen Aktionen zu einem Bot hinzu. Sie können den Bot verwenden, den Sie in unserem letzten Blog erstellt haben, oder einen ganz neuen erstellen.

An dieser Stelle können Sie Ihren API-Schlüssel von GIPHY hinzufügen.

Verwenden einer Umgebung und Einrichten Ihres API-Schlüssels

Sie müssen in Ihren Chatbot gehen - ich habe meinen Chatbot giphy genannt. Sobald Sie in Ihrem Chatbot sind, gehen Sie in den Code-Editor > Konfigurationen > bot.config.json. Fügen Sie am Ende der Datei Ihren API-Schlüssel, den Namen des Chatbots und die Variable apiKey ein:

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

Jetzt können Sie diese Umgebung in Ihrer Aktion verwenden. Mehr dazu später, aber die Idee dahinter ist, dass die Variable botConfig alle Variablen aus deiner bot.config.json enthält. Die giphy.js-Aktion, die Sie im nächsten Schritt erstellen werden, definiert und verwendet diese Variable, und der erste Parameter von mergeBotConfig ist der Name Ihres Bots (in diesem Fall giphy).

Erstellen Sie die Aktion

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 ist der Code, den ich für meine giphy.js-Aktion geschrieben habe - um die giphy.com-API aufzurufen und das Bild zurückzugeben.

‍

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

‍

```

‍

Erstellen Sie die Knoten und Übergänge in Botpress

Legen Sie im Ablaufeditor zwei neue Knoten und eine neue Transition an.

Im Eintragsknoten mit der Bezeichnung #1 verwende ich eine Rohtextanweisung als Befehl.

(Machen Sie sich keine Gedanken über den zweiten Übergang oder den dritten Knoten - wir werden diese später in diesem Blog aktualisieren).

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

Erstellen Sie die Aktion zum Rendern des Karussells

Die Rückgabe eines giphy auf seine gut auf seine eigene, aber wir können es mächtiger zu machen. Dazu können wir eine Karussellkomponente verwenden. BotpressDie Karussellkomponente kann verwendet werden, um Chatbot-Nutzern viele nützliche Dinge anzuzeigen - einzelne T-Shirts von einer E-Commerce-Website, Menüpunkte eines Restaurants, Mietfahrzeuge usw. In diesem Bot werde ich Bilder aus der Suchanfrage anzeigen, die an die Giphy-API gesendet wurde.

Auch hier werde ich eine neue Aktion erstellen, die diesmal Carousel.js heißt. Diese Aktion zeigt 5 Bilder an, die von Giphy zurückgegeben werden, wenn wir die Suchanfrage des Benutzers senden, und gibt dem Benutzer die Möglichkeit zu wählen. Folgen Sie demselben Prozess wie oben, um eine neue Aktion zu erstellen, und fügen Sie diesen Code ein:

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

Nachdem Sie die Karussellaktion erstellt haben, können Sie die Knoten in Ihrem Ablaufeditor aktualisieren, damit der Karussellbefehl erkannt wird.

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

Verwenden Sie Ihren neuen Giphy Chatbot

Und schon sind Sie fertig! Jetzt kann Ihr Bot nur noch zwei Befehle verstehen und darauf reagieren:

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

Das habe ich bekommen, als ich!giphy dog zu meinem Bot gesagt habe:

Und so sieht es aus, wenn ich!carousel cat zu meinem Bot sage:

Nächste Schritte und weiteres Lernen

Ich hoffe, dieses Tutorial hat Ihnen geholfen! Wenn Sie Interesse haben, werden Sie Mitglied in unserer Botpress Community, wo Sie Fragen stellen und von anderen Botpress Entwicklern lernen können.

Wenn Sie weitere Informationen zu dem Thema wünschen, das wir heute behandelt haben, finden Sie hier eine Liste von Ressourcen für weitere Untersuchungen:

• Botpress Dokumente zur Erstellung von Aktionen
• Dokumente zum Aufruf einer externen API von Botpress
• Überblick über die Botpress v12 Plattform, insbesondere über das Entwicklererlebnis (Video)

Und wenn Ihnen dieser Inhalt gefällt, melden Sie sich für den Botpress Newsletter an!

‍