Proyecto CFS - Frontend Version 1.0.0.RELEASE

El proyecto 21MOB003.9 – Norway CFS Support portal es un sistema diseñado e implementado por Ingeneo S.A.S. que será utilizado para el soporte, consultas y operaciones de mantenimiento sobre productos FTTH de Tigo Residencial y Tigo Business.

El alcance de los desarrollos incluye:

1. Utilización de los API’s de symphonica para aprovisionamiento de servicios.
2. Utilización de los API’s de symphonica para realizar consultas.
3. Creación del frontEnd para dar visibilidad al área técnica sobre los productos que adquieren los clientes y poder realizar operaciones sobre estos.
4. Mantener separadas las unidades de negocio (Tigo Residencial y Tigo Business) y cargar las configuraciones necesarias según lo elija el usuario.

Este proyecto es el componente visual del sofware, esta creado con angular, tiene integración con las API de CFS mediante un token de seguridad y acceso por LDAP. Este proyecto fue generado con angular-cli Angular CLI

Pre-requisitos

1. Permisos en el repositorio
2. Angular 12
3. IDE con soporte a typescript
4. GIT
5. NodeJS

Instalación

Para obtener una copia de este proyecto ejecute el siguiente comando.

git clone http://git.ingeneo.co/tigo-guatemala/ing4888-portal-web-gestion-ftth-front.git

Este proyecto incluye

1. Security
2. Prettier
3. Ngx-translate
4. Ngx-Spinner

Uso

Lo primero que debes conocer es el uso de los archivos de la carpeta environment, los cuales son usados para las configuraciones mas relevantes del proyecto.

Actualice los archivos con las direcciones, contraseñas, usuarios según corresponda en cada ambiente.

1. Diseño

La parte visual utiliza como base estilos propios, la instalación se divide en content/header/footer/menu.

- Ubicación del archivo: /app/modules/layout

2. Utilidades

2.1 Translate

La aplicación incluye un manejo de internacionalización para los labels. Para hacer uso de esta libreria ngx-translate actualice las llaves de español e inglés ubicados en la carpeta assets/i18n. Para la configuración y actualización del lenguage se incluye el servicio /aap/shared/services/language.service.ts

- Ubicación del archivo: assets/i18n

Ejemplo:

 {
   "welcome": "Bienvenidos",
   "title":"Tigo",
   "version": "Versión 1.0",
   "lang": {
     "spanish": "Español",
     "english": "English"
 },

** - Uso: **

Para usarlo en ts=> 
1. Incluir en el constructor el servicio: private translate: TranslateService
2. Invocar el servicio pasando la key: this.translate.instant('error.connection')
3. Si se tiene parametros: this.translate.instant('label.session.welcome', { name: email })

1. Para usarlo en html => {{"module.log.title" | translate}}
2. Con parametros=>  {{ "label.welcome" | translate:{name:'Lucia'} }}

2.2 Spinner o Loading

La aplicación incluye loading por defecto con ngx-spinner.

** - Uso: **

Para usarlo en ts=> 
1. Incluir en el constructor el servicio: private spinner: NgxSpinnerService
2. Utilizar spinner.hide y spinner.show

2.3 Interceptor

La aplicación incluye un interceptor para manejo de peticiones. Inicialmente este interceptor incluye el token de seguridad en la cabecera. Adicione aquí ajustes necesarios para las peticiones http.

- Ubicación del archivo: /app/shared/interceptors

2.4 Extras

La aplicación incluye una libreria para manejar la fechas y unos validadores específicos.

- Ubicación del archivo validador: /app/shared/validators/... - Ubicación del archivo pipe: /app/shared/pipes/... - Ubicación del archivo configuración: /app/shared/config/...

2.6 Manejo de errores en las peticiones

La aplicación incluye un servicio base con un manejador de errores frecuentes en solicitudes http, los mensajes de los principales errores estan internacionalizados en el archivo de i18n en la sección 'error.http_#'.

Este archivo debe extenderse desde aquellos servicios donde se incluyan peticiones http.

- Ubicación del archivo: /app/services/base.service.ts

3. Comandos

3.1 Servidor de desarrollo

Ejecute ng serve para el servidor de desarrollo. Navegue desde http://localhost:4200/. La aplicacion automáticamente recarga si se hicieron cambios en algun archivo.

3.2 Generador de código

Ejecute ng generate component component-name para generar un nuevo componente. También puede usar ng generate directive|pipe|service|class|guard|interface|enum|module.

3.3 Construcción

Ejecute ng build para construir el proyecto. Los artefactos construidos serán guardados en la carpeta dist/ . Use la bandera --prod para construir en modo producción.

Tenga en cuenta que el proyecto incluye 4 environment por ambiente:

    "start": "ng serve",
    "build": "ng build --prod",
    "build:qa": "ng build -c=qa",
    "build:release": "ng build -c=release",

Autores

• Ingeneo S.A.S (Arquitectura, diseño e implementación de Software)

Licencia

Este proyecto esta bajo la licencia (Tigo Guatemala)