DEV Community

Eduardo Henrique
Eduardo Henrique

Posted on

Como Criei um Cardápio Digital para TV Usando IA e JavaScript

O Desafio no Balcão
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.

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.

Programando com Ajuda da Inteligência Artificial
Como estou em fase de aprendizado na área de programação, usei a Inteligência Artificial como uma parceira de estudo e desenvolvimento.

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.

O Visual: Feito para Ler de Longe
Uma tela de TV no balcão precisa de leitura rápida. Focamos em três pontos principais no visual:

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.

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.

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.

O Desafio da TV Desligando
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.

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.

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!

Pode conferir o projeto no seguinte link:

https://github.com/EduardoHenriqueC/Cardapio-Miss-Massas

O Aprendizado:
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!

Top comments (0)