Como criar um Chatbot em React.js?

Neste artigo, ensinaremos tudo o que você precisa saber sobre chatbots. Veremos os benefícios de usar um chatbot, os tipos de chatbots, as plataformas de chatbot sem código e as soluções de chatbot personalizadas. Por fim, implementaremos nosso próprio chatbot personalizado baseado em regras com React e Back4app.

O que é um Chatbot?

Um chatbot é um programa de computador projetado para simular uma conversa humana por meio de comandos de voz, mensagens de texto ou ambos. Ele pode ser tão simples quanto um bot baseado em regras ou um chatbot avançado com inteligência artificial que entende as perguntas dos clientes e gera respostas personalizadas.

Os chatbots vêm ganhando popularidade de forma constante desde a década de 2010 e são uma parte importante de quase todas as empresas. Os bots permitem que as empresas aprimorem o atendimento ao cliente, aumentem o envolvimento do cliente, reduzam os custos, melhorem a experiência do usuário e coletem dados do cliente.

Atualmente, os chatbots podem ser encontrados em praticamente qualquer lugar: em sites, aplicativos móveis, mensageiros móveis e assim por diante. É provável que você tenha até mesmo alguns assistentes virtuais, como o Google Assistant, Siri e Bixby, instalados em seu dispositivo móvel.

Benefícios de um Chatbot

Há muitos benefícios em usar um chatbot. Vamos dar uma olhada em alguns deles.

Custo-benefício

Os chatbots são ótimos para lidar com tarefas simples. Eles podem ser programados para lidar com consultas simples e, ao mesmo tempo, redirecionar as consultas complexas para um representante humano do atendimento ao cliente. Dessa forma, sua empresa pode reduzir bastante os custos de mão de obra e, ao mesmo tempo, oferecer um excelente suporte ao cliente.

Disponibilidade 24 horas por dia, 7 dias por semana

Os chatbots são convenientes para fornecer atendimento e suporte ao cliente 24 horas por dia, 7 dias por semana, sem a necessidade de operadores humanos. Isso é ótimo se seus clientes estiverem espalhados em diferentes fusos horários.

Escalabilidade

Os bots podem lidar com um grande volume de interações simultaneamente. Isso aumenta a produtividade dos negócios e elimina os tempos de espera, resultando em clientes mais satisfeitos.

Personalização

Os assistentes digitais podem ser programados para fornecer recomendações ou respostas personalizadas aos usuários com base em suas características ou comportamentos individuais. Isso pode melhorar muito a experiência do usuário, aumentar as vendas, criar confiança e até mesmo melhorar a retenção de clientes.

Coleta de dados

Os chatbots podem coletar dados dos clientes, o que pode ser útil para as empresas melhorarem seus produtos e serviços. Além disso, os chatbots baseados em IA podem aprender com suas conversas anteriores e oferecer melhor suporte ao longo do tempo.

Suporte a vários idiomas

Os bots não estão limitados a um único idioma. Alguns dos melhores bots podem reconhecer em que idioma uma pergunta foi feita e responder nesse idioma.

Tipos de chatbots

Há vários tipos de chatbots, cada um com seus próprios recursos e usos exclusivos. Podemos categorizá-los com base em diferentes propriedades.

Inteligência

A inteligência determina se o bot é “inteligente” ou “burro”. Quando dizemos “burro”, geralmente estamos nos referindo a chatbots baseados em regras que têm regras codificadas e não podem responder a perguntas que nunca viram antes. Por outro lado, por “inteligente” queremos dizer chatbots alimentados por IA que usam NLP (Processamento de Linguagem Natural) e ML (Aprendizado de Máquina) para entender a pergunta do cliente e gerar uma resposta personalizada. Os chatbots híbridos usam funcionalidade baseada em regras, além de IA.

• Chatbots baseados em regras
• Chatbots com tecnologia de IA
• Chatbots híbridos

Área de serviço

A área de serviço determina qual é o objetivo do chatbot. Algumas das áreas de serviço comuns incluem:

• Suporte ao cliente
• Assistente pessoal (Bixby, Alexa, Amazon Echo)
• Assistente de vendas virtual

Plataforma

Os chatbots podem ser implantados em várias plataformas. A escolha de onde implantar um chatbot dependerá do caso de uso específico e do público-alvo.

• Web (bolhas de bate-papo flutuantes, widgets)
• Plataformas de mensagens (Facebook Messenger, Whatsapp, Viber)
• Aplicativos móveis (Bixby, Siri, Google Assistant)
• Dispositivos IoT (alto-falantes inteligentes, dispositivos domésticos inteligentes)

Estado

Há duas arquiteturas de chatbot:

• Chatbots com estado
• Chatbots sem estado

Os chatbots com estado mantêm um registro das interações anteriores com o usuário e levam isso em consideração quando uma nova pergunta é feita. Isso é ótimo, pois permite que eles ofereçam uma experiência mais personalizada. Em geral, eles são mais sofisticados e mais difíceis de codificar.

Os chatbots sem estado, por outro lado, não levam em conta as interações anteriores. Eles tratam cada mensagem como uma solicitação independente. Eles são mais simples, não podem proporcionar uma experiência personalizada e não podem basear suas respostas no contexto.

Soluções de chatbot

Plataformas de chatbot

As plataformas de chatbot com pouco código ou sem código são soluções que funcionam imediatamente. Elas são fáceis de usar, não exigem habilidades avançadas de codificação e permitem que você coloque seu chatbot em funcionamento rapidamente.

Eles geralmente vêm com um editor de arrastar e soltar simples de usar que permite que você defina o comportamento do seu chatbot. Eles podem ser facilmente implantados em diferentes plataformas, incluindo sites, Facebook Messenger, Slack, Whatsapp e assim por diante.

Elas oferecem um nível mais baixo de controle e personalização do que os bots personalizados. A maior desvantagem dessas plataformas é a dependência do fornecedor. Depois de escolher a plataforma, não é possível migrar facilmente para outra.

Alguns exemplos dessas plataformas são Tidio, Landbot, ChatBot e AgentBot.

Bot personalizado

Os bots personalizados são soluções altamente personalizáveis e flexíveis que podem ser adaptadas às necessidades específicas de qualquer empresa. Eles permitem uma integração perfeita com sistemas e bancos de dados já existentes.

Como criar um chatbot do zero é uma tarefa difícil, você pode esperar que demore mais e custe mais do que usar uma plataforma de chatbot pronta. Se o seu objetivo é criar um bot de IA avançado, provavelmente também precisará de uma equipe de desenvolvedores especializados.

Os bots personalizados podem ser escritos em praticamente qualquer linguagem de programação. A maioria dos desenvolvedores opta por Python, Node.js, JavaScript e Java. Para simplificar ainda mais o processo de criação de bots, há várias bibliotecas de chatbot de código aberto que você pode escolher.

Como criar um Chatbot?

Nesta parte do tutorial, criaremos um chatbot personalizado baseado em regras. Usaremos o React para o front-end e o Back4app para o back-end.

O que é o Back4app?

A Back4app é uma plataforma de backend como serviço (BaaS) hospedada na nuvem que facilita aos desenvolvedores a criação e a manutenção de aplicativos móveis personalizados. Ele oferece uma interface de usuário intuitiva, um painel avançado e ferramentas úteis, como interface de linha de comando (CLI), notificações push, análises, armazenamento de dados e muito mais.

Eles também fornecem SDKs para todas as suas ferramentas favoritas, como Flutter, React Native, Node.js, Angular, Android, iOS e muito mais!

Os principais recursos do Back4app incluem:

• Interface semelhante a uma planilha
• Interfaces de programação de aplicativos – APIs REST e GraphQL
• Consultas ao vivo
• Autenticação (incluindo autenticação social)
• Hospedagem escalável
• Notificações

Para obter mais informações, consulte Recursos do Back4app.

A Back4app segue um modelo de preços previsível e fácil de entender. Eles oferecem um plano gratuito generoso (sem necessidade de cartão de crédito) que é ótimo para criar protótipos e testar a plataforma. Ele inclui:

• 25 mil solicitações de API
• 250 MB de armazenamento de dados
• Transferência de dados de 1 GB
• 1 GB de armazenamento de objetos

Para obter mais informações sobre os preços da Back4app, dê uma olhada na página de preços.

Introdução ao projeto

Criaremos um chatbot simples com solicitações e respostas predefinidas. O chatbot poderá responder com texto, imagens e exibir diferentes opções com base na última solicitação. O front-end será criado com o React e usaremos o Back4app (com o Express) para o back-end.

Pré-requisitos:

• Experiência com JavaScript
• Experiência com React e React Hooks
• Conhecimento básico de solicitações e respostas HTTP
• Conhecimento básico de BaaS (Backend as a Service)

Primeiro, trabalharemos no frontend, depois no backend e, por fim, conectaremos as duas partes.

Front-end do chatbot

Criar aplicativo React

Vamos começar criando um novo aplicativo React por meio do Create React App:

$ npx create-react-app react-chatbot
$ cd react-chatbot

Isso criará um aplicativo React chamado react-chatbot e alterará seu diretório de trabalho.

Em seguida, inicie o projeto:

$ npm start

Por fim, abra http://localhost:3000/ para ver seu aplicativo da Web.

Material UI

Para simplificar o processo de criação da interface do usuário, usaremos o Material UI, uma biblioteca de componentes React de código aberto que implementa o Material Design do Google. A biblioteca de componentes inclui uma coleção abrangente de componentes pré-construídos que funcionam imediatamente.

Sinta-se à vontade para trocar a Material UI por uma estrutura de UI diferente, como React Bootstrap ou Ant Design.

Para adicionar o Material UI ao seu projeto, execute:

$ npm install @mui/material @emotion/react @emotion/styled

O Material UI usa a fonte Roboto por padrão. Vamos instalá-la com:

$ npm install @fontsource/roboto

Em seguida, navegue até index.js e adicione as seguintes importações:

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Interface do usuário

Navegue até App.js na pasta src e substitua seu conteúdo pelo seguinte:

// src/App.js

import React, {useEffect, useState} from "react";
import {Box, Button, Card, CardContent, Grid, TextField} from "@mui/material";

function App() {

  const messagesListRef = React.createRef();
  const [messageInput, setMessageInput] = useState("");
  const [messages, setMessages] = useState([]);

  const sendMessage = (content) => {
    // add the message to the state
    setMessages([
      ...messages,
      {
        content: content,
        isCustomer: true,
      }
    ]);

    // TODO: post the request to Back4app
  }

  const handleSubmit = (event) => {
    event.preventDefault();

    sendMessage(messageInput);
    setMessageInput("");
  }

  return (
    <Grid
      container
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Card sx={{maxWidth: 420}}>
        <CardContent>
          <Box
            ref={messagesListRef}
            sx={{
              height: 420,
              overflow: "scroll",
              overflowX: "hidden",
            }}
          >
            <Box sx={{m: 1, mr: 2}}>
              {/* TODO: messages will be displayed here */}
            </Box>
          </Box>
          <Box
            component="form"
            sx={{
              mt: 2,
              display: "flex",
              flexFlow: "row",
              gap: 1,
            }}
          >
            <TextField
              variant="outlined"
              size="small"
              value={messageInput}
              onChange={(event) => setMessageInput(event.target.value)}
              fullWidth
            />
            <Button
              variant="contained"
              onClick={handleSubmit}
              type="submit"
            >
              Send
            </Button>
          </Box>
        </CardContent>
      </Card>
    </Grid>
  );
}

export default App;

1. Definimos um formulário simples com uma entrada de mensagem que chama handleSubmit() no envio.
2. Usamos o gancho useState() do React para lidar com o estado.
   • messageInput é a mensagem atual
   • messages é a lista de mensagens
3. handleSubmit() limpa a entrada de mensagem e chama sendMessage(), que anexa a mensagem ao estado.

Continuando, vamos criar um componente para exibir as mensagens.

Crie uma nova pasta chamada components dentro da pasta src e, nessa pasta, crie um novo arquivo chamado Message.js com o seguinte conteúdo:

// src/components/Message.js

import avatar from "../assets/bot.png";
import {Avatar, Box, Chip, Typography} from "@mui/material";

export default function Message(props) {
  return (
    <div>
      <Box
        sx={{
          my: 2,
          display: "flex",
          flexFlow: "row",
          justifyContent: props.isCustomer ? "right" : "left",
        }}
      >
        {!props.isCustomer && (
          <Avatar sx={{mr: 1, bgcolor: "primary.main"}}>
            <img src={avatar} alt="Chatbot avatar" width={32}/>
          </Avatar>
        )}
        <Box>
          <Typography gutterBottom variant="body2" component="div" sx={{mt: 1.5}}>
            {props.content}
          </Typography>
          {props.image && (
            <img src={props.image} alt="Bot response" style={{width: "100%"}}/>
          )}
          {!props.isCustomer && props.choices && (
            <Box sx={{mt: 1}}>
              {props.choices.map((choice, index) => (
                <Chip
                  key={index}
                  label={choice}
                  onClick={() => props.handleChoice(choice)}
                  sx={{mr: 0.5, mb: 0.5}}
                />
              ))}
            </Box>
          )}
        </Box>
      </Box>
    </div>
  );
}

Esse componente recebe algumas entradas arbitrárias(props) e, em seguida, exibe uma mensagem.

• content — conteúdo da mensagem
• image — imagem da mensagem
• isCustomer — verdadeiro se a mensagem for enviada pelo usuário
• opções — opções que o usuário pode escolher
• handleChoice — a função que é chamada quando uma opção é selecionada

Em seguida, crie uma pasta chamada assets dentro da pasta src e coloque uma imagem que você gostaria que o chatbot usasse como avatar. Fique à vontade para usar esta imagem.

Certifique-se de nomear a imagem do avatar como bot.png ou altere a importação em Message.js.

Por fim, para utilizar o componente recém-criado, substitua o TODO no App.js da seguinte forma:

// App.js

{messages.map((message, index) => (
  <Message
    key={index}
    content={message.content}
    image={message.image}
    isCustomer={message.isCustomer}
    choices={message.choices}
    handleChoice={sendMessage}
  />
))}

Não se esqueça de adicionar a importação na parte superior do arquivo:

import Message from "./components/Message";

Para garantir que tudo funcione bem, abra seu navegador da Web favorito e navegue até http://localhost:3000. Tente enviar algumas mensagens. Se tudo funcionar bem, elas deverão ser adicionadas à interface do usuário:

Back-end do chatbot

Continuando, vamos implementar o backend.

Criar aplicativo

As etapas a seguir exigirão que você tenha uma conta do Back4app. Se já a tiver, faça login, caso contrário, vá em frente e inscreva-se na conta gratuita.

Para trabalhar com o Back4app, primeiro precisamos criar um aplicativo. Ao fazer login no seu painel, você verá a lista de seus aplicativos. Clique em “Build a new app” (Criar um novo aplicativo) para criar um novo aplicativo.

Dê a ele um nome personalizado, escolha “NoSQL Database” como seu banco de dados e clique em “Continue”.

A Back4app levará alguns minutos para preparar tudo o que é necessário para o seu aplicativo, como o banco de dados, a camada de aplicativos, o dimensionamento, os backups e a segurança.

Quando o aplicativo estiver pronto, você será redirecionado para o painel de controle do aplicativo.

Banco de dados

Vamos definir os modelos de banco de dados para o chatbot.

Navegue até o painel do Back4app e selecione “Database” (Banco de dados) no lado esquerdo da tela. Depois disso, clique em “Create a class” (Criar uma classe), nomeie-a BotSettings, marque “Public Read and Write Enabled” (Leitura e gravação públicas ativadas) e clique em “Create class & add columns” (Criar classe e adicionar colunas).

Adicione as seguintes colunas:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | welcomeContent   | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | welcomeChoices   | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseUnknown  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+

1. O welcomeContent será exibido quando o usuário abrir o bate-papo
2. welcomeChoices são as opções padrão que o usuário pode escolher sem digitar uma mensagem
3. responseUnknown é retornado se o chatbot não puder encontrar uma resposta para uma mensagem

Depois disso, crie uma linha com as configurações personalizadas. Exemplo:

+----------------+---------------------------+----------------------------------+
| welcomeContent | welcomeChoices            | responseUnknown                  |
+----------------+---------------------------+----------------------------------+
| Hi there!      | ["Shipping","Size guide"] | I don't understand this message. |
+----------------+---------------------------+----------------------------------+

Em seguida, crie outra classe chamada BotResponse com as seguintes colunas:

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | requestExact     | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | requestKeywords  | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseContent  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| String    | responseImage    | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| Array     | responseChoices  | <leave blank> | no       |
+-----------+------------------+---------------+----------+

O chatbot usará esse modelo para procurar a resposta correta para uma solicitação específica. Em primeiro lugar, ele verificará se a mensagem é igual a alguma coluna requestExact e, caso contrário, se contém alguma requestKeywords. Se nenhuma das respostas corresponder à solicitação, uma mensagem de fallback será retornada.

Depois de criar o modelo, vá em frente e crie algumas respostas ou importe esse conjunto de dados.

Hospedagem na Web

Como vamos criar uma API Express (usando o Cloud Code), precisamos ativar a hospedagem na Web para que o Back4app hospede nosso aplicativo e o torne publicamente acessível à Internet.

Para ativar o recurso de hospedagem na Web, navegue até o painel do Back4app, selecione seu aplicativo, clique em “App Settings” (Configurações do aplicativo) no lado esquerdo da tela e, em seguida, em “Server Settings” (Configurações do servidor). Procure por “Webhosting and Custom Domains” (Hospedagem na Web e domínios personalizados) e clique em “Settings” (Configurações) novamente.

Clique em “Activate Back4app Hosting” e escolha um nome de subdomínio. Vou usar chatbot:

Por fim, clique em “Save” (Salvar).

Seu aplicativo agora poderá ser acessado em:

https://<your_subdomain>.b4a.app/

Expressar com o código de nuvem

Nesta seção do tutorial, usaremos o Cloud Code e o Express para criar uma API para o nosso frontend consumir. A API terá os seguintes pontos de extremidade:

1. / retorna as configurações do chatbot
2. /ask/ procura uma solicitação no banco de dados e retorna uma resposta

No lado direito da tela, selecione “Cloud Code” > “Functions & Web Hosting” e use a interface da Web para criar a seguinte estrutura de diretórios:

./
├── cloud/
│   ├── app.js
│   ├── package.json
│   └── routes.js
└── public/
    └── index.html

Coloque o seguinte conteúdo no package.json:

// cloud/package.json

{
  "dependencies": {
    "body-parser": "*"
  }
}

O Back4app usa esse arquivo para baixar módulos via npm. Adicionamos o body-parser, pois precisaremos dele mais tarde para analisar solicitações.

Coloque o seguinte em app.js para inicializar o servidor Express:

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

require("./routes");

Por fim, defina as rotas no routes.js da seguinte forma:

app.get("/", async (req, res) => {
  // fetch the settings and the default choices
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();
  res.send({
    content: settings.get('welcomeContent'),
    choices: settings.get('welcomeChoices'),
  });
})

app.post("/ask", async (req, res) => {
  let content = req.body.content.trim().toLowerCase();
  content = content.replace(/[.,?!]/, "");  // remove punctuation

  // check for exact matches
  const exactQuery = new Parse.Query("BotResponse");
  exactQuery.equalTo("requestExact", content);
  const exactResult = await exactQuery.first();

  if (exactResult != null) {
    return res.send({
      content: exactResult.get('responseContent'),
      image: exactResult.get('responseImage'),
      choices: exactResult.get('responseChoices'),
    })
  }

  // split the messsage and check for keyword matches
  const words = content.split(" ");
  for (let i = 0; i < words.length; i++) {
    const keywordQuery = new Parse.Query("BotResponse");
    keywordQuery.equalTo('requestKeywords', words[i]);
    const keywordResult = await keywordQuery.first();

    if (keywordResult != null) {
      return res.send({
        content: keywordResult.get('responseContent'),
        image: keywordResult.get('responseImage'),
        choices: keywordResult.get('responseChoices'),
      })
    }
  }

  // fallback message if the request wasn't understood
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();

  res.send({
    content: settings.get('responseUnknown'),
    choices: settings.get('welcomeChoices'),
  });
})

Esse código define os pontos de extremidade mencionados anteriormente e a lógica do chatbot para procurar as respostas corretas.

Quando terminar, clique em “Deploy” (Implantar) no canto inferior direito da tela. Se tudo correr bem, você verá uma mensagem verde dizendo “Success in deploying your changes!”.

Verifique se a API funciona enviando uma solicitação GET para o índice da API:

$ curl <your_webhost_url>

# Example: 
# curl https://chatbot.b4a.app/

{
  "content": "Hi there! 👋 I'm your digital assistant. Feel free to ask me anything!",
  "choices": [
    "Shipping",
    "Size guide",
    "Contact Us"
  ]
}

Conectar o front-end ao back-end

Para facilitar um pouco o tratamento de solicitações e respostas HTTP, instalaremos o axios, um cliente HTTP baseado em promessas extensível e simples de usar para o navegador e o Node.js.

Para instalá-lo, execute:

$ npm install axios

Adicione a importação na parte superior do App.js:

import axios from "axios";

Em seguida, defina o baseURL na parte superior do App.js da seguinte forma:

// src/App.js

const baseURL = "https://<url_to_your_web_hosting>/";  // make sure to replace me

Passaremos o baseURL para o Axios em cada solicitação.

Para carregar a mensagem de boas-vindas quando o usuário abrir o site, podemos usar o gancho useEffect(). Cole o seguinte código em seu App.js:

// src/App.js

useEffect(() => {
  axios.get(baseURL).then(res => {
    setMessages([
      res.data,
    ])
  })
}, []);

Esse código envia uma solicitação GET à nossa API Express e anexa a resposta às mensagens.

A última coisa que precisamos fazer é modificar sendMessage() para enviar uma solicitação POST ao backend e anexar a resposta às mensagens. Para fazer isso, altere sendMessage() da seguinte forma:

// src/App.js

const sendMessage = (content) => {
  // add the message to the state
  setMessages([
    ...messages,
    {
      content: content,
      isCustomer: true,
    }
  ]);

  // post the request and add the bot response to the state
  axios.post(baseURL + "ask", {
    content: content
  }).then(res => {
    console.log(res);
    setMessages(prevState => [
      ...prevState,
      res.data,
    ]);
  });
}

Para melhorar a experiência do usuário, você pode colar o seguinte código no App.js para rolar automaticamente para baixo a cada resposta:

// src/App.js

useEffect(() => {
  messagesListRef.current.scrollTop = messagesListRef.current.scrollHeight;
}, [messagesListRef, messages]);

Ótimo, é isso!

Inicie o servidor de desenvolvimento e verifique se tudo está funcionando.

Conclusão

Não é de se admirar que os chatbots estejam se tornando cada vez mais populares. Suas incríveis vantagens permitem que as empresas melhorem o atendimento ao cliente, aumentem o envolvimento do cliente, reduzam os custos etc. Os especialistas dizem que a era do chatbot está apenas começando e que os bots se tornarão ainda mais populares no futuro!

Ao longo do tutorial, explicamos o que é um chatbot, analisamos diferentes tipos de chatbot, plataformas de chatbot e ensinamos a você como criar o seu próprio chatbot. O chatbot que criamos funcionaria muito bem em um ambiente de suporte ao cliente para responder a perguntas simples.

Baixe o código-fonte final do repositório do GitHub.

Etapas futuras:

1. Torne o bot mais “inteligente” adicionando mais respostas ao banco de dados.
2. Integre o chatbot ao seu site.
3. Pesquise como melhorar seu chatbot usando IA.

PERGUNTAS FREQUENTES