Scientia et Technica Año XVI, No 44, Abril de 2010. Universidad Tecnológica de Pereira. ISSN 0122-1701 178

Fecha de Recepción: Enero 26 de 2010Fecha de Aceptación: Marzo 25 de 2010

DISEÑO DE FRAMEWORK WEB PARA EL DESARROLLO DINÁMICO DEAPLICACIONES

Design Framework for the Development Dynamic Web Applications

RESUMENEl uso de Frameworks en la construcción de aplicaciones Web es un tema dereciente desarrollo e investigación en el área del software, y está muyrelacionado con el concepto “Web 2.0” y los sistemas modernos de información.Este artículo presenta avances del proyecto que plantea el diseño y creación deun Framework web robusto y eficiente, implementado con herramientas desoftware libre, que facilite el desarrollo de aplicaciones web corporativas a travésde asistentes, con su estructura general (sesiones, seguridad y navegación) y lasdiferentes páginas de gestión, a partir del modelo de datos de la aplicación.

PALABRAS CLAVES: SGBD, Framework, Ingeniería Web, LDAP, ORM,Página Web dinámica, Patrón de diseño, WebApps.

ABSTRACTUsing Frameworks in building Web applications is a topic of recentdevelopments and research in the area of software, and is related to the concept“Web 2.0” and modern information systems. This paper presents progress of theproject involving the design and creation of a robust and efficient WebFramework, implemented with free software tools that facilitate the developmentof corporate web applications through wizards, with its general structure(session, security and navigation) and the various pages of management, fromthe model of application data.

KEYWORDS: DBMS, Design Pattern, Dynamic Website, Engineering Web,Framework, LDAP, ORM, WebApps.

GUSTAVO MARTÍNEZVILLALOBOSIngeniero de Sistemas, Esp.Profesor AsistentePrograma Ingeniería de SistemasUniversidad de Ibaguégustavo.martinez@unibague.edu.co

GERMÁN DARÍO CAMACHOSÁNCHEZEstudiante último semestreIngeniería de SistemasUniversidad de Ibaguégermancamacho@gmail.com

DANIEL ALBERTO BIANCHAGUTIÉRREZEstudiante último semestreIngeniería de SistemasUniversidad de Ibaguédabiang@bundenet.com

1. INTRODUCCIÓN

En el desarrollo tradicional de un sistema de informaciónes indispensable la normalización de datos; no importacómo se manipule la información de una empresa uorganización lo ideal es que esté estructurada de un modoconocido para poder manejarla, almacenarla, recuperarla.Para este proceso se definen modelos de datos con unadeterminada estructura (que habitualmente se conviertenen tablas de una base de datos). Anteriormente, la únicainformación estructurada en un sistema era la referente a“los datos”. El problema subsecuente a este es que unsistema es mucho más que datos (Código fuente,librerías, archivos de configuración, etc.). Todo estecódigo generado y su orden mismo dependíandirectamente de los encargados de desarrollar el sistemay, desde la existencia de los primeros compiladores hastala aparición de los primeros generadores de códigocomercial u orientado a "usuarios finales", la generaciónde código era exclusividad de programas compiladoresespecializados.

Ante esta situación problemática surgieron los llamados“Frameworks”, [1] con el propósito de normalizar y

estructurar el código del sistema, facilitando un esquema(un patrón, un esqueleto) para el desarrollo y/o laimplementación de aplicaciones. El uso de frameworkspara cualquier tipo de desarrollo reduce el tiempo deelaboración e implementación y ayuda a hacer un trabajomantenible y escalable, según las características delmismo [2].

Un framework agrega funcionalidad extendida a unlenguaje de programación, automatiza muchos de lospatrones de programación para orientarlos a undeterminado propósito, proporcionando una estructura alcódigo, mejorándolo y haciéndolo más entendible ysostenible, y permite separar en capas la aplicación. Engeneral, divide la aplicación en tres capas:

• La lógica de presentación que administra lasinteracciones entre el usuario y el software.

• La Lógica de datos que permite el acceso a unagente de almacenamiento persistente u otros.

• La lógica de dominio o de negocio, quemanipula los modelos de datos de acuerdo a loscomandos recibidos desde la presentación.

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Scientia et Technica Año XVI, No 44, Abril de 2010. Universidad Tecnológica de Pereira.179

Los Web Framework [3] pretenden facilitar el desarrollode Aplicaciones web (Sitios web, intranets, etc).Actualmente, PHP es conocido por su simplicidad y esampliamente usado en este campo del desarrollo desoftware web. También es común el uso de otroslenguajes “de scripting” o interpretados como Perl, Asp óJSP que permiten mayor facilidad de uso y flexibilidaden el rápido desarrollo de aplicaciones, pero al mismotiempo tienden a producir código de difícil sostenimientoy poco eficiente. En este ámbito, los patrones de diseñomás utilizados son aquellos que se centran en separar lapresentación (páginas HTML, CSS) de la lógica obackend.

También es relevante la técnica de programación ORM[4] para convertir datos entre el sistema de tipos utilizadoen un lenguaje de programación orientado a objetos y elutilizado en una base de datos; es el mapeo objeto-relacional (más conocido por su nombre en inglés,Object-Relational mapping. En la práctica, crea una basede datos orientada a objetos virtual sobre la base de datosrelacional. Esto posibilita el uso de las característicaspropias de la orientación a objetos (básicamente herenciay polimorfismo). Hay paquetes comerciales y de uso libredisponibles que desarrollan el mapeo relacional deobjetos, aunque algunos programadores prefieren crearsus propias herramientas ORM.

El desarrollo de sistemas de información es una de lastareas que más tiempo requiere en las empresas dedesarrollo de software, debido a que, además del tiempoque se necesita dedicar al levantamiento de lainformación y los requerimientos, la implementación dela solución en determinado lenguaje o herramienta es unproceso técnico complejo.

El presente trabajo plantea el diseño y creación de unaestructura Framework bien definida, reusable, en la quesus componentes faciliten la creación de aplicacionesweb, provea una capa de abstracción sobre la arquitecturaoriginal, ocultándola o adaptándola para no tener queutilizar el protocolo http de manera nativa y así acelerarlos tiempos de desarrollo y mantenimiento de software.Esta solución es propuesta con base en herramientas desoftware libre, aprovechando los beneficios de laslicencias GPL, en pro de reducir los costos delicenciamiento, buscando la calidad y rapidez dedesarrollo que este tipo de framework brinda, facilitandode esta manera también la adquisición de sistemas comoestos por empresas pequeñas. Los frameworks ofrecen unalto grado de reutilización –mucho más que con clasesindividuales-. En consecuencia, si una organización estáinteresada (¿y quién no lo está?) en incrementar su gradode reutilización del software, entonces debería enfatizarla creación de frameworks1.

1 Larman, Craig,UML y patrones – Análisis y diseño orientado aobjetos. 2da Edición. Pág. 503.

Para el desarrollo se adoptó un proceso secuencial conorientación IWeb; por su estructura, en este tipo deproyectos se puede sacar provecho a su organización. Elproceso genérico del marco de trabajo – comunicación,planeación, modelado, construcción y despliegue- esaplicable a la IWeb [5]. Estas cinco actividades del marcode trabajo se refinan en un conjunto de tareas del IWebque se adaptan a las necesidades del Framework Web. Seaplicaron empleando un flujo del proceso incremental,como se muestra en la siguiente figura.2

Figura 1. Proceso IWeb

2. PROCESO DE DESARROLLO WEB

La ingeniería Web (IWeb) es el proceso con el que secrean WebApps de alta calidad. La IWeb no es un clonperfecto de la ingeniería de software, pero toma prestadosmuchos conceptos y principios fundamentales de ella.Además, el proceso IWeb acentúa actividades técnicas yadministrativas similares. Existen sutiles diferencias en lamanera como se dirigen dichas actividades, pero elmétodo primordial dicta un enfoque disciplinado para eldesarrollo de un sistema software.

En el desarrollo de software, un framework es unaestructura de soporte definida en la cual otro proyecto desoftware puede ser organizado y desarrollado. Enprogramación, es un set de funciones o código genéricoque realiza tareas comunes y frecuentes en todo tipo deaplicaciones (creación de objetos, conexión a base dedatos, etc.). Esto brinda una base sólida sobre la cualdesarrollar aplicaciones concretas y permite obviar loscomponentes más triviales y genéricos del desarrollo yabre camino a que diseñadores y programadores puedanpasar más tiempo identificando requerimientos desoftware.

2 Pressman, Roger, Ingeniería de Software – Un enfoque practico. 6taEdición. Pág. 511.

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Scientia et Technica Año XV, No 44, Abril de 2010. Universidad Tecnológica de Pereira. 180

En general, los frameworks son construidos con base enlenguajes orientados a objetos. Esto permite una mejormodularización de los componentes y óptimareutilización de código. Además, en la mayoría de loscasos un framework implementará uno o más patrones dediseño de software que aseguren la escalabilidad delproducto. El uso de frameworks web para cualquier tipode desarrollo reduce el tiempo de elaboración eimplementación y ayuda a hacer un trabajo mantenible yescalable, según las características del mismo.

2.1 Análisis y diseño del sistema

El plan trazado para el proyecto Framework Webconsistió de una definición de tareas y un calendario deplazos respecto al periodo proyectado para el desarrollodel incremento de la WebApp. Se establecieron los casosde uso de requerimientos funcionales3 y no funcionalespara que el sistema cumpliera con los objetivospropuestos, como la generación de formularios simples,maestro detalle, formularios de búsqueda, pantallas deresultados y a su vez la administración de toda laMetadata que se requiere para crear una interfaz deusuario amigable, tanto para el desarrollo como para elambiente de producción e implementar un esquema demanejo de usuarios, y roles que se ajuste a cualquier tipode aplicación en general y que sea compatible conprotocolo LDAP.

Nombre

Requerimiento:

Configuración de listas de

valores

Clasificación: Funcional

Descripción del Requerimiento:

Se requiere que el software provea al usuario una

funcionalidad que permita configurar las distintas listas

de valores a utilizar en todos los formularios

desarrollados.

Consideraciones:

Las listas de valores podrán ser estáticas o dinámicas

basadas en datos que sean ingresados en otras estructuras,

a manera de consultas de otras tablas, estas mismas

deberán considerar el uso de relaciones Padre-Hijo para

utilizar listas dependientes.

Figura 2. Ejemplo de requerimiento funcional delproyecto

LDAP ("Lightweight Directory Access Protocol", enespañol, Protocolo Ligero de Acceso a Directorios) es unprotocolo de tipo cliente-servidor para acceder a un

3 Fuente: los autores

servicio de directorio. Un directorio es una base de datos,pero en general contiene información más descriptiva [6].

Las labores convencionales de análisis y diseño deingeniería del software se adaptaron al desarrollo delFramework Web. El intento era desarrollar análisis“rápidos”, modelos y patrones de diseño que definieranlos requisitos y al mismo tiempo representaran unaWebApp que cumpliera con las necesidades del proyecto.

Se realizó el modelo Entidad-Relación, encargado demanejar la metadata de las aplicaciones, esquema generalde usuarios con permisos y autorizaciones, configuracióndinámica de apariencia visual, definición del motor parala aplicación de plantillas.

2.2 Estudio de reutilización

A partir de los modelos obtenidos se revisaron lassecciones que mostraban funcionalidades similares oiguales, para determinar si se podían crear componentesque homologaran la funcionalidad entre sí.

Se realizó la búsqueda de herramientas open-source quefacilitaran la implementación de las funcionesespecíficas, como por ejemplo la aplicación de plantillas,o manejo general de bases de datos mediante interfacesen PHP [7].

2.3 Ámbito del sistema

El Framework Web para el Desarrollo Dinámico deaplicaciones se encargará de generar la infraestructuraesquemática de formularios, campos, relaciones, yoperaciones CRUD, a partir del modelo de base de datosde un sistema previamente contemplado.

A partir de la base de datos generada para un sistema, elFramework permitirá la configuración de todas las tablasdel mismo que requieran ser usadas y/o administradas através de un entorno web, facilitando la personalización yvalidación de cada atributo (campo).

Cada formulario podrá ser configuradoindependientemente de acuerdo a las especificacionesque necesite en cuanto a permisos de acceso yoperaciones permitidas.

La administración del Framework tiene la funcionalidadde ser modificable, ajustándose a las necesidades delsistema para el que se esté adaptando.

3. ARQUITECTURA DEL SISTEMA

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Scientia et Technica Año XVI, No 44, Abril de 2010. Universidad Tecnológica de Pereira.181

La arquitectura del Framework es inherentemente Webpara poder lograr los requerimientos propuestos, pero unaarquitectura Cliente/Servidor Web [8] no le da el valoragregado que sí da la correcta definición de componentesy delegación de responsabilidades a estos mismos dentrode la aplicación.

Esta arquitectura deberá aportar a la calidad deldesarrollo, teniendo como objetivo la escalabilidad,fiabilidad, desempeño y seguridad así que loscomponentes a diseñar deben cumplir o permitir obtenerestos puntos.

La Información de funcionamiento del Framework seguarda en una estructura de tablas de base de datos, porlo que el acceso a los datos es primordial, por esto paracompletar la arquitectura es necesario indicar que elservidor debe permitir la comunicación con el respectivoDBMS.

Establecidas las necesidades, se definió la arquitecturaCliente/Servidor4 mediante la cual el acceso alFramework se realiza a través de un Navegador deInternet, teniendo claro que utilizará http sobre TCP/IPcomo protocolo de comunicación. Es importante indicarque estas características permiten que el Framework seautilizado como aplicativo tanto en ambiente Intranet,como en Internet [9].

Figura 3. Arquitectura del sistema

Las herramientas y la tecnología IWeb aplicadas paraconstruir el Framework Web modelado, dieron comoresultado el incremento del WebApp, se dirigió una seriede pruebas rápidas para asegurar que se descubrieran loserrores en el diseño (es decir: contenido, arquitectura,interfaz, navegación).

3.1 Componentes

4 http://blog.buhoz.net/ blog1.php/2008/03/06/frameworks-mvc-de-desarrollo-web (Frameworks MVC de desarrollo Web, sitio consultadoen marzo de 2009).

Para complementar la arquitectura escogida y enfrentardiferentes problemas de interoperabilidad, seguridad,facilidad de acceso y desempeño, se definieron lossiguientes componentes5:

• Controlador: Se encarga de procesar lassolicitudes que se realizan desde la interfazgráfica y las re-direcciona a los procesosespecializados que devuelven su respuestamediante el mismo controlador.

• Gestor de Seguridad: Encargado de validar lospermisos del usuario en sesión para realizar laautenticación y autorización del mismo, estecomponente es accedido por el controlador en elmomento de requerir una acción determinada asíse logra en el momento que la sesión del usuariotenga cualquier cambio, que este se veareflejado al usuario.

• Gestor de formularios: Realiza todo el trabajorelacionado con la carga, validación yoperaciones CRUD sobre los formularios, deesta manera se desacopla la operación centraldel Framework de lo relacionado con acceso adatos y gestión de seguridad.

• Gestor de acceso a datos: Este componente seencarga de realizar el acceso a las Bases dedatos que se hayan configurado, así se centralizael acceso y se permite el uso de diferentes tiposde base de datos. Este componente seimplementará para cumplir el rol de capa deabstracción de datos.

Figura 4. Componentes del sistema

3.2 Interfaz gráfica

5 Fuente: los autores.

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Scientia et Technica Año XV, No 44, Abril de 2010. Universidad Tecnológica de Pereira. 182

Se eligió la maquetación por cascadas de estilo CSS paraser la encargada de ubicar los componentes de interfazgráfica, y para dar todas las característicascorrespondientes a tamaño de letra, espaciado, tamañosde títulos, colores, imágenes e íconos.

Figura 5. Ejemplo de lista con base en tabla (Fuente:autores)

La cascada de estilos CSS generada para el Framework[10] a manera de base contempla diferentes conceptos deldiseño de interfaces, para facilitar su manejo a losusuarios. Entre estos se encuentran, los tamaños deltexto, que permiten en las resoluciones óptimas detrabajo la lectura de los textos generados por el sistema.

3.3 Un resultado: selección de tablas

Uno de los resultados, a partir de la implementación delproyecto, es la posibilidad de seleccionar las tablas queaún no son gestionadas por el sistema para realizar lacarga de su correspondiente información.

Cuando se han seleccionado las tablas y después se eligeel botón “Generar Formularios”, se realiza el proceso decarga, y se muestran los mensajes correspondientes a lacarga tanto de los campos como de la tabla en general.

3.4 Herramientas de desarrollo

Para el desarrollo del Framework Web se dejaron adisposición las siguientes herramientas de software libre:

Komodo Edit 4.4 (www.openkomodo.com): Editor detexto con herramientas de marcado de sintaxis PHP,carga dinámica de variables en tiempo de desarrollo yproposición de funciones propias y de usuario paraautocompletar.

MySql versión 5.0.51b (www.mysql.com): Para eldesarrollo y pruebas se utiliza este DBMS en su versióncomunity; este motor de base de datos permite cargar lainformación teniendo siempre como objetivo las pruebasdel Framework en un ambiente cercano al de producción.

Apache (www.apache.org): Servidor de red para elprotocolo http. Una vez se inicializa crea unossubprocesos para poder gestionar las solicitudes. Apachese encarga de resolver las peticiones de páginas deInternet de los clientes utilizando el protocolo de Internethttp. Es la herramienta libre más utilizada como servidorWeb a nivel mundial, y es confiable para dar alFramework disponibilidad 7/24.

PHP (www.php.net): Lenguaje de scripting seleccionadopor su versatilidad, rapidez, escalabilidad. Se configuracomo módulo de Apache y permite de una manerasencilla configurar un balanceador de carga o un sistemaespejo para sobrellevar cualquier problema de nodisponibilidad [11].

AdoDB (www.adodb.sourceforge.net): Es una librería deabstracción para PHP, mediante la cual se puede realizaracceso a diferentes fuentes de datos de maneratransparente y estandarizada. AdoDB permite realizartareas de una manera única solamente cambiando elmotor de base de datos al que se accede, así que losdesarrollos pueden quedar desacoplados de laimplementación del DBMS.

Subversion 1.5.5 (www.subversion.tigris.org): Sistema decontrol de versionamiento o CVS, permite conexiónHTTP, en el cual se crea un proyecto gestionado por elCVS, que se encarga de asignar un código a cada archivopara poder llevar control sobre el mismo y facilitar a losdesarrolladores llevar una traza sobre los cambios sobrediferentes tipos de archivo.

TortoiseSVN 1.5.5 (www.tortoisesvn.net): Herramientasobre Windows que realiza las tareas de cliente CVS, elcual se conecta a un servidor externo para acceder a unrepositorio de archivos versionado. Esta herramientapermite crear repositorios locales, también poseeherramientas que permiten hacer “merge”, unión de dosarchivos editados por diferentes desarrolladores paralograr unificar los cambios realizados.

Figura 6. Selección de tablas (Fuente: autores)

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Scientia et Technica Año XVI, No 44, Abril de 2010. Universidad Tecnológica de Pereira.183

Figura 7. Menú modo Administrador (Fuente: autores)

4. CONCLUSIONES Y RECOMENDACIONES

El Framework Web dispone de las siguientesfuncionalidades: Proceso de autenticación,administración de roles y de usuarios, creación yadministración de formularios, generación de formulariosa partir de tablas, manejo de listas de valores y gestión deregistros.

Debido a la naturaleza del producto desarrollado, serealizó la selección de un modelo pequeño de dominiopara solucionar mediante la herramienta y de esta formalograr explorar y comprobar que se habían alcanzado losrequerimientos.

Fue evidente la importancia de definir estándares decodificación y de administración del código fuente paralograr el nivel de calidad requerido en la implementacióndel Framework.

La comunicación entre la base de datos y el usuario encuanto a entradas y salidas es facilitada por medio de unainterfaz web apoyada en una arquitecturaCliente/Servidor.

Es necesario efectuar la revisión de ciertos detalles decompatibilidad entre las partes principales del sistema,las diferentes librerías que permiten realizar AJAX deuna manera Cross-browser, manejo de gestores deplantillas, y acceso dinámico a la Metadata de las tablasen diferentes motores de Base de Datos.

Aunque se realizaron pruebas de las funcionalidades delsistema, es recomendable aplicar otros modelos deprueba y continuar investigando para el proceso deevolución de este producto software.

5. BIBLIOGRAFÍA

[1] Qué es un framework? Referencia web [enlínea].http://www.assembla.com./wiki/show/dX01x-pRGr3le5abIIDkbG/7-2-queesunframework.

[2] Larman, Craig. UML y Patrones. Unaintroducción al análisis y diseño orientado aobjetos y al proceso unificado. Madrid: PearsonEducación, 2003.

[3] Frameworks MVC de desarrollo web.Referencia web [en línea].http://www.blog.buhoz.net/blog1.php/2008/03/06/frameworks-mvc-de-desarrollo-web.

[4] Ceballos, Francisco. JAVA2. Interfaces gráficasy aplicaciones para Internet. México:Alfaomega-RaMa, 2008.

[5] Pressman Roger S, Ingeniería del Software. Unenfoque práctico. México: McGraw-Hill, 2005.

[6] Kroenke, David. Procesamiento de Bases deDatos. México: Pearson Educación, 2003.

[7] Bravo, Ginés. PHP5. México: Alfaomega-RaMa, 2005.

[8] Sommerville Ian, Ingeniería del Software.Madrid: Pearson, 2005.

[9] Generación de código en la programación webavanzada. Referencia web [en línea].http://www.geothesis.com/index.php?option=com_content&task=view&id=346.

[10]Frameworks para PHP. Referencia web [enlínea].http://www.slideshare.net/andreskarp/frameworks-para-php-adwa

[11]López Quijado, José. PHP y MySQLProgramación dinámica en el lado del servidor.México: Alfaomega-RaMa, 2007.

PDF Creator - PDF4Free v2.0 http://www.pdf4free.com