Ionic Tutorial

# 建立空白專案
ionic start ChatbotApp blank
cd ChatbotApp

# 安裝DialogFlow SDK
npm install @google-cloud/dialogflow

# 建立chat service
ionic g service services/chat

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: ...
    ...
  },
  dialogflow: {
    angularBot: 'client access token貼於此'
  }
};

export interface Message {
    userId: string;     // user id
    name: string;       // 發訊息的使用者暱稱
    message: string;    // 訊息內容
    timestamp: Date;    // 發訊息的時間標記
}

import { environment } from '../../../environments/environment';
import { ApiAiClient } from 'api-ai-javascript/es6/ApiAiClient';
import { BehaviorSubject } from 'rxjs';
import { Message } from './../../model/message';
...[略]...

...[略]...
export class ChatService {
  // 使用Dialogflow agent提供的access token，連往AI引擎
  readonly token = environment.dialogflow.angularBot;
  readonly client = new ApiAiClient({
    accessToken: this.token
  });
...[略]...

  // 可供訂閱的對話主題(出版端)
  conversation = new BehaviorSubject<Message[]>([]); 

  constructor() { }
  ...[略]...
}

export class ChatService {
 ...[略]...
 converse(userMsg: Message) {
    this.update(userMsg);
    return this.client.textRequest(userMsg.message)
    .then( (res) => {
      const speech = res.result.fulfillment.speech;
      const botMsg: Message = {
        userId: 'bot',
        message: speech,
        name: 'DialogFlow',
        timestamp: new Date()
      };
      this.update(botMsg);
    });
  }

  update(msg: Message) {
    this.conversation.next([msg]);
  }
}

export interface IServerResponse {
    id?: string;
    result?: {
        action: string,
        resolvedQuery: string,
        speech: string;
        fulfillment?: {
            speech: string
        }
    };
    status: {
        code: number,
        errorDetails?: string,
        errorID?: string,
        errorType: string
    };
}

export class ChatService {
 ...[略]...
    .then( (res) => {
      const speech = res.result.fulfillment.speech;
  ...[略]...    
}

import { Message } from './../../model/message';
import { Injectable } from '@angular/core';
import { ApiAiClient } from 'api-ai-javascript/es6/ApiAiClient';
import { environment } from '../../../environments/environment';
import { BehaviorSubject } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ChatService {
  readonly token = environment.dialogflow.angularBot;
  readonly client = new ApiAiClient({
    accessToken: this.token
  });

  conversation = new BehaviorSubject<Message[]>([]);

  constructor() { }

  converse(userMsg: Message) {
    this.update(userMsg);
    return this.client.textRequest(userMsg.message).then( (res) => {
      const speech = res.result.fulfillment.speech;
      const botMsg: Message = {
        userId: 'bot',
        message: speech,
        name: 'DialogFlow',
        timestamp: new Date()
      };
      this.update(botMsg);
    });
  }

  update(msg: Message) {
    this.conversation.next([msg]);
  }
}

...[略]...
<ion-footer>
  <form #myForm="ngForm">
    <ion-item>
      <ion-label position="floating">輸入訊息</ion-label>
      <ion-input [(ngModel)]="message" name="message" 
                (keyup.enter)="onSubmit(); myForm.reset()" type="text" 
                required>
      </ion-input>
    </ion-item>
  </form>
</ion-footer>

import { Message } from './../_model/message';
...[略]...
export class HomePage implements OnInit {
  user = {
    userId: 'G00001',
    displayName: 'Guest'
  };
  message: string;       // 雙向繫結屬性，紀錄輸入欄位資料
  
  ngOnInit() {}
  ...[略]...
}

import { ChatService } from './../services/chat.service';
...[略]...
export class HomePage implements OnInit {
  ...[略]...
  constructor(private chat: ChatService) {}
  // enter 鍵按下, 送出訊息
  onSubmit() {
    if (!this.message) { return; }
    const msg: Message = {
      userId: this.user.userId,
      name: this.user.displayName,
      message: this.message,
      timestamp: new Date()
    };
    this.sendMessage(msg);
  }
  // 送出訊息到chat service
  sendMessage(msg: Message) {
    this.chat.converse(msg);
  }
}

...[略]...
import { Observable } from 'rxjs';
import { scan } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  ...[略]...
  messages$: Observable<Message[]>;

  ngOnInit() {
    this.messages$ = this.chat.conversation.asObservable()
    .pipe(
      scan( (acc, val) => acc.concat(val) )
    );
  }
}

import { ChatService } from './../_services/chat/chat.service';
import { Message } from './../_model/message';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { scan } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  user = {
    userId: 'G00001',
    displayName: 'Guest'
  };
  message: string;
  messages$: Observable<Message[]>;

  constructor(private chat: ChatService) {}

  ngOnInit() {
    this.messages$ = this.chat.conversation.asObservable()
    .pipe(
      scan( (acc, val) => acc.concat(val) )
    );
  }

  // enter 鍵按下, 送出訊息
  onSubmit() {
    if (!this.message) { return; }
    const msg: Message = {
      userId: this.user.userId,
      name: this.user.displayName,
      message: this.message,
      timestamp: new Date()
    };
    this.sendMessage(msg);
  }
  // 送出訊息到chat service
  sendMessage(msg: Message) {
    this.chat.converse(msg);
  }
}

...
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let msg of messages$ | async">
      <ion-button [color]="msg.userId === 'bot' ? 'danger' : 'primary' " 
                  [ngClass]="msg.userId==='bot' ? 'button-left' : 'button-right'">
        {{ msg.message }}
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>
...

<ion-header>
  <ion-toolbar>
    <ion-title>聊天</ion-title>   
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let msg of messages$ | async">
      <ion-button [color]="msg.userId === 'bot' ? 'danger' : 'primary' " [ngClass]="msg.userId==='bot' ? 'button-left' : 'button-right'">
        {{ msg.message }}
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <form #myForm="ngForm">
    <ion-item>
      <ion-label position="floating">輸入訊息</ion-label>
      <ion-input [(ngModel)]="message" name="message" (keyup.enter)="onSubmit(); myForm.reset()" type="text" required>
      </ion-input>
    </ion-item>
  </form>
</ion-footer>

form {
    ion-item {
        --ion-item-background: #3880ff;
        --ion-item-color: #ffffff;
    }
}
.button-left {
    margin-right: auto;
}
.button-right {
    margin-left: auto;
}