スポンサーリンク

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

どうも、DialogflowのWEB Demoが、[empty response]になってしまってうまくいかない。。。

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

http://www.blog.labouardy.com/chatbot-with-angular-5-dialogflow/
image

２０１８年９月時点で、Angular6だが、上記はAngular5なので、あえて、Angular5で、やってみる。

（開発環境）
Windows 8.1 Pro

image

（１）Angular5アプリの作成

ng new smartbot –style=scss
cd smartbot
ng serve

image

ブラウザで、http://localhost:4200/　を開く

image

Ctrl+C　y  Enter で一旦停止。

（２）Message Entity

ng generate class models/message

image

src/app/models/message.ts

（変更前）
image

（変更後）
image

（３）Message List Component

ng generate component components/message-list

image

src/app/components/message-list.component.html

image

src/app/components/message-list.component.ts

（変更前）
image

（変更後）
image

src/tsconfig.app.json

（変更前）
image

（変更後）
image

（４）Message Item Component

ng generate component components/message-item

image

src/app/components/message-item/message-item.component.html

image

src/app/components/message-item/message-item.component.ts

（変更前）
image

（変更後）
image

（５）Message Form Component

ng generate component components/message-form

image

src/app/components/message-form/message-form.component.html

image

src/app/components/message-form/message-form.component.ts

（変更前）
image

（変更後）
image

そして、写経元サイトから、bot.png と、user.png　をダウンロードして、src/assets/images/ フォルダを作成し、その中にその２つのファイルを保存する。

https://github.com/mlabouardy/dialogflow-angular5/tree/master/src/assets/images
image

image

（６）ng serve してみる

image

エラー。

tsconfig.json　を変更

image

やっぱりエラー。あきらめて、それぞれのファイルを書き直す。

image

image

あれ、真っ白、、、

そういえば、bootstrapとかいろいろ設定していない。どうやら、http://www.blog.labouardy.com/chatbot-with-angular-5-dialogflow/　を写経するだけではだめらしい。だからこそ、GitHubにソースコードをあげてくださっているのか。。。

とりあえず、index.html
https://github.com/mlabouardy/dialogflow-angular5/blob/master/src/index.html

（変更前）
image

（変更後）
image

image

src/app/app.module.ts
image

src/app/app.component.ts
https://github.com/mlabouardy/dialogflow-angular5/blob/master/src/app/app.component.ts

（変更前）
image

（変更後）
image

src/app/app.component.html
https://github.com/mlabouardy/dialogflow-angular5/blob/master/src/app/app.component.html

（変更前）
image

（変更後）
image

src/app/app.component.scss

image

https://github.com/mlabouardy/dialogflow-angular5/blob/master/src/app/components/message-item/message-item.component.scss

image

やっとそれっぽくなってきた。残り２つのcomponentのscssもコピペ。

あと、適当に調整。

image

まだDialogflowまで全くたどりついていないが、とりあえずここまで。

続きは明日以降に。。。

参考：https://akamist.com/blog/archives/2236
image

参考：https://qiita.com/kasaharu/items/b042672906c0710e19ec
image

写経元サイト：http://www.blog.labouardy.com/chatbot-with-angular-5-dialogflow/
image

スポンサーリンク

Angular5,Chatbot

Posted by twosquirrel