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.
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:
Esta ejecución nos instala el comando “cordova” necesario para empezar a utilizar PhoneGap.
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:
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:
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:
Hecho esto podemos ejecutar en el terminal:
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:
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.
Ahora para visualizar nuestro proyecto en las distintas plataformas con el código que PhoneGap crea por defecto, bastará con ejecutar:
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:
Con lo que desplegamos la aplicación que viene de ejemplo en los distintos emuladores como se puede apreciar en las imágenes:
0 comentarios:
Publicar un comentario