Datos y CMS

El panel Datos contiene el contenido y los datos de tu sitio web. Ábrelo con el icono Datos de la barra lateral izquierda. Tiene dos pestañas:

• Contenido: colecciones guardadas en el código de tu sitio web. Todos los sitios web las tienen, sin necesidad de configurar nada. Úsalas para contenido que editas tú, como menús, miembros del equipo, preguntas frecuentes o publicaciones de blog.
• Origen de datos: tablas de una base de datos o una hoja de cálculo que conectes. Úsalo cuando tu sitio web necesite guardar lo que envían los visitantes, como registros, pedidos, reservas o cuentas de usuario. Una vez conectado, la pestaña muestra el nombre del origen.

Consejo

Si tu contenido está escrito directamente en una página, pídele a la IA que lo mueva a una colección: "mueve mi menú a una colección para que pueda editarlo yo".

Colecciones de contenido

Cada colección es un archivo de la carpeta src/data de tu sitio web. Los cambios aparecen de inmediato en la vista previa y llegan al sitio web público cuando publicas.

Crear una colección

Haz clic en + en la parte superior del panel, escribe un nombre y haz clic en Crear. La ventana muestra el archivo que se creará, como /src/data/blog.ts.

Una colección nueva empieza vacía. Haz clic en Añadir campo para decidir qué guarda (consulta Campos y columnas).

Cambiar nombre, duplicar o eliminar

Pasa el cursor sobre una colección y haz clic en ⋯, o haz clic derecho sobre ella. Luego elige Cambiar nombre, Duplicar o Eliminar. También puedes hacer doble clic en un nombre para cambiarlo. Al cambiar el nombre, se actualizan todos los archivos de tu sitio web que usan la colección. La eliminación no se puede deshacer.

Cuando tienes más de cinco colecciones, aparece un campo Filtrar colecciones encima de la lista.

Conectar un origen de datos

Un sitio web tiene un solo origen de datos a la vez. Haz clic en la pestaña Origen de datos y elige uno.

Origen	Útil para
WebTwizz Cloud (recomendado)	Una base de datos con inicio de sesión y almacenamiento de archivos, añadida por ti. No necesitas una cuenta
Supabase	Base de datos, inicio de sesión y almacenamiento de archivos en tu propia cuenta de Supabase
Postgres	Railway, RDS o cualquier Postgres que ya uses
MySQL	Railway, RDS o cualquier base de datos MySQL que ya uses
MongoDB	Un clúster de Atlas o cualquier implementación de MongoDB
Google Sheets	Menús, listas de precios, horarios o cualquier tabla que ya tengas en una hoja de cálculo

Cada origen guarda sus datos de conexión como secretos en Configuración > Secretos, bajo De servicios conectados.

Supabase y Google Sheets también son conectores. Una vez conectados, tu cuenta queda guardada para tus otros proyectos, y Configuración > Conectores muestra las tablas, la configuración de inicio de sesión o las pestañas de la hoja de cálculo del proyecto. Consulta Supabase y Google Sheets.

WebTwizz Cloud

Elige WebTwizz Cloud y haz clic en Añadir base de datos. Para compartir datos con otro de tus sitios web, elige en la lista la base de datos que usa ese sitio. Consulta WebTwizz Cloud para conocer los límites y cómo compartir o cambiar de base de datos.

Normalmente no necesitas hacerlo: la IA añade WebTwizz Cloud en cuanto tu sitio web lo necesita.

Supabase

1. Elige Supabase y haz clic en Conectar con Supabase.
2. Inicia sesión en Supabase y autoriza el acceso. Volverás a la misma ventana.
3. Elige un proyecto de la lista o selecciona + Crear proyecto nuevo.
4. Haz clic en Conectar.

• Si tu cuenta de Supabase ya está vinculada, irás directamente a la lista de proyectos.
• + Crear proyecto nuevo crea un proyecto en tu primera organización de Supabase y lo conecta. Requiere iniciar sesión con Conectar con Supabase y tarda unos dos minutos, así que mantén la ventana abierta.
• No se puede conectar un proyecto en pausa. Restáuralo primero en tu panel de Supabase.
• ¿Prefieres usar un token? Haz clic en Pegar un token de acceso, genera uno en supabase.com/dashboard/account/tokens, pégalo y haz clic en Siguiente.
• Desconectar cuenta de Supabase, debajo de la lista de proyectos, desvincula tu cuenta de Supabase de WebTwizz para que puedas iniciar sesión con otra.

Supabase añade NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, SUPABASE_SERVICE_ROLE_KEY y SUPABASE_ACCESS_TOKEN.

Postgres y MySQL

1. Elige Postgres o MySQL.
2. Pega tu Cadena de conexión. Empieza por postgres:// o postgresql:// para Postgres, y por mysql:// para MySQL.
3. WebTwizz prueba la conexión mientras escribes y muestra Conectado si funciona, o el motivo del fallo.
4. Haz clic en Conectar.

¿No tienes una cadena de conexión? Haz clic en ¿No tienes una cadena de conexión? Introduce el host, el usuario y la contraseña por separado y completa Host, Base de datos, Puerto, Usuario y Contraseña.

• Postgres: usa una cadena de conexión con agrupación de conexiones si tu proveedor la ofrece.
• MySQL: usa un usuario que pueda crear y modificar tablas. WebTwizz necesita MySQL 8.0.13 o posterior.

La conexión se guarda como DATABASE_URL.

MongoDB

Elige MongoDB y pega tu Cadena de conexión (mongodb:// o mongodb+srv://). WebTwizz la prueba mientras escribes, como con Postgres. Cuando aparezca Conectado, haz clic en Conectar. En Atlas, encontrarás la cadena en Base de datos > Conectar > Controladores.

La cadena debe incluir el nombre de tu base de datos, como mongodb+srv://user:pass@cluster.mongodb.net/mydb. Se guarda como MONGODB_URI.

Google Sheets

1. Elige Google Sheets y haz clic en Continuar con Google.
2. Inicia sesión y permite el acceso.
3. Elige una hoja de cálculo.

Solo se comparte con WebTwizz la hoja de cálculo que elijas, y sigue siendo privada. Cada pestaña aparece como una tabla, y su primera fila contiene los nombres de las columnas.

Desde el chat

Cuando le pides a la IA algo que guarda datos, añade WebTwizz Cloud y sigue creando. En cambio, muestra una tarjeta Conectar un origen de datos si tu sitio web ya usa otro origen o si ya usaste todas las bases de datos de tu plan. Al hacer clic en la tarjeta, se abre la misma ventana dentro del chat, empezando por WebTwizz Cloud. Haz clic en Todas las fuentes para elegir otra. Haz clic en Crear primero con datos de ejemplo (o Ahora no) para conectarlo después.

Cambiar o desconectar

Haz clic en ⋯ en la pestaña del origen de datos, o haz clic derecho en ella. El menú muestra qué está conectado, además de Cambiar origen de datos, Abrir el panel de Supabase (solo para Supabase) y Desconectar.

• Conectar otro origen reemplaza el actual. Tus datos siguen donde están, pero tu sitio web deja de usarlos. Si el sitio tiene usuarios, la ventana indica cuántos tendrán que registrarse de nuevo.
• Después de un cambio, el panel Datos ofrece Actualizar mi sitio web para usarlo, que le pide a la IA que adapte tus páginas al nuevo origen.
• Desconectar te pide confirmación. Tu sitio web deja de leer y escribir a través de ese origen. No se elimina nada del lado del proveedor.
• No hay un botón para reconectar. Si un origen deja de funcionar, por ejemplo, después de cambiar su contraseña, desconéctalo y vuelve a conectarlo.

Tablas, colecciones y pestañas

Una vez conectado un origen, la lista de la izquierda muestra sus tablas. MongoDB las llama colecciones y Google Sheets las llama pestañas. El panel usa esos mismos nombres.

• Haz clic en + para crear una. La ventana muestra el nombre final antes de crearla.
• Pasa el cursor sobre una y haz clic en ⋯, o haz clic derecho sobre ella, para acceder a Cambiar nombre, Duplicar y Eliminar. Al eliminarla, se borran la tabla y todos sus datos del origen. No se puede deshacer.
• Los nombres de Supabase, Postgres y MySQL pasan a minúsculas con guiones bajos, por lo que "Blog posts" se convierte en blog_posts. MongoDB y Google Sheets conservan el nombre tal como lo escribes.

Con Supabase o WebTwizz Cloud, la lista también muestra Usuarios: todas las personas que se registraron a través del inicio de sesión de tu sitio web. Con Supabase, aquí son de solo lectura. Con WebTwizz Cloud, también puedes enviar un mensaje para restablecer la contraseña, bloquear a alguien, eliminarlo o exportar la lista.

Con WebTwizz Cloud, la lista también muestra Archivos: los buckets y las carpetas que contienen lo que las personas suben a tu sitio web. Allí puedes subir, previsualizar, mover, cambiar el nombre y eliminar archivos, copiar sus enlaces y crear buckets y carpetas. Consulta Archivos.

Consultar tus datos

Con WebTwizz Cloud, Supabase, Postgres, MySQL o MongoDB, haz clic en Consulta encima de la cuadrícula. Se abre un panel desde abajo, con una consulta ya preparada para la tabla en la que estás.

• Pregunta sobre tus datos: escribe una pregunta, como "padres que eligieron Splash este mes", y haz clic en Preguntar. La IA escribe la consulta, la ejecuta y muestra la respuesta, con la consulta encima.
• Escribe una consulta: escribe SQL y haz clic en Ejecutar, o presiona Cmd+Enter. Con MongoDB, escríbela como JSON, por ejemplo {"collection": "orders", "filter": {"status": "paid"}}, o usa "pipeline" para una agregación.
• Hasta 500 resultados en 10 segundos. Usa los controles de abajo para recorrer las páginas, o haz clic en Exportar para descargarlos como CSV o JSON. Las consultas que escribes para leer o añadir datos se ejecutan de inmediato. Cualquier acción que elimine o modifique filas, elimine una tabla o cambie el nombre de una columna pide confirmación primero. Cuando usas Preguntar, la consulta de la IA también pide confirmación antes de añadir filas. En WebTwizz Cloud, Restaurar datos puede recuperar tus datos si un cambio sale mal. Con otros orígenes, no se puede deshacer.
• Ajusta el espacio: arrastra la barra de la parte superior del panel para hacerlo más alto o más bajo, o haz doble clic en ella para que ocupe toda la pantalla. Arrastra la línea debajo de la consulta para darle más líneas. Presiona Esc, o arrastra el panel hasta abajo, para cerrarlo.

Trabajar en la cuadrícula

Ambas pestañas usan la misma cuadrícula:

• Escribe en el campo de búsqueda para filtrar filas.
• Haz clic en el encabezado de una columna para ordenar de forma ascendente, otra vez para ordenar de forma descendente y una tercera vez para quitar el orden.
• Usa los controles de abajo para cambiar de página o el número de filas por página.
• Haz clic en una fila para editarla. Haz clic en ⋯ al final de una fila, o haz clic derecho sobre ella, para acceder a Editar, Duplicar y Eliminar.
• Haz clic en Elemento nuevo, o en + debajo de la última fila, para añadir uno.

Las cuadrículas de los orígenes de datos también tienen un botón para actualizar. La cuadrícula se actualiza sola cuando la IA cambia tus datos.

Campos y columnas

Campos de contenido

Haz clic en Añadir campo, completa Nombre del campo, elige un Tipo, marca Obligatorio si quieres y establece un Valor predeterminado. Luego haz clic en Crear campo.

Tipos de campo: Texto, Área de texto, Número, Fecha, Fecha y hora, Booleano, Color, Enlace, Correo electrónico, Teléfono, Imagen, Audio y Video.

Haz clic derecho en el encabezado de una columna para Editar, Duplicar o Eliminar el campo. Al eliminar un campo, se borra su valor de todos los elementos.

Columnas de los orígenes de datos

Haz clic en Añadir columna, completa Nombre de la columna, elige un Tipo y establece un Valor predeterminado si lo deseas. Luego haz clic en Crear columna.

• Supabase, Postgres y MySQL: los tipos son Texto, Entero pequeño, Entero, Entero grande, Numérico (decimal), Coma flotante, Fecha, Hora, Marca de tiempo, Booleano, UUID y JSON. Marca Obligatorio (NOT NULL) para exigir un valor. Los nombres usan letras minúsculas, números y guiones bajos, y empiezan por una letra. Las columnas de fecha y marca de tiempo pueden tener como valor predeterminado Usar la fecha actual o Usar la hora actual.
• Google Sheets: una columna es una celda de encabezado en la primera fila de la pestaña. Los tipos son Texto, Número, Fecha, Fecha y hora y Casilla de verificación. Los nombres pueden tener espacios y mayúsculas.
• MongoDB: no hay opción Añadir columna. Los documentos pueden contener campos distintos, y un campo que añades a un documento aparece como columna.

Haz clic derecho en el encabezado de una columna para Editar (cambiar el nombre), Duplicar o Eliminar. La columna id no se puede cambiar.

Editar una fila

Haz clic en una fila o en Elemento nuevo, y se abrirá desde un lado el panel Editar elemento o Elemento nuevo, con un campo por columna. Los campos obligatorios se marcan con *.

• Haz clic en Guardar o presiona Enter para guardar. Presiona Escape o haz clic en Cancelar para cerrar sin guardar.
• En los campos de texto de un origen de datos, Shift+Enter añade una nueva línea.
• En las colecciones de Contenido, los campos de imagen abren el mismo selector de imágenes que usas en el resto del editor.
• Para eliminar la fila, haz clic en Eliminar en la parte inferior del panel y confirma.
• Si tu base de datos rechaza un cambio, el panel explica el motivo con palabras sencillas.
• MongoDB: usa los dos iconos de la parte superior del panel, Campos y JSON sin procesar, para pasar a editar todo el documento como JSON. En una colección vacía, haz clic en Escríbelo como JSON para añadir tu primer documento.

Las filas que guardas en un origen de datos se escriben directamente en tu base de datos.

Seleccionar y actuar sobre varias filas

Marca las casillas junto a las filas para seleccionarlas. La casilla del encabezado selecciona todas las filas de la página. Cuando se selecciona una página entera y hay más filas que coinciden, haz clic en Seleccionar todo (muestra el número de filas que coinciden) para seleccionarlas en todas las páginas, o en Limpiar para deshacer la selección.

La barra de selección tiene los botones Duplicar y Eliminar.

• Las acciones solo afectan a las filas que coinciden con tu búsqueda. Si buscas "latte", seleccionas todo y eliminas, solo se borran las filas que coinciden con "latte". La confirmación lo indica.
• Cambiar la búsqueda borra la selección.
• Eliminar siempre pide confirmación. En un origen de datos, duplicar todas las filas también pide confirmación.
• Algunas tablas de bases de datos no se pueden duplicar, como una tabla cuyo id debe coincidir con una fila de otra tabla, por ejemplo, una cuenta de usuario. La opción Duplicar está desactivada en esos casos, y al pasar el cursor sobre ella se explica el motivo.

Exportar

Haz clic en Exportar encima de la cuadrícula y elige Exportar como CSV o Exportar como JSON para descargar todo el contenido de la colección o tabla, hasta 50,000 filas. Funciona con todos los orígenes de datos.

Dejar que la IA trabaje con tus datos

Una vez conectado un origen de datos, la IA crea tu sitio web usando ese origen y puede modificarlo por ti. Pídelo con tus propias palabras: "añade una tabla de reservas con nombre, correo electrónico y fecha" o "añade estos 20 productos a mi tabla de productos".

Cada cambio aparece como una tarjeta en el chat, como Creó la tabla o Se añadieron datos, y la cuadrícula se actualiza. Antes de cualquier acción que elimine datos de forma permanente, como borrar filas o eliminar una tabla, la IA se detiene y pregunta. Haz clic en Aceptar para continuar o en Rechazar para cancelar.

Diferencias entre los orígenes

	Supabase	Postgres y MySQL	MongoDB	Google Sheets
Aparecen como	Tablas	Tablas	Colecciones	Pestañas
Nombres	minúsculas_con_guiones_bajos	minúsculas_con_guiones_bajos	Tal como los escribes	Tal como los escribes
Añadir columnas	Sí	Sí	No, los campos vienen de los documentos	Sí, como celdas de encabezado
También incluye	Usuarios, Abrir el panel de Supabase		Edición de JSON sin procesar
Se guarda como	Cuatro secretos de SUPABASE	DATABASE_URL	MONGODB_URI	GOOGLE_SHEETS_REFRESH_TOKEN