スポンサーリンク

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

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

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

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

2018年9月時点で、Angular6だが、上記はAngular5なので、あえて、Angular5で、やってみる。

(開発環境)
Windows 8.1 Pro

image

(1)Angular5アプリの作成

ng new smartbot –style=scss
cd smartbot
ng serve

image

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

image

Ctrl+C y  Enter で一旦停止。

(2)Message Entity

ng generate class models/message

image

src/app/models/message.ts

(変更前)
image

(変更後)
image

(3)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

(4)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

(5)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/ フォルダを作成し、その中にその2つのファイルを保存する。

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

image

(6)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

やっとそれっぽくなってきた。残り2つの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

スポンサーリンク