Hoy te voy a presentar un software web programado con Laravel (en el lenguaje PHP, usando un poco de JavaScript) y Vue.js que gestiona un inventario de artículos; permite tomar fotos de los mismos, agregar áreas, etcétera.

No es un software terminado ni listo para usarse en producción, de hecho sirve más para aprender sobre los conceptos de Laravel o para tomarlo como punto de partida.

Al final del post dejaré la historia del mismo, que se resume a que era un software que ya no terminé pero que no me gustaría dejarlo en el olvido siendo que puede servirle a alguien más.

Nota: en el post expongo los fragmentos de código más importantes, pero al final del post también dejaré el enlace al repositorio de GitHub en donde puedes explorar o descargar el código como tú gustes.

Diseño general

Estoy utilizando el framework CSS Bulma. Para el lado del cliente utilizo Vue.js. Comencemos viendo la plantilla maestra de Blade:

See the gist on github.

También utilizo los iconos de font awesome. Como ves estoy inyectando todo el contenido dentro de un section con la clase section.

Más tarde, gracias al poder de Blade, puedo reutilizar este diseño. Por ejemplo, en áreas:

See the gist on github.

En el pie de cada plantilla, si es necesario, incluyo el script que se encarga de manejarla. No estoy usando componentes de Vue, sino simples plantillas que renderizan a HTML y que luego se modifican con Vue.

Rutas

Veamos las rutas. Cabe mencionar que la mayoría de rutas son para la API y algunas para las vistas, pues varias cosas se manejan del lado del cliente (estamos consumiendo la API de Laravel con Vue).

See the gist on github.

También se están deshabilitando las rutas de registro, pues solo se pueden registrar usuarios desde la base de datos.

Áreas

Las áreas son los lugares a los que pertenece cada artículo, así, más tarde, se puede filtrar por área. Es un simple CRUD, veamos el modelo:

See the gist on github.

El controlador que lo maneja es:

See the gist on github.

Aquí notamos algunas cosas interesantes. Por ejemplo, tenemos una búsqueda con LIKE y una paginación:

See the gist on github.

Por otro lado, tenemos la eliminación por varios Ids, es decir, se recibe un arreglo que tiene varios ID de las áreas, usando JSON y luego se invoca al método destroy con el arreglo.

See the gist on github.

Áreas lado del cliente

En el lado del cliente también tenemos algunas buenas cosas. Por ejemplo, la búsqueda y la indicación de carga.

Primero veamos el código:

See the gist on github.

Lo que hacemos es manejar toda la interfaz. Lo que me gusta es mostrar el estado de cargando:

See the gist on github.

De igual modo se muestra lo siguiente cuando no hay resultados de la búsqueda:

Lo que se logra con el siguiente código:

See the gist on github.

Y finalmente si no hay áreas se muestra lo siguiente:

See the gist on github.

Responsables

Se supone que cada responsable es el encargado de un área. Y las áreas tienen artículos. Del mismo modo es un CRUD agregando la búsqueda:

See the gist on github.

Fíjate en que tiene una relación (a nivel de base de datos) con el área. Del mismo modo es un simple controlador de Laravel:

See the gist on github.

Artículos

Ahora veamos la parte de los artículos del inventario. Esta es la parte central del programa. Comenzamos viendo cómo se ve la administración de los mismos:

Los artículos se registran, editan y dan de baja pero también tienen fotos, que puede ser una foto o varias.

Registrar artículo

Para registrar un artículo se necesita:

• Fecha de adquisición
• Marca
• Modelo
• Serie
• Código
• Folio de comprobante
• Descripción
• Estado
• Costo de adquisición
• Área
• Observaciones

Tenemos el modelo que va a interactuar con la base de datos. Tiene una relación con el modelo Area y el modelo FotoDeArticulo:

See the gist on github.

Dentro del formulario tenemos una especie de autocompletado de las áreas que es una implementación manual.

Autocompletado con Vue para las áreas

Dentro del formulario para editar o agregar artículos (así como responsables) está un autocompletado que se ve así:

See the gist on github.

Su funcionamiento se hace con Vue:

See the gist on github.

Fotos de artículos

Dentro de este sistema open source se pueden agregar fotos de artículos haciendo click en Administrar fotos. Es una página que muestra las fotos que ya existen además de un formulario para subir:

PD: Xiaomi es calidad precio

Es buen momento para mostrar cómo es el modelo de la Foto de artículo:

See the gist on github.

Y su respectiva migración:

See the gist on github.

Lo único que guardo es la ruta de la foto, es decir, en dónde fue guardada, pero la foto real se guarda en el disco duro.

Para gestionar las fotos en el almacenamiento se usa el mismo controlador de los artículos, resaltando los siguientes métodos que a su vez usan la fachada de Storage provista por Laravel.

See the gist on github.

Esta parte se me hace interesante pues nos permite:

• Eliminar una foto
• Agregar una foto
• Obtener una ruta segura para servir la foto
• Descargar la foto

Finalmente quiero que se vea el código para el formulario de agregar las fotos:

See the gist on github.

Ahí he discutido un poco por cómo mostrar las filas de las fotos, pero al final ha funcionado.

Dar de baja un artículo

Esta parte todavía no está terminada, pero se permite dar de baja un artículo; solo que por seguridad se debe adjuntar un archivo o comprobante para después mostrar por qué se ha dado de baja:

Login

Finalmente veamos que el sistema cuenta con autenticación para ser administrado. El login se ve así:

El código en realidad no importa mucho; simplemente se envían las credenciales a la ruta que Laravel ya tiene por defecto para hacer la acción:

See the gist on github.

¿Por qué no está terminado?

Ahora sí a la historia. Pasa que hace algún tiempo tenía que hacer el servicio de la universidad, es decir, una cosa que tienes que hacer para ayudar a una institución pública o algo así.

Al final por algunos problemas ya no lo hice, pero el sistema ya estaba iniciado, así que en lugar de dejarlo en el olvido, lo vengo a publicar aquí. A mi parecer tiene varias cosas interesantes como el diseño de la interfaz, el login, el estado de búsqueda y la administración de fotos.

Código fuente

Puedes ver el código fuente en mi github. Ahí encontrarás, en el README, las instrucciones para instalarlo. Es como cualquier otro proyecto de Laravel.

Aquí el repositorio.

En caso de que te guste, te invito a aprender más sobre Laravel en mi blog.