Vamos a trabajar con la versión 3.4 de Phonegap, que es la versión actual en el momento en que se realiza este tutorial (Mayo 2014).
Instalación
Phonegap ha cambiado la forma de instalarse en sus versiones más recientes. Antes (hasta la versión 2.9), lo que hacíamos era descargarnos Phonegap, obteníamos una serie de carpetas, y ya lo añadíamos a nuestro proyecto, por ejemplo en eclipse. Pero lo que hacíamos era bajarnos Phonegap al completo, con todos sus plugins. En las nuevas versiones, en lugar de proporcionar Phonegap al completo, se ha optado por ofrecer un proyecto básico, y el desarrollador añade utilidades a medida que las vaya necesitando. Hay que ver el lado positivo de esto, ya que si no queremos, por ejemplo, acceder a la brújula de nuestro dispositivo, no tenemos por qué tener el plugin que me lo permita en el proyecto, ocupando espacio de forma innecesaria. Lo que vayamos necesitando ya lo iremos añadiendo.
La forma en la que obtenemos Phonegap en sus nuevas versiones es mediante node.js. Es evidente, pues, que lo primero que debemos hacer es instalar node.js en nuestro ordenador. Para hacerlo visitamos la página de node y seguimos las instrucciones.
Una vez que ya tenemos node instalado, procedemos a instalar Phonegap en el pc. La orden que debemos escribir en línea de comandos (terminal en Linux/Mac, cmd en sistemas Windows) es:
npm install -g phonegap
Podríamos querer instalar una versión concreta de Phonegap, en ese caso...
npm install -g phonegap@2.9.0
Para actualizar la versión de Phonegap:
npm update -g phonegap
Creación de un proyecto HolaMundo básico
Llegados a este punto, ya lo tenemos todo listo para crear un proyecto Phonegap. Para ello vamos a la carpeta en la que vayamos a trabajar y escribimos en línea de comandos:
phonegap create primeraapp
primeraapp hace referencia a la carpeta que contendrá todo el árbol de directorios que forman el proyecto creado.
Se pueden añadir algunas opciones más al crear la aplicación, con el uso de flags como --id o --name, pero todo esto se podrá editar en el fichero de configuración principal de nuestro proyecto, situado en la carpeta www/config.xml.
Si queremos estas opciones en la orden anterior directamente y sin flags, podemos hacerlo de esta forma:
phonegap create primeraapp com.example.Calculadora Calculadora
Con esto se crean una serie de carpetas, dentro de la carpeta primeraapp, que contienen una estructura básica de proyecto Phonegap. De esta forma ya está todo listo para ponernos a escribir código, y posteriormente pasar a las tareas de compilación.
Directorios
A continuación veremos una breve explicación de la función de las carpetas más importantes.
Dentro de la carpeta de la aplicación (en este caso primeraapp) vemos platforms que en principio estará vacía. Aquí se instalarán los ficheros necesarios cuando se añada un sistema concreto para el cual compilar, como veremos en siguientes apartados. En este caso he añadido la plataforma Android, por lo que podríamos compilar nuestro proyecto para obtener el fichero .apk de forma local, o instalarlo en alguna máquina virtual Android.
Otra carpeta importante es plugins, donde se instalarán los ficheros necesarios para poder hacer uso de las API que nos facilita Phonegap para acceder a los elementos de los dispositivos móviles, como la cámara por ejemplo.
Finalmente en la carpeta www tendremos una serie de directorios que son los que se suelen tener en el desarrollo de aplicaciones web, obviamente podemos tener en una carpeta todo, e incluso código javascript y CSS dentro de un mismo fichero html, pero es deseable tener cada cosa en su debido lugar.
config.xml
En www podemos ver el fichero config.xml. En la documentación oficial de Cordova especifica que este fichero está en la raíz de la aplicación, y que se encontraba en la carpeta www hasta la versión 3.3, pero al crear un proyecto Phonegap en su versión 3.4 no ha sido así. Tampoco es algo preocupante porque aún tiene soporte el hecho de dejarlo situado ahí, por lo que lo dejaremos en www. Este es un importante fichero que contiene configuraciones generales, que determinarán el comportamiento de la aplicación siendo ajeno a la plataforma en la que vaya a ejecutarse. Podemos ver algunos elementos interesantes para todas las plataformas soportadas:
La forma en la que obtenemos Phonegap en sus nuevas versiones es mediante node.js. Es evidente, pues, que lo primero que debemos hacer es instalar node.js en nuestro ordenador. Para hacerlo visitamos la página de node y seguimos las instrucciones.
fuente: nodejs.org
Una vez que ya tenemos node instalado, procedemos a instalar Phonegap en el pc. La orden que debemos escribir en línea de comandos (terminal en Linux/Mac, cmd en sistemas Windows) es:
npm install -g phonegap
Podríamos querer instalar una versión concreta de Phonegap, en ese caso...
npm install -g phonegap@2.9.0
Para actualizar la versión de Phonegap:
npm update -g phonegap
Creación de un proyecto HolaMundo básico
Llegados a este punto, ya lo tenemos todo listo para crear un proyecto Phonegap. Para ello vamos a la carpeta en la que vayamos a trabajar y escribimos en línea de comandos:
phonegap create primeraapp
primeraapp hace referencia a la carpeta que contendrá todo el árbol de directorios que forman el proyecto creado.
Se pueden añadir algunas opciones más al crear la aplicación, con el uso de flags como --id o --name, pero todo esto se podrá editar en el fichero de configuración principal de nuestro proyecto, situado en la carpeta www/config.xml.
Si queremos estas opciones en la orden anterior directamente y sin flags, podemos hacerlo de esta forma:
phonegap create primeraapp com.example.Calculadora Calculadora
Con esto se crean una serie de carpetas, dentro de la carpeta primeraapp, que contienen una estructura básica de proyecto Phonegap. De esta forma ya está todo listo para ponernos a escribir código, y posteriormente pasar a las tareas de compilación.
Directorios
A continuación veremos una breve explicación de la función de las carpetas más importantes.
Otra carpeta importante es plugins, donde se instalarán los ficheros necesarios para poder hacer uso de las API que nos facilita Phonegap para acceder a los elementos de los dispositivos móviles, como la cámara por ejemplo.
Finalmente en la carpeta www tendremos una serie de directorios que son los que se suelen tener en el desarrollo de aplicaciones web, obviamente podemos tener en una carpeta todo, e incluso código javascript y CSS dentro de un mismo fichero html, pero es deseable tener cada cosa en su debido lugar.
config.xml
En www podemos ver el fichero config.xml. En la documentación oficial de Cordova especifica que este fichero está en la raíz de la aplicación, y que se encontraba en la carpeta www hasta la versión 3.3, pero al crear un proyecto Phonegap en su versión 3.4 no ha sido así. Tampoco es algo preocupante porque aún tiene soporte el hecho de dejarlo situado ahí, por lo que lo dejaremos en www. Este es un importante fichero que contiene configuraciones generales, que determinarán el comportamiento de la aplicación siendo ajeno a la plataforma en la que vaya a ejecutarse. Podemos ver algunos elementos interesantes para todas las plataformas soportadas:
- La etiqueta <author> especifica al autor y se puede añadir un correo de contacto y una web.
- La etiqueta <description> nos permite dar una breve explicación sobre el proyecto, y podrían aparecer en la tienda de aplicaciones de la plataforma en la que se publique, al igual que <author>.
- El atributo id de la etiqueta <widget> nos permite dar una identificación a la app. También podemos especificar su versión con su correspondiente atributo dentro también de <widget>.
- Con <name> declaramos el nombre de la aplicación, y será el nombre que veremos tanto en la pantalla de la tienda de aplicaciones como en el dispositivo.
Por supuesto podemos ver más opciones, pero las citadas anteriormente son las más importantes, y las que con más frecuencia manipulemos.
También podemos ver algunas preferencias globales multiplataforma, declaradas siguiendo un formato nombre-valor tal que así:
<preference name="nombre" value="valor" />
con diferentes nombres y valores, como la preferencia "fullscreen", que tiene como valor "true".
Podemos ver más información sobre este fichero de configuración aquí.
