Hi,
I did a Ionic bot chat with dialogflow V1. I am trying to upgrade my code to Dialogflow V2 because Dialogflow V1 API will shutdown in March 31st, 2020.
I had two problems:
1)
This is my dialogflow.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators';
import { AutenticacaoService } from '../services/autenticacao.service';
const environment = {
clientAccessToken: '<my token from dialogflow agent console>',
};
@Injectable({
providedIn: 'root'
})
export class DialogflowService {
// private baseURL: string = "https://api.dialogflow.com/v1/query?v=20150910"; // OLD
private baseURL: string = "https://dialogflow.googleapis.com/v2/projects/<my project ID>/agent"; // NEW CODE (acordind instructions -> https://dialogflow.com/docs/reference/v2-auth-setup
private token: string = environment.clientAccessToken;
private email: string;
private gcloudAuth: string = "<my code indicated -> "gcloud auth application-default print-access-token">"; // see page [https://cloud.google.com/sdk/gcloud/reference/auth/application-default/print-access-token](https://cloud.google.com/sdk/gcloud/reference/auth/application-default/print-access-token)
ionViewWillEnter() {
this.email = '<some email>';
}
constructor(
private http: Http,
) {
}
public getResponse(query: string, email: string) {
// OLD CODE (Dialogflow v1)
/* let data = {
query : query,
lang: 'pt',
sessionId: email,
} */
// NEW CODE TO DIALOGFLOW v2 (see site https://cloud.google.com/dialogflow/docs/quick/api#detect-intent-text-drest
let data = {
queryInput: {
text: {
query,
languageCode: 'pt'
}
}
}
return this.http
.post(`${this.baseURL}`, data, { headers: this.getHeaders() }).pipe(
map(res => {
return res.json()
}))
}
public getHeaders() {
let headers = new Headers();
// headers.append('Authorization', `Bearer ${this.token}`); // OLD (Dialogflw v1)
headers.append('Authorization', `Bearer ${this.gcloudAuth}`); // NEW (Dialogflow v2)
return headers;
}
}
This is a part of my chat bot ts code:
public sendMessage(): void {
this.dialogflowService.getResponse(this.message.content, this.email).subscribe(res => {
// this.mensagemobject = res.result.fulfillment.messages; // OLD (Dialogflow v1)
this.mensagemobject = res.queryResult.fulfillment.messages; // NEW (Dialogflow v2)
// this.tamanho = res.result.fulfillment.messages.length; // OLD (Dialogflow v1)
this.tamanho = res.queryResult.fulfillment.messages.length; // NEW (Dialogflow v2)
console.log(this.mensagemobject);
for (var i = 0; i <= this.tamanho; i++) {
this.messages.push(
new Message(this.nomePersonagemAI, this.mensagemobject[i].speech, this.avatar)
);
}
});
}
I had two problems:
PROBLEM 1 (Gcloud Auth)- authentication - I ran “gcloud beta auth application-default print-access-token” in gcloud power shell console to take my gcloud auth. I putted in my ionic code (it runs), but afther some minutes, my gcloud auth expires.
run im my gcloud power shell (see https://cloud.google.com/sdk/gcloud/reference/beta/auth/application-default/print-access-token:
$ gcloud beta auth application-default print-access-token
PROBLEM 2 (INVALID_ARGUMENT):
chrome console (run with ionic serve):
"{
"error": {
"code": 400,
"message": "Invalid JSON payload received. Unknown name \"query\" at 'agent': Cannot find field.\nInvalid JSON payload received. Unknown name \"sessionId\" at 'agent': Cannot find field.\nInvalid JSON payload received. Unknown name \"agent\" at 'agent': Cannot find field.",
"status": "INVALID_ARGUMENT",
"details": [
{
"@type": "type.googleapis.com/google.rpc.BadRequest",
"fieldViolations": [
{
"field": "agent",
"description": "Invalid JSON payload received. Unknown name \"query\" at 'agent': Cannot find field."
},
{
"field": "agent",
"description": "Invalid JSON payload received. Unknown name \"sessionId\" at 'agent': Cannot find field."
},
{
"field": "agent",
"description": "Invalid JSON payload received. Unknown name \"agent\" at 'agent': Cannot find field."
}
]
}
]
}
}
"
My ionic app was running without any problem with dialogflow v1, but i am not been able run it (using http.post) in my ionic app.
DOES ANYONE KNOW THE RIGHT WAY TO RUN HTTP.POS IN DIALOGFLOW v2 ??? (below)
return this.http
.post(`${this.baseURL}`, data, { headers: this.getHeaders() }).pipe(
map(res => {
return res.json()
}))
}
