Skip to content

SkyZeroZx/Sky-Bot-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sky Krono App

Es el modulo web del sistema de registro de gestión de tramites documentarios con notificaciones push a traves del chat bot Webhook Sky Bot en NestJS Asi mismo integrado con el API Sky Bot en NestJS

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

📒 Index

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-bot.skyzerozx.com

Administrador

Empleado

Empleado

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://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

demo.mp4

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 para el calendario tanto para escritorio como dispositivos moviles

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

Desarrollo ⚙️

Las siguientes instrucciones serviran para ejecutar en su entorno local la pruebas unitarias realizadas para el proyecto

Unit-Test

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_Bot/index.html el cual se puede visualizar

Unit Test Coverage

E2E-Test

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

E2E Test 1

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

E2E Test 2

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

Docker 2

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

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

SonarQube 1

Reporte de Cobertura en SonarCloud

SonarCloud 1

Integración Continua - Despligue

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

CI 1

CI 1

Generar Apk

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

Android 1

Android 2

Una vez finalizada la configuración ejecutar el siguiente comando

bubblewrap build

Android 3

Más información https://developer.chrome.com/docs/android/trusted-web-activity/quick-start/

Construido con 🛠️

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
  • Auth0 -Servicio para autentificación y autorización fiable y flexible
  • BubbleWarp - CLI para crear APK usando TWA apartir de una PWA
  • Black DashBoard - Plantilla Web Utilizada

Versionado 📌

Usamos GIT para el versionado.

Autor✒️

Licencia 📄

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