Korzystanie z akcji Botpress v12 z interfejsem API Giphy

W niedawnym wpisie na blogu i filmie pokazaliśmy, jak zainstalować Botpress v12 za pomocą Docker Playground. Zabawa z Dockerem to tylko przystawka do tego, co Docker i Botpress v12 mogą osiągnąć razem! W dzisiejszym blogu pokażę, jak korzystać z kilku podstawowych - ale bardzo przydatnych! - Botpress elementów.

• Jak używać akcji w Botpress do wywoływania API?
• Jak renderować domyślną zawartość w akcji
• Zrozumienie domyślnej struktury wbudowanego elementu w Botpress

Nakręciłem też wideo na ten temat! Kliknij tutaj, aby obejrzeć pierwszy film, który towarzyszy temu blogowi, a druga część jest już dostępna

Co to jest działanie?

Akcja Botpress to fragment kodu, który Botpress v12 może wykorzystać w przepływie. Domyślnie Axios i inne biblioteki są dołączone do akcji Botpress . Akcja, którą zamierzam utworzyć, wykorzysta wywołanie API do punktu końcowego GIPHY, za pośrednictwem którego mój chatbot Botpress będzie pobierał gify do udostępnienia swojemu użytkownikowi.

Na marginesie: Botpress Akcje i Botpress Hooks są bardzo podobne. Ponieważ chcę, aby przepływ konwersacji Botpress wyzwalał pobieranie, użyję akcji. Hooki są częściej używane do wykonywania kodów w określonych punktach cyklu życia chatbota.

API GIPHY

Przed utworzeniem kodu Botpress należy uzyskać ważny klucz API Giphy. Klucz ten można znaleźć na stronie dewelopera GIPHY. Rozpocznij od utworzenia aplikacji Giphy.

Musisz założyć konto Giphy lub zalogować się, jeśli już je masz.

Na stronie głównej utwórz aplikację i wybierz prawą opcję API.

Tak, z prawej strony - tej, która nie jest zalecana.

Wersja SDK jest zdecydowanie opcją, ale będziesz musiał wykonać dodatkowy krok w Botpress - biblioteka SDK musi zostać wstrzyknięta do komponentu akcji. Wstrzykiwanie zewnętrznej biblioteki do Botpress omówimy w przyszłym blogu!

Następnie nadaj aplikacji nazwę i opis.

Na następnym ekranie GIPHY poda utworzony klucz API - trzymaj się go! Będziesz używać tego klucza w swoim chatbocie Botpress .

Nadszedł czas, aby otworzyć Botpress!

Rozpoczęcie Botpress

Istnieje kilka sposobów na uruchomienie strony Botpress v12:

Jeśli uruchamiasz Botpress lokalnie, ze źródła:

yarn run start

Lub z pliku binarnego

./bp

• Lub z Dockera.
  

docker-compose up -d

Po wejściu na stronę Botpress dodamy klucz API i nowe akcje do bota. Możesz użyć bota utworzonego w naszym ostatnim blogu lub stworzyć go od podstaw.

W tym momencie możesz dodać swój klucz API z GIPHY.

Korzystanie ze środowiska i konfigurowanie klucza API

Musisz wejść do swojego chatbota - ja nazwałem swojego chatbota giphy. Po wejściu do chatbota przejdź do Edytora kodu > Konfiguracje > bot.config.json. Na końcu pliku dodaj klucz API, nazwę chatbota i zmienną apiKey:

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

Teraz możesz użyć tego środowiska w swojej akcji. Więcej na ten temat później, ale chodzi o to, że zmienna botConfig będzie zawierać wszystkie zmienne z pliku bot.config.json. Akcja giphy.js, którą utworzysz w następnym kroku, zdefiniuje i użyje tej zmiennej, a pierwszym parametrem mergeBotConfig będzie nazwa twojego bota (w tym przypadku giphy).

Utwórz akcję

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.

Oto kod, który napisałem dla mojej akcji giphy.js - aby wywołać API giphy.com i zwrócić obraz.

‍

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

‍

```

‍

Utwórz węzły i przejścia w Botpress

W edytorze przepływu utwórz dwa nowe węzły i nowe przejście.

W węźle wejściowym z etykietą #1 używam instrukcji surowego tekstu jako polecenia.

(Nie martw się o drugie przejście lub trzeci węzeł - zaktualizujemy je w dalszej części tego bloga).

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

Utwórz akcję renderowania karuzeli

Samo zwracanie giphy jest w porządku, ale możemy uczynić go bardziej wydajnym. W tym celu możemy użyć komponentu carousel. BotpressKomponent karuzeli może być używany do wyświetlania wielu przydatnych rzeczy użytkownikom chatbota - pojedynczych koszulek z witryny e-commerce, pozycji w menu z restauracji, pojazdów do wynajęcia itp. W tym bocie zamierzam wyświetlać obrazy z zapytania wysłanego do API Giphy.

Ponownie utworzę nową akcję, tę o nazwie Carousel.js. Ta akcja wyświetli 5 obrazów zwróconych z Giphy, gdy wyślemy zapytanie użytkownika, i da mu możliwość wyboru. Wykonaj ten sam proces, co powyżej, aby utworzyć nową akcję i dołącz ten kod:

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

Po utworzeniu akcji karuzeli można zaktualizować węzły w edytorze przepływu, aby rozpoznawały polecenie karuzeli.

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

Korzystanie z nowego chatbota Giphy

I gotowe! Teraz twój bot może rozumieć i wykonywać tylko dwie komendy:

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

Oto, co otrzymałem, gdy powiedziałem!giphy dog do mojego bota:

A oto, co otrzymałem, gdy powiedziałem!carousel cat do mojego bota:

Kolejne kroki i dalsza nauka

Mam nadzieję, że ten poradnik ci pomógł! Jeśli jesteś zainteresowany, dołącz do naszej społeczności Botpress , gdzie możesz zadawać pytania i uczyć się od innych programistów Botpress .

Jeśli chcesz uzyskać więcej informacji na temat tego, co omówiliśmy dzisiaj, oto lista zasobów do dalszej eksploracji:

• Botpress dokumenty dotyczące tworzenia akcji
• Dokumenty dotyczące wywoływania zewnętrznego API z Botpress
• Przegląd platformyBotpress v12, w szczególności doświadczenia deweloperów (wideo)

A jeśli podoba Ci się ta treść, zapisz się do newslettera Botpress !

‍