Como criar um dashboard no Google AI Studio com dados fictícios

Nesta aula, vamos criar no Google AI Studio um painel simples para uma barbearia fictícia. Ele mostra a quantidade de agendamentos, os atendimentos concluídos, a receita concluída e os serviços mais pedidos. Você vai gerar a primeira versão com um prompt, conferir os dados e pedir ajustes com instruções pequenas.

O painel usa somente registros inventados guardados no próprio projeto. Não tem login, banco de dados, API, integração com Gemini nem publicação nesta aula. Isso deixa o exercício seguro e fácil de revisar antes de pensar em dados reais.

O Build mode do Google AI Studio cria uma aplicação a partir de instruções e mostra uma prévia ao vivo. Nesta atividade, use a prévia para aprender e não clique em Publish.

Antes de abrir a ferramenta, confira os registros que o painel deverá mostrar. Os nomes abaixo são fictícios. A receita considera somente atendimentos concluídos; um agendamento cancelado continua aparecendo na lista, mas não entra na receita.

[
  { "id": 1, "cliente": "Cliente Alfa", "servico": "Corte", "data": "2026-10-29", "valor": 50, "status": "concluido" },
  { "id": 2, "cliente": "Cliente Beta", "servico": "Barba", "data": "2026-10-29", "valor": 35, "status": "confirmado" },
  { "id": 3, "cliente": "Cliente Gama", "servico": "Corte e barba", "data": "2026-10-29", "valor": 75, "status": "concluido" },
  { "id": 4, "cliente": "Cliente Delta", "servico": "Corte", "data": "2026-10-30", "valor": 50, "status": "pendente" },
  { "id": 5, "cliente": "Cliente Épsilon", "servico": "Barba", "data": "2026-10-30", "valor": 35, "status": "cancelado" },
  { "id": 6, "cliente": "Cliente Zeta", "servico": "Corte", "data": "2026-10-30", "valor": 50, "status": "concluido" }
]

• Agendamentos na lista: 6.
• Atendimentos concluídos: 3.
• Receita dos atendimentos concluídos: R$ 175,00.
• Serviço mais frequente: Corte, com 3 registros.

Entre no Google AI Studio, abra Build mode e descreva a tela que quer criar. O modo Build gera os arquivos do aplicativo e apresenta uma prévia; a documentação mostra também onde consultar o código criado. O nome de alguns controles pode mudar conforme a interface da ferramenta.

Crie um painel web responsivo para uma barbearia fictícia usando a configuração padrão de aplicação web do Google AI Studio.

Use React e CSS simples. Coloque os registros fictícios abaixo em um único arquivo de dados do projeto e calcule os indicadores a partir desses registros; não invente valores separados para os cards.

Mostre quatro indicadores: quantidade total de agendamentos, quantidade de atendimentos concluídos, receita dos atendimentos concluídos e serviço mais frequente. Abaixo, crie uma tabela com cliente, serviço, data, valor e status. Inclua um filtro por status e uma mensagem clara quando nenhum registro corresponder ao filtro.

Formate valores em reais e datas no padrão brasileiro. A tabela deve funcionar em celular, ter títulos e rótulos compreensíveis e não depender só de cores para diferenciar status.

Use apenas os dados fictícios fornecidos. Não crie login, banco de dados, chamadas de API, recursos do Gemini, integração externa nem botão de publicação. Não inclua dados reais. Antes de terminar, confira os indicadores com os registros e explique onde o arquivo de dados ficou no projeto.

Registros:
[cole aqui o JSON agendamentos-ficticios.json]

Quando a prévia aparecer, compare os cards com os resultados esperados. Teste todos os status no filtro, leia a tabela em uma tela estreita e confirme se a receita não soma os registros pendentes, confirmados ou cancelados. Se algum número estiver errado, peça à ferramenta para corrigir a fórmula usando o arquivo de dados como fonte única.

Revise o painel sem acrescentar funcionalidades. Compare cada indicador com os seis registros fictícios. A receita deve somar apenas status "concluido"; o total da tabela deve continuar incluindo os cancelados. Verifique o filtro por status e a leitura em celular. Liste o que encontrou antes de alterar qualquer arquivo.

• Todos os agendamentos: 6, inclusive o cancelado.
• Concluídos: 3.
• Receita concluída: R$ 175,00.
• Serviço mais frequente: Corte.
• Ao filtrar por cancelado, aparece somente Cliente Épsilon.

Acrescente um sétimo registro fictício com serviço “Manicure”, valor de R$ 60,00 e status “confirmado”. Peça para a IA atualizar o conjunto de dados e não mexer no layout. O total de agendamentos deve passar para 7; a receita concluída deve continuar em R$ 175,00, e Corte deve continuar sendo o serviço mais frequente.

Essa alteração ensina uma regra importante: os indicadores devem acompanhar os dados, em vez de serem números escritos manualmente na tela. Abra a aba de código, localize o arquivo de dados e compare a alteração solicitada com o que a ferramenta realmente mudou.

Adicione somente um agendamento fictício de Manicure, valor 60, status "confirmado" e data 2026-10-31. Atualize o arquivo de dados, recalcule os indicadores automaticamente e não altere o restante do layout. Mostre os valores esperados antes de concluir.

O painel é uma demonstração: os dados estão no código e qualquer pessoa que acessar o projeto poderá vê-los. Não substitua os nomes fictícios por informações de clientes. Para usar dados reais seriam necessários, entre outros cuidados, uma fonte protegida no servidor, autenticação, permissões e regras de privacidade.

A documentação do Google explica que aplicações web do Build mode podem ter uma parte de servidor e configurar uma chave secreta quando usam a Gemini API. Este exercício não precisa dessa integração. Se depois você adicionar chamadas de modelo ou publicar o app, revise limites e cobrança antes de compartilhar.