GUIA DE DESARROLLO

Universidad Católica de
Santa María

Artefacto: ​SIGESMED_GUIA_V3.0 Cliente: ​Región Moquegua

Ciclos de Negocio: ​Fase Elaboracion SIGESMED Fecha:

SIGESMED
Sistema de Gestión y monitoreo educativo

GUIA DE DESARROLLO
​SIGESMED_GUIA_V3.0

Historial de Revisiones

Fecha Versión Descripción Autor

06/06/2016 V3.0 Guia completa para el desarrollo en Equipo SIGESMED
SIGESMED
 Tabla de contenidos

1. INTRODUCCIÓN
2. DISEÑO CONCEPTUAL
2.1. ARQUITECTURA
2.1.1. Vista de la arquitectura
2.1.2. Diseño contextual
2.2. TECNOLOGÍAS UTILIZADAS
2.2.1. Tecnologías utilizadas en la arquitectura
2.2.2. Entorno de programación
3. PROCEDIMIENTO DE INSTALACIÓN
3.1. INSTALACIÓN DE PROGRAMAS
3.2. CONFIGURACIÓN
3.2.1. Creación de la Base de Datos
3.2.2. Configuración inicial de proyecto en Netbeans
4. ESTRUCTURA DEL PROYECTO
4.1. ESTRUCTURA DEL BACKEND ( carpeta “java” )
4.1.1. core
4.1.2. logic
4.1.3. service
4.1.4. util
4.2. ESTRUCTURA DEL FRONTEND ( carpeta “webapp” )
4.2.1. META-INF
4.2.2. WEB-INF
4.2.4. archivos
4.2.5. recursos
4.2.6. login.html
4.2.7. appLogin.js
4.3. ESTRUCTURA DE RECURSOS ( carpeta “resources”)
5. DESARROLLO DE NUEVOS MÓDULOS
5.1. EN EL FRONTEND
5.1.1. Entregables.
5.1.2. Integracion
5.2. EN EL BACKEND
5.2.1. Entregables
5.2.2. Integracion
5.3. EN LA BASE DE DATOS
5.3.1. Reglas para el diseño de BD.
5.3.2. Diccionario de Datos.
5.4. FORMATO DEL JSON
5.4.1. JSON de consulta
5.4.2. JSON de respuesta
6. REUTILIZABLES
6.1. REUTILIZABLES EN EL FRONTEND
6.2. REUTILIZABLES EN EL BACKEND
7. EJEMPLOS REALIZADOS
7.1. EN EL BACKEND
7.1.1. Creación del servicio
7.1.2. Creación del componente de lógica
7.1.3. Mapeo de Pojos
7.2. EN EL FRONTEND
7.2.1. Creación de la interfaz
7.2.2. Creación del controlador
8. FUNCIONAMIENTO
9. EJEMPLOS PROPUESTOS
10. AUTOEVALUACIÓN
11. REFERENCIAS
1. INTRODUCCIÓN

La guía de desarrollo del software SIGESMED tiene como finalidad brindar un amplio conocimiento al
desarrollador acerca del entorno de construcción, la arquitectura, instalación, ejemplos de uso, y otros
aspectos importantes.

2. DISEÑO CONCEPTUAL
2.1. ARQUITECTURA
2.1.1. Vista de la arquitectura
2.1.2. Diseño contextual
El diseño contextual hace referencia al modelo de arquitectura empleado, además de dar a conocer de
manera general cómo está conformada la arquitectura y la comunicación entre sus partes.

Modelo Vista Controlador (MVC) lado del cliente:

Framework como AngularJS incorporan los principios básicos del patrón MVC original a su manera de
construir aplicaciones web actuales. Delegando gran parte de responsabilidades al cliente como
(renderización de html validación de datos), y liberando de carga al servidor. Siendo este utilizado
solamente para nutrir de ​datos al cliente.

Servicio REST ​(Representational State Transfer):

Es un estilo de arquitectura para desarrollar servicios, donde se debe cumplir las siguiente premisas:
● utiliza los métodos HTTP de manera explícita (POST, GET, PUT ,DELETE, HEAD)
● no mantiene estado
● expone URIs con forma de directorios
● transfiere XML, JavaScript Object Notation (JSON), o ambos

Los servicios están disponibles y son puntos de acceso para consumir los recursos del servidor.

Intercambio de Información con JSON ( JavaScript Object Notation )

Para homogeneizar el intercambio de información entre el servidor y el cliente, se hace uso de​ JSON ​el
cual tiene un formato ligero y fácil de entender
2.2. TECNOLOGÍAS UTILIZADAS

2.2.1. Tecnologías utilizadas en la arquitectura

Se realiza una descripción de las tecnologías que son utilizadas en la arquitectura, de acuerdo a las
capas o partes que posee la misma; para ello se utiliza el siguiente cuadro de especificación.

2.2.1.1. Presentación

Tecnología utilizada Descripción

Html5 Es un lenguaje web semántico, adaptable, flexible, escalable

y multiplataforma.

Css Con este lenguaje, aplicamos reglas de estilo a las distintas

etiquetas del documento HTML

JavaScript Es un lenguaje de scripting basado en prototipos con tipado

dinámico y funciones de primera clase,​ ​que puede ser
aplicado a un documento HTML y usado para crear
interactividad dinámica.

AngularJS Framework con un gran auge en el mundo web cuenta con un

buen set de herramientas y plugins ya desarrollados, los
cuales nos pueden ayudar a crear un proyecto mantenible.

Plantillas y componentes bootstrap Framework que combina código HTML, CSS y Javascript
diseñado para ayudar a construir sitios y aplicaciones web
100% responsive adaptable a dispositivos

2.2.1.2. Servicios

Tecnología utilizada Descripción

JSON Es un formato ligero para el intercambio de datos. JSON es

un subconjunto de la notación literal de objetos de JavaScript
que no requiere el uso de XML

REST Es un estilo arquitectónico, un conjunto de convenciones para

aplicaciones web y servicios web, que se centra
principalmente en la manipulación de recursos a través de
especificaciones HTTP. REST es una interfaz web estándar y
simple que nos permite interactuar con servicios web de una
manera muy cómoda.

Seguridad por Tokens Un valor que nos autentifica frente al servidor. A diferencia de
una contraseña, se puede anular o hacer caducar sin causar
excesivas molestias al usuario.
2.2.1.3. Lógica de negocio
Tecnología utilizada Descripción

WebSockets Tecnología que proporciona un canal de comunicación

bidireccional y ​full-duplex​ sobre un único ​socket​ ​TCP​.

EJB Es un componente de negocio Java Enterprise, y para su

ejecución necesita un contenedor EJB/J2EE

2.2.1.4. Persistencia
Tecnología utilizada Descripción

Hibernate Es una herramienta de Mapeo objeto-relacional (ORM) para la

plataforma Java que facilita el mapeo de atributos entre una
base de datos relacional tradicional y el modelo de objetos de
una aplicación, mediante archivos declarativos (XML)

2.2.2. Entorno de programación

Se realiza una descripción de las tecnologías que son utilizadas para la programación del sistema, ya
sea en entorno gráfico, de servidores, entre otros; para ello se utiliza el siguiente cuadro de
especificación.

Herramientas de desarrollo Descripción

Lenguaje programacion JAVA L​enguaje de programación​ de ​propósito general​, ​concurrente​,

orientado a objetos​ que fue diseñado específicamente para tener
tan pocas dependencias de implementación como fuera posible.

Netbeans Entorno para el desarrollo de aplicaciones para el lenguaje java,

Soporta el desarrollo de ​J2SE, web, EJB y aplicaciones móviles.

Postgres Gestor de bases de datos relacional orientado a objetos y libre,

publicado bajo la licencia PosgreSQL.

Servidor Glassfish 4.1 Servidor de aplicaciones de software libre desarrollado por Sun
Microsystems, compañía adquirida por Oracle Corporation. Soporta
e implementa toda la tecnología definida por la plataforma java.

Inspector de código de Google Herramienta para el renderizado, estilo y estructura de las paginas
Chrome web, asi mismo nos permite ver a profundidad cómo es el
intercambio de recursos en la red.

Git Es un software de control de versiones diseñado por Linus

Torvalds, pensando en la eficiencia y la confiabilidad del
mantenimiento de versiones de aplicaciones cuando éstas tienen
un gran número de archivos de código fuente.

Repositorio bitbucket Es un servicio para el alojamiento de proyectos en la nube, que

utilicen sistema de control de versiones ​Git​.
3. PROCEDIMIENTO DE INSTALACIÓN

3.1. INSTALACIÓN DE PROGRAMAS

Se realiza la especificación de los programas o artefactos y la forma de instalación de cada uno de ellos
para lograr el funcionamiento del sistema que se desarrolla.

Instalar los programas necesarios previos al uso del sistema

Programa Manual de instalación

Netbeans 8.1 https://netbeans.org/community/releases/81/install.html

Postgres 9.5.2 http://www.ajpdsoft.com/modules.php?name=News&file=article&sid=669

Glassfish 4,1 * Tutorial para vincular glassfish con el ID Netbeans

https://dzone.com/articles/nb-class-glassfish-resources

Git * https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Repositorio bitbucket Registrarse en ​https://bitbucket.org/​ para acceder al proyecto en la nube.

Tutorial para la clonación del proyecto

https://bitbucket.org/tasseladmin/tassel-5-source/wiki/Create%20Netbeans%
20Project

* ​se pueden instalar de manera independiente, sin embargo​ ​Netbeans en un entorno de desarrollo
completo que ya cuenta con estas herramientas al momento de instalarlo.

3.2. CONFIGURACIÓN

3.2.1. Creación de la Base de Datos

Actualmente el modelado de la Base de Datos está en plena elaboración, pero se tiene una versión
inicial con la cual se está trabajando, y por eso la bd será actualizada progresivamente durante la etapa
de desarrollo.

Todos los script de la base de datos se encuentran en ​Base de datos

El nombre de la BD de datos es ​“sigesmed_bd”

Nombre del script es ​“sigesmed_bdv2.sql”,​ el cual contiene todo el esquema de la BD.

Abrimos el programa pgadmin de postgrest para crear la BD con el ​nombre ya indicado, ​encoding UTF8
y el ​owner postgres por default.
Después abrimos el editor de sql dando click en ​execute arbitrary SQL queries , ahí copiamos
el script de la BD y ejecutamos esto nos creará todo el esquema.

Después se debe ejecutar el script:​“sigesmed_carga_inicial.sql”,​ que contiene datos iniciales que

son muy importantes para el correcto funcionamiento y primer uso del sistema.
3.2.2. Configuración inicial de proyecto en Netbeans

En el ID Netbeans abrimos el proyecto ​sigesmed-source, antes de compilar configuramos la conexión

con la BD para ello abrimos el archivo configuración ​resources/hibernate.cfg.xml y editamos los
parametros de acuerdo al nombre , contraseña ,driver y nombre de base de datos.

<property name="hibernate.connection.driver_class">​driver para la coneccion con la BD​</property>

<property name="hibernate.connection.url">​direccion fisica de la BD/nombre BD​</property>
<property name="hibernate.connection.username">​usuario de la BD​</property>
<property name="hibernate.connection.password">​contraseña para el usuario​</property>
<property name="hibernate.show_sql">​true​</property>
<property name="hibernate.format_sql">​true​</property>

El mapeo se hará con anotaciones del estándar ​JPA​ de javaee , y se llama a la ubicacion de esos archivos

<!--configguracion inicial-->
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.FuncionSistema" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.SubModuloSistema" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.ModuloSistema" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.Organizacion" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.Area" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.OrganizacionRol" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.Rol" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.RolFuncion" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.Usuario" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.TipoOrganizacion" />
<!--tramite documentario-->
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.TipoTramite" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.RequisitoTramite" />
<mapping class="com.dremo.ucsm.gsc.sigesmed.core.entity.RutaTramite" />
Una vez configurada la conexión, descargamos las dependencias del proyecto haciendo click derecho
en el ​Proyecto y en la opción ​Build with Dependencies.

Subimos la aplicación al servidor para ello damos click derecho en el ​Proyecto y en la opción ​Run, o
presionamos la tecla​ F6 elegimos.

Elegimos el servidor​ glassfish que es donde se alojara el sistema.

Esperamos que suba la aplicacion sin ningun problema

Y finalmente abrimos el navegador con la dirección ​http://www.localhost:8080/SIGESMED/

4. ESTRUCTURA DEL PROYECTO

A continuación se detalla la estructura de los archivos del proyecto, el cual se divide en tres partes
principales:

● Carpeta ​“java”: ​Lugar donde se implementa el ​BackEnd​, aquí encontraremos los archivos ​.java
● Carpeta ​“webapp”: ​Lugar donde se implementa el ​FrontEnd​, aquí se encuentran los archivos
.html​,​ .css​, ​.js
● Carpeta ​“resources”: ​Lugar donde se configura el mapeo de datos con la BD utilizando
framework Hibernate, aquí encontramos archivos de configuración ​.xml
4.1. ESTRUCTURA DEL BACKEND ( carpeta “java” )

El contexto para el proyecto en el lado del servidor es “​com.dremo.ucsm.gsc.sigesmed”, ​y está

dividido en 3 capas que son:

4.1.1. core
capa principal donde se implementa el motor del sistema, que tiene funciones de arranque inicial,
seguridad, integracion de modulos de negocio y servicios,e intercambio de datos con el FrontEnd. Asi
mismo la capa core está compuesta por:

● datastore​ componente que sirve para hacer la coneccion con la base de datos
● entity​ capa donde encontramos todos los POJOs( (plain old objeto Java) que representan
datos que son mapeados a cada una de las tabla.
● integration​ encontramos los componentes para hacer la integración de los módulos de la
lógica del negocio, y los servicios implementado.
● security​ componente para hacer el control de seguridad y acceso al sistema.
● service​ se encuentran los componentes para la implementación de los servicios web, e inicio
del sistema.

4.1.2. logic
capa para la “lógica del negocio del sistema”, aquí se implementaran todos los módulos del forman
parte del SIGESMED, aqui ​desarrolladores pondrán sus implementaciones ​de los sub-módulos que
tendrán a cargo.

En la imágen siguiente vemos los sub-módulos y componentes que ya están siendo implementados:
 ● Sub-módulo ​configuracion_inicial: t​ rata sobre gestión de usuario, roles, organizaciones,
áreas, módulos, submódulos y funciones que son parte esencial para correcto funcionamiento
del sistema y que solo podrán ser accedidas por el administrador.
● Sub-módulo ​tramite_documentario: ​en proceso de construcción, ver módulo ​Tramite
documentario​.
● Componente ​login​: comprende la verificación de las credenciales para todo usuario
SIGESMED

4.1.3. service
Capa donde se implementaran todos los servicios Rest que brindara el sistema, la principal función de
esta capa es la de comunicar el ​FrontEnd​ con la capa de ​logic​ (Lógica de Negocio)

Por cada módulo en la capa “lógica” existirá un servicio rest, que nos permita acceder a el. El Servicio
para el Login es genérico porque se le utiliza solo para autenticar a un usuario, antes de acceder a los
demás módulos.

4.1.4. util
Aquí se encontrarán todos las funciones, clases o componentes que sirvan para complementar el
correcto funcionamiento de la parte de ​logic,​ además que deberán ser implementados de forma que
sean reutilizables para los módulos.

4.2. ESTRUCTURA DEL FRONTEND ( carpeta “webapp” )

El en lado del FrontEnd los archivos están organizados de la siguiente manera:

4.2.1. META-INF

4.2.2. WEB-INF
carpeta para la configuración del proyecto web en java y para subirlo al servidor glassfish.
4.2.3. app
Capa que contiene todo el ​FrontEnd​ del SIGESMED, y donde se implementa el patrón MVC, para ello
se utilizó el framework AngularJS. Los ​desarrolladores deberán colocar sus interfaces con sus
respectivos controladores de acuerdo al sub-módulo asignado.
La organización del proyecto en el lado del cliente, está dada como se ve en la figura.

● Encontramos los cuatros módulos principales de la lógica del negocio, que a su vez contienen
los sub-módulos que las conforman.
● app.js ​es el archivo principal para la configuración del proyecto angular.
● index.html​ plantilla principal que se utilizara para la navegación del sistema.
● mis-directivas.js​ archivos destinados para incluir todas los componentes nuevos, que se
creen para la interfaz basadas en directivas angular.
● mis-servicios.js ​archivos destinados para incluir los servicios públicos para toda la aplicación

4.2.4. archivos
Capa que contendrá todos los documentos, archivos, imágenes etc. que sean de interés y utilizados en
la “lógica del sistema”. (ejemplo: doc, pdf, jpg, xls, etc).

4.2.5. recursos
C​apa donde estarán todos los recursos web (css,js,jpg,png,font) que servirán para una mejor
presentación, visualización del sistema en el lado del cliente. Aquí ya se definió las plantilla que se
utilizara, que está basada en la librería “bootstrap”. Todo recurso que se añada deberá ser informado.

4.2.6. login.html
Archivo que contiene la presentación del login, donde los usuarios podrán iniciar una sesión en el
sistema, presentando debidamente sus credenciales.

4.2.7. appLogin.js
​Archivo controlador para el login.html, que solicitara el token de autenticación para para accesar al
sistema SIGESMED.

4.3. ESTRUCTURA DE RECURSOS ( carpeta “resources”)

hibernate.cfg.xml:​ archivo de configuración hibernate, aquí se hace la configuración para la coneccion
a la BD, como usuario, contraseña, driver, nombre y ubicacion de la BD datos. Asi mismo se escriben
las rutas donde se encuentran las clases (POJOs), para el mapeo con la BD.
5. DESARROLLO DE NUEVOS MÓDULOS

Durante el proceso de desarrollo de nuevos módulos, a cada desarrollador se le encargará a uno o

varios casos de usos, que forman parte de un módulo de lógica de negocio. El desarrollo de cada
módulo o componente de negocio se divide en 2 partes:

● En el FrontEnd
● En el BackEnd

5.1. EN EL FRONTEND

En la carpeta ​app/​ se deberá crear una interfaz que permita la comunicación con el cliente, donde se
pueda visualizar y manipular datos, de acuerdo al caso de uso. Después y siguiendo el patrón MVC se
deberá crear también el controlador, donde se implemente la funcionalidad para que dé soporte a la
interfaz, tener en cuenta que el controlador deberá de comunicarse y consumir el servicio creado en el
BackEnd​ si este lo requiera.

5.1.1. Entregables.

Al finalizar esta parte el desarrollador deberá entregar dos archivos:

● Un archivo ​.html​ donde estará la interfaz, basada en la plantilla elegida por el equipo. El
nombre del archivo deberá tener concordancia con el caso de uso a realizar, empezando por la
primera letra en minúscula.
● Un archivo ​.js​ donde estará el controlador de la interfaz, que está basado en el framework
angularjs. ​IMPORTANTE:​ El nombre del archivo será igual al de la interfaz añadiendo el sufijo
Ctrl, ​asi mismo​ ​el ​nombre del​ ​controlador​ ​deberá ser el mismo al del archivo .js.

Todo recurso web externo al proyecto ( .css, plugins, font, imágenes etc. ) que se necesiten para el
buen desarrollo en la parte del FrontEnd, se deberá informar al encargado para que realice una correcta
incorporación del recurso al proyecto.

5.1.2. Integracion

Para probar e integrar los respectivos entregables deberán realizar lo siguiente:

● Ubicar la carpeta donde se alojarán los archivos, para ello deberán ubicar primero el módulo
principal, seguido del sub-módulo al cual pertenecen.
● Para añadir la función al sistema, abrimos el modulo: ​AGREGADOS​ y al submódulo:
CONFIGURACIÓN DEL SISTEMA y​ al menú: ​FUNCIÓN SISTEMA

● Agregamos una nueva función llenando cuidadosamente el siguiente formulario.

 ● Luego entramos al menú rol y seleccionamos el rol ​admin​ y lo editamos, vemos dos columnas
de funciones las ​asignadas​ y ​no asignadas,​ como creamos una nueva función esta no está
asignada al rol admin hacemos doble clic en la función que queremos asignar al rol y
guardamos los cambios.

● Y finalmente cerramos sesión y volvemos a iniciar sesión, y veremos que nuestra función se
añadió correctamente al submódulo que le asignamos, para ello verificamos con el inspector de
código, si todo salió correctamente no debe de haber ningun error en la consola.

5.2. EN EL BACKEND
Se trabajará sobre las carpetas:

● service/rest/​ donde se creará un micro servicio rest basado en el estándar de java, que atienda
peticiones del cliente y redirigirlas a sus respectivas operaciones que se encuentran en la lógica.
● logic/ ​donde se implementaran las operaciones que involucran la lógica de negocio de acuerdo al
caso de uso encomendado. Cada ​componente de lógica nuevo tiene que tener la siguiente
estructura. Debe estar dado por la versión (​v1, v2,...)​ que se tenga del componente, seguido del
core​ donde se configura el componente para que pueda ser añadido al sistema y la carpeta ​tx
donde se ubican todas las operaciones o transacciones que se realicen.

5.2.1. Entregables
Durante el trabajo del en el BackEnd el desarrollador deberá presentar sus archivos ​.java​:

● Un archivo donde se encuentre el micro-servicio rest. El nombre del archivo deberá tener
coherencia o igual nombre al sub-módulo, terminando con la palabra ​Service​.

● Uno o varios archivos donde se implementen parte de la lógica, que serán tratadas como
operaciones o transacciones. El nombre del archivo o archivos, debe tener coherencia con la
función a realizar, asi mismo deben terminar con el sufijo ​Tx.

● Un archivo, de configuración donde se registran las operaciones de la lógica, que formarán parte
del sistema. Este archivo siempre tendrá el nombre de ​ComponentRegister.java.​ Y siempre
estara presente en cada componente nuevo que se cree.

● Adicionalmente podrán crear clases que ayuden al buen desarrollo de dichas operaciones. Si
necesitaran un componente adicional, deberán informar al encargado para que les de solución ya
sea creando uno o utilizando una librería externa.

5.2.2. Integracion

Antes de la integración al sistema cada componente de logica debe ser registrado internamente. Esto
se realiza en el archivo ​ComponentRegister.java​ que se encuentra en cada componente.
Se debe considerar el módulo al cual pertenecen, nombre del componente que lo identifica, la versión y
las diferentes operaciones indicando de manera explicita que tipo de operacion es. (POST, GET,
DELETE, UPDATE).

Hecho esto el sistema al iniciar cargará automáticamente todos los servicios y componentes
de lógica que deben estar ubicados correctamente.

● Para los servicios el lugar ubicacion es ​service/rest/ ​y ubicar el ​sub-módulo​ al cual pertenece.
● Para los componentes de lógica será en la carpeta​ logic/ y​ ubicar el​ sub-módulo ​al cual
pertenecen.(no olvidar la estructura del componente de lógica).

5.3. EN LA BASE DE DATOS

Para la base de datos se tendrá un modelo de la BD único, donde estarán todas las tablas con sus
atributos y tipos de datos respectivos. Todos los desarrolladores manejan el mismo modelo, y por eso
todo cambió, aumento de tablas o atributos deberá ser informado al encargado.
5.3.1. Reglas para el diseño de BD.

1. Todos los nombres de las tablas, atributos, vistas, procedimientos almacenados deberán estar
escritos en minúscula.
2. Los nombre de las tablas no serán abreviados y las palabras serán separados por “​_​”.
3. Los atributos serán abreviados por las tres primeras letras de cada palabra y separados por “​_​”.
4. Los atributos clave deberán terminar con el sufijo “​id​”.
5. Si es una clave incremental, esta deberá ser un tipo ​serial (​ propia de Postgres).
6. Las tablas tendrán tres atributos fijos

○ usu_mod​ de tipo integer, representa el usuario que modifico el registro

○ fec_mod​ de tipo TimesTamp, representa la fecha de modificación
○ est_reg ​de tipo char, representa el estado del registro, Activo, Inactivo, Eliminado (A,I,E).

5.3.2. Diccionario de Datos.

Para un mejor control sobre la BD todos los miembros deberán registrar las tablas con sus atributos en
el​ ​diccionario de datos​.

● Primero se debe identificar el módulo y el submódulo donde se trabajara.

● Para las tablas se debe asignar el esquema donde se ubicará la tabla
● Para los atributos se debe proporcionar información detallada acerca de nomenclatura, nombre,
descripcion,clave, tipo de dato, tamaños,

Ejemplo de diagrama de Entidad Relación

5.4. FORMATO DEL JSON
A continuación de describe la estructura del JSON, para realizar un correcto intercambio de información
entre el servidor y el cliente.

5.4.1. JSON de consulta

{
"​i.type​":"inet-req",
"​cmd​":"tipoTramite@1:insertarTipoTramite",
"​identity​":"usuariox",
"​scope​":"web",
"​meta​":{
"meta.description":["obj"],
"user.id":["46663119","element 0","element 1"],
"user.sessionid":["22343453453"]
},
"​data​":{
"atributo1":"valor1",
"atributo2":"valor2",
"atributo3":"valor3",
"atributo4":{
"subatributo1":"valor1",
"subatributo2":"valor2",
"subobject":{
"subobjectatrib1":"subobjectvalue",
"subobjectatrib2":"subobjectvalue",
"subobjectatrib3":"subobjectvalue",
},
"subarray":["element1","element2","element3"]
},
"atributo5":["12","34","14"]
}
}
● i.type​: campo indispensable, tipo “string”, indica el tipo de JSON si es consulta o respuesta
● cmd​: campo indispensable, tipo “string” fundamental donde se pone la operación que se desea
hacer en el servidor, sintaxis:

dominio​@​version​:​operacion

dominio​: ámbito o nombre del componente dentro del sistema donde se desea realizar la operación
versión​: número de versión con la cual se desea trabajar
operación​: nombre de la operación al cual se quiere acceder

● identity​: campo indispensable, tipo “string” id o nombre que identifica al usuario

● scope​: campo indispensable, tipo “string” plataforma de trabajo ejem: web
● meta​: campo indispensable, tipo “objeto” información adicional acerca de los datos
● data​: compo opcional, tipo ”objeto o array” donde va toda la información que se desea enviar al
servidor

5.4.2. JSON de respuesta

{
"i.type" : "inet-res",
"scope" : "web",
"response" : "",
"responseSta" : true,
"responseMsg" : "la inserción fue correcta",
"meta":{},
"data":[
"1",
"2",
"3",
"4",
{
"selement1":"e1",
"selement2":"e2"
}
]
}

● i.type​: campo indispensable, tipo “string”, indica el tipo de JSON si es consulta o respuesta
● scope​: campo indispensable, tipo “string”, plataforma de trabajo ejem: web
● response​: campo indispensable, tipo “string”, contiene información adicional acerca de la
respuesta del servidor
● responseSta​: campo indispensable, tipo “boolean”, nos indica si la operación realizada tuvo éxito
(true) o hubo algún error (false)
● responseMsg​: campo indispensable, tipo “string”, siempre tiene que haber un mensaje del
servidor.
● meta​: campo indispensable, tipo “object”, información adicional acerca de los datos
● data​: campo opcional, tipo ”objeto o array”, donde va toda la información que se desea enviar al servidor
6. REUTILIZABLES

Es la capacidad de los productos software para ser reutilizados, en su totalidad o en parte, en otras
aplicaciones, con la idea de evitar soluciones redundantes a problemas que ya se han solucionado con
anterioridad. Así, un programa debe agrupar en una serie de módulos aislados a los aspectos
dependientes de la aplicación particular.

Lista de reutilizables con los que se cuenta actualmente:

6.1. REUTILIZABLES EN EL FRONTEND

Nombre de Componente Descripción

Servicios CRUD Es un servicio desarrollado en angular, que se encarga de

hacer la comunicación con los servicios rest que brinda el
servidor, mediante peticiones tipo POST, GET, PUT y
DELETE, además maneja el intercambio de datos entre el
cliente y el servidor.

1. Nombre del archivo:

mis-servicios.js

2. Métodos para la comunicación con el servidor:

● insertar( urlRest, data, success, error )

● listar( urlRest, data, success, error )
● actualizar( urlRest, data, success, error )
● eliminar( urlRest, data, success, error )

urlRest: ​url del servicio rest para consumir.

data: ​objeto tipo json, donde se envía la información al
servidor.
success: ​función javajscript, que se ejecuta si el servidor da
una respuesta correcta.
error: ​funcion javajscript, que se ejecuta si ocurre un error
con en la comunicación o se recibe una respuesta errónea por
parte del servidor.

3. Métodos adicionales
● mensaje( título, mensaje)

titulo: titulo de la notificacion

mensaje: contenido del mensaje que se desea mostrar

● crearRequest(identity,scope)

identity​: id o nombre que identifica al usuario

scope​: plataforma de trabajo ejem: web

retorna : un objeto ​Request

6.2. REUTILIZABLES EN EL BACKEND

Nombre de Componente Descripción

WebRequest Es una clase que nos permite leer los datos tipo JSON que
llegen al servidor. Además de verificar y validar la estructura
de los datos que envía el cliente. Ademas nos permite invocar
la transaccion u operacion que se encuentra en el JSON

Nombre del archivo:

WebRequest.java

Métodos:

● createFromJSON( JSONObject )
retorna: un ​WebRequest

● fromJSON(JSONObject)
JSONObject​: objeto con formato json

● toJSON()
retorna: String

● invoke()
retorna:​ WebResponse

WebResponse Clase que se encarga de crear el JSON de respuesta, con la

estructura definida, tiene métodos estáticos que nos ayudan a
crear WebResponse más rápido

Nombre del archivo:

WebResponset.java

Métodos:

● fromJSON(JSONObject)
JSONObject​: objeto con formato json

● toJSON()
retorna: String

● crearWebResponseError(mensaje)
retorna:​ WebResponse
mensaje: ​mensaje para enviar al cliente

● crearWebResponseExito(mensaje)
retorna:​ WebResponse
mensaje: ​mensaje para enviar al cliente
 7. EJEMPLOS REALIZADOS

Antes de ver los ejemplos a nivel de código, es un requisito indispensable que el desarrollador tenga un
amplio conocimiento acerca de SIGESMED en los siguientes aspectos:

● Arquitectura del sistema.

● Tecnologías Utilizadas.
● Instalación del entorno de desarrollo.
● Estructura del proyecto.
● Conocimiento de cómo desarrollar un nuevo módulo.
● Manejo de Reutilizables.
● Haber probado el sistema funcionalmente, con el ejemplo base.

Ya vimos como es el funcionamiento del sistema, pero ahora vamos a ver como es el funcionamiento a
nivel de código, tomando el mismo ejemplo anterior ​LISTA DE TRAMITE​:
Primero analizamos el caso de uso que nos dice que se desea insertar, editar, eliminar y ver los tipos
de trámites (CRUD).

Como ya se mencionó anteriormente el trabajo, se divide en dos partes:

7.1. EN EL BACKEND

7.1.1. Creación del servicio

Lo primero que debemos hacer es implementar un servicio, que atienda esos cuatro pedidos, para ello
nos basamos en el estándar de java para crear servicios rest, utilizando sus notaciones:

● @Path: es la ruta para poder acceder al servicio o recurso

● @POST: para definir algún tipo de inserción
● @GET: para solicitar datos
● @PUT: para actualizar datos
● @DELETE: para hacer alguna eliminación

Todo servicio debe tener las cuatro operaciones descritas anteriormente, solo se diferencian en la forma
de obtener los datos, el POST y el PUT reciben los datos en un objeto, mediante la notación
@Consumes​ y el GET, DELETE lo reciben dentro del url de la consulta, para leerlo se utiliza la
notación ​@QueryParam​. Los datos son JSONs que están en forma de String.

Veamos el ejemplo siguiente :

Archivo ​TramiteDocumentarioService.java

@​Path​(​"/tramiteDocumentario"​)
public​ ​class​ ​TramiteDocumentarioService​ {
​private​ ​static​ ​Logger​ ​logger = ​Logger​.getLogger(TramiteDocumentarioService.​class​.getName());

​@​POST
​@​Consumes​(​MediaType.TEXT_PLAIN​)
​@​Produces​(​MediaType.APPLICATION_JSON​)
​public​ String recursoPost(String content){
​JSONObject​ jsonObject = ​new​ ​JSONObject​(content);
​WebRequest​ wRequest = ​WebRequest​.createFromJSON(jsonObject);
 ​WebResponse​ wResponse =
wRequest.invoke(​Sigesmed​.MODULO_TRAMITE_DOCUMENTARIO,​TypeTransaction​.type_transaction_POST);
​return​ wResponse.toJSON().toString();
}
​@​GET
​@​Produces​(​MediaType.APPLICATION_JSON​)
​public​ String recursoGet(​@​QueryParam​(​"content"​) String content){

​JSONObject​ jsonObject = ​new​ ​JSONObject​(content);

​WebRequest​ wRequest = ​WebRequest​.createFromJSON(jsonObject);
​WebResponse​ wResponse =
wRequest.invoke(​Sigesmed​.MODULO_TRAMITE_DOCUMENTARIO,​TypeTransaction​.type_transaction_GET);
​return​ wResponse.toJSON().toString();
}
​@​PUT
​@​Consumes​(​MediaType.TEXT_PLAIN​)
​@​Produces​(​MediaType.APPLICATION_JSON​)
​public​ String recursoPut(String content){

​JSONObject​ jsonObject = ​new​ ​JSONObject​(content);

​WebRequest​ wRequest = ​WebRequest​.createFromJSON(jsonObject);
​WebResponse​ wResponse =
wRequest.invoke(​Sigesmed​.MODULO_TRAMITE_DOCUMENTARIO,​TypeTransaction​.type_transaction_PUT);
​return​ wResponse.toJSON().toString();
}
​@​DELETE
​@​Produces​(​MediaType.APPLICATION_JSON​)
​public​ String recursoDelete(​@​QueryParam​(​"content"​) String content){

​JSONObject​ jsonObject = ​new​ ​JSONObject​(content);

​WebRequest​ wRequest = ​WebRequest​.createFromJSON(jsonObject);
​WebResponse​ wResponse =
wRequest.invoke(​Sigesmed​.MODULO_TRAMITE_DOCUMENTARIO,​TypeTransaction​.type_transaction_DELETE);
​return​ wResponse.toJSON().toString();
}
}

Para tratar la petición en los cuatro casos es el mismo. Primero parseamos el String recibido a un
JSON con la clase ​JSONObject​, después leemos y validamos su estructura del JSON con el método
createFromJSON​ de la clase ​WebRequest​, luego se llama al método ​invoke​ para ejecutar la
operación solicitada en la lógica, para ello le indicamos explicitamente a que módulo pertenece
(​Sigesmed​.MODULO_TRAMITE_DOCUMENTARIO) y que tipo de transaccion
(​TypeTransaction​.​type_transaction_PU​T​) sera, esto nos nos devolverá una clase ​WebResponse​ que
contendrá la respuesta de haber hecho la operación, y finalmente lo enviamos como un String al cliente.

Para integrar el servicio ver la sección ​integración de servicios

7.1.2. Creación del componente de lógica

Segundo, implementamos las operaciones en la lógica para ello solo veremos el caso de insertar tipo
de trámite en el siguiente código:
Archivo ​InsertarTipoTramiteTx.java
public​ ​class​ ​InsertarTipoTramiteTx​ ​implements​ ​ITransaction​{

​@Override
​public​ ​WebResponse​ execute(​WebRequest​ wr) {

​/*
* ​Parte​ ​para​ ​la​ ​lectura​, ​verificacion​ y ​validacion​ ​de​ ​datos
*/
​TipoTramite​ nuevoTipoTramite = ​null;​
​List​<​FileBaseObject​> listaArchivos = ​new​ ​ArrayList​<​FileBaseObject​>();
​try​{
​BaseObject​ requestData = (​BaseObject​)wr.getData();
String nombre = requestData.getElementString(​"nombre"​);
String descripcion = requestData.getElementString(​"descripcion"​);
​short​ duracion = requestData.getElementShort(​"duracion"​);
​double​ costo = requestData.getElementDouble(​"costo"​);
​boolean​ tipo = requestData.getElementBoolean(​"tipo"​);
​short​ tipoOrganizacion = requestData.getElementShort(​"tipoOrganizacionID"​);
​BaseArray​ listaRequisitos = requestData.getElementBaseArray(​"requisitos"​);
​BaseArray​ listaRutas = requestData.getElementBaseArray(​"rutas"​);

nuevoTipoTramite = ​new​ ​TipoTramite​(0, ​"asd"​, nombre, descripcion, duracion, ​new​ ​BigDecimal​(costo), tipo, ​new
Date​(), 1, ​'A'​, ​new​ ​TipoOrganizacion​(tipoOrganizacion));

String atributosReq[] = {​"Des"​,​"NomArcAdj"​};

String etiquetasReq[] = {​"descripcion"​,​"archivo"​};
​Class​ tiposReq[] = {String.​class​,String.​class​};

​//​leendo​ ​los​ ​requisitos

​if​(listaRequisitos.getList().size() > 0){
nuevoTipoTramite.setRequisitoTramites( ​new​ ​ArrayList​<​RequisitoTramite​>());
​for​( Object o : listaRequisitos.getList() ){
​BaseObject​ bo = (​BaseObject​)o;

String nombreArchivo = ​""​;

String rutaDescripcion = bo.getElementString(​"descripcion"​);

​//​verificamos​ ​si​ ​existe​ ​un​ ​archivo​ ​adjunto​ ​al​ ​requisito

​if​( bo.getElementObject(​"archivo"​) ​instanceof​ ​BaseObject​ ){
​FileBaseObject​ miF = ​new​ ​FileBaseObject​( bo.getElementBaseObject(​"archivo"​) );
nombreArchivo = miF.getName();
listaArchivos.add(miF);
}

nuevoTipoTramite.getRequisitoTramites().add( ​new​ ​RequisitoTramite​((​short​)0,

nuevoTipoTramite,rutaDescripcion,nombreArchivo,​new​ ​Date​(),1,​'A'​) );
}
}
​//​leendo​ ​las​ ​rutas
​if​(listaRutas.getList().size() > 0){
nuevoTipoTramite.setRutaTramites( ​new​ ​ArrayList​<​RutaTramite​>() );
​for​(Object o : listaRutas.getList()){
​BaseObject​ bo = (​BaseObject​)o;
 ​int​ areaOriID = bo.getElementInteger(​"areaOriID"​);
​int​ areaDesID = bo.getElementInteger(​"areaDesID"​);
String areaDescripcion = bo.getElementString(​"descripcion"​);

nuevoTipoTramite.getRutaTramites().add( ​new​ ​RutaTramite​((​short​)0,nuevoTipoTramite,areaDescripcion, ​new

Area​(areaOriID),​new​ ​Area​(areaDesID), ​new​ ​Date​(), 1,​'A'​ ) );
}
}
}​catch​(Exception e){
​return​ ​WebResponse​.crearWebResponseError(​"No se pudo registrar, datos incorrectos"​, e.getMessage() );
}
​//Fin

​/*
* ​Parte​ ​de​ ​Logica​ ​de​ ​Negocio
* ​descripcion​: El ​Sitema​ ​debe​ ​generar​ el ​codigo​ ​para​ el ​nuevo​ ​Tipo​ ​de​ ​Tramite​ ​antes​ ​de​ ​insertar​ a ​la​ BD
*/
nuevoTipoTramite.setCod(​"COD-01"​);
​//Fin
​/*
* ​Parte​ ​para​ ​la​ ​operacion​ ​en​ ​la​ Base ​de​ ​Datos
*/
​Session​ session = ​HibernateUtil​.getSessionFactory().openSession();
​Transaction​ miTx = session.beginTransaction();
​try​{
​//​insertanto​ ​mi​ ​tipo​ ​Tramite
session.persist( nuevoTipoTramite);
miTx.commit();
}​catch​(Exception e){
miTx.rollback();
​return​ ​WebResponse​.crearWebResponseError(​"No se pudo registrar el tipo de tramite "​, e.getMessage() );
}
​finally​{
session.close();
}
​//Fin

​//​si​ ​ya​ ​se​ ​registro​ el ​tipo​ ​de​ ​tramite

​//​ahora​ ​creamos​ ​los​ ​archivos​ ​que​ ​se​ ​desean​ ​subir
​for​(​FileBaseObject​ archivo : listaArchivos){
​BuildFile​.buildFromBase64(​ServicioREST​.PATH_SIGESMED+​"/archivos"​, archivo.getName(), archivo.getData());
}
​/*
* ​Repuesta​ ​Correcta
*/
​BaseObject​ oResponse = ​new​ ​BaseObject​();
oResponse.addElement(​"tipoTramiteID"​,nuevoTipoTramite.getTipTraId());
oResponse.addElement(​"codigo"​,nuevoTipoTramite.getCod());
​return​ ​WebResponse​.crearWebResponseExito(​"El registro de Tipo Tramite se realizo correctamente"​, oResponse);
​//Fin
}}
 Todas operaciones de lógica que se desarrollan implementaran la función ​execute​ que reciben un
objeto ​WebRequest ​y devuelven un objeto ​WebResponse​ de la interfaz ​ITransaction​. Esta función
será llamada por el sistema.
Cada operación recibe el objeto ​WebRequest​ donde se encuentra nuestros datos, realizamos la
lectura de la información con ayuda de la clase ​BaseObject​ que tiene un métodos de lectura para
cada tipo de dato. Como vamos a insertar un nuevo tipo de trámite, agrupamos los datos en la clase
TipoTramite​(POJO).
Para cumplir con el requerimiento, se deberá hacer uso de nuevas clases o implementar nuevos
métodos, que satisfagan el requerimiento. Por ejemplo generar el código de un tipo de trámite.

Luego llamamos a la conexión de la BD, mediante ​HibernateUtil.getSessionFactory()​, y con el

método ​openSession()​ que nos devolverá una Session para realizar nuestras respectivas operaciones
en la BD, nosotros utilizamos la función ​persist()​ enviándole el objeto ​TipoTramite ​para insertar un
nuevo registro.
Si todo salió correctamente preparamos la respuesta para el cliente, que en este caso enviamos el id y
el código del nuevo tipo de trámite generado, para ello utilizamos la clase ​BaseObject​, que es la que
representa los datos que se le envían al cliente. Y por último lo encapsulamos en la clase
WebResponse​, que es el que define la estructura de nuestro JSON de respuesta.

Para ver la integración de un componente de lógica ver sección ​integración de componentes

7.1.3. Mapeo de Pojos

Para el mapeo de los POJOs se utiliza las ​anotaciones de JPA.​ q

​ ue es un estándar de java para
realizar la persistencia

TipoTramite.java

@​Entity
@​Table​(​name​=​"tipo_tramite"​ ,​schema​=​"administrativo"​)
public​ ​class​ ​TipoTramite​ ​implements​ java.io.Serializable {
​@​Id
​@​Column​(​name​=​"tip_tra_id"​, ​unique​=​true​, ​nullable​=​false)​
​@​SequenceGenerator​(​name​ = ​"secuencia_tipotramite"​, ​sequenceName​=​"administrativo.tipo_tramite_tip_tra_id_seq"​ )
​@​GeneratedValue​(​generator​=​"secuencia_tipotramite"​)
​private​ ​int​ ​tipTraId​;
​@​Column​(​name​=​"cod"​, ​nullable​=​false​, ​length​=16)
​private​ String ​cod​;
​@​Column​(​name​=​"nom"​, ​length​=64)
​private​ String ​nom​;
​@​Column​(​name​=​"des"​, ​length​=256)
​private​ String ​des​;
​@​Column​(​name​=​"dur"​)
​private​ ​short​ ​dur​;
​@​Column​(​name​=​"cos"​, ​precision​=9)
​private​ BigDecimal ​cos​;
​@​Column​(​name​=​"tip"​)
​private​ Boolean ​tip​;
​@​Temporal​(​TemporalType.TIMESTAMP​)
​@​Column​(​name​=​"fec_mod"​, ​length​=29)
​private​ Date ​fecMod​;
​@​Column​(​name​=​"usu_mod"​)
​private​ Integer ​usuMod​;
 ​@​Column​(​name​=​"est_reg"​, ​length​=1)
​private​ Character ​estReg​;

​@​ManyToOne​(​fetch​=​FetchType​.LAZY)
​@​JoinColumn​(​name​=​"tip_org_id"​, ​nullable​=​false​)
​private​ ​TipoOrganizacion​ ​tipoOrganizacion​;

​@​OneToMany​(​fetch​=​FetchType​.LAZY, ​mappedBy​=​"tipoTramite"​,​cascade​=​CascadeType​.PERSIST)
​private​ List<​RequisitoTramite​> ​requisitoTramites​ ;

​@​OneToMany​(​fetch​=​FetchType​.LAZY, ​mappedBy​=​"tipoTramite"​,​cascade​=​CascadeType​.PERSIST)
​private​ List<​RutaTramite​> ​rutaTramites​ ;

​public​ TipoTramite() {
}
​public​ TipoTramite(​int​ tipTraId, String cod) {
​this​.​tipTraId​ = tipTraId;
​this​.​cod​ = cod;
}
​public​ TipoTramite(​int​ tipTraId, String cod, String nom, String des, ​short​ dur, BigDecimal cos, Boolean tip, Date fecMod,
Integer usuMod, Character estReg, ​TipoOrganizacion​ tipoOrganizacion) {
​this​.​tipTraId​ = tipTraId;
​this​.​cod​ = cod;
​this​.​nom​ = nom;
​this​.​des​ = des;
​this​.​dur​ = dur;
​this​.​cos​ = cos;
​this​.​tip​ = tip;
​this​.​fecMod​ = fecMod;
​this​.​usuMod​ = usuMod;
​this​.​estReg​ = estReg;
​this​.​tipoOrganizacion​ = tipoOrganizacion;
}
​public​ ​int​ getTipTraId() {
​return​ ​this​.​tipTraId​;
}
​public​ ​void​ setTipTraId(​int​ tipTraId) {
​this​.​tipTraId​ = tipTraId;
}
​public​ String getCod() {
​return​ ​this​.​cod​;
}
​public​ ​void​ setCod(String cod) {
​this​.​cod​ = cod;
}
​public​ String getNom() {
​return​ ​this​.​nom​;
}
​public​ ​void​ setNom(String nom) {
​this​.​nom​ = nom;
}
​public​ String getDes() {
​return​ ​this​.​des​;
}
​public​ ​void​ setDes(String des) {
​this​.​des​ = des;
}
​public​ ​short​ getDur() {
​return​ ​this​.​dur​;
}
​public​ ​void​ setDur(​short​ dur) {
​this​.​dur​ = dur;
}
​public​ BigDecimal getCos() {
​return​ ​this​.​cos​;
}
​public​ ​void​ setCos(BigDecimal cos) {
​this​.​cos​ = cos;
}
​public​ Boolean getTip() {
​return​ ​this​.​tip​;
}
​public​ ​void​ setTip(Boolean tip) {
​this​.​tip​ = tip;
}
​public​ Date getFecMod() {
​return​ ​this​.​fecMod​;
}
​public​ ​void​ setFecMod(Date fecMod) {
​this​.​fecMod​ = fecMod;
}

​public​ Integer getUsuMod() {

​return​ ​this​.​usuMod​;
}
​public​ ​void​ setUsuMod(Integer usuMod) {
​this​.​usuMod​ = usuMod;
}

​public​ Character getEstReg() {

​return​ ​this​.​estReg​;
}

​public​ ​void​ setEstReg(Character estReg) {

​this​.​estReg​ = estReg;
}

​public​ ​TipoOrganizacion​ getTipoOrganizacion() {

​return​ ​this​.​tipoOrganizacion​;
}
​public​ ​void​ setTipoOrganizacion(​TipoOrganizacion​ tipoOrganizacion) {
​this​.​tipoOrganizacion​ = tipoOrganizacion;
}

​public​ List<​RequisitoTramite​> getRequisitoTramites() {

​return​ ​this​.​requisitoTramites​;
 }
​public​ ​void​ setRequisitoTramites(List<​RequisitoTramite​> requisitoTramites) {
​this​.​requisitoTramites​ = requisitoTramites;
}

​public​ List<​RutaTramite​> getRutaTramites() {

​return​ ​this​.​rutaTramites​;
}
​public​ ​void​ setRutaTramites(List<​RutaTramite​> rutaTramites) {
​this​.​rutaTramites​ = rutaTramites;
}
}

7.2. EN EL FRONTEND

7.2.1. Creación de la interfaz

Creamos la estructura de nuestro vista en html, que según el caso de uso de ejemplo debemos
visualizar los datos, entonces creamos un tabla donde se puedan visualizar, con los campos indicados.

Archivo ​tipoTramite.html

<​table​ ​class​=​"table table-striped table-advance table-hover"

ng-init​=​"listarTiposTramites();listarAreas(usuMaster.organizacion.organizacionID)">
<​thead​>
<​tr​>
<​th​> Cod ​Tramite​</​th​>
<​th​ ​style​="​text-align​: ​center"> ​Tipo​</​th​>
<​th​> ​Nombre​ ​de​ ​Tramite​</​th​>
<​th​ ​class​=​"hidden-phone"> ​Descripción​</​th​>
<​th​> ​Costo​</​th​>
<​th​> ​Duración​</​th​>
<​th​> ​Requisitos​</​th​>
<​th​></​th​>
</​tr​>
</​thead​>
<​tbody​>
<​tr​ ​ng-repeat​=​"tt in tiposTramites">
<​td​><​a​ ​href​>{{tt.codigo}}</​a​></​td​>
<​td​ ​style​="​text-align​: ​center">
<​span​ ​class​=​"label label-mini" ​ng-class​=​"{'label-info': tt.tipo==true,'label-warning': tt.tipo==false}">{{​tipo​(tt.tipo)}}</​span​>
</​td​>
<​td​ >{{tt.nombre}}</​td​>
<​td​ ​class​=​"hidden-phone">{{tt.descripcion}}</​td​>
<​td​>S/. {{tt.costo}}</​td​>
<​td​>{{tt.duracion}} D</​td​>
<​td​>
<​button​ ​class​=​"btn btn-success btn-xs" ​data-toggle​=​"modal" ​data-target​=​"#modalVerRequisitos">​Ver​</​button​>
</​td​>
<​td​>
<​button​ ​class​=​"btn btn-primary btn-xs" ​ng-click​=​"prepararEditar($index,tt)"><​i​ ​class​=​"fa fa-pencil" ></​i​></​button​>
 <​button​ ​class​=​"btn btn-danger btn-xs" ​ng-click​=​"eliminarTipoTramite($index,tt.tipoTramiteID)"><​i​ ​class​=​"fa fa-trash-o "
></​i​></​button​>
</​td​>
</​tr​>
</​tbody​>
</​table​>

7.2.2. Creación del controlador

Seguidamente creamos el controlador donde implementaremos las funciones para que la interfaz
queda utilizar.
la siguiente línea crea un controlador llamado tipoTramiteCtrl, que utiliza dependencias propias de
angular como ​$scope​ y también nuestra propia dependencia ​crud y modal​ que sirve para
comunicarnos con el servidor y control cuadros de dialogo respectivamente ver.

app.controller(​"tipoTramiteCtrl"​,[​"$scope"​,​"crud"​,​"modal"​, ​function($scope,crud,modal){

Después se definen las variables que nos servirá para vincular con la interfaz

$scope.tipoOrganizaciones = [];
$scope.areas = [];
​//​Implenetacion​ ​del​ ​controlador
$scope.tiposTramites = [];​//​arreglo​ ​donde​ ​estan​ ​todos​ ​los​ ​tipos​ ​de​ ​tramites
​//variable ​que​ ​servira​ ​para​ ​crear​ ​un​ ​nuevo​ ​tipo​ ​de​ ​tramite
$scope.tipoTramite = {codigo:​""​,nombre:​""​,descripcion:​""​,tipo:​true​,costo:​"0.0"​,duracion:0,tipoOrganizacionID:0};
​//variable temporal, ​para​ ​la​ ​seleccion​ ​de​ ​un​ ​tramite
$scope.tipoTramiteSel = {};
​//​varible​ ​para​ ​la​ ​creacion​ ​de​ ​un​ ​nuevo​ ​requisito
$scope.requisito = {descripcion:​""​,archivo:{}};
$scope.requisitoSel = {descripcion:​""​,archivo:{}};
​//​lista​ ​de​ ​requisitos​ ​del​ ​tramite
$scope.requisitos = [];

Después definimos la función listar que hara un consulta de todos los tipos de trámites que existen en
el sistema.
Utilizamos nuestro servicio ​crud ​para crear un objeto tipo de ​Request p
​ ara hacer nuestra consulta,
definimos el usuario y el ambito, luego con el metodo ​setCmd() ​definimos el nombre del componente,
la versión, y la operación a realizar. Finalmente llamamos al mentodo ​listar() ​donde se define el ​path
del servicio​ a consumir y le enviamos nuestro objeto Request, y esperamos a que el servidor nos dé
una respuesta. Si todo salio correctamente recibiremos la data con la todos los tipos de tramite que se
encuentran registrados.

$scope.listarTiposTramites = ​function​(){
​//​preparamos​ ​un​ ​objeto​ request
​var​ request = crud.crearRequest(​"admin"​,​"web"​);
​//​asignamos​ ​la​ ​operacion​ a ​realizar
request.setCmd(​'tipoTramite'​,1,​'listarTipoTramite'​);
​//​llamamos​ ​al​ ​servicio​ ​listar​, ​le​ ​damos​ ​la​ ​ruta​ ​donde​ ​se​ ​encuentra​ el ​recurso​,el ​objeto​ request
​//y ​las​ ​funciones​ ​de​ ​exito​ y error
crud.listar(​"/tramiteDocumentario"​,request,​function​(data){
$scope.tiposTramites = data.data;
},​function​(data){
 console.info(data);
});
};

Queda como trabajo, el análisis de los demás métodos.

Ahora enlazamos los datos con la interfaz, con la interfaz, para ello utilizamos las directivas de angular:

ng-click​: es una instrucción que se ejecuta cuando ocurre el evento del click realizado en un
determinado componente.

<​button​ ​class​=​"btn btn btn-primary " ​ng-click​=​"listarTiposTramites()"><​i​ ​class​=​"fa fa-rotate-right"></​i​>

Listar​</​button​>

ng-mode​l: vincula el contenido de un contenido a algún dato, para su manipulación

<​input​ ​type​=​"text" ​class​=​"form-control" ​ng-model​=​"tipoTramite.nombre">

ng-repeat​: realiza un listado de elementos en un arreglo

<​tr​ ​ng-repeat​=​"tt in tiposTramites">

8. FUNCIONAMIENTO

Para probar la funcionalidad de la arquitectura del SIGESMED, se tomó como caso de prueba la función
de ​Lista de Trámite​ (todo el CRUD), del sub-módulo de ​Trámite documentario​ que a su vez pertenece al
módulo Administrativo.

Se nos presenta el login para acceder al sistema,el usuario de probar es ​admin​ y la contraseña ​admin

Vemos la pantalla de inicio y vamos al menú Trámite Documentario luego a Tipo Tramite.
Damos en listar los Tipos de Trámite y veremos los datos que están insertados actualmente.

Ahora vamos a insertar un nuevo Tipo de Trámite, para eso llenamos el formulario y damos en guardar

Si insertamos correctamente nos dará un mensaje de confirmación, y se añadirá a nuestra lista actual
Ahora vamos a eliminar un dato de la lista y simplemente damos click en la fila que queremos eliminar y
el sistema nos mostrara un dialogo de confirmación, aceptar.
Si se elimino correctamente el sistema mostrará el mensaje de confirmacion.

Ahora editaremos un dato de la tabla, para eso se nos abrirá un formulario donde podremos editar el
campo que elegimos.

Si todo sale bien recibiremos un mensaje de confirmación que nos dice que la actualización se realizó
con éxito.
9. EJEMPLOS PROPUESTOS

9.1. EN EL FRONTEND

a. Al momento de iniciar los tipo de tramites, debemos hacer click para visualizar los datos, siendo
esto no muy incómodo para el cliente. Lo que se pide es que los datos se cargan solos al
momento de ver esta sección. ( averiguar la instruccion: ​ng-init​).

b. Para eliminar el sistema debe mostrarnos un mensaje donde pregunte si en realidad se desea
eliminar el dato, esto por cuestiones de seguridad. ( crear un ventana modal).
c.

9.2. EN EL BACKEND

a. Para insertar un tipo de trámite se debe generar el código de acuerdo, a la institución a la que
pertenece.
b. Implementar una nueva operacion para el componente, donde se resuelva la búsqueda de un
tipo de trámite por su id.

Avanzado: completar la inserción del tipo de tramites son sus respectivos requerimientos. (El tipo de
tramite debe tener un arreglo donde están sus requisitos, persistencia con relación uno a muchos).

10. AUTOEVALUACIÓN

a. De una opinión sobre la arquitectura actual.

b. Que tanto domina el framework angularjs
c. Tiene conocimientos de como crear un nuevo componente utilizando las directivas angular
d. Qué tanto es su dominio con la framework de persistencia Hibernate
e. Que parte del desarrollo domina más FrontEnd o BackEnd
f. Enumere todos los problemas, durante el aprendizaje del sistema.
g. Que tanto le ayudó el documento en su aprendizaje.
h. Alguna sugerencia para mejorar el documento.

11. REFERENCIAS

Introducción al uso de JSON

http://www.json.org/json-es.html

Fundamentos Importantes para el uso de Git

https://git-scm.com/book/es/v1/Empezando-Fundamentos-de-Git

Página que explica conceptos importantes sobre java, MVC y servicios web
http://www.arquitecturajava.com/

Tutorial completo para el desarrollo de aplicaciones en angular

http://www.tutorialspoint.com/angularjs/index.htm
Tutorial de angularjs y servicio Rest en java
http://cursoangularjs.es/doku.php

Tutorial de servicios web RESTFULL

http://www.tutorialspoint.com/restful/

Tutorial para hacer reingeniería de la Base de datos utilizando NetBeans.

https://netbeans.org/kb/docs/web/hibernate-webapp.html

IEEE Std. 1012 – 1986 Standard for Software Verification and Validation Plans
https://standards.ieee.org/findstds/standard/1012-1986.html