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 debugar una web app en Chrome

Cuando hacemos una web app, ya sea con jQuery Mobile, con Ionic, con Sencha Touch, etc., una de las cosas que más quisiéramos tener es poder actuar con la web app con F12 y ver y depurar todos los procesos. Es cierto que podemos abrir la app con el navegador, pero no es lo mismo, ya que muchas llamadas u otros procesos se pierden.

Pues bien, entre otros métodos que analizaremos en futuros artículos, hoy queremos comentar la herramienta que nos ofrece Google Chrome. Así es, debugar una aplicación web con Google Chrome es posible a partir de Android 4.0!

Tenéis toda la documentació en la página de desarrollo de Chrome, pero vamos a ver los pasos principales.

Paso 1: Requisitos

Como desarrolladores de web apps, ya tendréis habilitada la conexión USB developer entre el teléfono y el ordenador (en caso de que no fuera así, el tutorial de Chrome incluye también instrucciones, o podéis también consultar aquí: http://www.fandroides.com/que-es-y-como-habilitar-la-depuracion-usb-en-android/; recordad también de instalar los controladores usb de vuestro dispositivos, que normalmente se encuentran en la web del fabricante o incluido en los paquetes de instalación (como el KIES en el caso de Samsung). Para la conexión es lo único que necesitamos.

Paso 2: Google Chrome

En Chrome nos vamos a:

Menú -> Más Herramientas ->Inspeccionar dispositivos

Se abrirá la pestaña de DevTools y el apartado devices.

Menú > Más Herramientas > Inspeccionar Dispositivos

Menú > Más Herramientas > Inspeccionar Dispositivos

Paso 3: Debugar

Nos aseguramos de que “Discover USB devices” está marcado, y nos aseguramos de que nuestro dispositivo ha sido encontrado.

Si tenemos alguna web view activa (nuestra app u otra), ésta se mostrará; si no en cuanto la abramos se mostrará.

Una vez se muestre la app, podemos hacer click en “inspect”, y se mostrará nuestro conocido F12 (en caso de que no sea conocido, podéis echarle un vistazo a este tutorial: https://developer.chrome.com/devtools )

Chrome DevTools - Inspect Devices

Chrome DevTools – Inspect Devices

Como hemos dicho, hay otras herramientas, pero esta es una rápida y magnífica manera de conseguir debigar de verdad una web app!

 

Cordova Error: please install android target 17 (the Android 4.2 sdk)

Este error surge cuando preparamos nuestro proyecto Cordova desde consola y no tenemos las APIs de Android que requiere nuestro proyecto. En el caso de nuestro micro-tutorial es el 4.2 (API 17, es decir android target 17), pero podría ser cualquiera.

Para solucionarlo debemos poner android en la misma consola y nos saldrá el Android SDK Manager (que encontraréis también en la instalación). Desde allí podremos instalar lo que nos haga falta.

Android SDK Tools

Android SDK Tools

Recordad que el Android SDK y el proyecto Cordova de Apache no son lo mismo, de manera que configurar una cosa no significa que la otra reaccione.

 

Un error común en la instalación de PhoneGap / Cordova

Si algo ha ido mal en la instalación y configuración de PhoenGap, puede que os salga una pantalla como esta:

Consola - el error más común
Consola – el error más común

 

Este error es el que aparece cuando una o más de las configuraciones creadas anteriormente (Java, Ant, Android SDK) no responde. Si os fijáis, el comando create es un .bat en la carpeta android\bin que contiene lo siguiente:

@ECHO OFF
IF NOT DEFINED JAVA_HOME GOTO MISSING
FOR %%X in (java.exe javac.exe ant.bat android.bat) do (
SET FOUND=%%~$PATH:X
IF NOT DEFINED FOUND GOTO MISSING
)
cscript “%~dp0\create.js” %*
GOTO END
:MISSING
ECHO Missing one of the following:
ECHO JDK: http://java.oracle.com
ECHO Android SDK: http://developer.android.com
ECHO Apache ant: http://ant.apache.org
EXIT /B 1
:END

Fijaos bien que está buscando la ejecución de los comandos java.exe, javac.exe, ant.bat y android.bat. En la consola id al directorio \android\bin y allí ejecutad uno a uno estos comandos; así podréis detectar donde está el error. Incluso si no aparece error, puede que haya algún paso que os habéis saltado. A veces puede haber alguna complicación extraordinaria.

 

Plugins en Phonegap: desarrollo de Plugins para Cordova 2.5

 

Plugins en Phonegap

Los plugins en Phonegap (o Cordova) son el puente para conectar nuestra aplicación Phonegap con la plataforma nativa del dispositivo (ya sea Android, iOS, Blackberry, Windows Phone, etc.). Los plugins para lograrlo se componen de:

-una interface en Javascript común a todas las plataformas (en este ejemplo SamplePlug.js)
-la llamada desde el HTML (en este ejemplo, inserta en index.html)
-implementaciones nativas propias de cada plataforma (en este caso Android, el archivo Echo.java)

Continue reading

Phonegap: Cómo interactuar con los eventos nativos

Eventos nativos y Phonegap

Aunque las aplicaciones de Phonegap funcionan como una web view independiente, para que trabajen como auténticas aplicaciones móviles necesitan interactuar con los procesos y sistemas nativos. Los más claros ejemplos de estos eventos nativos son usos como el botón hacia atrás, la apertura de otra aplicación quedando la nuestra en el background, los botones de volumen, etc.

Este es un pequeño apunte no para explicar nada, sino para señalar que existe esta posibilidad y cómo usarla.
Continue reading

Phonegap: error “The connection to the server was unsuccesful”

Todos los que desarrollamos para Android en Phonegap nos hemos encontrado con este error alguna vez u otra:

Error "unsuccessful connection to the server"

Este error se debe a que se supera el tiempo de espera de carga de la primera url, que por defecto son 2 segundos. Si el ADT o la máquina o el proceso es lento, se cumplen esos dos segundos y salta este error u otro parecido.
Continue reading

Cómo crear un layout básico para un proyecto PhoneGap con jQuery Mobile

En este pequeño tutorial se os muestra un ejemplo básico de layout con jQuery Mobile. Es sencillo, pero no debemos olvidar los dos apartados que debemos tener siempre en cuenta: una buena configuración y una buena comprensión de la arquitectura. En este tutorial abordamos ambas cosas.

jQuery Mobile: configuración

Id a http://jquerymobile.com/download/ y bajaos el código en .zip (a no ser que queráis utilizar Content Distribution Network (CDN), aunque no es recomendable si no estamos seguros de tener siempre internet).
Continue reading

Cómo configurar Cordova 3 para trabajar en entorno Android

PhoneGap / Cordova: ¿qué es?

PhoneGap es un framework que te permite crear aplicaciones únicas para múltiples plataformas móviles. Está basado en HTML5, de manera que la aplicación que creamos funciona como una página web corriendo en un servidor local. Esto hace que podamos utilizar la misma aplicación en un iOS, un Android, una Blackberry, etc.

Para crear estas aplicaciones no es necesario más que saber diseñar webs. Incluso en esta parte no es necesario ser tampoco un experto: los múltiples frameworks se encargan de las funcionalidades, como la creación de las páginas (HTML5 Boiler, por ejemplo), la gestión del Look and Feel y de la navegación (jQuery Mobile, entre otros), etc. Por ello, la parte más difícil de Phonegap es, quizás, el primer contacto, es decir, la instalación. En este tutorial os acompañamos en este primer paso hacia le mundo del HTML5 en móviles.

Para el problema de la nomenclatura PhoneGap / Cordova podéis ver esta entrada del blog oficial. Continue reading