FELIPECSS Recentemente eu comecei a transmitir alguns dos muitos games que eu jogo no Twitch. Para quem não sabe, seu perfil do Twitch pode ser personalizado com uma série de painéis baseados em texto ou imagem, juntamente com um painel relativamente novo de "extensão", que é essencialmente um iframe. Eu como caçador de conquistas, geralmente preciso informar minha gamertag do xbox para meu publico, então foi aí a idéia de criar uma extensão de painel simples para exibir essas informações em um formato mais personalizado.
Assim nasceu a extensão "Felipecss xbox", que permite que os usuários visualizem meu últimos jogos jogados, a lista completa de jogos do perfil, sua progressão de conquistaste. Eu também adicionei a capacidade de enviar bits que é a moeda da twitch.
Este post não será um tutorial sobre como construir uma extensão, pois não chega a ser tão complexo, porém o andar da caminhada é muito grande para fazer apenas num post. O processo, no começo foi muito mais difícil do que eu previa! Dito isso, se você tiver alguma pergunta específica, sinta-se livre para entrar em contato e eu vou tentar ajudar o melhor que puder.
Para começar, uma extensão de painel é basicamente um site composto por HTML, CSS e JavaScript. Tudo isso é carregado em um iframe com algumas restrições e você pode optar por fazer uso do EBS (Extension Backend Service, serviço de backend de extensão), que é essencialmente uma instância nodeJS que envia notificações via PubSub. A documentação Recomenda que você baixe a plataforma de desenvolvedor que o Twitch fornece, que permite que você execute e teste sua extensão em um localhost de tal forma que quando você carregar sua página de perfil a partir de Twitch.tv você pode ver sua extensão carregada dentro.
O processo de configuração para a plataforma de desenvolvedor é bastante árduo, muitas das suas dúvidas, vai por mim, não estarão documentadas e você perderá algum tempo depurando.
Em termos de codificação, eu utilizei meu tão querido Vuejs, e como você está essencialmente apenas escrevendo HTML não há muito o que estar ciente ao escrever uma extensão. Um painel tem suporte máximo de 500px de altura e você pode definir uma altura global para o painel dentro das configurações do Twitch console e fazer uso da rolagem vertical se você precisar mostrar mais conteúdo. Para configurar sua extensão, você fornece outro arquivo HTML que é carregado sempre que o botão de configuração é pressionado, mas novamente este é apenas carregado dentro de um iframe.
Para essa extensão eu não precisei de um EBS, porém dependendo da aplicação que for fazer, a segurança e até mesmo querer acessar certos endpoints da api da Twitch, você precisará. Com isso, pude usar uma simples solicitação AJAX GET para pegar os dados da API, carregando uma resposta JSON dos dados e armazenando na vuex. Para essa extensão estou utilizando uma single page application, sem roteamento, caso vá criar varias páginas saiba que, cada URL precisava ser listada na white list na extensão do Twitch caso contrário, elas não funcionarão.
Após alguns testes e com a extensão parecendo boa, era então hora de submetê-la ao Twitch para aprovação. E essa foi outra parte bastante cansativa e um pouco mais árduo. Para começar, existem muitas restrições sobre o que você pode ou não fazer, como não ter permissão para ter qualquer registro de console JavaScript, você não está autorizado a carregar no DOM diretamente do AJAX (ou seja, carregar HTML de um local remoto), você não pode ofuscar seu código nem usar um duplo clique como uma entrada. Seu código é inspecionado pelo Twitch como parte da revisão e, portanto, tudo deve ser fornecido localmente, exceto para o Twitch Extension Helper que deve ser carregado a partir de um local específico.
Os arquivos submetidos para revisão também não podem estar minificados e foi aqui que perdi bastante tempo. Caso seu projeto entre nesse quesito, além de configurar tudo na Twitch Console, você precisará enviar um formulário (link que a própria documentação fornece), passando todos os dados e arquivos. A equipe da twitch não é tão transparente no e-mail quando te informam que sua aplicação foi negada, as mensagens chegam ser tão subjetivas que no mais você precisará responder o e-mail questionando qual o real problema. Após isso, mesmo enviando o projeto vue sem minificar eles estavam negando, precisei perguntar e eles me informaram que eu precisava informar que se "tratava de um projeto em VUE", sério, mesmo enviando, eles vendo, eu precisava descrever.
Depois de dois dias, a extensão foi aprovada e me foi então informado que estava disponível opção de liberá-la publicamente, momento em que ela aparece no diretório de extensão com capturas de tela que você fornece.
No geral, o processo de criação de uma extensão do Twitch foi um pouco mais longo do que eu gostaria, mas agora que tudo está configurado e eu já passei por isso algumas vezes eu acho que vai ser muito fácil adicionar novos no futuro.
Agora estou no processo de criação e validação de um twitch video panel que basicamente é uma Extensão baseada em vídeo durante o fluxo, permitindo que os espectadores interajam com streamers diretamente no vídeo. Criando elementos interativos que complementem a transmissão ao vivo, como estatísticas ao vivo ou replays instantâneos.
Não vou negar, mesmo com o processo árduo no começo, criar extensão é algo bastante agradável e divertido.
Se você quiser testar ela, você pode encontrar alguns links diretos na minha página do Twitch Extensions. Você também pode me seguir na Twitch se quiser ver algumas das minhas extensões em ação!