Hello there, we'll create a chatbot. These are the main steps :
1. Create an Angular App. 2. Install dependencies 3. Create DialogFlow project 4. Integrate
Lets Start ;)
ng new first-chatbot
Install Dependencies
npm install api-ai-javascript -D --save
npm install rxjs@6 rxjs-compat@6 --save
npm install milligram --save
Create DialogFlow Project
Go to the dialog flow and login with your Google account.
https://console.dialogflow.com/api-client/#/login
Create your project
[Image]
Create an Intent
With intent, you may create your own question/response.
1. Add your question(s) to the "Training Phrases" this training data will be used by the AI.
2. Add your response to the "responses". These responses will be linked with your training data.
[Image]
You may try your bot directly!
[Image]
The Dialogflow will provide the response as a json object as below :
{
"responseId": "c8f16ca2-be4c-4104-8ebf-1535ac4a2e11",
"queryResult": {
"queryText": "who am i",
"parameters": {},
"allRequiredParamsPresent": true,
"fulfillmentText": "You are energy and matter... And beyond...",
"fulfillmentMessages": [
{
"text": {
"text": [
"You are energy and matter... And beyond..."
]
}
}
],
"intent": {
"name": "projects/first-chat-bot/agent/intents/fbc58d05-3d39-4533-8bee-1b2b067747c4",
"displayName": "who am I"
},
"intentDetectionConfidence": 1,
"languageCode": "en"
}
}
And the most important thing is your client access token, copy it. We'll need it :)
[Image]
Integrate
1. Place your Client access token to your environment.ts (That you've copied from the DialogFlow project settings)
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
dialogflow: {
chatbot: 'YOUR_CLIENT_ACCESS_TOKEN_HERE'
}
};
/*
* In development mode, to ignore zone related error stack frames such as
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
* import the following file, but please comment it out in production mode
* because it will have performance impact when throw error
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
2. Create a component & Service
ng g module chat
ng g service chat -m chat
ng g component chat/chat-dialog -m chat
Service layer (chat.service.ts)
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { ApiAiClient } from 'api-ai-javascript';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable({
providedIn: 'root'
})
export class Message {
constructor(public content: string, public sentBy: string) { }
}
export class ChatService {
readonly token = environment.dialogflow.chatbot;
readonly client = new ApiAiClient({ accessToken: this.token });
conversation = new BehaviorSubject<Message[]>([]);
constructor() { }
update(msg: Message) {
this.conversation.next([msg]);
}
converse(msg: string) {
const userMessage = new Message(msg, 'user');
this.update(userMessage);
return this.client.textRequest(msg)
.then(res => {
const speech = res.result.fulfillment.speech;
const botMessage = new Message(speech, 'bot');
this.update(botMessage);
})
;
}
talk() {
this.client.textRequest('Who am I')
.then(res => console.log(res))
;
}
}
Component (chat-dialog/chat-dialog.component.ts)
import { Component, OnInit } from '@angular/core';
import { ChatService, Message } from '../chat.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/scan';
"Hello Chatbot! How to create a chat bot? Fast! - Angular and DialogFlow! Chatbot with AI."
No comments yet. -