¿Cómo se programa? Desarrollo Phonegap = desarrollo web

Ok, sabemos qué es Phonegap, está instalado en nuestro pc, sabemos crear proyectos, e incluso hemos visto las posibilidades para compilar. Pero, ¿Cómo se programa en Phonegap?. A la hora de desarrollar aplicaciones móviles con Cordova/Phonegap, debemos pensar que estamos desarrollando aplicaciones web frontend, con la excepción de que accedemos al hardware de dispositivos móviles si lo necesitamos. Si lo hacemos así, nuestros primeros pasos serán más sencillos. Es decir, nuestra aplicaciones lucirán como queramos por medio de html y CSS, y se comportarán como deseemos mediante código javascript, ni más ni menos.

Para empezar a tener una visión general de cómo se va a comportar una aplicación desarrollada en Phonegap, vamos a analizar los componentes principales de una aplicación.

Elementos de la aplicación

Las vistas de la aplicación serán elementos de html, y los representaremos en archivos .html. Por ejemplo, si queremos mostrar una imagen, en una aplicación de Android nativa, se hace uso de las vistas, concretamente de una vista de imagen. En Phonegap esto lo mostramos con la etiqueta img de html. Las diferentes actividades de la aplicación con las que contábamos en Android, no serán más que distintos ficheros html a los que podremos acceder mediante enlaces <a>***.

Estilos

El estilo visual de la página web aplicación móvil lo conseguiremos con CSS3, aplicando estilos a los elementos html. Es importante hacer diseños responsive, puesto que nuestras aplicaciones podrán ser ejecutadas tanto en móviles como en tablets.

Comportamiento

La lógica de la aplicación la implementamos con javascript, como con cualquier aplicación web frontend. Con esto nos referimos a las acciones que sucederán al pulsar un botón, o a "jugar" con los elementos que veremos por pantalla según el estado de la aplicación...

Ayudas

Por supuesto podemos hacer uso de frameworks para facilitarnos la vida (y para incrementar el peso de las apps, todo sea dicho), como jQuery, Emberjs, Angularjs para javascript, o Bootstrap para los estilos CSS y conseguir diseños agradables a la vista con poco esfuerzo. Otras ayudas como Sass, Less para CSS, haml para html, CoffeeScript para javascript... son bienvenidas también.

Antes de usar las API que nos proporcionan Phonegap/Cordova, vamos a implementar algunas aplicaciones de ejemplo, que no necesitan acceder a ningún componente de los dispositivos móviles en los que serán ejecutadas. Esto nos servirá para entender el que considero el verdadero potencial de Phonegap. No sólo desarrollar aplicaciones móviles multiplataforma, además podemos, teniendo ya una aplicación web desarrollada previamente, hacer su versión móvil con muy poco esfuerzo.


*** Si alguien ya ha programado antes en Android puede preguntarse de qué forma podemos guardar el estado de la aplicación al pasar de una pantalla a otra, cosa que en Android se hace mediante el envío de intenciones. Al pasar de una página html a otra, el navegador "olvida" el estado de la web cuando carga el nuevo fichero html. Por ejemplo, relleno un campo con un nombre y pulso un enlace, y al cargar otra página y volver a la primera, el campo está vacío, porque se ha recargado la vista de nuevo. Como vamos a programar aplicaciones web, disponemos de diferentes formas, como pueden ser el uso de frameworks de javascript para hacer aplicaciones single-page (emberjs por ejemplo), o cargar todas las "pantallas" en la misma vista html, pero fuera de los límites de la pantalla del móvil, y mediante javascript y CSS hacer esas pantallas visibles aplicando distintas clases de CSS para que se coloquen dentro de la pantalla (o fuera de la misma). En siguientes apartados veremos cómo hacer esto de ambas formas, con ejemplos sencillos.