App MicroFrontEnd Productos de Supermercado

Micro Front End acerca de productos de supermercado implementando Angular, Bootstrap, SCSS, HTML5, Highchart, Spring-Boot, Spring Security, Spring MVC, Microservicios, SpringFox, Swagger UI, Git, DBeaver, PgAdmin, PostgreSQL y Otras Tecnologías.

• Repositorio Api Rest
• Repositorio base de datos
• PlayList pruebas de funcionalidad

Índice 📜

Ver

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

• 1.0) Descripción del Proyecto.
• 1.1) Ejecución del Proyecto.
• 1.2) Tecnologías.

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 1) Descripción, Tecnologías y Dependencias

1.0) Descripción 🔝

Ver

• El enfoque de la aplicación es la gestión de productos, si bien se ha desarrollado también el back para la gestión de usuarios, este recurso aplica solo desde la Api, con postman o desde swagger ui, se implementa el Modelo de Negocios para un MicroFrontEnd, por ende se deberá desarrollar otra app para la gestión de dichos usuarios.
• Como sistema de seguridad para manejo de recursos de la app se usa Spring Security y JWT. Las Operaciones Transaccionales fueron modificadas para que solamente los administradores del sistema tengan acceso, los usuarios convencionales solamente podrán visualizar los productos y filtrar búsquedas acerca de estos según el requerimiento deseado.
• Todos los formularios aplican validaciones de carácteres, longitudes, tamaños, valores numéricos, valores mal formados, email, contraseña, url de imágenes, etc.
• Se implementa Paginación Completa.
• Se aplican dos filtros de búsqueda, uno para productos de forma genérica y otro según el campo deseado, permitiendo coincidencias de carácteres y palabras.
• Para la experiencia de usuario se utiliza Popupts, Loaders, Angular Material, Etc.
• Es posible descargar el Listado de Productos Paginado en formato xlsx(excel), csv y pdf.
• Todas las Páginas de la Aplicación poseen modals de Ayuda.
• Entre Otros Recursos Disponibles.
• Aclaración : ESTE MICROFRONTEND NO ES COMPLETAMENTE RESPONSIVE. El enfoque es la funcionalidad de la aplicación, la maquetación es totalmente aplicable en relación al tiempo de disponibilidad que se emplee.

• Repositorio Api Rest
• Repositorio base de datos
• PlayList pruebas de funcionalidad

1.1) Ejecución del Proyecto 🔝

Ver

• Crear un entorno de trabajo a través de algún IDE
• Clonar el Proyecto (git clone https://github.com/andresWeitzel/App_MicroFrontEnd_Productos_Supermercado)
• Posicionarnos sobre el proyecto
  • cd proyecto
• Dentro del directorio instalar todos los plugins implementados
  • npm i
• Ejecutar la base de datos
• Ejecutar la api rest
• Ejecutar el proyecto
  • ng serve

1.2) Tecnologías 🔝

Ver

Tecnologías FRONTEND	Versión	Finalidad
HTML	5.0	Lenguaje de Hipertexto
Css	3.0	Lenguaje de hojas de estilo para presentación de documentos.
Scss	1.57	Preprocesador de css.
Angular	13.3.0	FrameWork Web Desarrollo de Apps con TypeScript
Angular CLI	13.3.0	Herramienta de Angular para depurar, crear, publicar, etc Apps
Angular Material	13.3.9	UI librería de componentes
ng-angular-popup	0.1.2	Mensajes emergentes personalizados
jspdf/html2canvas	-	Pdf Export
xlsx	-	Excell/Csv Export
ngx-ui-loader	13.0.0	Animaciones de carga
Highchart	13.3.9	Librería para la generación de gráficos
Bootstrap	5.1	FrameWork Web Diseño y Desarrollo de Apps
Visual Studio Code	1.51.1	Entorno de Desarrollo

Tecnologías BACKEND	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 Security	2.6.7	Servicios de Seguridad
JSON Web Token	0.9.1	Creación de tokens de acceso
Maven	4.0.0	Gestor de Proyectos
Postman	9.4.1	Test de Apis
Lombok	1.18.22	Automatización de Código
Open-Api	1.6.4	Documentación de la Api
UI Swagger	1.6.4	Visualización y Gestión de la Api
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

Tecnologías DATABASE	Versión	Finalidad
PostgreSQL	13.2	Sistema de Gestión de DB'S
DBeaver	22.1	Editor de Base de Datos
pgAdmin	5.1	Sistema de Administración de DB'S

Sección 2) EndPoints y Recursos

2.0) EndPoints 🔝

Ver

2.1) Recursos y Servicios 🔝

Ver

Seguidamente se Representa Gráficamente de Forma Sucinta algunos Servicios y Recursos de la Aplicación.

Login

Signin

Inicio Post Login

Servicios Deshabilitados para Usuarios

Listado de Productos Formato Tabla

Listado de Productos Formato Cards

Listado de Productos Archivo csv

Listado de Productos Archivo pdf

Listado de Productos sección Paginado

Checks Form Editar Producto

Checks Form Agregar Producto Insertado

Producto Insertado Filtrado en Lista

Check Eliminar Producto

Check Lista Producto Eliminado

Documentación Gráfica Acotada por razones de simplificación de documentación. Visualizar los videos anexados acerca de las Pruebas de Funcionalidad de la aplicación.

Sección 3) Prueba de Funcionalidad y Referencias

3.0) Prueba de Funcionalidad 🔝

Ver

Auth ( Login y Signin )

Auth ( Refresh Token )

Análisis de Seguridad ( Cifrado de Token )

Análisis de Seguridad ( Credenciales en JWT )

Metodología de Cifrado de Token AES SHA-256

Alojamiento de Imágenes en Servidor

Archivos de Descarga ( XLSX, CSV, PDF)

Configuración de Lista Formato Tabla/Card

Filtros Personalizados

Filtros por Campos y Generales

Paginado de Tabla y Ordenamientos de Productos

Se resume documentación gráfica. Visualizar Playlist del proyecto para más funcionalidades

3.1) Referencias 🔝

Ver

Documentación Oficial Tecnologías

• Java-JDK 12
• Spring Security
• JSON Web Security
• Boostrap
• Angular CLI
• XAMPP
• Maven Repository
• PostMan
• Bootstrap
• Angular
• Visual Studio Code
• Spring Tool Suite 4
• Git
• Otros

Documentación Oficial/No Oficial Librerías Frontend

• Angular Popup

  • Instalación

• Angular Material

  • Instalación

• Angular Bootstrap Validation

  • Instalación
  • Implementación/ejemplos
  • Validation Forms(tanto bootstrap 4 como 5

• ngx ui loader

  • Instalación
  • Implementación

• Excel Sheets

  • Instalación y Doc
  • Ejemplo Base

• JSPDF

  • Ejemplo Base
  • Otro ej.

• Gráficos con Highchart

  • Npm, config, detalles, etc
  • Doc Oficial
  • Doc Oficial Instalación

• Tipos de Gráficos Highchart

  • Nuevo sitio Tipos de Graf
  • Ejemplo Base 2d
  • Modificación Gráfico 2d a 3d

• Treemap Graphic

  • Ej. Base
  • Ej. Base algunas configs

• Cifrado Token (CriptoJs) y Secure Local Storage

  • Guía de Uso
  • Instalación Secure Local Storage
  • Instalacion CryptoJs