Comunicação em Tempo Real: Uma site para o fã de Formula 1
Qual o fã de Formula 1 que perdeu um rádio por não entender completamente o que foi dito ou porque o comentarista falou em cima? Ou que tal ver os rádios que nem aparecem na TV.
O Box Box Radio trás a transcrição e a tradução dos rádios da Formula 1 em tempo-real dos eventos. Nesse final de semana resolvi testar essa aplicação (não aguentei ficar sem Formula 1 durante o summer break hahah).
Pausa para um pequeno disclaimer: as transcrições e traduções não são oficiais e podem não estar 100% corretas.
Mas beleza, se tratando de tech, quais foram as tecnologias e desafios enfrentados nesse projeto?
O projeto hoje é composto por uma API em Fastify e um Front construído utilizando Nuxt.js e Daisy.ui.
API
Se tratando do backend da aplicação o processo é bem simples: a API em Fastify recebe uma requisição contendo o audio e se comunica com a a openAI para fazer a transcrição do áudio.
Resolvido isso eu fui para o primeiro desafio que foi algo que eu não tinha trabalhado ainda: comunicação em tempo-real entre o Frontend e o Backend. Sim, parece algo tão natural hoje mas que ainda não tinha aparecido em minhas mãoes e eu queria que o Front se atualizasse automagicamente quando um novo rádio fosse transmitido.
Então, como a comunicação por mais que precisasse ser contínua ela deveria ter manter a conexão mas o envio dos dados seria unilateral. Isso me fez encontrar o Server Sent Events (SSE) como uma possível solução. Depois de pesquisar um pouco sobre a funcionalidade me pareceu o caminho mais lógico para o que eu estava tentando implementar e isso nos leva para o Frontend.
Front
Para o Front decidi utilizar Nuxt 3 com uma biblioteca de componentes chamada daisyUI que utiliza como base o TailwindCSS.
Nesse momento não irei me aprofundar tanto na biblioteca em si e os componentes utilizados mas o lance era: o Nuxt na versão 3 traz uma um Server Engine chamado Nitro, que voce pode utilizar por exemplo para criar o backend da aplicação. Agora, como fazer esse backend receber a informação e atualiza no front?
Depois de um tempo de pesquisas encontrei como configurar Websockets e SSE no Nuxt e de fato não era muito dificil de implementar. Depois de conseguir fazer uma API externa ativar o serviço de SSE no Nuxt e atualizar a informação no lado do cliente eu imaginei que já estaria tudo certo para o primeiro teste realizando o deploy na Vercel.
Entretanto, o mesmo SSE que funcionou local não funcionava na Vercel (acredito que por conta das limitações do meu plano).
Supabase
Para solucionar esse problema eu resolvi utilizar o Supabase pois descobri uma função que funcionaria exatamente do jeito que eu precisava: o Broadcast. Graças ao Supabase e o artigo Supabase real-time changes on Nuxt (esse artigo salvou minha vida) eu consegui ajustar e realizar tudo o que precisava.
Depois dessa implementação, quando a API em Fastify envia salva um novo arquivo no Supabase, o Front consegue automaticamente receber essa informação e utilizá-la para exibir o novo rádio.
Então basicamente foi isso, fiquei muito contente com o resultado pois é algo que com certeza eu vou utilizar durante as sessões da Formula 1 e tenho certeza que muitos outros fãs gostariam de ver em tempo-real o que acontece e é comunicado que não é transmitido na TV.
Espero que gostem.