Construção de um ChatBot com Angular 7 e DialogFlow ( Parte 2 — FiNAL)
Na segunda parte do artigo vamos implementar em Angular 7 nosso chatbot.
Abra o terminal no diretório de sua preferência e crie um projeto. Para mais detalhes na geração do projeto veja meu artigo.
No arquivo app.module.ts vamos importar dois módulos. O HttClientModule e o FormsModule.
// Outros imports omitidosimport { FormsModule } from '@angular/forms';import { HttpClientModule } from "@angular/common/http";
@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,HttpClientModule,FormsModule,],providers: [],bootstrap: [AppComponent]})export class AppModule { }
O próximo passo é a criação do serviço que acessa a API do DialogFlow.
No terminal de comando informe:
> ng g service bootComentando o código do BootService:
Vamos declarar duas propriedades para o endereço e o token (linhas 9 e 10). O token é obtido nas configurações do projeto, no console do DialogFlow.
O método getResponse será responsável pelas interações com o Agente. Realizamos um post da classe HttpClient, injetado no método construtor (linha 12).
Nós basicamente informamos o endereço, alguns parâmetros na query e o token de autorização no cabeçalho (linha 22), passado no método getHeaders (linha 26) .
Finalizado o serviço, a próxima etapa é a codificação do script.
No arquivo app.component.ts, definimos uma interface para mapear os campos do chat. A interface Message possui dois atributos string e um campo Date(linhas 5 a 9). Isso nos auxiliará a formatar os campos com base nas mensagens do bot ou do usuário.
Na linha 18 vamos controlar o elemento DOM para acionar o scroll de uma div, conforme a inclusão de mais mensagens.
A linha 20 é o input do usuário e a linha 21 um array de Message de respostas do boot.
No método initBoot(), iniciamos a primeira chamada ao Agente, passando um ‘oi’ (linha 29). Esse comportamento foi tratado na primeira parte do artigo.
O objeto JSON retornado possui várias propriedades. Daí o fato de no momento do subscribe, acessarmos especificamente a propriedade lista.result.fulfillment.messages, adicionando ao array de messages e identificando o remetente como boot (linha 32).
O método sendMessage, adiciona ao array, mas desta vez definindo o remetente como usuário (‘eu’) utilizando uma função acessória para remover acentos (linha 39).
O restante da implementação é semelhante ao método anterior, populando o array com as respostas do boot (linha 42).
Para acionar o scroll, verificamos toda vez que a página sofre atualizações no método ngAfterViewChecked (linha 48).
Vamos finalizar o projeto. No template app.component.html, limpe o código padrão que foi gerado na criação e deixe-o assim:
Na linha 11 declaramos a variável para manipular o scroll #scrollMe. Na linha 12 utilizamos a diretiva *ngFor para iterarmos sobre o array das respostas do boot.
Note que utilizamos o ngClass (linha 13) para decidir qual estilo será aplicado na formatação da lista de mensagens, criando o efeito de chats.
Todo o código do projeto está no GIT.
Abraços.
REFERÊNCIAS
