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.
- - Permitir determinar número de segundos diferentes para users normais e subscribers.
- - 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, VIPS, Mods, etc)
- - README em Inglês
- - Automatizar um deploy para AWS (sempre disponível)
- - 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
). - - Possibilitar definição de CUSTO para o comando (BITs, Pontos do Canal).
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_default: 4, // Opcional: valor em segundos (Valor padrão é 4)
duration_sub: 8, // Opcional: valor em segundos para subs (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