viernes, 11 de octubre de 2013

Primeros pasos con PhoneGap

Antes de nada, pido disculpas por el abandono del blog pero estoy metido hasta el cuello en una aventura que no me deja tiempo para poder ir añadiendo post nuevos.

En este caso, hago una excepción para explicar como comenzar a usar PhoneGap.

Requisitos

  • Eclipse
  • Android Developer Toolkit (ADT) plugin
  • Android SDK

Todo esto te lo puedes descargar en el ADT Bundle: http://developer.android.com/sdk/index.html







Instalación

Instalar JDK 7 (o superior). Por defecto lo instala en C:\Program Files\Java\jdk1.7.xxx (este será el JAVA_HOME)

Descomprimir ADT Bundle, por ejemplo en C:\adt-bundle-windows-x86_64-20130917
Este contiene:

Eclipse con ADT plugin
Android SDK
SDK Manager



Instalar Node.JS (por defecto lo instala en C:\Program Files\nodejs).

Descomprimir PhoneGap, por ejemplo en C:\phonegap-2.9.0.

Descomprimir Apache Ant en C:\apache-ant-1.9.2 (este será el ANT_HOME)

Añadir la variable de entorno JAVA_HOME = <directorio JDK>



Añadir la variable de entorno ANT_HOME = <directorio ANT>




Configurar la variable de entorno PATH, añadiendo al final:

a.       El directorio NODE.JS
b.      Los directorios platform-tools y tolos del SDK de Android
c.       El directorio JAVA_HOME\bin
d.      El directorio ANT_HOME\bin

En mi ejemplo quedaría algo así: 

(…);C:\Program Files\nodejs\;C:\adt-bundle-windows-x86_64-20130917\sdk\platform-tools;C:\adt-bundle-windows-x86_64-20130917\sdk\tools;C:\Program Files\Java\jdk1.7.0_11\bin;C:\apache-ant-1.9.2\bin.



En el directorio ANT_HOME ejecutar el siguiente comando para que se traiga las dependencias:

C:\apache-ant-1.9.2> ant -f fetch.xml -Ddest=system

Instalar PhoneGap ejecutando el siguiente comando en su directorio principal:

C:\phonegap-2.9.0> npm install -g phonegap

Y ya solo tenemos que configurar el entorno de desarrollo y podemos usar PhoneGap.

Configuración del ADT en Eclipse

Antes de nada, debemos descargarnos las APIs de Android desde el SDK Manager. Esta aplicación la podremos encontrar en el directorio del ADT-Bundle o en el mismo Eclipse ADT.




Marcaremos las APIs con las que queramos desarrollar:



Y como recomendación, en Extras, el Intel Atom Emulator para el simulador:



Una vez instalado todo, navegaremos por el directorio del SDK hasta extras\intel\ Hardware_Accelerated_Execution_Manager e instalaremos el simulador de Intel Atom (IntelHaxm.exe).



Preparando el simulador Android con Intel Atom

Si no hemos abierto aún Eclipse ADT, lo ejecutamos y abriremos el Android Virtual Device (AVD).



A continuación pulsaremos sobre New… y configuraremos el dispositivo usando Intel Atom en la propiedad target.


Podemos probarlo usando el botón Start.



Y ya tenemos el entorno de desarrollo listo para usar PhoneGap

Creando un proyecto PhoneGap

Navegamos desde consola al directorio lib\<ss.oo>\bin de PhoneGap y ejecutamos el siguiente comando:

C:\phonegap-2.9.0\lib\android\bin> create <directorio del proyecto> <paquete> <nombre proyecto>

Es importante tener presente estas consideraciones:
  • El directorio que indiquemos, mejor que no esté en el workspace de Eclipse que vayamos a usar para desarrollar.
  • El paquete, debería ser del tipo com.<lo que sea>.<nombreProyecto>

Ejemplo:

C:\phonegap-2.9.0\lib\android\bin> create C:\Users\jose.c.arcenegui\Documents\phonegapPrjs\EjemploPRJ com.demo.EjemploPRJ EjemploPRJ



Una vez creado desde Eclipse ADT importaremos el proyecto a nuestro workspace. Para ello seguimos los pasos:

Creamos un proyecto desde File > New > Project …



Seleccionamos Android Project from Existing Code



Buscamos la ruta del proyecto que hemos creado con PhoneGap (C:\Users\jose.c.arcenegui\Documents\phonegapPrjs\EjemploPRJ) y marcamos la opción Copy projects into workspace. Recordad que debemos usar un workspace que sea distinto del directorio donde hemos creado el proyecto de PhoneGap.



Y listo.



Ya tenemos el proyecto preparado y podemos incluso probarlo haciendo click derecho sobre el proyecto > Run As > Android Project



Si tenemos algún problema ejecutando con el simulador, podemos editar las propiedades de ejecución:
Botón derecho sobre el proyecto > properties

Seleccionamos Run/Debug Setting y nuestro proyecto y pulsamos Edit



Y en Target marcamos nuestro simulador Intel Atom que creamos previamente




Añadiendo archivos a nuestro proyecto

Ya tenemos el proyecto listo, solo nos queda añadir los archivos HTML5 en el directorio assets/www tras eliminar los ficheros index.html, spec.html y el directorio spec.