FastClick

En este capítulo hablaré brevemente sobre FastClick, una librería muy útil que elimina un delay de 300 milisegundos que hay en los navegadores móviles, entre que hacemos una pulsación en algún elemento y se procesa el evento deseado. Esto no sucede en los navegadores de escritorio.

fuente: http://blog.hexacta.com/

El retraso de 300 ms entre el evento touch end y el click esta implementado en el navegador móvil para soportar double taps o dobles pulsaaciones, es decir, espera 300 ms a la espera de recibir otro tap y saber si se trata de un double tap.
El double tap se suele usar en los dispositivos para hacer zoom sobre algún elemento de la página. Ya depende de nosotros si queremos darle esa funcionalidad o eliminarla a cambio de mayor velocidad de respuesta en nuestras aplicaciones móviles.

¿Cómo funciona fastclick? Lo primero que haremos será incluirlo en nuestro html de la siguiente manera:
<script type='application/javascript' src='/donde/quiera/que/este/fastclick.js'></script>

Y lo agregamos a los elementos que queremos que respondan rápidamente.
window.addEventListener('load', function() {
                new FastClick(document.body);
}, false);

En este caso, todo el body. Fastclick captura el evento touchend e inmediatamente dispara el evento click sobre el elemento pulsado, y anula el evento click que disparará el browser 300 ms después, para que no ocurra por duplicado.

En principio parece poco tiempo, pero se nota. Vamos a ver la diferencia entre usar FastClick en nuestras aplicaciones móviles Phonegap y no usarlo.

Tomaremos como base la calculadora implementada en el capítulo anterior. De hecho, ya está implementado FastClick en ella. Para evitar su uso, sólo tenemos que comentar las siguientes líneas en el .html:

window.addEventListener('load', function() {
                new FastClick(document.body);
}, false);

Compilamos la aplicación y al ejecutarla podremos notar ese retraso, y si no lo notamos, vamos a implementar FastClick en todos los botones de la calculadora menos en uno, para que al pulsar ese botón comparemos el tiempo de respuesta respecto a los demás botones. Como apuntaba antes, estas pruebas es conveniente usarlo en un móvil, porque en navegadores de escritorio no sucede este retraso, y no notaremos diferencia alguna.

Descomentamos las líneas que habíamos comentado antes, y compilamos y ejecutamos la calculadora de nuevo. Al incluir la librería FastClick en el html, y añadir las líneas que hemos descomentado, FastClick actúa en todos los "toques" que hagamos en pantalla(porque añadimos el addEventListener en window) de forma automática. Si deseamos que algún elemento cuente con el retraso original de 300 milisegundos, añadimos la clase needsclick al elemento en cuestión.

Si nos fijamos en el código de la tecla 0 de la calculadora, veremos que, a diferencia de las demás, tiene la clase needsclick que hace que FastClick no actúe al pulsarla. Para comprobar la diferencia pulsamos alternativamente la tecla 0 y cualquier otro número, y veremos que el tiempo que tardan en aparecer en la pantalla de la calculadora es diferente.

nota del autor: pensaba que los 300 ms eran cosa de Android, pero parece ser que es cosa de los navegadores web móviles, y nuestra aplicación en definitiva será un webview.

Calculadora jQuery

En un capítulo anterior comentaba la facilidad de compilar programas para plataformas móviles, a partir de proyectos web que ya tuviésemos escritos. Con este primer ejemplo veremos esto en la práctica.

Para empezar copiamos la carpeta esqueleto que contiene el proyecto base que preparamos en el capítulo anterior. Si queremos modificamos el id y el nombre de la app en el fichero config.xml.

Copiamos el siguiente código en el body del documento index.html, que quedaría así:

<div class="container">
            <h1 class="text-center">PhoneGap</h1>
            <div id="calculator">
                <div class="well result"> 0 </div>
                <div class="digits">
                    <div class="row">
                        <button class="btn btn-default digit col-xs-3">7</button>
                        <button class="btn btn-default digit col-xs-3">8</button>
                        <button class="btn btn-default digit col-xs-3">9</button>
                        <button class="btn btn-default digit col-xs-3">+</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-default digit col-xs-3">4</button>
                        <button class="btn btn-default digit col-xs-3">5</button>
                        <button class="btn btn-default digit col-xs-3">6</button>
                        <button class="btn btn-default digit col-xs-3">-</button>
                        
                    </div>
                    <div class="row">
                        <button class="btn btn-default digit col-xs-3">1</button>
                        <button class="btn btn-default digit col-xs-3">2</button>
                        <button class="btn btn-default digit col-xs-3">3</button>
                        <button class="btn btn-default digit col-xs-3">×</button>
                    </div>
                    <div class="row">
                        <button class="btn btn-default digit col-xs-3 needsclick">0</button>
                        <button class="btn btn-danger  digit col-xs-3">C</button>
                        <button class="btn btn-info    digit col-xs-3">=</button>
                        <button class="btn btn-default digit col-xs-3">÷</button>
                    </div>        
                </div>
            </div>
</div>

Si ejecutamos el index.html en un navegador veremos que tenemos una calculadora, cuya maquetación hemos logrado mediante Bootstrap. Bootstrap maqueta automáticamente la web mediante el uso de ciertas clases en los elementos del html. Todas las clases usadas en los elementos de esta aplicación son para que sean procesados por Bootstrap y ahorrarnos nosotros el escribir CSS. Además, nos facilita enormemente el crear diseños responsive, lo cual es importantísimo para nuestros propósitos, ya que existe una gran variedad pantallas en las que puede ejecutarse nuestra aplicación.
Por su parte, el id calculator, y las clases result, digits y digit servirán para seleccionar elementos en el javascript que añadiremos después. Ignoremos por el momento la clase needsclick que tiene el <button> de contenido 0.

Aplicación en navegador de pc:

A continuación pegamos el siguiente código al index.js:

var app = {
    // Application Constructor
    initialize: function() {
        //this.bindEvents();
    }
};

jQuery(function($) {
  var digits = $('#calculator .digits .digit');
  var leftBuffer = '';
  var rightBuffer = '';
  var calculator = { left: false, right: false, result: 0, operator: '+' };

  function calculate() {
    calculator.result = eval(calculator.left + calculator.operator + calculator.right);
    $('#calculator .result').text(calculator.result);
    calculator.left = null;
    calculator.right = null;
    leftBuffer = calculator.result + '';
    rightBuffer = '';
  }

  function isDigit(key) {
    var digits = "0123456789";
    var digit = false;
    if(digits.indexOf(key) != -1)
      digit = true;
    return digit;
  }
  

  digits.click(function() {
    var key = $(this).text();
    console.log(leftBuffer, rightBuffer);
    if(isDigit(key)) {
      if(calculator.left) {
        rightBuffer += key.toString();
        $('#calculator .result').text(rightBuffer);
      } else {
        leftBuffer += key.toString();
        $('#calculator .result').text(leftBuffer);
      }
    } else if(key != '=' && key != 'C') {
      switch(key) {
        case '÷': key = '/'; break;
        case '×': key = '*'; break;
      }
      calculator.operator = key;
      calculator.left = leftBuffer;
    } else if(key == 'C'){
      leftBuffer = '';
      rightBuffer = '';
      calculator.left = null;
      calculator.right = null;
      calculator.result = 0;
      $('#calculator .result').text(calculator.result);
    } else {
      calculator.right = rightBuffer;
      if(calculator.left.substring(calculator.left.length-1, 1) == '.')
        calculator.left += '0';
      if(calculator.right.substring(calculator.right.length-1, 1) == '.')
        calculator.right += '0';
      calculate();
    }
  });
});

He mantenido el objeto app para que no se produzcan errores al abrir ahora index.html en el navegador. Si deseamos podemos eliminarlo y comentar en el index.html la línea app.initialize(); Por lo demás, con el código mostrado, simplemente hacemos que la página web reaccione al pulsar las teclas de la calculadora.

Refrescamos la página y vemos que tenemos una aplicación web simple que simula el funcionamiento de una calculadora. No entraremos en detalles sobre el funcionamiento del código javascript, ya que no es el fin de este tutorial. En lo que sí que tenemos que centrarnos es en el hecho de que es una aplicación que puede ejecutarse en cualquier navegador y que en principio no está destinada a móviles. Pero al estar situada dentro de www en nuestro proyecto phonegap, podemos compilar y ya tendremos aplicaciones móviles, sin tener que hacer nada más con el código.

Abrimos en la carpeta esqueleto una consola y escribimos:

phonegap run android

Ahora podremos ver la versión móvil de la aplicación que acabamos de ver en la máquina virtual de Android de nuestro equipo. Si lo deseamos podríamos obtener el .apk para instalar en nuestro móvil desde Phonegap Build, o una vez compilado el proyecto en local, en la carpeta platforms/android/ant-build. Usad en este caso la versión unaligned del .apk.

Aplicación móvil:

Código fuente de la aplicación.

Esqueleto básico para el tutorial

Para todos los proyectos de este tutorial, partiremos de la misma base. Dejaremos lista una carpeta con los directorios y ficheros necesarios para poder empezar con cualquiera de los programas que usaremos. Así, cada vez que vayamos a empezar una nueva app tan sólo tendremos que copiar esa carpeta con las configuraciones listas.

Se trata del proyecto Phonegap básico de la versión 3.4, al que añadiremos Android a su carpeta platforms. Suponemos que tenemos instalado el SDK de Android. Posteriormente añadiremos Bootstrap para ayudarnos a maquetar las vistas, jQuery para simplificar las sintaxis de javascript y FastClick, una librería que elimina un retraso de 300 milisegundos que tiene lugar en Android desde que se pulsa un botón hasta que el sistema de Google lo interpreta como un click. Su funcionamiento lo veremos en la primera aplicación de ejemplo.

Vamos a la carpeta en la que vayamos a guardar la base para nuestro proyectos posteriores y escribimos en línea de comandos:

phonegap create esqueleto

Descargas

Ahora vamos a añadir Bootstrap, versión 3.1.1. Nos descargamos Bootstrap de la página oficial y descomprimimos la carpeta fonts de Bootstrap y la añadimos a la carpeta www del proyecto. También extraemos a la carpeta css del proyecto el fichero bootstrap.min.css. Hacemos lo propio con bootstrap.min.js en la carpeta js.

fuente: getbootstrap.com/

A continuación descargaremos jQuery de su web, y añadiremos el fichero jquery-1.11.0.min.js a la carpeta js del proyecto. Es evidente que la versión que usaremos de jquery es la 1.11.

fuente: jquery.com/

Lo siguiente será la librería FastClick, que la descargamos aquí. El fichero fastclick.js lo situaremos también en la carpeta js.



Código

Cuando tengamos todas las librerías completaremos el fichero index.html de manera que quede así.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Proyecto Phonegap</title>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center">PhoneGap</h1>
            
        </div>

        <script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="./js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./js/fastclick.js"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        <script type="text/javascript">
            window.addEventListener('load', function() {
                new FastClick(document.body);
            }, false);
            app.initialize();
        </script>
    </body>
</html>

Analizando un poco el código, vemos que al final del body hemos añadido los javascript de jquery, bootstrap, fastclick, el nuestro propio, e inicializamos fastclick de la manera que se nos aconseja hacer en su web. En el head del documento hemos añadido el css de bootstrap.

Ya tenemos el esqueleto básico de un proyecto Phonegap, ahora vamos a añadirle la plataforma Android para compilar en local(puedes saltarte este paso si quieres compilar únicamente mediante Phonegap Build).
El siguiente comando lo escribimos dentro de la carpeta esqueleto:

phonegap build android

Ya tenemos listo el proyecto que nos servirá para todos los ejemplos del tutorial. Cuando vayamos a crear un nuevo proyecto, con copiar la carpeta esqueleto que hemos dejado lista, y renombrarla, bastará. Obviamente es deseable que editemos el fichero config.xml para cambiar el nombre y el id de la aplicación que creemos en cada momento.

Código fuente.

¿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.

Compilación de un proyecto

Ya sabemos qué es Phonegap, lo hemos instalado en nuestro pc y hemos creado un proyecto base sobre el cual empezar a escribir el código de nuestra aplicación. A lo largo del tutorial, iremos viendo consejos y guías en lo referente al desarrollo de aplicaciones, pero en este apartado vamos a centrarnos en qué hacer cuando tenemos código escrito y estamos listos para compilar el proyecto y obtener los ejecutables de la aplicación, en la plataforma deseada.

Con Phonegap podemos compilar de dos formas:

Phonegap Build

Una de ellas es en la nube, mediante el servicio Phonegap Build que nos facilita Adobe. Como ya hemos explicado en apartados anteriores, esta es la principal diferencia que existe actualmente entre Phonegap y Cordova.

fuente: https://www.flickr.com/photos/doctorserone/5682929553/

Para empezar es necesario acceder a Phonegap Build y crear una cuenta. Para nuestro propósito, basta con elegir el plan gratuito, de forma que podemos compilar una aplicación privada, y tantas de código abierto como queramos. Una vez registrados y logueados en el sistema, podemos subir una aplicación privada, subiendo el proyecto como un fichero .zip o pegando el enlace del proyecto en GitHub.

Para una aplicación pública tenemos la opción de GitHub. Este método es bastante cómodo, pues no tenemos que preocuparnos de tener ningún SDK en nuestro sistema, ni añadirlo al proyecto, aunque no es el ideal para hacer pruebas. Tampoco tenemos que descargar ningún plugin de Phonegap en nuestro pc, tan sólo añadir alguna línea en los ficheros de configuración, pues Phonegap Build se ocupa de todo eso en la compilación (ver este enlace).

Cuando el servicio en la nube de Adobe haya concluído su trabajo, podremos ver lo siguiente:

Al hacer click en el icono de Android o Windows Phone nos descargaríamos el .apk o el .xap de nuestra aplicación, aunque también podemos hacer uso del código QR que nos facilita el servicio para bajarlo al móvil directamente, en caso de estar en un pc. Si nos fijamos no hemos podido compilar para iOS, ya que necesitamos estar registrados como desarrollador autenticado de aplicaciones para dicho sistema. Al hacer click en iOS pasamos a una vista más detallada, donde podemos ver que aunque no tengamos key de autenticación ni con Android ni con Windows Phone, se nos permite descargar la aplicación compilada, pero no es posible con el sistema de Apple. Si deseamos que Phonegap Build nos facilite la compilación para iOS, tenemos que añadir una key de desarrollador, y para ello podemos seguir las instrucciones que se nos facilitan desde esa misma web(haciendo click en no key selected).

Más información de Phonegap Build en el idioma de Shakespeare aquí.

Compilación local

Otra forma de compilar nuestra aplicación es de forma local en nuestro ordenador. Para ello necesitaremos el SDK de la plataforma para la que queramos compilar, instalado en nuestro pc. En este tutorial vamos a trabajar con android, por lo que necesitamos:

• ADT-bundle (es el SDK de android, lo podemos obtener aquí )
• Java JDK ( enlace a la versión 8 )
• Apache Ant ( enlace ). Aquí hay un enlace de ayuda para instalar apache Ant.

Cuando tengamos estos elementos, en nuestro caso, usando windows, debemos añadir algunas variables al Path del sistema, podemos seguir este video (minuto 9:56).

Cuando queramos probar la aplicación en nuestro entorno local, haremos uso de los comandos de consola de los que disponemos, tecleándolos mientras estamos situados en la carpeta raíz del proyecto. A continuación explicamos algunos.

El comando build nos permite compilar nuestro proyecto para la plataforma que le especifiquemos a continuación, por ejemplo phonegap build android nos compilaría para android, evidentemente.

Para instalar la aplicación en android, por seguir con el ejemplo anterior, tenemos el comando install, y en este caso instalaríamos la aplicación mediante phonegap install android.

Disponemos de un comando que es una combinación de los dos anteriores en una sola línea, dicho comando es run. Si tecleamos phonegap run android, en la aplicación que se ha creado al crear el proyecto debemos ver lo siguiente en nuestra máquina virtual android.

Si queremos el fichero .apk directamente en modo local, una vez compilada la aplicación, podemos encontrarlo en la carpeta platforms/android/ant-build.

Entrando en la carpeta platforms/android podremos ver el archivo AndroidManifest.xml, y alli veremos la siguiente línea:
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19"/>
Debemos tener presente que la versión 10 del sdk mínimo soportado es la 2.3 gingerbread. Estamos trabajando con Phonegap 3.4, y esta versión da soporte para android a partir de la versión 2.3. Teniendo esto en cuenta a la hora de configurar una máquina virtual Android (nada de versiones 2.1 o 2.2 con Phonegap 3.4) no habrá problemas(Ya me ha pasado que no me instalaba la app compilada, y era por tener la máquina virtual con Android 2.1).

Quiero compilar directamente en mi editor/IDE de desarrollo

Siempre está la opción de integrar Phonegap con algún entorno de desarrollo con el que no sintamos cómodos y compilar con un click, en lugar de acceder a Phonegap Build o de usar la consola de comandos.

Otra opción para compilar en local, si estamos desarrollando exclusivamente para android, es importar nuestro proyecto Phonegap al proyecto que podríamos tener en el eclipse que viene con el SDK de android. Si elegimos esta opción, podemos seguir este completo tutorial.

¿Usuario de Dreamweaver? Con este tutorial podrás conectar Dreamweaver y Phonegap Build.

Para los ejemplos de este tutorial usaré sublime text para desarrollo y línea de comandos para compilar en Android, pero si alguien se siente más cómodo usando los IDEs comentados en los párrafos de arriba, no tiene más que seguir los tutoriales anteriores y tendrá listo el entorno. Para probar las aplicaciones con un emulador móvil en el navegador, podemos usar la extendión Ripple para Chrome. Aquí tenemos una explicación de qué es y qué podemos hacer con Ripple emulator.

Phonegap: instalación

En esta entrada vamos a aprender cómo dejar listo el entorno de Phonegap para ponernos a escribir código para crear nuestras aplicaciones.

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.

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.

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 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í.

Phonegap: introducción

fuente: phonegap.com/

Phonegap es un framework para el desarrollo de aplicaciones móviles multiplataforma. ¿Qué significa esto? Pues que gracias a Phonegap podemos crear, mediante un mismo código fuente, una aplicación que luzca y se comporte igual tanto en Android, como en IOS, como en Windows Phone, etc. Para ello este framework hace uso de tecnologías web como son HTML5, CSS3 y javascript. El código genérico es compilado obteniéndose los ejecutables para cada uno de los sistemas móviles soportados. Phonegap utiliza API que permiten el acceso a elementos de los dispositivos en los que se ejecutará, tales como el acelerómetro o la cámara. Podemos ver una lista detallada de API que soporta Phonegap según el dispositivo que queramos usar.

Un poco de historia

Phonegap es gratuito, libre, y multiplataforma. Fue creado por la empresa Nitobi. En noviembre de 2011 Adobe anunciaba la compra de Nitobi (enlace a la noticia), y de esta forma el control sobre Phonegap pasaba a manos del gigante de software. Este hecho generó ciertas dudas en la comunidad que hacía uso de Phonegap para el desarrollo móvil, pues muchos pensaban que el framework podría pasar a ser propietario. Sin embargo el código de Phonegap fue donado a la fundación Apache, manteniéndose así el corazón del proyecto como libre. Así nació Apache Cordova, pero aun así Phonegap sigue existiendo, y podríamos considerarla como una distribución de Apache Cordova.

Diferencias entre Apache Cordova y Adobe Phonegap

¿Por qué decimos que se puede considerar Phonegap como una distribución de Cordova, cuando Phonegap existió primero? Porque Adobe pretende que Phonegap sea una versión "enriquecida" de Cordova. Debemos ver Cordova como el núcleo de Phonegap, y este último incluye además utilidades extra.

Una de estas utilidades, a pesar de que ha pasado poco tiempo desde que existen Phonegap y Cordova conjuntamente, es la posibilidad de compilar el código fuente de las aplicaciones en la nube. Este servicio se llama Adobe Phonegap Build. De esta forma con un único código fuente podemos obtener los ficheros ejecutables de nuestra aplicación para diferentes plataformas móviles, online, sin la necesidad de disponer de los SDK de cada sistema móvil para hacer la compilación plataforma a plataforma. Esto podría ser un engorro ya que para conseguir el ejecutable de una aplicación en iOS, por ejemplo, necesitaríamos compilar con el SDK de iOS en un MAC, ya que en entornos Windows no podríamos.

Recomiendo leer el siguiente artículo con una explicación sobre este tema, del blog de Phonegap.

Licencia

Actualmente tanto Phonegap como Cordova son gratuitos, libres y multiplataforma.

fuente: http://www.delipenguen.com/2013/02/phonegapcordova-calisma-ortaminin-kurulmasi/

Phonegap concretamente, se distribuye bajo licencia Apache 2.0. Como cualquier otra de las licencias de software libre, la licencia Apache permite al usuario del software la libertad de usarlo para cualquier propósito, distribuirlo, modificarlo, y distribuir versiones modificadas de ese software.

La Licencia Apache no exige que las obras derivadas (versiones modificadas) del software se distribuyan usando la misma licencia, ni siquiera que se tengan que distribuir como software libre/open source. La Licencia Apache sólo exige que se mantenga una noticia que informe a los receptores que en la distribución se ha usado código con la Licencia Apache. 

Plataformas soportadas

Aquí podemos ver de un vistazo rápido a qué podemos acceder en cada sistema operativo con Phonegap.

fuente: docs.phonegap.com

Con esta explicación queda más o menos claro qué es y qué pretende facilitarnos Phonegap, y sus semejanzas con Cordova.