01 HYBREED Tecnología a fondo

Plataforma de desarrollo de aplicaciones móviles híbridas.

La plataforma de desarrollo de aplicaciones móviles híbridas de

atSistemas tiene como objetivo proporcionar las herramientas necesarias

para construir aplicaciones multidispositivo aprovechando las tecnologías

web. Con este enfoque multiplataforma, el proyecto de construcción se

reduce a un único desarrollo, frente a la opción tradicional de crear una

versión separada por cada sistema operativo nativo o incluso por cada

terminal.

El resultado final del desarrollo con Hybreed es una aplicación móvil

híbrida, embebida posteriormente en un contenedor que la convierte en

nativa, generando las diferentes versiones de aplicación por cada sistema

operativo nativo.

Este documento recoge tanto una descripción de la plataforma Hybreed

en su estado actual, así como la evolución o roadmap prevista para el

futuro inmediato. Además, se incluyen también aquellas características

que se encuentran en desarrollo y que se incorporarán a Hybreed en el

medio plazo.

Aquellas funcionalidades o características que no están disponibles

actualmente pero se encuentran en el roadmap se marcan con un

asterisco entre corchetes [*].

Las principales características de la plataforma son:

Soporte para 8 sistemas operativos y fácilmente adaptable a

nuevas versiones.

Soporte para 13 tipos de dispositivos diferentes y en

crecimiento, incluyendo Smart TV.

Reutilización de código mediante una arquitectura

desacoplada.

Funcionalidades nativas.

Ahorro de costes, esfuerzos y tiempo.

Plataforma con integración continua.

QA. [*]

El principal valor de la plataforma Hybreed es conjugar distintas

herramientas esenciales para la creación de aplicaciones móviles

híbridas, facilitando el trabajo de los desarrolladores y agilizando

procesos como la gestión de dependencias o la encapsulación de la

aplicación en el contenedor específico para cada dispositivo móvil.

Hybreed es el fruto del trabajo constante de nuestro departamento de

I+D. En atSistemas, utilizamos Hybreed para llevar a cabo nuestros

proyectos de creación de aplicaciones móviles híbridas. Además, ahora

ofrecemos la posibilidad a nuestros clientes de adoptar esta solución

como su propia plataforma de desarrollo móvil multiplataforma, como un

valor asociado a nuestros servicios.

Tecnología a fondo

02 Arquitectura

Descripción de la arquitectura.

La arquitectura Hybreed de atSistemas se compone de tres capas:

Un conjunto de Tecnologías Web como capa superior, un contenedor de

plataformas como segunda capa que encapsula dichas tecnologías en los

entornos nativos de cada terminal, que es la tercera capa.

La arquitectura no es MVC al tener una clara orientación de ejecución en

cliente y no en servidor, por ello se utiliza una aproximación MV* donde

disponemos de un Router como el de Ruby on Rails, y unos Views que

son ViewControllers ya que en ellos se encuentra la mayor parte de la

lógica de la aplicación.

Arquitectura

Tecnologías.

Los componentes tecnológicos base son:

Backbone como framework que implementa el modelo MV*

en Javascript.

Underscore / Handlebars como sistema de plantillas.

jQuery como framework base de peticiones asíncronas al

backend y de gestión del DOM.

Require.js como gestor de dependencias Javascript

siguiendo AMD (Asynchronous Module Definition), es decir,

gestión de dependencias bajo demanda en tiempo de

ejecución.

Bootstrap como framework CSS3/HTML5.

Yeoman/Gradle, como plataforma de gestión de

construcción.

Además para cada plataforma se han creado las librerías Hybreed que

facilitan los desarrollos. Se agrupan en:

Mobile (Agnóstico)

Desktop

Samsung Smart TV

Smart TV Alliance (www.smarttv-alliance.org) [*]

Windows 8

El sistema puede ser usado con BDD o TDD mediante los siguientes

frameworks de testing y mocks / stubs / assertions:

Mocha

Sinon

Chai

Sinon-Chai

Contenedor Híbrido.

El contenedor permite comunicar la capa

de tecnologías web con la capa nativa de

cada terminal para la construcción de

aplicaciones híbridas con Hybreed.

La aplicación se encapsula en un

contenedor híbrido: Apache Cordova en

su variante móvil y con las librerías

Hybreed para los fabricantes de TV en su

variante Smart TV.

Apache Cordova, originalmente conocida

como Phonegap, fue creada por Nitobi en

Canadá. Esta compañía fue adquirida por

Adobe a finales del 2011 cediendo a la

Apache Software Foundation el código

fuente y cambiando de esta manera el

nombre a Apache Cordova, por lo que se

trata de software libre.

Apache Cordova soporta de base las

siguientes funcionalidades de acceso a

los APIs de los dispositivos:

Iphone /

Iphone 3G

Iphone 3G

and newer Android

Blackberry

OS 5x

Blackberry

OS 6.0+ WebOS

Window

Phone 7 Symbian Bada

Accelerometer

Camera

Compass

Contact

File

Geolocation

Media

Network

Notification

(Alert)

Notification

(Sound)

Notification

(Vibration)

Storage

Arquitectura

Arquitectura

Arquitectura de aplicaciones Hybreed.

La arquitectura de las aplicaciones resultantes se compone de estas

partes:

La aplicación: basada en JavaScript, CSS3 y HTML5 para la

visualización de contenidos, y en componentes nativos, para los

flujos de navegación y contenedores de información.

El contenedor de plataforma: embebe la anterior y le da acceso al

dispositivo.

Capa nativa: definiciones y código estandarizado de la plataforma

para desarrollos híbridos.

Plugins: extensiones personalizables que permiten acceder a

recursos diversos. Hacen de puente entre la parte web y la nativa,

desarrollándose en ambas plataformas.

Librerías Hybreed para Samsung: habilita la capa de

funcionalidades para Samsung y control del interfaz.

Librerías Hybreed para Smart TV Alliance: habilita la capa de

funcionalidades para Smart TV Alliance y control del interfaz. [*]

Capa Hybreed para convergencia: conjunto de librerías para

habilitar la convergencia multidispositivo.

Arquitectura

Conviene resaltar algunas peculiaridades de esta arquitectura de

aplicaciones:

Al implementar la visualización de contenidos (formularios,

imágenes, textos…) con tecnologías web, se pueden seguir

los estándares de programación que ya son conocidos, y

con los que está familiarizado el equipo de desarrollo.

Este puede estar compuesto por técnicos con conocimientos

comunes, como JavaScript, CSS o HTML5, que son más

fáciles de encontrar que los especialistas en código nativo.

La curva de aprendizaje que necesita el equipo es mucho

menor que respecto a otras soluciones.

Se usan tecnologías web, pero no la filosofía de una web. No

hay navegación por páginas, sino patrones específicos para

crear las aplicaciones. Esto las hace más ágiles y enfocadas

a los móviles.

El núcleo de las aplicaciones será realmente

multiplataforma.

El uso de plugins abre una comunicación entre la parte web

y nativa, lo que permite usar el cien por cien de los recursos

nativos de los móviles y su SDK, si así se quiere.

En cuanto a la solución Smart TV:

Abstracción del desarrollo central, permitiendo que

sea reutilizado para otras plataformas de TV.

Compuesta por librerías que facilitan la definición de

la navegación con el mando de televisión.

Arquitectura ready to use con puntos claros para

introducir nuevas funcionalidades, dotando la

aplicación de una estructura sólida que evita

desarrollos de código disperso y técnicamente

conocido como “spaghetti”.

Puntos de acción de convergencia independientes

que permiten desplegar la aplicación de manera ágil

en dispositivos que no dispongan de convergencia.

Capa de tecnología Samsung desacoplada que

permite abstraer futuras evoluciones dependientes

del fabricante de la lógica de la aplicación.

Arquitectura

Seguridad.

Las aplicaciones suelen estar orientadas a usuarios particulares y dan

acceso a información personal, sensible y privada por lo que debe

securizarse.

En función del entorno de la organización, permite una integración

rápida y sencilla con los sistemas de seguridad corporativa existentes.

Otras características.

Otras características destacables de Hybreed:

Está orientado a la creación ágil de aplicaciones híbridas

multiplataforma, creando una única aplicación que aplica

para diferentes sistemas operativos.

Está basado en tecnologías estándar, por lo que es ligero

y el cliente no queda atado a la plataforma, que es gratuita

y opcional.

Al ser estándar, existe abundante documentación y

ejemplos, lo que ayuda a su aprendizaje por parte de un

equipo de desarrollo.

Se prevé disponer de librerías para cifrado de datos y

diversas utilidades. [*]

03 Soluciones basadas

en Hybreed En las organizaciones suele existir una serie de servicios emplazados en

una aplicación de backend y que implementarán todas las funcionalidades

de negocio.

Se emplean esos servicios, o se generan los necesarios, de tal manera

que la aplicación móvil se convierte en una fachada o frontend, que

consume servicios web para obtener información y la presenta de forma

adecuada a la pantalla del móvil y cómoda de usar para el usuario.

Esta separación aporta grandes ventajas:

Desacoplamiento: desliga el negocio de la interfaz de usuario.

Reutilización: permite su reutilización por más de un cliente.

Independencia tecnológica: independiza los servicios de la

tecnología de los clientes.

La plataforma soporta la comunicación con servicios SOA, peticiones

REST y tratamiento de datos en XML y JSON por lo que la integración es

sencilla.

En concreto, atSistemas propone el uso del formato JSON para la

comunicación con los servicios, ya que:

Reduce considerablemente el tamaño de la información a

transmitir, aumentando así la velocidad y reduciendo el

tiempo de respuesta.

La descripción del contenido es mucho más legible que en

XML, facilitando el mantenimiento y los evolutivos de la

aplicación.

El proceso de datos requiere de menos recursos de CPU y

memoria, algo especialmente importante en el caso de un

móvil, con limitaciones en ambos recursos.

Por lo tanto, el esquema de la solución empleando la plataforma

Hybreed de atSistemas sería:

Soluciones basadas en Hybreed

Soluciones basadas en Hybreed

Front-end Híbrido.

Parte web: basada en JavaScript, CSS3 y HTML5, es la

aplicación móvil-Smart TV a desarrollar.

Parte nativa: compone la interfaz de usuario, siendo aquí lo

más importante el diseño y la usabilidad, para proporcionar la

mejor experiencia.

En el front-end estarán también las validaciones lógicas, de

formularios y la navegación por la funcionalidad de la

aplicación.

No contiene ningún aspecto del negocio, con el que se

comunica utilizando el juego de servicios implementados para

ese propósito.

Servicios de negocio.

Componen toda la parte lógica del negocio de la aplicación:

autenticación, recuperación de información, modificación de

datos, cálculos…

Abstraen toda la complejidad del negocio, y lo independizan

de la plataforma del cliente que los use.

Los mismos servicios serán, por tanto, usados por todo tipo

de aplicaciones: web, móviles, etc…

Típicamente serán REST, lo más adecuado para movilidad,

pero también podrían usarse WebServices si así se requiere.

04 Convergencia con

televisores Smart TV Descripción de la arquitectura.

Además de poder realizar aplicaciones para televisiones Samsung Smart

TV, es posible establecer una conexión entre un terminal y una Smart TV,

permitiendo comunicación entre ellos. La TV no es un monitor del terminal

sino que puede tener distinta navegación que la aplicación del terminal.

La convergencia entre el dispositivo móvil y la televisión se realiza

mediante el API de Samsung que presenta un modelo REST. Para

conectar, se sigue el estándar Universal Plug and Play, buscando un

servicio específico denominado MultiScreen.

La aplicación de TV debe estar en ejecución para que este servicio quede

expuesto y los dispositivos a enlazar deben estar en la misma red local.

Una vez realizado el proceso de conexión con la TV, la aplicación

convergente podrá ordenar a la aplicación de TV que realice distintas

acciones mediante el API de Samsung.

05 Pautas de diseño.

Responsive web

design

En las aplicaciones a desarrollar se toman como referencia las guías de

estilo de aplicaciones para móviles que proponen Apple y Google. Esto

afectará a los componentes fundamentales de la interfaz de usuario, tales

como botones, textos y menús, entre otros.

Respecto al diseño de la parte web de la aplicación, se seguirán los

principios del Responsive Web Design. Estos determinan que:

Las vistas deben aprovechar las ventajas de CSS3 y las media

queries.

El layout de las páginas deben adaptarse dinámicamente a la

resolución definida del dispositivo donde se visualiza.

Se minimizará la aparición de scroll horizontal, vertical, panning

y resizing de las pantallas.

Las imágenes serán flexibles, prefiriendo las vectoriales, para

amoldarse a cada pantalla.

Se maximizará la experiencia de usuario y la facilidad de uso.

El enfoque principal suele ser hacia la sencillez.

La aplicación, al seguir estos principios, se mostrará siempre de forma

óptima para cada dispositivo, haciendo posible que la misma aplicación

se muestre y use correctamente en el heterogéneo conjunto de

dispositivos a soportar.

Es posible desarrollar la aplicación tanto en modo Portrait (vertical) y

Landscape (Horizontal).

Los iconos e imágenes se diseñan para su óptima visualización tanto en

pantallas convencionales como en pantallas de alta definición (“Retina

display”).

Pautas de diseño. Responsive web design

06 El centro experto en

movilidad de

atSistemas Para dar la respuesta correcta a la creciente demanda de servicios de

desarrollo de aplicaciones móviles, atSistemas ha constituido su Centro

Experto en Movilidad, un equipo de profesionales altamente

especializados, distribuidos entre nuestras oficinas de Madrid, Barcelona y

Cádiz, capaces de proponer la solución más adecuada a cada caso, en

función del perfil del proyecto.

Consultora informática fundada en 1994 que cuenta con más de

450 profesionales de IT. Con oficinas en Madrid, Barcelona y

Cádiz, prestamos servicios de consultoría y desarrollo de

software a las principales empresas de todos los sectores.

Más información:

+ 34 91 640 76 20

info@atsistemas.com

atsistemas.com