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

先日のブログ記事と ビデオでは、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 () =&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 */}

‍

```

‍

でノードとトランジションを作成する。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 () =&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 */}

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

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

新しいGiphyチャットボットを使う

これで完了だ！これで、あなたのボットはたった2つのコマンドを理解し、行動できるようになりました：

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

ギフィー・ドッグ 」とボットに言ったら、こんな結果が返ってきた：

カルーセル・キャット ！」とボットに言ったら、こうなった：

次のステップとさらなる学習

このチュートリアルがお役に立てれば幸いです！もし興味があれば、Botpress コミュニティに参加してください。Botpress の開発者に質問を投げかけたり、他の開発者から学んだりすることができます。

今日私たちが取り上げたことについて、さらに詳しい情報をお知りになりたい方は、こちらをご覧ください：

• Botpress アクションの作成に関するドキュメント
• からの外部APIの呼び出しに関するドキュメントBotpress
• Botpress v12プラットフォームの概要、特に開発者エクスペリエンス（ビデオ）

このコンテンツが気に入ったら、 Botpress のニュースレターに登録してください！

‍