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

2018年9月16日

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

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

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

写経元サイトはこちら

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

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

（開発環境）

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で行く。

（０）npm, Angulr CLI, Ionic CLIなどのアップデート

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

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

https://nodejs.org/ja/

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

●　npmのアップデート

npm update -g npm

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

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

npm uninstall -g @angular/cli npm cache clean // なんかエラーが出たので、言われた通り以下を入力

npm cache verify npm install -g @angular/cli@latest

●　Ionic CLIのアップデート

npm i -g ionic

npm update
npm i -g ionic

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

（１）Ionicアプリの新規作成

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

ionic start ionic4-dialogflow-v1 blank --type=angular

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

アプリの実行

cd ionic4-dialogflow-v1
ionic serve -l  // Intall @ionic/lab? と聞かれたら Y + Enter

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

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

（２）Message Entity

ionic g class models/message

src/app/models/message.ts

（変更後）

（３）Message List Component

ionic g component components/message-list

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

（変更後）

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

（変更前）

（変更後）

（４）Message Item Component

ionic g 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

ionic g component components/message-form

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

（変更後）

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

（変更前）

（変更後）

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

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

（６）ionic serve してみる

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

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

src/app/home/home.page.html

（変更前）

（変更後）

src/app/home/home.page.ts

（変更前）

（変更後）

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

（変更前）

（変更後）

ううむ、

Uncaught Error: Template parse errors:
Can't bind to 'message' since it isn't a known property of 'message-item'.
1. If 'message-item' is an Angular component and it has 'message' input, then verify that it is part of this module.
2. If 'message-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<div class="chatlist">
  <ul class="list-group">
    <message-item *ngFor="let msg of messages" [ERROR ->][message]="msg"></message-item>
  </ul>
</div>"):

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

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

次回は以下へ。