Empezando con PhoneGap

7
59428

Empezando con PhoneGap

0. Índice de
contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core i7, 8 GB DDR3)
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.4
  • PhoneGap 3.3.0-0.18.0
  • NodeJS 0.10.24

2. Introducción

Cuando desarrollamos una aplicación móvil nuestro objetivo es que se pueda ejecutar en la mayor
cantidad de dispositivos, pero nos encontramos con el problema de que algunos son Android, otros son IOS,
otros FirefoxOS, … y cada una de estas plataformas cuenta con distintos entornos y lenguajes de desarrollo.
Lo que supone que nuestro desarrollo se multiple por las n plataformas en las que queremos que esté disponible,
lo que lo hace prácticamente inviable.

En el caso de que nuestra aplicación no requiera de ningún servicio nativo del dispositivo (acceso a la cámara,
los contactos, el acelerómetro, …) simplemente podremos desarrollar una aplicación web «responsive» que se ajuste
al tamaño de pantalla del dispositivo.

Si estamos en el caso de que nuestra aplicación tiene que acceder a alguno de estos servicios nativos,
forzosamente tendrá que ser dentro del marco de una aplicación nativa. Con lo que nos encontramos con el problema
de las distintas plataformas.

PhoneGap llega para solucionar este problema. Básicamente lo que nos ofrece es poder desarrollar nuestra
aplicación en HTML5, CSS y Javascript y poder ejecutarla de forma nativa en las distintas plataformas; ofreciendo
un único API Javascript para acceder a los servicios nativos.

De esta forma, por ejemplo, si nuestra aplicación necesita acceder a la cámara del dispositivo, solo tenemos que
crear una página HTML5 que haciendo una llamada Javascript nos permita hacer uso de la cámara de cualquier dispositivo
independientemente de su plataforma. Con lo que conseguimos ejecutar nuestra aplicación en todas las plataformas del mercado
teniendo solo conocimientos de HTML5, CSS3 y Javascript. No tenemos que aprender Java, ni Objective-C, ni ningún
otro lenguaje; reduciendo drásticamente el tiempo y por tanto el coste de desarrollo.

Inicialmente PhoneGap fue desarrollado por la empresa Nitobi pero tras la adquisición de ésta por parte de Adobe
todo el proyecto se traslado a la Apache Software Foundation con el nombre de Apache Cordova, convirtiéndose PhoneGap
en una distribución de Apache Cordova totalmente libre para su uso comercial.

3. Instalando PhoneGap

Empezar con PhoneGap se ha hecho mucho más fácil gracias a la incorporación de su CLI (Command Line Interface)
basado en NodeJS.

Por tanto lo primero que tenemos que asegurarnos es que tenemos instalado en nuestra máquina de desarrollo NodeJS;
si no es así basta con ir a la página
http://nodejs.org
, pulsar en el botón «Install»
y seguir los pasos de instalación dependiendo del sistema operativo de nuestra máquina de desarrollo. Esto nos
registrará automáticamente el npm (Node Packaged Modules) que nos permitirá la instalación de nuevos
módulos entre ellos PhoneGap.

Cumplido el anterior paso lo único que tenemos que hacer es ejecutar esta sentencia en un terminal:

sudo npm install -g phonegap

Esta ejecución nos instala el comando «cordova» necesario para empezar a utilizar PhoneGap.

4. Creando nuestro primer proyecto PhoneGap

La creación del proyecto es completamente independiente de cualquiera de las plataformas en las que vaya a
ejecutarse la aplicación.

Para la creación vamos a abrir un terminal, nos vamos a posicionar en el directorio donde queramos tener nuestro
proyecto y vamos a ejecutar:

cordova create  [ID] [NAME] 

El campo PATH es obligatorio y los campos ID y NAME son opcionales, aunque es recomendable que se pongan dado que si no se hace nos pondrá unos por defecto, con el nombre de HelloCordova; que para proyectos «reales» no es lo más recomendable. 😉

Por ejemplo:

cordova create HolaMundo com.autentia.holamundo HolaMundo

Con este comando PhoneGap nos crea una carpeta con el nombre del proyecto (HolaMundo) donde encontramos el
directorio www con los recursos web de nuestra aplicación: una home de ejemplo, css, js e imágenes, estos son
los ficheros que compondrán nuestra aplicación. Además del fichero config.xml que contiene información importante
de la configuración y distribución de la aplicación.

Ahora vamos a añadir las plataformas en las que queremos que se pueda ejecutar nuestra aplicación. PhoneGap tiene
soporte para Android, IOS, Blackberry, Windows Phone, Tizen, Amazon Fire OS. Para este ejemplo vamos a utilizar las
plataformas Android e IOS.

Antes de nada tenemos que asegurarnos de tener en nuestra máquina de desarrollo todo lo necesario para trabajar con
Android e IOS. En el caso de IOS necesitamos que nuestra máquina de desarrollo sea un Mac y tener instalado las últimas
versiones del SDK y el XCode. Para el caso de Android también necesitamos tener instalada la última versión del SDK
y comprobar que todas las herramientas están definidas en el path del sistema. Es decir, que tenemos declarada la
variable de entorno PATH al menos de esta forma:

export PATH=$ANDROID_SDK_HOME/tools:$ANDROID_SDK_HOME/platform-tools:$PATH

Hecho esto podemos ejecutar en el terminal:

cordova platform add ios android

Con este comando lo primero que hará PhoneGap será comprobar que se cumplen las condiciones antes especificadas
de Android e IOS; si no es así nos informará del error. Si es así nos montará dentro de nuestro proyecto los proyectos nativos de cada una de las plataformas especificadas. En nuestro caso nos creará un proyecto Android y otro IOS que podremos abrir con el Android Studio y el XCode respectivamente.

Ahora construimos el proyecto para cada una de las plataformas con el comando:

cordova build

Este comando hará que PhoneGap construya el proyecto para las dos plataformas anteriormente añadidas, en el caso de
querer solo Android, por ejemplo, acompañamos al comando con el nombre de la plataforma. Realiza una copia de nuestra carpeta de recursos a cada uno de los proyectos, de tal forma que nosotros solo modificamos el código en un punto del proyecto y PhoneGap se encarga de actualizar el proyecto de cada una de las plataformas.

cordova build android

Ahora para visualizar nuestro proyecto en las distintas plataformas con el código que PhoneGap crea por defecto,
bastará con ejecutar:

cordova emulate

Este comando ejecuta los emuladores de las plataformas dadas de alta en el proyecto: IOS y android. Pero por temas
de rendimiento no aconsejo ejecutarlos a la vez. Para ejecutar cada uno de ellos, haríamos:

    cordova emulate android
    cordova emulate ios
  

Con lo que desplegamos la aplicación que viene de ejemplo en los distintos emuladores como se puede apreciar en las imágenes:

5. Conclusiones

En este tutorial hemos visto lo rápido y fácil que es empezar a trabajar con PhoneGap gracias al CLI implementado en NodeJS. En
siguiente tutorial de este tema desarrollaremos una aplicación que acceda a la cámara del dispositivo.

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.

7 COMENTARIOS

  1. bien, tengo duda con la maquina virtual
    solo necesito tener instalado el sdk la ultima version y esto
    export PATH=$ANDROID_SDK_HOME/tools:$ANDROID_SDK_HOME/platform-tools:$PATH

    y nada mas ?
    se supone que todo funciona asi o hay que instalar algo adicional para que funcione android u otro

    gracias

  2. Buenas!,

    tengo un problema ya que aunque esta linea de terminal funciona «sudo npm install -g phonegap» cuando pongo cualquier linea con «cordova» me indica «-bash: cordova: command not found». No me deja ni crear el proyecto, ahora si pongo «phonegap create HolaMundo com.autentia.holamundo HolaMundo» me crea el proyecto sin ningún problema, evidentemente al intentar crear las plataformas me termina diciendo command not found.

    Espero que me podais ayudar.

    Tengo otra duda, vi que desde Xcode se puede crear projects PhoneGap pero no lo consigo. Seguí varios tutoriales pero hace referencia a unas carpetas lib de phonegap las cuales no se de donde las descargan.

    Un saludo y espero vuestra respuesta

  3. Hola Dani,

    Lo mejor es que actualmente no uses phonegap y utilices cordova directamente.

    npm install -g cordova

    Tampoco es buena práctica instalar algo de npm con sudo, yo lo sé ahora, por eso te aconsejo que NodeJS lo gestiones con NVM.

    Saludos

  4. Muchas gracias por el tutorial!

    Cuando trato de ejecutar la intrucción «cordova build» me da el siguiente error: «Error: Failed to find ‘JAVA_HOME’ environment variable. Try setting setting it manually.»

    ¿Cómo lo puedo solucionar?

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad