©2025 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Componentes CRUD y paneles en Lit
Trabajo con formularios avanzado e implementación de sistemas de CRUD y paneles de administración basados en Web Components y Lit
En marcha
Gratis!!
* Necesitas estar logueado
En el desarrollo de proyectos de aplicaciones informáticas una de las tareas más habituales es la construcción de paneles de administración, desde donde los usuarios pueden realizar la gestión de todo tipo de entidades. En los paneles de administración se realizan en esencia las operaciones típicas, consistentes en listados, altas, bajas y modificaciones, englobadas bajo el acrónimo CRUD.
La realización de este tipo de funcionalidades resulta extremadamente recurrente y en muchas ocasiones acaba siendo bastante tediosa por motivos diversos: es demasiado repetitiva, no requiere mucha creatividad y además, si lo quieres hacer bien, te ocupará bastantes horas de trabajo.
Para resumir la creación de las funcionalidades de CRUD en este curso vamos a aportar un enfoque sencillo y automático. Vamos a aprender a implementar formularios con funcionalidades dinámicas y operaciones de CRUD, usando componentes genéricos ya desarrollados que se encuentran disponibles como software libre. Estos componentes nos permitirán hacer todo tipo de operaciones, no solo las altas, bajas, modificaciones y listados, sino también sistemas de filtrado, paginación, orden, paneles de detalle de recursos, ejecución de acciones en lote o acciones individuales, etc.
El único requisito para que estos componentes funcionen es disponer de un API REST en un backend. Es decir, estos componentes se apoyarán en un servicio web o API implementado mediante la arquitectura REST que ofrezca las operaciones necesarias sobre los recursos que exponga. En este curso no vamos a implementar el API en el backend (tienes otros cursos en EscuelaIT que abordan esa tarea), sino que vamos desarrollar los componentes frontend para poder administrar los recursos.
Los componentes que vamos a usar en este curso están basados en el estándar Web Components. Eso quiere decir que podrás usarlos perfectamente para aplicaciones Javascript de todo tipo, incluso basadas en frameworks como Angular o Vue, incluso en librerías como React o Lit. Todo el catálogo de componentes que vamos a implementar está disponible como software libre y se puede usar para cualquier tipo de proyecto.
La realización de este tipo de funcionalidades resulta extremadamente recurrente y en muchas ocasiones acaba siendo bastante tediosa por motivos diversos: es demasiado repetitiva, no requiere mucha creatividad y además, si lo quieres hacer bien, te ocupará bastantes horas de trabajo.
Para resumir la creación de las funcionalidades de CRUD en este curso vamos a aportar un enfoque sencillo y automático. Vamos a aprender a implementar formularios con funcionalidades dinámicas y operaciones de CRUD, usando componentes genéricos ya desarrollados que se encuentran disponibles como software libre. Estos componentes nos permitirán hacer todo tipo de operaciones, no solo las altas, bajas, modificaciones y listados, sino también sistemas de filtrado, paginación, orden, paneles de detalle de recursos, ejecución de acciones en lote o acciones individuales, etc.
El único requisito para que estos componentes funcionen es disponer de un API REST en un backend. Es decir, estos componentes se apoyarán en un servicio web o API implementado mediante la arquitectura REST que ofrezca las operaciones necesarias sobre los recursos que exponga. En este curso no vamos a implementar el API en el backend (tienes otros cursos en EscuelaIT que abordan esa tarea), sino que vamos desarrollar los componentes frontend para poder administrar los recursos.
Los componentes que vamos a usar en este curso están basados en el estándar Web Components. Eso quiere decir que podrás usarlos perfectamente para aplicaciones Javascript de todo tipo, incluso basadas en frameworks como Angular o Vue, incluso en librerías como React o Lit. Todo el catálogo de componentes que vamos a implementar está disponible como software libre y se puede usar para cualquier tipo de proyecto.
Qué aprenderé en el Componentes CRUD y paneles en Lit
Objetivos del curso
Por qué debes aprender implementación de sistemas de CRUD y paneles de administración Lit
Qué tengo que saber
Este curso da por hecho que tienes un conocimiento básico del desarrollo frontend. No necesitas tener experiencia con alguna tecnología en particular, sino más bien tener algo de soltura en el desarrollo frontend con Javascript. Tampoco requiere que tengas conocimientos del backend, ya que nos apoyaremos en APIs REST ya desarrolladas, sin embargo se dan por entendidos los patrones generales de funcionamiento del protocolo HTTP, como status codes, methods, etc
Clases y contenidos
Presentación de los componentes de Crud
Presentamos los componentes de CRUD con los que vamos a trabajar durante el curso. Están implementados con Lit, pero recuerda que al ser Web Components estándar los puedes usar en cualquier tipo de proyecto Javascript, incluso en frameworks como Vue, Angular o librerías como React.
En este vídeo vamos a presentar de manera general los componentes que tenemos disponibles para crear los sistemas de CRUD y paneles de administración. Nos permitirán crear desde llamadas Ajax totalmente configurables, formularios que se envían por Ajax automáticamente, operaciones atómicas del CRUD hasta componentes complejos y totalmente personalizables que integran toda una serie de operaciones de gestión y creación de paneles de administración.
Componente de Ajax
En los próximos vídeos vamos a ver el componente "Core" del sistema de CRUD, que nos permite hacer Ajax de manera declarativa. Este componente lo usan internamente todos los componentes del sistema, pero también lo puedes usar de manera autónoma en tus proyectos siempre que lo necesites. Veremos cómo usar el componente en diversos escenarios y la configuración con Axios que puedes llegar a necesitar personalizar atendiendo a las características de la aplicación donde lo implementes.
El Componente dile-ajax nos permite realizar comunicaciones asíncronas con un servidor, vía Ajax. Estas operaciones son totalmente configurables y nos permiten hacer conexiones HTTP declarativas, sin tener que lidiar con el código Javascript asíncrono. Además el componente es capaz de realizar tratamientos ante errores de conexión y ofrecer información detallada del problema detectado en función del código de status HTTP de la respuesta del servidor. Por supuesto, también permite gestionar conexiones satisfactorias, entregando la respuesta enviada desde el servidor.
En este vídeo vemos cómo trabajar con el componente dile-ajax para realizar una solicitud al servidor en la que se envían datos mediante POST.
El componente de Ajax está basado en la librería Axios. Por tanto, ofrece la posibilidad de configurarse utilizando los propios mecanismos que nos ofrece Axios para la personalización de las comunicaciones por HTTP. En este vídeo te explicaremos cómo puedes personalizar el objeto Axios que se utiliza en el componente dile-ajax y qué herramientas existen a tu disposición para simplificar estas configuraciones de la librería para casos comunes de API REST.
Formularios automáticos que se envían por Ajax
El siguiente componente "core" del sistema de crud es el que nos permite crear un formulario que se enviará de manera automática por Ajax, también de forma declarativa y sin que tengas que realizar más que la configuración. También veremos diversos escenarios de uso para demostrar la versatilidad del componente.
En este vídeo vamos a ver cómo trabajar con un componente que permite crear un formulario que se envía automáticamente vía Ajax. Gracias a este componente dile-ajax-form podemos enviar datos al servidor de manera sencilla tanto para operaciones de inserción como de actualización. El envío se realizará utilizando comunicaciones HTTP asincronas, sin recargar la página. Veremos cómo se gestionan diversas situaciones de éxito o error de las conexiones.
Ahora veremos cómo realizar una operación de actualización (update) con el componente de formulario Ajax. Una de las características de este componente es que permite obtener de manera automática los datos de un recurso de API que se pretende editar. Una vez se obtienen los datos el componente es capaz de rellenar el formulario con esos datos, para permitir editar la información y luego enviarla al servidor para su actualización. Es decir, el componente de formulario no se limita a enviar datos sino también es capaz de recibirlos, para realizar toda el flujo necesario en un update.
Adaptarse a las respuestas de tu API REST
En este bloque vamos explicar cómo puedes configurar los componentes de CRUD para que se adapten a las particularidades de los servicios web o API REST con los que estás trabajando. Para ello veremos en qué consiste el adaptador de las respuestas que proporciona la librería y cómo crear nuestros propios adaptadores personalizados. De este modo podrás trabajar con cualquier API REST usando los componentes del sistema de crud.
Las comunicaciones de los componentes de Ajax se realizan de manera predeterminada atendiendo a las convenciones comunes de la arquitectura REST. Sin embargo, en la práctica cada API tiene sus particularidades y por ello es necesario poder realizar personalizaciones en las comunicaciones de los componentes de Ajax. Estas personalizaciones se realizan con un objeto especial llamado Response Adapter. En este vídeo explicamos la necesidad de uso de los adaptadores de las respuestas del API.
El componente para trabajar con formularios está pensado para funcionar con cualquier tipo de API REST. Para ello ofrece mecanismos mediante los cuales es capaz de adaptar las respuestas del API y extraer los datos que necesita para operar. Veremos cómo crear un adaptador para el API e implementarlo en el componente de formulario Ajax.
Operaciones CRUD
A partir de aquí vamos a conocer los componentes de operaciones. Es decir, los componentes que están especializados en realizar las distintas operaciones que puedes necesitar en un sistema de CRUD (inserciones, actualizaciones, borrados, listados). Incluso hay un componente de detalle, que no es específicamente una operación CRUD pero que también lo incluimos para poder implementar funcionalidades típicas de los paneles de administración.
Este es un componente que nos permite realizar una operación de inserción sobre un recurso de API REST. Es el primer componente de operaciones que vamos a ver en este curso de componentes de CRUD. Está basado en el componente de formulario Ajax, por lo que podemos entender al componente de inserción como una envoltura que nos permite trabajar a más alto nivel para configurar de una manera sencilla las operaciones de inserción de registros sobre un recurso.
Realizamos un vídeo para explicar algunas configuraciones mediante las que podemos personalizar el componente de inserción, adaptándolo a diversos tipos de API REST.
Este es el segundo componente de operaciones que vemos en el curso de implantación de sistemas de CRUD. Este componente está pensado para hacer la operación de update sobre un recurso de API REST. Del mismo modo que el componente de inserción, funciona como una envoltura de dile-ajax-form, permitiendo trabajar a más alto nivel para realizar específicamente operaciones de edición de elementos de un recurso de API REST.
En este segundo video veremos cómo adaptar el componente de Update para que funcione con APIs que exigen otros formatos para sus comunicaciones.
Este vídeo muestra cómo utilizar el componente para las operaciones de delete. Veremos cómo trabajar con este componente, que permite básicamente abrir un cuadro de diálogo que solicita al usuario la verificación de la operación de borrado. Si el usuario acepta el borrado luego realiza la solicitud HTTP con method delete contra el endpoint proporcionado.
Este componente nos permite mostrar el detalle de un elemento existente en un recurso de API REST. El componente es capaz de recibir un recurso dado su id y mostrar su detalle de manera personalizada.
Listados personalizados automáticos y declarativos
Hacemos un bloque separado para el componente de listado, ya que es un elemento bastante sofisticado. Básicamente te permite crear listados de elementos de manera personalizada, mediante una configuración meramente declarativa. En los siguientes vídeos veremos implementaciones sencillas del componente de listado pero también cómo se puede configurar y responder ante acciones típicas de los listados como solicitudes de edición o borrado.
Este es el primero de los vídeos dedicados al componente de listado. Básicamente nos permite acceder a un endpoint para obtener un listado de elementos servidos por un API REST. Este es un componente más sofisticado que los anteriores, así que en este video veremos una implantación básica.
En este vídeo veremos cómo realizar la personalización de la vista que se utilizará para mostrar los ítems en un listado de recursos. Gracias a esta personalización los componentes de listado son capaces de mostrar ítems de cualquier tipo de entidad con el formato que el desarrollador necesite.
En este vídeo profundizaremos en la configuración que se entrega al componente de listado, que nos permitirá personalizar su funcionamiento en detalle.
En este vídeo veremos que los componentes de listado son capaces de emitir solicitudes para updates y deletes de los ítems del listado. Veremos cómo funcionan estas utilidades y cómo capturar esas solicitudes y saber qué elementos se pretenden editar o borrar.
Componente integrado de funcionalidades CRUD
En los siguientes vídeos vamos a ver cómo realizar la implementación del componente de CRUD, que ofrece todas las funcionalidades relacionadas de una manera integrada y centralizada. Este componente también es meramente declarativo, por lo que solamente tendrás que colocar una etiqueta y entregarle una configuración. Veremos que la implementación es inmediata, lo que necesitas realizar tú es simplemente la definición de un objeto de configuración que se entregará al componente. Veremos qué herramientas tienes disponibles para crear los objetos de configuración de manera rápida y prácticamente inmediata, que te ofrecen una base de opciones predeterminadas, pudiendo luego sobreescribir las configuraciones que necesites. Además exploraremos operaciones un poco más avanzadas como la paginación de los listados o la configuración de acciones en lote.
Este es el primer vídeo en el cual vamos a mostrar cómo utilizar el componente de CRUD. Se trata de un componente que nos permite centralizar todas las operaciones del CRUD en un mismo panel: altas, bajas, modificaciones y listados.
La misma configuración que utilizábamos para el componente de listado la podemos utilizar también para el componente de CRUD. En este vídeo mostraremos de manera más práctica cómo podemos organizar el código de una aplicación para poder compartir el mismo objeto de configuración para todos los componentes del recurso.
En este vídeo veremos de manera práctica varios ejemplos de configuración para la personalización del componente de CRUD.
En este vídeo veremos que el componente de listado del CRUD permite la paginación de resultados. Mostraremos por la práctica cómo se configura este aspecto para mostrar listados paginados.
Otra de las funcionalidades que nos ofrece el sistema de CRUD es la personalización de las opciones de filtrado y ordenación, integradas en la propia interfaz del componente. Veremos cómo cambiar el objeto de configuración para que el componente de CRUD sea capaz de ordenar o filtrar como resulte más conveniente en este recurso.
Otra de las funcionalidades típicas de los sistemas de CRUD es la ejecución de acciones sobre varios elementos de un listado. En este vídeo veremos cómo configurar el componente de CRUD para que permita la realización de operaciones en lote, es decir, la posibilidad de seleccionar uno o varios recursos a la vez, sobre los que se ejecutará una acción. Veremos cómo se configuran los tipos de acciones y cómo poder definir los formularios de carga de datos que requieran las acciones a procesar.
Paneles de detalle de registros
En estos vídeos vamos a ver cómo crear y configurar páginas de detalle que implementan de manera integrada funcionalidades CRUD pero para un registro en particular. Veremos cómo configurar las páginas de detalle, hacer acciones específicas para los registros individuales o implementar las operaciones CRUD con otros elementos de entidades relacionadas.
La página de detalle de un elemento forma parte de todo panel de administración, aunque ella misma no esté incluida dentro de las siglas del acrónimo CRUD. En esta sección veremos cómo se implementa esta página de detalle, que resulta absolutamente necesaria en los sistemas de gestión de la información. Mostraremos de manera básica el componente que nos permite implementar la página de detalle y que agrupa numerosas operaciones sobre los elementos, como la edición, ejecución de acciones específicas sobre el elemento, gestión de los elementos relacionados y más. Veremos que la misma configuración que venimos usando para los componentes de listado y el componente de CRUD nos sirve igualmente para la página de detalle, por lo que la mayoría del trabajo de implantación ya lo tendremos realizado.
Una de las características ofrecidas por la página de detalle es la posibilidad de definir acciones a ejecutar sobre ese elemento. Veremos cómo configurar las acciones posibles y cómo definir los formularios que permiten introducir los datos necesarios para procesar las acciones.
Todo elemento está relacionado con otros y, por tanto, es necesario establecer algún mecanismo para conseguir mostrar sus relaciones. Por ejemplo, en una página de detalle de un cliente podríamos mostrar las facturas asociadas a él. Veremos cuáles son los mecanismos que nos ofrece el componente de detalle para poder mostrar las relaciones y cómo apoyarnos en los propios componentes de CRUD para conseguir administrar los elementos relacionados desde la propia página de detalle.
Otros componentes de administración y paneles
La librería de componentes de Crud ha ido creciendo y existen varios componentes de crud extra con los que puedes realizar distintos tipos de funcionalidades recurrentes. A continuación veremos una muestra de ellos.
En este vídeo vamos a ver un componente extra del sistema de CRUD que básicamente consiste en un switch asociado a una operación Ajax. Consiste en un interruptor que cuando se acciona envía una solicitud a un endpoint que permite editar una propiedad boleana del recurso. Con este vídeo además cerramos el curso de implantación de componentes de CRUD y paneles de administración en Web Components y Lit.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.