Angular5でDialogflowのチャットボットを写経してみる(2)

以下のページを写経しています。(dialogflowのAPIはv1のようだが、、、)

http://www.blog.labouardy.com/chatbot-with-angular-5-dialogflow/
image_thumb[44]

前回は、Angular5でチャットのcomponentまで作成しました。

今回は続きで、Dialogflowの設定や、Angular5への組み込みを行っていきます。

Angular5でDialogflowのチャットボットを写経してみる(1)
どうも、DialogflowのWEB Demoが、になってしまってうまくいかない。。。 以下のページを写経してみる。(dialogfl...

(開発環境)
Windows 8.1 Pro

image_thumb[2]

http://www.blog.labouardy.com/chatbot-with-angular-5-dialogflow/ の、6 – NLP Backend から写経していきます。

(6)NLP Backend (Dialogflowの設定)

https://console.dialogflow.com/api-client/#/login

にログインして、メニュー > Create a New Agent から、SmartBot という名前のAgentを作成します。とりあえず、DEFAULT LANGUAGは、 English-en としておきます。

image

メニュー > 下の方の、Small Talk > EnableをクリックしてONにしてから、 > SAVE をクリック

image

メニュー > 一番上のAgent名 SmartBot の右横の「歯車マーク」をクリック

image

下の方へ行き、V1 APIの左横をクリックして、V1 APIをONにする。

image

API KEYS(V1)の、Client access token のトークンをコピー

image

src/app/environments/environment.ts に下のようにペーストする。

(変更前)
image

(変更後)
image

Dialogflow consoleの、画面右上の、SAVE を押しておく。

image

(7)Dialogflow Service

ng generate service services/dialogflow

image

dialogflow.service.ts の変更

image

app.module.ts

(変更前)
image

(変更後)
image

message.-form.component.ts

(変更前)
image

(変更後)
image

image

(8)試しに入力してみる

image

hi と入力して、SEND をクリックしたら、ちゃんと、上記ように、Dialogflowのbotから、返事が返ってきた!

これは楽しい!

なんとか、API V2で同様のことや、また、fulfillmentを用いたやり方で、うまくやる方法はないだろうか。。。

(追記)
Dialogflowの方を変更する場合は、Dialogflow consoleで、

(1)V1 APIに変更
(2)Client Access Tokenを、Angular5の、src/environments/environment.ts の token: ” のところに記載

するだけで、他のDialogflow Agentに変更できる。と思われる。

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする