Vibe coding: criar a sua própria pequena aplicação

No vibe coding, descreve por palavras simples o que quer criar. O assistente escreve o código, mostra o resultado e ajusta-o com base no seu feedback. Não precisa de saber programar. Pode criar, por exemplo, um quiz para uma formação, um pequeno jogo ou uma ferramenta útil para os seus colegas.

Só precisa da aplicação de ambiente de trabalho. Não precisa de instalar o Node.js nem o git: a aplicação já os inclui.

1. Escolha uma pasta de trabalho

Crie uma pasta vazia no seu computador, por exemplo QuizFormacao, e escolha-a como pasta de trabalho do seu chat. Saiba como em Acesso a arquivos locais. O assistente trabalha apenas nesta pasta.

2. Descreva o que pretende

Diga da forma mais concreta possível o que quer criar. Por exemplo:

Cria um quiz para um workshop sobre segurança da informação como uma única página HTML. Dez perguntas de escolha múltipla, com botões grandes, uma pontuação no final e um botão para recomeçar.

O assistente mostra uma página simples como esta com o servidor web integrado da aplicação. O resultado aparece no navegador integrado: o botão Navegador (o ícone do globo) à direita na barra superior. Saiba mais em Servidores locais e o navegador integrado.

Não está satisfeito? Diga simplesmente o que deve mudar:

Torna os botões verdes e, quando a resposta estiver errada, mostra a resposta certa.

As tuas fotos e deixar o assistente ver

Junta uma foto à tua mensagem e pede:

Põe esta foto na página web.

O assistente guarda a foto na pasta do projeto, por exemplo em img/, e coloca-a na página. Também funciona com uma imagem que o assistente acabou de criar para ti.

Há algo errado na página do navegador integrado? Pede:

Vê o que está errado na página.

O assistente analisa então o texto, uma captura de ecrã e as mensagens de erro da página. Vê Deixar o assistente ver.

Quando o assistente abre ele próprio uma página no navegador integrado, espera até ela carregar e vê as mensagens de erro, como um erro de script ou um ficheiro que não carrega. Corrige-as antes de dizer que funciona. Depois experimenta a página como um utilizador: clica em botões, preenche campos, prime teclas e corrige os erros que surgem. Se tudo funciona como pretende, deve verificar por si.

3. Aplicações maiores

Se quiser algo maior, como uma aplicação com vários ecrãs, o assistente pode criar um projeto com, por exemplo, Vite e React:

Cria nesta pasta uma aplicação React com Vite para os colegas reservarem uma sala de reuniões. Instala tudo, inicia a aplicação e mostra o resultado.

Aprova no cartão de comando o início de um projeto destes (por exemplo com npm create vite@latest). Depois, o assistente instala pacotes. Também aprova isso ou ativa Permitir instalações de pacotes sem perguntar. Consulte Instalar pacotes. Não quer um cartão para cada comando? Escolha Confiar neste projeto no primeiro cartão.

4. Guarde versões

Uma versão é um instantâneo do seu projeto. Se não gostar de uma alteração, pode voltar a uma versão anterior. Num bom momento, peça ao assistente:

Guarda uma versão.

Na primeira vez, o assistente inicia um histórico de versões para a pasta. Os arquivos que parecem conter segredos, como palavras-passe ou chaves (incluindo chaves de API da Google), nunca entram numa versão. O assistente avisa quando ignora algo.

5. Coloque o seu projeto no GitHub

No GitHub, guarda o seu projeto online. Assim, tem uma cópia de segurança e pode continuar a trabalhar nele noutro computador.

Ligar o GitHub

Cada pessoa liga a sua própria conta do GitHub. Ainda não tens conta? Cria primeiro uma gratuita em github.com/signup.

1. Vá a Configurações e, em Estado do desktop, procure o painel GitHub.
2. Clique em Ligar GitHub. A aplicação mostra um código e abre github.com/login/device no navegador.
3. Introduza o código no GitHub (com Copiar código copia-o) e dê autorização. Se a página não abrir, clique em Abrir GitHub.
4. O painel mostra agora Ligado como @o-seu-nome.

O que o GitHub pede. O GitHub mostra a aplicação AI-School Desktop da HandiHow-B-V e pede acesso aos teus repositórios (repo): leitura e escrita, também em repositórios privados. Este acesso é necessário para criar e atualizar o teu projeto. Só autorizes se a página estiver em github.com.

Código expirado? O código é válido durante cerca de 15 minutos. Se expirou, clica de novo em Ligar GitHub.

Repositórios de uma organização:

• Se a organização restringir aplicações de terceiros, clica em Request (pedir acesso) ao lado da organização no ecrã de autorização. Também o podes fazer mais tarde em github.com/settings/applications > AI-School Desktop.
• Um proprietário da organização aprova-o em Settings > Third-party access > OAuth application policy da organização.
• Sem essa aprovação, os teus repositórios funcionam, mas os da organização não.

Usar outra conta? Clica em Desligar e termina a sessão do github.com no navegador (ou usa uma janela privada) antes de voltar a ligar. Caso contrário, o GitHub usa a conta com que já tens sessão iniciada.

observação

As versões antigas da aplicação mostram «O início de sessão com GitHub ainda não está disponível nesta versão da aplicação.» Nesse caso, atualiza a aplicação.

Publicar online e atualizar

Depois, peça por exemplo:

Coloca este projeto no GitHub.

O assistente mostra um cartão com o endereço exato e as etiquetas Integrado na aplicação e Rede ativa. Clique em Executar para continuar ou em Recusar para parar. Um novo repositório é privado, a menos que peça um público. Se o endereço não for github.com ou se o repositório ficar público, o cartão avisa. Ao publicar online, vê que arquivos são enviados.

Mais tarde, pode usar por exemplo:

• "Publica a nova versão online." O assistente envia as suas novas versões para o GitHub.
• "Obtém a versão mais recente." O assistente obtém as alterações do GitHub.
• "Transfere o projeto https://github.com/nome/projeto para esta pasta." O assistente transfere um projeto existente.

Um projeto público também pode ser transferido sem ligação. Para publicar online e criar um novo repositório, é necessária a ligação.

6. Dicas de segurança

• Os novos repositórios são privados. Torne um repositório público apenas se todos puderem ver o código.
• Nunca coloque palavras-passe, chaves ou outros segredos na sua aplicação.
• Usa uma chave de API da Google (começa por AIza, como a chave web de uma aplicação Firebase)? Coloque-a num arquivo que o assistente mantém fora das versões, como .env. Se a chave ficar no código, esse arquivo não é publicado online.
• Verifique sempre o endereço no cartão antes de clicar em Executar.
• A ligação é guardada de forma encriptada na sua conta de utilizador neste computador. O assistente nunca vê a sua chave do GitHub. Se trabalhar num computador partilhado, clique em Desligar no fim.
• Desligar remove a ligação apenas deste computador. Para revogar totalmente o acesso, faça-o no GitHub em Settings > Applications.