Wednesday, October 18, 2017
Android, Movil

Instalar Apache Cordova en Windows

>helibertoarias helibertoarias
septiembre 30, 2014

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.

(Visitado 4.063 veces, 1 visitas hoy)
Heliberto Arias
Mi nombre es Heliberto Arias y vivo en Barranquilla, Colombia. Soy desarrollador de software. He estado en el desarrollo de software desde el 2007. Cree este blog en 2013 para compartir lo que voy aprendiendo cada año y en el escribo de tecnologías Microsoft principalmente en C# (y aunque he usado VB declaro que lo detesto) y SQL Server desarrollado aplicaciones y servicios web entre otro s.Me gustaría mucho si te suscribes a mis redes en Youtube, Google+, Twitter, e Instagram.

Comments

  • Carlos
    Carlos

    El primer tutorial que he encontrado que funciona perfectamente y lo explica al 100% de forma perfecta. Muchas gracias!

    Abr 13, 2015, 3:47 am
    Responder
    • Heliberto Arias
      Heliberto Arias

      Me alegra que te haya servido Carlos. Siguenos visitando.

      Abr 17, 2015, 7:51 pm
      Responder
  • guli
    guli

    Excelente tutorial. Muy claro y preciso

    Abr 19, 2015, 1:53 pm
    Responder
    • Heliberto Arias
      Heliberto Arias

      Que bueno poderte ayudar Guli.

      Abr 19, 2015, 2:04 pm
      Responder
  • Xim
    Xim

    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

    Abr 22, 2015, 3:24 pm
    Responder
  • Pedro
    Pedro

    hola muchas gracias por este tutorial me ayudo mucho en que carpeta esta la apk generada  saludos

    May 14, 2015, 10:48 pm
    Responder
  • paco
    paco

    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

    Abr 25, 2016, 8:51 pm
    Responder
  • sayonara orozco alvarez
    sayonara orozco alvarez

    buenas noches , a la hora de ver la version del apache ant, me marca que no es un archivo por lote

    Abr 27, 2016, 5:10 am
    Responder
  • Sdai
    Sdai

    ¡Muy bueno! Gracias 🙂

    Abr 27, 2016, 8:23 pm
    Responder
  • sa
    sa

    En la paso 5 no me aparece el PATH. tengo windows 10

    Jun 21, 2016, 2:16 pm
    Responder
  • claudia altamirano
    claudia altamirano

    hola yo no puedo instalar desde la ventana de comandos, con el comando npm como me pueden ayudr porfavor

    Feb 27, 2017, 8:10 pm
    Responder
    • helibertoarias
      helibertoarias

      Claudia, valida que lo tengas referenciado en el path de Windows, agrega esto al final del path. “;C:\Program Files\nodejs\”.

      Mar 16, 2017, 2:12 pm
      Responder
  • jaime Aldana
    jaime Aldana

    Que tal, al final cuando trato de compilar el proyecto “cordova build” me marca un error y no lo he podido pasar, el error es :

    Error: cmd: Command failed with exit code 1 Error output:
    FAILURE: Build failed with an exception.
    *What went wrong:
    Unable to start the daemon process

    Abr 6, 2017, 6:16 pm
    Responder

Leave a Comment

Your email address will not be published.

Trece + 10 =

Login
Remember me
Lost your Password?
Password Reset
Login