Antes de começar
Saiba o que significam as palavras principais
Você não precisa aprender programação para seguir este guia. Basta uma conta Adios, um navegador moderno e tempo suficiente para ler o plano do agente de IA e testar o que ele cria.
- Modelo
- Um aplicativo inicial funcional. Ele dá à IA uma base segura, em vez de um projeto vazio.
- Espaço de trabalho
- O lugar online para seus arquivos de código-fonte, conversa de IA, prévia, logs e controles de implantação.
- Prévia
- Uma versão de teste que você pode abrir antes de alterar o aplicativo público.
- Compilar
- Uma verificação de produção que prepara o aplicativo e identifica muitos problemas antes do lançamento.
- Implantar
- Publique uma versão revisada para que outras pessoas possam acessá-la na web.
- Verificação de saúde
- Um pequeno teste automático que o Adios usa para confirmar que o aplicativo está respondendo.
Três regras para criar a primeira versão com segurança
- Nunca cole senhas, dados de pagamento ou chaves de API em um chat de IA.
- Não permita que o agente remova
adios.yaml, a rota de saúde ou o arquivo de pacotes do projeto. - Não publique até que a prévia funcione e as verificações passem.
Escolha uma primeira versão pequena
Descreva uma pessoa, um problema e uma ação útil
Criar o primeiro aplicativo fica muito mais fácil quando ele tem uma função clara. Este guia usa um estimador de preços de reforma: o visitante escolhe três opções e recebe uma faixa aproximada de preços. É interativo e útil, sem precisar de dados privados ou outro serviço.
Quero criar [APP NAME] para [WHO IT HELPS].
A principal ação que um visitante deve poder realizar é [ONE ACTION].
O estilo deve transmitir [THREE STYLE WORDS].
Na primeira versão, não adicione [FEATURES TO LEAVE FOR LATER].Não sabe o que criar?
Siga exatamente o exemplo BrightBuild. Depois de entrar em produção, peça ao agente de IA para adaptar o nome, as cores, os textos, as opções e a lógica de preços à sua ideia. Concluir um aplicativo pequeno vale mais do que planejar dez grandes.
Crie o projeto inicial
Crie seu aplicativo Adios a partir do modelo Next.js
O modelo já contém framework, comando de inicialização, arquivo de implantação e verificação de saúde. A primeira implantação confirma que essa base funciona antes de a IA alterá-la.
- 1Abra o modelo Next.js e entre na sua conta Adios ou crie uma.
- 2Revise o modelo, a região, os recursos e as configurações de implantação selecionados e exibidos pelo Adios.
- 3Crie o aplicativo e acompanhe o log de implantação até que o aplicativo inicial fique saudável.
- 4Abra o endereço HTTPS gerado. Copie e guarde em um lugar seguro; você vai colá-lo no prompt de IA.
- 5Abra o espaço de trabalho do aplicativo. É ali que você conversa com o agente de IA e visualiza o resultado.
Crie com o agente de IA
Cole uma solicitação completa no espaço de trabalho
Abra a conversa de IA no espaço de trabalho. Substitua a URL entre colchetes abaixo pelo endereço HTTPS da implantação inicial e cole a solicitação inteira. Pedir um plano primeiro permite corrigir um mal-entendido antes de alterar qualquer arquivo de código-fonte. O Criador de aplicativos com IA e espaço de trabalho Adios mantém esse plano vinculado ao código-fonte resultante e à Prévia.
Estou começando a criar aplicativos. Ajude-me a transformar este projeto inicial em uma primeira versão completa de um aplicativo.
O aplicativo:
- Nome: BrightBuild Project Estimator
- Público: proprietários de imóveis que planejam uma pequena reforma
- Função principal: permitir escolher o tipo de projeto, o tamanho do cômodo e o nível de acabamento e mostrar uma faixa aproximada de preços
- Estilo: tranquilo, confiável, moderno e fácil de ler
O que criar:
- Uma página inicial clara que explique o estimador
- Um estimador funcional com campos para tipo de projeto, tamanho do cômodo e nível de acabamento
- Uma faixa estimada de preços calculada instantaneamente no navegador
- Uma seção curta de “Como funciona”, perguntas frequentes e um botão de contato
- Um aviso claro de que a estimativa serve de orientação e não é um orçamento vinculante
- Um layout responsivo que funcione em celulares e computadores
- Título e descrição de página precisos, além de robots.txt e sitemap.xml para esta URL: [PASTE YOUR ADIOS APP URL]
Regras:
- Mantenha o projeto Next.js atual e sua configuração de implantação no Adios.
- Não remova adios.yaml, package.json nem a rota de saúde existente.
- Não adicione login, pagamentos, banco de dados, APIs externas nem serviços pagos.
- Não colete nem armazene informações pessoais.
- Não invente avaliações, números de clientes, prêmios nem alegações sobre o negócio.
- Use dados de contato claramente provisórios e diga onde eles aparecem.
- Antes de editar, apresente um plano curto em inglês simples.
- Depois que eu aprovar o plano, crie o aplicativo, execute as verificações existentes de lint e compilação e explique o que mudou sem jargão.Aprove o plano quando
- Ele descreve o estimador e as seções que você solicitou.
- Mantém o modelo atual e a configuração de implantação.
- Inclui testes antes da implantação.
Peça um plano mais simples quando
- Adiciona login, pagamentos, banco de dados ou uma API externa.
- Quer substituir o framework ou os arquivos de implantação.
- Você não consegue explicar o plano com suas próprias palavras.
Se o agente fizer uma pergunta técnica
Responda: “Recomende a opção segura mais simples que funcione com o modelo existente. Explique a escolha em linguagem simples antes de continuar.” Você não precisa adivinhar.
Teste antes da publicação
Abra a Prévia e use o aplicativo como um visitante
Aguarde o agente terminar as alterações e informar os resultados de lint e compilação. Depois, use o controle de Prévia do espaço de trabalho. Uma compilação bem-sucedida é importante, mas não diz se os textos fazem sentido ou se o estimador é útil.
- A página abre sem um erro ou tela em branco.
- Mudar o tipo, o tamanho ou o acabamento do projeto altera a estimativa.
- A estimativa está claramente descrita como uma orientação aproximada.
- Cada botão e link vai para algum lugar útil.
- O texto é confortável de ler no celular e no computador.
- Não há avaliações falsas, alegações sem explicação nem textos provisórios esquecidos.
- O aplicativo continua carregando corretamente ao atualizar a página.
Você não precisa entender cada arquivo alterado. Na revisão do espaço de trabalho, confirme que o agente alterou a página e os estilos mantendo adios.yaml, package.json, e a rota de saúde no projeto.
Melhorar o resultado
Dê feedback específico em rodadas curtas, uma por vez
“Melhore isso” deixa muita margem para interpretação. Diga o que você viu, o que esperava e onde aconteceu. Teste a nova prévia a cada rodada para que uma pequena mudança visual não comprometa a ação principal.
Corrija apenas estes itens no aplicativo atual:
1. [DESCRIBE THE FIRST PROBLEM]
2. [DESCRIBE THE SECOND PROBLEM, OR DELETE THIS LINE]
Mantenha todo o resto como está. Não remova os arquivos de implantação do Adios nem a rota de saúde. Execute as verificações existentes após a alteração e diga exatamente o que devo testar na Prévia.Um bom feedback descreve o que pode ser observado
Muito vago
“A página parece errada. Deixe-a mais profissional.”
Mais fácil de corrigir
“No meu celular, o botão de estimativa fica cortado. Mantenha-o totalmente visível, sem rolagem horizontal.”
Prepare o lançamento
Faça uma revisão final e depois implante
Cole esta solicitação final depois que a prévia estiver correta. Ela transforma a revisão visual em uma lista de verificação de lançamento e orienta o agente a não publicar por conta própria.
Faça uma revisão final de lançamento deste aplicativo.
Verifique se:
- o estimador principal funciona com várias combinações de entradas;
- o layout é legível no celular e no computador;
- cada link e botão tem um resultado claro;
- não há textos provisórios inacabados, exceto os dados de contato que combinamos;
- o título e a descrição da página correspondem ao aplicativo;
- robots.txt e sitemap.xml usam [PASTE YOUR ADIOS APP URL];
- a rota de saúde continua funcionando;
- não há senhas, tokens nem informações privadas nos arquivos;
- as verificações existentes de lint e compilação passam.
Corrija apenas os problemas encontrados. Depois, forneça uma lista de verificação de lançamento em linguagem simples. Não implante até que eu aprove.A revisão de lançamento marca a passagem para o fluxo de produção. Saiba como implantar seu aplicativo criado com IA com código-fonte, saúde, logs e evidências de aprovação conectados.
- 1. Leia o resultado. Confirme que as verificações de lint e compilação passaram. Se alguma falhou, peça ao agente para corrigir a falha e executar novamente.
- 2. Abra a Prévia novamente. Teste o estimador mais uma vez após as correções finais.
- 3. Use os controles de implantação do espaço de trabalho. Revise a versão que será lançada, inicie a implantação e acompanhe o log de compilação.
- 4. Aguarde a versão ficar saudável. Não feche a página na primeira mensagem de sucesso. Confirme que a nova versão fica saudável e atende pela rota pública.
Se houver uma falha no log, copie apenas o erro final para a conversa de IA e peça uma explicação em linguagem simples antes de aprovar outra alteração.
Confirmar a produção
Verifique o aplicativo público, não só a mensagem de implantação
Abra o endereço HTTPS em uma nova aba do navegador. Teste como se nunca tivesse visto o projeto. Uma versão só está concluída quando o aplicativo público responde e seu recurso principal funciona.
/O aplicativo abre e o estimador funciona.
/api/healthA página retorna uma resposta de saúde curta e com status de sucesso.
/robots.txtAs instruções para crawlers carregam no aplicativo público.
/sitemap.xmlO sitemap carrega e contém o endereço HTTPS correto.
Seu aplicativo está em produção
Você agora tem um aplicativo público funcional, uma versão de produção testada e um espaço de trabalho para continuar melhorando. Compartilhe a URL pública com uma pessoa e peça que use o estimador sem sua ajuda. A primeira pergunta dela é uma pista útil para sua próxima alteração.
Salve o trabalho
Crie um ponto de controle do código-fonte antes de adicionar mais recursos
Um commit do Git registra um ponto de controle identificado do seu código-fonte. No espaço de trabalho, revise a lista de arquivos alterados e crie um commit como Build first BrightBuild estimator. Conecte um repositório Git remoto e faça push quando quiser outra cópia fora do espaço de trabalho.
Adicione complexidade nesta ordem
Próximo 1
Melhorar a página pública
Refine as palavras, cores, layout e escolhas do estimador.
Próximo 2
Conectar um domínio personalizado
Dê ao aplicativo em produção um endereço que pertence a você.
Próximo 3
Adicione dados salvos
Adicione um banco de dados apenas quando o aplicativo realmente precisar lembrar de algo.
Próximo 4
Adicione serviços privados
Armazene credenciais no Adios Secrets, nunca no prompt de IA ou no código-fonte.
Perguntas frequentes
Supere bloqueios sem adivinhar
Preciso saber programar?
Não. Este guia oferece um aplicativo inicial funcional, um prompt para copiar e um processo de revisão visual. Você continua decidindo o que o aplicativo deve fazer e testando o resultado antes de publicar.
Preciso instalar Node.js, Git ou um editor de código?
Neste guia, não. O modelo, o agente de IA, o editor de arquivos, a prévia, os logs e os controles de implantação estão disponíveis no espaço de trabalho do Adios. Ferramentas locais continuam sendo uma opção mais tarde.
Preciso de uma conta GitHub antes de implantar?
Não. Você pode começar com um modelo do Adios e implantar a primeira versão antes de conectar um repositório Git remoto. É recomendável conectar um depois para ter outra cópia e um histórico claro do código-fonte.
Posso criar um aplicativo com contas, pagamentos ou banco de dados?
Sim, mas adicione esses recursos depois que a primeira versão simples funcionar. Eles introduzem dados privados, secrets, permissões e situações de falha que exigem revisão mais cuidadosa. Comece com um recurso público funcional e acrescente um sistema por vez.
O que fazer se a compilação falhar?
Copie o erro final do log de compilação para o chat de IA do espaço de trabalho. Peça ao agente para explicar a causa em linguagem simples, fazer apenas a correção necessária, executar novamente as verificações e mostrar o resultado antes de implantar de novo.
Posso alterar o aplicativo depois de entrar em produção?
Sim. Faça a próxima alteração no espaço de trabalho, teste na Prévia e implante uma nova versão. O aplicativo em produção continua na versão atual até você publicar a atualização revisada.
Pronto para começar?
Comece com um modelo funcional, não com uma tela vazia.
Crie o aplicativo inicial, copie sua URL pública e volte ao prompt da etapa quatro. Você pode chegar a um resultado real implantado sem configurar um ambiente de desenvolvimento local.
Criar meu primeiro aplicativo