Creación de sistema de RRHH y nóminas de una empresa (Nrwl Nx)

Tras las nuevas tecnologías y recursos que tenemos en las empresas, seguimos haciendo muchas de las funciones de recursos humanos con las tecnologías de antaño.

Hemos visto que esas funciones son de gran dificultad y deberíamos tener una aplicación que nos permita hacer esas funciones que hemos comentado de manera mas intuitiva y dinámica.

Para ello hemos generado un monorepositorio de nxNrwl con Angular 10, NestJs y BBDD de MySql

Nrwl es una herramienta que nos permite montar distintas aplicaciones Node.JS dentro del mismo repositorio, de esa forma podemos compartir funciones y recursos sin necesidad de tener que hacerlo con rutas directas, además permite la no redundancia y creación de shared-interfaces. Para nuestra aplicación será esencial.

¿Que es un Monorepositorio?

Un monorepo podría entenderse como un enorme repositorio que contiene todo el código y funcionalidad de distintos proyectos

Características

Compartir una librería que puede ser un servicio o componente entre los proyectos dentro del repositorio
Compartir código entre proyectos que utilizan diferentes frameworks tales como Angular, React
Tenemos más de un proyecto en el mismo repositorio.
Conjunto único de dependencias (package.json)
Tener aplicaciones full-stack con su marco preferido

¿Que es Nx?

NX es el kit de herramientas para el desarrollo de Monorepositorios, que le ayuda a construir software de manera más inteligente y rápida. Con Nx puede crear aplicaciones fullStack con su marco preferido.

Como instalarlo

Se necesitará Node.JS y angular-cli

Para la creación del monorepositorio: npx create-nx-workspace@latest

Al ejecutar este comando, solicitará informacion como el nombre del «workspace» el de la aplicación o le tipo de hoja de estilo que queramos usar

En nuestro caso tenemos que escoger Angular con api Nest

Configuración de la API

Tras tener la aplicación montada nos aparecerán dentro de las apps nuestra API y nuestra aplicación postTajamar

Dentro de la api tenemos nuestro controlador, en el que tenemos que poner nuestra escucha de llamada

Tambien tenemos nuestra base de datos, que tenemos que darle las claves para conectarse

Este es el servicio que se conecta con la BBDD

En nuestro caso, hay veces que mandamos JSON para convertirlos a posteriori, para ello hemos declarado nuestras librerias con interfaces

Este es el servicio que concatena

Este es el servicio que hace la petición

Esta api nos devolvera un observable con el resultado de la BBDD

BBDD

para la creación de la BBDD hemos usado MySql. Dentro del cual hemos tenido que crear un usuario DBA y las tablas

Creacion usuario:

Creación tablas:

Tras ello tenemos que crear nuestro primer servicio en la aplicación postTajamar

Se llamará API

Ahora tenemos que crear un servicio que consuma de manera inteligente este servicio, para ello hemos creado el servicio getterSetter, que de manera inteligente guarda los datos para reducir el consumo con la BBDD

Este servicio guarda los datos y en caso de tener muchas peticiones vuelve a hacer una consulta, en caso de actualizaciones solo hace el update a la BBDD y lo actualiza de manera automatica en sus datos. En las peticiones guarda la información en la petición para consumirla despues

Para poder llevar todo esto acabo sin problematica de errores en interfaces hemos declarado una libreria compartida con los modules

Como tenemos datos sensibles en nuestra página, tenemos que tener un servicio que encripte nuestras contraseñas para evitar la sencillez y descifrado del mismo. Para ello hemos creado una clave compuesta para que sea irreversible. De esta forma podemos encriptar pero no desencriptar

Ahora vamos a crear el primer servicio, será el que se ocupe de la creación, loggeo y logout de los usuarios.

Es el turno de la creación del servicio de los trabajadores

Ahora con el comando: npx ng g c «COMPONENTE» vamos a crear los componentes que necesitaremos

Vamos a empezar por el de welcome, en el cual hemos usado AOS para una visualización mas dinamica de los elementos

Este es el resultado:

Nuestro footer es especial, ya que hace un efecto Layer down, este seria el seultado

Nuestro app.component.html sería este:

Estamos viendo una linea que contiene router-outlet

Para ello necesitamos el modulo que proporcione routing

El código typescript que genera el efecto layer estaría en app.component.ts sería este:

Todo ello acompañado de un complejo .scss

Vamos a crear nuestro navbar

Para ello creamos nuestro html

Y nuestras funciones en typescript

Ahora vamos a hacer nuestros dialogs (páginas salientes) que nos muestren el logeo o registro del usuario, sesion abierta y logout. Con sus correspondientes mensajes de feedback

Estas serían las capturas de los resultados