PhoneGap/Cordova por línea de comandos

Hace unos meses estuve trasteando con Cordova (antiguo PhoneGap) y, en aquel momento, la última versión estable era la 1.5.0, que dependía bastante de Eclipse para desarrollar aplicaciones para Android.

Cada vez me da más pereza tener que utilizar IDEs pesados y me gusta más poder hacer las cosas por línea de comandos, así que aprovechando que quería hacer una aplicacioncilla para el móvil, me he animado a ver qué avances hay en Cordova 2.x y la viabilidad de usarlo desde línea de comandos.

Si anteriormente monté todo el entorno sobre Linux Mint, esta vez lo he hecho sobre Windows, y para tenerlo como futura referencia, aquí dejo los pasos para generar una aplicación para Android con PhoneGap/Cordova sin usar Eclipse:

Instalar Java Development Kit

Aunque la aplicación se desarrolle con HTML5+JS+CSS, al final Cordova usa como contenedor una aplicación nativa que, en el caso de Android, está desarrollada en Java.

Para poder compilar esta aplicación nativa, hace falta tener instalado un JDK más o menos moderno. Para ello descárgalo de la página de oficial e instálalo con las opciones por defecto.

Una vez instalado, verifica que existe una variable de entorno llamada JAVA_HOME apuntando a la carpeta de instalación del JDK. Si no existe, créala.

Instalar Ant

Ant es una herramienta de compilación muy común en el mundo Java y es la que usa Cordova para compilar la aplicación. Existe un port para .NET llamado NAnt que gozó de buena salud antes de que se impusiera MSBuild.

Para instalarla, sólo tenemos que descargar la última versión de la página de Ant, descomprimirla en una carpeta y añadir al path la subcarpeta bin. Por ejemplo, si hemos descomprimido ant en la carpeta c:\ant-1.8.4, deberemos añadir al path c:\ant-1.8.4\bin.

Podemos comprobar que la instalación de ant funciona correctamente ejecutando el comando ant en una consola y deberíamos ver algo parecido a esto:

c:\>dev>ant
Buidfile: build.xml does not exist!
Build failed

Si no obtenemos este mensaje, es que algo falla. Asegúrate de que la variable de entorno JAVA_HOME está establecida correctamente, porque si no ant se quejará de que no encuentra algunos jars.

Instalar Android SDK

A continuación es necesario instalar el SDK de Android siguiendo las instrucciones de la documentación de Android.

Al concluir la instalación podremos ejecutar el Android SDK Manager con el que deberemos instalar los paquetes que nos indica en la documentación y, al menos, una plataforma (versión de Android para la que queremos desarrollar).

Si no tenemos un dispositivo físico para probar, podemos ejecutar el AVD Manager (está en el Menú de Inicio) y crear un emulador para alguna de las plataformas de Android que hayamos instalado.

Instalar Cordova 2.0

La instalación de Cordova es muy fácil. Sólo hay que descargar el paquete de instalación y descomprimirlo en una carpeta.

Si quieres escribir menos, puedes añadir al path la ruta donde están los scripts de Cordova que vamos a utilizar, que es <carpeta_cordova>\lib\android\bin, pero no es imprescindible y tampoco lo vas a utilizar demasiadas veces.

Crear una aplicación de ejemplo

Cordova incluye un script que nos permite crear la estructura completa de una aplicación de ejemplo, para ello tenemos que ejecutar:

c:\><carpeta_cordova>\lib\android\bin\create.bat

Si lo ejecutamos sin parámetros, se creará una aplicación de ejemplo para comprobar que Cordova funciona. Podemos ajustar algunas cosas indicando ciertos parámetros al ejecutarlo:

c:\><carpeta_cordova>\lib\android\bin\create.bat myapp com.koalite.SampleApp Main

Los parámetros son la carpeta donde se creará la aplicación, el paquete en que se encuentra la clase principal y el nombre de la clase principal.

Esto nos genera una estructura de carpetas similar a la que expliqué en el post anterior sobre cómo hacer esto con Eclipse . La “raíz” de nuestra página web estaría situada en la carpeta assets\www, y allí podemos encontrar los ficheros de ejemplo generados por Cordova.

Poder compilar la aplicación deberemos incluir un fichero de configuración indicando a Cordova, entre otras cosas, qué plugins queremos que estén disponibles en la aplicación.

Como expliqué hace tiempo, cada plugin de Cordova contiene una parte nativa escrita en Java, por lo que a la hora de empaquetar la aplicación debemos indicar a Cordova qué plugins vamos a utilizar para que los pueda incluir en el paquete definitivo.

Lo más sencillo es partir del fichero de ejemplo que podemos encontrar en <carpeta_cordova>\lib\android\xml, copiarlo a la carpeta <carpeta_app>\res\xml y modificarlo como necesitemos.

En la carpeta donde hemos creado la aplicación existe una subcarpeta llamada cordova que contiene varios scripts:

  • clean: elimina la carpeta bin y el resto de artefactos de compilaciones anteriores.
  • debug: compila el proyecto y genera el paquete de instalación en la carpeta bin.
  • emulate: lanza el emulador de Android que tengamos configurado por defecto en el AVD Manager.
  • boom: realiza todos los pasos anteriores de una vez, clean, debug y emulate.
  • log: permite ver en consola el log de depuración del dispositivo android conectado.

Todos estos comandos debemos ejecutarlos desde la carpeta raíz de la aplicación, por ejemplo para compilar la aplicación hay que ejecutar:

c:\carpeta_app>cordova\debug

Esto nos generará un fichero en la carpeta bin llamado AppName-debug.apk que podremos instalar en cualquier dispositivo android (o en el emulador, usando el comando cordova\emulate).

Si necesitamos compilar en modo release, podemos hacerlo usando directamente ant en lugar de los scripts de cordova:

c:\carpeta_app>ant release

Y nos generará en la carpeta bin un fichero llamado AppName-release.apk.

En la página de Cordova hay unas instrucciones para el uso de las herramientas de línea de comandos, pero algunas de las cosas que he tenido que hacer no las explicaban por ninguna parte, como la necesidad de crear (o copiar) el fichero config.xml

Resumen

Viendo la extensión del post puede parecer que configurarlo todo es muy complicado, pero en realidad es bastante sencillo. He querido dejar las instrucciones muy detalladas porque luego cuando vuelvo a tener que montarlo desde cero me ahorra mucho tiempo poder ir “a tiro hecho”.

La ventaja fundamental de usar Cordova por línea de comandos es que te ahorras tener que instalar Eclipse, que es no es precisamente ligero (sobre todo si estás usando una máquina virtual para hacer las pruebas) y, realmente, a menos que vayas a escribir un plugin, tampoco es muy necesario. Con tu editor favorito para modificar HTML, JS y CSS y un par de comandos, lo tienes todo resuelto.


5 comentarios en “PhoneGap/Cordova por línea de comandos

  1. Hola, muy bueno el tutorial, era lo que estaba buscando, pero me sale un error a la hora de ejecutar el archivo create.bat me dice que “node” no se reconoce como un comando interno o externo.

    De antemano agradezco tu tiempo en esto y gracias por el tutorial

  2. Juan María Hernández dijo:

    La versión que usé en ese momento no necesitaba node, pero puede que las últimas versiones sí que lo usen para algo.

    Seguramente te baste con instalar node.js. Es muy fácil, puedes ver las instrucciones en http://nodejs.org

  3. puede no parecer complicado cuando te acostumbras…
    pero la neta si tienes ke hacer tantas mamadas es complicado…

    por ejemplo ya tengo cordova instalado..
    hago un:
    cordova create test

    y si luego tengo ke copiar cordoba.js de kien sabe donde.. pa ke chingados existe el comando create?

  4. realice todos los pasos, pero al colocar el comando create.bat c:\myapp com.personal.myapp myapp NO HACE NADA, que hago agradeceria su ayuda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>