Criando um Chatbot com IBM Watson e Node.js — parte 2 🤖

“A robot named Pepper holding an iPad” by Alex Knight on Unsplash

Esta é a continuação da criação de um chatbot utilizando Node.js e o IBM Watson.

No artigo anterior, criamos a nossa rota da API que é responsável por manipular a mensagem do usuário e devolver a resposta do Watson. Agora, iremos criar um chat simples com HTML, CSS e JavaScript para mostrar como é simples o fluxo das requisições.

Pré Requisitos

É necessário um conhecimento prévio em HTML, CSS e JS.

Para realizar a criação do chat recomendo ler o antigo anterior onde criamos nosso servidor.

Configurando o servidor

Para iniciarmos, temos que informar para o express qual será a pasta que conterá o conteúdo estático. É muito simples, precisamos apenas adicionar a partir da linha 4 esta linha de código:

app.use(express.static('./public'));

O código do nosso servidor será esse:

Agora que já temos definida qual a pasta iremos utilizar para servir nossa página, vamos criar nossos arquivos HTML, CSS e JS.

Nossa estrutura de arquivos ficará assim:

├── app.js
├── /public
│   ├── index.html
│   └── style.css
│   └── script.js

Estrutura do chat

A estrutura do nosso arquivo HTML será bem simples. Terá basicamente um input para o usuário digitar sua mensagem, e uma div com um id=”chat ” onde será colocada todas as mensagens recebidas.

Estilo do chat

O css do chat não tem muito segredo, o essencial é diferenciar quem enviou a mensagem de quem recebeu. Então teremos duas classes pra cada tipo de mensagem, uma chamada .from-user e outra .from-watson

Abaixo está o estilo que usei para essa demonstração:

Dando funcionalidade ao nosso chat

Agora que temos a estrutura e o estilo do nosso chat, está na hora de mexer no comportamento dele.

Antes de tudo, precisamos criar uma variável para salvarmos o contexto.

let context = {};

Agora vamos criar a função que gerará o template de cada mensagem do chat, ela receberá dois parâmetros, o conteúdo da mensagem e quem é o autor dela.

const chatMessageTemplate = (message, from) => `
  <div class="from-${from}">
    <div class="message-inner">
      <p>${message}</p>
    </div>
  </div>
  `;

Depois iremos criar a função que irá inserir o template da mensagem dentro do chat.

const InsertTemplateInChat = (template) => {
  const div = document.createElement('div');
  div.innerHTML = template;
  const chat = document.getElementById('chat');
  chat.appendChild(div);
};

Agora que temos as duas funções responsáveis por inserir as mensagens dentro do chat, vamos criar a função que irá chamar a API e pegar a resposta do Watson, após isso vamos alterar o contexto com o contexto que ele nos enviar.

Feito tudo isso podemos chamar as outras duas funções para que o usuário veja a mensagem.

const getWatsonMessageAndInsertTemplate = async (text = '') => {
const uri = 'http://localhost:3000/conversation/';
const response = await (await fetch(uri, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      text,
      context,
    }),
  })).json();
context = response.context;
const template = templateChatMessage(response.output.text, 'watson');
InsertTemplateInTheChat(template);
};

Vamos chamar a função no final do nosso script, sem nenhum parâmetro, para que o Watson possa mandar sua saudação :

getWatsonMessageAndInsertTemplate();

Em seguida, vamos criar um listener para as mudanças de texto dentro do input e, quando o usuário apertar a tecla ENTER, colocar a mensagem do usuário dentro do chat. Após isso, chamar a função do que buscará a resposta do watson passando a mensagem do usuário:

const textInput = document.getElementById('textInput');
textInput.addEventListener('keydown', (event) => {
  // Verifica se o usuário apertou a tecla enter
  // e se o texto dentro do input não está vazio
  if (event.keyCode === 13 && textInput.value) {
const template = chatMessageTemplate(textInput.value, 'user');
    InsertTemplateInChat(template);
    getWatsonMessageAndInsertTemplate(textInput.value);
    // Limpar o input para mensagens futuras
    textInput.value = '';
  }
});

O nosso arquivo script.js ficará assim:

Pronto

Agora que finalizamos a criação do nosso front-end podemos ver o chat funcionando.

No seu terminal, inicie o servidor com o comando node app.js e acesse a url http://localhost:3000/ que você verá seu chat em funcionamento.

Conclusão

Para montar o chat não tem segredo algum, apenas definir como será mostrada as mensagens, para o próximo artigo, irei demonstrar como combinar outros serviços do Watson a esse mesmo chat.

Vou deixar o código deste projeto aqui caso queiram utilizá-lo:

https://github.com/Leocardoso94/watson-sample-chatbot

Abraços e até a próxima.