Entrar al aula
×

El proceso de diseño de una APP con Phonegap

             Por ciclo de vida, entenderemos cual es el proceso conceptual y técnico que debemos afrontar a la hora de poner en marcha una APP. Para ello, distinguiremos cinco pasos fundamentales:

 

Prototipo o interfaz gráfica

              En primer lugar, debemos reflexionar sobre qué queremos que haga nuestra APP. Para ello, disponemos de dos métodos que pueden ayudarnos a clarificar las ideas:

 


Es importante destacar que antes de programar una línea de código, visualicemos en papel o mediante una herramienta de prototipado el resultado al que queremos llegar.

 Prototipado. Un poco de teoría.   

¿En qué consiste?
El prototipado modela el producto final y permite efectuar un test sobre determinados atributos del mismo sin necesidad de que está disponible. Se trata, simplemente, de testear haciendo uso del modelo.
¿Cómo lo llevo a cabo?
Se comienza elaborando un prototipo del producto final: qué aspecto tendrá, cómo funcionará,...Para muchas interfaces de usuario, este modelo puede resultar tan simple como unos dibujos con lápiz y papel o tan complejo como el propio código operativo final. Para interfaces de hardware o estaciones de trabajo, el modelo puede consistir en maquetas de espuma, caucho, cartón o cartulina. Cuanto más próximo se encuentre el prototipo al producto real, mejor será la evaluación, si bien se pueden obtener magníficos resultados con prototipos de baja fidelidad.
¿Cuándo debería usar esta técnica?

Esta técnica puede ser utilizada en cualquier etapa del desarrollo. A medida que el proceso progresa y el producto se completa, el prototipo ha de abarcar, cada vez más las características del producto final. Llegados a un punto, la construcción de prototipos adicionales resultará menos eficiente que usar las construcciones iniciales para el producto.

Hay un cierto número de términos que se oyen en conjunción con los métodos de prototipado. Los siguientes son una muestra de algunas de estas distinciones

Prototipado rápido (Rapid Prototyping)
Metodología de diseño que desarrolla rápidamente nuevos diseños, los evalúa y prescinde del prototipo cuando el próximo diseño es desarrollado mediante un nuevo prototipo.
Prototipado reutilizable (Reusable Protyping)
También conocido como "Evolutionary Prototyping"; no se pierde el esfuerzo efectuado en la construcción del prototipo pues sus partes o el conjunto pueden ser utilizados para construir el producto real. Mayormente es utilizado en el desarrollo de software, si bien determinados productos de hardware pueden hacer uso del prototipo como la base del diseño de moldes en la fabricación con plásticos o en el diseño de carrocerías de automóviles.
Prototipado Modular (Modular Prototyping)
También conocido como Prototipado Incremental (Incremental prototyping); se añaden nuevos elementos sobre el prototipo a medida que el ciclo de diseño progresa.
Prototipado Horizontal (Horizontal Prototyping)
El prototipo cubre un amplio número de aspectos y funciones pero la mayoría no son operativas. Resulta muy útil para evaluar el alcance del producto, pero no su uso real.
Prototipado Vertical (Vertical Prototyping)
El prototipo cubre sólo un pequeño número de funciones operativas. Resulta muy útil para evaluar el uso real sobre una pequeña parte del producto.
Prototipado de Baja-fidelidad (Low-fidelity Prototyping)
El prototipo se implementa con papel y lápiz, emulando la función del producto real sin mostrar el aspecto real del mismo. Resulta muy útil para realizar tests baratos.
Protipado de Alta-fidelidad (High-fidelity Prototyping)
El prototipo se implementa de la forma más cercana posible al diseño real en términos de aspecto, impresiones, interacción y tiempo.

 

 Papel y lapicero

                        Basta sentarse, pensar y plasmar en un papel lo que queremos que sea la aplicación. No necesitamos nada más que imaginación y las ideas claras. Tendremos que tener en cuenta los componentes que queremos utilizar, la navegación entre pantallas y la funcionalidad que debamos imprimir.

Haz click para ver un ejemplo de prototipo

Herramientas de prototipado online

                            Vamos a destacar una serie de herramientas online, que nos va permitir diseñar la interfaz gráfica previa de nuestra APP, con una aproximación real al resultado final. Todas ellas contemplas planes de pago, pero permiten una cuenta gratuita para poder crear al menos un proyecto. Cualquiera de estas herramientas nos permitirán realizar un prototipo para esa APP que tenemos en mente.

   

 

Modelo de datos o lógica

A la hora de establecer la lógica de la APP, debemos considerar varias situaciones

 

En esta imagen observamos un diagrama de flujo de navegación

 

Es muy importante establecer claramente el flujo de navegación de nuestra APP sobre papel o mediante alguna herramienta online. El usuario final debe tener claro donde navega y hacia dónde, y cómo regresar a un estado previo

Codificación de la lógica según la tipología de la APP

Lógica en una APP nativa
En una APP nativa, la lógica de datos y presentación vendrá determinada exclusivamente por el lenguaje de programación nativo asociado al sistema operativo. Por tanto, en un terminal Android, codificaremos mediante Java la lógica que requiera la APP. En un Iphone, codificaremos mediante Objetive C. Y en Windows Phone utilizaremos C#.
Lógica en una Web APP
En una Web APP, la aplicación no deja de ser una aplicación web alojada en un servidor remoto, adaptada a la resolución de la pantalla. En este caso, el responsable de la lógica será el lenguaje de script en lado servidor, como puede ser PHP, ASP o JSP, unido a un lenguaje de manipulación del DOM, como es JavaScript.
Lógica en una APP híbrida
En una APP híbrida, como la resultante de utilizar PHONEGAP, la lógica se centrará principalmente en el lado cliente, con JavaScript. Mediante este lenguaje, podremos realizar persistencia con una base de datos nativa, como SQL LITE, además de crear nuestra propias clases, con lo que organizaremos un core propio de la APP. Además, para hacer uso de un servicio externo, también será imprescindible hacer uso de JavaScript para realizar las llamadas y recogidas de la información. Por tanto JavaScript se erige como el árbitro fundamental en el establecimiento de la lógica o modelo de datos.

¿Qué debe hacer nuestra lógica o modelo de datos?

Debemos analizar qué requisitos tiene nuestra APP. Por ejemplo, si consideramos una APP híbrida realizada con PHONEGAP para convertir divisar, tendremos que disponer de funciones programáticas en JavaScript que realicen el cálculo de conversión. También nos hará falta el factor de conversión entre divisas. Esta información, si nuestra APP va ser estática, podemos almacenarla en la base de datos nativa. Si, por el contrario, queremos que la APP sea dinámica y refleje realmente el devenir del cambio entre divisas, tendremos que comunicar la APP con un servicio externo remoto, siendo JavaScript el vaso comunicante entre la APP y el servicio.

Resumiendo, grosso modo, debemos:

Estas funciones representan el pseudocódigo necesario para una APP híbrida de conversión de monedas

 

 

Implementación

Una vez que hemos establecido una interfaz gráfica acorde con las pretensiones de la APP mediante un prototipo y tenemos claro el flujo de navegación, además de la lógica que hará falta desarrollar mediante pseudocódigo, llega la hora de la verdad. Debemos ponernos manos a la obra y codificar los puntos anteriores, además de dotarle de la apariencia gráfica deseada.

Aquí entra en juego la capacidad de recursos disponibles. Diferenciamos según seas desarrollador o no lo seas:

No soy desarrollador

En este caso ya tienes mucho ganado. Conoces la apariencia que deseas que tenga tu APP, también sabes el flujo de navegación que te gustaría que tuviera y, por si fuera poco, has sabido desgranar las funciones programáticas básicas que requirirá la APP (Puede que este último paso no hayas sido capaz de darlo, pero sí los anteriores). 

Debes contactar con un desarrollador o empresa proveedora para que materialice tu anhelada APP. El material que les vas a proveer será fundamental para que ellos sepan cómo implementar la aplicación.

Soy desarrollador
Si la APP debe ser nativa, tendrás que hacer uso de código nativo y emplearlo adecuadamente , bien sea Java, bien sea Objetive C, bien sea C#. Para cada plataforma elegida, utilizarás los entornos de desarrollo adecuados:
  • ANDROID: Eclipse, ADT, Android Studio...
  • IOS: XCode...
  • WINDOWS PHONE: Visual Studio, MicroSoft Blend...

Si la APP debe ser Web APP, entonces elegirás las herramientas habituales en desarrollo web:

  • Editor gráfico: Adobe Dreamweaver...
  • Editor código/gráfico: Según sea el lado servidor, optarás por Zend Studio, Eclipse o Netbeans, Visual Studio...o, si eres puritano y utilizas únicamente editores de texto, harás uso de Notepadd ++ o programas similares
  • Framework JavaScript: Jquery Mobile, Senda Touch, Xui...

Si la APP será híbrida, y optas por PHONEGAP, te hará falta:

  • Descargarte el API de PHONEGAP o su instalador
  • Utilizar para cada plataforma, el entorno de desarrollo adecuado: Eclipse, XCode, Visual Studio...
  • Framework JavaScript: Jquery Mobile, Senda Touch, Xui...

 

En los sucesivos temas, centrándonos en APPS híbridas, desgranaremos por partes y con ejemplos cómo hacer uso del API de PHONEGAP, cómo utilizar generadores de plantillas con Jquery Mobile y cómo implementar la lógica en JavaScript, de modo OFFLINE u ONLINE

Generación de binarios y distribución en los market places

Si nuestra APP es nativa o híbrida, una vez finalizada la implementación, tendremos que generar los binarios necesarios para subirlos a los market correspondientes de cada plataforma. A día de hoy, la mayor parte de las APP publicadas se realizan en estos tres puntos de distribución:

Será necesario que nos demos de alta como desarrolladores en cada uno de dichos market, y realizar los pasos que nos exijan en cada uno de ellos. Tienen características comunes, que son:

 

                              Características comunes a la hora de publicar en los market places

Mantenimiento y actualización de la APP en los market places

Una vez subida la APP al/los stores o market places, surgirán nuevas ideas, habrá que corregir errores no detectados, querremos agregar mejoras sustanciales... habrá mil motivos para actualizar la APP. Los pasos a proceder nos obligarán a repetir los pasos previos, de modo que iteraremos el proceso que nos llevó a crear la primera versión de la APP.