Fol Mot Fg 0613 Memoria

Creacin de Mobile apps paracatlogos de empresa

Memoria de Proyecto Final de GradoGrado de Multimedia

Mencin en Desarrollo de aplicaciones interactivas

Autor: Francisco Olmo Ortiz

Consultor: Eva Casado de Amezua Fernandez-LuancoProfesor: Carlos Casado Martinez

20 de Junio de 2013






20 de Junio de 2013






20 de Junio de 2013

Creacin de Mobile apps para catlogos de empresa, Grado de Multimedia. Francisco Olmo Ortiz

2 / 66

Creacin de Mobile apps para catlogos de empresaMemoria de Proyecto Final de Grado de Multimedia


Todos los nombres propios de programas,sistemas operativos, equipos hardware, etc.que aparecen en esta memoria, son marcasregistradas de sus respectivas organizacioneso compaas.

Francisco Olmo Ortiz 2013Universitat Oberta de Catalunya (UOC)


3 / 66

Dedicado a la memoria de mi padre, Antonio


4 / 66

Abstract

El proyecto que se presenta en esta memoria, se enmarca en el entorno de las tecnologas basadas enestndares web, con las cuales se pretende desarrollar un producto comercial, apto para podercompetir en el mercado de las aplicaciones mviles, demostrando ser definitivamente una seriaalternativa en el emergente campo de la programacin multiplataforma.

A lo largo del desarrollo del proyecto, hemos adoptado el esquema Modelo Vista Controlador,utilizando las nuevas caractersticas de PHP5 que nos introducen en el uso avanzado de laprogramacin orientada a objetos. Esto nos ha permitido usar metodologas de programacin cercanasa las habituales en el desarrollo de aplicaciones, pero utilizando las tecnologas a las que estamoshabituados como diseadores de sitios web. A su vez, el uso del framework JQuery Mobile, nos hafacilitado la creacin de interfaces de usuario con el look and feel de las aplicaciones nativas. Porltimo, las soluciones de encapsulado como PhoneGap, usada en este proyecto, completan el procesode creacin de aplicaciones nativas a partir de web apps.

Podemos concluir que el mercado actual nos ofrece herramientas suficientes como para considerar eluso de tecnologas web, toda una apuesta de futuro en el desarrollo de aplicaciones mviles. Ademsel fuerte apoyo de grandes nombres del sector y su rpida evolucin, no hacen sino corroborar quecrear aplicaciones nativas multiplataforma est en vas de convertirse en toda una realidad.

Palabras clave: memoria, Trabajo Final de Grado, dispositivos mviles, smartphone, tablet, web app,estndares web, aplicaciones nativas, multiplataforma, Android, iPhone, iPad, iOS, Windows Phone,BlackBerry, HTML5, CSS3, JavaScript, AJAX, MySQL, PHP, programacin orientada a objetos,JQuery, JQuery Mobile, PhoneGap, QR, Google Maps, catlogo electrnico, publicidad, empresa,pyme.


5 / 66

Agradecimientos

A mi esposa Alexandra, a mi madre Salud y a mis hermanos Juan y Antonio, por apoyarme sincondiciones.

A todos los profesores, tutores y compaer@s que he conocido a lo largo de la carrera queconsiguieron crear en m el sentimiento de pertenecer a una gran comunidad de personas.

Gracias a todos,Francisco Olmo Ortiz


6 / 66


7 / 66

ndice

Creacin de Mobile apps para catlogos de empresa........................................................................................21. Introduccin.........................................................................................................................................................8

1.1 Pblico objetivo.............................................................................................................................................81.2 Producto resultante.......................................................................................................................................81.3 Requerimientos tcnicos............................................................................................................................... 9

2. Descripcin ....................................................................................................................................................... 103. Objetivos ........................................................................................................................................................... 12

3.1 Principales .................................................................................................................................................. 123.2 Secundarios................................................................................................................................................12

4. Marco terico/Escenario ...................................................................................................................................135. Metodologa ...................................................................................................................................................... 146. Arquitectura de la aplicacin ............................................................................................................................. 157. Plataforma de desarrollo ...................................................................................................................................178. Planificacin ...................................................................................................................................................... 18

8.1 Fases de desarrollo del proyecto................................................................................................................188.2 Diagrama de Gantt .....................................................................................................................................19

9. Proceso de trabajo/desarrollo ........................................................................................................................... 2010. Seguridad........................................................................................................................................................ 4311. Tests ............................................................................................................................................................... 4712. Requisitos de instalacin ................................................................................................................................ 4913. Instrucciones de instalacin/implantacin .......................................................................................................5014. Instrucciones de uso .......................................................................................................................................5115. Proyeccin a futuro .........................................................................................................................................5516. Comercializacin del producto ........................................................................................................................ 56Anexo 1. Entregables del proyecto ....................................................................................................................... 57Anexo 2. Cdigo fuente (extractos)....................................................................................................................... 59Anexo 3. Libreras/Cdigo externo utilizado..........................................................................................................64Anexo 4. Bibliografa .............................................................................................................................................65Anexo 5. Vita......................................................................................................................................................... 66


8 / 66

1. IntroduccinEl presente proyecto trata sobre la elaboracin de una herramienta software que permitiera la creaciny gestin de los contenidos, de apps nativas para iOS y Android a partir de plantillas personalizables,creadas en formato HTML5, las cuales se nutriran de una base de datos alojada en la nube.

Las aplicaciones web as obtenidas, seran encapsuladas y convertidas en apps nativas, para poderser descargadas e instaladas en smartphones y tablets.

Su objetivo sera proveer a las empresas de catlogos electrnicos en formato de aplicaciones paradispositivos mviles, ofreciendo un nuevo canal publicitario para sus novedades o productosdestacados, en un formato moderno y atractivo y que adems les permita gestionar sus contenidos,con la finalidad de estar permanentemente actualizados.

1.1 Pblico objetivoEl pblico objetivo del servicio propuesto en este proyecto, son pequeas empresas que manufacturanproductos (muy especialmente artesana), las cuales no tienen en su gran mayora, ni conocimientos nitiempo, para dedicarle a este tipo de cosas. Nosotros les ofrecemos un producto de publicidadelectrnica, en un formato que se est imponiendo de forma masiva, como son las aplicaciones paradispositivos mviles.

Estos empresarios, tan solo han de preocuparse de elegir los colores o diseos de su aplicacin y degestionar la informacin que deseen mostrar, a travs de la aplicacin web del gestor de contenidosque les ofreceramos, para que su informacin est siempre actualizada; de todo lo dems nosencargamos nosotros.

1.2 Producto resultanteSi bien existen en la web innumerables diseos y plantillas HTML, para este proyecto, se creara unprototipo propio, ya que ste requiere estar programado con el cdigo AJAX/PHP correspondiente, quese nutra de los contenidos de nuestra base de datos y tendra su estructura establecida en nuestroservicio.

El producto resultante, consistira en una aplicacin web de gestin de contenidos bsicos (productos,logo de empresa y datos) y una plantilla HTML preparada con cdigo dinmico PHP para nutrirse denuestra base de datos alojada en la nube, gestionada por dicho CMS. Se entregara ya encapsuladacomo app nativa para Android 4.x, funcionando en un terminal smartphone o tablet.


9 / 66

1.3 Requerimientos tcnicosFinalmente, se exponen los requerimientos en cuanto a equipamiento hardware y herramientas desoftware, que se estiman necesarios para la realizacin del presente proyecto.

Hardware: Equipo PC de escritorio para desarrollo, con impresora y escner Smartphone y tablet Android y/o iOS para probar la aplicacin resultante Conexin ADSL para Internet

Software: IDE para el desarrollo de las aplicaciones de gestin de contenidos y la web app:

Dreamweaver o Aptana. En este caso, se ha usado el entorno Adobe Dreamweaver CS6 Servidores web Apache+PHP y MySQL instalados, para la ejecucin en local de las

aplicaciones web Herramienta de gestin MySQL Workbench, para la gestin de la base de datos del sistema Aplicacin web PHPMyAdmin para la gestin de la base de datos del servidor de pruebas

remoto de la UOC Framework JQuery Mobile para el diseo de las vistas de las web apps Framework PhoneGap para convertir en apps nativas, a las web apps creadas por el sistema Google Maps para geolocalizacin sobre el mapa Adobe Fireworks CS6 y Adobe Photoshop CS6, como software de tratamiento grfico para la

edicin de imgenes Aplicaciones ofimticas Microsoft Office Word y Excel, para la redaccin de la documentacin

del proyecto


10 / 66

2. DescripcinEl proyecto integrara la creacin de tres mdulos, que seran los siguientes:

1. Mdulo de Gestin de clientesEste mdulo crea y edita a los clientes del servicio. Es gestionado por la empresa proveedora delservicio (en adelante, nosotros).

Se trata de una aplicacin web programada en PHP, conectada a la base de datos que habremoscreado previamente. Nosotros nos encargamos simplemente de dar de alta a los clientes. Laaplicacin generar automticamente, una clave de acceso, una carpeta en el servidor y uncdigo QR para cada cliente que demos de alta.

2. Mdulo de Gestin de contenidosAplicacin web a modo de un sencillo gestor de contenidos (en adelante, CMS), programado enPHP y conectado con la misma base de datos descrita en el mdulo anterior. Esta aplicacin sergestionada por nuestros clientes, mediante el acceso con la contrasea que nosotros leproveemos.

Una vez dentro, los clientes, gestionarn su catlogo de novedades (fotografa, nombre, brevedescripcin y precio) as como sus datos (telfono, direccin, email ...)

Tambin desde esta aplicacin, los clientes podrn subir su logotipo de empresa y elegir la plantillao colores que prefieren para su app.

Adems, esta aplicacin mostrar en forma de imagen PNG, el cdigo QR que le generamosautomticamente al darlo de alta en el sistema. Este cdigo QR tendr como finalidad, que lopuedan imprimir o mostrar en su web, con el fin de que los interesados en sus productos accedansin ms a las stores donde podrn descargarse la app, segn el sistema operativo de su dispositivomvil.

Finalmente, cuando nuestro cliente est conforme con su logo y diseo de plantilla, clicar unaopcin, que generar en la carpeta del cliente, en el servidor web, un fichero XML el cual contendrel nombre e identificador de la empresa, as como el identificador de la plantilla de la web app.

En ese mismo proceso, a nosotros se nos activar en nuestro gestor de clientes, una alarma quenos indica que el cliente ya ha dado su aceptacin, para que procedamos a crearle su app y subirlaa las stores.


11 / 66

3. Mdulo de Creacin de la appNosotros crearemos unas plantillas, ya preparadas con su cdigo AJAX/PHP, que se nutran de loscontenidos incorporados en nuestra base de datos en la nube. Esta aplicacin estar diseada conestndares web: HTML5/CSS3 y se construir con la ayuda del framework JQuery Mobile.

A partir de la carpeta creada en el servidor web para cada cliente, que contendr estas plantillas,ya personalizadas con su identificacin de cliente correspondiente, nosotros procederemos aencapsular dicha web app con PhoneGap y obtendremos las app nativas para los sistemasoperativos que necesitemos.

Finalmente, nosotros publicaremos las apps nativas en sus respectivas stores, para que puedanser descargadas por todas las personas interesadas en los productos de nuestras empresasclientes.


12 / 66

3. Objetivos3.1 Principales

Crear una herramienta de gestin de contenidos para pequeas empresas manufactureras,con el objetivo de proveer de informacin a una web app, encapsulada como app nativa, lacual ser ofrecida por dicha empresa a sus posibles clientes, como elemento publicitario(catlogo electrnico) donde mostrar sus productos.

Minimizar el tiempo requerido para la puesta en marcha y mantenimiento del sistema, pues laempresa que contrata el servicio tan solo tiene que preocuparse de entrar en el CMS ygestionar sus productos y datos, as como elegir la plantilla que desee. La empresaproveedora del servicio, se encargara de encapsular la wep app generada por el CMS ypublicarla en las stores.

3.2 Secundarios Realizar un proyecto que abarque la mayor parte de los temas contenidos en las asignaturas

optativas que conforman la mencin de "Desarrollo aplicaciones interactivas":

o Programacin web avanzadaUso de tecnologas AJAX/JQuery y PHP.

o Aplicaciones rich mediaCreacin de una aplicacin interactiva multimedia en formato de web app, usandoestndares JavaScript/HTML5/CSS3 para la creacin de las interfaces de usuario.

o Uso de bases de datosCreacin de una base de datos MySQL, que albergar la informacin gestionada porlos clientes del sistema mediante una aplicacin web, programada en PHP.

o Seguridad y calidad en servidores webAplicacin de medidas de seguridad a la hora de programar las entradas y salidas a labase de datos, para evitar ataques como inyeccin de cdigo y similares. Eleccin delhosting adecuado para alojar el servicio.

Ampliar los conocimientos adquiridos a lo largo del grado, mediante la investigacin y estudiode las nuevas tcnicas de creacin de aplicaciones interactivas para dispositivos mviles. Deeste modo, se cumplen de forma expresa los objetivos y competencias transversalesestablecidos en el plan docente del TFG.


13 / 66

4. Marco terico/EscenarioCuando en el ao 2007 Apple comercializ la primera versin de su dispositivo iPhone, tal vez nomuchos pudieron vislumbrar la revolucin tecnolgica que se producira en los meses siguientes. Frutode la convergencia tecnolgica de la telefona mvil y la informtica, arropadas por una rpidaexpansin de la lneas ADSL que hacan posible un servicio de Internet de alta velocidad, el mercadode las telecomunicaciones vea nacer una nueva manera de llevar las tecnologas de la informacin yla comunicacin, al gran pblico. En los meses siguientes, asistimos a toda una sucesin denovedades que venan a ampliar la oferta de dispositivos y sistemas; Android de Google, BlackBerry yWindows de Microsoft, hacen sus apuestas, unos con ms fortuna que otros.

Nace al mismo tiempo un nuevo concepto del software, las aplicaciones que se descargan desde lastiendas que cada plataforma pone a disposicin de sus usuarios. Suelen ser pequeos programas querealizan tareas muy concretas y cuyas caractersticas principales son su bajo consumo de recursoshardware y su pequeo tamao, al tener que operar en el mundo de la Internet mvil, donde se pagapor el trfico de informacin consumida.

Este naciente ecosistema multiplataforma y multisistema, plantea un serio reto a los desarrolladores desoftware por su diversidad de tecnologas y lenguajes de programacin. El concepto de "write once, runeverywhere" que aos atrs Sun Microsystems lanzara como eslogan para su plataforma JAVA, vuelvea aparecer en la mente de todos.

Sin embargo, paralelamente al boom de smartphones y tablets, las tecnologas de Internet tambinhan evolucionado de forma considerable. Nuevos estndares para el diseo y programacin deaplicaciones web hacen su aparicin, con la intencin de entrar rpidamente en juego. Conceptoscomo HTML5, CSS3 y AJAX, hacen que estas tecnologas puedan representar un papel relevante enel nuevo escenario de las aplicaciones para dispositivos mviles.

El ltimo eslabn de esta cadena de evolucin tecnolgica, lo representan aplicaciones que soncapaces de encapsular todos los ficheros que componen la aplicacin web, en una aplicacin nativa, lacual usar para el renderizado de sus vistas al navegador interno del sistema operativo, en lugar de lainterfaz grfica propia.

Tenemos as, todos los elementos necesarios para poder obtener aplicaciones nativasmultiplataforma, usando tecnologas estndares, sin necesidad de aprender mltiples lenguajes deprogramacin.


14 / 66

5. MetodologaPatrn Modelo Vista Controlador (en adelante MVC)

Dado que este proyecto pretende fundamentalmente el desarrollo de aplicaciones web, aunquefinalmente las encapsulemos como aplicaciones nativas, usaremos la metodologa MVC por ser la quemejor se adapta a las caractersticas de funcionamiento de las aplicaciones interactivas en general.

Este mtodo, separa las capas de presentacin de la aplicacin, gestin de datos y dominio o negocio,en tres componentes: el modelo, la vista y el controlador. Bsicamente su funcin ser:

Modelo: comprende las capas de gestin de datos y el dominio de la aplicacin. Vista: es la capa de presentacin, la interfaz con la que interacta el usuario. Controlador: responde a las peticiones que realiza el usuario, generalmente mediante acciones y

eventos de la interfaz. El controlador se comunica con el modelo y devuelve el resultado solicitadoa la vista, pudiendo por tanto, producir cambios en ambos componentes.

En el Anexo 2 de Cdigo fuente, se muestra un ejemplo completo de desarrollo, de acuerdo al patrnModelo Vista Controlador, incluyendo extractos de cdigo fuente que ilustran su funcionamiento.

Diseo centrado en el usuario (en adelante DCU)

El presente proyecto pretende como producto final, la creacin de una aplicacin interactiva, en formade app nativa para dispositivos mviles. Esto implica que ser la interfaz de usuario el elemento centralde su funcionamiento. Por tanto, el diseo de dicha interfaz, para cada uno de los tres mdulos adesarrollar, se llevar a cabo bajo la metodologa del diseo centrado en el usuario, cuyas etapasfundamentales son:

Anlisis. Objetivos de la aplicacin, caractersticas de los usuarios, requerimientos del proyecto Diseo. Diseo conceptual (arquitectura de la informacin) y diseo visual Prototipo. Prototipos de baja y de alta fidelidad. Prototipo funcional Evaluacin de la usabilidad. Testeo y pruebas de la interfaz

En el captulo 9 de Proceso de trabajo, se expone con todo detalle el desarrollo del diseo de las tresaplicaciones del proyecto, de acuerdo a los principios aqu expuestos, de la metodologa DCU.


15 / 66

6. Arquitectura de la aplicacinUna vez definida la aplicacin que vamos a desarrollar y detallados sus contenidos y las metodologasimplicadas, pasamos en este captulo a describir la arquitectura en la que quedar enmarcada.

Tal como ya hemos comentado anteriormente, se trata de la creacin de una aplicacin web, la cualfinalmente ser encapsula y convertida en apps nativas para diferentes plataformas mviles. Por tanto,nos encontramos ante un clsico esquema cliente/servidor. Analicemos sus componentes principales:

Servidor webLa aplicacin encargada de servir las pginas web solicitadas por los clientes. Adems, en nuestrocaso, nos servir de alojamiento de las aplicaciones de gestin de clientes y de gestin decontenidos de dichos clientes.

Para ello, usaremos el servidor web Apache, con el mdulo del lenguaje de scripts de servidor,PHP.

Servidor de bases de datosObviamente, la aplicacin requerir de una base de datos donde alojar la informacin de losclientes, as como los productos y datos que stos introduzcan en el sistema.

Hemos elegido el sistema de bases de datos relacionales MySQL, por tratarse de software OpenSource y dada su versatilidad y amplia penetracin en el mercado actual.

ClientesEl proyecto comprende la creacin de tres mdulos independientes, cada uno con unafuncionalidad determinada. Usaremos como clientes de las aplicaciones de gestin, cualquiernavegador web compatible con las tecnologas HTML5. Para la aplicacin nativa que finalmentegeneraremos, nuestros clientes sern los dispositivos mviles smartphone y tablet.

En la pgina siguiente, mostramos un esquema grfico detallado, del funcionamiento de la arquitecturaque acabamos de describir.


16 / 66

Figura 1: Esquema de la arquitectura del sistema


17 / 66

7. Plataforma de desarrolloA continuacin, se exponen las tecnologas que se emplearn en los distintos procesos de desarrollodel proyecto:

Software:

Sistema de gestin de bases de datos relacional MySQL, para la creacin de la base de datosdel sistema y lenguaje de consulta estructurado SQL para la gestin de la base de datos

Lenguaje de programacin del lado del servidor PHP, para el desarrollo del modelo ycontrolador de las aplicaciones a desarrollar

JavaScript como lenguaje del lado del cliente, para la creacin de la interactividad de las vistaso interfaces de las aplicaciones del proyecto

Tecnologa AJAX para la comunicacin asncrona de las vistas con los scripts PHP del servidorque componen el controlador de la aplicacin

Estndares de diseo y maquetacin web HTML5 y CSS3 para la creacin de todas las vistas

Framework JQuery Mobile para facilitar la creacin e interactividad de las vistas de laaplicacin web final, para los dispositivos mviles

Framework PhoneGap para la conversin de web apps a aplicaciones nativas multiplataforma

Google Maps para geolocalizacin sobre el mapa

Hardware:

Dispositivos mviles smartphone y tablet, bajo sistema operativo Android 4.x. Se usarn paralas pruebas reales de la aplicacin


18 / 66

8. Planificacin8.1 Fases de desarrollo del proyecto

Definicin formal del proyecto (27/02/13 - 12/03/13) Anlisis Definicin del proyecto Planificacin Documentacin del Trabajo fin de Grado

Hito 1. Entrega de la PEC 1 - 12/03/13

Creacin de la aplicacin de gestin de clientes (13/03/13 - 07/04/13) Modelado y creacin de la base de datos Diseo UML de la lgica de negocio de la aplicacin Modelo, vista y controlador de la aplicacin de gestin de clientes Documentacin del Trabajo fin de Grado


Creacin de la aplicacin CMS (08/04/13 - 12/05/13) Diseo de las vistas (interfaz) de la aplicacin CMS Programacin del modelo y controlador Reajustes en la base de datos y el diseo UML Documentacin del Trabajo fin de Grado


Creacin y encapsulado de la App nativa (13/05/13 - 20/06/13) Diseo de las vistas (interfaz) de la web app Modelo y controlador de la web app Programacin de la generacin de web apps Encapsulado de la web app a nativa con PhoneGap Pruebas de la app nativa en dispositivos reales Pruebas finales del sistema Documentacin del Trabajo fin de Grado

Hito 4. Entrega final - 20/06/13.


19 / 66

8.2 Diagrama de Gantt

Figura 2: Planificacin. Diagrama de Gantt


20 / 66

9. Proceso de trabajo/desarrolloDetallamos en este captulo el proceso de desarrollo de cada una de las tres aplicaciones quecomponen el proyecto. No obstante, como etapa previa, necesitaremos establecer el esquema defuncionamiento de la lgica de negocio de la aplicacin, as como el diseo y modelado de la base dedatos que soportar todo el sistema.

ESQUEMA UML DE LA CAPA DE NEGOCIOLa capa de negocio o lgica de la aplicacin, consiste en los mdulos de programacin que realizarntodas las peticiones solicitadas por los usuarios del sistema, a travs de la interaccin con la capa depresentacin. Ser asimismo, la que se comunicar con la capa de datos, para llevar a cabo la gestinde la base de datos. Ambas capas, la lgica de negocio y la capa de datos, forman parte del modelo, enel esquema modelo, vista, controlador (MVC).

En los cdigos fuente de las aplicaciones, se han aadido comentarios sobre la utilidad de cada una delas clases y mtodos.

En el siguiente grfico, mostramos la abstraccin de la aplicacin, representada por las clases que lacomponen y las relaciones entre las mismas:

Figura 3: Diagrama de clases UML de la lgica de negocio de la aplicacin


21 / 66

DISEO Y MODELADO DE LA BASE DE DATOSUna vez diseado el esquema de funcionamiento de la lgica de la aplicacin, procedemos aldiseo y modelado de la base de datos de nuestro sistema. Como ya hemos indicadoanteriormente, hemos optado por usar MySQL como gestor de bases de datos.

Del estudio y anlisis de la lgica de la aplicacin, concluimos la necesidad de implementar lassiguientes tablas y campos, as como sus relaciones:

Figura 4: Esquema entidad-relacin de la base de datos de la aplicacin


22 / 66

De esta forma, tenemos ya creada la capa de datos que nos ha de servir como base sobre la quedesarrollaremos toda la aplicacin. La programacin de las clases establecidas en el esquema UML,as como aquellas que gestionen las entradas y salidas de la base de datos, conformarn el modelo delesquema MVC.

Procedemos ya el desarrollo de los tres mdulos de la aplicacin. Al tratarse en todos los casos deaplicaciones interactivas, comenzaremos el procedimiento de acuerdo al modelo de diseo centradoen el usuario (DCU). Una vez tengamos claro qu objetivos ha de cumplir cada una de ellas, qucontenidos han de gestionar y cmo han de hacerlo, disearemos sus vistas o lo que es lo mismo, lainterfaz con la que interactuarn los usuarios.

MDULO DE GESTIN DE CLIENTES

Diseo de la aplicacin. Modelo DCU - Fases

1. AnlisisEl objetivo de este primer mdulo ser gestionar a los clientes de nuestro servicio. El usuarioobjetivo de la aplicacin ser el administrador de nuestra empresa, quien se encargar del alta,edicin, baja y consultas de clientes. Deber basarse por tanto, en una interfaz de navegacinsencilla y usable que realice las tareas de forma fcil y rpida.

2. Diseo conceptual. Arquitectura de la informacinNos encontramos ante la interfaz de una aplicacin software. Como es habitual en este tipo decontexto, usaremos una organizacin de los contenidos de tipo ambiguo, por tareas.

En cuanto a la navegacin, estableceremos una estructura jerrquica, a partir de un menprincipal.

Recogemos en el siguiente esquema detallado, la organizacin, navegacin y etiquetado dedichas tareas.


23 / 66

Figura 5: Esquema detallado. Arquitectura de la informacin de la aplicacin

3. Diseo visual. Prototipos

Figura 6: Prototipo de alta fidelidad de la vista de acceso al sistema


24 / 66

Figura 7: Prototipo de alta fidelidad del listado de clientes

Figura 8: Prototipo de alta fidelidad de la vista de alta de clientes


25 / 66

Figura 9: Prototipo de alta fidelidad de la vista de edicin de clientes

Esquema modelo, vista, controlador (MVC)

Una vez concluido el diseo visual, procedemos a la creacin de los prototipos funcionales en lenguajeHTML y al desarrollo de todos los mdulos de programacin que componen la aplicacin. La siguientetabla, muestra el conjunto de ficheros que conforman el esquema MVC de dicha aplicacin.Recordemos que tal como se expone en el captulo 2, la aplicacin generar automticamente, unaclave de acceso, una carpeta en el servidor y un cdigo QR, para cada cliente que demos de alta.

MODELO VISTA CONTROLADOR

conexion_db.phpsistema.php

index.phplistado.phpalta.phpedicion.php

cierra_sesion_administrador.phpidentificacion.phpmuestra_alta.phpmuestra_edicion.phpmuestra_listado.phprealiza_alta.phprealiza_borrado.phprealiza_edicion.php


26 / 66

MDULO DE GESTIN DE CONTENIDOS


1. AnlisisEl mdulo de gestin de contenidos o CMS, ser la herramienta que usarn las empresas clientesde nuestro servicio, para gestionar sus datos y el catlogo de productos que presentarn a travsde la aplicacin mvil que el sistema generar automticamente.

Como ya se adelant en el captulo I, nuestro pblico objetivo sern pequeas empresasdedicadas especialmente a la artesana. A partir de este dato, podemos modelar algunos de losperfiles de usuario que habitualmente, se suelen encontrar en este mbito empresarial:

Personal de administracin o secretaraSu labor principal suele ser la gestin de la empresa, contabilidad y dems tareas deadministracin, por lo que no tendr mucho tiempo para dedicarle a nuestra aplicacin CMS.

Socios, dueos y directivos de la empresaSuelen disponer de ms tiempo libre, pero acostumbran a estar muy ocupados con la direccinde la empresa, con lo cual deberemos evitar que la dificultad de uso les haga aburrirse y olvidarla aplicacin.

2. Diseo conceptual. Arquitectura de la informacinAl igual que en la primera aplicacin, nos encontramos ante la interfaz de una aplicacin software.Usaremos por tanto una organizacin de los contenidos de tipo ambiguo, por tareas. En cuanto a lanavegacin, estableceremos una estructura jerrquica, a partir de un men principal.

El siguiente esquema detallado muestra la organizacin, navegacin y etiquetado de dichastareas.


27 / 66



De acuerdo con los perfiles de usuario establecidos en la fase de anlisis, el xito de la aplicacindepender fundamentalmente de la usabilidad que su interfaz ofrezca, de manera que la curva deaprendizaje quede reducida a la mnima expresin.

Para conseguir este objetivo, se han aplicado principios bsicos como la ley de Fitts, de modo quelas tareas a realizar estn claramente visibles y accesibles en el mnimo tiempo posible, as comometforas habituales en las interfaces de aplicaciones informticas.

Se puede apreciar el resultado obtenido, en los prototipos de alta fidelidad que se muestran acontinuacin.


28 / 66

Figura 11: Prototipo de alta fidelidad de la vista de acceso de los usuarios del sistema

Figura 12: Prototipo de alta fidelidad de la vista de gestin de los datos de la empresa


29 / 66

Figura 13: Prototipo de alta fidelidad de la vista de gestin del diseo que mostrar la web app


30 / 66

Figura 14: Prototipo de alta fidelidad de la vista de gestin del diseo que muestra la web app activa


31 / 66

Figura 15: Prototipo de alta fidelidad de la vista de gestin del catlogo de novedades


32 / 66

Figura 16: Prototipo de alta fidelidad de la vista del alta de novedades


33 / 66

Figura 17: Prototipo de alta fidelidad de la vista de edicin de novedades


34 / 66


De la misma manera que en la aplicacin anterior, procedemos a la creacin de los prototiposfuncionales en lenguaje HTML y a la creacin de todos los mdulos de programacin que componen laaplicacin. La siguiente tabla, muestra el conjunto de ficheros que conforman el esquema MVC dedicha aplicacin.Recordemos que tal como se expone en el captulo 2, cuando nuestro cliente est conforme con sulogo y diseo de plantilla, clicar una opcin, que generar en la carpeta del cliente, en el servidor web,un fichero XML el cual contendr el nombre e identificador de la empresa, as como el identificador dela plantilla de la web app.


conexion_db.phpempresa.phpproducto.php

alta_novedades.phpdatos_empresa.phpedicion_novedades.phpindex.phplista_novedades.phpweb_app.php

cierra_sesion_empresa.phpidentificacion.phpmuestra_alta_novedades.phpmuestra_datos_empresa.phpmuestra_edicion_novedades.phpmuestra_lista_novedades.phpmuestra_web_app.phprealiza_activa_app.phprealiza_alta_novedades.phprealiza_borrado_foto.phprealiza_borrado_novedades.phprealiza_edicion_empresa.phprealiza_edicion_foto.phprealiza_edicion_novedades.phprealiza_envio_email.phprealiza_muestra_info_foto.phprealiza_sube_foto.phprealiza_sube_logo.php

MDULO DE LA WEB APP


1. AnlisisEn este tercer mdulo, el objetivo ser la creacin de una aplicacin instalable en dispositivosmviles que provenga de una web app, la cual ser encapsulada con el framework PhoneGap.Esta aplicacin, se podr descargar, bien de las stores de apps para mviles o bien del propioservidor donde est ubicado nuestro sistema y se har mediante el uso de un cdigo QR.


35 / 66

Recordamos que tal cdigo, fue creado por la aplicacin del mdulo de gestin de clientes y estdisponible para que dichos clientes puedan descargarlo y usarlo impreso en su publicidad.

El pblico objetivo de esta aplicacin, ser cualquier persona que pueda estar interesada en laartesana, en adquirir sus productos, ya sea particular o comerciante de este tipo de artculos. Portanto, hablamos del pblico en general, con lo cual debemos pensar que la interfaz queofrezcamos, tendr que resultar muy similar en su uso a las aplicaciones que habitualmentesolemos encontrar en las stores.

2. Diseo conceptual. Arquitectura de la informacinEn esta ocasin, nos encontramos ante un escenario prcticamente igual al de una web decontenidos dinmicos. Escogeremos una organizacin de sus contenidos, de tipo ambiguo porcategoras. As mismo, haremos uso de una estructura de navegacin jerrquica, a partir de unmen principal de opciones.

Recogemos en el siguiente esquema detallado, la organizacin, navegacin y etiquetado dedichas categoras.



36 / 66


Tal como se ha descrito en el apartado 1 de anlisis, nos dirigimos a un pblico usuario genrico,acostumbrado al uso de aplicaciones nativas en sus smartphones y tablets. Debemos tener encuenta por tanto, que ser necesario dotar a nuestra app del "look and feel" de dichas aplicacionesnativas, para lo cual, haremos uso del framework JQuery Mobile que nos proveer de buena partede gadgets y animaciones, procedentes sobre todo del entorno Apple iPhone y nos introduciradems, en el mbito del responsive design o diseo adaptativo. Este nuevo concepto, se refiere ala creacin de diseos, especialmente web que se adaptan al tamao de pantalla, del dispositivoque estemos usando para su visualizacin.

Se han creado para este proyecto, seis opciones de color, recogidas en sendas hojas de estilosCSS. La eleccin, quedar como ya se ha comentado anteriormente, en manos de la empresacliente de nuestro servicio, la cual escoger su plantilla, dentro de la seccin "Diseo de laaplicacin", descrita en el Mdulo de gestin de contenidos. Recordamos tambin que nuestrosclientes, podrn gestionar el logotipo de sus empresas desde la seccin comentada.


Figura 19: Prototipos de alta fidelidad de la web app


36 / 66







36 / 66







37 / 66



37 / 66



37 / 66



38 / 66



38 / 66



38 / 66



39 / 66



40 / 66


Procedemos a la creacin de los prototipos funcionales en lenguaje HTML y a la creacin de todos losmdulos de programacin que componen la aplicacin.En este caso, debemos tener en cuenta el hecho de que, ya que nuestra web app ser encapsuladacomo app nativa, no podremos crear documentos en otro formato que no sea HTML, pues solo as,podrn ser interpretados por el navegador que habr de mostrarlos.Para conseguir la conexin de la aplicacin con los datos de nuestra base de datos remota, haremosuso constante de la tecnologa AJAX, mediante la cual, realizaremos llamadas asncronas a nuestroscontroladores PHP, los cuales nos devolvern la informacin que solicitemos.Los archivos que recogern el cdigo de las clases del modelo y el controlador, s estarnprogramados en lenguaje PHP, ya que estos estarn alojados en el servidor web, al igual que el restode nuestro sistema.Mostramos finalmente la tabla que lista el conjunto de ficheros del esquema MVC de nuestra web appque ser convertida a aplicacin nativa.


conexion_db.phpapp.php

index.html

Documento JQuery Mobileformando por los siguienteselementos conatributo "data-rol=page":

index inicio empresa contacto ubicacion novedades detalle_producto

muestra_datos_empresa.phpmuestra_detalle_novedad.phpmuestra_novedades_empresa.php


41 / 66

Encapsulado de la aplicacin - Uso de PhoneGap BuildUna vez hemos concluido la programacin de la aplicacin y realizadas todas las pruebas pertinentes,como si de una web normal se tratase, llegamos a la fase final del proceso que nos permitir convertirnuestra web app en una aplicacin nativa, haciendo uso del cdigo que hemos programado, el mismopara todos los sistemas mviles en que estemos interesados.Para conseguir este propsito, hemos optado por hacer uso del framework PhoneGap, el cual es unaherramienta que no solo nos ofrece la posibilidad de encapsular web apps en nativas, sino que ademsprovee de una extensa API que permitir hacer uso de las utilidades hardware que habitualmenteincorporan los dispositivos mviles, smartphones y tablets. En el proyecto que hemos desarrollado, nohacemos uso de dichas libreras, pues nuestro objetivo, tal como se expone en la introduccin, no esotro que mostrar el proceso que actualmente nos permite obtener una aplicacin nativa, haciendo usode las tecnologas web que ya conocemos y usamos a diario.PhoneGap, nos ofrece un servicio on-line para realizar el encapsulado de nuestra web app, conocidocomo PhoneGap Build, el cual simplifica enormemente nuestra labor, al no tener que instalar ennuestro ordenador, los SDK de todas las plataformas para las que estemos interesados en obtenernuestra app nativa.PhoneGap Build necesita en principio, tan solo dos documentos que habrn de llamarse "index.html"(que contendr nuestro cdigo) y otro de configuracin "config.xml". Si nuestro proyecto consta deotros archivos, scripts, imgenes, hojas CSS u otros, todos debern ser comprimidos a un solo ficheroen formato ZIP. Mostramos un ejemplo del archivo XML de configuracin:

Folmo App

TFG Grado Multimedia - UOC. App Phonegap para catlogos de productos

Francisco Olmo Ortiz

Una vez tenemos preparada nuestra compilacin de archivos ZIP, accedemos a la web de PhoneGapBuild y nos identificamos si ya estamos registrados o nos subscribimos como usuarios, ya que esrequisito indispensable para su uso.En la siguiente captura de pantalla, se muestra la interfaz de creacin de aplicaciones nativasmultiplataforma.


42 / 66

Figura 23: Creacin de aplicaciones nativas en PhoneGap Build

Podemos comprobar como PhoneGap Build, ha compilado la web app para los distintos sistemasoperativos mviles que soporta. Los botones azules nos indican que las apps nativas, en estasplataformas, estn listas para ser descargadas.Vemos adems que para algunos sistemas como iOS nos aparece su botn en rojo, indicando error. Elmotivo es que para poder obtener una aplicacin nativa en iOS, Apple exige estar en posesin de loscertificados de desarrollo y distribucin, lo cual tiene un coste anual que ronda los 100 dlares. Parapoder compilar con PhoneGap Build para iOS, tendremos que subir junto con la compilacin deficheros ZIP, ambos certificados.Indicar por ltimo que tal como se coment en el captulo 1 de Introduccin, el producto final queobtendremos en este proyecto, ser una app nativa para Android 4.x, por lo que procedemos a clicarsobre su botn y descargar la aplicacin.


42 / 66




42 / 66




43 / 66

10. SeguridadAfrontamos el tema de la seguridad desde el mbito de las aplicaciones web que habitualmenterepresenta un escenario muy problemtico, debido a la constante aparicin de nuevas amenazas, ascomo al hecho de que nuestra capacidad de previsin es relativamente reducida, al estar expuestos ala globalidad inherente a la red Internet.

No obstante, vamos a aplicar a nuestro sistema una serie de medidas, ms o menos estandarizadasque de alguna manera, suponen un protocolo de seguridad en el desarrollo de aplicaciones y serviciosweb.

Seguridad de la plataforma

A. Configuracin de permisos para los usuarios de las carpetas y ficheros de nuestro sistema, unavez ubicados en el servidor web definitivo, para la fase de produccin. Mediante el comandochmod, estableceremos a 755 los permisos de todas las carpetas, excepto aquellas quealmacenarn ficheros publicados o generados por usuarios pblicos, es decir, desde la web, lascuales estarn configuradas a 777. En el primer caso, 755, establecemos que ningn usuariodesde un navegador web, podr realizar otra operacin que no sea la simple lectura de losarchivos. Para el caso de las carpetas 777, tendremos la precaucin de no albergar en ellas scriptscon cdigo de programacin, as como impedir que usuarios pblicos puedan hacerlo, usando paraello un fichero de tipo .htaccess de Apache. Mostramos el cdigo de configuracin del fichero:

Order Deny,AllowDeny from all




Vemos que se deniega toda actividad a ficheros de tipo PHP, HTML, HTM y JS.


44 / 66

B. Creacin de perfiles de usuario distintos, para el propietario o administrador y para los usuariospblicos de la base de datos. Sera la configuracin ptima, siempre que el servicio quecontratemos para alojar nuestro sistema lo permita. De este modo, creamos un usuario con todoslos permisos de gestin de la base de datos, el administrador y un segundo tipo, para los usuariospblicos que solo tendrn permisos para actividades de edicin, como insertar, borrar o modificarcontenidos en ciertas tablas. Vemos en las siguientes capturas de pantalla, la configuracin deambos perfiles:

Figura 24: Configuracin delusuario administrador folmo'

Figura 25: Configuracin delos usuarios pblicos 'cliente'

Seguridad del software

Nos referimos en este caso a las medidas de seguridad que podemos tomar a la hora dedesarrollar nuestro cdigo de programacin. Mostramos un listado con dichas medidas,comenzando por la ms bsica, hasta las ms sofisticadas o especficas.


45 / 66

A. Uso del modo POST frente al GET, para el envo de formularios HTML al servidor, especialmenteaquellos que contengan informacin que posteriormente vaya a ser mostrada en los navegadorescliente. Es una medida frente ataques del tipo CSFR (Cross site request forgery).

B. Validacin correcta de los formularios HTML, de modo que obliguemos a que en sus campos solose pueda introducir informacin en el formato especificado. Mostramos algn ejemplo de cdigo,usado en la aplicacin:

if (formulario.precio.value !=""){

if (!isNaN(formulario.precio.value)){

if (formulario.descripcion.value !=""){

actualizar("form_datos");}else{

alert("indique la descripcin del producto");}

}else{

alert("indique una cantidad para el precio del producto");}

}

Comprobamos en el script que el campo precio sea un dato numrico y que descripcion no estvaco.

C. Escapado correcto de las cadenas de caracteres que llegan al servidor, mediante funcionesespecficas del lenguaje PHP. Su uso es habitual para evitar ataques de tipo inyeccin de cdigoSQL y del tipo XSS o Cross site scripting attacks. En ambos casos, se inserta cdigo malicioso enlos formularios de nuestros documentos HTML. Para el caso de la inyeccin SQL, el cdigoinsertado intenta ejecutar acciones en el servidor sobre nuestra base de datos, hasta incluso llegara borrarla, realizando una instruccin del tipo drop database. Para evitarla, hemos hecho uso de lafuncin PHP mysql_real_escape_string que escapar todos los caracteres consideradospeligrosos.

En el segundo caso, ataques XSS, el modus operandi es similar, salvo que en esta ocasin, elobjetivo es ejecutar cdigo en los navegadores cliente, generalmente mediante JavaScript. Para


46 / 66

evitarlo, usamos la funcin PHP htmlentities que escapa todos los caracteres vlidos para lacodificacin HTML. Mostramos un ejemplo de uso:

mysql_real_escape_string(htmlentities($nombre,ENT_QUOTES));

D. Codificacin de claves de mxima seguridad. Por ejemplo para la contrasea del administrador delsistema. Para ello, se ha usado el comando PHP md5, que nos devuelve una cadena encriptadaen formato hexadecimal de 32 dgitos.


47 / 66

11. TestsTal como ya se ha descrito en el captulo 9 del proceso de trabajo, los tres mdulos que componen elproyecto son aplicaciones interactivas en el entorno web. Por este motivo, han sido desarrolladas deacuerdo al modelo de diseo centrado en el usuario. En este sentido, una de las etapas de estametodologa de trabajo, es el anlisis de la usabilidad, cuyos principios o heursticas se han tenido encuenta en todo el proceso de desarrollo, como parte inherente al mismo.

Independientemente de los tests de usabilidad, hemos centrado este captulo de pruebas, en lacompatibilidad de la aplicacin mvil, con los principales sistemas operativos y versiones de losmismos, con el objetivo de comprobar el grado de cumplimiento de la idea central del proyecto: utilizarlas tecnologas de desarrollo web, para la creacin de aplicaciones mviles nativas, de acuerdo con elprincipio de escribir una sola vez el cdigo y ejecutarlo en plataformas distintas. Mostramos acontinuacin una tabla, con los resultados obtenidos sobre una serie de tests de compatibilidad.

Dispositivos Compatibilidad dela aplicacinFluidez enla ejecucin

Compatibilidad conGoogle Maps

HTC Wildfire SAndroid 2.2.1 x Samsung Galaxy miniAndroid 2.3 xSamsung Galaxy IAndroid 2.3 xSamsung Galaxy IIIAndroid 4.0 Tablet Woxter 10.1"Android 4.1 iPhone 3GSiOS 6.1.3 iPad pantalla RetinaiOS 6.0.1

ptimo Aceptable No compatible


48 / 66

Podemos comprobar cmo la aplicacin desarrollada exclusivamente con tecnologas web, es capazde ejecutarse en dispositivos bajo sistemas Android e iOS, con el mismo cdigo, sin tener que realizarningn cambio en el mismo.

Vemos tambin que se obtienen resultados poco ptimos e incluso negativos, en temas puntuales ycon versiones antiguas de Android. Se trata de la fluidez con la que la aplicacin realiza lastransiciones o animaciones entre pantallas, as como la insercin de Google Maps mediante el uso dela etiqueta HTML . Este bug es debido exclusivamente, a la versin del renderizador webkitincluido en el navegador, de las versiones Android hasta la 2.3 que mostraban una pobre adaptacinde los nuevos estilos CSS3. Esta versin, no interpreta aspectos como las sombras tipo box-shadow,pero su carencia ms acusada es no soportar las animaciones mediante animation y @keyframes, porlo que el framework JQuery Mobile, utiliza para suplir esta carencia animaciones JavaScript, ofreciendouna velocidad poco ptima al tratarse de un lenguaje interpretado, frente a la ejecucin de CSS3,compilada en lenguaje C++.

Finalmente comentamos que la ejecucin en formato de pgina web no difiere en absoluto, del ofrecidouna vez encapsulada la aplicacin con PhoneGap, pues en ambos casos, quien se encarga de suvisualizacin es el navegador web del sistema operativo.

Una vez terminado todo el proceso de desarrollo del proyecto y realizados los test y comprobacionesaqu expuestos, entregamos junto a esta memoria, la versin 1.0 de la aplicacin, lista para serinstalada y usada, de acuerdo con los requisitos e instrucciones que se indican en los captulossiguientes.


49 / 66

12. Requisitos de instalacin Software

Para la implantacin y ejecucin de las aplicaciones de gestin, deberemos contar con un servicioweb, bien sea hosting o un sistema virtualizado cloud, bajo plataforma Linux, que nos ofrezcainstalados, un servidor web Apache 2, soporte PHP 5 y servidor de bases de datos MySQL 5. Parahacer uso de estas aplicaciones, tan solo ser necesario que nuestro ordenador cuente conconexin a Internet y un navegador actualizado, compatible con HTML5/CSS3.

Para la instalacin y ejecucin de la aplicacin nativa, podremos usar cualquier dispositivo mvilApple iOS o Android preferiblemente con sistema operativo 4.x.

HardwarePara las aplicaciones de gestin, bastar con un PC con capacidad para conectarse a Internet ypara la aplicacin nativa, podremos usar cualquier dispositivo Apple iOS o Android,preferentemente con la versin 4.x del sistema.

Formacin/ConocimientosEn cuanto a la formacin que se necesita para el uso de cualquiera de las tres aplicacionesdesarrolladas, decir simplemente que no se requieren ms conocimientos que los necesarios parael uso bsico de utilidades como las que a diario usamos en Internet: Facebook, Twitter, comercioelectrnico y similares.


50 / 66

13. Instrucciones de instalacin/implantacinA. Instalacin de la app nativa

Tan solo ser necesario, enfocar con un dispositivo mvil Apple iOS o Android 4.x, el cdigo QR que laaplicacin gener para cada cliente de nuestro sistema y que podr encontrarse impreso en cualquierpublicidad de dicha empresa, o bien desde su pgina web, mediante un enlace de descarga directa dela aplicacin. Tambin, a travs de la Apple Store o la Play Store de Google.

B. Instalacin de las aplicaciones de gestin

Base de datos del sistemaEn la subcarpeta del proyecto, de nombre base_de_datos, encontramos el fichero folmo_bd_uoc.sqlque contiene todas las instrucciones necesarias para crear la base de datos de nuestra aplicacin.

En primer lugar, crearemos en el servidor del servicio hosting o cloud que hayamos contratado, unabase de datos de nombre olmo. A continuacin, crearemos un usuario para la misma, con lossiguientes datos:

. nombre de usuario: olmo

. contrasea: FcKL7200Si el servicio contratado ya nos dio una base de datos configurada, tendremos que editar el ficherofolmo_bd_uoc.sql, realizando un operacin de buscar/reemplazar de la cadena olmo, por el nombre dela base de datos que nos haya asignado el servidor.

A continuacin, procederemos a importar este fichero SQL desde el servidor remoto (se incluyenalgunos datos de prueba). En caso de haber tenido que cambiar el nombre de la base de datos o losparmetros de conexin, tendremos que hacerlo tambin en nuestra aplicacin. Para ello, tan solo sernecesario editar el fichero conexion_db.php de la carpeta modelo y cambiar los datos que allaparecen, por los que nos haya suministrado la empresa que nos provea el servicio de servidor.

Ficheros de la aplicacinAccederemos al espacio de la carpeta web de nuestro servidor remoto, a travs de cualquier clienteFTP y directamente en su directorio raz, copiaremos todos los ficheros que nos encontramos dentrode la carpeta aplicacion del proyecto.

No necesitaremos ms configuracin, que asignar permisos mediante chmod, de nivel 777 a la carpetabiblioteca y asegurarnos de que la misma, contiene al fichero .htaccess.

Podemos ya acceder a nuestra aplicacin, desde el navegador, en la URL path/ app_administrador.


51 / 66

14. Instrucciones de usoEn el presente captulo, procederemos a explicar el funcionamiento de cada una de las tresaplicaciones que componen el proyecto desarrollado. Para una mejor comprensin de la informacinque se ofrece a continuacin, les remitimos al captulo 9, donde mostramos capturas de todas laspantallas del sistema, con objeto de no repetir de nuevo las mismas imgenes.

A. Aplicacin de gestin de clientes

Accedemos a la aplicacin a travs de la URL:http://multimedia.uoc.edu/~olmo/app_administrador/, donde nos aparecer el formulario deidentificacin del administrador. Introducimos la contrasea, rrswindle. Vemos de entrada, el listado deempresas que actualmente estn de alta en el sistema. Se nos ofrece como informacin, el nombre dela empresa y su fecha de alta, as como una indicacin de color que nos informa si el cliente, desde sugestor de contenidos, activ ya la orden para que procedamos a generar su app nativa.

En la parte superior, tenemos el men principal, con tres opciones, para el listado de empresas, crearnueva empresa y salir de la aplicacin.Si clicamos sobre el nombre de una empresa del listado, se nos mostrar la pantalla de edicin decliente. En ella aparecen las siguientes opciones: Actualizar. Guardar en base de datos los cambios que escribamos sobre el formulario, en los

campos de nombre y e-mail de la empresa Eliminar. Borrar a la empresa de la base de datos. Esto solo ser posible si el cliente an no

introdujo productos ni activ la orden de generado de su app nativa Estado del cliente. Nos permite activar/desactivar al cliente en el sistema

Si optamos por dar de alta a un nuevo cliente, la aplicacin nos ofrece un formulario dondeintroduciremos el nombre y e-mail de la empresa. Al clicar sobre el botn dar de alta, la aplicacingenerar un identificador de empresa, as como una contrasea de acceso al gestor de contenidos. Asmismo, se crear una carpeta, dentro de la carpeta empresas, cuyo nombre ser el identificador de laempresa dada de alta. Por ltimo, se crear un cdigo QR en formato PNG, tambin de nombre elmismo identificador de la empresa, en la carpeta biblioteca/qr. Dicho cdigo enlazar con la aplicacinnativa que generaremos para el cliente, que se denominar catalogoapp.apk y que colocaremos parasu descarga, en la carpeta path/empresas/idempresa.

La ltima opcin, salir de la aplicacin, borrar la sesin de usuario y nos devolver al formulario deidentificacin.


52 / 66

B. Aplicacin de gestin de contenidos

Los clientes del sistema, accedern a la aplicacin a travs de la URL:http://multimedia.uoc.edu/~olmo/ donde se identificarn con su email y la contrasea suministrada porel administrador de la empresa. Dado que esta aplicacin es ms compleja que la primera, haremosuna descripcin de las opciones que nos ofrece cada pantalla:

Datos de la empresaDisponemos de un amplio formulario desde donde introducir y actualizar nuestros datos. Para el casode la insercin de Google Maps, utilizaremos la direccin URL completa que nos ofrece este servicio.El usuario de la aplicacin cuenta tambin, con otro formulario para enviar mensajes mediante correoelectrnico, al administrador del sistema. Para que esta utilidad est funcional, habr que indicar en elfichero de configuracin php.ini, los datos del servidor SMTP adecuados.

Diseo de la aplicacinEsta pantalla, nos ofrecer dos posibles vistas, antes y despus de que el usuario haya pulsado laopcin de activar la aplicacin. Antes de hacerlo, se nos muestra una lista con todas las plantillasdisponibles, para que escojamos la que deseemos. Una vez hemos ordenado activar la aplicacin, tansolo podremos ver la plantilla que elegimos, pues la app nativa ya existir con este diseo.

Contamos adems con una opcin para descargar la imagen PNG del cdigo QR que se genercuando se dio de alta a la empresa, la cual podremos utilizar impresa en nuestra publicidad.

Una tercera utilidad de esta pantalla nos permite gestionar el logotipo de la empresa, tantas vecescomo necesitemos, pues recordemos que la aplicacin mvil leer esta informacin del servidorremoto cada vez que se ejecute.

Por ltimo, la cuarta opcin ser la ya comentada que nos permitir activar la aplicacin mvil, lo cualquedar automticamente reflejado en la aplicacin del administrador que proceder a encapsular laweb app, en formato de aplicacin nativa para descargar e instalar. Indicar que en este proceso, segenerar un fichero XML que contendr informacin del identificador y nombre de la empresa, ascomo de la plantilla escogida. Este fichero quedar grabado en la carpeta de la empresa que se generjunto a su QR, al ser creada desde la aplicacin de gestin de clientes. Servir para que al ejecutarse alaplicacin mvil, muestre ya el nombre de la empresa y su plantilla y sobre todo, busque en el servidorremoto, los datos de dicha empresa.

Listado de novedadesSe muestra el listado de novedades de la empresa, de las cuales podemos ver una foto, si existe, ascomo el nombre, precio y enlace para ampliar su informacin. Tenemos en el men secundario de estapantalla, la opcin de dar de alta un nuevo producto como novedad del catlogo.


53 / 66

Creacin de novedadesLa creacin de novedades del catlogo, la haremos en dos pasos. En primer lugar la daremos de altacon sus datos bsicos: nombre, precio y descripcin, desde esta pantalla. Una vez creada, se nosmostrar ya en el listado, lgicamente an sin foto, desde donde podremos clicar en su botn +info,para pasar a la pantalla de edicin.

Edicin de novedadesUn primera seccin de esta pantalla, nos permite modificar los datos del producto, as como eliminarlodel catlogo. A continuacin, contamos con la gestin de la galera de fotos de dicho producto; se nosmuestra un listado con todas sus fotos las cuales van acompaadas de un botn +info que nos permiteabrir una herramienta desde donde podemos modificar el texto de su pie de foto, as como eliminardicha foto de la galera. Por ltimo, tenemos un formulario para agregar nuevas fotografas a la galera,acompaadas de su texto al pie.

En todas las pantallas, contamos con un botn en la esquina superior derecha, para abandonar lasesin de usuario y salir de la aplicacin.

C. Aplicacin mvil nativaLa web app encapsulada con PhoneGap, ofrecer a los usuari@s que la instalen, las siguientespantallas y opciones:

Carga inicial de datosLa aplicacin lee su fichero startup.xml, configura el nombre de la empresa y la plantilla elegida y cargalos datos de la empresa del servidor remoto, a excepcin de los relativos al catlogo de novedades.Clicamos en el botn comenzar para entrar al men principal.

Men principal de la aplicacinSe nos ofrecen botones de acceso a cada una de las cuatro secciones de la aplicacin.

La empresaMostramos el texto de informacin de la empresa.

Novedades del catlogoVemos una lista con todas las novedades del catlogo. De cada una de ellas, veremos una foto enminiatura, el nombre del producto y su precio. Seleccionamos el que deseemos consultar y pasamos asu pantalla de detalle.


54 / 66

Detalle del productoLa aplicacin nos muestra la informacin del producto elegido: nombre, precio y descripcin, as comouna galera de fotos con sus textos al pie. Si existe ms de una foto, tenemos dos botones, anterior ysiguiente, para cambiarlas. Por ltimo, el botn novedades nos devolver al listado de novedades.

ContactoTenemos aqu opciones para realizar una llamada al telfono y al mvil de la empresa, enviarle une-mail, as como un enlace a su web en Facebook.

UbicacinPor ltimo, la seccin de Ubicacin nos ofrece informacin acerca de dnde podemos encontrar a laempresa. Nos muestra tambin un mapa de posicin a travs del servicio Google Maps.


55 / 66

15. Proyeccin a futuroEl producto obtenido como resultado del presente proyecto, no es sino una base sobre la queevolucionar todo un sistema de generacin automtica de aplicaciones mviles, desarrolladas contecnologas web. Nuevos servicios y utilidades, se iran aadiendo progresivamente, para hacerla msatractiva y por tanto, ms competitiva.

Mostramos a continuacin, una serie de ideas que en conjunto, podran suponer la siguiente versin denuestro sistema:

Ampliacin del soporte a dispositivos mviles basados en Windows Phone y BlackBerry

Uso de la API de PhoneGap para combinar la geolocalizacin con el posicionamiento sobre mapasde Google Maps

Captura de fotos desde la cmara del dispositivo mvil mediante la API PhoneGap y subida alservidor, para usar en el catlogo de productos

Aplicacin del responsive design para crear versiones de la aplicacin especficas parasmartphone y tablet

Aumentar las posibilidades de gestin del diseo de la aplicacin, ms all de la actual eleccin delcolor base

Aadir al mdulo de gestin del catlogo de novedades, la posibilidad de crear varios catlogosque pueden albergar tipos distintos de productos

Crear una aplicacin de comercio electrnico que permita comprar los productos a travs de laaplicacin

Todas estas propuestas, son tan solo una muestra del amplio abanico de posibilidades que comienzana ofrecer las aplicaciones basadas en plataformas mviles. No obstante, la velocidad en su evolucin yla constante aparicin de nuevas tecnologas, nos hace reflexionar sobre la conveniencia, ms quenunca, de apostar por los sistemas de desarrollo basados en estndares web, frente al enormeesfuerzo que representa el intentar dominar la programacin de aplicaciones, para un espectro tangrande de sistemas propietarios, como ya existen en el mercado y que todo parece indicar, ir enaumento a corto plazo.


56 / 66

16. Comercializacin del productoEl presente proyecto no incluye captulos o anexos relativos a la valoracin de un producto o sucomercializacin, ya que el objetivo final, no es la concrecin de tal producto o servicio preparado parasu venta, sino el desarrollo de una metodologa de trabajo y el uso de unas determinadas tecnologasque hagan posible, crear aplicaciones mviles de calidad profesional que puedan competir en elmercado actual.

De esta manera, podemos llegar a la conclusin de que la creacin de aplicaciones nativas mediante eluso de estndares web, supone una opcin muy vlida comomtodo de desarrollo multiplataforma. Talvez esto an no sea posible para todos los tipos de aplicaciones, pero s que lo es para casos como elplanteado en este proyecto: aplicaciones para uso publicitario o comercial de pequeas empresas.

El hndicap que supone usar como renderizador al navegador del sistema operativo mvil, por sersignificativamente ms lento que los mtodos nativos, va palindose poco a poco, sirva como ejemploeste grfico de la fundacin Mozilla, donde se demuestra la velocidad a la que estn evolucionando lastecnologas web, en este caso mediante su nuevo optimizador de JavaScript OdinMonkey.

Figura 26: En verde, rendimiento del optimizador JavaScript OdinMonkey

Obviamente el aspecto comercial o econmico del uso de sistemas de desarrollo multiplataforma, seruno de los ms beneficiados, pues es fcil imaginar la reduccin de costes que supone para lasempresas de software, no tener equipos de programadores especializados en cada una de lasplataformas mviles del mercado. Adems muchas de estas plataformas tienen una vida corta y todo elcapital invertido en dominarlas, quedar definitivamente perdido cuando ya no existan.


57 / 66

Anexo 1. Entregables del proyectoEl material entregado se ha organizado en tres carpetas, para una mejor estructuracin de suscontenidos. Se exponen a continuacin, acompaados de una breve descripcin.

1. Carpeta documentacinContiene los archivos:

folmo_memoria_tfg.pdf - Documento de la memoria del proyecto folmo_ct.pdf - Documento de la autoevaluacin de competencias transversales

2. Carpeta presentacionesContiene los archivos:

folmo_video_tribunal.mp4 - Documento en vdeo de la presentacin para el tribunal folmo_presentacion.pdf - Documento de la presentacin del proyecto

3. Carpeta proyectoContiene los archivos del proyecto y est estructurada a su vez en tres subcarpetas:

3.1. Carpeta aplicacionContiene toda la estructura de las tres aplicaciones web que componen el proyecto. El contenidode esta carpeta, deber ser copiado tal cual se entrega, en el servidor remoto donde vaya a serinstalado el sistema, siguiendo las instrucciones indicadas en el captulo 14 de esta memoria. Sucontenido es el siguiente:

app_administrador - Carpeta con los archivos de la aplicacin de gestin de clientes app_cms - Carpeta con los archivos de la aplicacin de gestin de contenidos app_movil - Carpeta con los archivos de la aplicacin web mvil biblioteca - Carpeta donde se almacenarn las fotografas, logotipos, plantillas y cdigos

QR, creados por la aplicacin, o subidos por los clientes empresas - Carpeta que contendr a su vez, todas las carpetas de los clientes, generadas

automticamente por la aplicacin de gestin de clientes, cuando son dados de alta fuentes - Carpeta con las fuentes tipogrficas no estndares, usadas por las aplicaciones imagenes - Carpeta con las imgenes usadas por las aplicaciones modelo - Carpeta con los archivos del componente modelo de la aplicacin index.htm - Archivo htm de inicio de la aplicacin. Redirige al formulario de identificacin de

la aplicacin de gestin de contenidos


58 / 66

3.2. Carpeta app_movil catalogoapp.apk - Archivo APK, con la aplicacin mvil creada con PhoneGap Build.

Instalable en dispositivos Android 4.x

3.3. Carpeta base_de_datos esquema_bd_folmo.pdf - Documento con el esquema grfico de la base de datos folmo_bd_uoc.sql - Archivo SQL con la estructura y datos, para instalar en servidor MySQL


59 / 66

Anexo 2. Cdigo fuente (extractos)Como ya se coment en el captulo 5 de Metodologa, nos hemos basado en el patrn Modelo VistaControlador (MVC) para el desarrollo de las tres aplicaciones que componen el proyecto. Acontinuacin, vamos a exponer una secuencia, extrada del cdigo de programacin de la app mvilque ilustre el funcionamiento general que se ha seguido para el desarrollo de todos los mdulos, esdecir, haremos un recorrido desde la solicitud que se hace a travs de la vista, pasando por elcontrolador que la recoge y terminando en el modelo. A su vez, el modelo responder al controlador yste enviar finalmente la respuesta a la solicitud que envi la vista.

Paso 1. Se realiza una peticin desde la vistaEn este primer bloque, se muestra el cdigo HTML de la vista, perteneciente al archivo index.html. Seha marcado en rojo el elemento que contiene la llamada al controlador mediante la funcinJavaScript lista_novedades():

CATLOGO APP

empresa novedades

ubicacincontacto

francisco olmo ortiz 2013 - UOC

El segundo bloque, muestra el cdigo de la funcin lista_novedades(), contenida en el archivo index.jsque contiene el cdigo JavaScript de la vista. Se muestran comentarios en rojo, con el flujo del procesode envo de la peticin AJAX y el procesado del resultado obtenido.


60 / 66

//cdigo que solicita el listado de productos de la empresafunction lista_novedades(){

var cargador = creaAjax();//creamos un objeto AJAX

if (cargador){

//formamos la cadena de variables que pasaremos via POSTvar query_string = "id_empresa=" + id_empresa;

//llamamos a la funcion de respuesta del objeto AJAXcargador.onreadystatechange = cargaDatos;

//realizamos la peticin AJAX al controladorcargador.open("POST", ruta +

"app_movil/controlador/muestra_novedades_empresa.php", true);cargador.setRequestHeader("Content-Type","application/x-www-form-urlencoded");cargador.send(query_string);//enviamos las variables via POST

}//funcin de respuesta del objeto AJAXfunction cargaDatos(){

if(cargador.readyState == 4){

//si obtenemos una respuesta correcta del servidorif (cargador.status == 200){

var cadenaRespuesta = cargador.responseText;

//insertamos el cdigo HTML devuelto por el controladordocument.getElementById("bloque_listado").innerHTML =

cadenaRespuesta;//navegamos hacia la pantalla de novedadeslocation.href = "#novedades";

}else if (cargador.status == 404){

alert("ERROR EN SU CONSULTA");}

}}

}

Paso 2. El controlador enva la peticin al modelo y recoge su respuestaEl controlador, en este caso el archivo muestra_novedades_empresa.php, recoge la variableid_empresa que le hemos pasado via POST y hace una llamada a la funcin estticanovedades_empresa() de la clase abstracta MuestraNovedadesEmpresa del controlador, la cual


61 / 66

realizar la peticin indicada en la funcin listar_novedades() del modelo. Una vez ha obtenidorespuesta de ste, forma la cadena $cadena_respuesta y la enva devuelta a la vista que la solicit,conteniendo ya el cdigo HTML formateado.


62 / 66

{$nombre_foto_producto = "no";

}}$cadena_respuesta .="

". $productos[$i][1] ."". $productos[$i][2] ." +info

";}

}//mostramos la cadena formada con el cdigo HTMLecho($cadena_respuesta);

}else{

echo("Error en la carga de datos");}

}}//Llamamos a la funcin esttica de la clase abstracta, con la variable pasada via POSTMuestraNovedadesEmpresa::novedades_empresa($_POST['id_empresa']);?>

Paso 3. El modelo realiza la consulta solicitada a la base de datosLas funciones listar_novedades() y listar_fotos_novedades() del modelo, construyen las sentenciasSQL que sern enviadas a la base de datos, a travs de la funcin realizar_query_db() de la claseConexionDB del modelo. Mostramos ambas funciones o mtodos.

//muestra la lista de productos de la empresapublic function listar_novedades($id_empresa){

try{


63 / 66

$mi_conexion = new ConexionDB();$mi_conexion->conectar_db();//construye la sentencia SQL para enviar a la BD$cadena = "SELECT idproducto,nombre,precio FROM producto WHERE

idempresa='".$id_empresa."' ORDER BY nombre";$mi_resultado = $mi_conexion->realizar_query_db($cadena);

if(mysql_num_rows($mi_resultado) !=0){

return($mi_resultado); //devuelve el resource MySQL con los datos}else{

return(false);}

}catch(Exception $e){

echo($e->getMessage());}

}

//muestra las fotos de la lista de productos de la empresapublic function listar_fotos_novedades(){

try{

$mi_conexion = new ConexionDB();$mi_conexion->conectar_db();//construye la sentencia SQL para enviar a la BD$cadena = "SELECT idproducto,nombre FROM foto GROUP BY idproducto";$mi_resultado = $mi_conexion->realizar_query_db($cadena);

if(mysql_num_rows($mi_resultado) !=0){

return($mi_resultado);//devuelve el resource MySQL con los datos}else{

return(false);}

}catch(Exception $e){

echo($e->getMessage());}

}


64 / 66

Anexo 3. Libreras/Cdigo externo utilizado PhoneGap

Propiedad de Adobe Systems Inc y cedido a la Apache Software Foundation (ASF) bajo el nombrede Apache Cordova Se trata del framework con el que se ha encapsulado la web app desarrolladaen el proyecto, para obtener la aplicacin nativa catalogoapp.apk, instalable en dispositivosAndroid 4.x. Si bien PhoneGap pone a disposicin de los desarrolladores, una completa API con laque acceder a las utilidades hardware de los dispositivos mviles, en esta ocasin se ha usadoexclusivamente con la finalidad de compilar la aplicacin web. Por ello, se opt por utilizar laherramienta de compilacin on-line PhoneGap Build. Su funcionamiento puede ser consultado enla pgina 41 del presente documento. Se accede a este servicio en la URLhttps://build.phonegap.com/

JQuery MobileDe la jQuery Foundation, este framework est creado sobre las libreras JQuery y JQuery UI.Proporciona al desarrollador web una completa plataforma con la que crear aplicaciones, dediseo y comportamiento igual a las nativas, especialmente a las que encontramos en el mercadode iPhone. Est basado completamente en HTML5 y CSS3, es decir, estndares o futurosestndares web, motivo por el cual, se opt por adoptarlo para este proyecto, frente a otrasopciones. Su implicacin, ha consistido en su uso en el diseo de la vista del mdulo web app,bsicamente utilizando la adaptacin que el framework hace de los elementos HTML, a travs deatributos tipo data-role.

En concreto, se han usado los data-role='page' como atributos de elementos div, convirtindolosen pginas distintas, cuyo nombre sera su atributo id. De esta manera, conseguimos que toda laaplicacin web, est contenida en un solo documento HTML. Otros usos de estos atributos hansido, data-transition='slide' y data-direction'='reverse' para establecer las transiciones entrepginas, as como data-role='button' y data-icon='home' para convertir algunos enlaces en botonescon iconos.Puede descargarse en http://jquerymobile.com/

phpqrcodeSe trata de una librera de cdigo abierto (LGPL) para la generacin de cdigos QR, basada en lalibrera libqrencode escrita en lenguaje C por Kentaro Fukuchi. Proporciona una API para crearimgenes de cdigo QR en formato PNG, gracias a la librera GD2 y est implementada totalmenteen PHP, sin dependencias externas. Puede descargarse en http://phpqrcode.sourceforge.net/

En la funcin alta_empresa() de la clase Sistema (sistema.php), se muestra la forma en que se hausado en este proyecto.


65 / 66

Anexo 4. Bibliografa1. Material docente de la UOC. Grado de Multimedia

Gil de la Iglesia, D. y Berni Millet, P. (2010). Laboratorio de PHP y MySQL. Barcelona: UOC Gil de la Iglesia, D. y Berni Millet, P. (2010). Diseo de bases de datos. Barcelona: UOC Moncho Mas, V. (2010). Orientacin a objetos en JavaScript. Barcelona: UOC Snchez Cano, J. (2011). AJAX. Barcelona: UOC Monjo Palau, T. (2011). Diseo de interfaces multimedia. Barcelona: UOC Fuenmayor Lpez, D. y Gonzlez Sancho, M. (2012). Aplicaciones Rich Media. Barcelona: UOC Arnedo Moreno, J. y Riera i Terrn, D. (2010). Diseo y programacin orientada a objetos.

Barcelona: UOC

2. Libros, guas y manuales

Charte Ojeda, F. (2007). Ajax. Madrid: Ediciones ANAYA Multimedia Stark, J. (2010). Building iPhone Apps with HTML, CSS and JavaScript: O'Reilly Myer, T. (2012). Phonegap. Madrid: Ediciones ANAYA Multimedia David, M. (2011). HTML5. Madrid: Ediciones ANAYA Multimedia

3. Documentacin electrnica. Internet

PhoneGap Build: https://build.phonegap.com/docs JQuery Mobile: http://jquerymobile.com/demos/1.2.0/ PHP: http://php.net/ Android: http://developer.android.com/index.html W3Schools: http://www.w3schools.com/


66 / 66

Anexo 5. VitaFrancisco Olmo Ortiz

Nace en Castro del Ro, Crdoba, un 17 de abril de 1966. A los 18 aos, cuando termina la EducacinSecundaria, recibe junto a su hermano Antonio, un Home Computer Philips MSX VG-8020, de manosde su padre Antonio. Empieza aqu su aventura informtica que pasar poco a poco de ser su principalaficin, a convertirse en su vida profesional. Comienza en estos primeros tiempos, haciendo incursinen la programacin Basic, mientras aprende y disfruta de mquinas legendarias como los Commodore64 y 128, donde aprende conceptos como el de

Fol Mot Fg 0613 Memoria

Documents

Transcript of Fol Mot Fg 0613 Memoria