Construção de um ChatBot com Angular 7 e DialogFlow – Parte 01
Nesta primeira parte da série de artigos sobre chatbots, Kheronn Machado mostra como construí-los usando o Angular 7 e o DialogFlow.
O desenvolvimento de Agentes Inteligentes, mais especificamente os ChatBots↳Chatbots21 conteúdosiMasters Case – Cresce uso de chatbots no WhatsAppDevSecOps · nov 2020Criando um ChatBot em menos de 5 minutos? Sim, é possível!AI · abr 2019Chatbots que analisam tom de voz e texto reduzem frustração em atendimentosAI · jul 2025Ver tudo em AI →, está cada vez mais simples e rápido.
O campo e as aplicações da inteligência artificial estão em plena ebulição, impulsionados 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 de duas 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 final do artigo.
Para nosso exemplo, o Agente que será desenvolvido está no domínio da resolução de problemas de um aplicativo, mas fique à vontade para pensar em qualquer domínio.
Criando o Agente
Primeiro acessaremos o console em https://console.dialogflow.com/api-client.
Você deverá associar à 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. 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.


Vamos editar o Default Welcome Intent, que será a primeira interação do chat. Ao clicar, 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-se de salvar o agente.
No meu exemplo, eu espero que o usuário forneça expressões a problemas relacionados ao uso do aplicativo. Dessa forma, as próximas Intents serão criadas mapeando especificamente esses problemas.

Por exemplo, a Intent localização, informei as seguintes expressões que espero que o usuário informe:

E por consequência, coloquei as seguintes respostas:

Para finalizar, você pode testar como está a interação de diálogos com seu agente.
No canto direito, encontre o campo de entrada e realize os testes.

Na parte dois vamos construir o projeto em Angular↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) → 7 e integraremos a API do DialogFlow.
Até mais!
Links
- Documentação do DialogFlow (Oficial)
- Bots Brasil — Comunidade Discussões sobre ChatBots, PLN, IA, Facebook Messenger, Slack, Telegram
- Um guia para desenvolvedores de chatbots (Michael Yuan)
- Google e os cinco sentidos (Ricardo Ogliari)






