Instalacin de PhoneGap/Cordova

en Windows 7/8/8.1/10

Giovanny Olea

Tabla de contenido
1
2

Qu es Cordova? ................................................................................................... 4

1.1

Diferencias entre PhoneGap y Cordova ....................................................................... 4

Instalacin .............................................................................................................. 5

2.1
2.2
2.3
2.4
2.5
2.6

Instalacin Java JDK .................................................................................................... 5

Instalar NodeJs ........................................................................................................... 7
Instalar Cordova/PhoneGap desde Consola ................................................................. 8
Instalar Apache Ant ..................................................................................................... 8
Instalar Android SDK ................................................................................................... 9
Instalar PhoneGap Desktop ....................................................................................... 11

Referencias ........................................................................................................... 12

Giovanny Olea

1 Qu es Cordova?
Cordova/PhoneGap es un framework de desarrollo de aplicaciones mviles de cdigo
abierto. Este framework nos permite desarrollar nuestra aplicacin mediante tecnologas
estandarizadas como son HTML5, CSS3 y JavaScript, que se ejecutan mediante lo que
llamaremos un WebView.
Podemos decir que un WebView es una versin reducida de un navegador web incluida en
nuestra aplicacin que nos va a permitir ejecutarla. Este visualizador nos permitir
renderizar el cdigo HTML5 y CSS3, as como ejecutar el cdigo JavaScript de manera que
parezca que estamos utilizando cdigo nativo (Java, Objetive-C...).
Mediante este WebView podremos acceder adems a una API especfica de PhoneGap para
el acceso al hardware del dispositivo, como puede ser la vibracin, la cmara, o el
posicionamiento mediante el GPS del dispositivo.

1.1 Diferencias entre PhoneGap y Cordova

En esencia son lo mismo, ya que la nica diferencia que hay entre los dos es que Cordova
es el ncleo del framework, mientras que PhoneGap es una ampliacin del mismo, que
permite adems compilar las aplicaciones con el servicio en la nube de PhoneGap, llamado
PhoneGap Build.
Todos los comandos bsicos se pueden ejecutar llamando tanto a Cordova como a
PhoneGap en la lnea de comandos, por lo que a efectos prcticos podemos decir que es lo
mismo.
Y cul es la razn de que tengan distintos nombres? En 2011 Adobe compr Nitobi, la
empresa que desarrollaba PhoneGap. Como su desarrollo se inici como una herramienta
de cdigo libre, varias empresas haban colaborado en su desarrollo (IBM, Oracle, etc.), as
que tras la compra y para evitar problemas legales, Adobe cedi el cdigo a la Fundacin
Apache bajo el nombre de Apache Cordova, manteniendo la marca comercial y los
servicios de compilacin en la nube.

Giovanny Olea

2 Instalacin
Para hacer una correcta instalacin de PhoneGap necesitaremos de las siguientes
herramientas de desarrollo:

Java JDK
NodeJS
Apache Ant
Android SDK
PhoneGap

2.1 Instalacin Java JDK

El primer paso es ir al enlace siguiente:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
y ah daremos clic en Aceptar y descargaremos la ultima versin del JDK, en este caso es la
versin 8.

Giovanny Olea

Continuando se instalara el paquete y ahora configuramos las propiedades del sistema. Nos
vamos a Propiedades del sistema/Opciones Avanzadas/Variables de Entorno

Hacemos clic en Variables del Sistema y aadimos la variable de usuario llamndola

JAVA_HOME, y aadimos a la variable del sistema PATH la ruta al directorio BIN de
JAVA.

JAVA_HOME = C:\Java\jdk1.8.0_25
PATH = C:\Java|jdk1.8.0_25\bin;

Giovanny Olea

Aceptamos y ahora abriremos la consola escribiendo el siguiente comando para verificar

que realmente java se encuentra globalmente en nuestro sistema:

O pueden digitar cualquiera de estos comandos:

javac -version
javac --version
javac -v

2.2 Instalar NodeJs

El siguiente paso ser instalar el paquete binario NodeJs basado en un lenguaje de
programacin JavaScript, esto para que nos permita escribir a travs de la consola un serie
de comandos por medio del gestor de paquetes Node.JS (NPM) la cual no podr descargar
libreras y enlazar o descargar programas de JavaScript.
Iremos al enlace https://nodejs.org/en/ y daremos clic en descargar:

Lo instalamos y abrimos consola para escribir node -version para verificar que este
instalado.
Giovanny Olea

2.3 Instalar Cordova/PhoneGap desde Consola

El siguiente paso es abrir la consola del sistema y digitar el siguiente comando para instalar
Cordova en nuestro sistema operativo Windows:
npm install g cordova
Para verificar que realmente esta instalado correctamente escribiremos en la consola
cordova.

2.4 Instalar Apache Ant

A continuacin instalaremos Apache Ant el cual es una librera de java. Iremos al sitio
oficial http://ant.apache.org/bindownload.cgi y descargaremos el .zip binario y a
continuacin agregaremos una variable del sistema ANT_HOME y modificaremos las
variables de entorno del sistema PATH:

Giovanny Olea

2.5 Instalar Android SDK

Siguiendo con la instalacin de PhoneGap ahora instalaremos Android Studio ya que
cuenta con el paquete SDK de Android para ya sea crear Emuladores de Android y tambin
nos brinda las APIs de todas y cada una de las versiones de Android. Simplemente iremos
al enlace siguiente:

Descargamos Android Studio e instalaremos el ejecutable.

En este caso ya no hay necesidad de modificar las variables de entorno para esta nueva
versin de Android Studio.
Ahora abriremos Android Studio y daremos clic en Configure/SDK Manager:

Giovanny Olea

y descargaremos las herramientas necesarias dando clic en Install n packages.

Giovanny Olea

10

2.6 Instalar PhoneGap Desktop

PhoneGap desktop es una aplicacin de escritorio que te permite gestionar tus aplicaciones
y tambin permite enlazar tu aplicacin con PhoneGap Mobile.
Finalmente entraremos a http://docs.phonegap.com/getting-started/1-installphonegap/desktop/ y descargaremos la app de Phonegap:

La instalaremos en nuestro sistema operativo.

Saludos cordiales, sgueme en Youtube.

Giovanny Olea

11

3 Referencias
https://openwebinars.net/instalacion-phonegap-windows/

Giovanny Olea

12