Como criar um bot com o Builder do Blip

A documentação abaixo apresenta um passo a passo de como criar um bot simples no Builder. O bot do exemplo, ClimaBot, entrega informações climáticas baseadas na localização do usuário.

Para a coleta das informações climáticas, foi utilizado a API OpenWeather. Confira:

Para criar um chatbot Builder, precisamos selecionar a opção “Criar chatbot” na página home do contrato:

Nesse exemplo, iremos construir um chatbot do zero, portanto, podemos selecionar a opção, escolher um nome e avançar:

Uma vez que temos o chatbot criado, podemos acessar o Builder e já vamos notar que o fluxo vem dessa forma:

Para adicionar um novo bloco, podemos selecionar o ícone adicionar bloco no canto esquerdo do builder. Como é o fluxo simples iremos criar apenas quatro blocos adicionais. Nesse exemplo, dei o nome dos blocos de “1 - Localização”, “2 - Previsão”, “3 - Região” e “Fim”:

O bloco de boas vindas será utilizado apenas para apresentação, portanto, podemos adicionar um texto utilizando a variável {{contact.name}} para obter o nome do usuário e também uma opção de quick reply para direcionar o usuário para o próximo bloco que será o “1 - Localização”. Nesse bloco manteremos apenas a condição de saída se resposta do usuário existe direciona para “1 - Localização”:

 

No bloco “1 - Localização” é onde receberemos a localização do usuário portanto Podemos selecionar a opção pedir localização e na entrada do usuário iremos definir a variável “location” que recebe a localização do usuário. Além disso a única condição de saída é direcionado para o próximo estado do fluxo que no caso é o bloco “2 - Região”:

No bloco de região é onde executaremos as ações de requisição http e execução de script sequencialmente e usaremos seu resultados para validar a região do usuário. Nesse caso configurei um conteúdo também com quick reply, mais a resposta da requisição em seu conteúdo e com duas opções: se sim o usuário é direcionado para o próximo estado do fluxo (Bloco “3 - Previsão”) e se não ele novamente direcionado para o início do fluxo:

A configuração da requisição http ficou da seguinte forma:

E o script configurado será para formatar o retorno dessa requisição. Utilizaremos o script no seguinte formato:

function run(responseclima) {

   // Converte a string JSON em um objeto JavaScript (caso ainda não seja um objeto)

   var data = JSON.parse(responseclima);

 

   // Acessa os valores

   var mainWeather = data.weather[0].main;

   var description = data.weather[0].description;

   var temperature = data.main.temp;

   var humidity = data.main.humidity;

   var windSpeed = data.wind.speed;

 

   // Retorna os valores em um objeto

   return {

       mainWeather: mainWeather,

       description: description,

       temperature: temperature,

       humidity: humidity,

       windSpeed: windSpeed

   };

}

 

Já no bloco previsão é o penúltimo estado do fluxo e é nele que apresentaremos os resultados da requisição com as informações do clima obtidas. Esse bloco não possuirá nenhuma ação e as condições de saída serão direcionando o usuário novamente para o bloco “1 - Localização” caso ele queira fazer uma nova consulta ou direcionando-o para o Fim do fluxo, caso não deseje. Para apresentar as informações do clima utilizaremos o retorno do script configurado no bloco anterior. Ficará da seguinte forma:

 

E por fim temos o bloco “Fim” cujo único objetivo é apresentar uma mensagem de despedida ao usuário e direcioná-lo novamente ao início do fluxo. Portanto esse bloco também não terá ações ou condições de saída. Utilizaremos apenas a saída padrão direcionando o usuário para o início do fluxo automaticamente:

Fluxo do ClimaBot - Arquivo com o fluxo do bot criado no exemplo. Para utilizá-lo basta fazer o download do arquivo e importá-lo no Blip.

https://blipmediastore.blob.core.windows.net/public-medias/Media_744410e6-e083-42bf-aeba-538e788e1a5a

Segue o link abaixo caso queira testar o clima bot:

https://takeblip-acessogeneral.chat.blip.ai/?appKey=Y2xpbWFib3QxOTA6NDcyMWUxODctZWRhMi00YTkwLWI0N2QtMjc0Njk4MzJmMzE4

 

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃