Es el modulo web del sistema de gestion de tramites registrados via ChatBot y seguimiento de tramites
Adicionalmente funciona como PWA(Progresive Web App) que puede integrarse en cualquier dispositivo movil
- Pre-Requisitos
- Instalación
- PWA
- Desarrollo
- Analisis de calidad de codigo
- Integración Continua
- Despliegue
- Construido
- Autores
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://isekai-orpheus-bot.vercel.app/#/login
Administrador
[email protected]
Admin2
Tramitador
[email protected]
Admin2
Mira Deployment para conocer como desplegar el proyecto.
Software requerido
NodeJS >= 14.X
NPM >= 8.X
AngularCli >= 13.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 existiendo 2 roles
Login : Apartado de inicio de sesion para ambos tipos de roles
Change Password : Apartado para el cambio de contraseña
DashBoard : Apartado con graficos sobre las cantidad de estados con filtros de fechas
Rol Administrador : Rol que gestiona Usuarios y Documentos , comparte el dashboard con el rol tramitador
Usuarios
Documentos
Rol Tramitador : Rol que gestiona los tramites de los estudiantes , comparte el dashboard con el rol administrador
Tramites
Tracking : Apartado para el seguimiento del tramite por parte de los estudiantes
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 Tracking para consulta de tramites
Se cuenta con soporte de notificaciones Push integrado en el modulo de Tracking
Se creo el archivo src/custom-service-worker.js para la gestion de evento de notificaciones personalizado
Se crearon 2 tipos de pruebas siendo las primeras las pruebas unitarias en Jasmine y Karma que son integradas por Angular
Las segundo tipo de pruebas son las Automatizadas E2E en Cypress para la verificacion funcional del sistema
Las pruebas unitarias en Jasmine y Karma verifican la funcionalidad adecuada y logica del codigo asi como la cobertura del codigo
Para ejecutar las pruebas unitarias ejecutar el siguiente comando en la terminal de la raiz del proyecto, el cual levanta el servidor local del test runner Karma
ng test
Para obtener la cobertura del codigo de esta pruebas ejecutar el siguiente comando para obtener un reporte detallado de las pruebas
La carpeta con la cobertura del codigo se creara en la raiz del proyecto con la siguiente ruta coverage/Isekai_Bot/index.html el cual se puede visualizar
ng test --code-coverage
Para ejecutar las pruebas E2E en Cypress del sistema ejecutar el siguiente comando en la terminal de la raiz del proyecto
El cual ejecuta Cypress en modo headless las pruebas E2E
npm run e2e:ci
Para obtener un summary del reporte de pruebas ejecutar el siguiente comando
npm run e2e:coverage
Para visualizar el reporte grafico de la cobertura de codigo de las pruebas E2E en la raiz del proyecto ubicarse en la ruta coverage-e2e/Icov-report/index.html
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
Sonaqube >= 9.X
Las pruebas fueron realizas sobre SonarQube 9.4 para ejecutar el analisis de codigo ejecutar el comando:
npm run sonar
Se realizo un CI con SonarCloud para metricas de calidad de codigo (https://sonarcloud.io/project/overview?id=SkyZeroZx_Isekai_Orpheus_Bot)
Se creo la carpeta .github/workflows con el archivo build.yml que contiene los pasos para desplegar mediante GitHub Actions nuestro CI
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
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
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
- Docker - Para el despliegue de aplicaciones basado en contenedores
- SonarQube - Evaluacion de codigo
- Visual Studio Code - Editor de Codigo
- Prettier - Formateador de Codigo
- TabNine - Autocompletador de Codigo
- Argon DashBoard - Plantilla Web Utilizada
Usamos GIT para el versionado.
Los integrantes del proyecto
- Jaime Burgos Tejada - Developer - SkyZeroZx - email : [email protected]
- Omar Ramos More - Documentación && Manual Testing - Vengenace
- Gianfranco Alfaro Mariño - Documentación && Manual Testing - Franco
Este proyecto está bajo la Licencia - mira el archivo LICENSE.md para detalles