Servidoras no Comando Digital
Seu app
no ar em
20 min.
Siga cada etapa nesta tela. No final você terá um aplicativo real publicado na internet.
⏱ 20 min
💳 5 créditos
📱 só o celular
Abrir a Lovable agora
Antes de começar
Checklist de largada
📲
Cadastro gratuito
Entre em lovable.dev, clique em Sign up e use seu e-mail. Plano Free é suficiente — não precisa de cartão de crédito.
Conta criada na Lovable
Já estou logada
Sei qual tarefa quero resolver com o app
Etapa 1
Definir a ideia
Preencha mentalmente
Responda às 3 perguntas
1
Qual problema resolve?
Ex: controlar capacitações, acompanhar contratos, registrar demandas…
2
Quais dados vou registrar?
Ex: nome, data, status, responsável… Liste pelo menos 3 campos.
3
O que o usuário faz?
Ex: preenche formulário, visualiza lista, filtra por status…
💡
Exemplos prontos por área
Gestão de pessoas: Registro de Capacitações
Comunicação: Banco de Ofícios
Planejamento: Gestão de Projetos
Atendimento: Fila de Demandas
Contratos: Rastreador de Contratos
Etapa 2
Montar o prompt
✍️
Como usar este prompt
Substitua apenas as partes em LARANJA. O restante já está configurado para funcionar na Lovable com 1 crédito — não altere mais nada.
Personalize aqui antes de copiar
Seus dados
Prompt para a Lovable — 1 crédito
Crie um aplicativo web completo e funcional com as seguintes especificações: APLICATIVO: [NOME DO APP] DESCRIÇÃO: [O QUE ELE FAZ EM 1 FRASE] PÚBLICO: Servidoras públicas do governo federal FUNCIONALIDADES PRINCIPAIS: 1. [FUNCIONALIDADE PRINCIPAL] 2. Listar todos os registros em cards com busca e filtro 3. Editar e excluir registros existentes DADOS A REGISTRAR (banco de dados): - [CAMPO 1: tipo] - [CAMPO 2: tipo] - [CAMPO 3: tipo] - [CAMPO 4: seleção com opções] INTERFACE: - Design limpo, moderno e responsivo (mobile-first) - Cores: roxo (#7C3AED) e ciano (#0891B2), fundo escuro - Navegação simples: tela inicial → formulário → lista - Cards para exibir cada registro com botões de editar e excluir - Botões grandes e fáceis de tocar no celular BACKEND: - Banco de dados Supabase integrado para salvar os registros - Sem necessidade de login (acesso aberto) - CRUD completo: criar, listar, editar e excluir registros TELAS: 1. Tela inicial: apresentação e botão para adicionar registro 2. Formulário: campos para preencher os dados 3. Lista: todos os registros com busca e filtro por status Construa o app completo de uma vez, incluindo frontend, backend Supabase e todas as funcionalidades listadas. O app deve estar pronto para publicar sem ajustes adicionais.
Etapa 3
Enviar e esperar
1
Cole o prompt na Lovable
Abra a Lovable, crie um novo projeto e cole o texto que você copiou.
2
Aguarde sem interromper
A geração leva 2–4 minutos. Não clique em nada enquanto ela trabalha.
3
Ative o banco de dados
Quando aparecer "Enable Supabase" ou "Connect Database", clique. É gratuito e automático.
⚠️
Sobre os créditos
Cada prompt enviado = 1 crédito. Você tem 5 por dia no plano gratuito. Não clique em "Regenerate" sem precisar — guarde créditos para ajustes.
Gestão dos seus 5 créditos
Gerar o app completo
1
Ajuste (se precisar)
0–2
Reserva de segurança
2–4
Etapa 4
Testar o app
Formulário abre e fecha normalmente
Consigo preencher e salvar um registro
O registro aparece na lista depois de salvar
Testei no celular (modo mobile do preview)
Consigo editar e excluir um registro
Algo não funcionou? Prompts de ajuste
Use 1 crédito para cada ajuste. Seja específica — descreva exatamente o que precisa mudar.
Banco de dados não salvou
O banco de dados não está salvando. Configure o Supabase corretamente: - Crie as tabelas necessárias - Conecte o formulário para salvar - Conecte a lista para exibir os dados Teste: preencher deve aparecer na lista.
Layout quebrado no celular
Revise o layout para mobile: - Corrija elementos cortados ou sobrepostos - Botões com mínimo 48px de altura (fáceis de tocar) - Textos legíveis sem zoom - Não mude funcionalidades, apenas o visual.
Adicionar campo de busca
Na lista de registros, adicione: - Campo de busca por texto no topo - O resultado atualiza em tempo real - Não mude layout, cores ou outros elementos.
Regras de ouro
❌ Não faça
- Mandar o prompt em partes
- Mudar cor → novo prompt
- Clicar em Regenerate à toa
- Refazer do zero
✅ Faça
- 1 prompt completo e detalhado
- Edição visual para cores
- Ajuste cirúrgico específico
- Evoluir o que existe
Etapa 5
Publicar
1
Clique em "Publish"
Botão no canto superior direito da Lovable. A plataforma gera a URL pública.
2
Copie o link
Vai aparecer algo como seuapp.lovable.app — endereço público do seu app.
3
Compartilhe com a turma
Mande o link no grupo. Qualquer pessoa acessa de qualquer dispositivo.
📎 Guardar meu app
Cole o link do seu aplicativo para salvá-lo e compartilhá-lo. Você pode voltar a esta página e acessar depois.
Meus apps criados
🏆
Você criou
tecnologia.
Do zero, pelo celular, em 20 minutos — um aplicativo real publicado na internet.
Explorar o site do programa
Após a oficina
Missões desbloqueadas
🌱
A jornada não acabou aqui
Você saiu da oficina com um app funcionando. Estas missões te levam para o próximo nível — no seu ritmo, quando quiser.
🔓 Missão 1 · Essencial
Conectar seu app a um banco de dados real
Durante a oficina você criou um aplicativo funcionando. Agora vamos dar o próximo passo: fazer com que os dados realmente fiquem salvos para sempre.
1
Abra novamente seu projeto na Lovable
Entre em lovable.dev e abra o app que você criou hoje.
2
Ative o banco de dados
Clique em "Enable Supabase" ou "Connect Database" — é gratuito e automático.
3
Teste salvar um registro
Preencha o formulário e veja o dado aparecer na lista. Se aparecer: missão cumprida.
🧠 O que você acabou de aprender
Todo aplicativo real possui três partes:
• Interface — o que as pessoas veem
• Lógica — o que o sistema faz
• Banco de dados — onde as informações ficam guardadas
Você acabou de conectar as três.
🚀 Desafio extra
Adicione mais um campo ao seu aplicativo e teste se ele também está sendo salvo no banco. Use 1 crédito e um prompt cirúrgico.
🔓 Missão 2 · Evolução
Criar um segundo app para outra necessidade
Você já sabe o ciclo completo: prompt → geração → banco → publicação. Agora repita com uma nova ideia — vai ser muito mais rápido.
1
Identifique outra dor no seu trabalho
Qual processo ainda é feito em papel, e-mail ou planilha compartilhada?
2
Volte à Etapa 2 desta página
Preencha os campos do formulário com a nova ideia e copie o prompt.
3
Compartilhe com sua equipe
Mande o link para alguém usar. O feedback real melhora tudo.
🧠 O que você está praticando
Pensamento de produto: identificar problema → definir solução mínima → construir → testar com usuários reais. Essa é a habilidade que separa quem usa tecnologia de quem cria tecnologia.
Em breve · próximas missões
Missão 3
Personalizar o visual do seu app
Cores, logo, tipografia — transformar o app genérico em algo com a sua identidade.
Missão 4
Adicionar login e controle de acesso
Quem pode ver? Quem pode editar? Permissões por perfil de usuário.
Missão 5
Criar painel de visualização de dados
Gráficos e indicadores que transformam seus registros em inteligência.
🚀
Crie seu aplicativo agora
Como usar
- Abra lovable.dev
- Cole o prompt abaixo
- Clique em Generate
- Seu app estará pronto em ~8 min
PROMPT PRONTO — Gerenciador de Tarefas
PERSONA Você é um Product Designer sênior, UX Strategist e Arquiteto de Aplicações no-code, especializado em criar sistemas web de alta clareza, alto valor percebido e experiência visual profissional para equipes do setor público. Sua especialidade é transformar necessidades administrativas em aplicativos modernos, intuitivos e visualmente impressionantes, com aparência de produto real pronto para uso. Seu tom deve ser objetivo, elegante, confiável e profissional. Você projeta interfaces que geram efeito "UAU" sem exagero visual, priorizando: clareza credibilidade facilidade de uso excelente organização da informação MISSÃO PRINCIPAL Crie um aplicativo web completo de gerenciamento de tarefas para uma servidora pública, sua equipe e sua unidade. O sistema deve permitir: cadastrar tarefas acompanhar demandas priorizar atividades visualizar produtividade gerenciar equipe distribuir responsabilidades O aplicativo precisa parecer um produto real, moderno e pronto para uso, mesmo sem integração com banco de dados nesta primeira versão. PRINCÍPIOS DO PRODUTO O sistema deve ser construído com foco em: simplicidade de uso organização visual impecável sensação de ferramenta profissional navegação intuitiva valor percebido já na primeira tela forte impacto visual para demonstração em oficina ESTRUTURA DO APLICATIVO O aplicativo deve possuir as seguintes áreas principais: Dashboard Tarefas Equipe Kanban Calendário ou Timeline Cadastro / edição de tarefa 1) DASHBOARD PRINCIPAL Criar uma tela inicial com visão executiva da operação da unidade. Ela deve incluir: Indicadores principais total de tarefas tarefas concluídas tarefas em andamento tarefas atrasadas tarefas próximas do prazo tarefas por criticidade tarefas por responsável total de integrantes da equipe integrantes ativos Painéis visuais Adicionar visualizações claras e elegantes: gráfico de distribuição de tarefas por status gráfico de tarefas por criticidade gráfico de tarefas por responsável painel de produtividade da equipe painel de carga de tarefas por responsável Blocos estratégicos Prioridades do dia Tarefas mais urgentes Risco de atraso Atividades recentes Tudo deve ser apresentado em cards bem desenhados, com excelente hierarquia visual. 2) GESTÃO DE TAREFAS Criar uma página de tarefas com visual profissional, organizada em tabela moderna ou lista inteligente. Cada tarefa deve possuir: título descrição responsável (selecionado da aba Equipe) unidade ou equipe data de criação prazo de entrega status criticidade observações opcionais 3) STATUS OPERACIONAL Cada tarefa deve possuir um status operacional: Em andamento Concluída Atrasada Esses status devem ser exibidos com etiquetas visuais claras. 4) TAG AUTOMÁTICA DE PRAZO O sistema deve calcular automaticamente o estado do prazo com base na data atual. Mostrar as seguintes etiquetas: 🟢 No prazo 🟡 Prazo próximo 🔴 Vencida Essa lógica deve ser visual e automática. 5) CRITICIDADE Cada tarefa pode possuir nível de criticidade: Baixa Média Alta Apresentar isso com cores elegantes e etiquetas visuais claras. Exemplo: Baixa → cinza ou azul suave Média → amarelo ou laranja Alta → vermelho 6) FORMULÁRIO DE CRIAÇÃO E EDIÇÃO DE TAREFAS Criar um formulário simples e profissional contendo: título descrição responsável unidade prazo criticidade status observações Botões disponíveis: salvar tarefa limpar formulário cancelar edição O campo responsável deve listar automaticamente os integrantes cadastrados na aba Equipe. 7) ABA EQUIPE Criar uma página chamada Equipe para cadastro e gerenciamento das pessoas da unidade. Essa aba deve permitir personalizar o aplicativo para a realidade de cada participante da oficina. Cada integrante da equipe deve possuir: nome completo cargo ou função unidade ou equipe e-mail institucional opcional telefone opcional status do integrante: Ativo Afastado Férias observações opcionais Funcionalidades da aba Equipe Permitir: cadastrar integrante editar integrante remover integrante buscar por nome filtrar por unidade filtrar por status visualizar lista da equipe visualizar carga de tarefas por integrante Integração com tarefas Os integrantes cadastrados devem alimentar automaticamente o campo responsável das tarefas. Regras: mostrar preferencialmente integrantes ativos exibir nome e unidade integrar dados aos gráficos de produtividade integrar dados ao painel de carga por responsável 8) FILTROS E PRODUTIVIDADE Adicionar filtros para: responsável unidade status criticidade prazo busca por palavra-chave Ordenação por: prazo mais próximo maior criticidade mais recentes responsável maior carga de tarefas 9) VISÕES ALTERNATIVAS Para elevar o impacto visual do aplicativo, incluir: Kanban Colunas: Em andamento Concluída Atrasada Cartões com: título responsável prazo criticidade Calendário ou Timeline Exibir tarefas distribuídas por data. Permitir visualizar: tarefas da semana tarefas do mês prazos próximos 10) SEÇÕES DE INTELIGÊNCIA OPERACIONAL Adicionar também: Prioridades da semana Lista automática com tarefas de maior criticidade e prazo próximo. Risco de atraso Lista de tarefas que estão próximas de vencer ou já vencidas. Carga por responsável Mostrar quantas tarefas cada integrante possui. 11) DADOS SIMULADOS O aplicativo deve abrir com dados de exemplo já preenchidos para parecer vivo na demonstração. Criar: Tarefas Pelo menos 12 tarefas, incluindo: elaboração de relatório mensal resposta a ofício atualização de planilha de acompanhamento consolidação de indicadores revisão de processo administrativo preparação de reunião da unidade organização de documentos institucionais atualização de painel de monitoramento apoio à demanda da chefia revisão de minuta de documento levantamento de dados para relatório atualização de controle interno Distribuir tarefas entre: diferentes prazos diferentes criticidades diferentes responsáveis diferentes status Integrantes da equipe Criar pelo menos 6 integrantes: Exemplos: Ana Ribeiro — Coordenadora da Unidade Carla Mendes — Analista Administrativa Juliana Costa — Técnica de Planejamento Renata Alves — Assistente de Gestão Fernanda Rocha — Apoio Administrativo Patrícia Gomes — Assessora Técnica Criar 3 unidades diferentes. Incluir pelo menos: 1 integrante em férias 1 integrante afastado 12) ESTRUTURA VISUAL O aplicativo deve possuir: sidebar lateral moderna dashboard inicial página de tarefas página de equipe formulário de tarefa visão Kanban visão calendário ou timeline 13) ESTILO VISUAL Design: moderno limpo elegante profissional responsivo Aplicar: cards bem desenhados boa tipografia espaçamento generoso uso inteligente de cores indicadores visuais claros aparência de software institucional moderno O aplicativo deve transmitir eficiência, organização e controle operacional. RESULTADO ESPERADO O resultado deve ser um aplicativo de gerenciamento de tarefas com aparência de produto real, contendo: dashboard executivo gestão de tarefas cadastro de equipe filtros e inteligência operacional visão Kanban visão temporal dados simulados realistas A primeira tela deve gerar impacto visual imediato, transmitindo: controle da operação organização das demandas priorização clara produtividade da equipe A interface deve parecer uma plataforma moderna de gestão pública, e não apenas um formulário simples.