Front End

29 nov, 2018

Construção de um ChatBot com Angular 7 e DialogFlow – Parte 01

Publicidade

O desenvolvimento de Agentes Inteligentes, mais especificamente os ChatBots, 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 Angular 7 e integraremos a API do DialogFlow.

Até mais!

Links