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.
NB: en este tutorial instalamos PhoneGap en un SO Windows 7 Ultimate

 

Paso 1: ¿alguna pista?

Paso 2: instalaciones

Instalación de Java

Java SE Downloading Page

Java SE Downloading Page

  • Fijaos bien en el directorio en que se instalará, pues tendréis que poner manualmente luego el path.

Instalación del Android SDK + Cordova

  • Instalad el SDK + Cordova. Cordova es la versión de Phonegap que necesitáis bajaros.
  • El Android SDK contiene ya el Eclipse y el ADT plugin, de manera que os podéis bajar ese si no queréis configurar a mano una copia del Eclipse.
  • Para conseguir el Android SDK con todo incluido, haced click en el link que se os proporciona. Os llevará a http://developer.android.com/sdk/index.html, donde os podréis bajar lo necesario. Haced click en Download the SDK ADT Bundle for Windows. Escoged si trabajáis en 32 o 64 bits y bajaos el archivo.
Android SDK Downloading Page

Android SDK Downloading Page

Getting the Android SDK ADT Bundle

Getting the Android SDK ADT Bundle

Creación del entorno de desarrollo

  • Cread un directorio de trabajo (p. ej. C:\Development).
  • Extraed en C:\Development los archivos del “adt-bundle-windows-x86_64-20130219.zip” que os habéis bajado de developer.android.com.
Development - Extrayendo Android SDK ADT Bundle

Development – Extrayendo Android SDK ADT Bundle

  • En el fichero .zip de Cordova que os habéis bajado, encontraréis un cordova-android.zip. Extraed su contenido en una carpeta android (o similar) en C:\Development.
Development - Extrayendo PhoneGap

Development – Extrayendo PhoneGap

Paso 3: configuraciones de entorno

  • En el punto Setup your PATH environment variable on Windows es muy recomendable seguir todos los pasos, incluso si ya tenéis instalado lo que se os pide.
  • Id al path de las variables de entorno: haced click en el icono de Equipo y haced click en Configuración avanzada del sistema. Seleccionad variables de entorno, y en la pestaña que os aparecerá, abajo, haced click en Path y Editar.
Path en el Panel de Variables de Entorno

Path en el Panel de Variables de Entorno

  • Añadid al final el path para los directorios “platform-tools” y “tools” del sdk de Android. Es decir, si habéis puesto vuestro directorio de desarrollo en C:\Development, podéis poner los que os vienen de ejemplo: ;C:\Development\sdk\platform-tools;C:\Development\sdk\tools. No olvidéis los punto y comas.
Copiando el path del sdk

Copiando el path del sdk

  • Cread el ANT_HOME que se os indica con el path de la instalación que habéis hecho (si habéis utilizado C:\Development, será C:\Development\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\.
Copiando el path del ant

Copiando el path del ant

  • Cread el JAVA_HOME con el path de la instalación que habéis hecho y el directorio bin (típicamente C:\Program Files\Java\jdk1.7.0_02).
Copiando el path del java

Copiando el path del java

  • Haced de nuevo click en Path y Editar. Añadid en el path las variables: ;%JAVA_HOME%\bin\;%JAVA_HOME%\lib\;%ANT_HOME%\bin;
Las variables que añadir al path

Las variables que añadir al path

Una vez hechos estos pasos, ya podéis crear vuestro proyecto Cordova desde Eclipse. Si queréis hacerlo desde la consola (aunque parece que las últimas versiones del SDK son bastante estables) pasad al paso 3 de este tutorial.

Paso 4: nuevo proyecto desde consola

Instalación de Node.js

    • Para poder utilizar el comando cordova, instalad node.js siguiendo las instrucciones de nuestro tutorial para instalar node.js.
    • Abrid una consola (Inicio – Ejecutar – cmd).
Ejecutando la consola

Ejecutando la consola

  • Ejecutad el comando npm install -g cordova (si os dice que no reconoce el comado npm, id al path y poned la ruta a node al principio).
  • (En caso de que queráis actualizar cordova, podéis poner npm update -g cordova) (Para saber la versión actual: npm info cordova)
  • Ahora ya estáis preparados para empezar a trabajar con Cordova. Para crear vuestro primer proyecto, escribid los comandos que se os proporciona:

cordova create <project_folder_path> <package_name> <project_name>
cd <project_folder_path>
cordova platform add android
cordova build

Como se explica, <project_folder_path> es el path del nuevo proyecto Android de Cordova o Phonegap. No es necesario crearlo antes. Se entiende que será un nuevo proyecto y, como tal, vacío. Phonegap se encargará de crear el directorio y las configuraciones necesarias. <package_name> es el nombre del package de la aplicación, por ejemplo com.test.testApp. <project_name> es el nombre del proyecto, por ejemplo testApp.

Fijaos que no son necesarios los caracteres “./” al inicio del comando.

cordova create C:\development\adritah com.test.adritah “testAdritah”
cd C:\development\adritah 
cordova platform add android (podéis consultar nuestra entrada sobre el error please install android target 17 (the Android 4.2 sdk))
cordova build

Creando el proyecto de Cordova

Creando el proyecto de Cordova

  • Si todo ha ido bien, os creará el proyecto sobre el que trabajaréis.
  • Para continuar, abrid el Eclipse que habéis instalado en el C:\Development y abrid un proyecto desde un proyecto existente.
Nuevo proyecto

Nuevo proyecto

Un error común

 

16 thoughts on “Cómo configurar Cordova 3 para trabajar en entorno Android

  1. GRAN post, de verdad, me has salvado la vida, había instalado phonegap hace mas de un año y ahora despues de formatear el PC veo que ha cambiado la forma de instalarlo (o por lo menos antes lo hice sin lineas de codigo ni tocar variables)
    Muchas gracias de verdad

  2. Tremendo! Gracias por la mano!
    Al propósito tienes algo relacionado a la integración del plugin de Facebook (fb connect) de phonegap ?
    Abrazo!

  3. Hola, como les va? Excelente el tutorial, no he encontrado uno más actualizado y completo que este.

    Sin embargo, tengo un problema. He seguido sus pasos al pie de la letra, pero cuando llego al punto donde debo ejecutar los comandos cordova, me arroja el error:

    “cordova” no se reconoce como un comando interno o externo, programa o …”

    De verdad no se porque razón ocurre esto. El Path esta bien y el node.js parece estar bien, sin embargo en la instalación de cordova no obtengo un “install successful” o algo parecido. Puede que por allí este el problema. Espero puedan ayudarme, gracias!!

    • Este error suele estar relacionado con el Path, ¿te has asegurado de que estén bien? ¿Puedes acceder desde consola a los comandos que has definido en el Path?

      • Listo! Ya funcionó, me olvidaba de que al modificar el path, es necesario, como mínimo cerrar y abrir nuevamente sesión. (Preferiblemente reiniciar). Ya todo esta funcionando correctamente.

        P.D.: Luego tuve error de ECONNREFUSED. Esto lo solucioné configurando el https-proxy.

        Muchas gracias por tan buen tutorial

  4. Hola, cuando intento crear un nuevo proyecto desde Eclipse me dice que la ubicación de Android SDK no ha sido establecida (Location of the Android SDK has not been setup in preferences.), cuando intento establecerla elijo como path la carpeta sdk dentro del ADT Bundle pero no me deja.
    Desde ya, gracias.

  5. Soy muy principiante y después de haber leído este post, encontré la solución. Te agradezco muy bueno. Saludos desde Argentina.

  6. Hola,
    tengo un problema a la hora de ejecutar el comando cordova platform add android.

    Me salta un error con el siguiente mensaje:
    “Error: ANDROID_HOME is not set and “android” command not in your PATH. You must fulfill at least one of these conditions”

    He creado la variable ANDROID_HOME para indicarle donde está el SDK, pero siguie sin funcionar,

    Alguna sugerencia?

Leave a Reply