Descripción general
App Builder sigue un flujo de trabajo de «Instrucción a aplicación». Tú describes lo que quieres y la IA crea la estructura, las páginas y la lógica de la aplicación. Después puedes ajustar cada detalle mediante el editor visual o el código.Crear una aplicación
Hay dos formas principales de crear una aplicación:- Desde una Base: En cualquier Base, haz clic en «Crear aplicación» para generar una aplicación enlazada a tus datos actuales.
- Desde el Chat: Abre el Chat de IA y di «Crea una aplicación de CRM para esta Tabla de clientes».
Interfaz del editor de aplicaciones
App Builder ofrece una interfaz doble tanto para usuarios sin conocimientos técnicos como para desarrolladores.1. Interfaz de chat (impulsada por IA)
El centro de control de tu aplicación.- Edición mediante lenguaje natural: Describe cambios como «Haz que el encabezado sea azul» o «Añade un formulario para enviar Registros nuevos».
- Enrutamiento automático: La IA entiende a qué componente o página te refieres y lo modifica directamente.
- Integraciones: Cuando la tarea de la aplicación necesita acceso a una cuenta externa, App Builder puede mostrar una tarjeta como Conectar Slack en el panel de chat. Haz clic en Conectar para autorizar mediante OAuth. Haz clic en Omitir para cancelar la autorización; la IA continuará con las partes que pueda completar sin esa conexión.
- Habilidades: Abre el menú + y elige Habilidades para administrar las habilidades de esta conversación de la aplicación. Las habilidades añadidas aquí solo están disponibles para la aplicación actual; también pueden usarse las que se comparten con la Base y el Espacio de la aplicación. Escribe
/en el cuadro de entrada para elegir una habilidad habilitada. - Administrar archivos: Abre + → Más → Administrar archivos para consultar los archivos del entorno aislado de la aplicación. Úsalo para obtener una vista previa de los archivos compatibles, descargar archivos generados o eliminar los archivos y carpetas que ya no necesites.
- Borrar conversación: Si la conversación actual se ha desviado, haz clic en Borrar chat en la esquina inferior derecha del panel para iniciar una sesión nueva. Esto borra el historial del chat de la conversación actual, pero no elimina la aplicación. La primera vez se muestra una confirmación, y puedes elegir que no vuelva a aparecer.
2. Panel de vista previa
- Vista previa y publicada: El panel tiene dos pestañas. Vista previa ejecuta la versión que estás creando, incluidos los cambios que aún no se han publicado. Publicada carga la aplicación publicada desde su dirección pública para que puedas comparar lo que ven los usuarios con aquello en lo que estás trabajando. Hasta que se publique la aplicación, Publicada muestra una indicación para publicarla. App Builder abre las aplicaciones publicadas en Publicada y las no publicadas en Vista previa; después recuerda la última pestaña que usaste con cada aplicación.
- Simulación multidispositivo: Usa el selector de la parte superior para alternar entre las Vistas Escritorio, Tableta y Móvil.
- Generación en directo: El panel de vista previa puede mostrar cómo toma forma la aplicación mientras App Builder la genera.
- Respuesta inmediata: Cuando App Builder termina un cambio, la vista previa se actualiza con la última versión guardada.
- Elige Seleccionar un elemento para editar y haz clic en un elemento de la vista previa. App Builder añade el elemento a la entrada del chat. Añade tu instrucción y envía el mensaje para que la IA pueda actualizar esa parte concreta de la aplicación.
- Elige Editar texto directamente, haz clic en un texto estático de la vista previa y escribe el contenido que lo sustituirá. Puedes editar más de un elemento de texto antes de hacer clic en Guardar. Haz clic en Descartar cambios para deshacer los cambios de texto pendientes.
Esc para salir de cualquiera de los modos.
3. Modo de desarrollador (editor de código)
Para una personalización ilimitada, tienes acceso directo al código.- Editor Monaco: Una experiencia similar a VS Code directamente en el navegador.
- Componentes de React: Edita el código React subyacente, las clases de Tailwind CSS y la lógica.
- Árbol de archivos: Navega por la estructura del proyecto.
Descargar código
Puedes descargar toda la aplicación como archivo ZIP en cualquier momento:- Cambia a la pestaña Código del editor.
- Haz clic en el menú
...de la barra de pestañas. - Selecciona Descargar código para guardar un archivo ZIP que incluya todos los archivos de origen.
.env en la raíz. Revísalo antes de compartir el ZIP.
Importar código
Puedes actualizar el código de la aplicación importando un archivo ZIP:- Cambia a la pestaña Código del editor.
- Haz clic en el menú
...de la barra de pestañas. - Selecciona Importar código y elige un archivo ZIP de hasta 20 MB.
- Incluye únicamente archivos de origen.
node_modules,.nexty otros artefactos de compilación se ignoran automáticamente. - El ZIP sustituye el proyecto existente. Los archivos que omitas se eliminan de la versión nueva.
- Si el ZIP contiene una carpeta contenedora, Teable elimina esa carpeta. Puedes comprimir directamente la carpeta de nivel superior del proyecto.
- El proyecto importado debe incluir
package.jsonen la raíz del proyecto. - Los archivos
.envsituados en la raíz del ZIP se importan en los Secretos de la aplicación. Las demás variantes.env*, como.env.local, se ignoran.
Secretos
Usa Secretos para las claves de API, credenciales y valores de configuración que la aplicación necesita durante la ejecución. En el panel de chat de App Builder, abre el menú + y elige Secretos.Administrar los archivos de la aplicación
App Builder almacena los archivos cargados, los resultados generados y los archivos de ejecución en el entorno aislado de la aplicación. En el panel de chat, abre + → Más → Administrar archivos para examinarlos. Los tipos de archivo compatibles se abren en una vista previa. También puedes descargar archivos o eliminar los archivos y carpetas que ya no necesites.Añadir funciones de IA a una aplicación
Añade IA cuando la aplicación necesite resumir Registros, clasificar solicitudes, redactar respuestas o responder preguntas de sus usuarios. Puedes indicar a App Builder lo que quieres, por ejemplo: «Añade un asistente de IA para responder incidencias de soporte» o «Resume cada envío de formulario». App Builder puede activar el Acceso a IA y añadir el código de la función.Sincronizar el código con GitHub
Conectar una cuenta y crear el repositorio
Primero, genera la aplicación al menos una vez. Mientras la aplicación no tenga código, el botón de GitHub muestra Genera primero la aplicación para conectar GitHub y no hace nada.Abrir el panel de GitHub
Conectar una cuenta
Elegir la cuenta
Asignar un nombre al repositorio
., - y _, hasta un máximo de 100 caracteres.Crear y vincular
main, junto con un archivo README que enlaza con la aplicación y explica cómo se mantienen sincronizados ambos elementos. No puedes vincular una aplicación con un repositorio que ya exista.
De forma predeterminada, las conexiones pertenecen a quien las creó. Para permitir que los colaboradores creen aplicaciones en la misma cuenta de organización, selecciona la conexión y activa Permitir que otros miembros usen esta conexión. Los demás miembros con acceso de edición a la aplicación podrán crear repositorios para sus propias aplicaciones en esa organización. Las conexiones personales no se pueden compartir porque GitHub exige la autorización del propietario de la cuenta para crear un repositorio.
Cómo funciona la sincronización
Resolver un conflicto
Teable nunca fuerza el envío a tu rama. Cuando los historiales divergen, coloca la última versión de la aplicación en una rama llamadateable-sync y marca el vínculo como Conflicto. Fusiona teable-sync en main desde GitHub; la fusión vuelve como una versión nueva de la aplicación y el vínculo regresa al estado Sincronizado. Mientras dure el conflicto, las versiones posteriores de la aplicación siguen avanzando la rama teable-sync, por lo que fusionarla siempre incorpora el trabajo más reciente.
Variables de entorno y desarrollo local
El repositorio solo contiene el código fuente. Teable nunca envía archivos cuyos nombres comiencen por.env: ni en la raíz del proyecto, ni en una subcarpeta ni en el historial de confirmaciones. Los valores de entorno residen en los Secretos de la aplicación y nunca entran en git. El archivo .gitignore del repositorio ya incluye .env*, por lo que un clon local no confirmará ninguno por accidente.
Para ejecutar la aplicación en tu propio equipo:
Clonar e instalar
pnpm install.Copiar las variables
.env situado en la raíz del proyecto.Iniciar la aplicación
pnpm dev..env confirmado en GitHub no crea ni actualiza ningún Secreto. Después de cambiar un secreto, vuelve a copiar las variables para actualizar tu archivo .env local.
Desvincular el repositorio
Haz clic en el icono de eliminación situado junto al nombre del repositorio y confirma. La sincronización se detiene, pero el repositorio y su código permanecen en GitHub. Si vuelves a vincular la misma aplicación más adelante, se creará un repositorio nuevo en lugar de reconectarla con el anterior.Publicación y gestión
Publicar la aplicación
Cuando la aplicación esté lista, haz clic en el botón Publicar (icono de flecha) de la esquina superior derecha.- URL pública: Teable genera una URL segura y de acceso público para tu aplicación.
- Dominio personalizado: Asocia tu propio dominio a la aplicación.
- Mostrar marca: Usa Mostrar marca en el menú Publicar para controlar si la aplicación publicada muestra el distintivo Creado con Teable. Si cambias este ajuste después de publicar, haz clic en Volver a implementar para aplicarlo.
- Retirar publicación: En una aplicación publicada, usa Retirar publicación en el menú de publicación para desactivar el enlace público.
- Cambios en la configuración de la aplicación: Cuando el menú de publicación muestre La configuración del entorno de ejecución ha cambiado. Vuelve a implementar para aplicarla a la aplicación publicada o El ajuste de marca ha cambiado. Vuelve a implementar para aplicarlo a la aplicación publicada, haz clic en Volver a implementar.
- Abrir la aplicación publicada: Una vez publicada la aplicación, el icono situado junto a Publicar abre la aplicación publicada en una pestaña nueva.
Retirar la publicación de una aplicación
Para retirar una aplicación publicada, abre el menú Publicar y haz clic en Retirar publicación. Después de confirmar, ya no se podrá acceder a la URL pública de la aplicación. Retirar la publicación no elimina la aplicación ni su historial de edición. Puedes seguir editándola y volver a publicarla más adelante.Dominios personalizados
app.yourdomain.com. Después de introducir el dominio, Teable muestra los registros DNS que debes añadir. Añade los registros mediante tu proveedor de DNS, espera a que se propaguen y verifica después el dominio en Teable.
También puedes usar un subdominio disponible de teable.app y editar el prefijo de teable.app, por ejemplo, your-name.teable.app.
Información personalizada del sitio
Usa Información personalizada del sitio en el menú Publicar para definir el icono de la pestaña del navegador, el título y la descripción de la página de la aplicación publicada. El cuadro de diálogo muestra una vista previa conjunta mientras los editas.Inicio de sesión en la aplicación
Haz clic en Añadir inicio de sesión en el encabezado de la aplicación para exigir que los visitantes inicien sesión antes de poder usarla. Una vez configurado, el botón cambia a Ajustes de inicio de sesión. Cuando habilitas el inicio de sesión:- Elige dónde se almacenarán los usuarios de la aplicación. Puedes crear una Tabla Usuarios o reutilizar una Tabla existente que tenga un Campo de correo electrónico. Cada usuario que inicia sesión se almacena como un Registro y varias aplicaciones pueden reutilizar la misma Tabla de usuarios.
- Elige al menos un método de inicio de sesión, como OTP por correo electrónico, Google o Teable. Los métodos disponibles dependen de los ajustes de autenticación de la instancia.
- Elige una política de acceso: Cualquiera puede registrarse, Dominios de correo electrónico permitidos o Solo con invitación.
Historial de versiones y reversión
Teable realiza un seguimiento automático de cada implementación.- Haz clic en el botón Historial (icono de reloj) para consultar una lista de todas las versiones implementadas.
- Reversión con un clic: Si una actualización nueva provoca problemas, puedes devolver inmediatamente la aplicación publicada a cualquier versión estable anterior.
Corrección automática
Si tus cambios en el código personalizado provocan un error de compilación, la implementación fallará.- Teable proporciona un botón Corrección automática junto al registro de errores.
- Al hacer clic en él, la IA puede analizar el error de compilación y aplicar automáticamente un parche al código para resolver el problema.
Eliminar una aplicación
Para eliminar una aplicación, haz clic en el botón Ajustes (icono de engranaje) del encabezado y selecciona Eliminar.Prácticas recomendadas
Para consultar patrones de instrucciones, consejos de creación, recomendaciones de reversión y soluciones a problemas habituales, consulta la Guía práctica de App Builder.Preguntas frecuentes
¿Borrar la conversación elimina la aplicación?
¿Borrar la conversación elimina la aplicación?
¿Cómo descargo o importo el código de una aplicación?
¿Cómo descargo o importo el código de una aplicación?
... de la barra de pestañas y elige Descargar código o Importar código. Los archivos ZIP importados pueden tener hasta 20 MB y sustituyen el proyecto existente, así que incluye todos los archivos de origen que quieras conservar. El proyecto importado debe incluir un archivo package.json en la raíz. Los archivos .env situados en la raíz se importan en los Secretos de la aplicación.¿Cuándo se aplican los ajustes de inicio de sesión a la aplicación publicada?
¿Cuándo se aplican los ajustes de inicio de sesión a la aplicación publicada?
¿Cómo puede una aplicación llamar a modelos de IA durante la ejecución?
¿Cómo puede una aplicación llamar a modelos de IA durante la ejecución?
¿Cómo se cobran la IA integrada y la IA dentro de las aplicaciones?
¿Cómo se cobran la IA integrada y la IA dentro de las aplicaciones?
¿Cómo vuelvo a una versión anterior?
¿Cómo vuelvo a una versión anterior?
¿Por qué indica App Builder que un agente está ocupado en otra conversación?
¿Por qué indica App Builder que un agente está ocupado en otra conversación?
¿Cómo se reembolsan los Créditos cuando falla una ejecución de App Builder?
¿Cómo se reembolsan los Créditos cuando falla una ejecución de App Builder?
¿Dónde configuro App Builder para una instalación autoalojada?
¿Dónde configuro App Builder para una instalación autoalojada?

