Escaner (WEB)

Manual técnico

Escaner (WEB)

• Documento original
• Video presentación

Fecha: 13 de agosto de 2024
Versión: Ver. 1.0
Proyecto: GM-PQ

Elaborado por:

Certuit Software S. de R.L de C.V.
Cerro de las Campanas No. 384, Insurgentes Oeste, CP. 21280

Mexicali, BC. México

Historial de Cambios

Fecha	Secciones	Razón de Cambios	Autor(es)	Revisor(es)
13 de agosto de 2022	TODAS	Creación del documento	Esteban Valencia	Adrian Renteria
2 de septiembre del 2024	TODAS	Actualización de contenido y formato	Jocelyn Martinez

GM Escáner Paquetería Sistema Web

1 Introducción

1.1 Descripción del Proyecto

GM Scanner Paquetería Sistema Web es una aplicación web diseñada para ser utilizada por el personal de las empresas de logística. El propósito es mantener un control en los procesos de carga y descarga de mercancía.

1.2 Tecnologías y Librerías Utilizadas

Tecnologías

• NodeJS: v14.17.3

• ReactJS: v17.0.1

• React Router: v5.2.0

• npm: v6.14.13

• JavaScript

  1.2.1 Librerías destacadas

Material UI v4 y v5

Para componentes de vista. El proyecto pasó por una etapa de migración de la versión 4 a la versión 5, por lo que puede haber código existente a la versión 4 aún.

Bootstrap

El proyecto se inició usando Bootstrap para los componentes de vista pero se fue migrando a Material UI, sin embargo, aún hay código de bootstrap.

2 Arquitectura del Proyecto

2.1 Navegación

La navegación dentro del proyecto se hace usando React Router. Se puede observar la configuración en el archivo App.js ubicado en la carpeta src en la raíz del proyecto.

Visualmente se accede a los procesos por medio de una barra de navegación inferior.

3 Configuración Inicial del Proyecto

Seguir los pasos descritos para configurar el proyecto en un ambiente de desarrollo (local):

1. Clonar el Repositorio:

git clone http://190.9.53.4:3000/GM-Transport/paqueteria-escaner.git

2. Descargar librerías:
   • Ejecutar el comando npm install
3. Ejecutar el Proyecto:
   • Para ejecutar, correr el comando npm start
   • Esto abrirá la aplicación en http://localhost:3000.
   • Si todo pasa sin errores se verá la pantalla de login

3.1 Conexión con servicios

Rutas de servicios

El proyecto se divide en cuatro ramas principales: master, release, develop, y calidad. Las ramas calidad y develop están conectadas al ambiente de pruebas, mientras que la rama release a preproducción y master a producción.

Las URLs de cada ambiente se encuentran en el archivo .env que se ubica en la raíz del proyecto.

• Ambiente de Pruebas:
  • Backend Paquetería Spring Boot (REACT_APP_REPORT_URL):
    • http://paqueteria.desarrollo.gmtransport.co:8081/reportes/
• Ambiente de Pre-producción:
  • Backend Paquetería Spring Boot (REACT_APP_REPORT_URL):
    • https://paqueteria-calidad.gmtransport.co/reportes
• Ambiente de Producción:
  • Backend Paquetería Spring Boot (REACT_APP_REPORT_URL):
    • https://paqueteria.gmtransport.co/reportes/

Es importante mencionar que la forma de identificar qué base de datos se va consultar es a través del RFC del cliente. Para esto se manda el RFC como header en todas las peticiones de backend.

3.2 Organización de Directorios

La estructura de directorios del proyecto está organizada de la siguiente manera:

Proyecto

• scr: contiene los archivos del proyecto tal cual, componentes, paginas, etc.
  • Constants/index: contiene encabezados para peticiones http, plantillas para la impresión de etiquetas y otras configuraciones.
  • iconos: directorio con las imágenes usadas en el sistema, desde logos, hasta iconos.
  • Util/Context: directorio con los archivos context que contienen las urls de los servicios.
  • Views: directorio que contiene todas los los archivos que corresponden a las vistas.
  • index.js: aplicación principal
  • routes.js: archivo que contiene las rutas de la barra inferior de navegación.
• .env: archivo que contiene las url de los diferentes ambientes. Cambia dependiendo la rama en la que se encuentre.
• package.json: archivo que contiene las librerías necesarias para el proyecto.

4 Procesos

4.1. Inicio de sesión

Descripción general

Este flujo se desarrolla iniciando en la clase Login.js. El flujo de login se encarga de autenticar al operador y redirigirlo a la pantalla principal.

Inicialización de la vista

Al ingresar a cualquier página del sistema se valida una sesión activa. Si hay sesión activa se permitirá entrar a la página. Si no hay sesión se redirigirá a la pantalla de inicio de sesión

Acciones del usuario

Iniciar sesión

Los datos necesarios para el login son el número del operador y el RFC de la empresa. Al presionar el botón para iniciar sesión se realiza la siguiente petición al backend:

• URL:
  • /api/Operador/ValidarLoginPaqueteria
• Variables:
  • usuario
• Headers:
  • RFC de la empresa

Después de un inicio de sesión exitoso, el usuario es redirigido al módulo de Carga.

4.2. Carga

Descripción general

Este proceso se desarrolla iniciando en el archivo Carga.js. El proceso de carga consiste en agregar guías a un informe conforme se va subiendo la mercancía a la unidad que la transportará. Es necesario que todos los paquetes de la guía sean escaneados para que se considere la guía dentro del informe. La administración se hace por medio del escaneo del código QR ubicado en las etiquetas de la mercancía. Las etiquetas pueden ser impresas o descargadas desde el módulo Guías en el sistema web de paquetería. Para que las guías puedan ser agregadas, el informe ya debe haber sido creado como informe vacío.

Inicialización de la vista

El proceso inicia cargando el listado de informes que se encuentran disponibles para que guías puedan ser agregadas. Los informes se obtienen con el endpoint:

• URL:
  • /api/Informes/GetListadoEscaner/ByOperador/{IdOperador}
• Variables:
  • operador

Al obtener la respuesta se puede seleccionar un informe. Al seleccionar un informe se cargará la información que ya contiene dicho registro, la cantidad de paquetes, guías, el peso total, entre otros.

Acciones del usuario

Guardar borrador

En caso de que la carga se vea interrumpida, se puede guardar el progreso para continuar en otro momento presionando el botón Generar Borrador. Al presionar se guardará la información usando el siguiente endpoint:

• URL:
  • /api/Informes/cargaAgregarListadoBorrador/{IdInforme}
• Variables:
  • informe
• Body:
  • listado de paquetes

Cuando la información se guarde correctamente se limpiará la pantalla. La información del borrador será recuperada al seleccionar nuevamente el informe. Mientras la información esté en borrador, no se agregará al informe final.

Finalizar Carga

Para finalizar la carga es necesario que todos los paquetes de las guías hayan sido escaneados y presionar el botón Finalizar Carga ubicado en la parte inferior. Al presionar se guardará la información usando el siguiente endpoint.

Finalizar carga

• URL:
  • /api/Informes/ModificarEscaner
• Body:
  • informe
  • listado de guías

Si la operación es exitosa se limpiará la pantalla y la información puede ser confirmada consultando el informe en el sistema web. Si surge algún error se muestra un mensaje al operador y los datos permanecen en el formulario.

4.3. Descarga

Descripción general

Este proceso se desarrolla iniciando en el archivo Descarga.js. El proceso de descarga consiste en verificar que todos los productos de una guía son descargados de la unidad por medio del escaneo del QR de las etiquetas. Es necesario que todos los paquetes de la guía sean escaneados para que se considere la guía descargada.

Inicialización de la vista

El proceso inicia escaneando el código QR presente en el reporte del informe. Al escanear se cargará el listado de paquetes que corresponde al informe. La información se obtiene usando el siguiente endpoint:

• URL:
  • /api/Informes/GetById/Escaner/{IdInforme}
• Variables:
  • informe

Al obtener la respuesta se mostrará el listado de paquetes. Conforme se vayan escaneando paquetes, en el listado se marcarán con un indicador para llevar un control visual y así el operador podrá notar que paquetes faltan escanear.

Acciones del usuario

Guardar borrador

En caso de que la descarga se vea interrumpida, se puede guardar el progreso para continuar en otro momento presionando el botón Generar Borrador. Al presionar se guardará la información usando el siguiente endpoint:

• URL:
  • /api/Informes/descargaAgregarListadoBorrador/{IdInforme}
• Variables:
  • informe
• Body:
  • listado de paquetes

Cuando la información se guarde correctamente se limpiará la pantalla. La información del borrador será recuperada al escanear nuevamente el informe. Mientras la información esté en borrador, no se reflejará en el informe final.

Finalizar Descarga

Para finalizar la descarga es necesario que todos los paquetes de las guías hayan sido escaneados y presionar el botón Validar todos los paquetes ubicado en la parte inferior. Al presionar se guardará la información usando el siguiente endpoint.

Finalizar descarga

• URL:
  • /api/Informes/AgregarLlegada/{IdInforme}

Al finalizar descargar marcará la llegada del informe a su destino, del mismo modo que se marca llegada en el sistema web desde la sección Detalle de Paradas en el módulo de Viajes.

Si la operación es exitosa se limpiará la pantalla y la información puede ser confirmada consultando el informe en el sistema web. Si surge algún error se muestra un mensaje al operador y los datos permanecen en el formulario.

4.4. Cerrar sesión

Descripción general

Este proceso se desarrolla iniciando en el archivo Scanner.js. Cerrar sesión deja disponible el dispositivo para el uso de otro operador.

Acciones del usuario

Cerrar sesión

Para cerrar sesión sólo se debe presionar el botón Salir de la barra inferior de navegación. Al presionar se borrara la bandera que indica una sesión activa y se redirigirá a la pantalla de inicio de sesión.