The Relicans

loading...
Cover image for Chatbot para twitch com Javascript
A Caverna do Patocórnio

Chatbot para twitch com Javascript

kastrowalker profile image Victor Castro ・5 min read

Olá nesse tutorial vamos criar um chatbot para a twitch.tv utilizando javascript com a biblioteca tmi.js. Utilizar um chatbot no seu canal é uma das formas de você engajar os seus viewers, pois, você pode criar jogos e outras brincadeiras para divertir o seu público durante as lives. Um dos exemplos é criar um comando de duelo para que o seu chat fique duelando no chat. Outra coisa que você pode fazer é criar funcionalidade para que o seu bot ajude na moderação da sua live.

Ferramentas

Para criar esse projeto iremos utilizar as seguintes tecnologias:

  • node.js - Que é um runtime javascript. Você pode baixar ele aqui.

  • nodemon - Que é uma ferramenta que monitora o sistema de arquivos da sua aplicação e reinicia automaticamente após uma modificação.

  • npm - Que é um gerenciador de pacote javascript. Por padrão ele já vem instalado junto com o node.js, mas caso você queira também pode utilizar o yarn.

  • tmi.js - Biblioteca para se conectar no chat da twitch utilizando o protocolo IRC.

  • Editor de texto - Você pode utilizar um editor de texto da sua preferência, no meu caso irei utilizar o Vscode.

Iniciando Projeto

Apos a instalação do node iremos iniciar o nosso projeto utilizando o seguinte comando:

npm init -y

Se você olhar na pasta do seu projeto é para ter criado um arquivo chamado 'package.json' é nele que fica as configurações do nosso projeto.

Caso você queira saber mais sobre o npm init você pode descobrir mais aqui.

Instalação de depedências

Agora vamos instalar as bibliotecas necessárias para o nosso projeto.

npm install tmi.js

npm install --save-dev nodemon

Após rodar esses comandos se você olhar no seu projeto você deve ter a pasta 'node_modules' e o arquivo 'package-lock.json' no seu projeto.

Agora iremos criar scripts para facilitar na hora de rodar o nosso bot. Dentro do arquivo package.json iremos modificar a propriedade scripts e adicionar o seguinte código.

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
}
Enter fullscreen mode Exit fullscreen mode

O start serve para rodar o nosso quando finalizado. Já o dev serve para rodar o nosso bot enquanto estivermos trabalhando nele, pois, ele vai executar usando o nodemon e facilitará nosso trabalho enquanto estivermos modificando ele reiniciando automaticamente o nosso bot.

Criando arquivo de configuração

Agora precisando criar um arquivo chamado .env nele ficara guardado as variáveis de configurações nosso bot. Logo abaixo podemos ver como você devera deixar o arquivo depois de criado. Você devera substituir kastrinhobot pelo nome do seu nome, kastr0walker pelo nome do seu canal e TOKEN pelo token que você deve gerar aqui.

NOME_BOT=kastrinhobot
NOME_CANAL=kastr0walker
TOKEN_BOT=TOKEN
Enter fullscreen mode Exit fullscreen mode

Criando nosso primeiro comando

Agora está na hora de colocar a mão na massa e fazer o nosso primeiro comando no bot. A primeira coisa que precisamos fazer é importar as bibliotecas necessárias para o nosso projeto funcionar.

const tmi = require("tmi.js");
const dotenv = require("dotenv").config();
Enter fullscreen mode Exit fullscreen mode

Agora iremos salvar em variáveis as configurações que adicionamos no nosso arquivo .env.

const NOME_BOT = process.env.NOME_BOT;
const NOME_CANAL = process.env.NOME_CANAL;
const TOKEN_BOT = process.env.TOKEN_BOT;
Enter fullscreen mode Exit fullscreen mode

Devemos também criar um objeto para adicionar as informações do nosso bot.

const opts = {
  identity: {
    username: NOME_BOT,
    password: TOKEN_BOT,
  },
  channels: [NOME_CANAL],
};
Enter fullscreen mode Exit fullscreen mode

Devemos instanciar um novo objeto do tipo tmi.client passando como parâmetro o objeto que contem as configurações do nosso bot.

const client = new tmi.client(opts);
Enter fullscreen mode Exit fullscreen mode

Devemos criar uma função para ser executada toda vez que o bot detectar que uma mensagem foi enviada no chat. No nosso caso definimos essa função como recivedMessage nela recebemos quatro parâmetros.

  • target - Esse parâmetro recebe o nome do canal no qual o bot recebeu a mensagem.
  • context - Esse é um objeto na qual fica armazenado algumas informações do usuário que mandou mensagem no chat. Podemos achar nele o nome do usuário, se é sub ou mod de um canal dentre outras informações. Você pode conseguir mais informações colocando um console.log(context) dentro da função.
  • msg - Esse é uma string contendo a mensagem que foi enviada no chat.
  • bot - Esse é um booleano que retorna verdadeiro caso a mensagem recebida seja do nosso próprio bot.

O nosso primeiro comando que vamo criar é para o bot mandar uma mensagem de "Olá Mundo!" caso alguém digite !ola no chat. Para isso verificamos se a mensagem recebida é igual a !ola caso seja nós chamamos o método say do nosso client. Esse método é responsável por fazer com que o bot mande uma mensagem no chat. Ele recebe dois parâmetros o primeiro é o nome do canal na qual o bot vai mandar a mensagem. O segundo parâmetro é uma string contendo a mensagem na qual o bot vai enviar.

function recivedMessage(target, context, msg, bot) {
  // Verifica se a mensagem recebido é do nosso bot
  if (bot) {
    return;
  }

  if (msg == "!ola") {
    client.say(target, "Olá Mundo!");
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora precisamos fazer com que o nosso bot se conecte no chat e comece a escutar as mensagens que são enviadas nele.
Para isso utilizamos as seguintes funções.

  • client.on("message", recivedMessage) - Essa função vai fazer com que o bot fique escutando o nosso chat e execute a função recivedMessage toda vez que uma mensagem é recebida.
  • client.on("connected", () => {}) - Essa função vai fazer com que o nosso bot mande "O bot tá on!" no nosso chat ao se conectar.
  • client.connet() - Essa função vai fazer com que o nosso bot se conecte com o chat do nosso canal.
client.on("message", recivedMessage);
client.on("connected", () => {
  client.say(NOME_CANAL, "O bot tá on!");
});

client.connect();
Enter fullscreen mode Exit fullscreen mode

Após isso salve o seu arquivo e execute no seu terminal o seguinte comando:

npm start

Pront agora o bot deve está conectado no seu canal e já sendo possível interagir com ele digitando !ola.

Agora que você entendeu a base de como criar o seu primeiro bot. Você pode utilizar a sua imaginação e desenvolver várias funcionalidades legais para o seu bot. Se você quiser se inspirar com ideias para o seu bot esse são alguns bots na qual já contribui no desenvolvimento.

Para esse tutorial utilizei como base esse repositório. Obrigado por ler meu artigo e boa sorte com as suas criações.

Discussion (2)

pic
Editor guide
Collapse
eduardoklosowski profile image
Eduardo Klosowski

Agora só falta um artigo discutindo como organizar os comandos do bot para facilitar a leitura e manutenção do código, e não transformar o código em algo difícil de ler e bastante propenso a bugs.

Collapse
pachicodes profile image