GM Logística

Fecha: 10 de Enero de 2025
Versión: Ver. 1.0
Proyecto: GM-Logistico

Elaborado por:

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

Mexicali, BC. México

Historial de Cambios

Fecha	Secciones	Razón de Cambios	Autor(es)	Revisor(es)
10 de Enero de 2025	TODAS	Creación del documento	Yessica Santacruz

1. Introducción

1.1 Descripción del Proyecto

GM-Logística es una aplicación web diseñada para operar todos los aspectos relacionados a la logística de transportistas.

1.2 Tecnologías y Librerías Utilizadas

Se presenta el listado de tecnologías y sus versiones.

Frontend
- NodeJS: v14.17.3
- ReactJS: v18.3.1
- Redux: v9.1.2
- React Router: v6.25.1
- npm: v6.14.13
- JavaScript
- Axios: v1.7.2
- Formik: v2.4.6
- Material-ui: v5.16.6
Backend
- Java 19
- Rest
- Spring-boot: v3.0.6
- Hibernate: v6.3.1
- Maven

1.2.1 Librerías destacadas

Material UI v4

Para componentes de vista.

Redux

Para generar reducers que ayudan a gestionar el estado(state) de manera predecible, escalable y fácil de mantener, facilitando el manejo de datos entre componentes de una aplicación.

React Router

Proporciona una forma de gestionar la navegación entre diferentes vistas o componentes de una aplicación, lo que permite renderizar diferentes componentes o vistas a dependiendo de la URL que se utiliza.

Formik

Ayuda a manejar de manera sencilla y eficiente los estados de los formularios, la validación de los campos y la presentación de errores

Hibernate

Facilita la interacción entre las aplicaciones Java y bases de datos relacionales. Proporciona una manera eficiente de mapear objetos de Java a registros en bases de datos y viceversa, eliminando la necesidad de escribir consultas SQL complejas para interactuar con la base de datos.

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 lateral.

Los cátalogos no visibles en el menú lateral, es necesario desplazarse al modulo y seleccionar el cátalogo desde la ventana donse se visualizan.

3. Configuración inicial del proyecto

Frontend

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

Instalar Node.js en Windows

Antes de instalar cualquier librería, asegúrate de que las versiones de Node.js y npm cumplen con lo requerido.

Descargar el instalador de Node.js:

Ve al sitio oficial de Node.js: https://nodejs.org.
Descarga la versión v14.17.3 desde la sección de “Versiones anteriores” (Other Downloads).
Ejecutar el instalador:

Abre el archivo .msi descargado.

Sigue las instrucciones del asistente de instalación.
Asegúrate de seleccionar la opción para agregar Node.js al PATH (esto es importante para usarlo desde la línea de comandos).
Verificar la instalación:

Validar node.js y npm.

Abre la terminal (o el símbolo del sistema).
Ejecuta los siguientes comandos:

  node -v
  npm -v

Instalar Node.js en macOS

Usar el instalador oficial:

Ve a https://nodejs.org y descarga la versión v14.17.3 desde la sección de “Versiones anteriores”.
Abre el archivo .pkg descargado y sigue las instrucciones.

Usar Homebrew (opcional):

Si tienes Homebrew instalado, puedes instalar una versión específica de Node.js:

  brew install node@14

Luego, vincula esta versión:

  brew link --overwrite node@14

Verificar la instalación:

Abre la terminal y ejecuta:

  node -v
  npm -v

Instalar Node.js en Linux

Usar el gestor de versiones nvm (recomendado):

Instala nvm (Node Version Manager):

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Luego, reinicia tu terminal o ejecuta:

  source ~/.bashrc

Instala Node.js v14.17.3 usando nvm:

  nvm install 14.17.3

Usar el repositorio oficial de Node.js:

Agrega el repositorio:

  curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Instala Node.js:

  sudo apt install -y nodejs

Verificar la instalación:

  node -v
  npm -v

Instalar React, Redux, y React Router

Instalar librerías especificas:

  npm install react@18.3.1 react-dom@18.3.1 redux@9.1.2 react-redux react-router-dom@6.25.1

Crear un proyecto React con npm

Inicia un nuevo proyecto React:

  npx create-react-app my-app
  cd my-app

Instalar axios

  npm install axios@1.7.2

Instalar Formik

  npm install formik@2.4.6

Instalar Material-UI

Para Material-UI v5.16.6, instala los componentes y estilos principales:

  npm npm install @mui/material@5.16.6 @emotion/react @emotion/styled

Verificar dependencias instaladas

Después de ejecutar los comandos, verifica las versiones instaladas:

  npm list --depth=0

Debes ver v14.17.3 para Node.js y v6.14.13 para npm.

Clonar el Repositorio

Clonar el Repositorio:

  git clone http://192.168.2.248:3000/GM-Transport/logistico-front-vite

Ejecutar el Proyecto:

  npm start

Esto abrirá la aplicación en http://localhost:3000.

Backend

Instalar Java en Windows

Instalar Java

Ve a la página oficial de Oracle: https://www.oracle.com/java/technologies/javase-downloads.html.
Descarga la última versión del JDK (Java Development Kit) o una versión específica que necesites.
Abre el archivo .exe descargado.
Sigue las instrucciones del asistente de instalación.
Durante la instalación, toma nota de la ruta donde se instala Java (por ejemplo: C:\Program Files\Java\jdk-XX).

Configurar las variables de entorno:

Abre el menú Inicio y busca “Configuración avanzada del sistema”.
Haz clic en el botón Variables de entorno.

En la sección “Variables del sistema”:

Crea una nueva variable:

Nombre: JAVA_HOME
Valor: La ruta de instalación del JDK (por ejemplo: C:\Program Files\Java\jdk-XX).

Edita la variable Path:

Agrega %JAVA_HOME%\bin.

Verificar la instalación:

Abre el símbolo del sistema y ejecuta:

  java -version
  javac -version

Instalar Java en macOS

Descargar Java:

Ve al sitio oficial de Oracle: https://www.oracle.com/java/technologies/javase-downloads.html.
Descarga la versión del JDK que prefieras.

Instalar Java:

Abre el archivo .dmg descargado y sigue las instrucciones del instalador.

Configurar JAVA_HOME:

Abre el terminal y edita el archivo de configuración de tu shell (.zshrc o .bash_profile):

  nano ~/.zshrc

Agrega la siguiente línea al final del archivo:

  export JAVA_HOME=$(/usr/libexec/java_home)
  export PATH=$JAVA_HOME/bin:$PATH

Guarda los cambios y recarga la configuración:

  source ~/.zshrc

Verificar la instalación:

  java -version
  javac -version

Instalar Java en Linux

Instalar OpenJDK (recomendado):

Abre la terminal y ejecuta:

  sudo apt update
  sudo apt install openjdk-11-jdk

Reemplaza openjdk-11-jdk con la versión que necesites (por ejemplo, openjdk-17-jdk).

**Configurar JAVA_HOME:**

Encuentra la ruta del JDK instalado:

  sudo update-alternatives --config java

Toma nota de la ruta seleccionada.
Edita el archivo ~/.bashrc o ~/.zshrc:

  nano ~/.bashrc

Agrega las siguientes líneas:

  export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64
  export PATH=$JAVA_HOME/bin:$PATH

Guarda los cambios y recarga la configuración:

  source ~/.bashrc

Verificar la instalación:

  java -version
  javac -version

Instalar Maven

Descargar Maven

Ve a la página oficial de descargas de Maven: https://maven.apache.org/download.cgi
Descarga el archivo comprimido bin.zip o tar.gz según tu sistema operativo.

Instalar Maven en Windows

Extraer los archivos:

Extrae el archivo .zip descargado en una carpeta, por ejemplo: C:\Program Files\Apache\Maven.

Configurar las variables de entorno:

Abre el menú Inicio y busca “Configuración avanzada del sistema”.
Haz clic en el botón Variables de entorno.

En “Variables del sistema”:

Crea una nueva variable:

Nombre: MAVEN_HOME
Valor: La ruta donde descomprimiste Maven (por ejemplo: C:\Program Files\Apache\Maven).

Edita la variable Path:

Agrega %MAVEN_HOME%\bin.

Abre el símbolo del sistema y ejecuta:

  mvn -v

Debes ver la versión de Maven instalada.

Instalar Maven en macOS

Usar Homebrew (recomendado):

Si tienes Homebrew instalado, ejecuta:

  brew install maven

Instalar manualmente:

Extrae el archivo .tar.gz descargado en una carpeta, por ejemplo: /opt/maven.
Abre el terminal y edita el archivo de configuración de tu shell (.zshrc o .bash_profile):

  nano ~/.zshrc

Agrega las siguientes líneas:

  export MAVEN_HOME=/opt/maven
  export PATH=$MAVEN_HOME/bin:$PATH

Guarda los cambios y recarga la configuración:

  source ~/.zshrc

Verificar la instalación: Ejecuta:

  mvn -v

Instalar Maven en Linux

Instalar desde el repositorio del sistema:

En distribuciones basadas en Debian/Ubuntu:

  sudo apt update
  sudo apt install maven

En distribuciones basadas en Red Hat/CentOS:

  sudo yum install maven

Instalar manualmente:

Extrae el archivo .tar.gz descargado en una carpeta, por ejemplo: /opt/maven.
Configura MAVEN_HOME y el PATH editando el archivo ~/.bashrc o ~/.zshrc:

  nano ~/.bashrc

Agrega:

  export MAVEN_HOME=/opt/maven
  export PATH=$MAVEN_HOME/bin:$PATH

Guarda los cambios y recarga la configuración:

  nano ~/.bashrc

Verificar la instalación:

  mvn -v

Clonar el Repositorio

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

Clonar el Repositorio:

  git clone http://192.168.2.248:3000/GM-Transport/logistico-back

Instalar IDE de preferencia:

Para la documentación utilizaremos el IDE de visual studio code, por lo cual seguiremos la documentación oficial para la instalación y ejecución de un proyecto en Spring Boot.

Los servicios estarán disponibles en la ruta http://localhost:8091.

3.1 Conexión con servicios

Rutas de servicios

El proyecto se divide en tres ramas principales: master, develop, y calidad. Las ramas calidad y develop están conectadas al ambiente de pruebas, mientras que la rama 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 Logística Webdev (REACT_APP_API_URL):
  - http://190.9.53.4:9093/
- Backend Logística Spring Boot (REACT_APP_REPORT_URL):
  - <>
Ambiente de Producción:
- Backend Logística Webdev (REACT_APP_API_URL):
  - <>
- Backend Logística Spring Boot (REACT_APP_REPORT_URL):
  - <>

3.2 Organización de Directorios

Frontend

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.
- Files: directorio con los archivos usados para tutoriales.
- 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 lateral de navegación.
- routesCatalogos.js: archivo que contiene las rutas de la sección de catálogos.
- routesConfiguraciones.js: archivo que contiene las rutas de la sección a configuraciones.
.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.

Backend

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

src: Contiene los archivos del proyecto como:
- main/java/com/certuit/base
  - config: directorio con los archivos de configuración para la ejecución del proyecto.
  - domain: directorio con las clases auxiliares empleados por los servicios rest para el mapeo de datos.
  - endpoint: directorio que contiene todos los servicios rest disponibles.
  - services/base: directorio con las clases y funciones que contienen la lógica y reglas de negocio.
  - util: directorio con la utilería y archivo de conexión a la base de datos.
  - CertuitBaseApplicaction.java: clase main la cual ejecuta el proyecto.
- resources: Contiene los recursos del proyecto
  - application.yml: archivo de configuración principal del proyecto.