Angular5でDialogflowのチャットボットを写経してみる（２）

2018年9月12日

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

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

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

http://twosquirrel.mints.ne.jp/?p=27639

（開発環境）
Windows 8.1 Pro

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

（６）NLP Backend (Dialogflowの設定)

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

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

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

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

API KEYS（V1）の、Client access token　のトークンをコピー

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

（変更前）

（変更後）

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

（７）Dialogflow Service

ng generate service services/dialogflow

dialogflow.service.ts の変更

app.module.ts

（変更前）

（変更後）

message.-form.component.ts

（変更前）

（変更後）

（８）試しに入力してみる

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

これは楽しい！

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

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

（１）V1 APIに変更
（２）Client Access Tokenを、Angular5の、src/environments/environment.ts の token: " のところに記載

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