Es el modulo web del sistema de API Rest Sky-Scrapper-API en NestJS Para comprar precios de las principales tiendas de mangas en Perú haciendo uso de graficos de variaciones de precios diarios con alertas de cambio de precios

Adicionalmente funciona como PWA(Progresive Web App) que puede integrarse en cualquier dispositivo movil

• Pre-Requisitos
• Instalación
• PWA
• Despligue
  • Build
  • Docker
• Analisis de Codigo
• Performance
• Construido

Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas.

Puede visualizar una Demo del Proyecto en el siguiente enlace : https://sky-scrapper.skyzerozx.com

Mira Deployment para conocer como desplegar el proyecto.

Software requerido

NodeJS >= 14.X
NPM >= 8.X
AngularCli >= 14.X

Software opcional

Visual Studio Code ( O el editor de su preferencia)

Para ejecutar un entorno de desarrollo

Previamente ejecutar el comando en la terminal para descargar "node_modules" para el funcionamiento del proyecto

npm install

Previamente configurar la ruta del API que consumira nuestro proyecto en el archivo "src/environments/environment.ts" campo API_URL

Para ejecutar un servidor de pruebas local usar el comando donde "PUERTO" sera el puerto donde deseamos ejecutar el proyecto , por default ng serve ejecuta el puerto 4200

ng serve --port [PUERTO]

Dirigirse a la ruta http:https://localhost:4200/#/login/ se tendra la pantalla de Login del sistema

Puede visualizar una demo en funcionamiento en el siguiente video que detalla los diferentes modulos

Para ejecutar como PWA(Progressive Web App) , previamente debe tenerse instalado la libreria http-serve

npm install --global http-server

Una vez instalada proceder a ejecutar el siguiente comando , que nos permite ejecutar en entorno local nuestra PWA

npm run start-pwa

Este comando se encuentra configurado en el archivo package.json de la raiz del proyecto por default ejecuta el puerto 8080

La PWA se encuentra configurada para ejecutarse en la vista de Login si no se esta logeado

Se cuenta con soporte de notificaciones Push integrado tanto para escritorio como dispositivos moviles

Se creo el archivo custom-service-worker.js para la gestion de evento de notificaciones personalizado

Previamente configurar la ruta del API que consumira nuestro proyecto en el archivo src/environments/environment.prod.ts campo API_URL

Para realizar el despligue a produccion del proyecto ejecutar el siguiente comando

ng build --configuration production

El cual creara la carpeta "dist" en la raiz de nuestro proyecto el cual podemos desplegar en cualquier servidor que ejecute HTML CSS y JS

A su vez en un hosting con certificado HTTPS se podra ejecutar como una PWA que se podra "instalar"

Para desplegar el proyecto mediante Docker se tiene los archivos Dockerfile y docker-compose.prod.yaml, los cuales tienen preconfigurado la imagen y dependencias necesarias para levantar el proyecto, se utilizo como base un servidor web Nginx

Para construir la imagen y ejecutarla tenemos el siguiente comando

Ejecutar el siguiente comando en la raiz del proyecto

 docker-compose -f docker-compose.prod.yaml up --build

En caso de requerir volver a ejecutar el contenedor del proyecto previamente creado ejecutar el comando:

 docker-compose -f docker-compose.prod.yaml up

Pre requisitos

En la raiz del proyecto se tiene el archivo sonar-project.properties el cual tiene las propiedades necesarias para ejecutarlo sobre un SonarQube

Configurar los apartados : sonar.host.url , sonar.login sonar.password con los datos de su instancia correspondiente o usar SonarCloud con su token correspondiente

Sonaqube >= 9.X

Las pruebas fueron realizas sobre SonarQube 9.8 para ejecutar el analisis de codigo ejecutar el comando para la instancia local:

npm run sonar

Reporte de Cobertura en SonarQube

Haciendo uso de la herramienta https://pagespeed.web.dev/ , se evaluo el tiempo de carga y renderizado por primera vez de la web

Obtuviendo un puntaje de 93 en rendimiento

Las herramientas utilizadas son:

• Angular - El Framework para Desarrollo Web
• NPM - Manejador de dependencias
• Docker - Para el despliegue de aplicaciones basado en contenedores
• Nginx - Servidor de Proxy Inverso ligero
• TailwindCSS -Framework de CSS de código abierto​ para el diseño de páginas web
• Visual Studio Code - Editor de Codigo
• SonarQube - Evaluacion de codigo on premise
• Prettier - Formateador de Codigo
• TabNine - Autocompletador de Codigo
• WebAuthn - Estándar web del proyecto FIDO2 de la Alianza FIDO

Usamos GIT para el versionado.

• Jaime Burgos Tejada - Developer
• SkyZeroZx
• Email : [email protected]

Este proyecto está bajo la Licencia - mira el archivo LICENSE.md para detalles