The latest articles on DEV Community by Eduardo Henrique (@eduardo_henrique_42e5ebc8). https://dev.to/eduardo_henrique_42e5ebc8 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4133351%2F5900b216-1bcc-4186-867f-6a07c0624185.jpg https://dev.to/eduardo_henrique_42e5ebc8 en Eduardo Henrique Sat, 19 Sep 2026 20:31:59 +0000 https://dev.to/eduardo_henrique_42e5ebc8/como-criei-um-cardapio-digital-para-tv-usando-ia-e-javascript-3gl8 https://dev.to/eduardo_henrique_42e5ebc8/como-criei-um-cardapio-digital-para-tv-usando-ia-e-javascript-3gl8 <p><strong>O Desafio no Balcão</strong><br> Em um restaurante ou rotisseria, as coisas mudam rápido. Um prato acaba na metade do expediente, o cardápio do dia muda e os preços precisam ser ajustados. Ficar reimprimindo papel ou avisando o cliente de boca em boca gera confusão e atrasa o atendimento.</p> <p>A ideia foi simples: colocar uma TV comum no balcão com um Fire TV Stick rodando um cardápio digital que pudesse ser alterado em tempo real pelo celular ou computador da equipe.</p> <p><strong>Programando com Ajuda da Inteligência Artificial</strong><br> Como estou em fase de aprendizado na área de programação, usei a Inteligência Artificial como uma parceira de estudo e desenvolvimento.</p> <p>Com a orientação da IA, fomos construindo o projeto do zero usando HTML, CSS e JavaScript puro (Vanilla JS) com um servidor Node.js local. A IA me ajudou a entender como estruturar o código, criar a lógica de atualização em tempo real e resolver os problemas visuais sem precisar de ferramentas pesadas.</p> <p>O Visual: Feito para Ler de Longe<br> Uma tela de TV no balcão precisa de leitura rápida. Focamos em três pontos principais no visual:</p> <p>Letras Grandes e Marcantes: Usamos uma fonte em caixa alta (Anton) de alto contraste para que o cliente consiga ler o menu mesmo estando distante.</p> <p>Painel Prático para a Equipe: Com uma senha simples, a equipe acessa uma tela onde pode marcar um item como "Esgotado" com apenas um clique. Na TV do cliente, o item esgotado some automaticamente.</p> <p>Ajuste de Zoom Fácil: Colocamos botões simples de A+ e A- na tela para que qualquer pessoa consiga aumentar ou diminuir o tamanho das letras dependendo da TV.</p> <p><strong>O Desafio da TV Desligando</strong><br> Durante os testes, nos deparamos com um obstáculo: o Fire TV Stick colocava a TV em modo de espera a cada 20 minutos por falta de uso do controle remoto.</p> <p>Tentamos algumas soluções dentro do próprio código do site (como rodar vídeos ou áudios invisíveis em segundo plano para "enganar" a TV e mantê-la acesa). Porém, isso não deu muito certo na TV.</p> <p>A solução? Decidimos manter o código do site 100% limpo e leve, e resolvemos o problema da TV ajustando a configuração de tempo de espera diretamente no sistema do aparelho. A tela passou a ficar acesa o dia todo com total fluidez!</p> <p>Pode conferir o projeto no seguinte link:</p> <p><a href="https://github.com/EduardoHenriqueC/Cardapio-Miss-Massas" rel="noopener noreferrer">https://github.com/EduardoHenriqueC/Cardapio-Miss-Massas</a></p> <p><strong>O Aprendizado:</strong><br> Desenvolver esse projeto me mostrou como é incrível usar a IA para sair da teoria e criar algo prático que resolve um problema real. Aprendi sobre construção de interfaces, organização de código e, acima de tudo, que a solução mais simples e leve quase sempre é a melhor!</p> ai javascript programming webdev