Initial commit

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,44 @@
+# See http:https://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+.angular
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+.scannerwork
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+ "recommendations": ["angular.ng-template"]
+}

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "ng serve",
+ "type": "pwa-chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: start",
+ "url": "http:https://localhost:4200/"
+ },
+ {
+ "name": "ng test",
+ "type": "chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: test",
+ "url": "http:https://localhost:9876/debug.html"
+ }
+ ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "type": "npm",
+ "script": "start",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ },
+ {
+ "type": "npm",
+ "script": "test",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ }
+ ]
+}

Dockerfile

@@ -0,0 +1,28 @@
+# Stage 1: Compile app
+
+# Install node 
+FROM node:18-alpine3.15 as build
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm install --frozen-lockfile
+
+# Add the source code to app
+COPY ./ /app
+
+# Install all the dependencies
+RUN npm install 
+
+# Generate the build of the application
+RUN npm run production
+
+
+# Stage 2: Serve app with nginx server
+
+# Use official nginx image as the base image
+FROM nginx:latest
+
+# Copy the build output to replace the default nginx contents.
+COPY --from=build /app/dist/ /usr/share/nginx/html

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 SkyZeroZx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,192 @@
+<h1 align="center">Sky Scrapper App</h1>
+ <p align="center">
+ Es el modulo web del sistema de API Rest
+ <a href="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/SkyZeroZx/Sky-Scrapper-API" target="_blank"> Sky-Scrapper-API en NestJS </a> 
+ 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
+ </p>
+
+_Adicionalmente funciona como PWA(Progresive Web App) que puede integrarse en cualquier dispositivo movil_
+
+<small>
+Nota : Este es un proyecto con fines educativos sin fines de lucro
+</small>
+
+
+## :ledger: Index
+
+- [Pre-Requisitos](#pre-requisitos-)
+- [Instalación](#instalación-)
+- [PWA](#ejecutando-como-pwa-)
+- [Despligue](#despliegue-)
+ - [Build](#build)
+ - [Docker](#docker)
+- [Analisis de Codigo](#analisis-de-codigo-)
+- [Construido](#construido-con-)
+
+## Comenzando 🚀
+
+_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.
+
+### Pre-requisitos 📋
+
+_Software requerido_
+
+```
+NodeJS >= 14.X
+NPM >= 8.X
+AngularCli >= 14.X
+```
+
+_Software opcional_
+
+```
+Visual Studio Code ( O el editor de su preferencia)
+```
+
+### Instalación 🔧
+
+_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_
+
+
+## Ejecutando como PWA 👨🏻‍💻
+
+_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_
+
+<p align="center">
+<img src="docs/pwa/pwa-2.jpg" width="327" height="421" />
+</p >
+
+
+## Despliegue 📦
+
+### Build
+
+_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"_
+
+### Docker
+
+_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
+```
+
+![Docker 1](/docs/docker/docker-1.png)
+
+![Docker 2](/docs/docker/docker-2.png)
+
+_En caso de requerir volver a ejecutar el contenedor del proyecto previamente creado ejecutar el comando:_
+
+```
+ docker-compose -f docker-compose.prod.yaml up
+```
+
+## Analisis de Codigo 🔩
+
+_**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
+```
+
+![SonarQube Properties](/docs/sonar/sonar-properties.png)
+
+_Las pruebas fueron realizas sobre *SonarQube 9.5* para ejecutar el analisis de codigo ejecutar el comando para la instancia local:_
+
+```
+npm run sonar
+```
+
+_Reporte de Cobertura en SonarQube_
+
+![SonarQube 1](/docs/sonar/sonarqube-1.png)
+
+
+
+
+## Construido con 🛠️
+
+_Las herramientas utilizadas son:_
+
+- [Angular](https://angular.io/docs) - El Framework para Desarrollo Web
+- [NPM](https://www.npmjs.com/) - Manejador de dependencias
+- [Docker](https://www.docker.com/) - Para el despliegue de aplicaciones basado en contenedores
+- [Nginx](https://www.nginx.com/) - Servidor de Proxy Inverso ligero
+- [TailwindCSS](https://tailwindui.com/) -Framework de CSS de código abierto​ para el diseño de páginas web
+- [Visual Studio Code](https://code.visualstudio.com/) - Editor de Codigo
+- [SonarQube](https://www.sonarqube.org/) - Evaluacion de codigo on premise
+- [Prettier](https://prettier.io/) - Formateador de Codigo
+- [TabNine](https://www.tabnine.com/) - Autocompletador de Codigo
+- [WebAuthn](https://webauthn.guide/) - Estándar web del proyecto FIDO2 de la Alianza FIDO
+
+## Versionado 📌
+
+Usamos [GIT](https://git-scm.com/) para el versionado.
+
+## Autor✒️
+
+- **Jaime Burgos Tejada** - _Developer_
+- [SkyZeroZx](https://github.com/SkyZeroZx)
+- Email : [email protected]
+
+## Licencia 📄
+
+Este proyecto está bajo la Licencia - mira el archivo [LICENSE.md](LICENSE.md) para detalles