HYBREED Tecnología a fondo Plataforma de desarrollo de aplicaciones móviles híbridas.

Transcripción

1

2 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.

3 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

4 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.

5 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. 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 ( [*] 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 Yeoman/Gradle, como plataforma de gestión de construcción. Arquitectura

6 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. Iphone / Iphone 3G Iphone 3G and newer Android Blackberry OS 5x Blackberry OS 6.0+ WebOS Window Phone 7 Symbian Accelerometer Camera Compass Contact File Geolocation Media Network Notification (Alert) Notification (Sound) Notification (Vibration) Storage Bada Apache Cordova soporta de base las siguientes funcionalidades de acceso a los APIs de los dispositivos: Arquitectura

7 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. 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. 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. Arquitectura

8 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. 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. 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. Arquitectura

9 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. [*] Arquitectura

10 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.

11 En concreto, atsistemas propone el uso del formato JSON para la comunicación con los servicios, ya que: Por lo tanto, el esquema de la solución empleando la plataforma Hybreed de atsistemas sería: 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. Soluciones basadas en Hybreed

12 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. Soluciones basadas en Hybreed

13 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.

14 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.

15 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

16 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.

17 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: info@atsistemas.com atsistemas.com