Instalar Apache Cordova en Windows

Proyecto desplegado en el emulador

Si estas empezando en el desarrollo móvil y no sabes si escoger entre Android, IOS o Windows Phone  pero tienes conocimientos en HTML5, Javascript y CSS3, entonces puede ser una buena opción ver como instalar Apache Cordova en Windows.

Introducción

Phonegap es un framework desarrollado por Nitobi. El objetivo de este framework es permitir que una aplicación se desarrolle una sola vez y que el mismo código pueda ser compilado y desplegado en diversos sistemas operativos móviles. En general, las aplicaciones sobre Phonegap están creadas sobre HTML5, Javascript, CSS3 y están soportadas por un conjunto de librerías propias  del framework que, de acuerdo al sistema operativo, permiten acceder a los recursos del dispositivo, como cámara, acelerómetro entre otros.

Este framework resulto tan interesante que Adobe lo compró para incluirlo en sus productos. En este punto el código de Phonegap pasa a Apache y es llamado Apache Cordova, convirtiendose Phonegap en una especie de distribución de Apache Cordova. En la actualidad Apache CordovaPhonegap se mantienen libres. La diferencia es que Phonegap provee servicios de compilación en la nube, y estos son compatibles, es decir puedes desarrollar con Apache Cordova pero compilar usando los servicios de Phonegap Build que provee Adobe. Esto debido a que Phonegap tiene por motor a Apache Cordova.

Con el objetivo de iniciar con Apache Cordova vamos a crear una aplicación para Android bajo Windows y utilizaremos Android Studio para importar el código y empaquetarlo, claro que en esta entrada solo abarcaremos hasta la configuración de Apache Cordova.

1. Que haremos?

Configuraremos un equipo con Windows 7 x64 sobre Virtualbox, en este descargaremos, instalaremos y configuremos todos los componentes para crear nuestra aplicación. Luego, crearemos un dispositivo virtual y desplegaremos el proyecto por defecto que generará Apache Cordova. Durante este proceso nos apoyaremos en Node.js y Apache ANT para la descarga de Cordova y la compilación del proyecto respectivamente.

2. Componentes a Instalar

  • Java JDK
  • Node.js
  • Apache ANT
  • Android Studio (incluye SDK, Tools e imagen emulador)
  • Apache Cordova

Durante la instalación de los componente del sistema se modificaran variables del sistema, por esta razón recuerde cerrar todas las consolas, para aplicar los cambios. De igual manera ejecute siempre la consola como administrador.

3. Instalación Java

Descargaremos el instalador de Java  jdk-7u67-windows-x64.exe , este es compatible con el sistema operativo que estamos trabajando.   Para descargarlo, ingresa a Oracle  y dependiendo de tu sistema operativo la versión a seleccionar puede variar. Luego procede a descargar e instalar.

Seleccionando el Java JDK

Seleccionando el Java JDK

Instalando el Java JDK

Instalando el Java JDK

Luego de instalar Java, procederemos a configurar la variable JAVA_HOME. Para ello, ingresaremos con la combinación de teclas Windows + Pause; en la ventana emergente seleccione Cambiar Configuración, en Propiedades de Sistema seleccione la pestaña Opciones Avanzadas y luego de clic el botón Variables de Entorno. Agregue en Variables de usuario la variable JAVA_HOME y en el valor ingrese la ruta de instalación del JDK,  la cual fue   C:Program FilesJavajdk1.7.0_67. Es importante validar de no agregar / al final de la ruta.

Configurando JAVA_HOME

Configurando JAVA_HOME

Adicionando variable JAVA_HOME

Adicionando variable JAVA_HOME

4. Instalación Node.js

Para descargar Apache Cordova requeriremos de Noje.js; este lo obtenemos desde Node.js, en nuestra instalación usaremos exactamente la versión node-v0.10.32-x64.msi.

Instalación Node.js

Instalación Node.js

Para validar la instalación de Node.js, abrirmos una consola de Windows y ejecutamos.

Verificando instalacion Node.js

Verificando instalacion Node.js

5. Instalación Apache ANT

Apache ANT   lo podemos obtener desde ApacheAnt.org, en este caso la ultima versión disponible es Apache Ant 1.9.4. Luego de descargarla debemos extraer los archivos, por ejemplo en el disco c:. Luego procedemos a configurar la variable ANT_HOME con el valor de la ruta de instalación, por ejemplo C:apache-ant-1.9.4.

Adicionando variable ANT_HOME

Adicionando variable ANT_HOME

Luego modificaremos la variable de usuario PATH existente, agregando al final ;%ANT_HOME%bin.

Configurando path para Apache ANT

Configurando path para Apache ANT

Para validar si la variable esta correctamente configurada ejecutamos en la consola de Windows el siguiente comando.

Verificando instalación Apache ANT

Verificando instalación Apache ANT

 

6. Instalación Android Studio y Android SDK

Consulta este post para este paso;  Instalación Android Studio y Android SDK.

7. Descarga de componentes de Android SDK

Llegados a este punto procederemos a descargar el  SDK y el emulador para la Android 4.4.2 (API 19). Esta versión de Android es la utilizada por defecto por Apache Cordova 3.6.3 para crear y compliar proyectos. En esta descarga también incluimos el paquete extra Intelx86 Atom  y Intel x86 Emulator Accelerator (HAXM Installer).  Los emuladores en Android son bastante lentos, pero con este paquete y con la virtualización activada en al bios se mejorara considerablemente el rendimeintos Si quieres ver mas detalles de como configurar el emulador Intelx86 Atom ingresa a Speeding Up the Android* Emulator on Intel® Architecture. Si casualmente tienes por antivirus AVAST, entonces primero mira este post Problemas con Avast sobre Windows 8.1 instalando Intel HAXM

Descargando paquetes Android SDK

Descargando paquetes Android SDK

 

Descargando complementos Android SDK

Descargando complementos Android SDK

8. Creando un Android Virtual Device AVD

Luego de terminarse de descargar los componentes, ingresamos a Tools, Manage AVDs. En la ventana de Android Virtual Device crearemos un dispositivo para poder desplegar el proyecto que crearemos con Apache Cordova.

Ingresando a Manage AVDs

Ingresando a Manage AVDs

Creado emulador Android

Creado un Android Virtual Device

9. Instalación Apache Cordova

Ahora si, hemos descargado y configurado los componente previos  para poder iniciar la descarga de Apache Cordova; crear el proyecto, adicionar la plataforma Android y finalmente desplegarlo en el dispositivo virtual. Para ello nos apoyaremos en Node.js utilizando el siguiente comando.

Instalación Apache Cordova

Instalación Apache Cordova

10. Creación del proyecto con Apache Cordova

Ahora crearemos un carpeta de la siguiente manera C:Desarrollo. En esta ruta de agregará el proyecto que crearemos.

 

Creando proyecto Apache Cordova

Creando proyecto Apache Cordova

En la ultima linea hemos especificado varios parametros; HelloWorld será el nombre del directorio en el que se generará nuestro proyecto. Dentro a su vez, estará el subdirectorio www, el cual contiene la pagina inicial de la aplicación. Tambien en este subdiretorio estaran los directorio de css, js y img para estilos, javascript e imágenes respectivamente. En el directorio HelloWorld tambien podremos apreciar el archvio config.xml, con la metadata requerida para generar y distribuir la aplicación. Los otros dos parámetros son opcionales: com.example.hello proporciona el paquete de clases de la aplicación y Hello World el titulo de la aplicación a visualizar. Si se desea modifcar estos campos luego de la instalación debemos editar el archivo config.xml.

11. Agregando la plataforma Android al proyecto

Hasta este punto al proyecto no se le ha agregado las plataforma sobre las cuales se desea trabajar. En este ejemplo solo agregaremos Android. Para ello, ingresamos al nuevo directorio creado y agregamos la plataforma ejecutando los siguientes comandos.

Agregando Android plataforma Apache Cordova

Agregando Android plataforma Apache Cordova

 12. Compilando el proyecto

En este punto, si hemos configurado correctamente Apache ANT, no tendremos problemas.

 

Compilando proyecto Android sobre Apache Cordova

Compilando proyecto Android sobre Apache Cordova

 13. Desplegando el proyecto sobre un dispositivo virtual

Para desplegar el proyecto utilizaremos el comando emulate. Si no especificamos el dispositivo virtual a utilizar, entonces Apache Cordova seleccionará automáticamente el primer dispositivo que encuentre, el cual previamente creamos en el Manager AVD en pasos anteriores. Si no hemos instalado el emulador de Intel, entonces deberemos esperar unos minutos mientras se inicia por primera vez el emulador. En este ejemplo el emulador no se ejecutará utilizando el Intel Atom, debido a que es una maquina virtual.

Después de un tiempo veremos que carga la aplicación con la imagen por defecto para el proyecto creados.

Proyecto desplegado en el emulador

Proyecto desplegado en el emulador

 

Hasta aquí hemos terminado la instalación de Apache Cordova, ahora falta que creemos un proyecto utilizado jQueryMobile (JQM) y poder importarlo este dentro de Android Studio para así poder trabajarlo, compilarlo y, si se requiere empaquetarlo para firmar y cargar a la tienda de Google. Si quieres crear un prototipo rápido usando jQueryMobile no dudes ingresar a la entrada Diseñando en jQuery Mobile con JQM Designer en la solo con arrastrar y soltar podrás crear y visualizar tus diseños.

Print Friendly
Quiero compartirlo en...Share on Facebook0Share on Google+0Tweet about this on Twitter0Share on LinkedIn0

12 thoughts on “Instalar Apache Cordova en Windows

  1. Hola.

    En el ultimo paso se queda la consola con el mensaje “Waiting for emulator…” y de ahí no pasa.

    Por qué puede pasar?. Hasta ahí ha ido todo perfecto.

    Un saludo

  2. venga,,,,, tan clarito y yo tengo que fallar en algo

    en el paso de modificar el PATH he probado
    C:\Users\Paco\AppData\Roaming\npm;%ANT_HOME%\bin
    y
    C:\Users\Paco\AppData\Roaming\npm;%ANT_HOME%bin

    en el texto pone una cosa y en la imagen otra…

    pero al testarlo desde cmd de indica;
    “ant” no se reconoce como un comando interno o externo,
    programa o archivo por lotes ejecutable.

    la diferencia es que uso w10

Deja un comentario

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

five + fourteen =