UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y
TECNOLOGIA
DIRECCIÓN DE POSGRADO

“IMPLEMENTACIÓN DE UNA ARQUITECTURA DE

COMPONENTES DINÁMICOS BASADOS EN METADATOS
CON ANGULAR”

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO DE

DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN I
.

POSTULANTE : NICOL DAYANA BALDERRAMA GUZMAN

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia
2018
 ii

Agradecimientos:
A mi amada familia: Victor Balderrama, Aidee Guzman,
Fabiola Balderrama, y Yoselin Balderrama por todo su apoyo,
motivación, y amor incondicional que me han brindado desde
el día en que nací, las palabras ni la vida me alcanzarán para
retribuirles todo lo que han hecho por mí.
A mis mejores amigas: Belen Bilbao, Vanessa Vargas, Regina
Murillo, por su hermosa amistad e indescriptibles valiosos
momentos compartidos.
A mi tutor Edson Terceros, por su guía, paciencia y
dedicación.
INDICE DE FIGURAS ..................................................................................................................... 5

INDICE DE TABLAS ....................................................................................................................... 6

Resumen ......................................................................................................................................... 7

Introducción..................................................................................................................................... 8

1 Generalidades ......................................................................................................................... 9

1.1 Antecedentes Generales ................................................................................................ 9

1.2 Antecedentes Específicos ............................................................................................ 10

2 Metodología .......................................................................................................................... 10

3 Metodología de desarrollo .................................................................................................... 10

3.1 Cascada ........................................................................................................................ 11

4 Angular .................................................................................................................................. 11

4.1 TypeScript ..................................................................................................................... 12

4.2 Angular Cli..................................................................................................................... 12

4.3 Angular material ............................................................................................................ 12

4.4 Lodash........................................................................................................................... 12

5 Seguridad Industrial .............................................................................................................. 13

5.1 La seguridad industrial en Obras de Construcción ...................................................... 14

5.2 Constructora BUDESA ................................................................................................. 14

6 Sistema de seguridad industrial para la constructora BUDESA .......................................... 16

6.1 Requerimientos ............................................................................................................. 16

6.2 Formularios ................................................................................................................... 18

7 Diseño ................................................................................................................................... 21

7.1 Patrón de diseno ........................................................................................................... 21

3
 4

7.2 Formularios dinámicos .................................................................................................. 22

7.2.1 Componentes ............................................................................................................ 22
7.2.2 Configuración de formularios .................................................................................... 26
7.2.3 Renderización de componentes ............................................................................... 27
7.2.4 Exposición de la información del formulario ............................................................. 31

7.3 Listas dinámicas ........................................................................................................... 33

7.3.1 Cabeceras ................................................................................................................. 33
7.3.2 Renderización de datos ............................................................................................ 33
7.3.3 Acciones .................................................................................................................... 34

8 Conclusiones......................................................................................................................... 36

9 Bibliografía ............................................................................................................................ 37
 5

INDICE DE FIGURAS

Figura 1. Diagrama de alto nivel: Sistemas de información. ........................................................ 9

Figura 2. Diagrama de alto nivel................................................................................................... 17
Figura 3. Clase campo.................................................................................................................. 22
Figura 4. Clase Textbox ................................................................................................................ 23
Figura 5. Clase Radiobutton ......................................................................................................... 24
Figura 6. Clase Checkbox ............................................................................................................ 25
Figura 7. Clase Dropdown ............................................................................................................ 25
Figura 8. Componente Formulario dinámico ................................................................................ 26
Figura 9. Sintaxis básica de ngFor ............................................................................................... 27
Figura 10. Sintaxis básica de ngIf ................................................................................................ 28
Figura 11. Sintaxis básica de ngSwitch........................................................................................ 28
Figura 12. Condicionales con ngIf ................................................................................................ 29
Figura 13. Condicionales con ngSwitch ....................................................................................... 30
Figura 14. Campo requerido ......................................................................................................... 31
Figura 15. Uso de la directiva pattern .......................................................................................... 32
Figura 16. Ejemplificación de la recopilación de datos ................................................................ 32
Figura 17. Ejemplificación de la renderización de cabeceras...................................................... 33
Figura 18. Segmento de código para renderizar los valores ....................................................... 33
Figura 19. Ejemplificación de la renderización de listas .............................................................. 34
Figura 20. Estructura de una acción ............................................................................................ 34
Figura 21. Segmento de código para renderizar una acción ....................................................... 35
Figura 22. Ejemplificación de la renderización de acciones ........................................................ 35
 6

INDICE DE TABLAS

Tabla 1. Requerimientos funcionales 16

Tabla 2. Campos en el formulario registro de proyectos 18
Tabla 3. Campos en el formulario registro de empleados 18
Tabla 4. Campos en el formulario de asignación de personal a proyectos 19
Tabla 5. Campos en el formulario de registro de categoría de equipos 19
Tabla 6. Campos en el formulario de registro de equipos 19
Tabla 7. Campos en el formulario de asignación de equipos 20
Tabla 8. Campos en el formulario de seguimiento de equipos 20
Tabla 9. Campos en el formulario de accidentes 21
Tabla 10. Especificación de campos en un componente base. 23
Tabla 11. Especificación de campos de un Textbox. 24
Tabla 12. Especificación del componente Radiobutton. 24
Tabla 13. Especificación del componente Checkbox. 25
Tabla 14. Especificación del componente Dropdown 26
Tabla 15. Especificación de campos de un Dynamic form. 27
Tabla 16. Especificación de campos de un Dynamic form. 27
Tabla 17. Especificación de campos de una acción 35
 7

RESUMEN

En la presente monografía se explica los conceptos basicos de Angular, Angular CLI, Material
Design, Seguridad industrial y se detalla la implementación de una arquitectura de los
componentes dinámicos: formularios y listados, que se renderizan a partir de metadatos
utilizando el framework Angular con el lenguaje de programación Typescript, que fue aplicado al
caso de estudio: “Sistema de seguridad industrial para la constructora BUDESA”.

Palabras clave: Angular, componentes dinámicos, metadatos, formularios, listados, BUDESA.

 8

INTRODUCCIÓN

Entre las aplicaciones de escritorio y web se puede encontrar aspectos en común como son:
Formularios, que son un medio de entrada de información al sistema.
Listas, son usados para desplegar la actual información existente.
Generalmente un sistema web puede tener múltiples formularios para la recolección de
información de diversos módulos definidos dentro el sistema, este número es proporcional a la
cantidad de vistas que poseen el despliegue de esta información, la forma más básica de
desplegar información es mediante listas tabuladas.
En la actualidad existen diversos frameworks para facilitar el desarrollo de los sistemas web,
cada uno de ellos provee diversos beneficios, es importante seleccionar el framework que mejor
se adecue a las necesidades del proyecto, esto podría basarse en la cantidad de documentación
existente, librerías, y otros factores.
Para la programación del lado del cliente se seleccionó JavaScript, usando el framework Angular.
Angular actualmente en la versión 6, permite usar TypeScript, este framework hace uso de la
arquitectura basada en componentes.
En la presente monografía se tomará como caso de estudio la creación de una librería compuesta
de dos componentes:
Componente formulario
Reutilizará los componentes que provee angular material.
Los campos del formulario deben ser definidos en un JSON.
Los tipos de campo que se proponen son: textarea, select, input text, input number, checkbox,
Radio button, datepicker.
Componente lista
Se contará con la funcionalidad de seleccionar una fila.
Se implementará la lógica de definir acciones que puedan ser aplicadas a una fila en específico.
Las columnas podrán ser ordenadas de forma Ascendente y descendente.
Los campos de la lista deben ser definidos en un JSON.
En este caso de estudio se pretende facilitar la creación de formularios y listas permitiendo
uniformizar los estilos de los existentes en un sistema web, como principal contribución del uso
de la librería será el tiempo de desarrollo en la definición para los formularios y listas identificadas,
junto a la reducción de código duplicado e innecesario.
 9

1 GENERALIDADES

1.1 Antecedentes Generales

Dentro de las aplicaciones web al igual que en los sistemas de información de escritorio se
pueden distinguir cuatro actividades importantes:

Figura 1. Diagrama de alto nivel: Sistemas de información.

Fuente: (Instituto Radiofónico Fé y Alegria Quito – Ecuador, 2012)

La entrada de Información
Representa los datos que son requeridos para ser procesados, los datos pueden ser ingresados
de las siguientes formas como:
Ingreso manual, que son ingresadas por el usuario de forma directa.
Automáticas, información que proviene de la interacción con otros sistemas.
Almacenamiento de información
Esta actividad es una de las más importantes que debe tener un sistema, una vez que la
información de entrada es ingresada debe ser persistida para posteriormente acceder a esta
información cuando sea requerida.
Procesamiento de Información:
Son operaciones establecidas en el sistema que procesan la información, a partir de ella se
genera información procesada.
 10

Salida de información:
El sistema puede desplegar la información procesada de diversas formas para la interpretación
del usuario.

1.2 Antecedentes Específicos

Lodash librería de JavaScript contiene diferentes funciones de filtrado en colecciones.

TypeScript es un lenguaje de programación orientado a objetos que puede ser utilizada con
Angular a partir de la versión 2.
El uso de Angular-cli para generar los componentes.
Angular material provee una serie de componentes que pueden ser utilizados para la creación
de formularios.
Todas las anteriormente mencionadas forman parte esencial para el desarrollo web usando el
framework Angular, sin embargo, para nuestro caso de estudio serán imprescindibles.

2 METODOLOGÍA

Para el presente trabajo se utilizarán los siguientes métodos de investigación:

1. Método Bibliográfico, debido a que se realizará la lectura y compilación de libros
relacionados al tema de estudio.
2. Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio, para la redacción del Plan de Emergencia.
3. Método Empírico o de Campo, debido a que se utilizaran ejemplos de aplicación o
experiencias observadas en el caso de estudio: Sistema de seguridad industrial para
la Constructora BUDESA.

3 METODOLOGÍA DE DESARROLLO

Para el desarrollo del caso de estudio se utilizó la metodología CASCADA.

 11

3.1 Cascada

El modelo en cascada es un proceso de desarrollo secuencial, en el que el desarrollo de software

se concibe como un conjunto de etapas que se ejecutan una tras otra. Se le denomina así por
las posiciones que ocupan las diferentes fases que componen el proyecto, colocadas una encima
de otra, y siguiendo un flujo de ejecución de arriba hacia abajo, como una cascada.

Figura 2. Etapas del modelo en cascada

Artículo sobre Modelo en Cascada
Disponible en Fuente: https://openclassrooms.com/en/courses/4309151-gestiona-tu-proyecto-de-
desarrollo/4538221-en-que-consiste-el-modelo-en-cascada

4 ANGULAR

Angular es un framework de desarrollo para JavaScript creado por Google, el cual utiliza
templates y componentes. Los componentes están basados en Typescript que es un lenguaje
que nos permite beneficiarnos de las características de los lenguajes orientado a objetos y se
compila a javascript. Angular nos permite la construcción de interfaces de usuario que por lo
 12

general consumen un API REST. Gracias a su CLI y a Material Design es posible construir una
interfaz en menor tiempo. (Angular, 2018)

4.1 TypeScript

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft, el cual

cuenta con herramientas de programación orientada a objetos.
TypeScript convierte su código en Javascript común. Es llamado también Superset de Javascript,
lo que significa que si el navegador está basado en Javascript, este nunca llegará a saber que el
código original fue realizado con TypeScript y ejecutará el Javascript como lenguaje original.
(TypeScript, 2018)

4.2 Angular Cli

Angular CLI es la forma más cómoda para empezar a desarrollar aplicaciones web, móvil
con Angular 2, es una herramienta de linea de comandos que facilita la creación, generación,
ejecución, testing, deploy.
Angular CLI ayuda a armar la base de todo, estructura del proyecto, herramientas necesarias, etc.
Con un par de lineas de comandos tendremos un proyecto ejecutándose. Además tenemos
comandos para generar automáticamente componentes, servicios, directivas entre otras cosas
propias de Angular. (Angular, 2018)

4.3 Angular material

Angular material permite implementar de una manera muy cómoda un diseño de aplicación con
las directrices de Material Design de Google. (Angular Material, 2018)
Usando los componentes que nos ofrece podremos producir aplicaciones que son estéticamente
brillantes, junto con una serie de componentes adicionales al propio HTML, sin necesidad de
escribir nada de CSS, consiguiendo diseños muy atractivos, aprovechando, pero sin necesidad
de dominar, características modernas de CSS como por ejemplo Flexbox.
4.4 Lodash

Lodash.js es una de las librerías de referencia en JavaScript a la hora de trabajar con colecciones
de objetos. Lodash fue en su momento un fork de Underscore.js pero con el paso del tiempo se
ha rediseñado por completo y añadido mayor funcionalidad. (Lodash, 2018)
 13

5 SEGURIDAD INDUSTRIAL

La objetividad e importancia de la seguridad industrial es mantener un ambiente laboral

adecuado, mediante el control de los actos inseguros y condiciones ambientales peligrosas que
potencialmente puede causar daño a la integridad física del trabajador o a los recursos de la
empresa. (Cortés Díaz, 2005)
Entre sus actividades se pueden mencionar:
 Programa de inducción.
 Visitas de inspección.
 Elaboración y establecimiento de normas de higienes y seguridad para los diferentes
trabajadores.
 Planes de emergencia.
 Análisis del panorama de riesgos.
 Programas de manejo de residuos peligrosos.
 Programas de orden, limpieza y aseo.
 Dotación de elementos de protección personal.
 Investigación de accidentes.

La seguridad industrial comprende el conjunto de técnicas y actividades destinadas a la

identificación, valoración y al control de las causas de los accidentes de trabajo.
Prevención: Conjunto de actividades orientadas a la conservación de la salud de las personas
y de la integridad de los bienes en aras a evitar siniestros.
Protección: Conjunto de actividades orientadas a la reducción de la importancia de los efectos
de los siniestros. Por extensión, se denomina así a los medios materiales orientados a este fin.
Inspecciones de seguridad: Las inspecciones de seguridad se realizan con el fin de vigilar los
procesos, equipos, máquinas u objetos que, en el diagnóstico integral de condiciones de trabajo
y salud, han sido calificados como críticos por su potencial daño. Estas inspecciones deben
obedecer a una planificación que incluya, los objetivos y frecuencia de inspección. Las
inspecciones se deben hacer además con el fin de verificar el cumplimiento de las normas de
seguridad e higienes establecidas (métodos correctos para operar máquinas, uso de equipos de
protección personal, entre otras), el funcionamiento de los controles aplicados, así como de
identificar nuevos factores de riesgo.
 14

Incidentes: Son los sucesos que bajo circunstancias levemente diferentes, podrían haber dado
por resultado una lesión, un daño a la propiedad o una pérdida en el proceso.

5.1 La seguridad industrial en Obras de Construcción

La gestión de la seguridad comprende las funciones de planificación, identificación de áreas

problemáticas, coordinación, control y dirección de las actividades de seguridad en la obra, todas
ellas con el fin de prevenir los accidentes y las enfermedades. A menudo se entiende mal lo que
significa la prevención de accidentes, ya que la mayoría de la gente cree, erróneamente, que
accidente equivale a lesión, lo cual presupone que un accidente carece de importancia a menos
que acarree una lesión. A los administradores de la construcción les preocupan obviamente, las
lesiones de los trabajadores, pero principalmente, las condiciones peligrosas que las causan, es
decir, el incidente más que la lesión en si. En una obra en construcción hay más incidentes que
lesiones. Puede realizarse cientos de veces una acción peligrosa antes de que cause una lesión,
y los esfuerzos de los administradores deben concentrarse en la eliminación de esos peligros en
potencia: no pueden esperar que haya daños humanos o materiales para hacer algo. De modo
que la gestión de seguridad significa tomar medidas de seguridad antes de que Ocurran los
accidentes. (Henao, 2013)

Una efectiva gestión de seguridad persigue tres objetivos principales:

1. Lograr un ambiente seguro.
2. Hacer que el trabajo sea seguro.
3. Hacer que los obreros tengan conciencia de la seguridad.

5.2 Constructora BUDESA

La Empresa BUDESA legalmente constituida y registrada en FUNDEMPRESA en el

Departamento de Cochabamba desde el año 2008 está especializado en el rubro de
Construcciones y Remodelaciones y toma la Salud y Seguridad ocupacional como una línea
estrategia que le permita mejores niveles de productividad y satisfacción al cliente en calidad y
plazos acordados. A lo largo de estos años realizó diferentes labores en áreas rurales mediante
adjudicaciones para entidades públicas tales como alcaldías, gobernación departamental y el
ministerio de gobierno, entre las obras civiles que realizaron se encuentran Unidades Educativas,
 15

Plazas Principales, Tinglados, Graderías, Canchas Múltiples, Coliseos, Colegio Técnico, etc.
Actualmente se encuentra realizando trabajos en la localidad de Villa Tunari. Con la finalidad de
asumir responsabilidad, legal, social y ambiental precisa generar un plan de seguridad que
permita generar lugares de trabajo saludables, seguros, que minimicen los riesgos y sean
compatibles con el medio ambiente, con el fin de detectar sus fallas, corregirlas y encaminar la
empresa dentro de estándares que den a sus trabajadores ambientes adecuados libres de
factores que sean causales de deterioro de su salud e integridad física encaminado en un marco
con condiciones de trabajo dignas, seguras, saludables que generen bienestar y como
mecanismo que mejore la productividad, potencializando positivamente la empresa generando
crecimiento económico y social.

La empresa constructora BUDESA trabaja en condiciones mínimas en cuanto a normas y

procedimientos de Seguridad. Aunque proveen equipamiento básico de seguridad industrial, no
se tienen normas ni procedimientos para precautelar un eficiente Programa de Seguridad, así
como la falta de capacitación y seguimiento para el uso correcto del equipamiento que se les
proporciona. Lamentablemente en la empresa ya se registró accidentes de gravedad suscitados
por falta de señalética y la respectiva capacitación al personal. Aunque todo el personal cuenta
con seguro de Salud y Vida esto no quita ni disminuye el riesgo a los que están expuestos por la
labor que desempeñan, actualmente la empresa no cuenta con un plan de prevención contra
accidentes.

Los accidentes de trabajo y enfermedades en personal son factores que interfieren en el

desarrollo normal de la actividad empresarial, incidiendo negativamente en su productividad y
por consiguiente amenazando su solidez y permanencia en el mercado; conllevando además
graves implicaciones en el ámbito laboral, familiar y social. Lo cual causa un malestar dentro la
empresa, ya que existe el miedo a sufrir algún tipo de accidente y esto no permite que los
trabajadores puedan desenvolverse de manera efectiva en sus áreas respectivas. Un correcto
manejo de estos factores de riesgos dentro de la empresa permitirá tener un mejor ambiente de
trabajo lo que se traducirá en mayor eficiencia en los procesos y una reducción significativa de
los costos por concepto de pago de incapacidades, horas extras, indemnizaciones,
penalizaciones. (Aponte Benavides, 2017)
 16

6 SISTEMA DE SEGURIDAD INDUSTRIAL PARA LA CONSTRUCTORA BUDESA

En el área de la construcción se presente el mayor número de incidentes, debido a negligente

control del uso del equipamiento de seguridad, mayormente son pérdidas de vidas humanas. El
desarrollo de un sistema de seguridad industrial para la empresa BUDESA responde a sus
necesidades y aporta a sus líneas estratégicas fue posible gracias a que esta dio un gran aporte
para la identificación de los requerimientos mínimos basada en su historial de incidentes
registrados.

6.1 Requerimientos

La empresa BUDESA tiene un registro precario de control y registro de accidentes, se detalla los
requerimientos identificados que el sistema de seguridad industrial:
Se identificaron los siguientes rrequerimientos funcionales:

Requerimiento Requerimiento
funcional
RF1 Gestionar la estructura organizacional de la constructora.

RF2 Gestionar los equipos de seguridad industrial y operacional.

RF3 Registrar accidentes mediante un formulario.

RF4 Generar reportes con información relevante de los equipos de seguridad

asignados al personal, accidentes ocurridos y del personal que trabaja en
la empresa con la finalidad de mejorar las posibles falencias.
RF5 Registrar un seguimiento del uso de los equipos de seguridad y
operacional.

Tabla 1. Requerimientos funcionales

Fuente: Elaboración propia
 17

Se puede representar en el siguiente flujo las funcionalidades del sistema contiene:

Figura 3. Diagrama de alto nivel

Fuente: Elaboración propia
 18

6.2 Formularios

Dentro el sistema de seguridad industrial para la empresa BUDESA es necesaria la recopilación

de información mediante formularios, por lo cual se identificaron los siguientes:

Registro de proyectos:
Para la adición y actualización de los proyectos.

Nombre del campo Tipo de campo

Nombres Textbox(tipo: text)

Descripción Textarea

Lugar Dropdown

Estado Dropdown

Tabla 2. Campos en el formulario registro de proyectos

Fuente: Elaboración propia

Registro de empleados:
Para la adición y actualización de los empleados.
Nombre del campo Tipo de campo
Nombres Textbox(tipo: text)
Apellidos Textbox(tipo: text)
CI Textbox(tipo: number)
Fecha de nacimiento Datepicker
Género Radiobutton
Dirección Textbox(tipo: text)
Número telefónico Textbox(tipo: number)
Email Textbox(tipo: text)

Tabla 3. Campos en el formulario registro de empleados

Fuente: Elaboración propia
 19

Registro de asignación de personal a proyectos:

Para la adición y actualización de la asignación del personal a los proyectos.

Nombre del campo Tipo de campo

Empleado Dropdown
Proyecto Dropdown

Tabla 4. Campos en el formulario de asignación de personal a proyectos

Fuente: Elaboración propia

Registro de categoría de equipos:

Para la adición y actualización de las categorías de los equipos.
Nombre del campo Tipo de campo
Nombre Textbox(tipo: text)
Descripción Textarea

Tabla 5. Campos en el formulario de registro de categoría de equipos

Fuente: Elaboración propia

Registro de equipos:
Para la adición y actualización de los equipos.
Nombre del campo Tipo de campo
Código Textbox(tipo: text)
Categoría Dropdown
Estado Dropdown

Tabla 6. Campos en el formulario de registro de equipos

Fuente: Elaboración propia
 20

Registro de asignación de equipos:

Para la adición y actualización de la asignación de los equipos al personal.

Nombre del campo Tipo de campo

Empleado Dropdown
Equipo Dropdown

Tabla 7. Campos en el formulario de asignación de equipos

Fuente: Elaboración propia

Registro de seguimiento de equipos:

Para el seguimiento de que un empleado está usando los equipos asignados.

Nombre del campo Tipo de campo

Empleado Textbox
Fecha Datepicker
Equipo Checkbox

Tabla 8. Campos en el formulario de seguimiento de equipos

Fuente: Elaboración propia

Registro de accidentes:

Para la adición y actualización de los accidentes.

Nombre del campo Tipo de campo

Empleado Dropdown
Descripción Textarea
Evaluación de lesión Textbox(tipo: text)
Reasignado a otra función Radiobutton
Turno Dropdown
Tipo de lesión Dropdown
 21

Agente causante Dropdown

Inicio de tiempo perdido Datepicker
Días perdidos Textbox(tipo: number)
Tipo de accidente Dropdown
Fecha del accidente Datepicker
Recibio atención médica Radiobutton
Fin de tiempo perdido Datepicker
Reincidencia Radiobutton
Forma de accidente Dropdown
Partes del cuerpo lesionada Checkbox
Días debitados Textbox(tipo: number)

Tabla 9. Campos en el formulario de accidentes

Fuente: Elaboración propia

6.3 Listas
El despliegue de información para mejor visión del usuario es mediante un listado, el número de
listas es proporcional a la cantidad de formularios, todos los campos previamente mencionados
serán visibles como columnas, y solo se desplegará los valores en forma de lectura,
adicionalmente se puede configurar una columna de acciones.

7 DISEÑO

El diseño de software orientado a objetos y el uso de patrones de diseño de creación, permite al

proyecto de sistema de seguridad para la empresa constructora BUDESA reducir el tiempo de
desarrollo basado en la utilizacion de componentes dinamicos de la librería desarrollada. Estos
componentes pueden ser reutilizados para cualquier nuevo requerimiento.

7.1 Patrón de diseno

Un patrón de diseño es una descripción de clases y objetos comunicándose entre sí, adaptada
para resolver un problema de diseño general en un contexto particular. (Gamma, Helm, Johnson,
& Vlissides, 1995)
 22

Se hizo uso del patrón Composite, que tiene como propósito componer objetos en estructuras
arbóreas para representar jerarquías todo-parte. Manipular todos los objetos del árbol de manera
uniforme.

7.2 Formularios dinámicos

Los formularios son construidos a partir de un arreglo de campos, cada campo tiene un tipo
definido, a continuación, se detallan los componentes reconocidos dentro el formulario.

7.2.1 Componentes

Todos los componentes tienen atributos en común que son abstraídos en la clase componente:

Figura 4. Clase campo

Fuente: Elaboración propia

Especificaciones:

Campos Descripción
key Este campo debe coincidir con el nombre del
campo que debe ser enviado en el json.
label Es una cadena que será desplegada como
etiqueta relacionado al componente.
type Los tipos permitidos son:
 Textbox
 Textarea
 23

 Radiobutton
 Checkbox
 Dropdown
 Datepicker

required Especifica si es obligatorio llenar el campo.

value Representa el valor del campo.

Tabla 10. Especificación de campos en un componente base.

Fuente: Elaboración propia

7.2.1.1 Componente Textbox

Figura 5. Clase Textbox

Fuente: Elaboración propia

Campos Descripción
Config Representa el tipo de textbox:
Text
Number
pattern Recibe una expresión regular que será
tomada en cuenta para la validación del
campo
error Mensaje de error que será desplegado en
caso de que no cumpla con la expresión
regular.
 24

Tabla 11. Especificación de campos de un Textbox.

Fuente: Elaboración propia

7.2.1.2 Componente Textarea

En el caso del componente textarea, cuenta con las mismas características que un componente
base.

7.2.1.3 Componente Radiobutton

Figura 6. Clase Radiobutton

Fuente: Elaboración propia

Campos Descripción
options Representa un arreglo de opciones a ser
seleccionadas.
Nota: Solo una opción puede ser
seleccionada.

Tabla 12. Especificación del componente Radiobutton.

Fuente: Elaboración propia
 25

7.2.1.4 Componente Checkbox

Figura 7. Clase Checkbox

Fuente: Elaboración propia

Campos Descripción
options Representa un arreglo de opciones a ser
seleccionadas.
Nota: Múltiples opciones pueden ser
seleccionada.

Tabla 13. Especificación del componente Checkbox.

Fuente: Elaboración propia

7.2.1.5 Componente Dropdown

Figura 8. Clase Dropdown

Fuente: Elaboración propia
 26

Campos Descripción
options Representa un arreglo de opciones a ser seleccionadas.
Nota: Solo una opción puede ser seleccionada.

Tabla 14. Especificación del componente Dropdown

Fuente: Elaboración propia

7.2.1.6 Componente Datepicker

En el caso del componente datepicker, cuenta con las mismas características que un
componente base.

7.2.2 Configuración de formularios

El componente formulario contiene la lógica de poder renderizar un formulario a partir de un
arreglo de ítems, también contendrá un botón que permitirá armar un objeto json de salida para
emitir al componente padre que este usando el formulario.

Figura 9. Componente Formulario dinámico

Fuente: Elaboración propia
 27

Campos Descripción
Items Representa un arreglo de los campos con los
que contara el formulario.
labelButton La etiqueta para el botón
save El evento que transmitirá al componente
padre cuando se presione el botón.
disabled Pondrá a todo el formulario en modo de
lectura.

Tabla 15. Especificación de campos de un Dynamic form.

Fuente: Elaboración propia

7.2.3 Renderización de componentes

Para renderizar los componentes se hizo uso de los componentes que provee la librería Angular
Material.
Fue necesario iterar la lista de componentes, para que cada componente sea renderizado de
acuerdo al campo “type”

7.2.3.1 Iteración usando ngFor

ngFor es una directiva nativa del modulo @angular/common, su sintaxis es:

Figura 10. Sintaxis básica de ngFor

Fuente: Elaboración propia

variable Descripción
items Representa al arreglo que se desea iterar.
item Un elemento dentro la lista
Tabla 16. Especificación de campos de un Dynamic form.
Fuente: Elaboración propia
 28

7.2.3.2 Identificar un componente

A medida que se realiza la iteración se tiene la necesidad de identificar el componente a

renderizar, se identificará por medio de condicionales para los posibles valores que el campo
“type” de acuerdo con la especificación que se hizo en la Tabla 10.
7.2.3.2.1 Directiva ngIf

ngIf es una directiva nativa del modulo @angular/common, su sintaxis es:

Figura 11. Sintaxis básica de ngIf

Fuente: Elaboración propia

NgIf puede recibir una condición o una variable, en caso de que el valor sea falso no se renderiza
en el DOM los elementos que están dentro del elemento que tiene definido ngIf.

7.2.3.2.2 Directiva ngSwitch

NgSwitch es una directiva nativa del módulo @angular/common, su sintaxis es:

Figura 12. Sintaxis básica de ngSwitch

Fuente: Elaboración propia

NgSwitch se usa para declarar la variable que evalúa y *ngSwitchCase son los casos donde
concuerde la evaluación.
 29

7.2.3.2.3 Por que ngSwitch en lugar de ngIf

Condicionales para el formulario dinámico usando ngIf:

Figura 13. Condicionales con ngIf

Fuente: Elaboración propia
 30

NgSwitch fue utilizada en lugar de ngIf por que necesitamos contar con 6 tipos de comparaciones
de un mismo campo, ayudando a la legibilidad del código como se muestra en:

Figura 14. Condicionales con ngSwitch

Fuente: Elaboración propia
 31

7.2.4 Exposición de la información del formulario

La información del formulario es expuesta en el momento que el usuario presione el botón como
representación de petición, la cual se llevara a cabo siempre y cuando el formulario cumpla con
las validaciones que los campos contienen.

7.2.4.1 Validación

Todos los componentes pueden ser campos requeridos, sin embargo, el campo textbox puede
contar con una validación adicional relacionada a una expresión regular.

7.2.4.1.1 Campos requeridos

Los campos requeridos son distinguidos por un asterisco, y en caso de que no hayan sido
llenados se pondrán de color rojo de acuerdo a los estilos de la librería angular material.

Figura 15. Campo requerido

Fuente: Elaboración propia

5.1.4.1.2 Campo con validación customizada

Solo los componentes textbox cuentan con la opción de tener una expresión regular para validar
y desplegar un mensaje de error si no cumple con la mencionada validación.
 32

Figura 16. Uso de la directiva pattern

Fuente: Elaboración propia

La directiva pattern esta incluida dentro de @angular/forms, en caso de que en campo no

cumpla con la validación la etiqueta se pondrá en rojo para denotar error, junto a ella se verificará
que el error sea por el patrón y desplegará el mensaje de error que fue definido en la
configuración de los campos del formulario.

7.2.4.2 Recopilación de los datos

Después de validar que no exista ningún error en el formulario se creará un objeto de salida,
donde se expone el key del campo y su valor será value

Figura 17. Ejemplificación de la recopilación de datos

Fuente: Elaboración propia
 33

7.3 Listas dinámicas

Las listas son construidas a partir de:

 Arreglo de campos, se renderizan como las cabeceras de las columnas.
 Arreglo de objetos, que representa los valores a ser desplegados.

7.3.1 Cabeceras

El nombre de las columnas es renderizado a partir del campo label.

Figura 18. Ejemplificación de la renderización de cabeceras

Fuente: Elaboración propia

7.3.2 Renderización de datos

Se accede al value de acuerdo al type:

Figura 19. Segmento de código para renderizar los valores

Fuente: Elaboración propia
 34

Figura 20. Ejemplificación de la renderización de listas

Fuente: Elaboración propia

7.3.3 Acciones
Las acciones son definidas en un arreglo con la siguiente sintaxis:

Figura 21. Estructura de una acción

Fuente: Elaboración propia
 35

Campos Descripción
label Es una cadena que será desplegada en el link de acción.
callback Función a ser llamada cuando se dispare el evento click.
hasIcon La clase de icono de Font Awesome.
Tabla 17. Especificación de campos de una acción
Fuente: Elaboración propia

5.2.3.1 Renderización de acciones

Se recorre el arreglo de acciones y se va renderizando de la siguiente forma:

Figura 22. Segmento de código para renderizar una acción

Fuente: Elaboración propia

Figura 23. Ejemplificación de la renderización de acciones

Fuente: Elaboración propia
 36

8 CONCLUSIONES

 Angular es un framework de desarrollo para JavaScript creado por Google, el cual utiliza templates
y componentes. Los componentes están basados en Typescript que es un lenguaje que nos
permite beneficiarnos de las características de los lenguajes orientado a objetos y se compila a
javascript. Angular nos permite la construcción de interfaces de usuario que por lo general
consumen un API REST. Gracias a su CLI y a Material Design es posible construir una interfaz en
menor tiempo.
 Los históricos de los incidentes registrados en la empresa BUDESA fue un gran aporte para la etapa
de identificación de los requerimientos.
 El uso del patrón composite se pudo contar con un código mantenible y reutilizable.
 Gracias al diseño de software orientado a objetos y el uso de patrones de diseño de creación, el
proyecto de sistema de seguridad para la empresa constructora BUDESA que tenía un plazo de 2
meses para tener una versión inicial de implementación de los formularios y listas se redujo a 1
semana usando los componentes dinámicos de la librería desarrollada lo que significa una
diferencia del 75% de ahorro en tiempo de desarrollo. Estos componentes pueden ser reutilizados
para cualquier nuevo requerimiento. Si en un futuro el sistema decide cambiar y convertirse un
CMS solo se necesitaría un adaptador para pasar el formato de metadatos que proviene desde
BackEnd.
 37

9 BIBLIOGRAFÍA

Angular. (22 de Octubre de 2018). Angular CLI Wiki. Recuperado el Octubre de 2018, de Angular
CLI: https://github.com/angular/angular-cli/wiki
Angular. (2018). What is Angular. Recuperado el Octubre de 2018, de Angular:
https://angular.io/docs#what-is-angular
Angular Material. (2018). Material Design components for Angular. Recuperado el Octubre de
2018, de Angular Material: https://material.angular.io/)
Aponte Benavides, L. F. (2017). Análisis de la relación costo-beneficio de la implementación de
un sistema gps para el control de rutas en la empresa bimbo de colombia s.a regional
bogotá. Universidad Distrital Francisco José de Caldas. Bogotá.
Asfahl, C. R. (2000). Seguridad industrial y salud.
Cortés Díaz, J. M. (2005). Seguridad e higiene en el trabajo. Técnica de prevención de riesgos
laborales. Madrid, España: Editorial Tébar.
Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1995). Design Patterns. Addison Wesley.
Henao, F. (2013). Riesgos en la construcción.
Instituto Radiofónico Fé y Alegria Quito – Ecuador. (2012). Sistemas de Información. Recuperado
el Octubre de 2018, de https://irfeyal.wordpress.com/investigaciones/sistemas-de-
informacion/
Lodash. (2018). lodash v4.17.11. Obtenido de lodash: https://www.npmjs.com/package/lodash
Nwamba, C. (2017). TypeScript 2.x for Angular Developers.
TypeScript. (2018). TypeScript. Recuperado el Octubre de 2018, de
https://www.typescriptlang.org