En este primer tutorial vamos a ver qué es Phonegap y cómo se instala en Windows, para posteriormente crear nuestro primer proyecto y comprobar que todas las herramientas están instaladas correctamente.

¿Qué es Cordova?

Cordova/Phonegap es un framework de desarrollo de aplicaciones móviles de código abierto. Este framework nos permite desarrollar nuestra aplicación mediante tecnologías estandarizadas como son HTML5, CSS3 y Javascript, que se ejecutan mediante lo que llamaremos un WebView.

Podemos decir que un WebView es una versión reducida de un navegador web incluida en nuestra aplicación que nos va a permitir ejecutarla. Este visualizador nos permitirá renderizar el código HTML5 y CSS3, así como ejecutar el código Javascript de manera que parezca que estamos utilizando código nativo (Java, Objetive-C...).

Mediante este WebView podremos acceder además a una API específica de Phonegap para el acceso al hardware del dispositivo, como puede ser la vibración, la cámara, o el posicionamiento mediante el GPS del dispositivo.

¿Qué diferencias hay entre Phonegap y Cordova?

En esencia son lo mismo, ya que la única diferencia que hay entre los dos es que Cordova es el núcleo del framework, mientras que Phonegap es una ampliación del mismo, que permite además compilar las aplicaciones con el servicio en la nube de Phonegap, llamado Phonegap Build.

Todos los comandos básicos se pueden ejecutar llamando tanto a "cordova" como a "phonegap" en la línea de comandos, por lo que a efectos prácticos podemos decir que es lo mismo.

¿Y cuál es la razón de que tengan distintos nombres? En 2011 Adobe compró Nitobi , la empresa que desarrollaba Phonegap. Como su desarrollo se inició como una herramienta de código libre, varias empresas habían colaborado en su desarrollo (IBM, Oracle, etc.), así que tras la compra y para evitar problemas legales, Adobe cedió el código a la Fundación Apache bajo el nombre de Apache Cordova , manteniendo la marca comercial y los servicios de compilación en la nube.

Instalación en Windows 7/8

Para realizar la instalación en Windows, es necesario tener instalado una serie de herramientas previas, como son:

  • Java JDK
  • Android SDK y Android Developer Tools (ADT)
  • Apache ANT
  • NodeJS
  • Cordova o Phonegap
  • Un editor de código a tu elección

1.Instalar Java JDK

Lo primero será instalar el Kit de desarrollo de Java si no está instalado ya en el sistema. Para ello iremos a la web de Oracle para descargarlo.

Java JDK

Descargaremos la ultima versión actualizada del mismo (Java SE 8u25) teniendo en cuenta que sea para la misma arquitectura de procesador y sistema operativo instalado en el PC: 32 o 64 bits.

Imagen 0 en Instalación de Phonegap en Windows

Imagen 1 en Instalación de Phonegap en Windows

Comenzamos la instalación del JDK

Imagen 2 en Instalación de Phonegap en Windows

Imagen 3 en Instalación de Phonegap en Windows

Una vez realizada la instalación, faltaría añadir Java al PATH de Windows, para que sea reconocido mediante interfaz de comandos. Para ello iremos a la configuración avanzada de Windows, en Propiedades del Sistema / Opciones avanzadas / Variables de entorno

Imagen 4 en Instalación de Phonegap en Windows

Hacemos clic en "Variables de Sistema" y añadimos la variable de usuario JAVA_HOME, y añadimos a la variable de sistema PATH la ruta al directorio bin de Java

Imagen 5 en Instalación de Phonegap en Windows

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

Imagen 6 en Instalación de Phonegap en Windows

Imagen 7 en Instalación de Phonegap en Windows

Ahora haremos la comprobación de que está correctamente instalado mediante el comando de consola

javac -version
Imagen 8 en Instalación de Phonegap en Windows

2.Instalar Apache Ant

Apache Ant es una librería de Java que nos hará falta para automatizar la compilación de ciertos proyectos de Java, como son las aplicaciones Android. Tan solo tenemos que descargar el archivo .zip y añadir la carpeta donde lo hayamos descargado a la variable PATH

Apache Ant
PATH = C:\apache-ant\bin;...
ANT_HOME = C:\apache-ant;...

Imagen 9 en Instalación de Phonegap en Windows

Imagen 10 en Instalación de Phonegap en Windows

3.Instalar Android SDK

El siguiente paso es instalar el SDK de Android, para lo que descargaremos los archivos desde la dirección:

Android SDK

Imagen 11 en Instalación de Phonegap en Windows

Lo que haremos será descomprimirlo en una carpeta, y añadir al PATH las carpetas tools y platform-tools

Imagen 12 en Instalación de Phonegap en Windows

Imagen 13 en Instalación de Phonegap en Windows

Vamos a probar que funciona correctamente abriendo una consola y tecleando android . Debería abrirse el Android SDK Manager, para descargar la ultima versión de las herramientas de compilación de Android, así como alguna imagen de la máquina virtual.

Imagen 14 en Instalación de Phonegap en Windows

Procederemos a instalar las actualizaciones haciendo clic en el boton Install

2.Instalar NodeJS

En este paso instalaremos NodeJS, que es un entorno de programación para aplicaciones de servidor basado en el lenguaje de programación Javascript. A través de una consola de comandos nos permitirá instalar y ejecutar Cordova/Phonegap para preparar y compilar nuestros proyectos.

Para instalar NodeJS procederemos a descargarlo desde su página web

NodeJS download

Imagen 15 en Instalación de Phonegap en Windows

Imagen 16 en Instalación de Phonegap en Windows

Una vez instalado, lo ejecutaremos en una consola de Windows mediante el comando node

4.Instalar Cordova/Phonegap

El último paso será instalar Cordova/Phonegap a través de NodeJS. Para ello ejecutaremos en una consola con permisos de administrador:

 > npm install -g cordova

Imagen 17 en Instalación de Phonegap en Windows

Para comprobar que está correctamente instalado tan solo tendremos que escribir en la consola el comando cordova

 >cordova

Imagen 18 en Instalación de Phonegap en Windows

Generar un proyecto base en Cordova

Para crear nuestra primera aplicación Cordova vamos a utilizar el proyecto base que genera por defecto, utilizando los comandos de la interfaz. El comando que vamos a utilizar es:

 >cordova create MiProyecto net.openwebinars.app miprimeraapp

Cordova se descargará los ficheros necesarios para realizar la generación del proyecto. Los parámetros que utilizamos son:

  • MiProyecto : nombre de la carpeta donde se va a crear el proyecto
  • net.openwebinars.app : nombre identificativo único de la aplicación
  • miprimeraapp : nombre corto de la aplicación

Imagen 19 en Instalación de Phonegap en Windows

Imagen 20 en Instalación de Phonegap en Windows

Una vez creado el proyecto procederemos a agregar las plataformas para las que queremos compilar nuestra aplicación. En nuestro caso vamos a añadir la plataforma Android, teniendo en cuenta que solo podremos añadir aquellas plataformas de compilación cuyo SDK ya esté instalado en nuestro sistema operativo, es decir, solo podremos añadir Android si ya tenemos perfectamente configurado Android SDK.

En el caso de querer compilar para iOS, es necesario disponer un equipo con OSX y tener instaladas las librerías de desarrollo en XCode. De igual manera, para compilar para Windows Phone necesitaremos sus librerías específicas de desarrollo.

Si queremos compilar para otras plataformas y no disponemos de los sistemas necesarios, siempre podemos acudir a Phonegap Build, el servicio en la Nube de Phonegap, para que nos compilen la aplicación para todas las plataformas deseadas, por un módico precio.

Lo primero sería entrar en el directorio del proyecto recientemente creado:

> cd MiProyecto

El comando para añadir la plataforma Android sería:

> cordova platform add android

Imagen 21 en Instalación de Phonegap en Windows

Este comando nos generará la carpeta platforms en el proyecto, donde estarán alojados todos los archivos para la compilación de Android dentro de su correspondiente carpeta.

La primera vez que compilemos tardará un poco más de tiempo y puede que nos de un error, debido a que no tenemos instalada la plataforma de android-19 . Procederemos a su instalación mediante el comando visto anteriormente android que nos permite ejecutar el Android SDK Manager.

Imagen 22 en Instalación de Phonegap en Windows

Una vez instalada podemos volver a proceder a añadir la plataforma Android al proyecto

Imagen 23 en Instalación de Phonegap en Windows Imagen 24 en Instalación de Phonegap en Windows

Ya solo nos faltaría compilar la aplicación e instalarla en un dispositivo móvil mediante el comando

 > cordova build android

Imagen 25 en Instalación de Phonegap en Windows

Podemos encontrar nuestra aplicación de prueba generada en la carpeta

MiProyecto\platforms\android\ant-build\CordovaApp-debug.apk

Imagen 26 en Instalación de Phonegap en Windows

Ésta es la generación más básica de una aplicación en Phonegap. En las próximas entregas veremos más funcionalidad con estos comandos, como para por ejemplo ejecutar la aplicación para probarla en un emulador Android, o para instalarla mediante la conexión USB directamente en tu dispositivo móvil.