ホームページ >ウェブフロントエンド >jsチュートリアル >NodeとHerokuでFacebookチャットボットを構築します
node.jsとherokuを使用してFacebookチャットボットを構築し、Joan YinとCamilo Reyesが査読します。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します!
昨年のF8会議で、Facebookはメッセンジャープラットフォームを立ち上げ、開発者がメッセンジャーやFacebookのページで人々と話すことができるボットを作成できるようにしました。ロボットを使用すると、アプリケーションの所有者は、大衆に拡張できるパーソナライズされたインタラクティブなコミュニケーションを提供することにより、ユーザーとより適切に対話できます。エンタープライズとアプリケーションの所有者は、その発売以来、チャットボットに大きな関心を示してきました。発表の3か月後、プラットフォーム上に11,000のロボットが構築されたと推定されています。
チャットボットは、企業やアプリケーションの所有者だけでなく、利益をもたらします。これらのロボットのユーザーは、次のような多数のサービスを楽しむことができます:
チャットボットの現在の関心と魅力は明らかです。
この記事では、Facebookページに代わってMessengerを介してユーザーと対話できるFacebookチャットボットを作成する方法について説明します。ユーザーが指定した映画に関するさまざまな詳細をユーザーに提供できるロボットを構築します。機械学習ロボットを使用すると、ユーザーの対話を改善できます。ユーザーは、コマンドを使用するのではなく、人間の相互作用で行うように、ロボットとより自然にやり取りできます。ロボットは、人々との会話から学ぶにつれて、より賢くなります。将来の記事でこのタイプのロボットの構築を保存します。ただし、機械学習の知識は必要ありません。幸いなことに、開発者が機械学習(特に自然言語処理-NLP)をアプリケーションに統合できるようにするwit.aiやapi.aiなどのサービスがあります。
start
ここから完成したデモアプリケーションのコードをダウンロードできます。
最初に、コンピューターにノードがインストールされていることを確認してください。これは、端子でノード-Vを入力することで確認できます。インストールすると、バージョン番号が出力されます。次に、Herokuコマンドラインインターフェイス(CLI)をインストールします。後でアプリをHerokuにプッシュするために使用します。 Heroku -versionを使用して、CLIがインストールされていることを確認します。
プロジェクトディレクトリを作成し、次のコマンドを使用してpackage.jsonファイルを初期化します。
<code>$ mkdir spbot $ cd spbot $ npm init</code>
プロジェクトの設定を設定するためにプロンプトに従ってください。
package.jsonファイルを生成した後、それを開き、スクリプトオブジェクトに開始プロパティを追加します。これにより、Herokuはどのコマンドを実行してアプリケーションを開始するかを知ることができます。プロジェクトのセットアップ中に、App.jsをアプリケーションのエントリポイントとして定義するため、node app.jsをStartの値として使用します。プロジェクトの設定に従ってこの設定を変更します。
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
次のノードパッケージをインストールします。
<code>$ npm install express request body-parser mongoose --save</code>
プロジェクトのルートディレクトリに.gitignoreファイルを作成し、node_modulesフォルダーを含めて、送信されないようにします。
<code>node_modules</code>
プロジェクトのルートディレクトリで、app.jsという名前のファイルを作成します(デフォルト名が使用されている場合はindex.js)。次のように変更してください:
<code class="language-javascript">var express = require("express"); var request = require("request"); var bodyParser = require("body-parser"); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.listen((process.env.PORT || 5000)); // 服务器索引页面 app.get("/", function (req, res) { res.send("已部署!"); }); // Facebook Webhook // 用于验证 app.get("/webhook", function (req, res) { if (req.query["hub.verify_token"] === "this_is_my_token") { console.log("已验证 webhook"); res.status(200).send(req.query["hub.challenge"]); } else { console.error("验证失败。令牌不匹配。"); res.sendStatus(403); } });</code>
最初のGet Handlerは、アプリケーションが正常に展開されたかどうかを確認するために、独自のテストに使用されます。 2番目のゲットハンドラーは、Facebookがアプリケーションを検証するために使用するエンドポイントです。コードは確認_TOKENを探し、検証リクエストに送信されたチャレンジで応答する必要があります。
コードに独自のトークンを貼り付けることができます。このタイプのデータは、環境変数で最もよく保存されています。これは、Herokuでプロジェクトを作成した直後に行います。
Facebookプラットフォームがバックエンドアプリケーションに接続するためには、まずオンラインにする必要があります。
gitリポジトリを作成し、次のコマンドを使用してプロジェクトを送信します。
<code>$ git init $ git add . $ git commit -m "Initial commit"</code>まだいない場合は、無料のHerokuアカウントにサインアップしてください。
端末からHerokuにログインし、アプリケーションを作成します。
<code>$ heroku login $ heroku create $ git push heroku master $ heroku open</code>Heroku Openコマンドを実行した後、アプリケーションを実行するリンクはデフォルトのブラウザで開きます。すべてがうまくいけば、「展開!」というテキストのページが表示されます。
環境変数の作成
Herokuダッシュボードを開き、展開したばかりのアプリケーションを選択します。アプリケーションの
設定に移動し、[構成変数を表示] ボタンをクリックします。 keyとして確認_tokenを入力し、値としてトークンを入力し、をクリックしてを追加します。
コードで、トークン文字列( "this_is_my_token")をprocess.env.verification_tokenに変更します。変更を提出して、それらをHerokuにプッシュしてください。
サーバーが稼働しているときに、Facebookアプリケーションとその関連ページを作成します。新しいページを作成するか、既存のページを使用できます。
Facebookページを作成するには、Facebookにログインして作成ページに移動します。指定されたオプションからページタイプを選択します。私はエンターテイメントを選びました。
次に、ページのカテゴリと名前を選択します。
startをクリックした後、ページが作成され、アプリケーションに関するより詳細な情報(説明、ウェブサイト、プロフィール写真、ターゲットオーディエンスなど)を提供するよう求められます。これで、これらのセットアップ手順をスキップできます。
基本設定リンクをクリックして、以下を選択します。
[
製品設定
メッセンジャーのセクションでをクリックしてを開始します。以下に示すように、メッセンジャー設定ページに移動します。
メッセンジャーユーザーから送信されたメッセージやその他のイベントを受信するには、アプリケーションがWebhook統合を有効にする必要があります。次にこれを行います。 WebHook(以前はLive Update
webhookセクションで、[
の設定をクリックします 更新されたコールバックURL(バックエンドアプリケーションで定義されているエンドポイントURL、つまり/webhook)を入力し、検証トークン(バックエンドアプリケーションで使用されるトークン、つまりプロセスに保存されます。確認_token)を選択し、すべてのチェックボックスを選択します。これらは、アプリケーションがサブスクライブするイベントを指定します。後でこれらのイベントの役割について学びます。
webhookを正常に有効にした後、webhookセクションと購読されたイベントのリストに記入が表示されるはずです。エラーを受け取った場合は、Webhookエンドポイント( /webhookで終了)の正しいURLを入力していることを確認し、ここで使用されるトークンがノードアプリケーションで使用しているトークンと同じであることを確認してください。
Token Generationセクションで、ドロップダウンメニューからページを選択します。認証後、ページアクセストークンが生成されます。
キーをPage_access_tokenに設定し、値として生成されたトークンを取得します。生成されたトークンは、Facebookに表示されている現在のページに保存されていないことに注意してください。ページにアクセスするたびに、ページのドロップダウンメニューからFacebookページを選択すると、ページアクセストークンフィールドが空白になり、新しいトークンが生成されます。ただし、以前に作成されたトークンはすべて機能します。したがって、ページを閉じる前にトークンを必ずコピーしてください。
Webhookが特定のページでイベントを受信するには、アプリケーションをそのページに購読する必要があります。webhookセクションで、サブスクライブするページを選択します。
デフォルトでは、会話を開始するために、ユーザーは最初のメッセージをボットに送信します。ただし、スタートボタンを有効にして、ボットが最初のメッセージを送信できるようにすることができます。ボタンはイベントをサーバーに送信し、その後応答できます。
挨拶テキストを設定するには、ページを開き、
setに移動します。
メッセージを選択し、右のパネルにを開いて、メッセンジャーの挨拶を表示します。あなたの好みにメッセージを設定します。
<code>$ mkdir spbot $ cd spbot $ npm init</code>
上記の操作は、FacebookグラフAPIにリクエストを送信します。リクエストが成功した場合、スタートボタンは新しい会話のウェルカム画面に表示されます。ユーザーはこのボタンをクリックして、コールバックを受信したポストバックをトリガーします。その後、ボットはこのポストバックに応答できます。
ポストバックのコンポーネント、ポストバックボタン、スタートボタン、永続メニュー、または構造化されたメッセージなど、さまざまな種類のコンポーネントによってトリガーできます。任意の文字列をペイロードとして設定できます。バックエンドでは、この文字列を使用して、[スタート]ボタンをクリックするために送信されたポストバックを識別します。ポストバックメッセージを受信するには、アプリケーションがWebhookのPostbackを購読する必要があります。 Messaging_Postbacksチェックボックスを選択して、WebHookをセットアップするときに前にこれを行いました。
スタートボタンが正常に設定されている場合、次の応答が表示されます。
<code>{ "name": "spbot", "version": "1.0.0", "description": "SPBot Server", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "author": "Joyce Echessa", "license": "ISC" }</code>
ウェルカム画面と開始ボタンは、新しい会話でのみ表示されることを忘れないでください。ボットをエンコードしてテストするときは、現在の会話を削除して新しい会話を開始できます。
ポストバックメッセージを処理するには、以下をノードアプリケーションに貼り付けます。
<code>$ npm install express request body-parser mongoose --save</code>
誰かがあなたのボットと対話したり、ページにメッセージを送信したりするたびに、WebHook統合を介して更新が送信されます。メッセージを取得するには、Webhookの投稿を聞く必要があります。すべてのコールバックはこのWebhookに送信されます。
上記のポストハンドラーでは、アプリケーションに送信されたメッセージエントリを反復します。メッセージがバッチで一緒に送信される場合があるため、エントリには複数のオブジェクトが含まれる場合があります。次に、各エントリのメッセージイベントを反復し、そのタイプを確認します。以下は、アプリケーションに送信できる異なるコールバックメッセージです。イベントがポストバックの場合、ProcessPostBack()関数を呼び出します。この関数では、ペイロード値を確認します。スタートボタンのペイロードに挨拶を設定したことを忘れないでください。ここでは、ボタンをクリックするためにメッセージイベントが送信されたかどうかを確認します。その場合、ユーザープロファイルAPIを使用してユーザーの名前を取得し、それを使用して送信されるメッセージをパーソナライズします。 APIから、名前、姓、プロフィール写真、ロケール、タイムゾーン、性別を取得できます。
次に、メッセージをsendmessage()関数に送信します。この関数は、メッセンジャープラットフォームに公開します。 WebHook Post Handlerでは、200のOK HTTP応答を返します。
できるだけ早く200を返すことは非常に重要です。 Facebookは次のメッセージを送信する前に200を待ちます。大容量のボットでは、200回のリターンの遅延により、FacebookがWebhookにメッセージを配信するための大幅な遅延が発生する可能性があります。
Webhookがエラー(つまり、2xx状態ではない)またはタイムアウト(つまり、応答時間が20秒を超える)を返し、15分以上続けている場合、警告アラートを受け取ります。
Webhookが8時間失敗し続けている場合、FacebookはWebhookが無効になり、アプリが登録解除されることを知らせるアラートを送信します。問題を修正した後、Webhookを再び添加し、アプリケーションをページに再登録する必要があります。
変更を送信して、それらをHerokuにプッシュします。
ボットをテストするには、Facebook.com、Facebookモバイルアプリのメッセンジャーショートリンクを使用するか、メッセンジャーショートリンクを使用できます https://www.php.cn/link/1fd37ce80d495bebcb35e0054d7384fe
Facebookとメッセンジャーでは、ページ名を検索してページを見つけることができます。
moreを選択してページ情報を編集します。
次に、ユーザー名を設定します。
@page_usernameを検索すると、正しいページが取得されます。また、
にアクセスして、インタラクションを開始することもできます。 以下に示すように、ウェルカム画面に設定したグリーティングテキストと start
ボタンを見ることができます。このボタンをクリックした後、サーバーから送信されたメッセージが表示されるはずです。
テキストを入力した場合、返信は届きません。次にこの問題を解決します。
データベースを設定します
ユーザーが映画名を入力すると、ロボットはオープンムービーデータベースAPIを使用して映画の詳細を取得します。使用するAPIリクエストは、最初の一致結果のみを取得するため、返された映画は常にユーザーが望むものではない場合があります。したがって、ロボットは最初にユーザーが正しい映画を取得したかどうかを確認し、その後、ユーザーは映画のプロット、キャスト、IMDB評価などの詳細情報を取得できます。また、別の映画名を入力して詳細を取得することもできます。
この前後の相互作用のため、ロボットはユーザーの現在の映画のエントリを覚えておく必要があります。 FacebookはWebhookでセッションを開いたままにしないため、セッションオブジェクトに保存するデータは次のリクエストで失われます。代わりに、このデータをデータベースに保存します。特にmonodb。 HerokuでMLABアドオンを使用します。
MLABは、MongoDBのデータベースとしてのデータベースです。 Herokuでは、無料のSandboxMLABプランを使用できますが、検証のためにクレジットカードをHerokuに保存する必要があります。カードの詳細を提供したくない場合は、MLAB Webサイトでアカウントを登録できます。このWebサイトでは、Sandboxデータベースの無料レイヤーを作成し、コードからそのデータベースにリンクします(詳細については後で詳しく説明します)。
Herokuでアドオンを使用するには、アプリケーションのダッシュボードに移動し、
Herokuの環境変数を確認すると、Mongodb URIセットの変数が表示されます。
MLAB Webサイト
設定を singleノードに変更し、標準ラインセクションから sandboxを選択します。
データベースの名前を設定し、
]ボタンをクリックしてプロセスを完了します。
次のページで、表示されたテーブルから作成したデータベースを選択します。データベースへのアクセス方法に関する指示があるページが開きます。
[
ユーザーデータベースユーザーを追加しますをクリックします。ユーザー名とパスワードを入力して、をクリックしてを作成します。これにより、アプリケーションがデータベースにアクセスできるようにするために使用できる新しい資格情報セットが作成されます。 ページの上半分で、データベースURIを見つけてコピーします。mongodb:// :@dsxxxxxx.mlab.com:55087/spbotのように見えます。作成したばかりのdbuser名とパスワードを挿入します。 Herokuでは、Mongodb_uriという名前の環境変数を作成し、データベースのURIをその値として貼り付けます。ノードアプリケーションに戻り、Movie.jsという名前のファイルを作成し、モデルという名前のフォルダーに保存します。以下をファイルに貼り付けます: ムービーデータベースモデルが上に作成されます。 user_idはメッセンジャープラットフォームから取得したユーザーIDとなり、他のフィールドは映画APIから取得されます。ユーザーが検索した最後の映画のみを保存するため、データベースにはユーザーごとに1つのレコードしかありません。 user_idフィールドを省略し、作成された各レコードの_IDとしてユーザーのIDのみを使用できます。ユーザーIDはFacebookページに固有のものであるため、これは機能します。これを行う場合は、ユーザーIDがページ全体であることを知っておく必要があります。これは、ユーザーのIDが指定されたページに固有のものであることを意味しますが、ユーザーは異なるページに対して異なるIDを持っている場合があります。 ボットが異なるページを提供する場合にのみこれを知る必要があります(はい、1つのボットが複数のページを提供できます)。したがって、ボットが複数のページを提供している場合、ユーザーIDのみでユーザーを識別できない可能性があり、_IDフィールドはレコードとしてユーザーIDを使用することも失敗します。これは一意でなければならず、ページ全体で一意性を保証します。
次に、メッセージがテキストまたは添付ファイル(画像、ビデオ、オーディオ)であるかどうかを確認します。後者の場合、ユーザーにエラーメッセージを送信します。テキストメッセージの場合、ユーザーが映画の詳細を示す特定のキーワードと一致するかどうかを確認します。この時点で、ユーザーは映画を照会し、映画はデータベースに保存されます。 getMoviedetail()関数はデータベースを照会し、特定のレコードを返します。
テキストに加えて、メッセンジャープラットフォームを使用すると、画像、ビデオ、オーディオ、ファイル、構造化されたメッセージを送信できます。構造化されたメッセージは、異なるユースケースをサポートするテンプレートです。ボタンテンプレートを使用すると、テキストとボタンを送信できます。ユニバーサルテンプレートを使用すると、画像、タイトル、字幕、ボタンを定義できます。アプリケーションでは、ユニバーサルテンプレートを使用します。 以下に示すようにProcessPostBack()関数を変更します。 モデルクラスを定義します
<code>$ mkdir spbot
$ cd spbot
$ npm init</code>
データベースとモデルが設定された後、チャットボットを完了することができます。コードはセクションでレンダリングされますが、プロジェクトにコード全体を貼り付けたい場合は、app.jsファイルへのリンクを次に示します。 <code>{
"name": "spbot",
"version": "1.0.0",
"description": "SPBot Server",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js"
},
"author": "Joyce Echessa",
"license": "ISC"
}</code>
<code>$ npm install express request body-parser mongoose --save</code>
<code>node_modules</code>
<code class="language-javascript">var express = require("express");
var request = require("request");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.listen((process.env.PORT || 5000));
// 服务器索引页面
app.get("/", function (req, res) {
res.send("已部署!");
});
// Facebook Webhook
// 用于验证
app.get("/webhook", function (req, res) {
if (req.query["hub.verify_token"] === "this_is_my_token") {
console.log("已验证 webhook");
res.status(200).send(req.query["hub.challenge"]);
} else {
console.error("验证失败。令牌不匹配。");
res.sendStatus(403);
}
});</code>
<code>$ git init
$ git add .
$ git commit -m "Initial commit"</code>
<code>$ mkdir spbot
$ cd spbot
$ npm init</code>
以上がNodeとHerokuでFacebookチャットボットを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。