Cómo instalar PhoneGap en Windows

23. abril 2014 16:35 by Javier Cantos in HTML5, Mobile, PhoneGap, Programación, Web  //  Tags:   //   Comentarios (2)

¿Qué es PhoneGap?

PhoneGap es un framework para el desarrollo de aplicaciones móviles basado en estándares como JavaScript, HTML5 y CSS3. Las aplicaciones que se obtienen como resultado son híbridas, es decir a medias entre una webapp y una aplicación nativa, usamos el móvil para encapsular en un WebView nuestro proyecto web. PhoneGap además permite el uso de características propias como el acelerómetro, GPS, cámara, almacenamiento o notificaciones. Otra de las características de PhoneGap es que está basado en Apache Cordova plataforma de software de código abierto lo que nos permite utilizarlo sin necesidad de licencia de ningún tipo.

Ventajas e inconvenientes

La principal ventaja que vais a encontrar es que el código generado es multiplataforma, salvando las distancias claro, al final siempre hay que hacer algún retoque pero gran parte de vuestra aplicación será compatible para las principales plataformas Android o iOS.

Otra ventaja es la rapidez de desarrollo, el tiempo se reduce puesto que codificamos en un solo lenguaje y publicamos en varias plataformas.

Cómo desventaja principal es el rendimiento, al estar basado en un modelo web siempre vamos a encontrarnos una experiencia de usuario más pobre que si lo hacemos en nativo, me refiero sobre todo a problemas de latencia en respuesta UI, en modelos de smartphones de última generación este factor es menos acusado debido a la potencia con la que cuentan los últimos modelos, pero si bajamos un escalón la experiencia no suele ser tan agradable.

¿Que tipo de proyectos son recomendables?

  • Sobre todo para cátalogos electrónicos.
  • Catálogo de productos.
  • Guías de servicios.
  • Publicaciones electrónicas.
  • Sindicación de contenidos.

Instalación 

Cómo instalar NodeJS

Para empezar con la instalación accedemos a la dirección electrónica de PhoneGap, el primer requisito que nos vamos a encontrar es la necesidad de tener instalado NodeJS, para ello solo es necesario ir a la página oficial y descargar el paquete MSI, al finalizar la instalación el solo nos añadirá el PATH a la instalación de Windows, si queréis comprobarlo solo tenéis que echar un vistazo a las variables de entorno del sistema, haciendo clic en botón derecho sobre MiPC y pulsando luego en propiedades.

Instalación de PhoneGap

Para la instalación de PhoneGap, será necesario que NodeJS este ya instalado correctamente en nuestra máquina, deberemos de abrir un terminal de consola desde Windows y escribir lo siguiente:

C:\> npm install -g phonegap

 

The Command-Line Interface

Qué es el Command-Line Interface o CLI, es la interfaz mediante línea de comandos, esta herramienta nos va a permitir crear nuevos proyectos, hacer compilaciones, correr nuestro proyecto en emuladores o en dispositivos reales desde una terminal de consola ó mediante shell, incluso realizar publicaciones remotas haciendo uso del servicio en la nube de PhoneGap Build.

Cómo crear nuestro primer proyecto

Para crear nuestro primer proyecto lo primero que tenemos que decidir es cuáles serán nuestras plataformas destinos, Android, iOS, Windows Phone, ya que será necesario instalar el SDK para cada una de ellas, en este ejemplo vamos a partir de la construcción de una aplicación para entorno Android, manos a la obra, descargamos la SDK de Android de la página oficial y lo instalamos.

Abrimos nuevamente un terminal de consola y generamos la plantilla de proyecto, para ello escribimos lo siguiente:

phonegap create hola-mundo
cd hola-mundo
phonegap run android

¿Algún problema?

Posiblemente sí, para realizar la compilación del paquete APK en caso de Android, la SDK necesita de la herramienta Apache Ant para generar el build, para dar solución a este problema es necesario instalar Apache Ant, existe un paquete para Windows que podéis descargar desde el repositorio de Google en la siguiente dirección: https://code.google.com/p/winant/

Otra cuestión a resolver son dos nuevas variables de entorno que se requieren como son:

  • ANT_HOME, esta variable la crea y establece automáticamente el instalador anterior winant.
  • JAVA_HOME, al trabajar para entorno Android debería estar asignada a la versión 32bits de la JDK de JAVA, en una instalación normal el directorio por defecto es: 
    c:\Archivos de Programas(x86)\Java\jdk.1.6.0_39

Una vez solucionados los problemas anteriores, volvemos a ejecutar phonegap run android desde la consola y ahora si deberíamos de ver nuestra aplicación en el emulador AVD generado por la propia SDK de Android. Si disponemos de un dispositivo Android conectado a nuestro puerto USB y además habilitada la depuración USB en el dispositivo, automáticamente el despliegue se realizará en el smartphone o tablet. Hasta aquí ya tenemos nuestro proyecto listo para añadirle las funcionalidades que requiera la aplicación, en próximos posts veremos cómo hacer uso de los plugins para hacer uso de elementos propios de cada dispositivo cómo el acceso a la cámara o el acelerómetro.

Resumen de la instalación

  • Se requiere NodeJS instalado.
  • Se requiere SDK Android si hemos optado por esta plataforma.
  • Necesitamos de Apache Ant para el build del paquete Android.
  • Verificar las variables de entorno.
  • Por último realizar la instalación propia de PhoneGap desde NodeJS.

Comentarios (2) -

Abel
17/06/2014 5:49:18 #

La mejor guia!

Pep Sánchez C. (@pepinca)
15/10/2014 21:36:32 #

Especificamente lo de como reparar el error de ant con build de phonegap en CLI genial.

En general muy buen documento indispensable para una buena colección de PHONEGAP y como no para arrancar. Gracias por tu ayuda.

Saludos desde Mallorca.

Agregar comentario

Profesional independiente en el sector Tecnologías de la Información y la Comunicación, especializado en entornos web Microsoft e integración de sistemas con dispositivos móviles

Más sobre mi

Archivo del blog

Paymill Wrapper. NET es una API para una fácil integración de facturación recurrente y pagos online a través del producto  Paymill.com, puedes ver más información sobre el proyecto en Codeplex y GitHub