Construção de um ChatBot com Angular 7 e DialogFlow ( Parte 1)

4 min readNov 19, 2018

O desenvolvimento de Agentes inteligentes, mas especificamente os ChatBots está cada vez mais simples e rápido.

O campo e as aplicações do tema Inteligência Artificial estão em plena ebulição, impulsionado por gigantes da Tecnologia como o Facebook e a Google. Esta última demonstra explicitamente seus planos para o uso dessa temática (veja o artigo do Ricardo Ogliori)

Dessa forma, é natural para o desenvolvedor entender e começar a propor soluções que fazem usos dessa vertente.

Nesta série (2 partes) vamos desenvolver um chat que interage com um agente baseado em conversas em linguagem natural. Para isso, utilizaremos o DialogFLow.

O que é ?

DialogFlow é uma plataforma que fornece novas maneiras de interagir com seu produto criando interfaces conversacionais baseadas em voz e texto, como aplicativos de voz e chatbots, com tecnologia IA (DIALOGFLOW, 2018).

Para mais detalhes sobre a ferramenta e características, indico alguns links no fim do artigo.

Para nosso exemplo, o agente que será desenvolvido está no domínio da resolução de problemas de um aplicativo, mas fique a vontade para pensar em qualquer domínio.

Criando o Agente

Primeiro, vamos acessar o console em https://console.dialogflow.com/api-client.

Você deverá associar a uma conta google, e assim que logar, será redirecionado para a página inicial, clique no canto direito em “Create New Agent”.

Agentes são descritos como módulos NLU (Natural Language Understanding) .

Dei o nome para o agente de “ChegueiNaHora”.

Criado o agente, vamos criar as Intents.

As intenções, mapeiam a entrada do usuário para as respostas. Nós devemos definir expressões que acionam a intenção e como será a resposta.

Duas Intents são criadas automaticamente assim que um agente foi definido.

Criar Intent

Vamos editar o Default Welcome Intent, que será a primeira interação do chat.

Ao clicar irá notar que ela também já veio com algumas expressões por padrão.

Nesta seção são as frases que você espera do usuário. Esse Intent será a primeira para nosso usuário.

Na parte de baixo, você encontrará a tela de respostas (Response).

Aqui eu editei para apresentar a mensagem inicial do assistente.

Você pode inserir mais respostas, ou seguir meu exemplo.

Lembre de salvar o agente.

No meu exemplo, eu espero que o usuário forneça expressões a problemas relacionadas ao uso do aplicativo. Assim, as próximas Intents serão criadas mapeando especificamente esses problemas.