Giphy APIでBotpress v12アクションを使う

ステップ1。ステップのタイトルは、予想通りここに入る。

先日のブログ記事とビデオでは、Docker Playgroundを使ってBotpress v12をインストールする方法を紹介しました。Dockerを使った遊びは、DockerとBotpress v12が一緒に実現できることの前菜に過ぎません！今日のブログでは、いくつかの基本的な、しかしとても便利な！-Botpress 。

Botpress でアクションを使用して API を呼び出す方法
アクションでデフォルトのコンテンツをレンダリングする方法
の組み込み要素のデフォルト構造を理解する。Botpress

これもビデオに撮った！このブログに付随する最初のビデオはここをクリックしてください。

アクションとは何か？

Botpress アクションは、Botpress v12canがフローで使用するコードの一部です。デフォルトでは、Axiosとその他のライブラリはBotpress アクションにバンドルされている。これから作成するアクションは、GIPHYエンドポイントへのAPIコールを使用します。このAPIコールを介して、私のBotpress チャットボットは、ユーザーと共有するGIFを取得します。

余談：Botpress アクションとBotpress フックはよく似ている。Botpress 会話フローが検索をトリガーするようにしたいので、アクションを使うつもりです。フックは、チャットボットのライフサイクルの特定のポイントでコードを実行するために、より一般的に使用されます。

GIPHY API

Botpress コードを作成する前に、有効なAPI Giphyキーを取得する必要があります。このキーはGIPHYの開発者向けサイトで入手できます。まずGiphyアプリを作成します。

ギフィーのアカウントをお持ちの方はログインしてください。

メインページでアプリケーションを作成し、右側のAPIを選択する。

そう、右手からだ。

SDKバージョンは確かにオプションですが、Botpress 、SDKライブラリをアクション・コンポーネントに注入する必要があります。Botpress への外部ライブラリの注入については、今後のブログで取り上げます！

次に、アプリの名前と説明をつける。

次の画面で、GIPHYが作成されたAPIキーを教えてくれます！このキーは、Botpress のチャットボットで使用します。

Botpress を開く時が来た！

スタートBotpress

Botpress v12を始めるにはいくつかの方法がある：

ローカルでBotpress 、ソースから実行している場合：

ヤーンランスタート

またはバイナリファイルから

./bp

あるいはDockerから。

docker-compose up -d

Botpress にアクセスしたら、APIキーと新しいアクションをボットに追加する。前回のブログで作成したボットを使うこともできるし、一から作成することもできる。

この時点で、GIPHYからAPIキーを追加できます。

環境の使用とAPIキーの設定

チャットボットに入る必要があります - 私はチャットボットにgiphyと名付けました。チャットボットに入ったら、Code Editor > Configurations > bot.config.jsonを開きます。ファイルの最後に、チャットボットの名前と変数apiKeyでAPIキーを追加します：

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

これで、この環境をアクションで使用できるようになります。詳しくは後述しますが、botConfigという変数には、bot.config.jsonのすべての変数が格納されます。次のステップで作成するgiphy.jsアクションは、この変数を定義して使用します。mergeBotConfigの最初のパラメータは、ボットの名前（この場合はgiphy）です。

アクションの作成

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.

以下は、giphy.com APIを呼び出して画像を返すgiphy.jsアクション用に書いたコードです。

‍

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 () => { 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}&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 */}

‍

```

‍

でノードとトランジションを作成する。Botpress

フローエディターで、2つの新しいノードと新しいトランジションを作成する。

エントリーノードの#1ラベルでは、生のテキスト文をコマンドとして使っている。

(2つ目のトランジションや3つ目のノードについては心配しないでほしい。）

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

カルーセルをレンダリングするアクションを作成する

giphyを返すのはそれだけでもいいのですが、もっと強力にすることができます。そのためにはカルーセルコンポーネントを使います。Botpressカルーセルコンポーネントは、チャットボットユーザーに便利なものをたくさん表示するために使うことができます-eコマースサイトの個々のTシャツ、レストランのメニューのアイテム、レンタカーなど。このボットでは、Giphy APIに送られた検索クエリから画像を表示することにします。

もう一度、Carousel.jsという新しいアクションを作ります。このアクションは、ユーザーの検索クエリを送信したときにGiphyから返される5つの画像を表示し、ユーザーに選択させます。上記と同じ手順で新しいアクションを作成し、次のコードを含めます：

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 () => { const regex = /!carousel/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!carousel <Picture to search>`' 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}&api_key=${botConfig.giphy.apiKey}` ) let cards = [] for (let i = 0; i < 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 */}

カルーセルアクションを作成したら、フローエディターのノードを更新して、カルーセルコマンドを認識できるようにします。

event.payload.text.startWith("!カルーセル")