Ejemplo de diseño de una aplicación para dispositivos móviles.

1. Introducción

En este ejemplo utilizaremos ShareTools, una empresa ficticia que se encarga de alquilar herramientas de bricolaje a través de Internet. Esta empresa desea expandir su modelo de negocio para que los particulares también puedan alquilar sus propias herramientas a otros usuarios de la comunidad mientras no las están usando.

Han decidido fomentar esta iniciativa mediante tecnologías móviles, de forma que todo usuario que disponga de un dispositivo móvil pueda acceder a toda la base de datos de herramientas, y tanto pueda añadir nuevas como hacer peticiones para alquilarlas.

El usuario de esta futura aplicación, podrá ver la ficha de las diferentes herramientas de bricolaje más cercanas, filtrar la fecha en la que quiere la disponibilidad de la herramienta, conocer el precio que habrá que abonar al propietario y visualizar un mapa para situar las herramientas entre otras muchas cosas.

2. Planificación del proyecto

En este apartado se explicará y desarrollará el método de desarrollo que se llevará a cabo en esta primera fase del proyecto, así como el tipo de la aplicación y otras decisiones globales en cuanto a metodología de desarrollo y tecnología sobre la que se va a desarrollar, que afectan al resto del proyecto.

2.1 Hitos

En la fase de planificación se intenta distribuir el tiempo y los recursos necesarios para poder llevar a cabo el proyecto, ya sea en una planificación completa o bien en planificaciones mas divididas. En las fases de planificación siempre se intenta conseguir la máxima precisión de las estimaciones, contra los riesgos asociados al proyecto. Así pues, para llevar a cabo esta aplicación, se deberán seguir distintas fases:
  • Definición funcional de la aplicación: El proyecto debe estar bien definido, tanto sus objetivos como las funcionalidades que se requieren para que cumpla su cometido.
  • Planificación: Es la primera fase del desarrollo del proyecto. Consiste en tener un programa de trabajo con un desglose de todas las actividades que se van a realizar (desde el diseño hasta las pruebas finales), el plazo estimado de horas que se le va a dedicar cada una de ellas y estableciendo los medios humanos que se van a dedicar para alcanzar los objetivos que se hayan propuesto.
  • Diseño: Previo a la implementación es necesario tener totalmente definido el diseño estructural de la app y su comportamiento. Para ello se utilizan programas de diseño de aplicaciones móviles y luego prototipados que mostrarán el aspecto y la usabilidad de la aplicación.
  • Desarrollo: Es la programación del proyecto. Esta fase se hará de acuerdo a la tecnología que se haya decidido emplear para cada plataforma de programación y los entornos de desarrollo empleados serán acordes con ello.
  • Fase de pruebas: Una vez desarrollada la app es necesario hacer un testing profundo de todas las partes del mismo.

  • El testeo se puede dividir en:

    -Testeo funcional: para asegurar que la aplicación trabaja como debería y sigue todos los flujos debidos.

    -Testeo de rendimiento: para comprobar que el comportamiento de la aplicación bajo ciertas condiciones (múltiples peticiones de acceso simultáneas, poca cobertura, poca batería…) es el correcto.

    -Comprobaciones de fugas de memoria, cruciales en móviles pues los recursos son mucho más limitados que en programas para ordenadores de sobremesa. Para esta tarea se utilizan habitualmente programas automatizadores de tareas y programas que reportan el código de error, además del testeo manual intensivo.
  • Distribución prelanzamiento: Previo a la subida a los markets de aplicaciones móviles se pueden hacer distribuciones de las aplicaciones móviles. En Android se puede hacer utilizando el entorno beta de desarrollo Android disponible en la consola de desarrollador.
  • Implantación y distribución: A la finalización del desarrollo la app será apta para darse a conocer y comercializarse y el último paso será subirlo a los markets de aplicaciones correspondientes.
Lo de los hitos, entiendo que deberá ser como el listado de funcionalidades de la asignatura de diseño, pero marcando las fases que queremos que tenga nuestra producción... por ejemplo fase de diseño, fase de programación Android, fase de programación Windows, fase de lanzamiento versión Alpha de la app, fase de la versión Beta, fase de recopilación de fallo con beta testers, salto a producción... etc...

2.2 Tipo de aplicación

Para llevar a cabo esta aplicación, se ha decidido que sea una aplicación híbrida, ya que se desarrollan con lenguajes propios de las webabpp, es decir, HTML, Javascript y CSS por lo que permite su uso en diferentes plataformas, pero también dan la posibilidad de acceder a gran parte de las características del hardware del dispositivo. Alguna de las ventajas que nos proporciona este tipo de aplicaciones son:
  • Minimizamos el código específico: La mayor parte del código puede utilizarse para el resto de las plataformas. Solo se utiliza código nativo para aquellos aspectos que lo requieran.
  • Menor coste de desarrollo sobretodo si se requiere la aplicación en varias plataformas.
  • Menor coste de mantenimiento al ser la mayor parte del código común a todas las plataformas.
  • Una aplicación Híbrida puede acceder a los recursos del dispositivo móvil prácticamente como una nativa.

2.3 Metodología del desarrollo

En el mundo del desarrollo del software hay muchos métodos de desarrollo, cada uno con puntos fuertes y puntos débiles. En el caso del desarrollo de aplicaciones móviles sucede lo mismo, por lo que hay que plantearse la metodología de desarrollo dependiendo de nuestras necesidades. En este caso en concreto, se ha decidido utilizar una metodología ágil. El desarrollo ágil es un modelo de desarrollo basado en iteraciones, en las que en cada iteración se hacen todas las fases del ciclo de desarrollo. Se intenta entre otras cosas conseguir dar valor lo más pronto posible, sin tener problemas con los cambios de requisitos. Este punto lo ha hecho muy válido para proyectos cambiantes, ya sean grandes o pequeños. Los métodos ágiles suelen ser muy adecuados para el desarrollo de aplicaciones móviles por varias razones:
  • Alta volatilidad del entorno: Con cambios en entornos de desarrollo, de nuevos terminales y nuevas tecnologías a un ritmo mucho más elevado que en otros entornos de desarrollo.
  • Equipos de desarrollo pequeños: Como es nuestro caso, los desarrollos móviles suelen ser proyectos relativamente pequeños, llevados a cabo por desarrolladores individuales o pimes.
  • Software no crítico: la aplicación que se va a desarrollar no es una aplicación de alto nivel de criticidad.
  • Ciclos de desarrollo cortos: Debido a la evolución constante de la industria, se requieren ciclos de vida realmente cortos para poder dar salida a las aplicaciones a tiempo.
Se ha escogido este método de trabajo "ágil" porque se dispone de un equipo de desarrollo pequeño y especializado, el entorno de desarrollo se encuentra en una evolución constante y se requiere un ciclo de desarrollo corto para poder disponer de la aplicación lo antes posible. Con esta forma de trabajo, podremos obtener prototipos desde las primeras pruebas que se podrán mostrar al usuario, mientras se va refinando y añadiendo funcionalidad a la aplicación.

2.4 Interfaz

Para llevar a cabo todas las funcionalidades de esta aplicación, serán necesarias varias pantallas que permitirán al usuario llevarlas a cabo. A continuación, se van a mostrar dos de ellas. En esta primera interfaz, se muestra la pantalla en la que el usuario podría acceder al formulario para introducir una nueva herramienta para ser alquilada, simplemente pulsando el botón situado en la parte inferior "Subir mi herramienta". Si por el contrario lo que quiere es visualizar una lista de las herramientas disponibles, el usuario tan solo deberá presionar una de las 6 pestañas disponibles, dependiendo del tipo de herramienta que quiera alquilar (corte, unión, golpe, sujeción, montaje o medición).

1
Interfaz selección tipo de herramienta.

Una vez presionada alguna de las pestañas, pongamos por ejemplo que pulsa la pestaña "Corte". El sistema redireccionará al usuario a una pantalla parecido a la siguiente.

2
Interfaz listado de herramientas.

En esta pantalla, el usuario podrá ver las distintas herramientas disponibles, dependiendo del filtro de fechas que haya puesto en la parte superior de la pantalla, donde puede indicar la fecha de inicio y fin en la que quiere alquilar la herramienta. En la lista de herramientas, el usuario podrá observar una foto de la herramienta, una descripción del nombre, y el precio que le costaría alquilarla en esas fechas.

2.5 Planificación temporal

En la siguiente imagen podemos observar la planificación temporal que vamos a llevar a cabo siguiente y realizando los diferentes hitos que se han especificado en apartados anteriores en un periodo de tiempo estimado de unos 3 meses (al no constar en el enunciado ningún límite temporal, se ha estimado un límite de alrededor de 3 meses igual que la duración de la asignatura).

3
Características.

3. Documento de elección de la tecnología para el desarrollo

3.1 Tipo de aplicación

A continuación se van a nombras los pros y contras de los 3 tipos de aplicaciones que se pueden desarrollar, para finalmente llegar a una conclusión.
  • Aplicación nativa: La aplicación nativa está desarrollada y optimizada específicamente para el sistema operativo determinado y la plataforma de desarrollo del fabricante (Android, Blackberry, etc.). Este tipo de aplicaciones se adapta al 100% con las funcionalidades y características del dispositivo obteniendo así una mejor experiencia de uso. Sin embargo, el desarrollo de una aplicación nativa comporta un mayor coste, puesto que si se desea realizar una aplicación multiplataforma se ha de realizar una nueva versión para cada sistema operativo, multiplicando así los costes de desarrollo.
  • Aplicación híbrida: Este tipo de aplicación aprovecha al máximo la versatilidad de un desarrollo web y tiene la capacidad de adaptación al dispositivo como una aplicación nativa. Permite utilizar los estándares de desarrollo web (HTML5) y aprovechar las funcionalidades del dispositivo tales como la cámara, el GPS o los contactos.
  • Además, comporta un menor coste que una aplicación nativa y una mejor experiencia de uso que una aplicación web. Sin embargo, tiene un rendimiento ligeramente inferior al de una aplicación nativa debido a que cada página debe ser renderizada desde el servidor y supone una mayor dificultad de desarrollo.
  • Aplicación web: La aplicación web es la opción más sencilla y económica de crear aplicaciones, puesto que al desarrollar una única aplicación se reducen al máximo los costes de desarrollo. Asimismo, en este tipo de aplicaciones, puede utilizarse el “responsive web design”, creando así una única aplicación adaptada para todo tipo de dispositivos. Por el contrario, la aplicación web ofrece una peor experiencia de uso, puesto que ignora las características del dispositivo y una menor seguridad ya que depende de la seguridad que ofrezca el propio navegador.
Para obtener una idea un poco más clara, la siguiente imagen indica las principales características de cada tipo de aplicación.

4
Características.

Después de analizar cada una de las aplicaciones, se ha decidido desarrollar una aplicación de tipo híbrida, ya que este tipo aprovecha al máximo la versatilidad de un desarrollador web, disminuyendo al máximo el tiempo de realización de la aplicación al reutilizar la mayoría del código. Además de todo esto, el coste económico es mucho menos que una aplicación nativa, punto muy importante a la hora de realizar cualquier proyecto. A continuación se muestra una imagen con las ventajas y desventajas más importantes de las aplicaciones híbridas.

5
Ventajas y desventajas app híbrida.

3.2 Entorno de desarrollo

Para desarrollar la aplicación se utilizará el framework PhoneGap. Este framework permite a los desarrolladores web centrarse en el desarrollo de apps para teléfonos inteligentes de distintas plataformas, teniendo como base un código genérico con herramientas tales como JavaScript, HTML, CSS, y creando una interfaz de funciones foráneas para embeber una vista Web en el dispositivo móvil. De esta forma, por ejemplo, si nuestra aplicación necesita acceder a la cámara del dispositivo, solo tenemos que crear una página HTML5 que haciendo una llamada Javascript nos permita hacer uso de la cámara de cualquier dispositivo independientemente de su plataforma. Con lo que conseguimos ejecutar nuestra aplicación en todas las plataformas del mercado teniendo solo conocimientos de HTML5, CSS3 y Javascript. No tenemos que aprender Java, ni Objective-C, ni ningún otro lenguaje; reduciendo drásticamente el tiempo y por tanto el coste de desarrollo. Con PhoneGap es posible desarrollar aplicaciones para los siguientes sistemas operativos:
  • Android
  • iOS
  • Windows Phone
  • BlackBerry OS
  • Web OS
  • Symbiam
  • Bada
PhoneGap cuenta con dos grandes ventajas al momento del desarrollo: se pueden ejecutar las aplicaciones en nuestro navegador web, sin depender de un simulador dedicado a esta tarea, y por otra parte, tenemos la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQuery Mobile.

3.3 Modificaciones

Respecto a las posibles modificaciones en la base de datos, cabe destacar que no será necesario realizar ninguna modificación, ya que las tablas almacenadas en la base de datos que ya posee la empresa, contienen todos los datos necesarios para rellenar los distintos formularios de las interfaces.

3.4 API Web

Esta aplicación se va a desarrollar a partir de una plataforma Web ya existente, por lo que van a ser necesarios algunos protocolos de comunicación Web Service. Como nos vamos a basar en la web que ya dispone la empresa, podremos utilizar la misma base de datos centralizada, de donde sacaremos información tanto de los usuarios registrados como de las herramientas. También disponemos de las interfaces para crear un nuevo usuario y acceder al sistema si el usuario ya está registrado, para ver las herramientas disponibles mediante ciertos filtros y acceder a ellas, para introducir herramientas nuevas mediante formularios, etc. Por todo esto, no será necesario establecer ninguna nueva Interfaz APIs, ya que con la versión web que nos proporciona la empresa, tenemos suficiente.

4. Documento de arquitectura de la solución

4.1 Conexión con sistemas externos

En este documento se explicará como es la comunicación entre la aplicación desarrollada y los posibles sistemas externos. Al tratarse de una aplicación cliente-servidor, tenemos en la parte del cliente al usuario utilizando el dispositivo móvil, el cual envía información al servidor mediante Internet, tal y como se puede observar en la imagen. Es evidente que si no existe esta comunicación, la aplicación no podría funcionar correctamente.

6
Conexión con el servidor.

Para el funcionamiento de nuestra aplicación, será necesario acceder a diferentes componentes del teléfono, concretamente al sistema de geolocalización. Para ello, el cliente podrá acceder mediante unos plugins que nos ofrece gratuitamente la tecnología PhoneGap, sea cual sea el sistema operativo sobre el que se esté ejecutando la aplicación. Resumiendo, podemos decir que, mediante las APIs de cada sistema operativo, los plugins de PhoneGap conectan con los distintos sensores que tiene el dispositivo. Si en algún momento se quisiera utilizar la aplicación sin conexión, se deberían extraer los datos a través del servidor de aplicaciones y almacenarlos en una base de datos local, teniendo en cuenta siempre, que estos datos podrían estar desactualizados durante el uso de la aplicación por parte del usuario.

4.2 Arquitectura de la aplicación

Una funcionalidad muy importante de nuestra aplicación, es saber la localización de cada herramienta, así como almacenar la nuestra. Para ello será necesario acceder a la información de geolocalización mediante la conexión del GPS. Al tratarse de una aplicación híbrida, esta se desarrolla con estándares abiertos que encapsulada como nativa se ejecuta dentro de un contenedor web (Webkit).

7
Arquitectura PhoneGap.

Las aplicaciones se ejecutan sobre un componente que contiene el navegador. Se creará una aplicación HTML5-JavaScript que se envolverá con un wrapper nativo para el dispositivo. La base de HTML5 se ejecuta dentro del recipiente de la aplicación nativa y usa el motor del navegador del dispositivo (en lugar del navegador), para procesar datos localmente. Con el uso de PhoneGap lo que conseguimos es que el usuario interaccione con él como si fuera un cliente, el cual a la vez se comunica con un servidor de aplicación, que se comunica con un repositorio de datos, para recibir datos. Las aplicaciones PhoneGap no suelen comunicarse directamente con la base de datos, sino que lo hacen a través del servidor de aplicaciones. Respecto al cliente, la lógica de la aplicación está metida dentro de una página HTML, por lo que esta página nunca se descarga de la memoria.

5. Plan de pruebas

5.1 Funcionalidad de la aplicación

Para describir la funcionalidad de la aplicación, vamos a tener que describir alguno de sus apartados, así como las acciones principales que podrá realizar el usuario.
Registro de usuarios
Para poder acceder a todas las funcionalidades de la aplicación, el usuario deberá registrarse mediante un usuario y contraseña. En el caso de que el usuario no esté registrado o sea la primera vez que accede a la aplicación, tendrá que darse de alta indicando algunos datos personales y relevantes para el sistema, como por ejemplo la dirección de correo electrónico.
Visualización de las herramientas
El usuario podrá ver un listado con las diferentes herramientas disponibles. El listado podrá ser ordenador por distintos aspectos:
  • Por distancia: El usuario podrá ordenar este listado dependiendo de la distancia a la que se encuentran las herramientas disponibles de la localización actual del usuario.
  • Por precio: De una manera parecida a la ordenación por distancia, el usuario podrá ordenar la lista dependiendo del precio de las herramientas, de manera que le aparezcan en primer lugar las herramientas más caras, o si lo desea, las más baratas (todos estos aspectos podrán ser configurados por el usuario).
Filtrar fecha de disponibilidad de la herramienta
Otra acción que podrá realizar el usuario, será la de elegir la fecha en la que quiere disponer de la herramienta, así como los días que la utilizará.
Visualización del precio de las herramientas
En esta aplicación se informará de manera clara el precio total que el usuario deberá pagar al dueño de la herramienta.
Visualización del mapa con las herramientas más cercanas
El usuario tendrá la opción de ver un mapa en el que se observará la posición actual del usuario y se marcarán las posiciones de las distintas herramientas disponibles según las características que haya marcado anteriormente el usuario.
Avisos
Como en cualquier aplicación, los avisos son una parte muy importante de la misma, ya que permiten al usuario estar al día de todos los movimientos que puedan ocurrir. Así pues, el sistema notificará al usuario de los siguientes eventos ocurridos:
  • Si el usuario tiene alguna herramienta disponible para ser alquilada y otro usuario la solicita, se le notificará de manera que pueda aceptar esta solicitud o rechazarla.
  • Siguiente con el caso anterior, si la solicitud es aceptada, el usuario que ha mandado esta solicitud será informado de la decisión del dueño de la herramienta. De esta manera tanto el usuario solicitante como el dueño podrán ponerse en contacto.
Solicitud de la herramienta
El paso final que tendrá que realizar el usuario para finalizar la solicitud de una herramienta, será presionar el botón de “Solicitar” para que la solicitud del usuario sea enviada al propietario de la herramienta que haya elegido.
Alquilar herramienta
En esta aplicación, el usuario no solo puede buscar herramientas, sino que también puede ofrecer las herramientas que el desee a los otros usuarios para que puedan solicitarlas. Para poder ofrecer una herramienta para alquilarla, el usuario deberá crear la ficha de dicha herramienta rellenando, entre otros, los siguientes campos obligatorios: Nombre de la herramienta, descripción, fotografía de la herramienta, posición GPS, precio por día, periodo de disponibilidad. Una vez rellenados todos estos campos, el usuario podrá publicar la herramienta para alquilarla.
Comentarios
Una vez finalizado el periodo del alquiler de la herramienta, los dos usuarios podrán dejar comentarios, para que otros usuarios puedan visualizar su opinión. Esta es una buena forma de que otros usuarios puedan tener más confianza a la hora de alquilar una herramienta, ya que tendrán información de primera mano tanto de la herramienta, como del dueño. También es una buena forma de que el dueño de la herramienta acepte o rechace la solicitud, ya que tendrá comentarios de antiguas experiencias con el usuario demandante.

5.2 Bloque de pruebas

Una de las necesidades para las pruebas es la necesidad de tener un emulador o entorno de pruebas para poder probar lo que se está desarrollando. Esta necesidad provoca dificultades. Por este motivo, se acude a las pruebas unitarias, que permiten dividir el desarrollo, con lo que se puede probar de manera desacoplada y desarrollar partes de nuestra app sin la necesidad de hacer pruebas en el emulador, como pueden ser los accesos a base de datos o bien la lógica de negocio. Las pruebas que hacemos tienen que estar contextualizadas, es decir, pensando en reproducir lo que realmente ocurre al usuario cuando utiliza la app.

IDENTIFICACIÓN Y REGISTRO DE USUARIOS

1) Registro del usuario. El usuario deberá introducir todos los datos necesarios para su registro, incluyendo el usuario que quiera utilizar para acceder y una contraseña

  • Resultado esperado: El usuario quedará registrado y podrá acceder al sistema con el usuario y contraseña que ha introducido en el registro.
2) Logeo del usuario. Si el usuario está registrado, deberá logearse introduciendo su usuario y contraseña para acceder al sistema

  • Resultado esperado: El usuario accederá a la página principal de la aplicación. En el caso de que introduzca datos erróneos, el sistema informará al usuario mediante un mensaje de error.

AÑADIR COMENTARIO

1)El usuario añadirá un comentario a la herramienta que ha alquilado durante cierto tiempo para valorar su experiencia

  • Resultado esperado: Una vez el usuario haya escrito el comentario, este se guardará en la base de datos y se mostrará para que los usuarios que elijan esa misma herramienta, sepan su experiencia.
2)El usuario añadirá un comentario al usuario al que le ha prestado una herramienta para valorar su experiencia

  • Resultado esperado: Una vez el usuario haya escrito el comentario, este se guardará en la base de datos y se mostrará para que los usuarios que elijan solicitar una herramienta de ese usuario, sepan la experiencia de anteriores usuarios.

ALQUILAR HERRAMIENTA PROPIA 1) Ofertar una nueva herramienta. El usuario introducirá todos los datos necesarios para dar de alta su herramienta, introduciendo la localización de esta y las fechas y tiempo en las que está disponible para ser alquilada.

  • Resultado esperado: La herramienta quedará registrada y otros usuarios podrán verla y decidir si quieren alquilarla. En el caso de que introduzca mal alguno de los datos, el sistema informará al usuario con un mensaje de error sin terminar el proceso.

LISTAR HERRAMIENTAS DISPONIBLES

1) Mostrar una lista de las herramientas disponibles. El usuario elegirá la condición por la que quiere que se ordenen las herramientas (precio o localización).

  • Resultado esperado: Una vez elegida la opción por la que quiere ordenar las herramientas, el sistema mostrará una lista con todas las herramientas disponibles en la fecha elegida por el usuario y ordenadas por el factor elegido previamente. En el caso de que no existan herramientas que cumplan las condiciones que ha pedido el usuario, se le mostrará un mensaje al usuario indicándoselo.

AVISOS

1) Solicitar una herramienta.

  • Resultado esperado: Una vez el usuario decide solicitar una herramienta determinada, el dueño de dicha herramienta recibirá una notificación y un email con la solicitud de la herramienta y todos los datos del usuario que la solicita.
2) Aceptar/rechazar solicitud de herramienta

  • Resultado esperado: Cuando el usuario haya recibido la notificación de que hay un usuario que ha solicitado su herramienta, podrá aceptar o rechazar la solicitud. En el caso de que la acepte, el usuario que solicitó la herramienta recibirá una notificación y un email con todos los datos del dueño de la herramienta para que pueda ponerse en contacto con el.