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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
Criar Intent
Image for post
Image for post
Intents criadas automaticamente

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

E por consequência, coloquei as seguintes respostas:

Image for post
Image for post

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.

Image for post
Image for post

Na parte 2, vamos construir o projeto em Angular 7 e integrar a API do DialogFlow.

Até +

Links

  1. Documentação do DialogFlow (Oficial)
  2. Bots Brasil — Comunidade Discussões sobre ChatBots, PLN, IA, Facebook Messenger, Slack, Telegram
  3. Um guia para desenvolvedores de chatbots (Michael Yuan)
  4. Google e os cinco sentidos (RICARDO OGLIARI)

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