Cómo utilizar Genymotion con Ionic

Genymotion es una más que esperada alternativa a los AVD. Aunque es de pago en su versión completa, la versión gratuita nos permite trabajar con un emulador sólo con unas pocas limitaciones (entre ellas el trabajo en red).

Es sencillo utilizar Genymotion, pero algunos aspectos pueden resultar problemáticos. Esta pequeña guía pretende permitir empezar a trabajar con Genymotion sin más problemas. Para profundizar en las posibilidades, recomendamos su la guía de inicio de Genymotion, muy completa.

Paso 1

Vamos a la página de descargas de Genymotion y escogemos la versión FREE.

Tenemos que registrarnos. El registro es gratuito. Necesitaremos esa cuenta para empezar a utilizar Genymotion.

Seleccionamos nuestra versión y ejecutamos el archivo descargado. Observad que con Genymotion se nos instala VirtualBox, dado que cada virtual device será una máquina virtual.

Paso 2

Iniciamos Genymotion. Nos indicará que no tenemos ningún dispositivo y que si queremos añadir uno. Para añadir un nuevo dispositivo, nos pedirá que nos identifiquemos. Una vez identificados podremos escoger la máquina virtual que queramos, tanto el modelo como la distribución de Android.

Una vez escogida, la bajaremos (se trata de máquinas pesadas, de más de 100M) y la tendremos dispuesta.

Paso 3

Para utilizar nuestra máquina virtual primero debemos encenderla. Genymotion abre cada máquina virtual como un dispositivo externo conectado mediante USB, de manera que tenemos que tener abierta la máquina y debemos abrirla como:

$ ionic run

Paso 4

Si queremos utilizarlo con Eclipse, podemos instalar el plugin para Eclipse de su página. En las instrucciones de Genymotion encontraréis el link para instalarlo desde Install New Software y los pasos.

 

 

 

Cómo probar nuestros diseños web responsive

Idealmente en cada uno de los dispositivos directamente; pero por desgracia cada vez es más complejo, si no ya imposible, poder hacerlo. De manera que, en un primer estadio, sí podemos contentarnos con aumentar y rabajar el ancho y alto de nuestro navegador. Pero en un estadio más avanzado, junto con todos los dispositivos con los que podamos, debemos tirar de otras herramientas.

Aquí os presentamos algunas de ellas.

Screenfly

Sencilla pero potente, para hacerse una rápida idea de cómo quedará nuestra web responsive en determinados dispositivos y con pocas pero, según como, suficientes herramientas de personalización, como ancho y alto personalizados, rotación o barra de desplazamiento.

Screenfly

Screenfly

 

Viewport Resizer

Parecida a la anterior pero actúa como componente del navegador y permite agilizar el redimensionamiento de la página y las diversas opciones. Para utilizarlo:

  1. Abrir la página a testear
  2. En otra pestaña abrir el Viewport Resizer
  3. Arrastrar la imagen azul de ‘Click or Bookmark’ y ponedla sobre la pestaña de vuestra página
  4. Ir a la página y probar las herramientas responsive arriba
Viewport Resizer

Viewport Resizer

 

The Responsinator

Un veterano, que ya hemos analizado en nuestro post sobre recursos web, y que permite de un vistazo hacerse una idea de cómo queda nuestra página en varios dispositivos. Recomendable si se quiere en un momento llevarse una rápida impresión.

Responsinator

Responsinator

 

Mobile Phone Emulator

Una de las muchas aplicaciones que, además de rendrizar el viewport a los píxeles de cada dispositivo móbil, aplican una skin del aparato a la vista, lo cual, especialmente para presentaciones a clientes o para muestras comerciales, es muy útil. Se echa en falta, eso sí, algo más de variedad, pero la presentación es impecable.

Mobile Phone Emulator

Mobile Phone Emulator