Dev (Back & Front)ARTIGO

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 ChatBotsChatbots21 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.

Criar Intent
Intents criadas automaticamente

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 AngularAngular30 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

Mestre em Informática pela Universidade Federal do Paraná. Atuo como professor e assessor pedagógico em Tecnologias Educacionais na rede Estadual de Educação do Paraná, NRE de Wenceslau Braz. Interesse em tecnologias que contribuam para aprendizagem significativa.

Ver perfil