Create a Oracle chatbot client to communicate over webhook

As discussed in earlier post on how to setup the webhook channel for your bot, the next step would be to communicate to your bot using a client over the setup webhook channel.

Let’s use ionic framework along with angular to build a simple client. Please make sure to setup ionic as mentioned on the getting started section of ionic site. Once you have it, create an ionic app using tabs template.

ionic start mybot tabs
cd mybot
ionic serve

If all well above sequence should launch a starter app template in your default browser. Below is how it will look like

Without going into too much details of ionic lets do the minimal needed steps to convert it into a bot UI.

1. open home.html and delete everything and replace with below:

<ion-header>
<ion-navbar>
<ion-title>My Bot</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngFor="let item of items">
<div>{{item}}</div>
</div>
</ion-content>
<ion-footer>
<ion-row>
<ion-col>
<ion-input style="border: 1px solid grey" type="text" [(ngModel)]="msg"></ion-input>
</ion-col>
<ion-col col-auto>
<ion-icon style="font-size:xx-large" name="send" color="primary" (click)="send()"></ion-icon>
</ion-col>
</ion-row>
</ion-footer>

2. Same way replace home.ts with below:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items:string[]
msg:string

constructor(public navCtrl: NavController) {
this.items = []
}
send(){
this.items.push(this.msg)
this.msg = ''
}
}

3. Doing above will make a very minimal UI able to show the message you typed and show in chat window. It will look like below:

Nothing fancy but will do the job.

4. At this point we need a angular service that will hold the code to communicate with the chatbot over webhook. So generate a provider as below

ionic g provider bot-service

5. It will generate a service skeleton as below

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class BotServiceProvider {
constructor(public http: HttpClient) {
console.log('Hello BotServiceProvider Provider');
}
}

6. I am skipping how you will inject it into app.module.ts. Read ionic docs for that. The next step would be to create a method to accept sent message from the client and pass it to webhook. Create it like below:

send(msg:string){
console.log('sending message:' + msg)
}

and home.ts will now look like:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BotServiceProvider } from '../../providers/bot-service/bot-service';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items:string[]
msg:string
constructor(public navCtrl: NavController,
public botSvc:BotServiceProvider) {
this.items = []
}
send(){
this.items.push(this.msg)
this.botSvc.send(this.msg)
this.msg = ''
}
}

7. To be able to share the same items array across the chat session we need to move it to chat-service first. So, after doing that code will look like below for these 3 files:

8. Now, comes the actual webhook code to communicate with bot server. Your bot-service.ts will look like below:

That’s all. You will see the following outcome