App Gestión de Microelectrónica

Aplicación Web para la Gestión de Productos de Microelectrónica implementando Spring Boot, Spring Data JPA, Maven, Lombok, Log4J, Thymeleaf, Bootstrap, JS Vanilla, Oracle y Otras Tecnologías.

• Base de Datos del Proyecto.

Índice 📜

Ver

Sección 1) Descripción, Tecnologías y Dependencias

• 1.0) Descripción del Proyecto.
• 1.1) Patrones de Diseño.
• 1.2) Tecnologías.
  • 1.2.1) Descargas.
• 1.3) Dependencias Maven.

Sección 2) Endpoints y Recursos

• 2.0) EndPoints.
• 2.1) Recursos y Servicios.

Sección 3) Prueba de Funcionalidad y Referencias

• 3.0) Prueba de Funcionalidad.
• 3.1) Referencias.

Sección 4) Creación y Configuración Proyecto Spring Boot desde cero

• 4.0) Creación con Maven en Spring Tool Suite 4.
• 4.1) Otras Configuraciones del Proyecto.

Sección 1) Descripción, Tecnologías y Dependencias

1.0) Descripción 🔝

Ver

• La aplicación consta de todas las Operaciones CRUD a Nivel DB, Paginación de Componentes, Filtros y Búsqueda, Ordenamientos por campos, Generación de Reportes en PDF con openPDF y Excel con Apache POI, Generación de Gráficos de Barras y Áreas con High Charts según el stock del producto en relación al fabricante o categoría, etc.
• Se pone a disposición todos los recursos anteriores para únicamente la Tabla Componentes de la Base de Datos.
• Importante : La api de este proyecto, desarrolada en su versión V1 está incluida dentro de esta app. En el proyecto se aplica la lógica similar a la original con nuevas funcionalidades para las vistas, controllers, etc. También los recursos necesarios para el uso de Thymeleaf.

• Base de Datos del Proyecto.
• PlayList para la Comprobación de Funcionalidades
• La Api Rest de este proyecto está incluida

1.1) Patrones de Diseño 🔝

Ver

Patrón de Diseño	Finalidad
DAO	Uso de interfaces entre la aplicación y el almacenamiento de datos.
MVC	Separación y Representación de los Datos, Manejo de errores, Escalabilidad, etc

1.2) Tecnologías 🔝

Ver

Tecnologías	Versión	Finalidad
Java	12.0.2	JDK
Spring Tool Suite 4	4.9.0	IDE
Spring Boot	2.6.4	Framework
Spring Boot Data JPA	2.6.3	Mapeo de objetos y persistencia en la db
Spring Validation	2.7	Anotations para Validaciones
Bootstrap	5.1	Framework Maquetación
Thymeleaf	2.6.4	Plantillas para el Front
Maven	4.0.0	Gestor de Proyectos
Lombok	1.18.22	Automatización de Código
UI Swagger	3.0.0	Visualización y Gestión de la Api
Postman	9.1.1	Visualización y Gestión de la Api
Oracle XE 21c	21.4.1	Sistema de Gestión de Bases de Datos
SQL Developer	21.4.1	Editor de Base de Datos
CMD	10	Símbolo del Sistema para linea de comandos
GNU bash / Terminal	4.4.23	Bash / Terminal para el manejo e implementación de Git integrado al Spring Tool Suite
Git	2.29.1	Control de Versiones

1.2.1) Descargas 🔝

Ver

• Java-JDK 12
• Spring Tool Suite 4
• Lombok
• Postman
• Oracle
• SQL Developer
• MongoDB Compass
• Git

1.3) Dependencias Maven 🔝

Ver

Dependencia Maven	Versión	Finalidad
spring-boot-starter-data-jpa	2.6.7	Api de JpaRepository para el manejo de métodos
spring-boot-starter-test	2.6.7	Para Testing
spring-boot-starter-web	2.6.7	Se agrega toda la configuración web automáticamente de Maven a Spring
spring-boot-starter-validation	2.7.0	Validación de Annotations
spring-boot-devtools	2.6.7	Herramientas para el Manejo de Spring Boot
spring-boot-starter-thymeleaf	2.6.4	Plantillas para el Front
jaxb-api	4.0	Serialización de Objetos Java a XML
jackson-databind	4.0	Serialización de Objetos Java a JSON
javax-annotation-api	4.0	Api para la lectura de annotations
ojdbc8	21.3.0.0	Driver para el SGDB Oracle
lombok	1.18.22	Dependencia para la automatización de Código
openpdf	1.3.27	Generación de Reportes en Formato PDF
poi	5.2.0	Generación de Reportes en Formato EXCEL
poi-ooxml	5.2.0	Manejo de Recursos Formato EXCEL
springfox-swagger-ui	3.0.0	Doc Api
postgresql	42.3.4	Driver para el SGDB PostgreSQL
lombok	1.18.22	Dependencia para la automatización de Código

Sección 2) EndPoints y Recursos

2.0) EndPoints 🔝

Ver

• http://localhost:8098/v1/componentes
• http://localhost:8098/v1/componentes-detalles
• http://localhost:8098/v1/componentes-transistores-bipolares
• http://localhost:8098/v1/componentes-capacitores-electroliticos

2.1) Recursos y Servicios 🔝

Ver

Inicio Componentes

Gráficos de Área y Barra para Stock de Componentes por Categoría y Fabricante

Reportes en Excel y PDF para el Listado de Componentes Paginados según N° de Página

Listado de Componentes Paginados

Filtrado de Componentes por Capacitores Electrolíticos

Formulario Agregar Componente

Vista Eliminar Componente

Vista Post Actualización de Componente

Vista Servicio de Ayuda

Sección 3) Prueba de Funcionalidad y Referencias

3.0) Prueba de Funcionalidad 🔝

Ver

Vistas y Funcionalidades Generales (Ver)

Tabla y Filtros de Componentes por Categoría (Ver)

Buscador de Componentes con Filtro Genérico (Ver)

Paginación de Componentes y Ordenamientos (Ver)

Descarga de Componentes Archivos PDF y XLSX (Ver)

Gráficos de BarraÁrea Stock de Comp. por Categoría (Ver)

Gráficos de BarraÁrea Stock de Comp. por Fabricante (Ver)

Tablas Guías de Ayuda (Ver)

Formulario Agregar Componentes (Parte01) (Ver)

Formulario Agregar Componentes (Parte02) (Ver)

Eliminar Componentes (Ver)

Formulario Actualizar Componentes (Ver)

3.1) Referencias 🔝

Ver

Doc No Oficial Recomendada

Api Rest con Thymeleaf/ Spring Boot

• Api Rest Spring Boot thynmeleaf
• Casos de Usos
• Crud Thymeleaf

Doc Gráfica No Oficial Recomendada

• Crud
• Spring MVC

Sección 4) Creación y Configuración Proyecto Spring Boot desde cero

4.0) Creación con Maven en Spring Tool Suite 4 🔝

Ver

• Primeramente deberás configurar tu espacio de trabajo, en donde se alojará la aplicación. Cada vez que muevas el Proyecto de Directorio, recomiendo crear o setear nuevamente el Espacio de Trabajo.

• Una vez abierto Spring Tool Suite 4

  • --> Seleccionas la Pestaña File
  • --> New
  • --> Spring Starter Proyect (Si no aparece buscar en Other).

• Se abrirá una Interfaz Gráfica, por defecto dejar marcado lo siguiente con los siguientes valores por defecto

  • --> Service Url : https://start.spring.io
  • --> Use default location por defecto (es la ruta absoluta de tu workspace)
  • --> Type : Maven
  • --> Java Version : 8
  • --> Packaging : Jar
  • --> Language : Java
  • --> Artifact : Por Defecto como está (cambia automáticamente cuando escribimos el Name del Proyect) * --> Version : Por Defecto como está * --> Working Sets Desmarcado.

• Configuramos lo restante

  • --> Name : GestionMicroelectronica (Nombre del proyecto, en mi caso este). Debe cambiarse aut. el Artifact
  • --> Group : com.gestion.microelectronica (Nombre del grupo, en mi caso este).
  • --> Description: Creación de una Aplicación Web para la Gestión de Productos de Microelectrónica (en mi caso).
  • --> Package : com.gestion.microelectronica (Nombre del grupo, este en mi caso).
  • --> Next

• En la Nueva Interfaz Gráfica elegimos la versión y dependencia

  • --> Spring Boot Versión : 2.6.4 o una que no sea la última
  • --> Vamos a seleccionar las dependencias necesarias
  • --> Dependencias : Spring Web, Spring Data JPA, Spring Boot DevTools, Lombok, Thymeleaf y Oracle Driver
  • --> Next, Next y Seguidamente Finish.

• Esperar a que finalice Spring la creación del Proyecto

4.1) Otras Configuraciones del Proyecto 🔝

Ver

(Para este paso se anexan configuraciones que para el Proyecto son relevantes, capaz creando el Proyecto desde otro IDE se autoconfiguran dichas configuraciones).

4.0.1) Actualización de Java-1.7 a 1.8 (Si seleccionaste una versión Moderna de Spring no es Necesario esto)

• Vamos al pom.xml (el archivo al final de todo)

• Dentro de el tag properties donde dice java.versión cambiar la version del compiler a 1.8, ctrl+s para guardar

• Click Derecho sobre el Proyecto

  • --> Maven
  • --> Update Proyect
  • --> Fijate que el Proyecto este seleccionado y Boton ok

• Si cambio JavaSE-1.7 a JavaSE-1.8 se efectuo el cambio

4.0.2) Paquetes Maven (Java Resources). (Si seleccionaste una versión Moderna de Spring no es Necesario esto)

• Por Defecto Viene deshabilitada la opción de paquetes Maven, en donde vamos a guardar nuestros paquetes y clases
  • --> Para habilitar las mismas, click Der sobre el Proyecto.
  • --> Properties.
  • --> Buscamos la sección Java Build Path
  • --> Seleccionamos la casilla Maven Dependencies.
  • --> Apply and Close.
  • --> F5 y deberían aparecer src/main/java y src/test/java

Siguiente sección en proceso de actualización!

Ver

Indice

Sección 2) Dependencias del Proyecto, Descarga de Lombok y Archivo de Propiedades

• Paso 3) Listado de Dependencias.

• Paso 4) Descarga de Lombok.

• Paso 5) Archivo de Propiedades(application.properties).

Sección 3) Configuración de los Services

• Paso 6) Configuración del Service ComponenteService

• Paso 7) Configuración del Service ComponenteDetalleService

• Paso 8) Configuración del Service ComponenteCapacitorElectroliticoService

• Paso 9) Configuración del Service ComponenteTransistorBipolarService

Sección 4) Configuración de los Controllers

• Paso 10) Configuración del Controller ComponenteController

• Paso 11) Configuración del Controller ComponenteDetalleController

• Paso 12) Configuración del Controller ComponenteCapacitorElectroliticoController

• Paso 13) Configuración del Controller ComponenteTransistorBipolarController

Sección 5) Creación de las Vistas con Thymeleaf

• Paso 14) Creación de la Vista

Sección 9) Uso y Manejo de Git

• Paso 26) Descarga y Configuración de Git

• Paso 27) Subir el proyecto al repositorio de github desde la consola de git

• Paso 28) Actualización del repositorio del proyecto desde la consola de GIT

Sección 2) Dependencias del Proyecto, Descarga de Lombok y Uso del SGDB Oracle

Paso 3) Listado de Dependencias

(Las siguientes dependencias del Proyecto deberán estar en el pom.xml para el correcto funcionamiento del Proyecto).

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-mongodb</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<!-- LOMBOK -->
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>


		<!-- SPRING VALIDATIONS -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-validation</artifactId>
		</dependency>

		<!-- PARA TRABAJAR CON LOS VALIDATORS -->
		<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
		<dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
		</dependency>


		<!-- SPRING SECURITY TEST -->
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-test</artifactId>
			<scope>test</scope>
		</dependency>

		<!-- SPRING SECURITY -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-security</artifactId>
		</dependency>

		<!-- JSON WEB TOKEN -->
		<!-- https://mvnrepository.com/artifact/com.auth0/java-jwt -->
		<dependency>
			<groupId>io.jsonwebtoken</groupId>
			<artifactId>jjwt</artifactId>
			<version>0.9.1</version>
		</dependency>
		
			<!-- REFRESH TOKEN -->
		<!-- https://mvnrepository.com/artifact/com.nimbusds/nimbus-jose-jwt -->
		<dependency>
			<groupId>com.nimbusds</groupId>
			<artifactId>nimbus-jose-jwt</artifactId>
			<version>9.22</version>
		</dependency>
		
		
			<!-- SWAGGER -->
		<!-- https://mvnrepository.com/artifact/io.springfox/springfox-boot-starter -->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-boot-starter</artifactId>
			<version>3.0.0</version>
		</dependency>
		
		<!-- SWAGGER -->
		<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>3.0.0</version>
		</dependency>
		
		
		<!-- CONVERTIR OBJETOS JAVA EN OBJETOS XML -->
		<!-- https://mvnrepository.com/artifact/javax.xml.bind/jaxb-api -->
		<dependency>
			<groupId>javax.xml.bind</groupId>
			<artifactId>jaxb-api</artifactId>
		</dependency>

		<!-- CONVERTIR OBJETOS JAVA EN OBJETOS JSON -->
		<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
		</dependency>
		<!-- API LECTURA DE ANNOTATION -->
		<!-- https://mvnrepository.com/artifact/javax.annotation/javax.annotation-api -->
		<dependency>
			<groupId>javax.annotation</groupId>
			<artifactId>javax.annotation-api</artifactId>
		</dependency>

• ...
• Ctrl + s Guardas
• Click Der sobre el proyecto
• Maven y update Maven o Alt + F5
• Fijarse dentro de Maven Dependencies si Maven descargo las mismas

Paso 4) Descarga de Lombok

• Seguidamente de tener el jars a través de la dependencia en nuestro proyecto, vamos a instalar lombok para poder utilizarlo, no basta con la descarga, hay que realizar la configuración y descarga del mismo en nuestro ordenador.
• Buscamos el jar en Maven Dependencies lombok-1.18.... Click derecho y properties
• Pestaña Java Source Attachment y buscamos el Path donde se descargo el jar de lombok.
• Nos dirigimos a dicha carpeta, en mi caso C:\Users\andre\.m2\repository\org\projectlombok\lombok\1.18.22 y ejecutamos el jar de lombok lombok-1.18.22.jar
• VAMOS A REALIZAR LA INSTALACIÓN EN LA CARPETA DE CONFIGURACIÓN DE NUESTRO IDE SELECCIONANDO SELECCIONANDO SPECIFY LOCATION, EN MI CASO SPRING TOOL SUITE C:\Program Files (x86)\sts-4.13.1.RELEASE
• Instalamos, siguiente siguiente...
• Cerramos y Abrimos el IDE para que los cambios se ejecuten correctamente

Paso 5) Configuraciones del application.properties

(Vamos a utilizar el esquema de conexión de nuestra db ya creado en otro repositorio acerca de productos de microelectronica, las dudas referentes a la misma se encuentra en su respectivo repositorio....https://github.com/andresWeitzel/db_microelectronica_Oracle)

Sección 3) Configuración de los Services

(Toda la Capa de Negocios fue desarrollada en la Api-Rest original del proyecto, y esta fue documentada en su respectivo repositorio, pero tener en consideración que se ha desarrollada nuevas funcionalidades para esta app, por ende puede ocurrir que la api original difiera de la api de este proyecto. LA API DE ESTE PROYECTO , DESARROLLADA EN SU VERSIÓN V1, ESTÁ INCLUIDA DENTRO DE ESTA APP, EN EL PROYECTO SE APLICA LA LOGICA SIMILAR A LA ORIGINAL CON NUEVAS FUNCIONALIDADES PARA LAS VISTAS Y EL MANEJO DE THYMELEAF ).

Paso 6) Configuración del Service ComponenteService

• Dentro de la jerarquia de paquetes com.gestion.microelectronica creamos el paquete services
• Dentro del mismo la Clase ComponenteService
• Agregamos la annotation @Service de la clase haciendo referencia para Spring y @Autowired para implementar Inyección de Dependencias de la interfaz creada.
• Usamos log4j para los logs de error en los métodos CRUD para la persistencia.
• Desarrollamos el cuerpo de cada método de busqueda de la interfaz creada
• Cada uno de los Métodos CRUD tiene su comprobación de Persistencia y devolverán un booleano según el resultado de la operación, los mismos pueden ser modificados para adicionar mayor seguridad.
• Aplicaremos el metodo de listado de tipo getAll para paginados y el otro método getAll para el listado completo de componentes
• Código..

Paso 7) Creación y Configuración del Service ComponenteDetalleService

(Se realiza el mismo procedimiento descrito detalladamente en el Paso Anterior)

• Código..

Paso 8) Creación y Configuración del Service ComponenteCapacitorElectroliticoService

(Se realiza el mismo procedimiento descrito detalladamente en los Pasos Anteriores)

• Código..

Paso 9) Creación y Configuración del Service ComponenteTransistorBipolarService

(Se realiza el mismo procedimiento descrito detalladamente en los Pasos Anteriores)

• Código..

Sección 4) Configuración de los Controllers

(Toda la Capa de Negocios fue desarrollada en la Api-Rest original del proyecto, y esta fue documentada en su respectivo repositorio, pero tener en consideración que se ha desarrollada nuevas funcionalidades para esta app, por ende puede ocurrir que la api original difiera de la api de este proyecto. LA API DE ESTE PROYECTO , DESARROLLADA EN SU VERSIÓN V1, ESTÁ INCLUIDA DENTRO DE ESTA APP, EN EL PROYECTO SE APLICA LA LOGICA SIMILAR A LA ORIGINAL CON NUEVAS FUNCIONALIDADES PARA LAS VISTAS Y EL MANEJO DE THYMELEAF ).

Paso 10) Creación y Configuración del Controller ComponenteController

• Dentro de la jerarquia de paquetes com.inmueble.service creamos el paquete controller
• Dentro del mismo la Clase Controller ComponenteController
• Agregamos la annotation @RestController de la clase haciendo referencia al controlador y la annotation @RequestMapping haciendo referencia a la ruta principal de acceso para Spring.
• Implementamos @Autowired para Inyección de Dependencias del service creado.
• Utilizamos @PostMapping y @GetMapping para el uso de los métodos del protocolo HTTP
• También hacemos uso de las annotations @RequestBody para recuperar el cuerpo de la solicitud HTTP y el @PathVariable para el manejo de las variables declaradas
• Usamos log4j para los logs de error en los métodos CRUD para la persistencia.
• Desarrollamos el cuerpo de cada método de la interfaz
• Cada Método CRUD de Tipo HTTP (POST, DELETE, PUT, GET) tiene su comprobación de Persistencia y los métodos devolverán un booleano según el resultado de la operación, menos el get que trae el Componente. Los mismos pueden ser modificados para adicionar mayor seguridad.
• Además crearemos un método que nos devolverá la vista del front para la tabla de componentes(Componentes.html) y a su vez seteamos un objeto que representará la lista de componentes , dicho método se llamará ModelandView y nos devolverá la vista

• Código del Controller...

Paso 11) Creación y Configuración del Controller ComponenteDetalleController

• Mismos Procedimientos que el controlador anterior

Paso 12) Creación y Configuración del Controller ComponenteCapacitorElectroliticoController

• Mismos Procedimientos que los controladores anteriores

  
  

Paso 13) Creación y Configuración del Controller ComponenteTransistoresBipolaresController

• Mismos Procedimientos que los controladores anteriores

Sección 6) Creación de las Vistas con Thymeleaf

Paso zy) Creación de la Vista componentes.html

(Esta vista contendrá el listado de componentes de la tabla componentes)

• Para el uso y manejo de Thymeleaf debemos tener instalado el plugin a través de Eclipse Marketplace
• Click en Help, luego Eclipse Marketplace, buscamos Thymeleaf e instalamos el plugin según la versión de cada IDE
• Seguidamente creamos un archivo de tipo HTML dentro del directorio templates , click derecho sobre templates (src/main/resources/templates)
• Buscamos en Other html, selecionamos html file, asignamos el nombre componentes.html

Sección 9) Uso y Manejo de Git.

Paso 26) Descarga y Configuración de Git

26.1) Descarga de Git

• Nos dirigimos a https://git-scm.com/downloads y descargamos el versionador
• Como toda aplicacion siguiente.... siguiente....
• IMPORTANTE:NO TENER DBEAVER ABIERTO DURANTE LA INSTALACION, SINO NO RECONOCE EL PATH

26.2) Abrir una Consola de Git (Git Bash) desde Windows

• --> Escribimos Git Bash desde el Buscador de Windows
• --> Desde la consola escribimos el comando cd seguidamente de la ruta del proyecto
• --> Tenemos que tener la ruta del Proyecto y pegarla en el Git Bash
• --> Una vez dentro del Proyecto podremos hacer uso de Git

Paso 27) Subir el proyecto al repositorio de github desde la consola de git

27.1) Creamos un nuevo repositorio en GitHub.

27.2) Inicializamos nuestro repositorio local .git desde la terminal.

• git init

27.3) Agregamos lo desarrollado a nuestro repo local desde la terminal.

• git add *

27.4) Agregamos lo que tenemos en nuestro repo local al área de Trabajo desde la terminal.

• git commit -m "agrega un comentario entre comillas"

27.5) Le indicamos a git donde se va a almacenar nuestro proyecto(fijate en tu repositorio de github cual es el enlace de tu proyecto(esta en code)).

• git remote add origin https://github.com/andresWeitzel/AppGestionMicroelectronica_SpringBoot

27.6) Subimos nuestro proyecto.

• git push -u origin master

Paso 28) Actualización del repositorio del proyecto desde la consola de GIT

28.1) Visualizamos las modificaciones realizadas en local

• git status

28.2) Agregamos lo modificado al área de trabajo

• git add *

28.3) Confirmamos las modificaciones realizadas

• git commit -m "tu commit entre comillas"

28.4) Sincronizamos y traemos todos los cambios del repositorio remoto a la rama en la que estemos trabajando actualmente.

(SOLO SI SE REALIZARON CAMBIOS DESDE OTRA LADO, ej: en github u/o/y un equipo de trabajo)

• git pull https://github.com/andresWeitzel/AppGestionMicroelectronica_SpringBoot

28.5) Enviamos todos los cambios locales al repo en github

• git push https://github.com/andresWeitzel/AppGestionMicroelectronica_SpringBoot

28.6) En casos extremos pisamos todo el repositorio

• git push -f --set-upstream origin master