QRStock

QRStock es una webapp y aplicación móvil que permite gestionar el inventario para varios lugares. Permite generar y escanear QR para notificar cuando un objeto es recogido y devuelto de un espacio y ver el estado del stock en cualquier momento.

Características

• Gestión de usuarios
• Gestión de stock
• Rastreador de stock
• Escaneo de QR para recogida y devolución de objeto
• Generación de QR para objetos y espacios
• Soporte para varios idiomas
• Webhook para integración con Microsoft Teams

Introducción

A continuación se explicará cómo poder obtener una copia del proyecto para su sistema local.

Pre-requisitos

• Mínima versión de pnpm: 11.5.3
• Mínima versión de node: 24.16.0
• Mínima versión de vite: 8.1.3
• Mínima versión de ESlint: 10.6.0
• Android Studio (en caso de compilar versión para Android)

Instalación

Clonar respositorio

git clone https://github.com/RafiThA/QRStock.git

Instalar dependencias

pnpm i

Entorno de desarrollo

Para abrir un servidor se deben especificar las variables de entorno necesarias en un fichero .env en la raiz del proyecto con las variables:

• VITE_API_URL: URL del servidor backend.
• TOKEN_KEY: Token para usuarios.

Iniciar servidor front

pnpm dev

Iniciar servidor back

pnpm back

Contruir aplicación web

pnpm build

Construir directorio android

Añadir android

pnpm exec cap add android

Asegurar que el proyecto este construido (carpeta dist creada)

pnpm build

Sincronizar construcción con Android

pnpm sync

Añadir iconos en apliación Android

pnpm generate-assets

Abrir proyecto en Android Studio

pnpm open-android

Ejecutar simulación en dispositivo virtual (se necesita configurar en Android Studio previamente)

pnpm run-android

Integración con Teams

Se ha desarollado una integración con Teams mediante el uso de Webhooks.

Los métodos backend integran llamadas con teams cuando se realizan las siguientes operaciones:

• Usuarios
  • Creación de usuario
  • Modificación de usuario
  • Eliminacion de usuario
• Objetos
  • Creación de un objeto
  • Modificación de un objeto (Recogida/Devolución)
  • Eliminación de un objeto

Activar Integración

Para activar la integración se debe declarar la variable TEAMS_WEBHOOK_URL en el archivo .env. La URL se podrá obtener en la creación del workflow.

Creación del Workflow

Para que la integración funcione debemos crear un workflow en PowerAutomate.

1. Creamos un flow automatizado en la nube.
2. Añadimos el bloque inicial: Cuando una petición de webhook es recibida (Desde ese bloque podremos obtener la URL del webhook).
3. Añadimos el bloque: Analizar JSON.

Se deberá añadir el siguiente schema de JSON:

{
    "type": "object",
    "properties": {
        "list": {
            "type": "string",
            "enum": [
                "user",
                "stock",
                "tracer"
            ]
        },
        "tipo": {
            "type": "string",
            "enum": [
                "add",
                "edit",
                "remove"
            ]
        },
        "correo": {
            "type": "string"
        },
        "nombre": {
            "type": "string"
        },
        "apellidos": {
            "type": "string"
        },
        "rol": {
            "type": "string"
        },
        "categoria": {
            "type": "string"
        },
        "lugar": {
            "type": "string"
        },
        "espacio": {
            "type": "string"
        },
        "descripcion": {
            "type": "string"
        },
        "usuario": {
            "type": "string"
        },
        "accion": {
            "type": "string"
        },
        "objeto": {
            "type": "string"
        },
        "fecha": {
            "type": "string",
            "format": "date-time"
        }
    },
    "required": [
        "list",
        "tipo"
    ]
}

A partir de este punto podremos gestionar las variables de las peticiones como deseemos.

Variables Disponibles

Variables requeridas y que siempre son enviadas:

• list| (string, enum:[user, stock, tracer]): Define la tabla a la que se refiere la operación.
• tipo | (string, enum:[add, edit, remove]): Define el tipo de operación.

Para las siguientes operaciones se envían los siguientes datos:

Usuarios

Operaciones de usuario:

Registro de Usuario

Se envían las variables cuando se registra un usuario:

• list= user
• tipo= remove
• correo= Correo del usuario registrado
• nombre= Nombre del usuario registrado
• apellidos= Apellidos del usuario registrado
• rol= Rol del usuario registrado

Edición de Usuario

Se envían las variables cuando se modifica la información de un usuario:

• list= user
• tipo= edit
• correo= Correo del usuario modificado
• nombre= Nuevo nombre
• apellidos= Nuevos apellidos
• rol= Nuevo rol

Eliminación de Usuario

Se envían las variables cuando se elimina a un usuario:

• list= user
• tipo= remove
• correo= Correo del usuario eliminado

Stock

Operaciones de stock:

Creación de Objeto

Se envían las variables cuando se crea un objeto:

• list= stock
• tipo= add
• nombre= Nombre del objeto creado
• categoria= Categoria del objeto
• lugar= Lugar del objeto
• espacio= Espacio del objeto
• descripcion= Descripción del objeto

Recogida/Devolución de Objeto

Se envían las variables cuando devuelve o recoge un objeto:

• list= stock
• tipo= edit
• nombre= Nombre del objeto modificado
• lugar= Nuevo lugar del objeto modificado
• espacio= nuevo espacio del objeto modificado

Eliminación de Objeto

Se envían las variables cuando se elimina un objeto:

• list= stock
• tipo= remove
• nombre= Nombre del objeto eliminado

Rastreador Stock

Operaciones de rastreo de stock:

Añadir registro

Se envían las variables cuando se recoge/devuelve un objeto:

• list= tracer
• tipo= add
• fecha= Fecha y hora de la recogida/devolución
• usuario= Correo del usuario que realizó la acción
• objeto= Nombre del objeto que ha sido actualizado
• accion= Tipo de acción cometida (Recogida/Devolución)
• lugar= Lugar del objeto tras la acción
• espacio= espacio del objeto tras la acción

Desarrollado con

• Vite
• React
• Capacitor
• Node.js

Autores

• Rafael Molleja Jiménez
• Laura Muñoz Jurado