¿Cómo instalar Apache Cordova en Windows?

Antes de empezar este tutorial te aviso que requiere una fuerte tolerancia a la frustración, una buena internet, mucha paciencia y la capacidad de leer los errores de la consola (no hay que entenderlos, sólo leerlos para poder buscar en google)

ah y casi se me olvida mencionar, difícilmente demorarás menos de una hora.

Paso 0: Instalar GitBash

Recomiendo antes de empezar instalar gitbash, es una consola para windows que te va ahorrar hartos problemas innecesarios durante el proceso. Hay varias formas de instalar gitbash pero lejos la más fácil es seguir este tutorial muy corto para instalar rails y gitbash.

Instalar Rails

Paso 1: Instalar el JDK de java:

Lo puedes bajar desde: http://www.oracle.com/technetwork/java/javase/downloads/index.html

ahí selecciona la opción de descargar el JDK y escoge la versión de tu computador.

Paso 2: Instalar Nodejs

Entra a www.nodejs.org

y selecciona la opción de instalar, ojo que cuando estés ejecutando el archivo que bajaste te fijes en la ruta que se va a instalar, ojalá incluso la anotes, aunque lo más probable es que sea c:\program files\nodejs

Paso 3: Agregar Node y NPM al path de windows.

Para eso primero hay que ir al panel de control y seleccionar la opción de sistema.

Panel de control de windows

Dentro de este panel hay que ir a sistema y dentro de sistemas en ese mismo tab hay que seleccionar la opción variables de entorno. (Ojo que el JDK de java también debería puesto ahí)

ahí dentro hay que agregar a la variable PATH en las variables de usuario, si no aparece debes poner como nombre PATH si aparece no la registres como nueva, pone editar y agrégala después de un ;

El valor tienes que agregar es la dirección de donde está el programa, en la mayoría de los casos es c:\program files\nodejs (pero podría ser distinto) si ya hay un valor previamente agregado puedes ingresar uno nuevo escribiendo ; como separador.

Paso 4: Instalar cordova

Si el paso anterior fue realizado correctamente ahora debes abrir el gitbash y escribir ahí mismo:

npm install -g cordova

Ahora si intentamos usar esta versión de npm lo más probable es que vayamos a terminar con este error.

la solución es fácil hay que crear la carpeta npm ahí dentro, o sea habría que escrbir mkdir c:\users\nombre-usuario\AppData\Roaming\npm

recuerda cambiar nombre-usuario por el nombre de usuario de tu computador, en el caso anterior por ejemplo es Diego.

y luego repetir de nuevo

npm install -g cordova

y con eso tendrás apache cordova instalado en tu sistema.

Pero no hay que celebrar todavía, falta instalar Android

Paso 5: Instalar el SDK de Android

Los SDK son kits de desarrollo de software, existen para muchos sistemas y vamos a tener que instalar los correspondientes a la plataforma de Android, (si quisiéramos hacer apps para Windows tendríamos que ocupar el de Visual Estudio, y para OSX Xcode).

Hay varias formas de descargar para descargar el SDK de Android, después de varios experimentos de instalaciones y setup la que mejor resultó es instalando el Stand Alone de la página oficial

Android SDK | Android Developers

Aquí debemos bajar el ADT Bundle para la versión correspondiente de nuestro computador (NO bajar la versión para eclipse, ir a VIEW ALL y bajar el ADT BUNDLE correspondiente para tu sistema operativo)

Paso 6: Copiar la dirección del SDK

Una vez descargado el SDK uno estará tentado a hacer click en siguiente hasta que termine de instalar, pero vamos a necesitar rescatar un dato antes de empezar, y ese es la dirección donde se instalará, entonces cuando te diga donde quieres instalar el SDK copia y pega el valor. (si no lo hiciste puedes probar reinstalándolo)

Paso 7: Poner la variable de sistema ANDROID_HOME

Vamos a volver a donde estaban las variables de sistema, pero esta vez NO vamos a crear una variable para el usuario, sino que vamos a utilizar la caja de abajo, para crear una variable de sistema.

En este lugar vamos insertar la variable ANDROID_HOME con el valor que copiamos en el paso anterior, que vendría siendo algo así como c:\program files\android\android-sdk (este valor puede cambiar dependiendo de como se haya instalado, la versión de windows y el idioma del computador).

Paso 8: Instalar nuestro emulador (y herramientas de desarrollo de Android).

Ahora debemos abrir el programa que acabamos de instalar, el SDK Manager, si ya está abierto debemos cerrarlo y abrirlo como administrador.

Para abrirlo como administrador debemos hacer click derecho sobre el ícono y seleccionar la opción de correr como administrador (creo que esto no aplica a Windows XP).

Una vez dentro podremos instalar correctamente nuestras herramientas de desarrollo para todas las versiones de Android que queramos.

Para este taller vamos a trabajar con la API lvl 19, pero puedes seleccionar más versiones si así lo deseas pero son pesadas y muy lentas de descargar. Una vez que termine de descargar e instalar podemos probar si todo salió bien.

¿Como empezar?

primero creemos una aplicación desde la misma linea de comando

cordova create hello com.example.hello HelloWorld

Para que esto funcione sólo es necesario que cordova se haya instalado bien, pero eso no quiere decir que podamos correr nuestro sistema en Android.

Entramos a la carpeta de la aplicación que acabamos de crear

 cd hello

y ahora es donde agregamos la plataforma, por ejemplo si quisiéramos agregar android.

cordova platform add android

Paso 9: Instalar ANT

Aquí tenemos que:

1. Descargar ANT

2. Descomprimirlo

3. Copiar la ruta de la carpeta

4. se generan/ agregan dos variables de entorno, un ANT_HOME con la ruta a la carpeta de ant, y a la de path, agregarle “%ANT_HOME%\bin”

En detalle

1. Para poder hacer el build de tu aplicación y enviar los datos a un celular android necesitas tener instalado ANT, descárgalo desde aquí

En Windows hay que descargar el zip

2) Ahora lo que se instala tras bajar el zip hay que descomprimirlo y tendremos la sorpresa de que no hay ningún instalador

3) lo que tenemos que hacer ahora es agregar la dirección de donde está ant a la variable de sistema ANT_HOME, o sea hay que copiar la dirección de la carpeta que acabamos de descomprimir

4) Para eso volvemos a las propiedades de sistema, vamos a variables de entorno, agregamos ANT_HOME y en el valor ponemos la dirección a la carpeta bin a donde descargamos y descomprimimos la carpeta (Nota, no es necesario dejarlo en la carpeta de descarga)

Una vez que hayamos hecho eso tenemos que editar el PATH, para agregar una dirección nueva,

;%ANT_HOME%\bin

Paso 10:

Finalmente para probar que todo haya salido podemos escribir:

cordova build