Criar app de fidelidade no Gemini: cliente e loja no mesmo HTML
Fidelizar clientes é o cálice sagrado de qualquer negócio local. A transição dos antigos cartões de papel, que se perdem nas carteiras, para aplicações digitais exclusivas é um diferencial competitivo brutal. No entanto, programar uma aplicação que interliga o celular do cliente ao painel de controle do lojista costuma exigir bases de dados complexas, servidores e meses de desenvolvimento.
O custo de tentar gerar isto com a inteligência artificial através de um prompt rápido é o de receber uma interface visual morta, onde os botões não comunicam entre si e os dados desaparecem a cada atualização da página.
Para testar o limite da lógica relacional do modelo Pro, desenhamos um desafio extremo: construir a aplicação “Play Coffee” — um sistema de fidelidade duplo com Modo Cliente e Modo Loja — num único arquivo HTML, em menos de 1 hora. Copie os mega prompts estruturais que utilizamos e descubra como forçamos a IA a gerir bases de dados locais simuladas sem usar um único servidor real.
Gemini Pro é o LLM avançado do Google, com uma capacidade formidável para processar lógicas de estado e arquitetura de software num único fluxo.
Neste desafio de arquitetura offline, a IA foi obrigada a estruturar o HTML5, CSS3 e JavaScript de forma a que o localStorage do navegador atuasse como um “falso servidor”, armazenando os XP (pontos), as campanhas e o histórico de cada cliente de forma duradoura e interativa.
Neste guia: entenda a divisão lógica de aplicações duplas, copie os 4 comandos massivos da nossa experiência e baixe o código da aplicação de fidelidade finalizada.
Resposta curta:
O Gemini é perfeitamente capaz de criar um sistema duplo (Loja e Cliente) num só arquivo HTML, recorrendo à memória do navegador. O segredo para o sucesso é separar as responsabilidades no prompt: primeiro cria-se a base funcional genérica (pontos e resgates), a seguir injeta-se a identidade visual gamificada, e só depois se adicionam lógicas avançadas de gestão e relatórios para evitar colapsos no código.
Como este guia foi montado: Toda a documentação que se segue expõe um teste de código real. Demonstramos as vitórias visuais espantosas da inteligência artificial, mas também documentamos sem filtros o momento crítico em que o painel de navegação bloqueou, bem como o prompt de socorro que utilizamos para recuperar a aplicação.
⚡ TL;DR
- Tempo: 12 min (ou pule para os prompts)
- Nível: Avançado / Arquitetura de software
- O que você vai copiar: 4 mega prompts de estruturação front-end e storage
- Resultado: Um protótipo de fidelização jogável (Modo Loja + Cliente)
Índice
- As regras do desafio de fidelidade em 1 hora
- Anatomia do mega prompt duplo
- Os 4 prompts mestres e o processo de debug
- O resultado: Baixe a app Play Coffee
- Amanda aconselha: o perigo das abas invisíveis
- SOS: As abas do meu painel não abrem!
- FAQ
As regras do desafio de fidelidade em 1 hora
Regra 1: Aplicação dupla (arquivo único)
O desafio estrutural aqui era gigantesco. Em vez de criarmos “uma página de site”, exigimos que a IA construísse duas portas de entrada no mesmo arquivo .html. Se clicasse em “Sou Cliente”, abria a sua carteira digital. Se clicasse em “Sou a Loja”, abria o painel de registro de pontos (scanner de códigos).
Regra 2: A evolução da marca (Fideliza para Play Coffee)
Proibimos a cópia de sistemas empresariais existentes. O teste começou por pedir um cartão neutro chamado “Fideliza”. Após garantirmos a matemática base, forçamos a IA a injetar uma identidade hiper-específica: um Cyber Café *Gamer* (“Play Coffee”), transformando os tradicionais selos/pontos em “Play XP” (experiência).
Regra 3: Limite de iteração e persistência
Estipulamos apenas 1 prompt fundador e 3 ajustes. Em sistemas de gestão de dados, a regra implacável foi a sobrevivência da memória: nenhuma atualização de interface podia apagar o *JavaScript* responsável por guardar as visitas e os XP dos clientes na base de dados simulada do navegador.
Anatomia do mega prompt duplo (loja e cliente)
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Proibição de sincronização fake | Exige que a IA confesse que está offline. | Impede a geração de código com fetch() a tentar ligar a Firebase ou AWS inexistentes. | O projeto não bloqueia em telas de “A carregar…”. | A app tenta simular internet e desmorona por completo no navegador. |
| Identificação por ID | Força a criação de um código (ex: PLAY-7K92) em vez de apenas QR Codes. | Cria um campo input onde a loja pode digitar a matrícula do cliente. | Permite testar a app no PC, onde não se tem câmera para ler QR. | Fica impossível atribuir pontos ao cliente no teste de navegador de mesa. |
| Estruturação JSON explícita | Fornecemos a “árvore” de dados que queremos (XP, nome, nível, visitas). | A IA escreve matrizes Object precisas na gestão local. | O relatório e o histórico da loja não misturam as compras de clientes diferentes. | Uma salganhada de variáveis avulsas que se perdem assim que atualizar a página. |
💡 O segredo dos especialistas: Aplicações complexas falham se lhes ditar a estética antes de lhes ditar a função. Peça o “esqueleto feio mas funcional” no Teste 1, e só no Teste 2 injete “a paleta do Pôr do Sol e os logotipos em neón”.
Os 4 prompts estruturais da aplicação de fidelidade (limpos) 📌
Abaixo apresentamos os comandos massivos exatamente como os utilizamos (limpos de erros de formatação para facilitar a sua cópia). Acompanhe a transformação visual fantástica de uma grade genérica num verdadeiro produto pronto a usar.
👾 Série dev — O projeto Play Coffee
📸 Prompt 01 — A fundação do cartão universal
Injetamos a base matemática. O objetivo aqui não era a beleza, era garantir que os botões contavam pontos.
DESAFIO: CRIAR UM CARTÃO DE FIDELIDADE DIGITAL COMPLETO EM UM ÚNICO HTML Quero criar uma aplicação web completa: CARTÃO DE FIDELIDADE DIGITAL. Nome inicial do projeto: FIDELIZA. REGRA PRINCIPAL: Entregar um único arquivo fideliza.html contendo HTML, CSS e JavaScript. Não utilizar backend, banco de dados ou API externa. Utilizar localStorage para salvar os dados no navegador. OBJETIVO DO SISTEMA: Criar uma experiência de cartão digital onde o cliente pode visualizar seu cartão, acumular pontos, visualizar recompensas e consultar seu histórico. Também deve existir uma "área da loja" para simular o estabelecimento adicionando pontos. TELA INICIAL: Botões "CRIAR CARTÃO" e "ENTRAR NO MODO DEMONSTRAÇÃO (LOJA)". FUNÇÕES OBRIGATÓRIAS: 1. Criar um cartão (Nome do local, Nome do cliente, Tipo de sistema: Pontos). 2. Cartão Digital com visual premium (id único virtual gerado, gradiente, opções de cores de personalização). 3. Sistema de Pontos e Recompensas (ex: 100 pts = Café, 150 pts = Desconto). Botão "Resgatar" diminui os pontos e gera um código simulado. 4. Histórico de ações (Pontos ganhos, recompensas resgatadas com data). 5. Modo Estabelecimento (Acesso da loja para dar +1, +5, +10 pontos e exibir alerta de confirmação antes de adicionar). A prioridade é a FUNCIONALIDADE e a EXPERIÊNCIA MOBILE. Tudo funcionando diretamente no navegador com dados salvos localmente.
O que aconteceu no teste 1: A IA cumpriu perfeitamente os requisitos mecânicos. O fluxo de criar o cartão e o painel de adicionar pontos funcionaram logo no arranque. Era uma excelente “tela em branco”. O defeito: Esteticamente genérico e muito básico, o “Fideliza” não criava nenhum apelo emocional que agarrasse um cliente a voltar a uma loja.
👉 Deslize para ver o esqueleto inicial do “Fideliza”. Clique para ampliar.
📸 Prompt 02 — A revolução de identidade (Play Coffee)
Exigimos uma injeção de estilo (gamificação, Avatares, Cyber Café), sem apagar a matemática alcançada.
ATUALIZAÇÃO FIDELIZA - PLAY COFFEE Evolua a identidade do projeto. A loja teste agora será a PLAY COFFEE, um Cyber Café focado no público gamer. REGRA PRINCIPAL: Preserve as lógicas de pontos, recompensas e localStorage que funcionam. 1. DUAS PORTAS DE ACESSO: Tela inicial com "SOU CLIENTE" (Acessar cartão e histórico) e "SOU A PLAY COFFEE" (Painel da Loja com leitor ou input manual de ID). 2. IDENTIDADE CLIENTE: Cada cliente tem um ID único local (Ex: PLAY-7K92) e ganha PLAY XP em vez de pontos. Adicionar sistema de Níveis visuais simples (Ex: Lv 1 New Player, Lv 3 Café Gamer). 3. PERSONALIZAÇÃO GAMER: O cartão digital do cliente deve ter QR Code falso estético, temas (Night Play, Espresso, Arcade) e escolha de pequenos avatares no perfil. 4. MODO LOJA: Painel permite digitar ID. Se encontrar, mostra perfil e opções "+1 Hora (+15 XP)", "Café (+10 XP)". 5. PALETA VISUAL: Café premium misturado com tecnologia (marrom espresso, creme, laranja, e toques neon discretos). O cartão deve ter estética de crédito black premium ou passe de batalha. Entregue um arquivo HTML unificado, atualizado visualmente, mantendo a operação offline.
O que aconteceu no teste 2 (sucesso retumbante): A diferença visual foi astronômica! A IA implementou um cartão de aparência sofisticada, substituiu a terminologia aborrecida por “XP” e introduziu perfeitamente as portas duplas (o usuário escolhe se é a Loja ou o Cliente logo no arranque). A personalização funcionava de forma impecável.
👉 Deslize para ver o salto dramático de design e o painel de atribuição de XP.
📸 Prompt 03 — Gestão avançada (e o bug fatal)
Temos o cartão, temos os pontos. Agora pedimos para o lado da loja ser capaz de analisar dados, ver histórico e lançar cupons sazonais.
ATUALIZAÇÃO PLAY COFFEE - CLIENTES, VISITAS E CAMPANHAS A identidade e a lógica atual do Modo Cliente e Modo Loja devem ser RIGOROSAMENTE PRESERVADAS. ADICIONAR AO MODO LOJA: 1. GESTÃO DE CLIENTES: Lista de todos os clientes locais cadastrados com busca por ID e ordenação por nível. 2. HISTÓRICO AVANÇADO: Ao clicar no perfil do cliente via Loja, mostrar detalhes de "Última visita" e "Próxima Recompensa". 3. CAMPANHAS E CUPONS: Capacidade de criar promoções (Ex: Aniversário = 20% OFF) que geram Cupons resgatáveis e validáveis pela loja na tela. 4. ESTATÍSTICAS DO DASHBOARD LOJA: Quantidade de visitantes do dia, XP distribuído e campanhas ativas. Estruture os dados simulados localmente em JSON de forma coerente (clientes, histórico, campanhas) para não misturar os pacotes no localStorage. Entregue o arquivo atualizado.
📉 O que aconteceu no teste 3 (o grande bug): Ao nível dos dados, a IA foi inteligente e gerou o código de campanhas. Contudo, colapsou a interface UI: O painel da loja deixou pura e simplesmente de navegar. Independentemente de a Loja clicar na aba “Clientes”, “Campanhas” ou “Dashboard”, a tela ficou bloqueada no formulário de “Escanear Cartão”. O código do CSS/JS de oclusão das abas encravou na compilação.
👉 A imagem da desgraça técnica. Independentemente de onde clicássemos, a secção do scanner não desaparecia.
📸 Prompt 04 — Correção cirúrgica (o resgate)
Foi necessário explicar exatamente à IA onde falhou na arquitetura do código DOM (elementos invisíveis).
CORREÇÃO URGENTE - PAINEL DA PLAY COFFEE NÃO FUNCIONA CORRETAMENTE Vitórias: o painel renovado, cupons e métricas estão no código. PRESERVE ISSO. BUG PRINCIPAL A CORRIGIR: A navegação do painel Modo Loja travou. Se clico em 'Clientes', 'Campanhas' ou 'Dashboard', a tela continua exibindo fixamente a div de 'ESCANEAR QR CODE'. O conteúdo correto não substitui o scanner. PASSO A PASSO PARA O RESGATE: 1. Revise a lógica do 'switchStoreTab(tabName)'. Garanta que todos os containers de aba (.tab-content) recebem display:none antes da aba ativa receber display:block. 2. Certifique-se de que a section do Scanner não possui z-index absoluto fixado por cima da interface. 3. Não adicione novos recursos. Dedique todo o prompt de código a varrer erros de JavaScript que estão parando o fluxo da renderização das abas. Entregue o HTML restaurado.
📊 O resultado final (a ressurreição): Absolutamente perfeito. Ao pedir à IA para se focar apenas nas propriedades de oclusão do CSS (`display:none` vs `block`), o painel de abas soltou-se. Subitamente, todo o código do Dashboard de relatórios e a matriz de Cupons apareceram em pleno funcionamento. E o melhor de tudo? Nada da base original do cartão cliente foi danificado.
👉 Deslize para ver o Painel desbugado, abas ativas e as métricas de loja funcionais. Clique para ampliar.
O resultado: Baixe a app Play Coffee 🕹️
Apesar de este projeto não poder interligar fisicamente dois aparelhos móveis distantes (pela regra restrita de o termos forçado a operar 100% offline e sem bases Firebase/MySQL reais), se colocar um computador na frente da sua loja com este arquivo e um tablet virado para o cliente, simulará uma solução de fidelização incrivelmente ágil, com memória enraizada diretamente no seu navegador.
PLAY COFFEE: App de fidelização
Quer analisar como o Gemini programou a separação hierárquica entre a carteira do usuário e a central do administrador? Baixe o arquivo e teste as rotinas localmente.
👉 Amanda aconselha: o perigo das abas invisíveis
- Se procura uma aplicação comercial final: Um único arquivo HTML suportado por memória temporária local (`localStorage`) funciona formidavelmente para uma Feira ou Exposição isolada num único tablet. Contudo, se quiser escalar para cem dispositivos diferentes pela cidade, terá que passar os modelos de lógica matemática fornecidos pela IA a um engenheiro de bases de dados ou injetar as chaves do Google Firebase no código.
- Sobre a privacidade dos usuários simulados: Como exigimos restrição de internet à IA, e não solicitamos palavras-passe rígidas nem números de CPF, o projeto ressalva o dever principal num protótipo visual: a abstração limpa de perigos de segurança e RGPD até à consolidação formal.
- Perder “o pé” a códigos longos: Tal como experienciamos no Teste 3, as IAs generativas falham muito na sintaxe CSS chamada `Z-Index` e atributos de `Display` quando processam aplicações de múltiplas visões. Entenda que, na programação assistida, quem dirige a orquestra continua a ser você!
🚨 SOS: As abas do meu painel não abrem!
- Causa: Ao gerar múltiplos módulos novos em *Javascript* de uma assentada (Cupons, Gestão e Dashboard), as diretrizes do seletor *DOM* fundem-se. A rotina principal encarrega-se de sobrepor uma aba “invisível” sobre as abas que você está a premir fisicamente na tela.
- Correção prática: Tal como mostramos no Prompt 04, pare de requerer inovações e refira explicitamente o defeito de oclusão CSS. Diga à IA: “A área de ‘Escanear QR Code’ está a cobrir o resto do site por defeito; adicione a instrução ‘display: none’ em todas as divs antes de injetar o ‘display: block’ à div selecionada.”
- Resultado: A resposta da tela liberta-se e as métricas complexas de gestão ficarão instantaneamente visíveis na matriz da loja.
FAQ: dúvidas reais a serem respondidas 🔍
Esta aplicação sincroniza os meus dados na web?
Não. Exigimos desde a base que o projeto operasse via localStorage. Ou seja, toda a coleção de relatórios dos clientes acumula-se restritamente no “cérebro” do navegador utilizado pela loja naquele equipamento exato.
Consigo transferir o Play Coffee para ser uma App Android (.APK)?
Indubitavelmente. Ferramentas integradoras como o *Cordova* ou serviços em nuvem como o *Capacitor* encapsulam este arquivo HTML gerado por IA convertendo-o numa aplicação baixável instalável nativamente num sistema Android.
Por que se abandonou o uso de “Pontos” por “Play XP”?
É uma manobra de gamificação base de negócio. Promover pontos aborrece os consumidores mais jovens; injetar dinâmicas de progresso (subir de “Nível” através de “Pontos de Experiência”) mimetiza a química aditiva proveniente de jogos virtuais de sucesso.
O que a IA falhou ao gerar o leitor de QR Code?
Como a captação das permissões de hardware de um dispositivo em ambiente local solto é rigorosa, a IA inseriu o desenho cosmético da câmera pedindo a abstração para digitação manual (uma ID única gerada) a fim de validar as mecânicas operacionais do administrador.
Conclusão: O poder subestimado dos ecossistemas simulados 🙌
O desafio estrutural do Play Coffee revela uma maravilha formidável da programação moderna impulsionada pelas IAs: um conceito complexo que obrigaria a meses de fluxogramas na alçada de uma agência materializa-se numa aplicação testável na tela da sua casa numa mera tarde dedicada.
Mais do que isso, a persistência passiva programada (capacidade de recordar as contas de consumo via `localStorage` e atribuir avatares aos cartões dos seus usuários de teste sem falhas matemáticas) expõe que a capacidade do Gemini na escrita base de JavaScript encontra-se perfeitamente estabilizada no plano utilitário.
Inspire-se a desenhar as soluções em falta da sua comunidade através da abstração. Entenda os erros de interface e seja o piloto de um arquiteto robótico formidável!
Ei, antes de ir: se este conteúdo ajudou, não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Baixe o nosso *software* inacabado, expanda-o, adicione o scanner de fotos e compartilhe nos *stories*, marcando o nosso perfil @mktamanda. Estarei na linha da frente a apoiar as suas conquistas de código isolado! :))
ps: obgda por chegar até aqui, é importante para mim.
