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

2018年9月12日

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

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

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

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

（開発環境）
Windows 8.1 Pro

（１）Angular5アプリの作成

ng new smartbot –style=scss
cd smartbot
ng serve

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

Ctrl+C　y  Enter で一旦停止。

（２）Message Entity

ng generate class models/message

src/app/models/message.ts

（変更前）

（変更後）

（３）Message List Component

ng generate component components/message-list

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

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

（変更前）

（変更後）

src/tsconfig.app.json

（変更前）

（変更後）

（４）Message Item Component

ng generate component components/message-item

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

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

（変更前）

（変更後）

（５）Message Form Component

ng generate component components/message-form

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

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

（変更前）

（変更後）

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

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

（６）ng serve してみる

エラー。

tsconfig.json　を変更

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

あれ、真っ白、、、

そういえば、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

（変更前）

（変更後）

src/app/app.module.ts

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

（変更前）

（変更後）

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

（変更前）

（変更後）

src/app/app.component.scss

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

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

あと、適当に調整。

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

続きは明日以降に。。。

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

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

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