Cómo Construir una Aplicación CRUD Simple en Appsmith

Construir herramientas internas desde cero desperdicia tiempo que no tienes. Necesitas un panel de administración rápido o una interfaz de gestión de datos, no un proyecto de desarrollo de tres meses. Appsmith te permite conectar una fuente de datos, arrastrar widgets y configurar operaciones de Crear, Leer, Actualizar y Eliminar en menos de una hora.

Este tutorial recorre el flujo de trabajo estándar de una aplicación CRUD en Appsmith: conectar tu base de datos, mostrar datos en un widget Table, manejar la creación y actualización de registros mediante formularios, y refrescar los datos después de las mutaciones.

Conecta Tu Fuente de Datos

Comienza creando una nueva aplicación en Appsmith. Desde la barra lateral izquierda, haz clic en el + junto a Datasources y selecciona tu tipo de base de datos—PostgreSQL, MySQL o una API REST.

Para bases de datos SQL, ingresa tus credenciales de conexión: host, puerto, nombre de la base de datos, nombre de usuario y contraseña. Almacena valores sensibles en la configuración de fuente de datos cifrada de Appsmith y en la configuración de entornos en lugar de codificarlos directamente en consultas o widgets. Las consultas se ejecutan del lado del servidor, por lo que las credenciales nunca se exponen al navegador.

Puedes encontrar la lista completa de bases de datos compatibles y opciones de configuración en la documentación oficial de fuentes de datos.

Prueba la conexión antes de guardar. Si falla, verifica las reglas del firewall, los requisitos de SSL y la precisión de las credenciales.

Lee Datos con una Consulta

Crea tu primera consulta para obtener registros. Haz clic en + junto a Queries/JS, selecciona tu fuente de datos y escribe una declaración SELECT:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

Nombra esta consulta getUsers y ejecútala para verificar la respuesta.

Para conjuntos de datos más grandes, implementa paginación del lado del servidor. El widget Table de Appsmith soporta esto de forma nativa—pasarás parámetros de desplazamiento y límite a tu consulta basándote en el estado de paginación de la tabla.

Muestra Datos en un Widget Table

Arrastra un widget Table al lienzo. En las propiedades del widget, configura la propiedad Table data como:

{{getUsers.data}}

La tabla genera automáticamente columnas a partir de la respuesta de tu consulta. Renombra columnas, ajusta anchos y oculta campos como IDs internos según sea necesario.

Este patrón de integración de base de datos en Appsmith—vinculación de consulta a widget—forma la base de cada frontend CRUD de bajo código que construirás. Las opciones completas de configuración del widget Table se cubren en la documentación del widget Table.

Crea Registros con un Formulario o Modal

Agrega un widget Button etiquetado como “Agregar Nuevo” y configura su acción onClick para abrir un Modal. Dentro del modal, agrega widgets Input para cada campo: nameInput, emailInput.

Crea una consulta INSERT llamada createUser:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Conecta el botón de envío del modal para ejecutar createUser. Al completarse con éxito, activa getUsers.run() para refrescar la tabla y luego cierra el modal.

Para validación, usa las propiedades de validación integradas del widget Input o escribe un JSObject que verifique los valores de los campos antes del envío.

Actualiza Registros Usando Filas Seleccionadas

Habilita la selección de filas en tu widget Table. Cuando un usuario hace clic en una fila, Table1.selectedRow expone los datos de ese registro.

Crea una consulta UPDATE llamada updateUser:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

Puedes reutilizar el mismo modal para editar pre-poblando los inputs con Table1.selectedRow.name como valores predeterminados. Alterna entre modos “crear” y “editar” usando una variable JSObject.

Después de que la actualización se ejecute exitosamente, llama a getUsers.run() para refrescar la visualización.

Elimina Registros con Confirmación

Agrega una columna Button a tu tabla para acciones de eliminación. Configura el tipo de columna como Button y configura el onClick para ejecutar una consulta DELETE:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

Nota la diferencia: triggeredRow captura la fila donde se hizo clic en el botón, mientras que selectedRow captura la fila resaltada.

Habilita Request confirmation before running en la configuración de la consulta para prevenir eliminaciones accidentales. Al completarse con éxito, refresca los datos de la tabla.

El Flujo de Trabajo de Formulario y Tabla en Appsmith

El patrón que has construido—widget Table mostrando resultados de consultas, Form o Modal manejando entrada, consultas parametrizadas para mutaciones, y refresco de datos al completarse con éxito—escala a cualquier caso de uso CRUD. Este flujo de trabajo de formulario y tabla en Appsmith aplica ya sea que estés gestionando usuarios, inventario, tickets de soporte o cualquier otro registro.

Para aplicaciones en producción, considera:

• Control de acceso basado en roles: Appsmith soporta permisos granulares a nivel de aplicación, página y fuente de datos
• Entornos y credenciales: Almacena contraseñas de bases de datos y claves API de forma segura en desarrollo, staging y producción
• Paquetes: Comparte consultas y JSObjects reutilizables entre múltiples aplicaciones usando Appsmith Packages
• Paginación del lado del servidor: Esencial para tablas con miles de registros

Conclusión

Ahora tienes una interfaz CRUD funcional: datos mostrados en una tabla, formularios para crear y editar registros, funcionalidad de eliminación con confirmación, y refresco automático de datos después de cada mutación.

A partir de aquí, extiende la aplicación con filtros de búsqueda, páginas adicionales, o conéctala a Appsmith Workflows para automatización backend. El frontend CRUD de bajo código que has construido sirve como base para herramientas internas más complejas—sin escribir la UI y la capa de datos desde cero.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.