UNIVERSIDAD SIMÓN BOLÍVAR DECANATO DE ESTUDIOS PROFESIONALES COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN

Transcripción

1 UNIVERSIDAD SIMÓN BOLÍVAR DECANATO DE ESTUDIOS PROFESIONALES COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN SISTEMA DE AUTO-SERVICIO PARA LA CREACIÓN DE Por: Ariana Isabel Pérez Fernández INFORME DE PASANTÍA Presentado ante la Ilustre Universidad Simón Bolívar como requisito parcial para optar al título de Ingeniero en Computación Sartenejas, Septiembre de 2012

2 UNIVERSIDAD SIMÓN BOLÍVAR DECANATO DE ESTUDIOS PROFESIONALES COORDINACIÓN DE INGENIERÍA DE LA COMPUTACIÓN SISTEMA DE AUTO-SERVICIO PARA LA CREACIÓN DE Por: Ariana Isabel Pérez Fernández Realizado con la asesoría de: Prof. Yudith Cardinale (Tutor académico) Ing. Ricardo Blanch (Tutor industrial) INFORME DE PASANTÍA Presentado ante la Ilustre Universidad Simón Bolívar como requisito parcial para optar al título de Ingeniero en Computación Sartenejas, Septiembre de 2012

3

4 Resumen El trabajo presentado a continuación describe todas las actividades llevadas a cabo durante el desarrollo del proyecto de pasantía larga realizado para la empresa Mobile Media Networks en el período comprendido entre Abril de 2012 y Septiembre del mismo año. La creación de aplicaciones para dispositivos móviles es uno de los servicios que ofrece la empresa Mobile Media Networks. Estas aplicaciones son creadas por varios desarrolladores en la empresa después de reunirse y considerar los requerimientos de sus clientes, necesitando de al menos 2-4 meses para su finalización y salida al mercado en una sola plataforma móvil. Muchas de estas aplicaciones son solicitadas por pequeñas o medianas empresas con poco presupuesto y con necesidades similares entre ellas. Se identificó la necesidad de atender a estas PYME produciendo aplicaciones que las mismas puedan costear. Con base en los objetivos de la empresa, el presente proyecto consistió en la elaboración de un sistema en plataforma web para la autogeneración de aplicaciones móviles multiplataforma, pudiendo ser manejado por un desarrollador de la empresa o un cliente de la misma, siendo éstos cualquier tipo de empresa entre ellas: publicitarias, todo tipo de tiendas, etc. Se desea que los clientes puedan especificar el aspecto y contenido de sus aplicaciones a través de módulos. Cada módulo provee una funcionalidad específica a la aplicación como por ejemplo: catálogo de productos, localizador de tiendas, redes sociales, etc. El sistema fue desarrollado en lenguaje PHP (PHP Hypertext Pre-processor, PHP preprocesador de hipertexto), a través del Framework (infraestructura digital) CakePHP, bajo la arquitectura MVC (Modelo Vista Controlador), la base de datos está basada en el manejador MySQL manejada a través de la herramienta phpmyadmin. El servidor utilizado es Apache y el sistema fue construido en Eclipse Helios. La metodología AUP (Agile Unified Process, Proceso Unificado Ágil) fue la utilizada para el desarrollo de este proyecto, realizado en un período de 20 semanas. iv

5 Dedicatoria A mis padres por su interminable e incondicional apoyo en lograr construir mis sueños. Y a mi querido abuelo, este donde este, por todas las esperas bajo el sol. v

6 Agradecimientos Agradezco a Dios por protegerme en todo momento y permitirme llegar hasta aquí. A mi Mamá, Isabel Fernández, por ser mi mejor amiga, mi aliada, mi ejemplo. A mi Padre, Francisco Pérez, por toda su preocupación y apoyo durante el transcurso de mi carrera. A mi Abuela, Milagros Carballedo, por todos tus cuidados y consejos, por alimentarme bien (y hasta de más) y por llevarme siempre en tus oraciones, porque estoy segura que siempre lo haces. Y a toda mi familia, gracias por estar siempre presente dándome ánimo para seguir adelante. A mis amigos, por compartir todos estos años de estrés pero a la vez felices y divertidos, en especial a Alechandrina Pereira, has hecho estos 6 años mucho más geniales. A César Hernández, por su ayuda en el ámbito académico pero también por enseñarme que no todo es blanco y negro. A Daniel Valera, porque sin ti me volvería loca con las páginas web. A Ulises Harris, por estar durante el transcurso del proyecto siempre molestando y así hacerlo increíblemente más llevadero. Y a Gabriela, Martín y Alexander. Todos, gracias por estar siempre presentes, por ser mis salvavidas y mi medio para desestresarme. A mi tutor industrial Ricardo Blanch, por su asesoría y dirección en la realización del proyecto. A Mobile Media Networks y mis compañeros de trabajo, por darme la oportunidad de realizar este proyecto de pasantía y brindarme un ambiente laboral ameno, en especial a Carlitos, Pedro, Danny, Portu, Gaby, Sabrina, Alicia y Verónica. A Yudith Cardinale, por su asesoría en el proceso de formalización, corrección y entrega de este proyecto. A la Universidad Simón Bolívar, por brindarme la oportunidad de aprender en esta gran casa de estudio la carrera que amo. A todos, Gracias. vi

7 Índice General Introducción... 1 CAPÍTULO I... 3 ENTORNO EMPRESARIAL Reseña Histórica de la empresa Empresa Mobile Media Networks Visión Estructura de la Empresa Resumen del cargo de Pasante de Tecnología... 5 CAPÍTULO II... 6 MARCO TEÓRICO Arquitectura de Software Arquitectura de Software Basada en Componentes Patrones de arquitectura de Software Patrón de Arquitectura MVC Object Relational Mapping (ORM) Módulo... 9 CAPÍTULO III MARCO METODOLÓGICO AUP Ciclo de vida de la metodología AUP Implementación de AUP, Fases y Disciplinas CAPÍTULO IV MARCO TECNOLÓGICO PHP Hypertext Pre-Processor MySQL Apache CakePHP Entorno de Desarrollo Eclipse vii

8 4.6. HTTP HTML JavaScript JSColor CSS PhoneGap JQuery JQuery Mobile AJAX Código Nativo BlackBerry Android ios XML JSON Mustache CAPÍTULO V DESARROLLO DEL PROYECTO Fase de inicio Modelado de requerimientos de alto nivel Determinación de los Riesgos Plan de pruebas Infraestructura de Desarrollo Hardware Software Fase de Elaboración Modelado por lluvia de ideas Almacenamiento de Usuarios en el Sistema Almacenamiento de Aplicaciones en el Sistema Personalización de Aspecto Personalización de Contenido Pre-visualización de la Aplicación viii

9 Generación de la Aplicación Refinamiento de los casos de uso Refinamiento del plan de pruebas Adiestramiento con el Framework CakePHP Adiestramiento con el Framework PhoneGap Riesgos técnicos Fase de Construcción Primera Iteración Diseño y Modelado de la Base de Datos Diseño e Implementación de la Interfaz Web para el Manejo de Usuarios, Selección de Módulos y Opciones Generales de la Aplicación Diseño e Implementación de la Interfaz Web para la Personalización del Aspecto de cada Módulo Segunda Iteración Diseño e Implementación de la Interfaz Web para la Personalización del Contenido de cada Módulo Implementación e Incorporación de Módulos Gestión de Usuarios por el Administrador Tercera Iteración Creación de Plantillas para cada Módulo Programación de la Auto-Generación del Código HTML, CSS y JavaScript Diseño e Implementación de una Vista Previa de la Aplicación Desarrollo de Paquetes por Plataforma Fase de Transición Primera Etapa de Pruebas Segunda Etapa de Pruebas Tercera Etapa de Pruebas Cuarta Etapa de Pruebas Conclusiones y Recomendaciones Referencias Bibliográficas Apéndices ix

10 Lista de figuras Figura 1.1. Organigrama de la Empresa [3]... 5 Figura 2.1. Patrón Arquitectónico Modelo Vista Controlador [10]... 8 Figura 3.1. Ciclo de vida de la metodología AUP [15] Figura 4.1. Modelo MVC del Framework CakePHP [22] Figura 5.1. Diagrama interacción cliente-empresa Figura 5.2. Porcentaje de Venta Mundial de Smartphones. [34] Figura 5.3. Diagrama de Flujo de Crear Aplicación Figura 5.4. Estructura de carpetas Figura 5.5. Estructura carpeta para BlackBerry Figura 5.6. Estructura carpeta para Android Figura 5.7. Estructura carpeta para ios Figura 5.8. Diagrama de Casos de Uso del Sistema Figura 5.9. Diagrama de Base de Datos Figura Captura de Pantalla de Personalización de Aspecto Figura Captura de Pantalla de Personalización de Contenido Figura Estructura de Carpetas y Archivos del Controlador de un Módulo Figura Estructura de Carpetas y Archivos de las Vistas de un Módulo Figura Captura de Pantalla de Interfaz Administrador Figura Extracción de Código para Plantilla Figura Modelo de Vista Previa de Aplicación x

11 Lista de Tablas Tabla 5.1. Lista de Riesgos del Proyecto Tabla 5.2. Resumen de ejecución de pruebas 60% del sistema Tabla 5.3. Resumen de ejecución de pruebas 85% del sistema Tabla 5.4. Resumen de ejecución de pruebas 100% del sistema xi

12 Lista de abreviaciones AJAX Asynchronous JavaScript and XML AS Arquitectura de Software ASBC Arquitectura de Software Basada en Componentes AUP Agile Unified Process BD Base de Datos CSS Cascading Style Sheets DOM Document Object Model ER Entidad-Relación (Modelo) HTML Hyper Text Markup Language HTTP Hyper Text Transfer Protocol IDE Integrated Development Environment IEEE Institute of Electrical and Electronics Engineers JSON JavaScript Object Notation MIT Massachussets Institute of Technology MVC Model View Controller ORM Object Relational Mapping RUP Rational Unified Process SDK Software Development Kit SEI Software Engineering Institute SQL Structure Query Language WWW World Wide Web XML extensible Markup Language xii

13 1 Introducción La evolución del mundo tecnológico ha resaltado por su aceleración en el transcurso de los últimos años. La sociedad actual convive con formas innovadoras en tecnología y despierta interés en cambios de simplificación, aspecto, funcionalidad y entretenimiento. Este es un escenario donde la variedad crece al igual que el consumo. La complejidad de los dispositivos móviles se ha unido a este crecimiento de formas e interacción, lo que los separa en un área especial, con su propio enfoque y consideración. De esta manera, las empresas se ven forzadas a evolucionar y poseer sus propias aplicaciones móviles para ofrecer más facilidad o mayores servicios a sus clientes. Mobile Media Networks es una de las empresas especializadas en esta área, siendo una de sus funcionalidades la creación de aplicaciones y portales para dispositivos móviles. El proceso de creación de estas aplicaciones es largo, requiere de desarrolladores de diferentes plataformas móviles como ios, Android y BlackBerry, y en muchos casos se realiza el mismo código para funcionalidades de la aplicación con ciertas modificaciones en aspecto y contenido. De ahora en adelante, en el presente informe, a estas funcionalidades se les llamarán módulos. Los clientes de Mobile Media Networks son empresas de todo tipo que venden sus productos a las masas y tienen la necesidad de hacerles publicidad para así obtener mayores ventas. Las aplicaciones móviles son un excelente medio para realizar esta publicidad y ofrecer a sus compradores mayores beneficios. Las pequeñas y medianas empresas desean promocionar sus productos y ofrecerlos a través de aplicaciones móviles pero debido a los altos costos no se lo pueden permitir. El objeto principal del presente proyecto es el de ofrecerle a las PYME aplicaciones móviles que satisfagan sus necesidades y que puedan costear. En vista a este último punto, surgió el planteamiento de este proyecto. Si se tuviesen unas plantillas con el código necesario para cada módulo y se pudiesen llenar posteriormente con la información y aspecto deseado por el cliente, se reduciría el tiempo empleado en su desarrollo, lo que lograría que Mobile Media Networks tuviese mayor producción en menos tiempo y se utilizaran menos recursos por lo que también se disminuiría el costo del producto. Mobile Media Networks decide solicitar un sistema que autogenere aplicaciones móviles multiplataforma a través de una plataforma web y que pueda ser utilizado tanto por sus

14 desarrolladores como por sus propios clientes (sin conocimientos de programación). 2 El diseño e implementación de ese sistema se conoce por el nombre de Auto-Servicio para la Creación de Aplicaciones Móviles (AppGenerator) y constituye el objetivo principal del proyecto de pasantía que se describe en el presente informe. Este libro se encuentra dividido en seis capítulos. En el primer capítulo se tiene una descripción general de la empresa, su misión, visión, valores y estructura, con la finalidad de proveer una perspectiva del entorno laboral. El segundo capítulo comprende el marco teórico donde se exponen los conceptos necesarios para la comprensión del problema y de la solución realizada. En los capítulos tres y cuatro se describen la orientación metodológica y la tecnología utilizada en el desarrollo del sistema. Todas las decisiones de diseño e implementación se exponen en el quinto capítulo. Finalmente se plantean conclusiones y recomendaciones. Objetivos Objetivo general Generar un sistema de autogestión que permita al cliente (sin conocimientos de programación), diseñar una aplicación a través de la elección de los módulos que desea tener, así como el aspecto y los datos que deben llevar. La creación de estos módulos no son parte del presente proyecto, pero fue necesario el diseño e implementación de módulos de prueba por parte del pasante. El proyecto generará una aplicación parcial pero funcional, refiriéndose a que: si se desea mayor personalización, un programador de la empresa se encargará de modificar el código generado además de todas las pruebas necesarias sobre la funcionalidad de la aplicación obtenida. Objetivos específicos a. Desarrollo del componente web que permite la elección por parte del cliente de los módulos junto a los datos que se desean incluir. b. Desarrollo del componente web que permite la elección por parte del cliente de la apariencia tanto de la aplicación en general como de cada módulo. c. Programación para la autogeneración de la aplicación con las preferencias y datos proporcionados por el cliente. d. Prueba de la interfaz y módulos a utilizar.

15 CAPÍTULO I ENTORNO EMPRESARIAL Mobile Media Networks es una empresa de desarrollo de portales, aplicaciones y distribución de publicidad en dispositivos móviles. A través del manejo de distintas plataformas móviles, diseñan, programan y ejecutan aplicaciones y portales web que logran integrar el contenido y la publicidad de distintas empresas a tabletas, celulares y otros dispositivos. En este capítulo se presenta una reseña histórica, misión, visión y estructura organizativa de la empresa además del rol del pasante en el proyecto Reseña Histórica de la empresa Mobile Media Networks nace de la empresa Adsmedia Mobile Advertising en España, dedicada al marketing móvil y a la publicidad. Adsmedia Mobile Advertising fue fundada en el año 2006 en Barcelona como empresa global, joven y dinámica con la capacidad de adaptar de forma inmediata la oferta de productos y servicios publicitarios a las nuevas y cambiantes necesidades del mercado. En el año 2007 gana el premio Empresa Innovadora de la Generalitat de Catalunya, el premio las 100 mejores ideas empresariales otorgado por la revista Actualidad Económica y queda como finalista en BCN-Emprendedores edición Poco tiempo después es seleccionada por Nokia como partner estratégico para el desarrollo de Mobile Advertising en España, Portugal y Latinoamérica. En mayo de este año se abren nuevas oficinas en Londres y en Caracas [1]. Al año siguiente surgen nuevos contratos de gestión y desarrollo con empresas como Movistar, Vodafone, Orange, Meridiano y Digitel. Expansiones y nuevas versiones del sistema encargado de la distribución de publicidad, Mobile Advertising Adserver, también tienen lugar, con nuevas tecnologías a ofrecer como el soporte de videos. En el año 2008 se realiza la apertura de oficinas en Brasil.

16 4 En el año 2009 es desarrollada y puesta en uso la nueva versión del sistema Mobile Advertising Adserver y nuevas oficinas son inauguradas en Bahrein y Lisboa. Por otro lado la empresa tiene presencia en el Mobile World Congress 2009 [1]. A mediados del año 2009 ocurre el traspaso de las operaciones de Adsmedia Mobile Advertising en España a Adsmedia Mobile Advertising en Venezuela, otorgando a estas últimas la gestión del conjunto de sucursales distribuidas a nivel mundial y el control de su desarrollo. Poco después esta empresa adquiere independencia con respecto a la sucursal en España y en el año 2010 cambian su nombre a Mobile Media Networks Empresa Mobile Media Networks Mobile Media Networks es la empresa especializada en brindar soluciones de Marketing en celulares y publicidad en Latinoamérica y la ciudad de Miami Visión Mobile Media Networks presenta su visión como: Creemos en la liberalización de las comunicaciones y en el desarrollo de la publicidad en el móvil. El móvil se ha convertido en un nuevo soporte publicitario, por ello en Mobile Media Networks se persigue generar valor para toda la cadena implicada, desde los usuarios hasta las agencias de medios, pasando por los operadores y los anunciantes. Incorporamos publicidad a toda la cadena de comunicación, con lo que se incrementa el acceso de los anunciantes a las comunicaciones, generando servicios gratuitos y, lo más importante, reduciendo los costos para el usuario. [2] Estructura de la Empresa La realización del proyecto de pasantía fue bajo el cargo de pasante en la dirección de Tecnología de Mobile Media Networks. A continuación un resumen detallado de la estructura organizativa de la empresa: Director de tecnología: se encarga de las decisiones generales en el desarrollo del software, sistemas y aplicaciones que la empresa ofrece. Director comercial: se encarga de dirigir las ventas y la administración de la empresa.

17 5 Líderes de proyectos: se encargan de coordinar a los desarrolladores en la creación de los sistemas, software y aplicaciones. Gerente de sistemas: se encarga de dirigir a los desarrolladores y tomar las decisiones específicas para el desarrollo del software, sistemas y aplicaciones. Líder de operación: se encarga de manejar los sistemas y el hardware que son utilizados por la empresa para proporcionar servicios. En la Figura 1.1 se presenta el organigrama de la empresa: Figura 1.1. Organigrama de la Empresa [3] Resumen del cargo de Pasante de Tecnología El pasante de tecnología es el estudiante que busca conocimientos que lo ayuden a desarrollarse como profesional. Las pasantías académicas representan un requisito para graduarse y se caracterizan por tener tiempos académicos y proyectos específicos [3].

18 CAPÍTULO II MARCO TEÓRICO Este capítulo presenta las bases teóricas sobre las que se desarrolla el proyecto. Principalmente se hace un enfoque sobre los fundamentos teóricos considerados para la arquitectura del software (programa). La idea de este capítulo es situar al lector en un espacio teórico necesario para la comprensión del proyecto Arquitectura de Software Existen múltiples definiciones de lo que es la AS (Arquitectura de Software) o Arquitectura Lógica, cada una con planteamientos diversos, una muestra de ello se puede encontrar en el SEI (Software Engineering Institute, Instituto de Ingeniería de Software) [4]. Sin embargo la definición oficial de AS es la que establece el IEEE (Institute of Electrical and Electronics Engineers, Instituto de Ingenierías Eléctricas y Electrónicas) que reza así: La Arquitectura del Software es la organización fundamental de un sistema formada por sus componentes, las relaciones entre ellos y el contexto en el que se implantarán, y los principios que orientan su diseño y evolución [5]. El objetivo de la AS es proporcionar al arquitecto elementos que le sean de ayuda a la hora de tomar decisiones, además de los conceptos que tienen como fin lograr una comunicación efectiva entre los diferentes equipos que trabajan en el desarrollo de un proyecto Arquitectura de Software Basada en Componentes La ASBC (Arquitectura de Software Basada en Componentes), es una rama de la ingeniería que propone descomponer el software en un conjunto de componentes funcionales. Este proceso pretende que la construcción de una pieza de software, esté basada en componentes ya existentes (infraestructura de componentes), que se integran bajo el principio de reutilización del software. De acuerdo con Council y Heineman [6], un componente de software se puede definir como una

19 7 pieza bajo un modelo de componentes, que puede ser puesta en funcionamiento (desplegada) de manera independiente, sin necesidad de modificarla. Así mismo, un modelo de componentes, es una especificación de interacción entre un conjunto de componentes de software, que se realiza bajo ciertos estándares. Finalmente, el conjunto de componentes conforma una infraestructura de software que tendrá un determinado uso. En este proyecto la arquitectura basada en componentes fue útil debido a su facilidad de desarrollo, ya que los componentes implementan una interfaz bien puntualizada para proveer la funcionalidad definida, permitiendo el desarrollo sin impactar otras partes del sistema. Además, su característica de reusabilidad permite que el software pueda ser empleado en otros sistemas Patrones de arquitectura de Software Los patrones de arquitectura son los que expresan, como su nombre indica, la organización estructural o el esquema del software y proveen soluciones a problemas de arquitectura. En otras palabras dividen un sistema en varios subsistemas y les proveen a éstos últimos responsabilidades y reglas que organicen la relación entre ellos [7]. Los patrones de arquitectura no suministran los mismos atributos de calidad, es por ello que los arquitectos no eligen un patrón al azar. Algunos patrones representan soluciones conocidas a problemas de rendimiento, otros han utilizado con éxito en sistemas de alta disponibilidad, otros se prestan bien a sistemas de alta seguridad, es por ello que la elección del patrón se hace una de las principales tareas a la hora de diseñar el software [4] Patrón de Arquitectura MVC El MVC (Model-View-Controller, Modelo-Vista-Controlador) es un patrón de arquitectura de software que fue descrito por primera vez en el año 1979, por Trygve Reenskaug. El patrón propuesto por Reenskaug, está basado en el libro A pattern Design (un patrón de diseño) de Christopher Alexander [8], y presenta una idea de separación entre la lógica de una aplicación, los datos y la interfaz sobre la cual se maneja. El patrón separa una aplicación en tres partes o capas: Modelo: Es el que maneja los datos y el comportamiento de los mismos en una aplicación. Este representa el eje de transformación de los datos en conocimiento, pues su objetivo es

20 8 efectuar tanto las operaciones básicas de manejo de datos, como las operaciones de extracción y clasificación de los datos para convertirlos en información. Vista: Maneja la forma en que se muestran sólo los atributos e información que son necesarios para el usuario, de acuerdo con el propósito de la vista. La vista representa además, la interfaz con la que el usuario puede introducir datos e información en el sistema. Así mismo, una vista sólo está asociada a un controlador, mientras que un modelo, puede tener múltiples vistas que muestren la información del mismo de distintas maneras. Controlador: Es el enlace que culmina la relación triangular dentro del patrón MVC, pues representa la asociación entre el usuario (a través de la vista) y el sistema o modelo. Su función como enlace es bidireccional, porque además de procesar toda petición de información hecha sobre el modelo, maneja la respuesta a la vista para que ésta la muestre al usuario. Lo importante de este tipo de patrón es que la vista y el controlador dependen del modelo, más el modelo no depende de la vista ni del controlador lo que permite hacer cambios y pruebas al modelo independientemente de su representación visual [9]. La interacción entre las tres partes del patrón MVC se puede apreciar en la figura 2.1. Figura 2.1 Patrón Arquitectónico Modelo Vista Controlador [10].

21 9 Específicamente en el ámbito web es muy utilizado ya que están totalmente definidas las separaciones entre los componentes: la vista generalmente está dada por el navegador (página web), el modelo es el sistema de gestión de base de datos y la lógica viene dada por los componentes del lado del servidor que manejan las peticiones [11] Object Relational Mapping (ORM) El ORM (Object Relational Mapping, Mapeo Objeto-Relacional) es el proceso de mapear objetos del software a tablas de bases de datos relacionales [12]. Los sistemas con ORM se encargan de crear objetos virtuales de una base de datos con el fin de que puedan ser manejados desde una aplicación orientada a objetos. Entre las ventajas de utilizar un ORM se encuentran: Reutilización: Permite utilizar los mismos fragmentos de código desde distintas partes de la aplicación. Encapsulación: Encapsula toda la lógica de datos de la aplicación pudiendo realizar un cambio general con tan sólo cambiar una función. Portabilidad: Debido a que no se utiliza una sintaxis específica de algún manejador de base de datos, como por ejemplo Oracle o MySQL, es posible realizar cambios de manejador sin mayor problema. Mantenimiento del código: Gracias a la correcta ordenación de la capa de datos, modificar y mantener el código es una tarea sencilla [13] Módulo Es una parte autónoma de un programa de computadora. En el caso específico del presente proyecto, se llamará módulo a lo que ofrece una función específica en la aplicación móvil. Como por ejemplo galería de imágenes, localizador de tiendas, twitter, etc.

22 CAPÍTULO III MARCO METODOLÓGICO Este capítulo presenta los aspectos metodológicos para el desarrollo del proyecto de pasantía, se describe brevemente la metodología utilizada así como su implementación AUP Para el desarrollo de este proyecto, se aplicó la metodología AUP (Agile Unified Process, Proceso Unificado Ágil), desarrollada por Scott Ambler, un ingeniero de software (programa) canadiense, líder de metodologías de desarrollo ágil de IBM Rational [14]. AUP es una versión simplificada de RUP (Rational Unified Process, Proceso Unificado Racional), que presenta una aproximación sencilla con técnicas orientadas al desarrollo de software ágil, pero que al mismo tiempo, utiliza varios de los conceptos de RUP. Describe de una forma simple el desarrollo de aplicaciones de software de negocio utilizando técnicas ágiles y conceptos que aún se mantienen válidos en RUP. El AUP aplica técnicas ágiles incluyendo desarrollo dirigido por pruebas, modelado ágil, gestión de cambios ágil y refactorización de base de datos para mejorar la productividad [15]. Para el desarrollo de este proyecto la metodología AUP fue implementada siguiendo la documentación de la versión Ciclo de vida de la metodología AUP Los sistemas de software requieren de un tiempo y esfuerzo considerable para su desarrollo y se desea que permanezcan por un periodo de tiempo largo. Durante este tiempo de uso se detectan varias etapas, cada una formada por tareas, que en conjunto se denominan ciclo de vida del software. El ciclo de vida de la AUP se encuentra estructurado por disciplinas y fases, al igual que todas las variaciones del Proceso Unificado tiene las mismas 4 fases: Iniciación, Elaboración,

23 11 Construcción y Transición, como muestra la figura 3.1: Figura 3.1 Ciclo de vida de la metodología AUP [15]. El eje vertical del gráfico representa la dimensión dinámica relativa al tiempo y el eje horizontal la dimensión estática Implementación de AUP, Fases y Disciplinas La metodología AUP se encuentra dividida en cuatro fases, cada una compuesta por un conjunto de técnicas y disciplinas de desarrollo. Al ser una metodología ágil, estas técnicas y disciplinas pueden ser adaptadas a las necesidades, recursos e intereses del proyecto y de la empresa [16]. Durante el desarrollo de este proyecto se llevaron a cabo las cuatro fases de la metodología AUP: inicio, elaboración, construcción y transición. Fase 1 Inicio: El objetivo de esta fase es identificar el alcance del proyecto, la posible arquitectura del mismo y la administración de recursos. El problema a atacar en el proyecto es que al elaborar una aplicación móvil se requiere una gran cantidad de tiempo y recursos además de la continua comunicación con el cliente para determinar sus requerimientos y adaptar la aplicación a sus necesidades. Por lo que la empresa Mobile Media Networks desea reducir la inversión de recursos en

24 12 cada aplicación de manera tal que se pueda ofrecer al cliente una aplicación ajustada a sus necesidades básicas, personalizada (en aspecto y contenido), de forma rápida y con costo reducido. El arranque de esta fase fue ejecutado por los encargados de tecnología de la empresa Mobile Media Networks, quienes en base a las necesidades surgidas ante el problema antes mencionado, consideraron el desarrollo de este proyecto como un nuevo producto que ofrecer y con grandes posibilidades de extensión, siendo la más importante la continua adición de nuevos módulos, lo que implica mayor personalización y beneficios provistos al cliente. En el contexto de este proyecto, los objetivos dispuestos para esta fase están centrados en la definición de los requerimientos del sistema. Las actividades realizadas comprenden la introducción a la empresa, investigación acerca de la situación actual, definición de las tecnologías y requerimientos de plataforma sobre los cuales será desarrollado el sistema, planteamiento y estudio de las herramientas a utilizar, elaboración de un plan de riesgos, elaboración inicial de un plan de pruebas y la planificación de actividades para las siguientes iteraciones. Fase 2 Elaboración: Esta fase consiste en probar la arquitectura potencial del sistema. Se detallan los riesgos de la arquitectura para asegurar que exista una comprensión de los alcances de cada requerimiento, para que la siguiente planificación se pueda llevar a cabo [17]. La disciplina de modelado tiene un peso considerable en esta fase dentro del proceso de diseño de la arquitectura. Debido a esto, se realizará el análisis de los requerimientos del negocio y cómo éstos deben ser manejados por el sistema, con la definición de un conjunto de requerimientos funcionales y sus posibles soluciones. En esta fase se debe cumplir con el siguiente conjunto de objetivos: la elaboración de un documento de Soporte de Requerimientos a partir del artefacto de la metodología AUP, Supporting Requirements, este documento de modelado definirá los requerimientos desde un punto de vista de cualidades con las que debe contar el sistema; definición de los subcomponentes que formarán parte del sistema final; formalización de los

25 13 requerimientos funcionales del sistema en casos de uso; diseño y modelado de la base de datos sobre la que se almacenará todo lo relacionado con el sistema; adiestramiento con el framework (infraestructura) de desarrollo con el que se implementará el proyecto de pasantía (CakePHP); adiestramiento con el entorno de desarrollo Eclipse y el API de PhoneGap para el desarrollo e implementación de la aplicación móvil; estudiar la forma en que se crearán e implementarán los módulos, además de cuántos y cuáles, así como refinar los documentos desarrollados en la fase anterior. Fase 3 Construcción: Esta fase contempla una continuación del modelado de la aplicación pero en un nivel superior, junto con el diseño de cada uno de los subcomponentes del sistema. La construcción, es una fase en donde se realiza la mayor parte de la implementación de los requerimientos. Además, se inician las pruebas que validan la estabilidad y confiabilidad del software que se está desarrollando. Estas pruebas se realizan en conjunto con la implementación, en cada iteración. Primera iteración: Diseño y modelado de la base de datos a utilizar. Diseño e implementación de la interfaz web para el manejo de usuarios, la selección de módulos y opciones generales de la aplicación a generar. Diseño e implementación de la interfaz web para la elección del aspecto de cada módulo por parte del usuario. Segunda iteración: Diseño e implementación de la interfaz web para el llenado de datos de cada módulo por parte del usuario. Creación de un esqueleto o esquema (archivos necesarios) para la implementación e incorporación de nuevos módulos al sistema. Gestión de usuarios por parte del administrador.

26 14 Tercera iteración: Creación de plantillas (de prueba) para cada módulo a implementar. Programación de la autogeneración del código en HTML, CSS y JavaScript de la aplicación móvil. Diseño e implementación de una vista previa de la aplicación a través del navegador web. Desarrollo de paquetes por plataforma (Android, ios y BlackBerry). Fase 4 Transición: Esta fase está enfocada en la culminación del proceso de implementación de requerimientos funcionales, las sesiones de prueba del sistema, la generación de documentos y la puesta en producción del sistema. El alcance de este proyecto de pasantía, sólo abarcará hasta la generación de documentos, con la elaboración del informe de pasantía. Por otro lado, el proceso de puesta en producción, queda fuera de las 20 semanas estipuladas. El objetivo a cumplir durante esta fase es la sesión de pruebas generales sobre el sistema y pruebas de aplicaciones generadas para cada plataforma móvil.

27 CAPÍTULO IV MARCO TECNOLÓGICO En este capítulo se presentan los aspectos tecnológicos para el desarrollo del proyecto de pasantía, se describen brevemente y se indica su uso como parte de la solución propuesta PHP Hypertext Pre-Processor PHP (PHP Hypertext Pre-processor) es un lenguaje de programación interpretado que se adecua al desarrollo en el ámbito web, ya que puede ser embebido en páginas HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto). PHP permite colectar, procesar y utilizar datos para crear una salida deseada [18]. Este proyecto fue implementado utilizando PHP debido a la comodidad y conocimiento del pasante sobre el lenguaje. Además permite la conexión a diferentes tipos de servidores de bases de datos como MySQL el cual es utilizado por la empresa. Esta pasantía fue desarrollada utilizando PHP MySQL MySQL es un manejador de base de datos SQL (Structured Query Language, Lenguaje de Consulta Estructurado) relacional de código abierto, desarrollado, distribuido y soportado por la corporación Oracle [19]. Este manejador fue el utilizado para el desarrollo de este proyecto debido a que es la empresa lo utiliza para el almacenamiento de sus datos. La versión utilizada fue la Apache Apache es un programa servidor de HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de Hipertexto) de código abierto. El servidor Apache se desarrolla dentro del

28 16 proyecto HTTP Server (httpd) de la Apache Software Foundation [20]. Se utilizó Apache como servidor HTTP debido a que Mobile Media Networks utiliza este servidor en sus otros sistemas web. Se utilizó la versión de Apache CakePHP CakePHP es un framework (estructura de trabajo) para el lenguaje de programación PHP, que se distribuye bajo la licencia Open-Source (código abierto) por el MIT (Massachussetts Institute of Technology). Su estructura pretende brindar una plataforma de desarrollo ágil para crear aplicaciones web, que sean sencillas de mantener, extender y colocar en un ambiente de producción [21]. CakePHP está desarrollado bajo un patrón de arquitectura MVC (Modelo-Vista-Controlador), en donde la aplicación está dividida en tres elementos fundamentales [22]. El modelo que representa los datos dentro de la aplicación. La vista que es la presentación de los datos del modelo. El controlador que maneja y re-direcciona cada uno de los request (solicitudes) hechas por un cliente. Como se puede apreciar en la figura 4.1, cuando un usuario (cliente) hace una solicitud a una URL del sistema, el dispatcher (despachador), se encarga de manejarla y dirigirla al controlador adecuado. Cuando el controlador recibe la solicitud, ejecuta una lógica correspondiente a la acción que debe atender esa solicitud, y en el proceso, accede, extrae, ingresa o actualiza información del modelo. Luego, genera una respuesta de vuelta a la vista, que el cliente podrá observar cuando el navegador web muestre el contenido en pantalla. Vista Cliente 6 1 Despachador 2 5 Modelo 3 4 Controlador Figura 4.1 Modelo MVC del Framework CakePHP [22].

29 17 Este framework fue utilizado para el desarrollo de la aplicación, dado que utiliza MVC como patrón de arquitectura y ORM (Object Relational Mapping, Mapeo Objeto-Relacional), permitiendo el desarrollo de aplicaciones modulares, que pueden ser reutilizadas sin tener que realizar modificaciones críticas, además de ser compatible con ASBC (Arquitectura de Software Basada en Componentes) Entorno de Desarrollo Eclipse Eclipse es un entorno de desarrollo integrado de código abierto multiplataforma para desarrollar lo que el proyecto llama "Aplicaciones de Cliente Enriquecido", opuesto a las aplicaciones "Cliente - Liviano" basadas en navegadores. Esta plataforma, típicamente ha sido usada para desarrollar IDE (Integrated Development Enviroment, Entorno de Desarrollo Integrado). Eclipse es utilizado en la empresa para el desarrollo de aplicaciones móviles, debido a su facilidad de uso e integración con las librerías de desarrollo para BlackBerry, Android y el plugin de CakePHP. La versión utilizada fue Eclipse Helios HTTP HTTP es el protocolo de acceso utilizado por la WWW (World Wide Web, Red Informática Mundial). Define el formato y transmisión de los mensajes, además define el comportamiento que deben tomar los navegadores y los servidores ante un comando específico [23] HTML Para el presente proyecto se utilizó HTML versión 5, que es el lenguaje básico utilizado en la WWW y es usado para describir la estructura y contenido, de la página web, en forma de texto y a través de etiquetas JavaScript JavaScript es un lenguaje de programación interpretado, diseñado para añadir interactividad en páginas HTML. Este lenguaje fue utilizado por ser uno de los únicos lenguajes con mayor soporte en la mayoría de los dispositivos móviles y se utiliza como parte de PhoneGap.

30 JSColor JSColor es una librería escrita en JavaScript por Jan Odvárko que permite seleccionar un color de manera gráfica y sin necesidad de un framework. Utilizado para la interfaz web CSS Las CSS (Cascading Style Sheets, Hojas de estilo en cascada) son usadas para definir el aspecto o la presentación de los documentos electrónicos como HTML. Separar la definición de los contenidos de su aspecto tiene muchas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y completos. Además es modular, por lo que mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en varios dispositivos diferentes PhoneGap PhoneGap es una implementación de libre acceso y de código abierto que permite construir aplicaciones para diferentes plataformas como Android, ios, BlackBerry, Windows Mobile, etc., sin requerir de los diferentes frameworks y lenguajes generalmente utilizados por cada plataforma, ya que usa tecnología web para crear un puente entre la aplicación web y el dispositivo móvil [24]. La versión utilizada en este proyecto es la JQuery JQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM (Document Object Model, Modelo de Objetos del Documento) y manejar eventos [25]. Esta herramienta fue utilizada por su contribución con diversos requerimientos, necesario para la implementación de algunos métodos en los módulos de la interfaz y para las plantillas JQuery Mobile Es un framework de interfaz de usuario, optimizado para dispositivos touch (sensible al tacto) como smartphones (celulares inteligentes) y tablets (tabletas) basado en HTML-5. Utilizado en el proyecto para la creación de las plantillas de prueba de los módulos implementados.

31 AJAX AJAX (Asynchronous JavaScript and XML, JavaScript Asíncrono y XML) se refiere a un conjunto de tecnologías [26]. Se trata de una técnica de desarrollo web para crear interacciones que se ejecutan en el navegador del usuario mientras se mantiene comunicación asíncrona con el servidor en segundo plano. Viene incluida en CakePHP y JQuery Mobile (para transiciones entre páginas). Se utilizó AJAX en las plantillas para los módulos que componen la aplicación Código Nativo Se usa como seudónimo del lenguaje de máquina que puede ser interpretado por el móvil, este puede ser creado directamente para microcontroladores sencillos o código fuente ya compilado BlackBerry BlackBerry es una línea de smartphones, propiedad de la empresa canadiense RIM (Research In Motion). Los dispositivos BlackBerry salieron al mercado con una orientación principalmente empresarial, al ofrecer una serie de servicios de integración con procesos empresariales como correo electrónico, aplicaciones con conexión a Internet y acceso móvil a servicios [27]. Sin embargo, su uso ha sido adoptado por el usuario común, como un teléfono de gama alta para las actividades básicas de comunicación y aprovechando características propias de la plataforma como BlackBerry PIN, que sirve como un identificador único de cada teléfono, y que puede ser asociado al correo electrónico y otras aplicaciones [28]. La programación nativa para esta plataforma es en lenguaje Java Android Android es un sistema operativo móvil basado en Linux y enfocado para ser utilizado en smartphones y tablets. Desarrollado inicialmente por la firma Android Inc., la cual fue comprada por Google en el 2005, siendo ahora el principal producto de la Handset Alliance [29]. La programación nativa para esta plataforma es en lenguaje Java.

32 ios Antes denominado iphone OS, desarrollado por la Apple para tablets y smartphones. Posee una gran cantidad del mercado móvil. Está basado en manipulación directa y permite multitarea. Todas las aplicaciones se encuentran escritas en el lenguaje Objective-C. Inicialmente, las aplicaciones generadas serán desarrolladas para dispositivos BlackBerry, ios y Android XML XML (extensible Markup Language, Lenguaje de Marcas Extensible) permite definir la gramática de lenguajes específicos para estructurar documentos grandes, además da soporte a base de datos. En internet se propone como un estándar para el intercambio de información estructurada entre plataformas. En el presente proyecto se utiliza para guardar los datos (en el servidor) que el usuario del sistema ingresa para la aplicación móvil JSON JSON (JavaScript Object Notation, Notación de Objetos de JavaScript) es un formato de texto ligero para el intercambio de datos, independiente del lenguaje y que es simple de interpretar y generar. Constituido por pares nombre-valor y una lista ordenada de valores [30]. Es utilizado para guardar los datos (en la aplicación móvil) debido a su poco peso y la facilidad de obtener los datos desde el móvil a través de una función nativa de JavaScript Mustache Es una librería usada para crear plantillas de HTML, archivos de configuración, código fuente, y otros [31]. La idea es tener un documento base al cual se le agregan valores dados en un objeto o hash a través de etiquetas expansibles. Es utilizado en el proyecto, en su versión para PHP, para generar las plantillas HTML, CSS y JavaScript de los módulos que luego serán llenadas con la información y datos deseados por el usuario.

33 CAPÍTULO V DESARROLLO DEL PROYECTO Este capítulo presenta el proceso de desarrollo de la pasantía. Se detallan las actividades realizadas en cada fase de AUP (Agile Unified Process, Proceso Unificado Ágil), así como las dificultades encontradas y las decisiones tomadas a lo largo del desarrollo Fase de inicio La primera fase mantuvo como objetivos principales la identificación del alcance inicial del proyecto y la modelación de los requerimientos especificados para cada uno de los módulos a desarrollar. Se hizo una primera aproximación de los Casos de Uso y el Modelo de Datos utilizado en el sistema desarrollado. Así mismo, fue de gran importancia determinar los posibles riesgos durante el desarrollo del proyecto y las necesidades de los usuarios frente al sistema que se requería. Esta fase fue planificada para ser desarrollada en una iteración, llevando a cabo las siguientes actividades: Modelado de requerimientos de alto nivel La meta en este punto es identificar los objetivos del negocio, desarrollar una visión común y determinar los requerimientos iniciales del sistema en un alto nivel. En este sentido, se traza un modelo de uso que captura la idea general de lo que se pretende construir, el funcionamiento del sistema y el curso básico de las acciones. Los detalles serán identificados en fases posteriores. El modelo de uso se representa como una colección de casos de uso. Para identificar los objetivos del negocio se deseó conocer la interacción actual entre un cliente y la empresa, así como los pasos que se siguen. En el diagrama de la figura 5.1 se puede apreciar esta interacción, la cual comienza con una interacción por parte del Departamento de Mercadeo con empresas que puedan necesitar sus servicios y así encontrar al cliente que desee una aplicación móvil. El paso siguiente a realizar es obtener todos los requisitos, deseos e ideas que

34 22 posea el cliente para su aplicación, aparte de presentarle ideas originales que puedan ser de su interés y asesorarlo en cuanto a la apariencia y organización de la información dentro de la misma para el mejor uso del usuario final. Estos requisitos se los comunica el Dpto. de Mercadeo al Dpto. de Sistemas en una reunión con el gerente de sistemas y los lideres de proyecto para determinar la posibilidad de la realización de los mismos, tiempo de desarrollo y costos, para luego trasmitírselo al cliente. Los anteriores pasos pueden repetirse cuantas veces sean necesarias hasta que el cliente quede conforme y tenga una idea clara del producto a recibir. Al finalizar este proceso, el proyecto se encola en la lista para su realización, luego se lleva a cabo el desarrollo y durante este período se sigue teniendo comunicación con el cliente, presentándole fragmentos del producto hasta su finalización, para luego (si el cliente está conforme) pasar a la etapa de pruebas y subida a la tienda móvil respectiva a su plataforma (Google Play, App Store o App World). Para la determinación del alcance inicial del proyecto fue necesaria la construcción de un listado de requerimientos, con la finalidad de obtener una visión acerca de lo que se pretendía lograr y la identificación de una solución viable. Se entendió que hoy en día las personas poseen móviles de diversos sistemas operativos, por esto si el cliente desea llegar a la mayor cantidad de consumidores, debe de solicitar la aplicación en varias plataformas. El porcentaje de celulares vendidos por plataforma a nivel mundial se puede observar en el gráfico de la figura 5.2. Debido a que Symbian fue abandonado por varias marcas móviles, como Nokia y Samsung (entre otras) para cambiarse a Windows Phone y Android respectivamente, se tomó la decisión de implementar el sistema para desarrollar aplicaciones en los tres sistemas con mayor porcentaje de compra siendo estos Android, ios y RIM (BlackBerry). Al final se pensó en un escenario en el que un usuario desea crear una aplicación móvil, rápidamente (1-2 días), con datos específicos y personalizando la apariencia deseada. Para esto, debe de proveer los datos generales sobre la aplicación que desea, escoger los módulos que tendrá y dar la información que incluirá en cada módulo, así como la apariencia del mismo. Se requiere entonces, de un sistema fácil y amigable, exento de programación por parte del usuario, que permita crear y editar aplicaciones móviles para múltiples plataformas. Para esto el sistema debe dejar seleccionar los módulos que se desea tener y proveer los formularios necesarios por cada módulo para su personalización.

35 Figura 5.1. Diagrama interacción cliente-empresa. 23

36 24 Figura 5.2. Porcentaje de Venta Mundial de Smartphones [34]. De acuerdo con lo anterior, los requerimientos generados más importantes son listados a continuación: Generación de la aplicación: mecanismo que genera carpetas con el código necesario en cada plataforma para su posterior compilación. Personalización de aspecto: interfaz web para la configuración del aspecto de la aplicación. Personalización de contenido: interfaz web para la configuración del contenido de la aplicación. Pre-visualización de la aplicación: mecanismos para mantener informado al usuario de los progresos y aspectos finales de la aplicación a generar. Almacenamiento de aplicaciones en el sistema: mecanismos para que los usuarios puedan crear, editar y consultar las aplicaciones que han generado, además de tener las carpetas con las aplicaciones ya generadas. Almacenamiento de usuarios en el sistema: mecanismos para que los usuarios puedan registrarse e ingresar en el sistema. La recopilación de estos requerimientos se encuentra reflejada en los casos de uso esenciales