Crear una aplicación

Para crear una nueva aplicación abriremos una consola (o en Windows la consola de Node.Js llamada "Node.js command prompt") y ejecutamos el siguiente comando:

$ phonegap create myapp com.example.myapp HelloWorld
# O también podemos ejecutar:
$ phonegap create myapp

Donde:

  • El primer argumento, "myapp", es el nombre de la carpeta donde se generará el contenido. Si el directorio no existe se creará automáticamente.

  • El segundo argumento, "com.example.myapp", es el nombre del paquete del proyecto usado como identificador. Este argumento es opcional y se puede modificar después desde el fichero "config.xml" (pero hay que llevar cuidado ya que se utiliza en el código generado, como en el nombre de los paquetes de Java). El valor por defecto es "com.phonegap.helloworld", por lo que se recomienda asignarle un valor apropiado. Normalmente se suele utilizar el nombre inverso de dominio de la organización, pero añadiendo el nombre de la aplicación. Este nombre no puede contener espacios ni números después de un punto.

  • El tercer argumento, "HelloWorld", es el nombre del proyecto que se generará para las distintas plataformas (por ejemplo, el nombre del proyecto que se abrirá en Eclipse o XCode). Este argumento es opcional y también se puede modificar después desde el fichero "config.xml" (pero hay que llevar cuidado ya que se utiliza en el código generado). El valor por defecto es "HelloWorld", por lo que se recomienda indicar un valor adecuado. Este nombre no puede contener espacios y debe de empezar con mayúsculas.

Al ejecutar este comando se creará una carpeta con el nombre que le hayamos indicado, "myapp" en este caso, con todo el contenido necesario para empezar a desarrollar nuestra aplicación. La estructura de carpetas generada es la siguiente:

  • hooks - Esta carpeta se utiliza para añadir scripts que se ejecutarán cuando se produzcan determinados eventos, como por ejemplo antes o después, de la compilación, etc. En la propia carpeta se incluye un fichero con instrucciones para su utilización.

  • merges - Esta carpeta se utiliza para añadir código que nos permitirá modificar o personalizar nuestra aplicación para determinadas plataformas. Es posible que esta carpeta no se cree con la instalación inicial, pero la podemos crear nosotros. El contenido que pongamos aquí se unirá o mezclará (de ahí su nombre) con el de la compilación por plataforma. Por ejemplo, si creamos la carpeta merges/android/css/overrides.css, al compilar para android se utilizará este CSS en lugar del que esté colocado en la carpeta www/css.

  • platforms - Contiene el código específico de las plataformas móviles para las cuales se va a compilar. El código de esta carpeta es generado y no se ha de modificar manualmente.

  • plugings - Contiene los plugins o módulos instalados para nuestra aplicación, los cuales se utilizan para añadir funcionalidad como el acceso a las características nativas del móvil.

  • www - Contiene el código fuente de nuestra aplicación web. Esta carpeta es donde tendremos que desarrollar nuestra aplicación web de forma centralizada para después utilizarla en las distintas plataformas móviles que deseemos.

Al crear un nuevo proyecto todas las carpetas se encontrarán vacías a excepción de www, la cual incluye una primera aplicación de ejemplo (que mostrará el Hola Mundo de PhoneGap) con una estructura de carpetas básica (css, js, img, etc.). Para empezar a desarrollar un proyecto partiremos de este código de ejemplo, pudiendo modificar todo lo que queramos dentro de la carpeta www, incluso las subcarpetas de recursos (css, js, img, etc.).

Además de esta estructura, en la raíz de nuestra aplicación, encontraremos un fichero config.xml que se utiliza para la configuración del proyecto.

En las siguientes secciones se tratarán cada uno de estos puntos más en detalle.

Importante: El resto de comandos que ejecutemos utilizando el CLI de PhoneGap lo tendremos que hacer dentro de la carpeta del proyecto o aplicación, o en una subcarpeta dentro de la misma.