Como Criar uma App com Vibe Coding: da Ideia à App Publicada

Para criar uma app com vibe coding, escreva uma descrição de uma página da primeira versão, entregue-a a um criador de apps com IA como primeiro prompt e depois faça crescer a app em pequenos passos testados: dados, início de sessão, o fluxo principal, acabamentos, uma revisão de segurança e, por fim, a publicação. Este guia acompanha um projeto de exemplo, uma app de marcação de aulas para um pequeno estúdio de yoga, em todas as etapas, com os prompts usados em cada uma.

Se nunca construiu nada desta forma, o nosso tutorial de vibe coding para principiantes começa mais devagar. Para uma visão geral mais ampla que não está ligada ao vibe coding, veja como criar uma app com IA.

O projeto

Imagine uma dona de estúdio de yoga, a Sara, que dá oito aulas por semana. As marcações chegam pelo WhatsApp; ela mantém uma lista em papel por aula e muitas vezes sobrelota as turmas. Quer que:

• Os alunos vejam o horário da semana e marquem um lugar.
• Cada aula tenha uma lotação.
• Haja uma lista por aula que ela possa consultar à porta.
• Os alunos possam cancelar até duas horas antes.

É toda a primeira versão. Sem pagamentos, sem pacotes de aulas, sem loja de aplicações. Isso vem depois, ou nunca.

Passo 1: Escreva uma especificação de uma página

Antes de abrir qualquer ferramenta, escreva a primeira versão em palavras simples. Dez minutos aqui poupam horas de vai-e-vem. Uma forma útil:

• Quem usa: alunos (marcam e cancelam), a Sara (gere as aulas e vê as listas).
• Ecrãs: horário, detalhe da aula, as minhas marcações, aulas (administração), lista de alunos por aula (administração).
• Dados: aulas (nome, professor, hora de início, duração, lotação), marcações (aluno, aula, estado), alunos (nome, email, telefone).
• Regras: não marcar uma aula cheia; uma marcação por aluno por aula; cancelar até duas horas antes; só a Sara vê as páginas de administração.
• Fora da v1: pagamentos, pacotes de aulas, listas de espera, lembretes.

A lista «fora da v1» é a mais importante. É ela que mantém a construção acabável. O nosso guia sobre como escrever um documento de requisitos de produto com IA vai mais longe, se quiser uma especificação mais completa.

Passo 2: Escolha uma ferramenta que trate do ciclo completo

Para uma app com base de dados, início de sessão e URL público, use um criador de apps com IA que execute o código, associe uma base de dados e publique, em vez de um assistente de chat que lhe entrega ficheiros. A nossa comparação de ferramentas de vibe coding lista as opções. Vamos usar a Mythex aqui porque cobre cada etapa num só lugar: chat, pré-visualização em tempo real, uma base de dados e armazenamento de ficheiros reais, e publicação com um clique.

Passo 3: O primeiro prompt

Transforme a especificação num parágrafo. Não cole o documento inteiro de uma vez com todos os detalhes; dê o essencial e acrescente o resto em etapas.

Cria uma app de marcação de aulas para o meu estúdio de yoga. Os alunos registam-se com nome, email e telefone, veem o horário desta semana e marcam um lugar numa aula. Cada aula tem um nome, professor, hora de início, duração e lotação; uma aula cheia mostra «Lotada» e não pode ser marcada. Os alunos veem as suas marcações e podem cancelar até duas horas antes da aula. Eu sou a administradora: posso acrescentar e editar aulas e ver a lista de quem está marcado em cada uma. Design calmo e simples que funcione bem em telemóveis.

Se não tiver a certeza de que a ferramenta percebeu, peça primeiro um plano. Na Mythex, o modo Plan apresenta os ecrãs e os dados antes de escrever código, e você aprova.

Passo 4: Ponha o ciclo principal a funcionar

O ciclo principal é a única coisa para que a app existe: um aluno marca uma aula e a Sara vê a marcação. Teste apenas isso:

1. Registe-se como aluno e marque uma aula.
2. Abra a vista de administração. A marcação está lá?
3. Marque a mesma aula outra vez. Deve recusar.
4. Defina a lotação de uma aula para 2, marque-a a partir de duas contas de alunos e tente uma terceira.

Normalmente aparecem dois problemas nesta fase. O horário mostra as horas no fuso horário do servidor, e não no do estúdio. E a verificação de «Lotada» só acontece na página, pelo que um duplo clique rápido cria duas marcações.

Mostra todas as horas das aulas no fuso horário do estúdio, [Asia/Dubai], independentemente da configuração do dispositivo do visitante.

Verifica a lotação e as marcações duplicadas no servidor quando uma marcação é criada, e não só na página. Se dois pedidos chegarem juntos para o último lugar, apenas um deve ter sucesso.

Corrija o ciclo principal antes de acrescentar qualquer outra coisa. Tudo o resto depende dele.

Passo 5: Acrescente as restantes regras, uma por mensagem

Agora percorra as regras da especificação uma de cada vez:

Os alunos podem cancelar uma marcação até duas horas antes do início da aula. Depois disso, oculta o botão de cancelar e recusa o cancelamento no servidor com uma mensagem clara.

Só a minha conta pode abrir as páginas de administração. Confirma isto no servidor para cada ação de administração, e não apenas ocultando o menu.

Depois de cada uma, teste e avance apenas quando funcionar. Se uma alteração estragar alguma coisa, reverta para o último ponto de controlo bom e tente um pedido mais claro, em vez de empilhar correções por cima.

Passo 6: Polir o que os utilizadores reais vão notar

Os utilizadores reais reparam em pormenores. Uma lista curta para a app da Sara:

• Estados vazios: «Ainda não há aulas esta semana» em vez de uma página em branco.
• Confirmação: «Está marcada para Vinyasa, terça-feira às 18:00» depois de marcar.
• Layout no telemóvel: botões grandes, o horário legível num ecrã de 375 px.
• Lugares disponíveis: «3 lugares livres» em cada cartão de aula, para que os alunos marquem mais cedo.

Em cada cartão de aula mostra os lugares disponíveis, por exemplo «3 de 12 livres». Depois de marcar, mostra uma confirmação com o nome da aula, o dia e a hora e um botão para as minhas marcações.

Passo 7: Teste como um estranho

Antes de qualquer outra pessoa usar a app, passe meia hora a tentar partir tudo:

Também pode pedir à IA que percorra casos limite:

Lista dez coisas que um aluno real poderia fazer e que possam estragar a marcação ou o cancelamento, testa cada uma e corrige o que falhar. Diz-me o que alteraste.

Passo 8: Uma revisão de segurança

Esta app guarda nomes, emails e números de telefone, por isso vale a pena uma revisão de segurança curta. As principais perguntas:

• Um aluno consegue ver as marcações ou os contactos de outro?
• Há chaves ou palavras-passe em código que corre no browser?
• O formulário de registo está protegido contra bots?
• Existe uma cópia de segurança dos dados?

A nossa página sobre se o vibe coding é seguro explica cada verificação e dá prompts para elas, e a lista de verificação de segurança para apps criadas com IA é a versão longa.

Passo 9: Publique

Quando o ciclo principal, as regras e as verificações passarem, publique. Na Mythex é um clique, e a app recebe um URL público com a base de dados e o alojamento já configurados. No Pro pode ligar um domínio próprio, como book.sarasyoga.com; veja como ligar um domínio personalizado.

Antes de enviar a ligação, verifique a versão publicada mais uma vez. Marque uma aula a partir do telemóvel. A produção e a pré-visualização devem comportar-se da mesma forma, mas confirme.

Passo 10: Primeiros utilizadores e a versão seguinte

Dê a ligação primeiro a cinco alunos habituais, e não a todos. Peça-lhes que marquem a próxima aula por ela e que lhe digam o que foi confuso. Depois corrija as três coisas principais que mencionarem.

Após algumas semanas de uso real, uma lista de v2 para uma app como esta costuma escrever-se sozinha: uma lista de espera para aulas cheias, lembretes por email na véspera e pacotes de aulas pagos online. Cada uma recebe o mesmo tratamento: especificar em poucas linhas, dar o prompt, testar e publicar. Para acrescentar pagamentos, veja como adicionar pagamentos à sua app. Para divulgar a app, como lançar uma app e conquistar os primeiros utilizadores.

Transformar em app para telemóvel

Muitos estúdios querem um ícone no telemóvel dos seus alunos. No Mythex Pro, a app publicada pode tornar-se uma app Android (um ficheiro que pode carregar na Google Play) e uma app para iPhone enviada para o TestFlight com a sua própria chave do App Store Connect, sem Mac. A app para telemóvel abre a app web publicada, por isso, sempre que publicar uma atualização, a app para telemóvel também a recebe.

O que levar daqui

A construção em si foi a parte curta. O que tornou a app utilizável foi a lista «fora da v1» da especificação, testar primeiro o ciclo principal, as regras do lado do servidor para lotação e acesso, e cinco utilizadores reais antes de cinquenta. É assim que o vibe coding se parece quando a app tem de funcionar para outras pessoas.

Pronto para experimentar a sua? Escreva a especificação de uma página e cole o primeiro parágrafo no criador de apps com IA. Se quiser ver mais tipos de apps e os prompts por trás delas, leia os nossos exemplos de vibe coding.

Perguntas