Reordenamiento dinámico de elementos usando drag & drop en Laravel-11 y Livewire-3

1. Introducción

La Dirección General de Cómputo y de Tecnologías de Información y Comunicación (DGTIC) de la UNAM puso a disposición de la comunidad universitaria el “Portal de Software de la UNAM”, sitio web mediante el cual, entre otras actividades, se difunde, para su descargo e instalación, el software libre y el software adquirido con convenio para apoyar a las funciones sustantivas.

Actualmente, los responsables de TIC de la UNAM requieren del apoyo del personal de la DGTIC para gestionar los elementos publicados en dicho portal, lo que conlleva a tiempos de espera largos, dependencia técnica y velocidad de respuesta poco oportuna. Por tal motivo, la DGTIC inició el desarrollo del componente de software denominado “Censo TIC”, plataforma web modular desarrollada con el framework de PHP Laravel 11, Livewire 3 y TailwindCSS, que permitirá a los responsables de TIC realizar dichas tareas de forma automatizada y en tiempo real. 

Al tratarse de una herramienta modular en desarrollo, fue preciso iniciar con la codificación de los componentes necesarios para los módulos de gestión de “Categorías de software” y “Subcategorías de software”. Si bien el prototipo recibido señalaba la creación de módulos independientes, se decidió crear un único componente de software denominado “Módulo de Categorías de Software”, que brinda al usuario final una única interfaz web integral que permite el registro, modificación, listado, consulta, activación, desactivación y reordenamiento de aparición “orden_tienda” en el “Portal de Software UNAM” de las categorías y subcategorías de software, de una manera simple, interactiva, coherente y de rápido aprendizaje.

El reto por resolver fue la creación de un control de interfaz de usuario (widget) que, con sólo arrastrar y soltar elementos de una lista con el puntero del ratón (widget drag & drop), permitiera actualizar de manera automática el valor de “orden_tienda” dentro de la base de datos, ya sea para una categoría o para una subcategoría contra sus similares pertenecientes a la misma categoría. Esto evita al usuario tener que navegar entre distintas pantallas, el uso de controles de formulario poco intuitivos y hacer varios clics hasta obtener el “orden_tienda” deseado.

El objetivo del trabajo presentado a continuación es el describir el proceso de implementación de un componente de software que permite reordenar los elementos de un listado y actualizar automáticamente el valor dentro de la base de datos con sólo arrastrar y soltar elementos con el puntero del ratón (widget drag & drop).

2. Desarrollo técnico

Para el desarrollo del módulo, se empleó el repositorio “Censo TIC” creado por la DGTIC, que incluye un contenedor en Docker con los servicios: 

• Apache: software que procesa y entrega archivos de sitios web a los usuarios desde un navegador.
• PHP: lenguaje de programación empleado para el desarrollo web y que se ejecuta del lado del servidor.
• Composer: manejador de paquetes para PHP que proporciona un estándar para administrar, descargar e instalar dependencias y librerías.
• Laravel 11: marco o esquema de trabajo de PHP para el desarrollo de software y que simplifica el trabajo repetitivo.
• Livewire 3 para Laravel: herramienta que permite crear aplicaciones interactivas con componentes Javascript para Laravel.
• TailwindCSS: marco o esquema de trabajo de CSS para aplicar estilos a interfaces de usuario HTML.
• PostgreSQL: sistema manejador de bases de datos relacional.

Barajas González (2023) señala que “el uso de contenedores para desarrollo de software facilita al programador la instalación de las herramientas necesarias para aplicaciones cuya arquitectura requiere diversos servicios adicionales. También facilita trabajar sobre sistemas legados porque encapsula los archivos binarios y librerías que estos necesitan para funcionar, en un entorno independiente al sistema operativo que lo contiene” y que “Los contenedores solucionan la incompatibilidad entre ambientes de programación en proyectos con más de un programador ya que pueden crear contenedores con las mismas características, independientemente del sistema operativo o configuraciones propias de cada uno de sus equipos de cómputo”.

De acuerdo con Adriano Escudero y Guapi Cuji (2024), “teniendo en cuenta que en el desarrollo web de buscar más eficiencia, confiabilidad, mantenibilidad y escalabilidad, se necesita de la ayuda de un framework que sea una parte esencial del conjunto de herramientas de desarrollo de aplicaciones web que utilizan el lenguaje PHP. Varios framework de PHP han demostrado ser grandes complementos del desarrollo de software con código a prueba de fallas y extensible, lo que da como resultado aplicaciones web más sólidas y seguras.”

Por otra parte, Sánchez Montes de Oca (2024) indica que “Laravel es un framework de desarrollo web de código abierto escrito en PHP que se utiliza para crear aplicaciones web de alta calidad y escalables, siendo uno de los frameworks de PHP más populares”.

Barroso Benítez, Trujillo Casanola y Millet Lombida (2021) señalan que:

En el desarrollo de software se reconoce la usabilidad como atributo de calidad para el éxito de un producto, no obstante, son pocos los procesos y profesionales que la aplican (Castilla, Hernández y González, 2017). La usabilidad constituye un factor esencial en el desarrollo de los sistemas informáticos (Ferré, 2018), si estos no son percibidos como una herramienta que ayuda al usuario a realizar sus tareas, se dificulta en gran manera la aceptación del mismo. En los últimos años se ha identificado el concepto de “Experiencia de Usuario” (UX por sus siglas en inglés). La UX está tomando mayor importancia a nivel mundial y cada vez más organizaciones se preocupan por las emociones, percepciones y respuestas que tendrán los usuarios cuando interactúen con sus productos y servicios.

En conclusión, la combinación de tecnologías seleccionadas permite desarrollar un sistema técnicamente robusto y sólido, que facilita el trabajo de los desarrolladores y asegura una experiencia de usuario positiva, respondiendo a las demandas actuales de eficiencia, seguridad y usabilidad en los sistemas informáticos.

2.1 Metodología

2.1.1 Análisis

El modelo de entidad-relación de la base de datos indicó las siguientes entidades:

• “software_categoria” para almacenar las categorías de software, con los atributos: id_software_categoria, nombre, descripción, orden, orden_tienda, activo created_at y updated_at.
• “software_subcategoria” para almacenar las subcategorías de software, con los atributos: id_software_subcategoria, id_software_categoria, nombre, descripción, orden, orden_tienda, activo created_at y updated_at.

Podemos observar que el modelo define una relación de tipo “uno a muchos (1:M)”; es decir, que una software_categoria CONTIENE una o muchas software_subcategoria y, a su vez, una software_subcategoria PERTENECE a una software_categoria.

Como se ha definido anteriormente, el reto por resolver fue la creación de un control de interfaz de usuario (widget) que, con sólo arrastrar y soltar elementos de una lista con el puntero del ratón (widget drag & drop), permitiera actualizar de manera automática el valor de “orden_tienda” dentro de la base de datos, ya sea para una categoría o para una subcategoría contra sus similares pertenecientes a la misma categoría.

Figura 1

Modelo Entidad-Relación para categorías y subcategorías de software

La documentación del proyecto definió un prototipo que separa en componentes distintos la gestión de software_categoria y software_subcategoria; es decir, “Módulo de Categorías” y “Módulo de Subcategorías”; cada uno de ellos permitiendo el registro, modificación, listado, consulta, paginación, activación, desactivación y reordenamiento de aparición “orden_tienda”.

Figura 2

Prototipo inicial para el componente de listado de categorías de software

Y subcategorías de software:

Figura 3

Prototipo inicial para el componente de listado de subcategorías de software

2.1.2 Diseño

Se propusieron las siguientes interfaces de usuario para el listado y reordenamiento de categorías de software y sus subcategorías:

Figura 4

Prototipo final para el componente de listado de categorías de software

Figura 5

Prototipo final para actualizar el orden de categorías de software de manera dinámica

Figura 6

Prototipo final para actualizar el orden de subcategorías de software de manera dinámica

2.1.3 Implementación

Para implementar la funcionalidad de reordenamiento dinámico de categorías y subcategorías de software mediante un widget de arrastrar y soltar (drag & drop), que además actualiza automáticamente los valores en la base de datos, se pueden observar los pasos de la implementación en los anexos A y B correspondientes.

2.1.4 Pruebas

Se comprobó que las vistas se representan adecuadamente en el navegador, que las acciones de los botones se ejecutan y muestran las ventanas modales esperadas, que al arrastrar un elemento del listado de categorías o subcategorías se mueve conforme se manipula el ratón y que, al soltar el elemento, se dispara la acción sobre la base de datos. Se verificaron los nuevos valores de “tienda_orden” en la tabla correspondiente de la base de datos.

2.1.5 Mantenimiento

Al tener bien organizados todos los elementos de ambos componentes, se facilita el mantenimiento y la expansión del Módulo de Categorías y Subcategorías de Software a lo largo del tiempo; sin embargo, será necesario adaptar a los cambios que exijan las nuevas versiones de Laravel y Livewire.

3. Resultados

Al finalizar el módulo de gestión de “Categorías y Subcategorías de software”, se entregó una única interfaz web que integra las acciones de registro, modificación, listado, consulta, activación, desactivación y reordenamiento de aparición en el Portal de Software UNAM. Asimismo, se creó un componente que permite el reordenamiento de aparición de las categorías y subcategorías de software en dicho portal, mediante una interfaz sencilla, simple, interactiva, coherente y de rápido aprendizaje. Esto se logra con sólo arrastrar y soltar elementos con el puntero del ratón (widget drag & drop) para actualizar automáticamente el valor de “orden_tienda” dentro de la base de datos.

4. Conclusiones

El desarrollo de componentes de software con diseño responsivo, atractivo, interactivo y, sobre todo, funcional permite mejorar la experiencia de usuario y un rápido aprendizaje. Al crear una interfaz que integra las acciones necesarias sobre las categorías y subcategorías de software, se evita el exceso de clics y se logra un menor desplazamiento entre distintas pantallas para obtener información y mantener el enfoque respecto a toda la información relacionada entre sí.

Asimismo, al sustituir los controles numéricos para definir el reordenamiento de aparición de las categorías y subcategorías de software en el Portal de Software UNAM, que implicaría capturar un valor numérico más un clic en el botón de “guardar”, por una interfaz que permita arrastrar y soltar elementos de una lista con el puntero del ratón (widget drag&drop) para actualizar automáticamente el valor de “orden_tienda” dentro de la base de datos, permitimos que dicha experiencia de usuario sea más atractiva, fluida e interactiva.

Agradecimientos

A la Doctora Ana Yuri Ramírez Molina, Titular de la Dirección; al Maestro Hugo Alonso Reyes Herrera, Titular de la Subdirección de Sistemas Integrados y a la Licenciada Karla Fonseca Márquez, Titular del Departamento de Integración de Soluciones de Software. Todos ellos de la Dirección de Colaboración y Vinculación dependiente de la Dirección General de Cómputo y de Tecnologías de Información y Comunicación (DGTIC). Gracias por brindarme la oportunidad de cumplir uno de mis más grandes sueños: servir profesionalmente a nuestra máxima casa de estudios; por su enorme apoyo, su guía y orientación; por ser el modelo a seguir, de quienes admiro todo su compromiso y esfuerzo; por su liderazgo, que me lleva a esforzarme por alcanzar mi verdadero potencial.

Referencias

ANEXO A

Categorías de software

Para implementar la funcionalidad de reordenamiento dinámico de categorías de software mediante un widget de arrastrar y soltar (drag & drop), que además actualiza automáticamente los valores en la base de datos, se llevaron a cabo los siguientes pasos:

1. Se generó el componente Livewire y la vista Blade con el siguiente comando:

php artisan make:livewire ReasignarOrdenTiendaSoftwareCategoríasComponent

2. Dentro del componente, se generó el método actualizarOrdenTiendaSoftwareCategorias(), responsable de recibir el arreglo de categorías de software con el nuevo orden:

Figura 7

Código fuente del método actualizarOrdenTiendaSoftwareCategorias()

3. Luego, se creó manualmente el archivo responsable de realizar la operación dentro de la base de datos: ReasignarOrdenTiendaSoftwareCategoriasAction.php y, dentro de la transacción a la base de datos, se definió el código que recorre el arreglo de categorías de software con el nuevo orden y ajusta el valor dentro de la base de datos:

Figura 8

Código fuente de la acción ReasignarOrdenTiendaSoftwareCategoriasAction()

4. Se generó el modelo SoftwareCategoria empleando el comando:

php artisan make:model SoftwareCategoria

Por default, Laravel 11 generó el archivo SoftwareCategoria.php en la ruta app/Models y se reubicó manualmente en modulos/SoftwareCategorias/Models.

5. Después, se modificó el código fuente de la vista en Blade:

Figura 9

Código fuente de la vista reasignar-orden-tienda-software-categorias.blade.php

6. Por último, se modificó el código fuente del botón “Reasignar orden en Portal de Software UNAM” de las categorías, definido en la vista Blade listar-software-categorias.blade.php:

Figura 10

Código fuente del botón “Reasignar orden en Portal de Software UNAM” en la vista listar-software-categorias.blade.php

El evento “clic” del botón ejecuta “abrir-modal-reasignar-orden-tienda-software-categorias” para mostrar la ventana modal con el listado de Categorías de Software. Al arrastrar y soltar algún elemento del listado, se llama al evento actualizarOrdenTiendaSoftwareCategorias, que realiza la actualización en la base de datos de manera dinámica.

ANEXO B

Subcategorías de software

Para implementar la funcionalidad de reordenamiento dinámico de subcategorías de software mediante un widget de arrastrar y soltar (drag & drop), que además actualiza automáticamente los valores en la base de datos, se llevaron a cabo los siguientes pasos:

1. Se generó el componente Livewire y la vista Blade con el siguiente comando:

php artisan make:livewire ReasignarOrdenTiendaSoftwareSubcategoríasComponent

2. Dentro del componente, se generó el método actualizarOrdenTiendaSoftwareSubcategorias(), responsable de recibir el arreglo de categorías de software con el nuevo orden:

Figura 11

Código fuente del método actualizarOrdenTiendaSoftwareSubcategorias()

3. Luego, se creó manualmente el archivo responsable de realizar la operación dentro de la base de datos: ReasignarOrdenTiendaSoftwareSubcategoriasAction.php y, dentro de la transacción a la base de datos, se definió el código que recorre el arreglo de categorías de software con el nuevo orden y ajusta el valor dentro de la base de datos:

Figura 12

Código fuente de la acción ReasignarOrdenTiendaSoftwareCategoriasAction()

4. Se generó el modelo SoftwareSubcategoria empleando el comando:

php artisan make:model SoftwareSubcategoria

Por default, Laravel 11 generó el archivo SoftwareSubcategoria.php en la ruta app/Models y se reubicó manualmente en modulos/SoftwareSubcategorias/Models.

5. Después, se modificó el código fuente de la vista en Blade

Figura 13

Código fuente de la vista reasignar-orden-tienda-software-subcategorias.blade.php

6. Por último, se modificó el código fuente del botón “Reasignar orden en Portal de Software UNAM” de las categorías, definido en la vista Blade listar-software-categorias.blade.php:

Figura 14

Código fuente del botón “Reasignar orden en Portal de Software UNAM” en la vista listar-software-categorias.blade.php

El evento “clic” del botón, ejecuta “abrir-modal-reasignar-orden-tienda-software-subcategoria” para mostrar la ventana modal con el listado de Subcategorías de Software pertenecientes a la misma categoría. Al arrastrar y soltar algún elemento del listado, se llama al evento actualizarOrdenTiendaSoftwareSubcategorias, que realiza la actualización en la base de datos de manera dinámica.

De manera general, la estructura de directorios y archivos de PHP necesarios son:

Figura 15

Estructura de directorios y archivos Módulo de Categorías y Subcategorías de Software Laravel 11 y Livewire 3