Construção de um ChatBot com Angular 7 e DialogFlow ( Parte 2 — FiNAL)

Image for post
Image for post
Figura 1 — Preview do Chat

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.

O próximo passo é a criação do serviço que acessa a API do DialogFlow.

No terminal de comando informe:

Comentando o código do BootService:

boot.service.ts

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.

Image for post
Image for post
Figura 2 — Propriedades 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

Snippet do chat utilizado — Pavan Komiagin

Angular HttpClient

NgClass

Written by

Professor e desenvolvedor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store