Dados e CMS

O painel Dados reúne o conteúdo e os dados do seu site. Abra-o pelo ícone Dados na barra lateral esquerda. Ele tem duas abas:

• Conteúdo: coleções armazenadas no código do seu site. Todo site já vem com elas, sem precisar configurar nada. Use para conteúdos que você edita, como cardápios, membros da equipe, perguntas frequentes ou posts de blog.
• Fonte de dados: tabelas de um banco de dados ou de uma planilha que você conecta. Use quando seu site precisar salvar o que os visitantes enviam, como cadastros, pedidos, reservas ou contas de usuário. Após a conexão, a aba mostra o nome da fonte.

Dica

Se o conteúdo estiver escrito diretamente em uma página, peça à IA para movê-lo para uma coleção: "mova meu cardápio para uma coleção para eu poder editá-lo".

Coleções de conteúdo

Cada coleção é um arquivo na pasta src/data do seu site. As alterações aparecem na pré-visualização imediatamente e chegam ao site no ar quando você publica.

Criar uma coleção

Clique em + no topo do painel, digite um nome e clique em Criar. A janela mostra o arquivo que será criado, como /src/data/blog.ts.

Uma nova coleção começa vazia. Clique em Adicionar campo para definir o que ela armazena (veja Campos e colunas).

Renomear, duplicar ou excluir

Passe o mouse sobre uma coleção e clique em ⋯, ou clique nela com o botão direito. Depois, escolha Renomear, Duplicar ou Excluir. Você também pode clicar duas vezes em um nome para renomeá-lo. Renomear atualiza todos os arquivos do site que usam a coleção. A exclusão não pode ser desfeita.

Quando você tiver mais de cinco coleções, uma caixa Filtrar coleções aparecerá acima da lista.

Conectar uma fonte de dados

Um site usa uma fonte de dados por vez. Clique na aba Fonte de dados e escolha uma.

Fonte	Ideal para
WebTwizz Cloud (Recomendado)	Um banco de dados com login e armazenamento de arquivos, adicionado para você. Não precisa de conta
Supabase	Banco de dados, login e armazenamento de arquivos na sua própria conta do Supabase
Postgres	Railway, RDS ou qualquer Postgres que você já use
MySQL	Railway, RDS ou qualquer banco de dados MySQL que você já use
MongoDB	Um cluster do Atlas ou qualquer instalação do MongoDB
Google Sheets	Cardápios, listas de preços, horários ou qualquer tabela que você já mantenha em uma planilha

Cada fonte salva seus dados de conexão como segredos em Configurações > Segredos, na seção De serviços conectados.

Supabase e Google Sheets também são conectores. Após a conexão, sua conta fica salva para os outros projetos, e Configurações > Conectores mostra as tabelas, configurações de login ou abas da planilha do projeto. Veja Supabase e Google Sheets.

WebTwizz Cloud

Escolha WebTwizz Cloud e clique em Adicionar banco de dados. Para compartilhar dados com outro site seu, selecione na lista o banco de dados que esse site usa. Veja WebTwizz Cloud para saber sobre limites, compartilhamento e troca de banco.

Na maioria das vezes, você não precisa fazer isso: a IA adiciona o WebTwizz Cloud assim que seu site precisa dele.

Supabase

1. Escolha Supabase e clique em Conectar com o Supabase.
2. Entre no Supabase e autorize o acesso. Você voltará à mesma janela.
3. Selecione um projeto na lista ou escolha + Criar novo projeto.
4. Clique em Conectar.

• Se sua conta do Supabase já estiver vinculada, você vai direto para a lista de projetos.
• + Criar novo projeto cria um projeto na sua primeira organização do Supabase e o conecta. É preciso entrar por Conectar com o Supabase, e o processo leva cerca de dois minutos. Mantenha a janela aberta.
• Não é possível conectar um projeto pausado. Restaure-o primeiro no painel do Supabase.
• Prefere usar um token? Clique em Colar um access token, gere um em supabase.com/dashboard/account/tokens, cole-o e clique em Próximo.
• Desconectar conta do Supabase, abaixo da lista de projetos, desvincula sua conta do Supabase do WebTwizz para você poder entrar com outra.

O Supabase adiciona NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, SUPABASE_SERVICE_ROLE_KEY e SUPABASE_ACCESS_TOKEN.

Postgres e MySQL

1. Escolha Postgres ou MySQL.
2. Cole sua String de conexão. Ela começa com postgres:// ou postgresql:// para Postgres, e mysql:// para MySQL.
3. O WebTwizz testa a conexão enquanto você digita e mostra Conectado quando funciona, ou o motivo da falha.
4. Clique em Conectar.

Não tem uma string de conexão? Clique em Sem string de conexão? Insira host, usuário e senha separadamente e preencha Host, Banco de dados, Porta, Usuário e Senha.

• Postgres: use uma string de conexão com pool se o seu provedor oferecer essa opção.
• MySQL: use um usuário com permissão para criar e alterar tabelas. O WebTwizz precisa do MySQL 8.0.13 ou mais recente.

A conexão é salva como DATABASE_URL.

MongoDB

Escolha MongoDB e cole sua String de conexão (mongodb:// ou mongodb+srv://). O WebTwizz testa enquanto você digita, como no Postgres. Quando aparecer Conectado, clique em Conectar. No Atlas, você encontra a string em Banco de dados > Conectar > Drivers.

A string deve incluir o nome do banco de dados, como mongodb+srv://user:pass@cluster.mongodb.net/mydb. Ela é salva como MONGODB_URI.

Google Sheets

1. Escolha Google Sheets e clique em Continuar com o Google.
2. Entre na sua conta e permita o acesso.
3. Escolha uma planilha.

Somente a planilha escolhida é compartilhada com o WebTwizz, e ela continua privada. Cada aba aparece como uma tabela, e a primeira linha da aba contém os nomes das colunas.

Pelo chat

Quando você pede à IA algo que salva dados, ela adiciona o WebTwizz Cloud e continua criando. Ela mostra um cartão Conectar uma fonte de dados quando seu site já usa outra fonte ou quando você já usou todos os bancos de dados do seu plano. Clicar no cartão abre a mesma janela dentro do chat, começando pelo WebTwizz Cloud. Clique em Todas as origens para escolher outra. Clique em Criar primeiro com dados de exemplo (ou Agora não) para conectar depois.

Trocar ou desconectar

Clique em ⋯ na aba da fonte de dados ou clique na aba com o botão direito. O menu mostra o que está conectado, além de Trocar fonte de dados, Abrir painel do Supabase (somente para Supabase) e Desconectar.

• Conectar outra fonte substitui a atual. Seus dados continuam onde estão, mas o site deixa de usá-los. Se o site tiver usuários, a janela informa quantos precisarão se cadastrar novamente.
• Após a troca, o painel Dados oferece Atualizar meu site para usar isso, que pede à IA para adaptar suas páginas à nova fonte.
• Desconectar pede confirmação. Seu site deixa de ler e gravar dados nessa fonte. Nada é excluído no provedor.
• Não há um botão para reconectar. Se uma fonte parar de funcionar, por exemplo, após você mudar a senha, desconecte e conecte novamente.

Tabelas, coleções e abas

Depois de conectar uma fonte, a lista à esquerda mostra suas tabelas. O MongoDB as chama de coleções, e o Google Sheets, de abas. O painel usa os mesmos termos.

• Clique em + para criar uma. A janela mostra o nome final antes da criação.
• Passe o mouse sobre uma delas e clique em ⋯, ou clique com o botão direito, para acessar Renomear, Duplicar e Excluir. A exclusão remove a tabela e todos os seus dados da fonte e não pode ser desfeita.
• No Supabase, Postgres e MySQL, os nomes ficam em letras minúsculas com sublinhados, então "Blog posts" vira blog_posts. MongoDB e Google Sheets mantêm o nome como você digitou.

Com Supabase ou WebTwizz Cloud, a lista também mostra Usuários: todas as pessoas que se cadastraram pelo login do seu site. No Supabase, eles são somente leitura aqui. No WebTwizz Cloud, você também pode enviar uma redefinição de senha, bloquear ou excluir alguém e exportar a lista.

Com o WebTwizz Cloud, a lista também mostra Arquivos: os buckets e as pastas que armazenam os arquivos enviados pelas pessoas no seu site. Ali, você pode enviar, pré-visualizar, mover, renomear e excluir arquivos, copiar seus links e criar buckets e pastas. Veja Arquivos.

Consultar seus dados

Com WebTwizz Cloud, Supabase, Postgres, MySQL ou MongoDB, clique em Consulta acima da grade. Um painel se abre de baixo para cima, já preenchido com uma consulta para a tabela em que você está.

• Pergunte sobre seus dados: digite uma pergunta, como "pais que escolheram Splash neste mês", e clique em Perguntar. A IA escreve a consulta, executa e mostra a resposta, com a consulta acima.
• Escreva uma consulta: digite SQL e clique em Executar, ou pressione Cmd+Enter. No MongoDB, escreva em JSON, como {"collection": "orders", "filter": {"status": "paid"}}, ou use "pipeline" para uma agregação.
• Até 500 resultados em 10 segundos. Navegue pelas páginas na parte inferior ou clique em Exportar para baixar os resultados como CSV ou JSON. As consultas que você escreve para ler ou adicionar dados são executadas na hora. Qualquer operação que exclua ou altere linhas, remova uma tabela ou renomeie uma coluna pede confirmação antes. Quando você usa Perguntar, a consulta da IA também pede confirmação antes de adicionar linhas. No WebTwizz Cloud, Restaurar dados pode recuperar seus dados se uma alteração der errado. Em outras fontes, a alteração não pode ser desfeita.
• Ajuste o espaço: arraste a barra no topo do painel para aumentar ou diminuir a altura, ou clique duas vezes nela para ocupar a tela toda. Arraste a linha abaixo da consulta para dar mais linhas a ela. Pressione Esc ou arraste o painel até o fim para baixo para fechá-lo.

Trabalhar na grade

As duas abas usam a mesma grade:

• Digite na caixa de busca para filtrar as linhas.
• Clique no cabeçalho de uma coluna para ordenar de forma crescente, novamente para decrescente e uma terceira vez para remover a ordenação.
• Use os controles na parte inferior para mudar de página ou alterar o número de linhas por página.
• Clique em uma linha para editá-la. Clique em ⋯ no fim da linha, ou clique nela com o botão direito, para acessar Editar, Duplicar e Excluir.
• Clique em Novo item, ou em + abaixo da última linha, para adicionar um item.

As grades de fontes de dados também têm um botão de atualização. A grade é atualizada automaticamente quando a IA altera seus dados.

Campos e colunas

Campos de conteúdo

Clique em Adicionar campo, preencha Nome do campo, escolha um Tipo, marque Obrigatório e defina um Valor padrão se quiser. Depois, clique em Criar campo.

Tipos de campo: Texto, Área de texto, Número, Data, Data e hora, Booleano, Cor, Link, E-mail, Telefone, Imagem, Áudio e Vídeo.

Clique com o botão direito no cabeçalho de uma coluna para Editar, Duplicar ou Excluir o campo. Excluir um campo remove seu valor de todos os itens.

Colunas da fonte de dados

Clique em Adicionar coluna, preencha Nome da coluna, escolha um Tipo, defina um Valor padrão se quiser e clique em Criar coluna.

• Supabase, Postgres e MySQL: os tipos são Texto, Inteiro pequeno, Inteiro, Inteiro grande, Numérico (decimal), Ponto flutuante, Data, Hora, Data e hora, Booleano, UUID e JSON. Marque Obrigatório (NOT NULL) para exigir um valor. Os nomes usam letras minúsculas, números e sublinhados, e começam com uma letra. As colunas de Data e Data e hora podem ter como padrão Usar a data atual ou Usar a hora atual.
• Google Sheets: uma coluna é uma célula de cabeçalho na primeira linha da aba. Os tipos são Texto, Número, Data, Data e hora e Caixa de seleção. Os nomes podem ter espaços e letras maiúsculas.
• MongoDB: não há Adicionar coluna. Os documentos podem ter campos diferentes, e um campo que você adiciona a um documento aparece como coluna.

Clique com o botão direito no cabeçalho de uma coluna para Editar (renomear), Duplicar ou Excluir. A coluna id não pode ser alterada.

Editar uma linha

Clique em uma linha ou em Novo item, e o painel Editar item ou Novo item se abre pela lateral com um campo para cada coluna. Os campos obrigatórios são marcados com *.

• Clique em Salvar ou pressione Enter para salvar. Pressione Escape ou clique em Cancelar para fechar sem salvar.
• Nos campos de texto de uma fonte de dados, Shift+Enter adiciona uma nova linha.
• Nas coleções de Conteúdo, os campos de imagem abrem o mesmo seletor de imagens usado no restante do editor.
• Para excluir a linha, clique em Excluir na parte inferior do painel e confirme.
• Se o banco de dados rejeitar uma alteração, o painel explica o motivo em linguagem simples.
• MongoDB: use os dois ícones no topo do painel, Campos e JSON bruto, para alternar para a edição do documento inteiro como JSON. Em uma coleção vazia, clique em Escreva em JSON para adicionar seu primeiro documento.

As linhas que você salva em uma fonte de dados são gravadas diretamente no banco de dados.

Selecionar e agir em várias linhas

Marque as caixas de seleção ao lado das linhas para selecioná-las. A caixa no cabeçalho seleciona todas as linhas da página. Quando uma página inteira estiver selecionada e houver mais linhas correspondentes, clique em Selecionar tudo (que mostra o número de linhas correspondentes) para selecioná-las em todas as páginas, ou em Limpar para desfazer a seleção.

A barra de seleção tem os botões Duplicar e Excluir.

• As ações afetam apenas as linhas que correspondem à sua busca. Se você buscar "latte", selecionar tudo e excluir, somente as linhas correspondentes a "latte" serão removidas. A confirmação informa isso.
• Alterar a busca limpa a seleção.
• A exclusão sempre pede confirmação. Em uma fonte de dados, duplicar todas as linhas também pede confirmação.
• Algumas tabelas de banco de dados não podem ser duplicadas, como uma tabela cujo id precisa corresponder a uma linha em outra tabela, como uma conta de usuário. A opção Duplicar fica desativada nesses casos, e passar o mouse sobre ela mostra o motivo.

Exportar

Clique em Exportar acima da grade e escolha Exportar como CSV ou Exportar como JSON para baixar tudo da coleção ou tabela, até 50.000 linhas. Funciona com todas as fontes de dados.

Deixar a IA trabalhar com seus dados

Depois de conectar uma fonte de dados, a IA cria seu site usando essa fonte e pode alterá-la para você. Peça com suas próprias palavras: "adicione uma tabela de reservas com nome, e-mail e data" ou "adicione estes 20 produtos à minha tabela de produtos".

Cada alteração aparece como um cartão no chat, como Tabela criada ou Dados adicionados, e a grade é atualizada. Antes de qualquer ação que remova dados permanentemente, como excluir linhas ou remover uma tabela, a IA para e pede confirmação. Clique em Aceitar para continuar ou em Recusar para cancelar.

Diferenças entre as fontes

	Supabase	Postgres e MySQL	MongoDB	Google Sheets
Listados como	Tabelas	Tabelas	Coleções	Abas
Nomes	minúsculas_com_sublinhados	minúsculas_com_sublinhados	Como digitados	Como digitados
Adicionar colunas	Sim	Sim	Não, os campos vêm dos documentos	Sim, como células de cabeçalho
Também tem	Usuários, Abrir painel do Supabase		Edição de JSON bruto
Salvo como	Quatro segredos SUPABASE	DATABASE_URL	MONGODB_URI	GOOGLE_SHEETS_REFRESH_TOKEN