Ripple: Un test más que completo para aplicaciones móviles

En esta nueva entrega, abordaremos un tema importante que ningún desarrollador puede dejar de lado: El testing de aplicaciones en un emulador de dispositivos móviles.

En el artículo Mobile Frameworks, realizamos un pequeño repaso en la historia y evolución de los dispositivos móviles, e hicimos hincapié en la variedad de equipos, sistemas operativos, celulares inteligentes y tablets que existen en el mercado, y también en lo complicado que sería, tanto en cuestión de tiempo como en cuestiones económicas, estudiar a fondo al menos tres de los lenguajes de desarrollo que nos permitirían crear Apps para el triunvirato que hoy reina en los dispositivos móviles: iOS, Android, Windows Phone.

Es por ello que dijimos que, para estar en todas las plataformas posibles con un único esfuerzo como desarrolladores, lo mejor es volcarnos a desarrollar aplicaciones web móviles, o aplicaciones híbridas, utilizando para esta última opción librerías como PhoneGAP.

Tanto desde Eclipse como Dreamweaver desde su versión CS 5.5, podemos implementar diseños de aplicaciones web que luego son transformadas en aplicaciones móviles con todo el aspecto nativo que estas suelen tener. La única diferencia en cuanto a diseño que aporta PhoneGAP, es que al ejecutar la aplicación en el dispositivo móvil genera una llamada al componente WebView, que no es más que una sesión independiente del navegador web que el dispositivo móvil dispone.

Pero aún así, sabiendo que cuando desarrollamos un sitio web basado íntegramente en HTML, este difícilmente se rompa al momento de su ejecución, siempre es conveniente testear de forma previa esta WebApp o App híbrida en algún ambiente que simule al máximo el dispositivo de destino y sus principales funciones. Allí es cuando Ripple entra en acción, tomando el lugar del papel de Emulador, que nosotros estamos requiriendo.

El mundo Ripple

Ripple es un entorno de emulación multiplataforma que permite crear dentro del navegador web Google Chrome un ambiente similar al de un dispositivo móvil, permitiéndonos no sólo simular la carga de nuestra webApp o aplicación híbrida en el o los dispositivos que estamos deseando probar, sino que también aporta un valor agregado, brindándonos la emulación de importantes funciones como pueden ser la geolocalización o la brújula disponibles en los smartphones.

Mediante esta herramienta podemos reducir de manera considerable la principal problemática que enfrenta todo desarrollador de plataformas móviles, que es testear y garantizar el correcto funcionamiento de una App o WebApp, que busca formar parte del fragmentado mundo de las tiendas de aplicaciones. El principal enfoque de Ripple está en dar soporte a las aplicaciones web móviles desarrolladas en la plataforma PhoneGAP, WebWorks y aplicaciones web basadas en HTML5.

WEBWORKS
WebWorks es, desde mediados del año 2010, la plataforma de diseño de aplicaciones web alternativa, utilizada por Blackberry, antes RIM, para permitir a sus desarrolladores crear aplicaciones con integración completa de características de interacción de Software + Hardware, para los dispositivos móviles (tablet y smartphones), utilizando un entorno basado en HTML, hojas de estilo y JavaScript.
WebWorks permite, desde una simple página web, crear una aplicación completa, incluyendo dentro de la misma librerías externas como ser Sencha Touch, Jquery UI y Jquery Mobile. También desde WebWorks podemos invocar servicios propios de una aplicación o sitio web, como ser los de Google Analytics, los cuales nos permitirán llevar una métrica sobre el uso que le dan a nuestras aplicaciones.
Su IDE permite utilizar características avanzadas en la construcción de aplicaciones para Blackberry OS, mediante la invocación a las APIs y servicios de Blackberry, utilizando el lenguaje JavaScript. Todas las aplicaciones que podemos desarrollar con este IDE pueden acceder sin problema a los servicios de Blackberry, aprovechando las ventajas propias del sistema operativo móvil de esta compañía, como ser soporte real a multitarea, uso de la tecnología PUSH, acceso a un importante número de servicios de Blackberry, incluyendo la geolocalización del equipo, y publicidad mediante un sistema similar a AdSense.
También, desde una aplicación construida con WebWorks, podemos invocar el envío de mensajes SMS, consultar la lista de llamados perdidos/recibidos, y hasta controlar la reproducción de archivos de audio. Pueden encontrar más información sobre WebWorks en el Portal de Desarrolladores de Blackberry.

Más beneficios

Dentro de la oferta que nos ofrece Ripple en su versión Beta, podemos destacar también la posibilidad de visualizar una WebApp corriendo en un determinado dispositivo, y a su vez, durante el tiempo de ejecución de la página, poder acceder de forma completa a las entrañas del código que generó nuestra página. Así logramos acceder a la depuración de nuestras funciones JavaScript, inspeccionar el DOM HTML, automatizar el testing de la App mediante herramientas de terceros, y emular la ejecución de esta en diferentes dispositivos que tienen múltiples resoluciones de pantalla.

Para complementar la inspección de código HTML y JavaScript, Ripple se apoya mucho en la funcionalidad adicional que tiene Chrome, conocida como Web Inspector. Todo esto podemos lograrlo sin la necesidad de recompilar nuestra aplicación Mobile o de reiniciar el emulador.

Dado que Ripple se encuentra aún en versión Beta, cualquier falla que detectemos en el uso de esta herramienta es conveniente reportarla a sus creadores, de manera tal que dicho Bug pueda ser solucionado en el menor tiempo posible, y que todos los desarrolladores que usamos esta herramienta como soporte de pruebas, podamos beneficiarnos con una nueva versión.

Hands On: Instalar Ripple

Como dijimos al principio, Ripple es un complemento que se ejecuta solamente sobre el navegador web Google Chrome, por lo tanto debemos contar con éste en nuestro equipo antes de ir a instalar esta herramienta. Para acceder a Ripple debemos hacerlo a través del portal de aplicaciones Chrome Web Store. Ingresamos a la tienda de Chrome y buscamos Ripple Emulator, o directamente hacemos un clic en este link. Luego presionamos el botón de instalación, aceptamos las cláusulas que pueden presentarse por instalar este complemento en nuestro navegador, ¡y listo!, ya disponemos de Ripple en nuestro equipo.

Particularidades de Ripple
Debemos tener en cuenta que para probar aplicaciones en este emulador, las mismas deberán tener que estar ejecutándose desde un servidor HTTP. Ripple no permite cargar y emular ningún HTML arrojado en una carpeta local de nuestra computadora, con lo cual debemos olvidarnos de poder ejecutar un archivo desde la URL file:///C:/carpeta/subcarpeta/index.html.

Como opciones válidas, podemos usar un servidor HTTP que tengamos funcionando en nuestra computadora, o descargar LightTPD (un excelente servidor web liviano que para nuestro propósito alcanza y sobra), o recurrir a servidores más completos como IIS, LAMP, WLMP, etc. También, si disponemos de un web hosting propio, podemos crear una subcarpeta en el mismo e ir subiendo las aplicaciones HTML5 a éste, para poder probarlas.

Ejecución
Una vez instalado Ripple podemos ubicar un ícono creado en la barra de herramientas de Google Chrome, justo al lado de la barra de direcciones. Si presionamos sobre el mismo, veremos que emerge una ventana desde donde podemos habilitar o inhabilitar, mediante los botones Enable/Disable, la función de emulación de Ripple.

Previo a ejecutar Ripple, debemos cargar en una pestaña de Chrome la dirección URL de nuestro servidor web donde está alojada la página que probaremos. Podemos probar con esta misma, www.dattamagazine.com, para ver cómo se adapta a un dispositivo móvil. Este sitio web posee soporte para visualizarlo en dispositivos móviles, lo que nos permitirá ver la adaptación del mismo en una pantalla reducida, y de paso acceder a todas las características que Ripple nos brinda. Despleguemos el panel de Ripple y presionemos el botón Enable.

La pantalla que vemos a continuación es porque estamos ejecutando por primera vez a Ripple, para que adapte la URL actual al formato Mobile. Dentro de las opciones que nos ofrece, Ripple permite interactuar con las tecnologías PhoneGAP 1.0 y 2.0, con WebWorks 1.0 y 2.0, y con la versión para Tablets de WebWorks.

Por último, también disponemos de la opción Mobile Web, que es la que utilizaremos en esta prueba. A partir de la próxima vez que lo ejecutemos con esta misma dirección, Ripple ingresará de manera predeterminada mediante la opción elegida.

Elegida la opción Mobile Web, Ripple emulará en su interfaz la adaptación de este sitio web en un dispositivo móvil.

Se cargará en el centro de la pantalla un dispositivo móvil genérico, emulando un teléfono celular táctil. En los laterales del IDE encontraremos diversas opciones que nos brinda Ripple, las cuales evaluaremos en detalle a continuación:

Devices: Mediante esta función podemos elegir diferentes dispositivos móviles, que disponen de variadas resoluciones de pantalla. Dependiendo del dispositivo virtual elegido, Ripple adaptará el contenido emulado a un nuevo tamaño. Puede que a través de la resolución de nuestra computadora, veamos sobredimensionado el emulador.

La única opción posible para visualizar en pantalla completa el emulador, será mediante un monitor de alta resolución, por ejemplo, 1920 x 1080 píxeles. También desde esta función podemos simular la forma de posicionar el dispositivo móvil: Portrait o Landscape, para ver cómo es readaptado el contenido.

Para desplazarnos por el contenido de la web adaptada, sólo debemos posicionar el cursor del mouse sobre la página, y realizar Scroll mediante la rueda del mouse o desplazándonos con las flechas de nuestro teclado.

Platforms: Esta función nos permitirá cambiar la visualización por defecto de la página cargada. Si, por ejemplo, ingresamos utilizando la opción Web Mobile y lo que estamos visualizando es una aplicación construida en PhoneGAP, sólo debemos seleccionar desde el menú Platform la opción correspondiente. Luego elegimos la versión, si la opción seleccionada dispone de más de una opción, y por último presionamos el botón Change Platform. Si estamos testeando una futura aplicación PhoneGAP o WebWorks, Ripple habilitará el JavaScript necesario que emule las funciones del dispositivo en cuestión.

Information: Esta opción nos muestra la información básica del dispositivo elegido. Si, por ejemplo, seleccionamos algún modelo Blackberry donde deseamos emular la aplicación, en esta sección se visualizarán datos relevantes del dispositivo, como por ejemplo el sistema operativo y la versión correspondiente.

Accelerometer: Mediante esta función, podemos simular el movimiento del teléfono como si fuera uno real. Disponemos dentro de las características relacionadas a la función, los ejes X, Y, Z, y otras posiciones relevantes a la brújula como ser los grados alfa, beta y gama. Si estamos probando, por ejemplo, una aplicación PhoneGAP que ejecuta una acción al movilizar el dispositivo, estos ejes se actualizarán de manera automática. Para simular el movimiento de un dispositivo real, sólo debemos hacer un clic sobre el gráfico de teléfono ubicado en esta sección, y manteniendo presionado el botón del mouse, moverlo. Veremos que mediante una animación 3D, se simulará el movimiento del dispositivo, ajustando de manera automática las coordenadas correspondientes de cada eje. Y presionando el botón Shake, simulará que el teléfono celular es sacudido. Esto último sí será representado en el simulador central y, durante el efecto, será actualizado de forma automático el eje X.

Geo Location: La función de geo-localización nos permitirá simular una ubicación específica en un mapa. Si nuestro sitio web o aplicación móvil utiliza un sistema de localización automática de la persona, podemos simular las coordenadas que queremos representar en el mapa de nuestra aplicación móvil, utilizando las siguientes propiedades configurables que nos brinda esta función: Latitud, Longitud, Altitud, CellID (información de la celda del teléfono móvil), Accuracy y Altitude Accuracy. También podemos cargar un archivo GPX, que corresponde a la representación de POI (Puntos de Interés).

Conclusión

A lo largo de esta nota pudimos conocer la excelente opción que nos brinda Ripple Emulator para testear nuestros sitios web móviles, y las aplicaciones basadas en PhoneGAP o WebWorks. Este pequeño plugin que se instala en Chrome, y cuyo instalador no ocupa más de 8 MB, engloba las principales características necesarias para realizar Testing y pruebas de visualización de nuestras aplicaciones web o híbridas, de la mejor manera posible.

Si vuestro trabajo está relacionado en algún aspecto a la web o aplicaciones para dispositivos móviles, Ripple es una excelente opción, de fácil instalación y uso, para probar nuestros desarrollos sin tener que hacer malabares, llevando nuestras aplicaciones a emuladores como Android o iPhone, donde para este último necesitamos contar sí o sí con una computadora Apple.

Ripple es gratuito y, gracias a instalarse formando parte de Google Chrome, podemos contar con él, ya sea si utilizamos Windows, Linux o Mac.