Metodología de desarrollo aplicaciones móviles

Texto completo

(1)

INSTITUTO POLITECNICO NACIONAL

ESCUELA SUPERIOR DE INGENIERÍA 

MECANICA Y ELECTRICA 

METODOLOGÍA DE DESARROLLO

APLICACIONES MÓVILES

MEMORIA DE EXPERIENCIA PROFESIONAL

QUE PARA OBTENER EL TÍTULO DE

INGENIERO EN COMUNICACIONES Y ELECTRÓNICA

PRESENTA

MIGUEL DANIEL RAMOS MARTÍNEZ.

ASESOR: ING.CATALINA PATIÑO GALLEGOS.

(2)
(3)

INDICE GENERAL

INDICE GENERAL

 ... 3

 

INDICE FIGURAS

 ... 4

 

OBJETIVO

 ... 5

 

JUSTIFICACIÓN

 ... 6

 

CAPÍTULO I – INTRODUCCION

 ... 7

 

CAPITULO II - METODOLOGIA PARA DESARROLLO MÓVIL

 ... 8

 

MAPA MENTAL ... 9 

MODELADO DE NEGOCIO ... 10 

ANÁLISIS Y DISEÑO ... 11 

Bocetos

 ... 12

 

Wireframing

/

Mockup

 ... 13

 

Prototipado

 ... 14

 

Proceso

 ... 14

 

ANÁLISIS TIEMPO DESARROLLO Y COSTOS

 ... 15 

Delimitación del Alcance

 ... 17

 

Complejidad Tiempo y Costo

 ... 19

 

Plan de trabajo

 ... 19

 

INICIANDO EL PROYECTO ... 21 

Contexto ... 22

 

IMPLEMENTACIÓN ... 23 

FRONT END ... 23

 

BACK END ... 25

 

MIDDLEWARE ... 25

 

TECNOLOGIAS ... 26

 

BASES DE DATOS ... 27

 

PUBLICACIÓN ... 28 

APPSTORE (iOS) ... 28

 

GOOGLE PLAY STORE(Android) ... 31

 

BLACKBERRY APP WORLD(BB10) ... 33

 

MARKETPLACE DE WINDOWS PHONE(Windows 8) ... 36

 

CONCLUSIONES

 ... 39

 

GLOSARIO

 ... 40

 

(4)

INDICE FIGURAS

Figure 1 Diagrama de Actividades ... 8 

Figure 2 Flujo de proceso ... 9 

Figure 3 Ejemplo de plantilla para bocetado ... 12 

Figure 4 Ejemplo aplicación de control de llamadas telefónicas usando Balsamiq 

Mockups ... 13 

Figure 5 Ejemplo de un prototipo ... 14 

Figure 6 Tabla de estimación de esfuerzo ... 18 

Figure 7 Ejemplo de tablero en trello ... 23 

Figure 8 Pantalla de inicio de TestFlight ... 24 

Figure 9 Maque, herramienta que simula servicios y acelera su integración. ... 25 

Figure 10 Código de ejemplo de UIImageView ... 30 

Figure 11 Correo de bienvenida a BlackBerry App World ... 34 

(5)

OBJETIVO

(6)

JUSTIFICACIÓN

Debido a que existe poco o nula información completa en español que nos permita conocer el proceso de creación de aplicaciones móviles. Lograr crear una sola aplicación que funcione en cada plataforma y configuración de pantallas es un reto.

Este trabajo permitirá compartir la experiencia de varios años en el flujo de trabajo del mundo de los móviles, mostrar los trucos y atajos que he aprendido en esta jornada laboral.

El desarrollo de aplicaciones móviles ha crecido en estos últimos 5 años con la aparición de los smartphones y las tablets, en este mundo de movilidad donde la gente esta o intenta estar siempre conectada, en un mundo de social media y de marketing digital y como en el proceso de verse sumergido, en este conjunto de patrones, procesos, y métodos para ir resolviendo las necesidades de este nuevo mercado de aplicaciones donde lo que se vende son experiencias más que aplicaciones por si mismas. Donde el tiempo de respuesta, el presupuesto, las habilidades técnicas de las empresas y de los ingenieros están siendo retadas a diario en un mundo global y digital donde el móvil es ya un elemento esencial en el día a día.

Nuestro reto es lograr en la creación de aplicaciones móviles hacer eficiente:

● El uso de los recursos

● El presupuesto

● El trabajo en conjunto de creativos, ingenieros, el personal de marketing y/o ventas en ofrecer una solución de calidad.

(7)

CAPÍTULO I – INTRODUCCION

Egresado desde el 2000, inicialmente especializado en el desarrollo e implantación de soluciones de redes con UNIX, Novell, Windows NT y Linux. Configuración de servidores desde instalación del sistema operativo hasta la puesta en marcha con clientes en red, configuración de servicios de DHCP, DNS, Firewall, correo y proxy de internet.

La configuración de servidores de aplicaciones se hizo simple, rutinaria y comencé a interesarme en las aplicaciones en el server, de cómo crearlas. Ahí inició el aprendizaje de tecnologías como Java, vinieron también .NET, algo de Access, SQL, MSSQL y el inicio de creación aplicaciones comerciales comenzó. Sistema de control de básculas electrónicas y adquisición de datos por puerto RS232, administración de aplicaciones .NET.

Instructor de estas tecnologías en la Dirección de Informática del IPN, combinado con la actividad de FreeLancer que permitió sumergirme en temas avanzados de JEE y .NET, en temas de web con HTML5, CSS y JS, así como el diseño con uso de herramientas de Macromedia ahora Adobe Systems. El uso de estándares web (HTML, CSS) en conjunto de varios frameworks como Struts, Java Server Faces permitió dar soluciones más rápidas y eficientes.

El desarrollo de aplicaciones web enriquecidas sufrió un gran cambio con el surgimiento de Adobe Flex, tecnología en la cual me especialice y me hice experto.

La versatilidad de Adobe Flex y su sencilla integración con múltiples soluciones como Spring, JEE ,.NET o Ruby me permitió crear proyectos en el entorno empresarial.

Los desarrollos de aplicaciones interactivas comenzó y la solicitud de aplicaciones móviles llegó permitiendo desarrollar nuevas habilidades y aprender nuevos procesos.

(8)

CAPITULO II - METODOLOGIA PARA DESARROLLO MÓVIL

Proceso para el desarrollo de software, también denominado ciclo de vida del desarrollo de software es una estructura aplicada al desarrollo de un producto de software. Hay varios modelos a seguir para el establecimiento de un proceso para el desarrollo de software, cada uno de los cuales describe una enfoque diferente para distintas actividades que tienen lugar durante el proceso.1

Las actividades F1 que se realizan para el desarrollo móvil son similares, pero el enfoque principal será en el desarrollo iterativo e incremental centrado en la construcción de secciones reducidas de software, para facilitar así la detección de problemas de importancia en fases tempranas.

Los procesos iterativos pueden ayudar a desvelar metas del diseño en el caso de clientes que no saben cómo definir lo que quieren.

En el diagrama se muestran las actividades en las que nos centraremos:

 

Figure 1 Diagrama de Actividades 

 

 

      

1

(9)

MAPA MENTAL 

En el diagrama F2 se detalle el mapa completo del flujo de trabajo de cada área. 

 

(10)

MODELADO DE NEGOCIO 

El punto inicial del desarrollo de cualquier aplicación móvil es identificar el problema que se desea resolver, identificarlo claramente qué es lo que se busca y reflejarlo en la solución. Algo común que sucede cuando no se tiene experiencia en el desarrollo de las aplicaciones es comenzar pensando en implementar varias características se desean tener en la aplicación, sin ver qué hay que centrarse en una característica principal de la aplicación, Es decir lo que usualmente se conoce con un Producto Mínimo Viable ( MVP de Mínimum Viable Product) teniendo como eje la solución de este elemento inicial, es decir identificar la característica que le da más valor a nuestra aplicación, identificar la característica que permitirá que nuestra aplicación se distinga.

Aun siendo que la aplicación sea pensada por un tercero (algún cliente que nos solicite el requerimiento) o quizá por uno mismo. El hablar con la persona que:

● Tiene identificada una necesidad concreta

● Conceptualizada ya una solución

● Que desee migrar una aplicación ya existente al mercado mexicano o latino( lo que conoce como tropicalización2)

Se debe priorizar esa característica sobre la cual nuestra aplicación girará.

Esto es primordial porque permitirá saber:

● Que características agregar o no.

● Si deben agregarse a la aplicación o se dejan para una distinta que se centre en estas nueva característica identificada.

● Si las aplicaciones sean complementarias y se entregue un MVP más rápido.

Es posible que en este paso se pueda seleccionar la tecnología en la que se va a construir la aplicación, ya sea por estadísticas de uso, usuarios de un nicho ya identificado o quizá por aspectos meramente financieros.

      

(11)

ANÁLISIS Y DISEÑO 

Al tener identificado el problema a resolver en cualquiera de los escenarios indicados, se recomiendan las siguientes actividades:

● Creación de bocetos (Sketching)

● Wireframing/Mockups

● Prototipado (Prototyping)

No es una regla realizar los 3 procesos, depende de varios factores como el tiempo o el presupuesto.

Lo importante es realizar el análisis de la aplicación, sus pantallas, el flujo de navegación un proceso que va dirigido por la experiencia de usuario (UX de User eXperience), centrado en el usuario y en lo que la aplicación resolverá.

Por ejemplo, si nuestra aplicación dará la ubicación de la gasolinera más cercana, esperamos que el usuario de la aplicación no deba navegar un gran número de pantallas para alcanzar la información que está buscando y ayudarnos de un diseño que permita que con el menor número de toques de pantalla pueda ver lo que busca, quizá en una lista o en un mapa, que sea rápido y simple visualizar lo que está buscando y no se pierda en el proceso.

Si al abrir una aplicación se utiliza alguna de las características del Smartphone, ejemplo geo localización, esta simple acción se mostrará la información que se está buscando, se simplifica el uso y se mejorará la experiencia del usuario en la aplicación.

Al dedicarle tiempo a la creación del sketch o al mockup de nuestra aplicación permitirá comenzar de una forma rápida y simple, lo que deseamos lograr , involucrar lo más pronto posible al cliente para validar los diseños, hacer estas iteraciones hasta con nosotros mismos, inventar usuarios, crear historias de uso y nos ayudará a tomar la decisión de qué elementos agregar y cuales no.

Expliquemos en qué consiste cada uno de estos tres elementos fundamentales en el proceso de diseño de una aplicación

● Bocetos (Sketching)

● Wireframing/Mockup

(12)

Bocetos

La intención de un sketch es realizar el bosquejo de diferentes ideas basado en dibujos a mano alzadaF3, sin la intención de ser un trabajo terminado (colocar todos los elementos o pantallas de aplicación) y establecer una composición de ideas para ahora o para después.

Este bosquejo de ideas, es un elemento de inicio para los creativos, que sirve como base o referencia para siguientes fases. Muchas de estas ideas quizá no lleguen a la aplicación final, pero los elementos básicos(la esencia de la aplicación estará representada en estos dibujos).

 

(13)

Wireframing

/

Mockup

 

Aunque en ocasiones se pueden considerar 2 actividades distintas tiene la misma base, solo los diferencia que habrá un diseño gráfico más refinado en los mockups.

La intención de esta fase de diseño se centra en los aspectos funcionales y la distribución, notas de intención o funcionalidad, sistema de navegación, y como los elementos de la interfaz gráfica trabajan(componentes) centrado primordialmente en el uso, sin darle mucha importancia a estilos, guía de colores o a los gráficos.

 

Figure 4 Ejemplo aplicación de control de llamadas telefónicas usando Balsamiq Mockups 

Existen a una gran diversidad de herramientas para crear los mockups. Estas herramientas pueden incluir diseño interactivo, exportación a HTML5, en el flujo de trabajo ayudan a mostrar como se pretende que usuario interactúe con la aplicación.

Una recomendación es mantener un diseño limpio, sin tomar un estilo especifico, es decir no enfocado a una plataforma en particular, el usuario en la mayoría de los casos considera que ese es el arte final y si lo se presenta simple, enfocado al contenido y a la arquitectura de la

(14)

Prototipado

Se toma como base el wireframe o mockup de la aplicación para simular el arte final, textura, colores, guías de diseño, se obtiene una versión simplificada de la solución o versión ligera, que logra capturar el diseño o aspecto esperado de la versión final, así como también verificar posibles errores en el flujo o el diseño.

 

Figure 5 Ejemplo de un prototipo 

Proceso

 

El tiempo, el dinero y la complejidad definirá si todas las tareas qie serán realizadas, una actividad que es esenciales:

Los mockups o wireframes, se preguntarán ¿Por qué? , la respuesta es simple:

1. Se requiere entender el problema a resolver.

El diseño del mockup permitirá delimitar funcionalidades (características) que la aplicación tendrá, numero de pantallas, flujo – navegación , componentes (personalizados o los definidos en cada plataforma) para resolver y dar la mejor experiencia de usuario posible.

2. Se necesita acotar la solución.

(15)

decisión con el cliente sobre qué incluir o qué dejar fuera para ésta o futuras versiones de la aplicación.

3. No es necesario arte final

Se está diseñando centrados en los aspectos funcionales, no en las guías de colores, el

aspecto constantemente puede ser modificado por el cliente, pero no así la funcionalidad

el elemento principal de la aplicación se crea en esta fase y se mantendrá hasta el fin del proyecto.

ANÁLISIS TIEMPO DESARROLLO Y COSTOS

¿Qué hay con respecto a los tiempos?

¿Cuánto tiempo lleva esta fase y sus iteraciones?

El primer borrador de wireframes se logra concretar entre medio y un día de trabajo (jornada de 8 horas)T1, difícilmente aun siendo un experto en el diseño se logra entregarlo a la primera iteración, se requerirá la retroalimentación del usuario o de un compañero del equipo para afinar el diseño, hay que recordar que estamos haciendo aplicaciones para una audiencia distinta a uno mismo y lo que funciona en nuestra perspectiva no es regla que aplique para todos.

Iteración/Draft Horas

1ra Iteración Wireframe 4 a 8

2da Iteración Wireframe 2 a 6

T1 Tiempos para Wireframes

Una recomendación es probar nuestras hipótesis lo más pronto posible, esto permitirá fallar rápido pero tener mejor asertividad en la propuesta de interfaz, diseño, navegación o componentes.

Una técnica simple es exponer nuestro trabajo a gente que no cuenta con el contexto de la aplicación y así validar la hipótesis de diseño, pantallas , flujos y quizá hasta funcionalidad.

(16)

Ir a un Starbucks pedirle a alguna persona que nos ayuda a cambio de comprarle algún café o galleta, esta validación será importante, la forma que el equipo interno ha conceptualizando la aplicación es distinta a la forma que la pueda percibir otra persona o grupo de personas. Entre mayor repitamos este proceso , tendremos mayor información o validación de lo que hasta ahora se ha hecho.

Después, ya estos ajustes, se recomienda presentarlo a un grupo de personas más cercanas al público meta de la aplicación, estas personas permitirán validar:

● Al usuario de la aplicación

● Funcionalidad

Esta información permitirá saber si es requerido cambiar algún aspecto del proyecto.

Recuerda que los usuarios están acostumbrados ya a ciertos usos y patrones, cambiar radicalmente esto puede ser riesgoso y que la interfaz no termine siendo intuitiva o responsiva como nosotros podríamos pensarlo.

¿Qué hay de los otros 2 elementos?, el prototipado es lo mas cercano que tendremos antes de una aplicación funcional pueden ser simples imágenes vinculadas con arte final para mostrar la interactividad, algunos botones responsivos, y siempre corremos el riesgo de tener un prototipo también terminado, que el cliente pueda inclinarse a pensar que no hace falta nadas mas y que ya esta todo listo para el día de mañana.

Los bosquejos son algo esencial en otras industrias como por ejemplo en el cómic, en las películas son parte del proceso creativo del diseñador. Hay quien tiene esa escuela muy arraigada, y además una facilidad para completar sus dibujos, en mi experiencia, conozco un par de personas que son increíblemente productivos con el papel y lápiz, además que es un proceso de unas cuantas horas, siempre tendremos a mano un lápiz y un papel.

Si una idea viene a tu mente, dibújala y quizá estés creando la siguiente característica que destaque en esta carrera de creación de experiencias móviles.

(17)

Delimitación del Alcance

 

Nuestra siguiente herramienta será una hoja de cálculo, donde desglosaremos:

● Funcionalidades de cada pantalla

● Detallando elementos de UI

● Servicios

● Integración de su integración

● Pruebas

utilizaremos las siguiente clasificación de complejidad en las tareas T2

Categoría

Very Easy

Easy

Normal

Complex

Very Complex

T2 Tabla Complejidad de tareas

A cada categoría le asignaremos un tiempo en horas, tomaremos como base 8 horas, de

inicio e iremos aumentando hasta 40 horas hasta completar cada elemento de nuestra

clasificación.

La tabla de categoría contra tiempo base

T3

, un ejemplo puede ser así:

Categoría Horas

Very Easy 8

Easy 16

Normal 24

Complex 32

Very Complex 40

(18)

Estos números no son ni fijos ni definitivos, son sólo un inicio , una referencia.

Algo interesante de esta métrica, es que cuando alguna tarea sea muy compleja, quizás le asignamos un valor de 2, que en sentido estricto son 2 semanas hora/hombre pero se lee menos tiempo, aspecto psicológico quizá, la última decisión es tuya.

En mi experiencia un cliente al ver la descripción se centrará en el total de horas, no en que una tarea llevará 15 días terminarla. Haciendo el desglose de tareas por pantalla tendremos el total de esfuerzo en horas para las pantallas, los componentes y los servicios.

Agregaremos una tabla F6 más para obtener el esfuerzo en días, semanas y meses, tanto para 1 recurso (llámese Diseñador o Desarrollador) hasta 4 recursos , esto dará un panorama claro de cuánto tiempo se llevará construir la aplicación. Y se contara con información suficiente para la toma decisiones en cuanto a recursos, costos, tiempos.

 

(19)

Complejidad Tiempo y Costo

Las tres variables de un desarrollo son

● Tiempo

● Costo

● Complejidad3

Estos 3 elementos son dinámicos y complementarios.

Si el costo es fijo, las variables a cambiar serán entrega en un mayor tiempo o entrega con una reducción funcionalidad.

Si el tiempo es fijo , se reduce funcionalidad o se aumenta recursos( conlleva un mayor costo) para salir en tiempos de entrega acordado. Aquí juega mucho el trabajo en equipo ya que alguien de ventas por cerrar la venta, prometa entregar en un tiempo no realista (improbable) a un cliente y entonces todo es para ayer.

En el caso que las características de la aplicación sean inamovibles, se debe considerar si aumentamos el tiempo si nos ha quedado corto y esto de forma directa impacta en los costos.

El hacer una buena estimación es todo un arte y es subjetivo, depende completamente de la experiencia de quien la crea, así como del equipo que hará las tareas.

En el desarrollo de software es de los errores más comunes, del que hay que aprender rápido, porque implica 2 elementos centrales. Dinero y Reputación , lo segundo es lo más valioso porque hará que llegue más lo primero.

Terminada la estimación, ¿Qué es lo que sigue? El plan de trabajo.

Plan de trabajo

El plan de trabajo es el arte de asignar tareas, vincularlas coherentemente, en este proceso eliminar dependencias y posibles tiempos muertos, generar entregables tangibles para cada tomador de decisión( stakeholder 4: cliente , desarrollador o diseñador).

Estos entregables se recomienda tenerlos en periodos cortos (milestone5) , cada milestone se recomienda de 2 semanas , así tendremos periodos reducidos y en caso de algún retraso que se tenga, el tiempo para retomar cada hito apegado al plan de trabajo, ahí es donde cada individuo

      

3 Asociando número de tareas o características a implementar

4Quienes pueden afectar o son afectados por las actividades de una empresa

(20)

juega un rol importante al tener una comunicación clara y eficaz con el equipo de trabajo y metodologías como Scrum, Extreme Programming incluso Team Software Process ayudan a enfocar los esfuerzos en cada entrega.

Este plan se puede hacer en otra hoja de cálculo, o incluso con una herramienta como MS Project. El éxito de estar al día con el plan de trabajo, no esta en la herramienta sino en el equipo que se compromete a tener cada entregable en tiempo y forma. Con el Vo.Bo. del cliente o del equipo es hora comenzar a crear nuestra aplicación.

Antes de continuar, recordarán que los prototipos dan una versión real del aspecto final de nuestra aplicación. Hay, habrá y seguirán existiendo clientes que son extremadamente visuales y que requerirán de este artefacto para continuar incluso antes del plan de trabajo.

La valoración está en el cliente y en nosotros mismos; si no es claro que se va a construir, esto traerá retrasos, salidas tarde del trabajo, fines de semana pegados a la computadora y estoy seguro que nadie desea que esto pase.

(21)

INICIANDO EL PROYECTO  

Antes de todo, contar con un control de versiones debe ser primer paso incluso antes de los bosquejos, mockups o prototipos. Existen varias opciones como por ejemplo SVN o Git, se recomienda Git por ser el menos invasivo es decir sólo tendremos un directorio llamado .git el la raíz de nuestro proyecto(directorio donde se que llevará la información del control de cambios) , a diferencia de SVN que creará un directorio .svn en cada carpeta que exista en nuestro repositorio( directorio con el mismo propósito).

Git se instala fácilmente en cualquier sistema operativo y en un par de días usándolo son suficientes para el día a día.

El control de versiones permitirá llevar el tracking de cambios y ayudará al trabajo en paralelo por los integrantes de equipo y/o quien tenga acceso al repositorio.

Dos opciones de control de cambios son

● Bitbucket

● Github

Bitbucket 

Bitbucket permite la creación ilimitada de repositorios públicos (repos a los cualquier persona tiene acceso) y a repositorios privados (sólo un grupo selecto tiene acceso).

El acceso privado está limitado a 4 usuarios y en términos de proyectos comerciales esta limitadísimo , para repositorios de Pruebas de Concepto (POC's) viene bien y no es una limitante.

Bitbucket utiliza tanto Git y Mercurial (otro controlador de versiones) en su control de versiones.

Si se envía invitaciones a que otros usuarios se suscriban a usar el servicio, bitbucket agregara el acceso para un usuario más por cada invitación y registro conseguido.

Github 

Github permite la creación ilimitada de repositorios públicos pero no existe opción de repos privados.

En ambos casos Bitbucket y Github son las versiones gratuitas. Para mayor información pueden consultar los sitios de cada uno de ellos

● http://github.com

(22)

La relación costo/beneficio hace que el pago mensual o anual de control de versiones sea un producto básico en nuestro proceso de desarrollo de software.

Tener el acceso a el repositorio de código vía web o vía consola y además por ejemplo, en el caso concreto de Desarrollo móvil con Phonegap, se tiene un servicio de construcción de aplicaciones en la nube integrado a Github6.

Este servicio permitirá reducir el tiempo de construcción de un aplicación al simplificar la configuración de un equipo con el ambiente de desarrollo de cada plataforma.

¿Qué tecnología utilizar?

iOS/Android Nativo o Hibrido (Phonegap, MonoTouch, iFactr)

La respuesta esta basada en:

● Contexto de la aplicación

● Las características

● El presupuesto

● El tiempo.

Contexto 

1. ¿Cual es el mercado a donde llegas tu aplicación?

2. ¿Cual es tu mercado meta?7

3. ¿Quiero estar presente en todas las plataformas?

4. ¿Tengo un presupuesto reducido?

5. ¿Poco tiempo para tener la aplicación lista?

6. ¿Que tan importante es el rendimiento de la aplicación?

Estas preguntas nos guiarán en la toma de decisiones y acotarán en mayor o menor medida cual plataforma será seleccionada.

Desde la fase del modelado de negocio se puede ya definir sobre que plataforma, se construirá la aplicación.

      

6 Phonegap Build, producto de adobe

(23)

IMPLEMENTACIÓN 

Con el plan de trabajo se podrá realizar las tareas en paralelo

● Front End

● Backend

FRONT END 

El desarrollo del Front end implica la implementación del mockup siguiendo cada tarea del plan de trabajo. Aquí es donde el ingeniero de software crea el producto, se recomienda la integración continua, es decir cada nueva funcionalidad implementada ponerla a disposición del cliente aunque solo sea para pruebas internas.

Herramientas como Git integrado con Jenkins(Servidor de Integración Continua) permiten realizar este proceso de una manera más simple, directa y claro mas barata.

Un tablero de control recomendado para administrar el avance dentro de cada entrega y llevar un autocontrol reduciendo así la necesidad de un administrador de proyecto es Trello F7.

Trello es un tablero con múltiples listas donde se puede ver de forma visual cuales son la tares, como se asignaron y que avance se lleva, permite compartir documentos, notas.

 

(24)

PRUEBAS 

Una manera simple de distribuir el avance con los clientes o los miembros del equipo pensando en el desarrollo iOS es TestFlight F8, un sistema que mediante un mail el posible distribuir una versión alpha o beta de la aplicación móvil que se esta desarrollando.

 

Figure 8 Pantalla de inicio de TestFlight 

Para más información visita https://testflightapp.com

Las tareas más comunes en la implementación del front end son:

● Creación de las vistas

● Integración de API’s nativas(Contactos, Agenda, Acelerómetro, etc).

● Integración con API’s de terceros (Twitter, Facebook, Dropbox)

● Modelado del almacenamiento local.

(25)

Una excelente herramienta que permite la sencilla integración de los servicios finales y las vistas es MaqueF9.

 

Figure 9 Maque, herramienta que simula servicios y acelera su integración. 

Maque es una aplicación multiplataforma, basada en el escritorio, diseñada para ayudar a los desarrolladores crear, probar y mantener aplicaciones web creando servicios de datos simulados, acelerando la integración con los servicios finales.

BACK END 

El desarrollo del back end implica:

● Definición de la arquitectura para servicios de datos.

● Creación del modelo de datos.

● Diseño del API para consumir servicios.

● Pruebas de integración con cliente móvil.

MIDDLEWARE 

Los servicios se recomienda sigan una estructura de Transferencia de Estado Representacional (Representational State Transfer) ó REST.

“Un concepto importante en REST es la existencia de recursos (elementos de información), que pueden ser

accedidos utilizando un identificador global (un Identificador Uniforme de Recurso). Para manipular estos

recursos, los componentes de la red (clientes y servidores) se comunican a través de una interfaz estándar (HTTP) e intercambian representaciones de estos recursos (los ficheros que se descargan y se envían) - es cuestión de debate, no obstante, si la distinción entre recursos y sus representaciones es demasiado platónica para su uso práctico en la red, aunque es popular en la comunidad RDF.8

El back end no es exclusivamente el modelado de datos, sino el como se expone la información para ser consumida por la aplicación móvil.

(26)

A diferencia de desarrollo tradicional(Web o Desktop), en el móvil se requiere disminuir las llamadas a los servicios, de esta forma optimizar el uso de las peticiones, es mejor hacer una petición que entregue muchos datos, que realizar una petición por cada sección o dato que se desea mostrar en pantalla.

Esto optimizará el uso del plan de datos del teléfono o tableta, y permitirá el ahorro de energía en el dispositivo(mayor tiempo de vida para la batería).

TECNOLOGIAS 

Existen distintas tecnologías para la implementación del backend

● Node.js

● Ruby on Rails (RoR)

● Java(JVM)

Veamos algunas características y cómo pueden ayudarnos en el desarrollo exitoso de nuestra aplicación

Node.js 

Node.js es un entorno de programación en la capa del servidor basado en el lenguaje de programación JavaScript, con I/O de datos en una arquitectura orientada a eventos, y basado en el motor JavaScript V8. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables.

Plataforma con un gran ecosistema, actualmente cuenta con una popularidad por la sencillez de configuración , y su pequeña curva de aprendizaje.

Ruby on Rails 

Ruby on Rails, también conocido como RoR o Rails es un framework de aplicaciones web de código abierto escrito en el lenguaje de programación Ruby, siguiendo el paradigma de la arquitectura Modelo Vista Controlador (MVC).

Trata de combinar la simplicidad con la posibilidad de desarrollar aplicaciones del mundo real escribiendo menos código que con otros frameworks y con un mínimo de configuración. El lenguaje de programación Ruby permite la meta programación, de la cual Rails hace uso, lo que resulta en una sintaxis que muchos de sus usuarios encuentran muy legible.

Rails se distribuye a través de RubyGems, que es el formato oficial de paquetes y el canal de distribución de bibliotecas y aplicaciones en Ruby.

(27)

Java(JVM) 

Java es un lenguaje de programación de propósito general, concurrente, basado en clases, y orientado a objetos, que fue diseñado específicamente para tener tan pocas dependencias de implementación como fuera posible.

La JVM es una de las piezas fundamentales de la plataforma Java. Se sitúa en un nivel superior al hardware del sistema operativo sobre el que se pretende ejecutar la aplicación, y este actúa como un puente que entiende tanto el código binario (bytecode) como el sistema sobre el que se pretende ejecutar. Así, se tiene una gran cantidad de lenguajes de programación que corren en esta máquina virtual, algunos ejemplos:

● Groovy

● Scala

● JRuby(Ruby)

● Jython(Python)

BASES DE DATOS 

Para el caso de almacenamiento de datos se tienen las siguientes sistema de gestión de bases de datos relacionales(RDBMS por su siglas en inglés)

● PosgreSQL

● MySQL

● MongoDB

PostgreSQL 

PostgreSQL es un sistema de gestión de bases de datos relacional orientado a objetos y libre, publicado bajo la licencia Berkeley Software Distribution (BSD). Estable y eficiente opción para soluciones de alta concurrencia.

MySQL 

MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario. Software libre en un esquema de licenciamiento dual (GNU GPL y cerrado).

MongoDB 

MongoDB es un sistema de base de datos NoSQL orientado a documentos, desarrollado bajo el concepto de código abierto.

(28)

documentos tipo JSON con un esquema dinámico (MongoDB llama ese formato BSON), haciendo que la integración de los datos en ciertas aplicaciones sea más fácil y rápida.9”

PUBLICACIÓN 

Con nuestra aplicación construida , distribuida para pruebas con usuarios y/o clientes, podemos pasar al siguiente paso que es: la publicación en la tienda de aplicaciones correspondiente.

• ¿Cuales son los requisitos para hacerlo?

• ¿Cuanto cuesta?

• ¿Cuanto tiempo se lleva el proceso?

Dependiendo de la tecnologíaT5 que se halla seleccionado para la implementación, se tienen las siguientes opciones para distribución:

Tecnología Canal de distribución

iOS AppStore

Android Google Play Store

BlackBerry BlackBerry App World

Windows Phone 8 Marketplace de Windows Phone

PhoneGap, iFactr AppStore

Google Play Store BlackBerry App World

Marketplace de Windows Phone

Xamarin(Monotouch) AppStore, Google Play Store

Flex Mobile(AIR) AppStore

Google Play Store BlackBerry App World

Marketplace de Windows Phone

T4 Tabla Tecnología vs Tienda de aplicaciones

APPSTORE (iOS)

10

 

Un requisito indispensable para poder distribuir una aplicación al AppStore es: estar suscrito como desarrollador de Apple (iOS Developer Program).

      

9 Fuente Wikipedia http://es.wikipedia.org/wiki/MongoDB

10

(29)

El programa de desarrollador de Apple ofrece un conjunto completo de recursos técnicos, soporte o acceso a versiones de software de pre-release y nos permite.

● Desarrollar

● Probar

● Distribuir

Las herramientas de desarrollo en el iOS SDK a las que se tendrá acceso son:

● Xcode

● iOS Simulator ● Instruments ● Interface Builder

Xcode 

Entorno de desarrollo que permite la edición del código , depurar código gráficamente y administración del proyecto.

iOS Simulator 

El simulador permite ejecutar, probar y depurar la aplicación de forma local con un simulador para iPhone y iPad. Útil si no contamos con un dispositivo a la mano.

Instruments 

Recolección, despliegue y comparador de rendimiento mediante la gráfica en tiempo real para optimizar la aplicación y encontrar posibles fugas de memoria.

Interface Builder 

(30)

El ecosistema de desarrollo, distribución de la plataforma iOS es el mas completo hasta hoy día, sobre cualquier otra plataforma. Las recursos de desarrollo a los que se tendrá acceso son:

● Foros Apple Developer ● Documentos y videos ● Biblioteca iOS Developer ● Ejemplos de código

Foros Apple Developer 

Foro de discusión sobre temas de desarrollo en iOS por los desarrolladores y los ingenieros de Apple.

Documentos y videos 

Videos y documentación de herramientas, frameworks, métodos de diseño y mejores prácticas de desarrollo.

Acceso a los videos del WWDC (Worldwide Developers Conference) máximo evento de Apple enfocado a la comunidad de desarrolladores Apple. 

Biblioteca iOS Developer 

Desde artículos, guías paso a paso , notas de versiones, ejemplos de código.

Ejemplos de código 

Código de como usar las API’s y mejorar el diseño de las aplicaciones. Ejemplos completos listos para usar y probar. Al seleccionar una clase dentro de XCodeF10 se puede accesar al código de ejemplo usando el API.

 

Figure 10 Código de ejemplo de UIImageView

Suscripción 

(31)

● Individual

● Empresa

la suscripción se puede hacer en https://developer.apple.com/programs/

El costo es el mismo $99 USD, la diferencia principal es que como empresa se debe solicitar un DUNS number (asignado por el gobierno de los estados unidos a una empresa legalmente constituida en el país que hace la solicitud).

Este trámite es gratuito solo hay que llenar un formulario , el proceso se completa en un par de días. Para solicitarlo ingresar a D&B D-U-N-S® .Se puede acelerar el proceso pagando para D&B una cuota.

Cuenta individual se obtiene en un par de días, la empresarial en aproximadamente una semana.

En el caso que se requiera distribuir aplicaciones en un entorno cerrado y que no se hagan públicas, Apple creó el “iOS Developer Enterprise Program”, una distribución solo para los empleados de la empresa o clientes específicos.

GOOGLE PLAY STORE(Android)

11

 

En el caso de Android para empezar a publicar se configura una cuenta publicador de Google Play. Así es como se hace:

1. Registro para una cuenta de publicador de Google Play

2. Si va a vender aplicaciones, configurar una cuenta de Google Checkout Merchant

3. Explorar Google Play Android Developer Consoley aprender acerca de las herramientas para la publicación.

Antes de iniciar el registro considerar los siguiente:

● Se necesita una cuenta de Google para registrarte. Puede crear una durante el proceso.

● Si se esta dando de alta una organización, considerar registrar una nueva cuenta de Google en lugar de utilizar una cuenta personal.

● Revisar los países donde se puede distribuir y vender aplicaciones.

Cuenta Google Play 

      

(32)

El primer paso es visitar el Android de Google Play Consola de desarrollador y registrarse para obtener una cuenta de editor. Los pasos para el registro son los siguientes

1. Visite Google Play Android Developer Console en:

https://play.google.com/apps/publish/

2. Ingresar la información básica sobre la identidad del programador - nombre, dirección de correo electrónico, etc. Esta información se puede modificar posteriormente.

3. Leer y aceptar el acuerdo de distribución para desarrolladores que se aplica al país o región. Tener en cuenta que las aplicaciones y listas de tiendas que se publican en Google Play debe cumplir con las Políticas de Desarrollo del Programa y del derecho exportación de los EE.UU.,

4. Pagar una cuota de $25 USD de inscripción a través de Google Checkout. Si usted no se tiene una cuenta de Google Checkout, se puede configurar una durante el proceso. Cuando el registro es verificado, se notificará a la dirección de correo electrónico que se especificó en el registro(esta cuenta de correo no puede modificarse).

Google Checkout Merchant 

Si se quiere vender productos en Google Play como

● Aplicaciones

● Productos integrados en la aplicación

● Suscripciones

Se tendrá que crear una cuenta de Google Checkout Merchant. Esto puede hacerse en cualquier momento, pero hay que revisar la lista de países en los cuales se pueden comercializar las aplicaciones.

Los pasos para configurar una cuenta de Google Checkout Merchant

1. Acceda a su consola de Google Play en https://play.google.com/apps/publish/

2. Hacer clic en "Editar perfil".

3. Seleccionar "Configuración de una cuenta Google Checkout Merchant.

Esto le llevará a la página de Google Checkout para inscribirse como comerciante, ingresando la información personal o de la empresa.

Explorar la consola de desarrollo 

Cuando tener el registro verificado, se puede acceder a la consola de desarrolladores de Android, que será la sede para las operaciones de publicación de aplicaciones y herramientas en Google Play.

(33)

BLACKBERRY APP WORLD(BB10)

12

 

En el caso de BlackBerry hay que registrarse en el portal de proveedores de BlackBerry App World y presentar el producto para su evaluación por parte de RIM.

El registro se realiza en https://appworld.blackberry.com/isvportal/login_input.do

Los pasos para crear la cuenta de vendedor es siguiendo estos sencillos pasos:

1. Aceptar el Acuerdo de proveedores de BlackBerry App World.

2. Ingresar la información de contacto personal.

3. Ingresar la información de contacto de la empresa.

4. Asociar una cuenta de PayPal con su cuenta de vendedor. Se debe contar con una

cuenta PayPal para poder participar en el Portal de proveedores de BlackBerry App World. Una cuenta de PayPal se requiere para la compra y pago a los proveedores.

Una vez que las credenciales de cuenta ha sido validadas, se recibirá un email de confirmación con instrucciones sobre cómo puede comenzar a enviar productos a RIM 

El correo electrónico de confirmación llega en una semana.F11

      

(34)

Figure 11 Correo de bienvenida a BlackBerry App World

Como se puede observar viene en 4 secciones

● Construye tu aplicación

● Prepara y envía

● Publicita para venta

● Monetiza

así como un enlace a respuestas a preguntas frecuentes que se encuentra aquí:

https://developer.blackberry.com/devzone/appworld/faq/

(35)

En el caso de BlackBerry existe la posibilidad de seleccionar entre 5 plataformas para desarrollar las aplicaciones

1. C/C++ Native SDK

2. HTML5 Webworks

3. Actionscript Adobe AIR

4. Java Android Runtime

5. Java Blackberry Java

además de la opción de crear temas personalizados para BlackBerry con el Theme Studio

 

Figure 12 Plataformas de desarrollo soportadas por BB

Página actual de plataformas soportadas por BB:

(36)

MARKETPLACE DE WINDOWS PHONE(Windows 8)

13

 

Los prerrequisitos para publicar una aplicación Windows Phone son los siguientes:14

Crear una cuenta de Microsoft 

Debe tener una cuenta de Microsoft (antes conocido como Windows Live ID) para inscribirse en Dev Center. Si aún no tiene una cuenta de Microsoft, se le pedirá que cree una antes de registrarse. Para crear una, vaya a la configuración de la cuenta Microsoft .

Regístrese para obtener una cuenta del centro de desarrollo 

Después de registrarse para una suscripción anual del centro de desarrollo, tendrás que presentar un número ilimitado de aplicaciones de pago a Windows Phone Store. También puede enviar un máximo de 100 aplicaciones gratuitas.

Siga estos pasos para completar el proceso de registro:

Seleccione un tipo de cuenta 

Para empezar, seleccione entre una empresa o una cuenta individual / Estudiante.

Empresa: Seleccione la empresa si se está registrando en nombre de una sociedad anónima, sociedad de responsabilidad limitada (LLC), sociedad u otra empresa legalmente registrada con su gobierno local. Tenga en cuenta que los futuros cambios en su primer, apellido o nombre de la editorial requerirán cuenta nueva verificación (aplicaciones no se pueden presentar durante la verificación posterior).

Usted debe completar las siguientes acciones para activar su cuenta de la compañía:

● Completar el registro y pagar la cuota de suscripción.

● Completar el proceso de validación de cuenta Microsoft.

Completar el proceso de validación de cuentas de Microsoft incluye los siguientes pasos:

● Su empresa recibirá un correo electrónico de Symantec que contiene un enlace para verificar la cuenta. Este correo electrónico será enviado a la dirección de email aprobador especificado durante el proceso de registro en la sección de información aprobador.

● Haga clic en el enlace para validar la cuenta de correo electrónico.

Algunas notas adicionales en el proceso de validación de cuentas de Microsoft:

      

13 Información actualizada el sitio de Microsoft Julio 2013 http://dev.windowsphone.com

(37)

Para asegurar la activación rápida, el aprobador corporativa debe responder con su aprobación. Es importante tener en cuenta que si el aprobador Corporativa rechaza el enlace enviado a su correo electrónico, la cuenta será cancelada.

Symantec solicitará la documentación apropiada si es necesario.

Individual o Estudiante: Seleccione Individual si eres un desarrollador individual. Seleccione Student si usted es un estudiante con una cuenta de DreamSpark verificado. Usted puede obtener una nueva cuenta DreamSpark durante el registro. En este punto, se le requiere que proporcione prueba de su condición de estudiante. No hay cuota de membresía anual que si usted compra la suscripción mediante DreamSpark. Usted recibirá un correo electrónico de verificación del Centro de Desarrollo para validar su cuenta de correo electrónico.

Si crea una nueva cuenta y desea mover sus aplicaciones de la cuenta anterior, tendrá que anular la publicación de las aplicaciones publicadas y las remitirá para la certificación en la nueva cuenta. Después de que sus aplicaciones han pasado la certificación en la nueva cuenta, pueden ser publicados bajo la nueva cuenta el nombre del editor. Cualquier calificaciones o revisiones asociados con la publicación anterior no se aplicarán a la publicación de la nueva cuenta.

Datos de contacto y el nombre del editor 

Introduzca la información de contacto necesaria (nombre, dirección, teléfono, correo electrónico, etc) y, a continuación, crear un nombre del editor.

Nombre del editor es el nombre de los usuarios se ven en su teléfono. Editorial nombres son únicos y se verificará durante la cuenta de los procesos de validación de Microsoft inscripción y.

Para cuentas individuales y/o estudiantes, puede ingresar su nombre o Razón Social (DBA). Para las cuentas de la compañía, escriba el nombre legal de su negocio, ya que está registrado con su gobierno local. Un nombre de DBA también es aceptable. Para las cuentas de la compañía, Symantec utilizará este nombre durante el proceso de validación de identidad. Por favor, asegúrese de que toda la documentación de la empresa se alinea con el nombre del editor de la compañía entró.

Si recibe un mensaje de error de conflicto de nombre de la editorial, el error indica que el nombre de la editorial único en el mundo que ya ha proporcionado ya está en uso en el centro de desarrollo de. Sus opciones son:

(38)

○ Disputar la utilización por otra persona si tiene los derechos sobre el nombre de la editorial.

Compra de una suscripción 

Para adquirir una suscripción, se puede pagar con tarjeta de crédito o PayPal.

Si usted es un estudiante y tiene una cuenta DreamSpark, seleccione la opción estudiante verificado DreamSpark para configurar una cuenta de Centro de Desarrollo gratuita (hay que confirmar su estado de DreamSpark primero).

Si tienes un código promocional, redime al introducir el código en el campo.

Configurar una cuenta de pago 

Para recibir dinero para su aplicación y las compras In-App, seleccione un método de pago.

Después de seleccionar corriente o de ahorros, al introducir el nombre del titular de la cuenta, asegúrese de que es el mismo que el nombre de su cuenta bancaria.

La vinculación del centro de desarrollo para PayPal es tan simple como proporcionar su dirección de correo electrónico de PayPal.

Para obtener más información acerca del reembolso, ver Que me paguen para Windows Phone .

Crear un perfil de impuesto 

Crear o editar su perfil tributario para vender aplicaciones de pago y productos in-app. Usted puede hacer esto durante el proceso de registro o en la sección de resumen de cuenta del Dashboard. Para obtener más información acerca de la configuración de su perfil tributario, ver Que me paguen para Windows Phone .

Utilice pubCenter para crear aplicaciones ad‐financiados 

(39)

CONCLUSIONES

El presente trabajo abarco:

• El flujo de trabajo del desarrollo móvil.

• Los puntos esenciales para crear aplicaciones móviles sin enfocarnos en una

tecnología, lenguaje o plataforma en particular.

• Las principales plataformas para la creación de aplicaciones moviles.

Las herramientas son actualizadas en un promedio de 6 meses , pero la metodología o flujo se mantiene constante, quizá se agregue algún elemento o herramienta para simplificar o automatizar la tarea pero con la necesidad de realizarla.

Por ejemplo en el bocetado, se puede sustituir el prototipado de papel por una herramienta que permite crear aplicación interactiva con los bocetos, cambia la forma de interactuar con ellos.

Que puntos se deben destacar:

● Centrarse en las características concretas de la aplicación.

● Bocetar e iterar desde el inicio.

● Refinar estimación de tiempo/costos

● Seleccionar la plataforma y herramientas adecuadas al tipo aplicación.

(40)

GLOSARIO

Application Programming Interface(API)

Es el conjunto de funciones y procedimientos (o métodos, en la programación orientada a

objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa

de abstracción.

App Store

App Store es un servicio para venta de aplicaciones creado por Apple Inc, que permite a

los usuarios buscar y descargar aplicaciones informáticas desarrolladas para iPhone, el

iPod Touch, el iPad, Mac OS X y publicadas por Apple.

GUI

La interfaz gráfica de usuario, conocida también como GUI (del inglés Graphical User

Interface) es un programa informático que actúa de interfaz de usuario, utilizando un

conjunto de imágenes y objetos gráficos para representar la información y acciones

disponibles en la interfaz.

Killer feature

En terminología de marketing, una función única es cualquier atributo de un producto que, para un tipo particular de uso, llega a ser esencial para los usuarios debido a su utilidad. Esta característica supera con eficacia a los competidores del mercado.

Look and Feel

El aspecto y comportamiento de una interfaz gráfica de usuario(GUI de

Graphical User

Interface

)

,

es el conjunto de propiedades y características que le dan una identidad visual

única y pueden ser percibidos de manera diferente de acuerdo con cada

usuario

.5

Milestone

Marcador de próxima entrega en una etapa desarrollo iterativo de software.

MVP

(41)

Stakeholder

Quienes pueden afectar o son afectados por las actividades de una empresa

Testflight

Es un servicio que permite la distribución de aplicaciones de prueba en iOS

Trello

(42)

BIBLIOGRAFÍA

Apple. (n.d.). 

Developer Apple

. From Apple Inc: https://developer.apple.com 

 

BlackBerry. (n.d.). 

Developer BlackBerry

. From Developer BlackBerry: 

http://developer.blackberry.com 

 

Google Inc. (n.d.). 

Android Developers

. From Android Developers: 

https://developer.android.com/index.html 

 

Microsoft. (n.d.). 

Developer Windows Phone

. From Dev Windows Phone: 

http://dev.windowsphone.com 

 

Microsoft. (n.d.). 

Registro Windows Phone Dev

. From Registro Windows Phone Dev: 

http://msdn.microsoft.com/en‐

us/library/windowsphone/help/jj206719(v=vs.105).aspx 

 

MongoDB

. (n.d.). From Wikipedia: http://es.wikipedia.org/wiki/MongoDB 

 

Proceso para el desarrollo de software

. (n.d.). From Wikipedia: 

http://es.wikipedia.org/wiki/Proceso_para_el_desarrollo_de_software 

 

Representational State Transfer

. (n.d.). From Wikipedia: 

http://es.wikipedia.org/wiki/REST 

Figure

Figure 1 Diagrama de Actividades 

Figure 1

Diagrama de Actividades p.8
Figure 2 Flujo de proceso 

Figure 2

Flujo de proceso p.9
Figure 3 Ejemplo de plantilla para bocetado 

Figure 3

Ejemplo de plantilla para bocetado p.12
Figure 4 Ejemplo aplicación de control de llamadas telefónicas usando Balsamiq Mockups 

Figure 4

Ejemplo aplicación de control de llamadas telefónicas usando Balsamiq Mockups p.13
Figure 5 Ejemplo de un prototipo 

Figure 5

Ejemplo de un prototipo p.14
Figure 6 Tabla de estimación de esfuerzo 

Figure 6

Tabla de estimación de esfuerzo p.18
Figure 7 Ejemplo de tablero en trello 

Figure 7

Ejemplo de tablero en trello p.23
Figure 8 Pantalla de inicio de TestFlight 

Figure 8

Pantalla de inicio de TestFlight p.24
Figure 9 Maque, herramienta que simula servicios y acelera su integración. 

Figure 9

Maque, herramienta que simula servicios y acelera su integración. p.25
Figure 10 Código de ejemplo de UIImageView

Figure 10

Código de ejemplo de UIImageView p.30
Figure 11 Correo de bienvenida a BlackBerry App World

Figure 11

Correo de bienvenida a BlackBerry App World p.34
Figure 12 Plataformas de desarrollo soportadas por BB

Figure 12

Plataformas de desarrollo soportadas por BB p.35

Referencias

Actualización...