Skip to content

Latest commit

 

History

History
86 lines (62 loc) · 3.2 KB

README.md

File metadata and controls

86 lines (62 loc) · 3.2 KB

twitch-giphy

Um chatbot para Twitch que integra a API do GIPHY para aprender Typescript

Must Have

  • - Interagir com o chat no Twitch
  • - Capturar um comando específico dos usuários (tudo que começar com !giphy)
  • - Remover o !giphy e pegar o termo restante
  • - Enviar o termo restante para o GIPHY
  • - Retornar o primeiro GIF da API do GIPHY
  • - Renderizar o GIF na tela
  • - Remover o GIF da tela depois de 8 segundos
  • - Criar uma classe em Typescript para lidar com o chatbot/servidor
  • - Permitir outros atalhos para inserir o GIF na Live (!giphy, !gif, #)
  • - Alterar a tela do GIF (Browser) para exibir o Username + Balão estilo quadrinhos que cerca todo o GIF.
  • - Refatorar para permitir que todos os streamers DO MUNDO façam uso dessa MARAVILHA da natureza que REVOLUCIONA as Lives :)

Nice to have

  • - Fazer uma fila de GIFs para garantir que o GIF de todos será exibido
  • - Poder definir quem pode usar o comando (todos, só seguidores, só subs)
  • - Automatizar um deploy para AWS (sempre disponível)
  • - Sisteminha básico de pontos para evitar FLOOD (ou integrar com Cheer)
  • - Implementar cooldown de X segundos para evitar FLOOD.
  • - Possibilitar integração com outras plataformas além do Twitch.
  • - Possibilitar o uso de múltiplos comandos (!gif, !giphy).

Configurando o Projeto

Configurando servidor

Antes de tudo você precisa configurar as opções de API da Twitch e do Giphy.

Crie um ficheiro de variáveis de ambiente (.env) idêntico ao ficheiro de exemplo e altere as informações de acordo com os valores abaixo.

  • TWITCH_USERNAME, seu username ou do seu bot
  • TWITCH_TOKEN, você pode obter através de https://twitchapps.com/tmi/
  • TWITCH_CHAT_CHANNEL, normalmente é o mesmo que seu username
  • GIPHY_RATING, aceita somente os valores 'y' | 'g' | 'pg' | 'pg-13' | 'r'
  • GIPHY_TOKEN, você pode obter através de https://developers.giphy.com/

Com esta configuração, quando o chatbot for implantado num serviço tal como o aws, netlify ou outra plataforma, somente será necessário definir estes valores na plataforma.

Configurando exibição

Para customizar a exibição, vá no arquivo client/index.html e procure por:

  • Não é necessário fornecer todas as opções, pois todos possuem um valor padrão de funcionamento
<script>
  window.addEventListener("load", () => {
    const options = {
      duration: 8, // Opcional: valor em segundos (Valor padrão é 8)
      max_queue: 10, // Opcional: quantidade máxima de gifs na fila (Valor padrão é 10)
      separator: ":" // Opcional: separador entre o nome e mensagem (Valor padrão é :)
    };
    const twitch_giphy = new TwitchGiphy(options);
  });
</script>

Instalando as dependências

Abra o terminal no mesmo diretório em que consta o arquivo package.json, e execute:

npm i # forma curta de 'npm install'

Compilando o projeto

Abra o terminal no mesmo diretório em que consta o arquivo package.json, e execute:

npm run build

Executando o projeto

Abra o terminal no mesmo diretório em que consta o arquivo package.json, e execute:

npm start