Ionic4(Anguar6)でDialogflowのチャットボットにtryしてみる(1)

前回、Angular5でDialogflow API V1を使ってチャットボットアプリの写経してみた。

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

写経元サイトはこちら

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

今回は、これをもとに、Ionic4(Ionic 4.0.0-beta.11)(Anular 6)で、Dialogflow API V1を使ってチャットボットアプリを作成したい。

(開発環境)
image
Googleアカウント(Dialogflow 利用のため)

(今回構築した環境)
Node 8.12.0
npm 6.1.0
Angular CLI 6.2.1
Ionic CLI 4.1.2

<方針>

Angular 5 を、Angular 6 にVersion upする。
Anguar5からAngular6にVersion upするときは、RxJS5からRxJS6になるので、Obsevableとか、mapとかでてきたときに、適宜変更する。
Ionic3からIonic4への変更点として、ルーティング、ion-toolbar (<slot> など)などが変更になるので、適宜変更する。
Dialogflow API V2については、ググってみたが、よく分からなかったので、今回は、V1で行く。

(0)npm, Angulr CLI, Ionic CLIなどのアップデート

● Node.js 8.12.0 LTS のインストール

以下のサイトからdownloadしてインストール。

https://nodejs.org/ja/
image

いろいろYesをしながらインストール

image

● npmのアップデート

私の場合は、これをやっても、npm 6.1.0 のままであった。

image

● Angular CLIのアンインストールと、再度、Angular CLIのインストール

image

image

● Ionic CLIのアップデート

image

image

なんか@socksがどうとか言われているが、とりあえず、Ionic CLI 4.1.2 がインストールされた。

(1)Ionicアプリの新規作成

C:/ionic4/ フォルダを、VisualStudioCode開き、Ctrl+@ でコマンドプロンプトを開いて、以下を入力。

途中何か聞かれたら、2回とも、N + Enter。

image

アプリの実行

image

Ctrl +C => y + Enter でサーバ停止。

image

このアプリでは、 ”@ionic/angular”: “4.0.0-beta.7″ となっていました。

(2)Message Entity

image

src/app/models/message.ts

(変更後)
image

(3)Message List Component

image

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

(変更後)
image

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

(変更前)
image

(変更後)
image

(4)Message Item Component

image

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

(変更後)
image

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

(変更前)
image

(変更後)
image

(4)Message Form Component

image

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

(変更後)
image

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

(変更前)
image

(変更後)
image

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

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

image

(6)ionic serve してみる

しかし、この時点では真っ白、、、

(ものすごくたくさん訂正しなければならないところが、、、)

image

src/app/home/home.page.html

(変更前)
image

(変更後)
image

src/app/home/home.page.ts

(変更前)
image

(変更後)
image

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

参考:https://github.com/mlabouardy/dialogflow-angular5/blob/master/src/app/components/message-list/message-list.component.ts

(変更前)
image

(変更後)
image

ううむ、

message-list.page.html にある記述の、<message-item> が見つからないと言われてしまうのだが、それを見えるようにしたつもりだが、結局分からず撃沈。。。

今回はあきらめて、次回、ちょっと、わかりそうなところからやり直してみる。

次回は以下へ。

Ionic4(Anguar6)でDialogflowのチャットボットにtryしてみる(2)
前回、Angular5のコードをもとに、Ionic4アプリを作成しようとして失敗。 今回は、コードを改変しつつ、ゆっくりやり直してみる。 ...

(参考)

https://techacademy.jp/magazine/16146
image

http://ktmry.hatenablog.com/entry/2017/09/13/000000
image

https://dev.classmethod.jp/ria/angular-js/version-6-of-angular-now-available/
image

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

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

    フォローする