Pular para o conteúdo principal
A aba Code permite que você veja e edite o código-fonte do seu app diretamente, dando controle sobre a funcionalidade, design e comportamento do app enquanto vê as mudanças imediatamente.
A aba Code é para desenvolvedores que querem mais controle. Para mudanças mais simples, use o editor visual e as ferramentas de IA da Base44.
A interface da aba Code mostrando o código-fonte do seu app

​
Acessar a aba Code

Para abrir a aba Code:
  1. Vá para o dashboard do seu app.
  2. Clique na aba Code.
A aba Code exibe os arquivos do seu projeto em um explorador de arquivos à esquerda, com o editor de código ocupando o espaço principal.
Acessando a aba Code pelo dashboard do app
Use o recurso Files used in this page para ver quais arquivos alimentam a página que você está visualizando. Isso mostra exatamente quais arquivos de código estão rodando, então você sabe onde ir quando quiser editar a página ou investigar um problema. Cada entrada da lista mostra o nome do arquivo e seu caminho de pasta, agrupados pelo local no seu projeto, como pages ou components. Para visualizar os arquivos usados em uma página:
  1. Vá para o editor do seu app.
  2. Clique no ícone More Actions no canto superior direito.
  3. Clique em Files used in this page.
Visualizando arquivos usados em uma página do seu app
Se quiser passar desta visão focada para a estrutura completa de arquivos, clique em See all files. Isso leva você para a visualização completa de arquivos de código para que possa continuar explorando a partir daí.

​
Editar com preview ao vivo

A aba Code oferece uma visualização em tela dividida que mostra seu código de um lado e um preview ao vivo do seu app do outro. Isso permite ver as mudanças instantaneamente sem trocar de contexto.
Visualização em tela dividida mostrando código e preview ao vivo
Para editar com preview ao vivo:
  1. Abra um arquivo na aba Code.
  2. Clique no botão de tela dividida no canto superior direito.
  3. Edite seu código à esquerda e veja as mudanças à direita.
Cada vez que você faz mudanças no código:
  • Clique em Save na parte inferior da tela para aplicar suas mudanças e atualizar o preview com o código mais recente.
  • Clique em Discard na parte inferior da tela se quiser descartar todas as edições não salvas e retornar à última versão salva do arquivo.
Importante: Se você fizer mudanças no código do seu app, certifique-se de clicar em Publish para que elas entrem em produção no seu app.
Quando estiver pronto para sair da tela dividida, clique em Exit split. Para desenvolvimento local com sua própria IDE, veja GitHub Integration.

​
Revisar mudanças de código da IA

Quando a IA edita seu app, você pode abrir o modal Code changes para ver exatamente o que foi alterado antes de publicar. O modal mostra cada arquivo que a IA tocou, agrupado por pasta, com uma visualização de diff para cada um. Para abrir o modal Code changes:
  1. Vá para o chat de IA no editor do seu app.
  2. Passe o mouse sobre uma mensagem em que a IA editou ou criou um arquivo.
  3. Clique no ícone de três pontos ao lado dessa mudança e selecione View Changes.
Um modal abre com uma árvore de arquivos à esquerda e o diff do arquivo selecionado à direita. Uma barra de estatísticas na parte superior mostra quantos arquivos foram adicionados, modificados e excluídos. Os arquivos na árvore são codificados por cor de acordo com o estado:
  • Verde para arquivos recém-adicionados.
  • Âmbar para arquivos modificados, que abrem em uma visualização de diff lado a lado.
  • Vermelho para arquivos excluídos.
Clique em qualquer arquivo na árvore para ir direto ao diff.

​
Perguntas frequentes

Sim. Você pode abrir e editar qualquer arquivo de código que apareça no painel de arquivos de código, incluindo pages, components, layouts e helpers de entidade. Se uma parte do app for gerada para você, ela ainda aparece como código normal que você pode modificar.
Não. Você pode trabalhar no editor de código em largura total se preferir mais espaço. A tela dividida é útil quando você quer ver o preview ao lado do código, mas pode desligá-la a qualquer momento e reabri-la depois.
Discard remove todas as mudanças não salvas no arquivo ativo e restaura a última versão salva. Isso é útil se você tentar algo que não funciona e quer voltar rapidamente. Depois de clicar em Discard, você não consegue recuperar o código não salvo daquela sessão.
Você não precisa ser um expert, mas familiaridade básica com React e JSX ajuda. Você pode começar com pequenas mudanças, como atualizar texto, trocar componentes ou alterar estilos simples, e então passar para lógica mais avançada conforme ganha confiança
Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.