{"id":31651427,"url":"https://github.com/skyzerozx/sky-krono-app","last_synced_at":"2025-10-07T08:55:56.829Z","repository":{"id":60552397,"uuid":"537710132","full_name":"SkyZeroZx/Sky-Krono-App","owner":"SkyZeroZx","description":"FrontEnd for API SkyKrono ","archived":false,"fork":false,"pushed_at":"2022-11-08T03:11:58.000Z","size":49410,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-04-15T01:29:23.543Z","etag":null,"topics":["angular","continuous-deployment","continuous-integration","docker","e2e-testing","push-notifications","pwa","sonarcloud","sonarqube","unit-testing","web-authn"],"latest_commit_sha":null,"homepage":"https://skykrono.skyzerozx.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SkyZeroZx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-17T05:37:58.000Z","updated_at":"2023-03-16T16:57:00.000Z","dependencies_parsed_at":"2023-01-22T22:00:35.012Z","dependency_job_id":null,"html_url":"https://github.com/SkyZeroZx/Sky-Krono-App","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/SkyZeroZx/Sky-Krono-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2FSky-Krono-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2FSky-Krono-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2FSky-Krono-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2FSky-Krono-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SkyZeroZx","download_url":"https://codeload.github.com/SkyZeroZx/Sky-Krono-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2FSky-Krono-App/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278747535,"owners_count":26038707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","continuous-deployment","continuous-integration","docker","e2e-testing","push-notifications","pwa","sonarcloud","sonarqube","unit-testing","web-authn"],"created_at":"2025-10-07T08:55:53.070Z","updated_at":"2025-10-07T08:55:56.821Z","avatar_url":"https://github.com/SkyZeroZx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSky Krono App\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n Es el modulo web del sistema de registro de asistencias y tareas de calendario con notificaciones push a traves del \u003ca href=\"https://github.com/SkyZeroZx/API-Sky-Krono\" target=\"_blank\"\u003e API Sky Krono en NestJS \n  \u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_API-NestJS-Sky-Calendar\u0026metric=alert_status\" alt=\"Quality Gate\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=coverage\" alt=\"Coverage\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=vulnerabilities\" alt=\"Vulnerabilities\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=bugs\" alt=\"Bugs\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=security_rating\" alt=\"Security Rating\" /\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=code_smells\" alt=\"Code Smells\"/\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://sonarcloud.io/project/overview?id=SkyZeroZx_Sky-Krono-App\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=SkyZeroZx_Sky-Krono-App\u0026metric=sqale_rating\" alt=\"Maintainability Rating\"/\u003e\n\u003c/a\u003e\n\n\u003cimg src=\"https://badgen.net/badge/Built%20With/TypeScript/bl\" alt=\"Build With TypeScript\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Made%20for-VSCode-1f425f.svg\" alt=\"Build With VSCode\" /\u003e\n\u003c/p\u003e\n\n_Adicionalmente funciona como PWA(Progresive Web App) que puede integrarse en cualquier dispositivo movil_\n\n## :ledger: Index\n\n- [Pre-Requisitos](#pre-requisitos-)\n- [Instalación](#instalación-)\n- [PWA](#ejecutando-como-pwa-)\n- [Desarrollo](#desarrollo-%EF%B8%8F)\n  - [Unit-Test](#unit-test)\n  - [E2E-Test](#e2e-test)\n- [Web-Authentication](#web-authn-fingerprint-)\n- [Despligue](#despliegue-)\n  - [Build](#build)\n  - [Docker](#docker)\n- [Analisis de Codigo](#analisis-de-codigo-)\n- [CI / CD](#integración-continua---despligue)\n- [Generar APK](#generar-apk)\n- [Construido](#construido-con-)\n\n## Comenzando 🚀\n\n_Estas instrucciones te permitirán obtener una copia del proyecto en funcionamiento en tu máquina local para propósitos de desarrollo y pruebas._\n\n_Puede visualizar una Demo del Proyecto en el siguiente enlace : https://skykrono.skyzerozx.com/#/login_\n\n_**Administrador**_\n\n```\nskyzerobot64@gmail.com\nAdmin1\n```\n\n_**Empleado**_\n\n```\nempleado-demo@gmail.com\nAdmin1\n```\n\nMira **Deployment** para conocer como desplegar el proyecto.\n\n### Pre-requisitos 📋\n\n_Software requerido_\n\n```\nNodeJS \u003e= 14.X\nNPM \u003e= 8.X\nAngularCli \u003e= 14.X\n```\n\n_Software opcional_\n\n```\nVisual Studio Code ( O el editor de su preferencia)\n```\n\n### Instalación 🔧\n\n_Para ejecutar un entorno de desarrollo_\n\n_Previamente ejecutar el comando en la terminal para descargar \"node_modules\" para el funcionamiento del proyecto_\n\n```\nnpm install\n```\n\n_Previamente configurar la ruta del API que consumira nuestro proyecto en el archivo **\"src/environments/environment.ts\"** campo **API_URL**_\n\n_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_\n\n```\nng serve --port [PUERTO]\n```\n\n_Dirigirse a la ruta http://localhost:4200/#/login/ se tendra la pantalla de Login del sistema_\n\n_**Login** : Apartado de inicio de sesion para ambos tipos de roles_\n\n_**Change Password** : Apartado para el cambio de contraseña_\n\n_**Inicio** : Apartado para visualizar estado de las ultimas 2 semanas de asistencias_\n\n_**Asistencia** : Apartado para registrar la asistencia diaria del empleado asi como enviar alguna nota de registro en caso de ser necesario_\n\n_**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)_\n\n_**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_\n\n_**Calendario** : Apartado con el calendario de tareas , registro de tareas , edicion , eliminacion (Se envia notificaciones push a los usuarios suscritos)_\n\n_**Gestion de Usuarios** : Apartado para la gestion de usuarios con un horario asignado , creacion , reseteo , edicion , eliminacion_\n\n_**Tipos** : Aprtado para registar los tipos de tareas a crear en el calendario con un color a demanda_\n\n_**Cargos**: Apartado para crear el cargo representativo para los usuarios en el sistema_\n\n_**Licencias**:Apartado para registrar licencias de los empleados asi como vacaciones o según sea requerido_\n\n_**Horarios**: Apartado para registrar horarios de entrada/salida de los empleados_\n\n  \u003cp align=\"center\"\u003e\n\u003cimg src=\"docs/demo/demo.gif\" width=\"414\" height=\"884\"/\u003e\u003c/p\u003e\n\n## Ejecutando como PWA 👨🏻‍💻\n\n_Para ejecutar como PWA(Progressive Web App) , previamente debe tenerse instalado la libreria http-serve_\n\n```\nnpm install --global http-server\n```\n\n_Una vez instalada proceder a ejecutar el siguiente comando , que nos permite ejecutar en entorno local nuestra PWA_\n\n```\nnpm run start-pwa\n```\n\n_Este comando se encuentra configurado en el archivo *package.json de la raiz del proyecto por default ejecuta el puerto 8080*_\n\n_La PWA se encuentra configurada para ejecutarse en la vista de Login si no se esta logeado_\n\n_Se cuenta con soporte de notificaciones Push integrado para el calendario tanto para escritorio como dispositivos moviles_\n\n_Se creo el archivo *src/custom-service-worker.js* para la gestion de evento de notificaciones personalizado_\n\n![PWA 5](/docs/pwa/pwa_5.png)\n\n![PWA 6](/docs/pwa/pwa_6.png)\n\n## Desarrollo ⚙️\n\n_Las siguientes instrucciones serviran para ejecutar en su entorno local la pruebas unitarias realizadas para el proyecto_\n\n### Unit-Test\n\n_Para ejecutar todos los Unit Test desarrollados en Jasmine/Karma y reporte de cobertura de codigo ejecutar el comando_\n\n```\n ng test --code-coverage\n```\n\n_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_\n\n![Unit Test Coverage](/docs/unit-test/unit-test-1.jpg)\n\n### E2E-Test\n\n_Para ejecutar todos los E2E Test desarrollados en Cypress y reporte de cobertura se tienen dos comandos_\n\n_Previamente configurar los archivos `cypress.config.mobile.ts` y `cypress.config.ts`_\n\n_Para ejecutar en vista desktop ejecutar :_\n\n```\n npm run e2e:ci\n```\n\n_Para ejecutar en vista mobile(PWA) ejecutar :_\n\n```\n npm run e2e:ci:mobile\n```\n\n_Al finalizar tendremos un reporte de los test ejecutados_\n\n![E2E Test 1](/docs/e2e/e2e-1.JPG)\n\n_Se generara la carpeta `coverage-e2e` con la cobertura de codigo del proyecto_\n\n_Adicionalmente puede visualizar los videos recopilados por cypress en la carpeta `cypress/videos`_\n\n![E2E Test 2](/docs/e2e/e2e-2.jpg)\n\n## Web Authn FingerPrint 👨🏻‍💻\n\n_Cuenta con soporte para logeo mediante huella dactilar o patron/pin del dispostivo movil usando el estandar web authn_\n\n![AUTH 1](/docs/web-authn/web-authn_1.jpg)\n\n_Para habilitarlo ir al profile del usuario logeado_\n\n![AUTH 2](/docs/web-authn/web-authn_2.jpg)\n\n![AUTH 4](/docs/web-authn/web-authn_4.jpg)\n\n_En caso el dispositivo se encuentre registro se tendra mensaje de informacion de registro_\n\n![AUTH 3](/docs/web-authn/web-authn_3.jpg)\n\n_Más informacion de Web Authn : https://webauthn.io/_\n\n## Despliegue 📦\n\n### Build\n\n_Previamente configurar la ruta del API que consumira nuestro proyecto en el archivo src/environments/environment.prod.ts campo API_URL_\n\n_Para realizar el despligue a produccion del proyecto ejecutar el siguiente comando_\n\n```\nng build --configuration production\n```\n\n_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_\n\n_A su vez en un hosting con certificado HTTPS se podra ejecutar como una PWA que se podra \"instalar\"_\n\n### Docker\n\n_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_\n\n_Para construir la imagen y ejecutarla tenemos el siguiente comando_\n\n_Ejecutar el siguiente comando en la raiz del proyecto_\n\n```\n docker-compose -f docker-compose.prod.yaml up --build\n```\n\n![Docker 1](/docs/docker/docker-1.jpg)\n\n![Docker 2](/docs/docker/docker-2.jpg)\n\n_En caso de requerir volver a ejecutar el contenedor del proyecto previamente creado ejecutar el comando:_\n\n```\n docker-compose -f docker-compose.prod.yaml up\n```\n\n## Analisis de Codigo 🔩\n\n_**Pre requisitos**_\n\n_En la raiz del proyecto se tiene el archivo *sonar-project.properties* el cual tiene las propiedades necesarias para ejecutarlo sobre un SonarQube_\n\n_Configurar los apartados : *sonar.host.url* , *sonar.login* *sonar.password* con los datos de su instancia correspondiente o usar SonarCloud con su token correspondiente_\n\n```\nSonaqube \u003e= 9.X\n```\n\n![SonarQube Properties](/docs/sonar/sonar-properties.jpg)\n\n_Las pruebas fueron realizas sobre *SonarQube 9.5* y *SonarCloud* para ejecutar el analisis de codigo ejecutar el comando para la instancia local:_\n\n```\nnpm run sonar\n```\n\n_Reporte de Cobertura en SonarQube_\n\n![SonarQube 1](/docs/sonar/sonarqube-1.jpg)\n\n_Reporte de Cobertura en SonarCloud_\n\n![SonarCloud 1](/docs/sonar/sonar-cloud-1.jpg)\n\n## Integración Continua - Despligue\n\n_Se realizo un CI con SonarCloud para ejecuta de manera automatica los test_\n\n_Se realizo un CD mediante las github actions para desplegar mediante FTP en un hosting_\n\n_Se creo la carpeta `.github/workflows` con el archivo `build.yml` que contiene los pasos para desplegar mediante GitHub Actions nuestro CI_\n\n_Adicionalmente se generan artifacts con los reportes y evidencias de nuestro CI/CD para posterior conservación_\n\n![CI 1](/docs/ci/ci-1.jpg)\n\n![CI 1](/docs/ci/ci-2.jpg)\n\n## Generar Apk\n\n_Para generar un APK y posteriormente publicarlo se usara bubblewrap , el cual nos permite generar nuestra apk apartir del TWA(Trusted Web Activites)_\n\n_Adicionalmente puede publicarse oficialmente en la PlayStore como un aplicación Android_\n\n_Previamente instalar el CLI de bubblewrap con el siguiente comando_\n\n```\nnpm i -g @bubblewrap/cli\n```\n_Inicializar el proyecto con el el `manifest.webmanifest` y este previamente publicado como una PWA en dominio con HTTPS , ejecutar el comando:_\n\n```\nbubblewrap init --manifest=https://YOUR_WEB_URL/manifest.webmanifest\n```\n\n_Realizar los pasos que se indican en consola teniendo previamente configurado las propiedades adecuadas de una PWA_\n\n![Android 1](/docs/android/android-1.jpg)\n\n![Android 2](/docs/android/android-2.jpg)\n\n_Una vez finalizada la configuración ejecutar el siguiente comando_\n \n```\nbubblewrap build\n```\n![Android 3](/docs/android/android-3.jpg)\n\n_Más información https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/_\n\n## Construido con 🛠️\n\n_Las herramientas utilizadas son:_\n\n- [Angular](https://angular.io/docs) - El Framework para Desarrollo Web\n- [NPM](https://www.npmjs.com/) - Manejador de dependencias\n- [Jasmine](https://jasmine.github.io/) - Framework Testing para pruebas unitarias\n- [Karma](https://karma-runner.github.io/latest/index.html) - Test Runner para pruebas unitarias\n- [Cypress](https://www.cypress.io/) - Framework para pruebas E2E\n- [Visual Studio Code](https://code.visualstudio.com/) - Editor de Codigo\n- [SonarQube](https://www.sonarqube.org/) - Evaluacion de codigo on premise\n- [SonarCloud](https://sonarcloud.io/) - Evaluacion de codigo cloud\n- [Prettier](https://prettier.io/) - Formateador de Codigo\n- [TabNine](https://www.tabnine.com/) - Autocompletador de Codigo\n- [WebAuthn](https://webauthn.io/) - Web Authentication\n- [BubbleWarp](https://github.com/GoogleChromeLabs/bubblewrap) - CLI para crear APK usando TWA apartir de una PWA\n- [Black DashBoard](https://www.creative-tim.com/product/black-dashboard-angular) - Plantilla Web Utilizada\n\n## Versionado 📌\n\nUsamos [GIT](https://git-scm.com/) para el versionado.\n\n## Autor✒️\n\n- **Jaime Burgos Tejada** - _Developer_\n- [SkyZeroZx](https://github.com/SkyZeroZx)\n- Email : jaimeburgostejada@gmail.com\n\n## Licencia 📄\n\nEste proyecto está bajo la Licencia - mira el archivo [LICENSE.md](LICENSE.md) para detalles\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyzerozx%2Fsky-krono-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyzerozx%2Fsky-krono-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyzerozx%2Fsky-krono-app/lists"}