Executando verificação de segurança...
1

Pitch: Como desenvolvi uma dashboard gamer para o Kindle!

Nesses ultimos dias criei uma pagina web chamada Kindle Dashboard, a ideia era transformar meu kindle em uma dashboard de games e spotify, onde eu pudesse verificar meus stats da steam e do league of legends.

Por que um kindle?

Boa pergunta! mas a resposta é bem simples. No meu youtube aparece muitos daqueles canais techs de compras no aliexpress e sempre sugerem comprar aqueles mini monitores que a galera coloca dentro do gabinete do PC pra mostrar temperatura, uso de CPU e etc. Ai eu me lembrei que eu tinha um kindle parado que eu tinha ganhado vencendo um Hackaton e pensei:

Uma tela preta e branca que tem mais de 40h de bateria daria um otimo dashboard

e foi assim que começou.

Desafio 01 - Saber se era possivel ser feito

Eu tive a ideia de fazer antes mesmo de saber como fazer, então como bom e qualquer usuario de internet em 2026 a primeira coisa que fiz foi perguntar pro GPT e eu até tive respostas interessantes:

  • Fazer uma aplicação que gere um PDF e de tempos em tempos envie um novo pdf para o kindle e apague o anterior
  • Fazer uma pagina web e abrir no navegador do kindle
  • Desbloquear o kindle e fazer uma aplicação direto nele

A Escolha

Eu descartei logo de cara a primeira opção, não fazia sentido pra mim porque mesmo que eu enviasse um arquivo com o mesmo nome de 30 em 30 minutos por exemplo, eu teria que fechar a visualização e abrir novamente.

Então comecei a olhar pras outras 2 opções. A segunda fazia bastante sentido já que eu já faço projetos web e a terceira parecia muito interessante porque eu nem sabia que era possivel desbloquear o kindle. Eu estava com tudo inclinado para escolher a terceira opção, então comecei a pesquisar sobre como desbloquear o kindle e acabei caindo no video desse cara: Dammit Jeff. Foi uma mão na roda pra entender como funcionava.

Mas nisso eu descobri uma coisa chamada Fullscreen Web Browser e pensei comigo mesmo: por que não juntar a segunda opção com a terceira? Assim eu faço uma pagina web e deixo ela em fullscreen no kindle. Seria melhor do que a segunda opção pura porque não apareceria toda a interface de pesquisa do kindle e eu conseguiria deixar ele praticamente como um "display ambiente".

Foi assim que decidi o que iria fazer.

Desenvolvimento

Eu estou estudando o uso do claude para o uso profissional, então a primeira coisa que fui fazer foi entrar no claude design, pegar algumas ideias de tela que eu tive usando o gpt e pesquisando dashboards de jogos no google, e criar um conceito lá.

Iniciando o desenvolvimento, eu já sabia que iria usar nextjs por já estar acostumado com a stack. Aproveitei um plugin chamado SuperPowers e fui fazendo o desenvolvimento em paralelo ao claude.

Outra coisa que precisei levar em consideração é que a tela do kindle é e-ink, então atualizar a tela inteira constantemente deixa a experiência estranha e aumenta bastante o ghosting da tela. Então além da limitação de hardware, eu também precisava pensar em uma interface que fizesse sentido para esse tipo de display.

Não vou comentar muito sobre a api do lol nem da steam porque a documentação delas é bem direta, basta ler o endpoint que você quer e fazer a requisição.

Desafio 02 - Os dados não aparecem no kindle

Segui todo o processo de desenvolvimento, testei no meu navegador e tudo funcionou. Mas quando fui abrir a pagina no kindle: cadê meus dados? não aparecia de jeito nenhum.

Depois de pesquisar um pouco percebi que o navegador do kindle é extremamente antigo e o hardware dele também é bem limitado. Pelo menos o meu Kindle 10º Geração (2019) simplesmente não conseguia lidar direito com todas as requisições e renderizações da página.

Novamente fui buscar soluções e basicamente tinha 2 opções:

  • Transformar a pagina em uma imagem no backend e renderizar só a imagem no kindle
  • Fazer as requisições no backend e trazer o html mais cru possivel para o kindle

No final foi a segunda opção que escolhi. Criei uma rota /kindle que já recebe todos os resultados prontos do backend e ela tem o minimo de jsx/tsx possivel, é quase um html puro para evitar que o kindle não conseguisse tankar a pagina.

Na pratica essa rota virou quase um "modo low spec" da aplicação.

Proximos Passos

Ainda quero continuar atualizando esse projeto pra ele ficar bem redondinho, ainda vou:

  • Corrigir a implementação do spotify e terminar de fazer ela, talvez tentar alguma forma de deixar ela funcionando corretamente no kindle
  • Fazer uma persistencia de dados para caso alguma api falhe ele continue mostrando os dados da ultima pesquisa que deu sucesso
  • Fazer atualização parcial da tela ao em vez de atualizar ela inteira ( no meu env minha steam atualiza a cada 5 minutos e meu lol atualiza a cada 10 )

durante minha escrita desse post, descobri um bug do fullscreen web browser que depois de uns 15 minutos ele entra na tela de descanso do kindle e eu preciso reiniciar ele pra voltar ao normal, ainda vou tentar descobrir como deixar ele 100% awake

Finalização e Agradecimento

Fazer esse projeto foi muito divertido e importante pra mim por varios motivos, desde a parte de ser algo relacionado a coisas que vejo no meu dia a dia até continuar estudando tecnologias novas do mercado e evoluindo tecnicamente.

Foi um daqueles projetos que começaram só como uma ideia aleatoria e acabaram virando algo realmente funcional.

Espero que vocês consigam tirar algo de bom dele.

Se você chegou até aqui, muito obrigado por ler esse post!

Pra quem quiser acompanhar esse projeto ou contribuir com ele, vou olhar todos os forks, issues, pull requests e estrelinhas!!!

Carregando publicação patrocinada...