Es el modulo web del sistema de registro de asistencias y tareas de calendario con notificaciones push a traves del API Sky Krono en NestJS
Adicionalmente funciona como PWA(Progresive Web App) que puede integrarse en cualquier dispositivo movil
- Pre-Requisitos
- Instalación
- PWA
- Desarrollo
- Web-Authentication
- Despligue
- Analisis de Codigo
- CI / CD
- Generar APK
- 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://skykrono.skyzerozx.com/#/login
Administrador
skyzerobot64@gmail.com
Admin1
Empleado
empleado-demo@gmail.com
Admin1
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://localhost:4200/#/login/ se tendra la pantalla de Login del sistema
Login : Apartado de inicio de sesion para ambos tipos de roles
Change Password : Apartado para el cambio de contraseña
Inicio : Apartado para visualizar estado de las ultimas 2 semanas de asistencias
Asistencia : Apartado para registrar la asistencia diaria del empleado asi como enviar alguna nota de registro en caso de ser necesario
Profile : Apartado de perfil del sistema del usuario donde puede actualizar sus datos personales , habilitar notificaciones , fingerprint authentication , nav bar mode y dark theme o light theme demanda (Se envia notificaciones push a los usuarios suscritos)
Contactos: Vista en forma de lista de contactos de celular para visualizar los contactos existentes de manera facil como correo electronico , número celular y WhatsApp
Calendario : Apartado con el calendario de tareas , registro de tareas , edicion , eliminacion (Se envia notificaciones push a los usuarios suscritos)
Gestion de Usuarios : Apartado para la gestion de usuarios con un horario asignado , creacion , reseteo , edicion , eliminacion
Tipos : Aprtado para registar los tipos de tareas a crear en el calendario con un color a demanda
Cargos: Apartado para crear el cargo representativo para los usuarios en el sistema
Licencias:Apartado para registrar licencias de los empleados asi como vacaciones o según sea requerido
Horarios: Apartado para registrar horarios de entrada/salida de los empleados
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 para el calendario tanto para escritorio como dispositivos moviles
Se creo el archivo src/custom-service-worker.js para la gestion de evento de notificaciones personalizado
Las siguientes instrucciones serviran para ejecutar en su entorno local la pruebas unitarias realizadas para el proyecto
Para ejecutar todos los Unit Test desarrollados en Jasmine/Karma y reporte de cobertura de codigo ejecutar el comando
ng test --code-coverage
La carpeta con la cobertura del codigo se creara en la raiz del proyecto con la siguiente ruta coverage-unit-test/Sky_Krono/index.html el cual se puede visualizar
Para ejecutar todos los E2E Test desarrollados en Cypress y reporte de cobertura se tienen dos comandos
Previamente configurar los archivos cypress.config.mobile.ts y cypress.config.ts
Para ejecutar en vista desktop ejecutar :
npm run e2e:ci
Para ejecutar en vista mobile(PWA) ejecutar :
npm run e2e:ci:mobile
Al finalizar tendremos un reporte de los test ejecutados
Se generara la carpeta coverage-e2e con la cobertura de codigo del proyecto
Adicionalmente puede visualizar los videos recopilados por cypress en la carpeta cypress/videos
Cuenta con soporte para logeo mediante huella dactilar o patron/pin del dispostivo movil usando el estandar web authn
Para habilitarlo ir al profile del usuario logeado
En caso el dispositivo se encuentre registro se tendra mensaje de informacion de registro
Más informacion de Web Authn : https://webauthn.io/
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.5 y SonarCloud para ejecutar el analisis de codigo ejecutar el comando para la instancia local:
npm run sonar
Reporte de Cobertura en SonarQube
Reporte de Cobertura en SonarCloud
Se realizo un CI con SonarCloud para ejecuta de manera automatica los test
Se realizo un CD mediante las github actions para desplegar mediante FTP en un hosting
Se creo la carpeta .github/workflows con el archivo build.yml que contiene los pasos para desplegar mediante GitHub Actions nuestro CI
Adicionalmente se generan artifacts con los reportes y evidencias de nuestro CI/CD para posterior conservación
Para generar un APK y posteriormente publicarlo se usara bubblewrap , el cual nos permite generar nuestra apk apartir del TWA(Trusted Web Activites)
Adicionalmente puede publicarse oficialmente en la PlayStore como un aplicación Android
Previamente instalar el CLI de bubblewrap con el siguiente comando
npm i -g @bubblewrap/cli
Inicializar el proyecto con el el manifest.webmanifest y este previamente publicado como una PWA en dominio con HTTPS , ejecutar el comando:
bubblewrap init --manifest=https://YOUR_WEB_URL/manifest.webmanifest
Realizar los pasos que se indican en consola teniendo previamente configurado las propiedades adecuadas de una PWA
Una vez finalizada la configuración ejecutar el siguiente comando
bubblewrap build
Más información https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/
Las herramientas utilizadas son:
- Angular - El Framework para Desarrollo Web
- NPM - Manejador de dependencias
- Jasmine - Framework Testing para pruebas unitarias
- Karma - Test Runner para pruebas unitarias
- Cypress - Framework para pruebas E2E
- Visual Studio Code - Editor de Codigo
- SonarQube - Evaluacion de codigo on premise
- SonarCloud - Evaluacion de codigo cloud
- Prettier - Formateador de Codigo
- TabNine - Autocompletador de Codigo
- WebAuthn - Web Authentication
- BubbleWarp - CLI para crear APK usando TWA apartir de una PWA
- Black DashBoard - Plantilla Web Utilizada
Usamos GIT para el versionado.
- Jaime Burgos Tejada - Developer
- SkyZeroZx
- Email : jaimeburgostejada@gmail.com
Este proyecto está bajo la Licencia - mira el archivo LICENSE.md para detalles