Plugin InAppBrowser

Este plugin permite la visualización de una web en un navegador cuando se llama a la función window.open(), o cuando se abre un enlace compuesto por <a target="_blank">.

Instalación

cordova plugin add org.apache.cordova.inappbrowser

Para poderle dar uso a las funciones de este plugin, lo primero de todo es instanciar la ventana del 'inappbrowser'. Lo conseguimos con la sentencia de JavaScript window.open a la cual se le pasa como parámetros la URL, la herramienta que la cargará y unas opciones que varían según el sistema del dispositivo.

var ref = window.open(url, target, options);

InAppBrowser

Es el objeto devuelto por la llamada a window.open.

Métodos

• addEventListener
• removeEventListener
• close
• show
• executeScript
• insertCSS
  

Introducción a File Plugin

El plugin "File" de Cordova es simplemente una implementación de la API del sistema de ficheros de HTML5. No es algo en lo que vayas a entrar en profundidad, ya que en el ámbito de Apache Cordova, sólo nos interesa en lo referente al manejo eventual de esta característica por parte de otros plugins, como puede ser el caso de Media o FileTransfer.

En este enlace podéis encontrar una extensa documentación (en varios idiomas, incluido el español) sobre el manejo de esta API para HTML5

Para instalar el plugin File en un nuevo proyecto de Cordova, nos situamos en el directorio del mismo, y una vez instalada la plataforma correspondiente (Android en nuestro caso), escribimos lo siguiente:

cordova plugin add org.apache.cordova.file

Es habitual que File se descargue automáticamente junto con otro plugin que requiera de alguna de sus características, como es el caso de Media. Por lo que no es habitual que tengáis que recurrir a instalarlo manualmente.

Plataformas soportadas

• Amazon Fire OS
• Android
• BlackBerry 10
• iOS
• Windows Phone 7 and 8*
• Windows 8*
• Firefox OS

Lista de códigos de error y significado

• 1 = NOT_FOUND_ERR
• 2 = SECURITY_ERR
• 3 = ABORT_ERR
• 4 = NOT_READABLE_ERR
• 5 = ENCODING_ERR
• 6 = NO_MODIFICATION_ALLOWED_ERR
• 7 = INVALID_STATE_ERR
• 8 = SYNTAX_ERR
• 9 = INVALID_MODIFICATION_ERR
• 10 = QUOTA_EXCEEDED_ERR
• 11 = TYPE_MISMATCH_ERR
• 12 = PATH_EXISTS_ERR

Con respecto al almacenamiento persistente de ficheros en Android, hay que tener en cuenta algunas consideraciones. Desde versiones anteriores de este plugin, existe la posibilidad de que el plugin detecte automáticamente la existencia de una tarjeta SD. Dependiendo de esto, los ficheros con los que trabaje la aplicación se almacenan en la tarjeta o bien en la memoria interna del dispositivo.

En la nueva versión podemos escoger entre esta opción o simplemente elegir almacenar los ficheros en la memoria interna. Esto podemos hacerlo editando directamente el fichero config.xml, escogiendo entre uno de estos dos parámetros:

<preference name="AndroidPersistentFileLocation" value="Internal"/>
<preference name="AndroidPersistentFileLocation" value="Compatibility"/>

También podemos configurarlo con una serie de parámetros opcionales:

<preference name="AndroidExtraFilesystems" value="

files,files-external,documents,sdcard,cache,cache-external,root"/>

• files: Directorio interno de almacenamiento de ficheros de la aplicación
• files-external: Directorio externo de almacenamiento de ficheros de la aplicación
• sdcard: Directorio global de almacenamiento (por defecto la raíz de la tarjeta SD si está habilitado). Requiere el permiso android.permission.WRITE_EXTERNAL_STORAGE 
• cache: Directorio de caché interno de la aplicación
• cache-external: Directorio de caché externo de la aplicación
• root: Raíz del sistema de ficheros

Cordova Media Plugin: No funciona

En la documentación oficial de Apache Cordova, acorde a las especificaciones de la última versión, 3.5.0, nos encontramos con lo siguiente:

Apache Cordova 3.5.0

[...]

Plugin versions tested with this release

[...]

• cordova-plugin-media: 0.2.10

[...]

Sin embargo, tras haber actualizado a la última versión de Cordova y probar de nuevo el ejemplo desarrollado para explicar el plugin Media, sigue sin dar resultado, encontrándonos con el mismo error de la última ocasión:

 Uncaught ReferenceError: Media is not defined at file:///android_asset/www/index.html:19  

Es curioso el detalle de que, al instalar el plugin, se descarga conjuntamente de forma automática con el paquete del plugin File, ya que para usar Media hay que trabajar con ficheros. Como es obvio, tanto de File como de Media se descarga la última version de ambas (1.1.0 y 0.2.10 respectivamente). Sin embargo, al finalizar la descarga, aparece un warning advirtiendo de que el plugin Media depende de una versión anterior de File (1.0.1)

Se puede apreciar que no tiene ningún sentido. Y al no poder obtener de ninguna forma la versión necesaria del plugin File, y aún sin saber si eso solucionará el problema, es mejor dar por hecho que el plugin Media, definitivamente, no está recibiendo un soporte adecuado. Por lo que, sintiéndolo mucho, hemos decidido tirar la toalla con este plugin.

También hemos comprobado, por último, que la etiqueta

<audio>

de HTML5 tampoco funciona.

Plugin Globalization

Este plugin obtiene información y operaciones de representación específica al usuario local, idioma, y zona horaria. Nótese la diferencia entre local e idioma: local controla qué números, fechas, y horas aparecen en la región, mientras que el idioma determina que idioma de texto aparece, independientemente de los ajustes locales. Desafortunadamente, la mayoría de dispositivos móviles no hacen distinción entre estos ajustes.

Intalación

cordova plugin add org.apache.cordova.globalization

Objetos

• GlobalizationError
   

Métodos

• navigator.globalization.getPreferredLanguage
• navigator.globalization.getLocaleName
• navigator.globalization.dateToString
• navigator.globalization.stringToDate
• navigator.globalization.getDatePattern
• navigator.globalization.getDateNames
• navigator.globalization.isDayLightSavingsTime
• navigator.globalization.getFirstDayOfWeek
• navigator.globalization.numberToString
• navigator.globalization.stringToNumber
• navigator.globalization.getNumberPattern
• navigator.globalization.getCurrencyPattern

Cordova Media Plugin: Primer intento fallido

Hemos intentado implementar con Apache Cordova la siguiente aplicación, el funcionamiento es bastante simple: se carga un fichero de audio y se reproduce automáticamente. Una vez que consigamos esto intentaremos implementar botones de reproducción, pausa, etc... Pero de momento estamos atascados con el reconocimiento del fichero de audio en sí.

 <!DOCTYPE html>  
 <html>  
   <head>  
     <meta charset="utf-8" />  
     <meta name="format-detection" content="telephone=no" />  
     <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 href="css/bootstrap.min.css" rel="stylesheet" media="screen">  
           <script type="text/javascript">  
       // Wait for device API libraries to load  
                //  
                function onLoad() {  
                     var my_media = null;  
                     document.addEventListener("deviceready", onDeviceReady, false);  
                }  
                // device APIs are available  
                //  
                function onDeviceReady() {  
                          var my_media = new Media("https://ia600808.us.archive.org/21/items/NasaAudioHighlightReels/Launch-Sound_STS-1-Launch.mp3",  
                               // success callback  
                               function () {  
                                    alert("playAudio():Audio Success");  
                               },  
                               // error callback  
                               function (err) {  
                                    alert("playAudio():Audio Error: " + err);  
                               }  
                          );  
                          my_media.play();  
                }  
     </script>  
     <title>Hello World</title>  
   </head>  
   <body onload="onLoad()">  
     <br/>  
     <br/>  
           <div class="container">  
                <div class="jumbotron">  
         <div class="row">  
             <div class="col-md-2"><img src="img/logo.png" class="img-responsive" alt="Responsive image"></div>  
           <div class="col-md-10"><h1>Cordova Media Plugin</h1></div>  
         </div>  
                     <button type="button" id="play" class="btn btn-primary"><span class="glyphicon glyphicon-play"></span></button>  
                     <button type="button" id="pause" class="btn btn-success"><span class="glyphicon glyphicon-pause"></span></button>  
                </div>  
           </div>  
           <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  
           <script src="http://code.jquery.com/jquery.js"></script>  
           <!-- Include all compiled plugins (below), or include individual files as needed -->  
           <script src="js/bootstrap.min.js"></script>  
           <script src="js/jquery.min.js"></script>  
     <script type="text/javascript" src="cordova.js"></script>  
     <script type="text/javascript">  
       app.initialize();  
     </script>  
   </body>  
 </html>  

La consola de Eclipse ( "LogCat" en Android Developer Tools) notifica del siguiente error:

 Uncaught ReferenceError: Media is not defined at file:///android_asset/www/index.html:19  

Hemos intentado encontrar alguna solución por internet. Muchas pasaban por revisar los parámetros del plugin en los ficheros xml, modificar la ruta del fichero de audio, reinstalar el plugin... Pero ninguna ha dado resultado. Por lo que el problema es el siguiente: el plugin está instalado pero el emulador no reconoce la clase Media.

Plugin de Geolocalización

La principal característica de este plugin es proporcionar al usuario las coordenadas que recoge el dispositivo móvil. Contempla una considerable cantidad de datos: latitud, longitud, altitud, .. y además se le puede especificar el margen de error que puede tener para determinar dichos datos.

Se sirve de la información recibida en el GPS o también de la conexión a Internet (WIFI, 3g, 4g, direcciones MAC,...)

Como además es una tecnología que permite conocer la posición del dispositivo (por tanto también al propio usuario) se debe tener en consideración la vulnerabilidad a la privacidad, obligando a la aplicación la labor de informar al usuario de que queda expuesto a algún tipo de riesgo de vulnerabilidad.

Instalación:

cordova plugin add org.apache.cordova.geolocation

Métodos:

• navigator.geolocation.getCurrentPosition
• navigator.geolocation.watchPosition
• navigator.geolocation.clearWatch

Objetos:

• Position
• PositionError
• Coordinates

Tengo que decir de que la aplicación que he desarrollado para que mostrara las coordenadas por pantalla funcionaba a la perfección pero con el detalle de que solo lo hacía cuando estaba conectado a Internet. Cuando volví a hacer una segunda prueba solo con el GPS activado el dispositivo no lanzaba ningún resultado. El modelo de smartphone utilizado ha sido un Samsung GT-S7560 con Android 4.0.4.

**Nueva actualización**: al intentar desarrollar una nueva aplicación basada en este plugin me he encontrado con que mi dispositivo no muestra dato alguno. He copiado los ejemplos de la documentación en un proyecto nuevo y sin tratar, le he activado y desactivado el WiFi y el GPS al dispositivo... pero como resultado tampoco ha mostrado los datos de geolocalización.

Llega Apache Cordova 3.5

Durante la realización de este proyecto, Apache Cordova a pasado a su versión 3.5, esto ha modificado algunas cuestiones en el desarrollo aunque en esencia sigue siendo el mismo.
Los cambios más importantes han sido:

• El código común entre cordova-cli y cordova-plugman se ha mudado a su propio repositorio llamado cordoba-lib
• Cada plataforma cuenta ahora con un archivo llamado package.json que se ha subido a NGP. Las futuras actualizaciones de cordova.cli harán uso de npm para las plataformas de carga
• Caída del apyo de iOS 5.0 y de arm64. Desde ahora los proyectos se crean en código binario universal de 64 y 32 bits requiriendo como mínimo el despliegue en iOS 6.0
• Esta será la última versión con soporte para Windows Phone 7
• Se ha añadido soporte para Chrome devtools, con versiones de depuración de amazon-fireos.

Para actualizar su proyecto en la plataforma que desee, modifique andorid por su plataforma

npm install -g cordova
cd my_project
cordova platform update android

Fuente

Aplicación que reconoce el tipo de conexión del dispositivo (Network- Information Plugin)

Plataformas Soportadas

• Amazon Fire OS
• Android
• BlackBerry 10
• iOS
• Windows Phone 7 and 8
• Tizen
• Windows 8

Propiedades

• connection.type

Constantes

• Connection.UNKNOWN
• Connection.ETHERNET
• Connection.WIFI
• Connection.CELL_2G
• Connection.CELL_3G
• Connection.CELL_4G
• Connection.CELL
• Connection.NONE

Mediate el uso de este plugin de Apache Cordova podemos obtener información sobre el tipo de conexión a Internet de la que dispone nuestro dispositivo. Este plugin trabaja con un objeto denominado connection, mediante el cual, valiéndonos de sus constantes y propiedades, podemos obtener información.

El primer paso será instalar el plugin en el proyecto de Cordova que queramos utilizarlo. Nos situamos en el directorio del mismo y escribimos el siguiente comando:

cordova plugin add org.apache.cordova.network-information

Después importamos el proyecto al entorno de desarrollo para hacer las pruebas pertinentes.

Este sería el código de la aplicación web. El plugin trabaja con un objeto de Javascript denominado connection, el cual contiene varias constantes y una propiedad (type). Usando ambos, en la función checkConnection() se asocian cadenas de texto a los diferentes valores de las constantes en un array, que hacen las veces de índices del mismo. De esta forma, cuando lo mostremos, obtendremos un mensaje personalizado que nos especifica en español qué tipo de conexión tiene nuestro dispositivo.

 <!DOCTYPE html>  
 <html>  
   <head>  
     <meta charset="utf-8" />  
     <meta name="format-detection" content="telephone=no" />  
     <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/index.css" />  
           <link rel="stylesheet" type="text/css" href="css/tabla.css" />  
     <title>Network Info Plugin</title>  
           <script type="text/javascript" src="js/jquery.min.js"></script>  
           <script type="text/javascript" charset="utf-8">  
           // Wait for device API libraries to load  
           //  
           function onLoad() {  
                document.addEventListener("deviceready", onDeviceReady, false);  
           }  
           // mostramos en un mensaje de javascript el tipo de conexión que utiliza el dispositivo  
           function onDeviceReady() {  
                $(document).ready(function(){  
                     function checkConnection() {  
                          var networkState = navigator.connection.type; //Este plugin trabaja con el objeto CONNECTION  
                          var states = {};  
                          states[Connection.UNKNOWN] = 'DESCONOCIDO';  
                          states[Connection.ETHERNET] = 'ETHERNET';  
                          states[Connection.WIFI]   = 'CONECTADO A WIFI';  
                          states[Connection.CELL_2G] = 'CONEXION 2G';  
                          states[Connection.CELL_3G] = 'CONEXION 3G';  
                          states[Connection.CELL_4G] = 'CONEXION 4G';  
                          states[Connection.CELL]   = 'CONEXION MOVIL ESTANDAR';  
                          states[Connection.NONE]   = 'SIN CONEXION';  
                          return states[networkState];  
                     }  
                     $("#conx").text(checkConnection());  
                });  
           }            
           </script>  
   </head>  
   <body onload="onLoad()">  
     <div class="app">  
       <h1>ESTADO DE LA CONEXION</h1>  
       <div id="deviceready" class="blink">  
         <p class="event listening">Connecting to Device</p>  
         <p class="event received">Device is Ready</p>  
       </div>  
     </div>  
           <div class="generatecss_dot_com_table">  
                <table>  
                     <tr>  
                          <td>TIPO DE CONEXION</td>  
                     </tr>  
                     <tr>  
                          <td id="conx"></td>  
                     </tr>  
                </table>  
           </div>  
     <script type="text/javascript" src="cordova.js"></script>  
     <script type="text/javascript" src="js/index.js"></script>  
     <script type="text/javascript">  
       app.initialize();  
     </script>  
   </body>  
 </html>  

Podéis ver una explicación más detallada de este ejercicio, así como del código, en la documentación oficial del proyecto. Por último, aquí un vídeo con la aplicación en marcha:

Investigando con PHP en Apache Cordova

Hemos intentado, para ver si podíamos generar una aplicación que atacase a una base de datos y que se recibiera información desde el servidor por petición de usuario, meterle PHP al código html que se introduce en Apache Cordova, y hemos hecho varias pruebas:

   echo 'esto es una prueba PHP';

Y el resultado era que nos sacaba el texto, lo cual nos ha empezado a llenar de alegría, pero también ponía el ;, lo cual nos ha empezado a perturbar un poco, de modo que hemos hecho otras pruebas como estas:
Prueba 1

$a=1;
$b=2;
$c= $a+$b;
echo 'suma=' . $c;

Pero no ha ha habido ningún resultado

Prueba 2
Hemos intentado hacer un index.php, para ver si así lo leía, pero nos hemos quedado con las ganas, ya que ha aparecido un mensaje de error en el cual nos ponía que en el directorio www estaba buscando el archivo index.html

De momento nos hemos quedado con las ganas de poder acceder a información dinámica, pero no perdemos la esperanza de lograrlo de alguna manera... las posibilidades pueden ser enormes....

Privacidad en las aplicaciones

Hemos introducido un apendice donde incluimos algunas buenas formas de desarrollo, en lo que se refiere a la privacidad, control de datos, que hacer con ellos y como informar al usuario.
La entrada del apendice quedá más o menos de esta forma:

• Política de privacidad: La aplicación debe de incluir una política de privacidad que se ocupe de temas tales como de que tipo de información recopila su información, como se utiliza la misma, con quienes la comparte y como se puede tomar decisiones relacionadas con la privacidad dentro de la misma. Con el fin de que el usuario pueda entenderlo, se debe de utilizar lenguaje y evitar tecnicismos. Lo ideal es que es que la política de privacidad se encuentre disponible antes de la descarga, en la descripción de la misma. Lo mejor es desarrollar una versión reducida para la aplicación que disponga de un enlace que envíe a la versión extendida de la misma.
• Recopilación de información sensible: en ocasiones as aplicaciones recopilan información sensible de los usuarios, como datos financiera, salud, información acerca de niños, u obtenida a base de los aparatos del dispositivo tales como; cámara, contactos, geolocalización... Para estos casos, de forma general, lo ideal es obtener el consentimiento expreso del usuario antes de recoger esta información sensible y permitir en la medida de lo posible un mecanismo de control que permita al usuario cambiar de forma sencilla dichos permisos. Para este fin es muy recomendable utilizar cuadros de diálogos, que muestren el uso de los datos, y pedir permisos antes de la captura de la información.
• Evitar la sorpresa del usuario: Si su aplicación recopila o utiliza la información de una manera que puede ser desconocida por el usuario, como por ejemplo un reproductor de música on-line, galerías de fotos... se deben de tomar medidas similares al apartado anterior; mostrando cuadros de dialogo con la información necesaria para evitar sorpresas al usuario.
• Recopilación de datos de terceros: Si la aplicación toma datos que se proporcionan a otros medios, como redes sociales, anuncios... se debe de informar a los usuarios de que esa información será compartida. Como mínimo, la política de privacidad, debe de mostrar que información, como, donde y cuando se va a compartir, y si procede el usuario debe de tener la capacidad de control de excluirse cuando lo considere oportuno.
• Seguridad y limitación de la recopilación: Los usuarios confían en la aplicación, y esperan que se tomen las precauciones necesarias de seguridad con su información, con el fin de que está este protegida. Lo mejor para evitar los compromisos de seguridad es ni recopilar información a menos que se tenga una razón para ello. Si se esta obligado a recoger datos de los usuarios, se deben de tener controles de seguridad apropiados para protegerlos y si se almacena en el dispositivo o en un servidor back-end, se debe de desarrollar una política de retención de los datos pertinentes que se debe de implementar tanto en la aplicación como en el servidor back-end.

Apicación con Networkinfo

Otra app que muestra el uso esta vez del plugin Networkinfo desde Apache Cordova

Aplicación de SplashScreen

Aplicación que muestra como funciona el Splashscreen en con Apache cordova

Aplicación de la brújula

Aquí os dejamos la aplicación de la brújula, recogiendo datos por medio de Apache Cordova:

Plugin Brújula

Gracias al uso del plugin Compass podemos dotar nuestras aplicaciones nativas de la utilidad de la brújula de la que dispone nuestro dispositivo móvil. Tan solo hay que tener algunas consideraciones destacables para dispositivos iOS, ya que estos tienen una tasa de refresco algo diferente. La orientación que lanzas los dispositovos iOS varía solo cuando de verdad ha cambiado el valor de la orientación; así pues si el dispositivo está bastante quieto no va a devolver nuevos datos.

Instalación

cordova plugin add org.apache.cordova.device-orientation

Métodos

• compass.getCurrentHeading
• compass.watchHeading
• compass.clearWatch

 Objetos

• compassError
• compassHeading

Gracias al método watchHeading podemos monitorizar la orientación con una frecuencia que le hayamos configurado. Por defecto la frecuencia es de 100 milisegundos pero podemos adaptarla para al menos 1s. :

var options = { frequency: 1000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);

Si la función watchHeading tiene éxito el ID va a ir guardando una orientación cada intervalo de tiempo (en este caso 1s).

De nuevo, hay que tener en consideración el manejador de eventos para cuando el dispositivo ha cargado todas las librerías de las APIs.

document.addEventListener("deviceready", onDeviceReady, false);

Aplicación del acelerometro

Aquí podemos ver la aplicación en funcionamiento que controla el acelerometro del dispositivo con Apache cordova

Plugin Acelerómetro

Este plugin da acceso al acelerómetro del dispositivo. El acelorómetro es un sensor de movimiento que detecta cualquier cambio relativo a la orientación del dispositivo, en las tres dimensiones del eje (x, y & z).

Instalación

cordova plugin add org.apache.cordova.device-motion

Plataformas soportadas

• Amazon Fire OS
• Android
• BlackBerry 10
• iOS
• Tizen
• Windows Phone 7 y 8
• Windows 8

Métodos 

• navigator.accelerometer.getCurrentAcceleration
• navigator.accelerometer.watchAcceleration
• navigator.accelerometer.clearWatch

Objetos

• Acceleration
  

A pesar los ejemplos que vienen en la documentación oficial he tenido problemas a la hora de implementar una aplicación que te mostrara por pantalla el valor de los ejes en tiempo real. Lo que pasaba es que no se advierte del uso del manejador de eventos para deviceready. Este manejador carga todas las librerías de las APIs y es una manera de asegurarse que al estar cargadas van a funcionar las llamadas a los plugins instalados.

Me he dado cuenta de ello al comprobar los mismos ejemplos en la documentación de Phonegap que en sus ejemplos resueltos lo incorporaban al código. Al hacer lo mismo en mi código la aplicación funcionó sin ningún error.

Si se quiere capturar los valores de los ejes en tiempo real lo idóneo sería utilizar el método watchAcceleration ya que en su último parámetro podemos especificarle la frecuencia con que se va a ir refrescando expresada en milisegundos:

navigator.accelerometer.watchAcceleration(accelerometerSuccess,
    accelerometerError,
    [accelerometerOptions]); 

Y es en accelerometerOptions donde le pasamos el parámetro frequency para especificar el tiempo de refresco de los valores de los ejes. Siempre en milisegundos, es decir 1000 ms será 1 s.

Otro dato interesante, y es que los valores de los ejes se basan en los efectos de la gravedad
(9,81 m/s²) lo que si tenemos nuestro dispositivo sobre una superfice plana y con la pantalla defrente los valores que lanzaría el acelerómetro serían: x=0, y=0, z=9.81.

Añadiendo una pantalla de carga personalizada a una aplicación Cordova

Mediante el plugin Splashscreen podemos agregar pantallas de carga personalizadas para nuestras aplicaciones Cordova. El manejo de este plugin requiere más manejo de código a nivel nativo que de tecnología web, desde donde sólo hay que contemplar un par de métodos sencillos (en la práctica, generalmente sólo se utiliza uno, el cual veremos más adelante).

El primer paso será crear un nuevo proyecto de Cordova. Una vez hecho esto, nos situaremos desde consola en el directorio correspondiente del mismo y ejecutaremos el siguiente comando, para instalar el plugin Splashscreen:

cordova plugin add org.apache.cordova.splashscreen

Antes de continuar, es indispensable ajustar nuestra imagen de carga al formato 9-patch de Android. Esto podemos hacerlo mediante Android Asset Studio. Cargamos la imagen desde nuestro ordenador, la ajustamos, y podemos descargar un fichero .zip con varias versiones PNG de nuestra imagen, ajustada a las diversas resoluciones estándar de dispositivos Android.

Después tendremos que trasladar estos ficheros al directorio de recursos de nuestro proyecto Android. Además, deberemos especificar el nuevo recurso en el fichero config.xml

 <preference name="SplashScreen" value="screen" />  
 <preference name="SplashScreenDelay" value="10000" />  

Donde "screen" equivale al nombre de nuestro fichero sin la extensión y 10000 es el tiempo de duración de la pantalla de carga en milisegundos. La duración por defecto si no se especifica nada es de 3000 ms

Importamos el proyecto de Cordova al entorno de desarrollo de Android, y nos aseguramos de incluir lo siguiente en el fichero .java principal, dentro del método onCreate()

super.setIntegerProperty("splashscreen", R.drawable.hwlef9);
super.loadUrl("file:///android_asset/www/index.html", 3000);

Donde "hwlef9" es el nombre del recurso, tal como lo hemos especificado en config.xml, y 3000 es, una vez más, el tiempo en ms que tarda en desvanecerse la pantalla de carga.

Debemos asegurarnos muy bien de que el recurso figura en el fichero R.java

Hecho esto tan sólo tendremos que preocuparnos, por último, en la aplicación web, de especificar en Javascript que desaparezca la pantalla una vez haya cargado Apache Cordova, para proceder a la visualización de la aplicación en sí. Es decir, escribiremos la siguiente instrucción dentro de la función lanzada por el manejador del evento deviceready:

navigator.splashscreen.hide();

Código fuente HTML:

1:  <!DOCTYPE html>  
2:  <html>  
3:   <head>  
4:    <title>Ejemplos de manejador de eventos Apache Cordova</title>  
5:       <link rel="stylesheet" type="text/css" href="css/index.css" />  
6:    <script type="text/javascript" charset="utf-8">  
7:    // Esperar a que carguen las librerias API del dispositivo  
8:    //  
9:    function onLoad() {  
10:      document.addEventListener("deviceready", onDeviceReady, false);  
11:    }  
12:    // Las APIs del dispositivo estan disponibles  
13:    //  
14:    function onDeviceReady() {  
15:      navigator.splashscreen.hide();  
16:    }  
17:    </script>  
18:   </head>  
19:   <body onload="onLoad()">  
20:       <div class="app">  
21:        <h1>Pantalla de carga</h1>  
22:        <div id="deviceready" class="blink">  
23:          <p class="event listening">Cargando...</p>  
24:          <p class="event received">LISTO!!!</p>  
25:                      <p>Muestra una pantalla de carga personalizada</p>  
26:        </div>  
27:      </div>  
28:      <script type="text/javascript" src="cordova.js"></script>  
29:      <script type="text/javascript" src="js/index.js"></script>  
30:      <script type="text/javascript">  
31:        app.initialize();  
32:      </script>  
33:   </body>  
34:  </html>  

Y ya podemos disponer de una pantalla de carga personalizada en nuestra aplicación Cordova:

Plugin device

La utilidad de este plugin es poder obtener información del dispositivo, ya sea de software o de hardware. Aunque para poder utilizarlo se debe implementar un manejador de eventos.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(device.cordova);
}

Instalación:

cordova plugin add org.apache.cordova.device

Las propiedades que se pueden utilizar para identificar nuestro dispositivo serían:

• device.cordova
• device.model
• device.name
• device.platform
• device.uuid
• device.version

Nota importante: la propiedad device.name está en desuso. En su lugar se puede usar model ya que realiza la misma acción.
Nota importante 2: hay ciertos modelos de dispositivos que no muestran el nombre correctamente como puede pasar con los Nexus, pues su nombre los cambia por el de Passion. O en el caso de las BlackBerry únicamente muestran el número del modelo; para la BlackBerry Torch 9800 mostraría únicamente 9800.

Para terminar, un video demostrativo de una aplicación que muestra la información por pantalla: Enlace al post.

Aplicación que muestra información sobre el dispositivo

Esta aplicación muestra por pantalla un listado de características del dispositivo en el que se lanza. Algunas de ellas son la versión de Apache Cordova donde está desarrollada o el modelo del dispositivo.

Aplicación que agrega contactos

Esta aplicación añade un contacto nuevo a la base de datos del dispositivo móvil dados un nombre y un número de teléfono.

Plugin Contacts

Si queremos manejar el listado de contactos con los que disponemos en nuestro dispositivo móvil, este plugin sería la solución. Principalmente se pueden crear y buscar contactos pero además contamos con la posibilidad de agregar muchísimos más apartados al nuevo contacto.

Instalación:

cordova plugin add org.apache.cordova.contacts

Métodos

• navigator.contacts.create
• navigator.contacts.find

Objetos

• Contact
• ContactName
• ContactField
• ContactAddress
• ContactOrganization
• ContactFindOptions
• ContactError

A parte cada objeto contiene una gran variedad de parámetros que identifican mucho más al contacto. Estos parámetros van desde el nombre, teléfono, dirección, e-mail; pasando por organización, urls, fecha de nacimiento... Nos da bastante juego a la hora de crear contactos. Se podría decir que estos objetos serían categorías que englobaran campos de datos referentes a su tema. Encontraremos campos como dirección postal, localidad, país; en el objeto de ContactAddress.

Por último un vídeo demostrativo de una pequeña aplicación que introduce un contacto en la base de datos del dispositivo: Enlace al post.

Plugin Camera

La principal competencia de este plugin es capturar, configurar y guardar imágenes tomadas desde la cámara o desde el álbum de fotos del dispositivo.

Instalación:

cordova plugin add org.apache.cordova.camera

Método principal:

• getPicture( );

navigator.camera.getPicture(cameraSuccess,cameraError,[ cameraOptions ] );

Contiene además un considerable número de opciones o parámetros que se pueden configurar en para determinar por ejemplo: altura, anchura, calidad, donde se guarda, en qué formato, si será editable... Como nota importante habría que destacar la principal diferencia que toman los sistemas iOS, pues estos tienen menús flotantes en la pantalla del dispositivo, lo que conyeva a usar un parámetro específico para las opciones de dispositivos iOS como las tabletas iPad. CameraPopoverOptions. Por último podéis visualizar un vídeo demostrativo de una aplicación que arranca la cámara del dispositivo móvil para guardar la foto. Enlace al post.

Manejadores de eventos en Apache Cordova (II)

Continuamos investigando con los manejadores de eventos en Cordova, con escasos resultados, aunque hemos aprendido cosas nuevas.

En primer lugar, hemos intentado implementar una nueva aplicación de ejemplo en la que se hace uso de los eventos "pause" y "resume". El código muestra mensajes de tipo alert cuando la aplicación entra o sale del segundo plano de ejecución. El procedimiento es similar al utilizado en el ejercicio de los botones:

 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>Cordova Pause Example</title>  
      <link rel="stylesheet" type="text/css" href="css/index.css" />  
   <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>  
   <script type="text/javascript" charset="utf-8">  
   function onLoad() {  
     document.addEventListener("deviceready", onDeviceReady, false);  
   }  
   function onDeviceReady() {  
     document.addEventListener("pause", onPause, false);  
     document.addEventListener("resume", onResume, false);  
   }  
   // Vamos a mostrar algunos mensajes segun entramos y salimos del segundo plano de ejecucion  
   function onPause() {  
     alert("Aplicacion en pausa");  
   }  
   function onResume() {  
     alert("Aplicacion activa");  
   }  
   </script>  
  </head>  
  <body onload="onLoad()">  
   <div class="app">  
       <h1>Eventos PAUSE y RESUME</h1>  
       <div id="deviceready" class="blink">  
         <p class="event listening">Cargando...</p>  
         <p class="event received">LISTO!!!</p>  
         <p>Esta aplicacion muestra un mensaje dependiendo de la ejecucion en segundo plano</p>  
       </div>  
     </div>  
     <script type="text/javascript" src="js/index.js"></script>  
     <script type="text/javascript">  
       app.initialize();  
     </script>  
  </body>  
 </html>  

Sin embargo, no es posible conseguir por ahora que las aplicaciones Cordova se pongan en segundo plano, siempre se cierran (tanto con el botón central como el de retroceso). Es posible forzar a que las aplicaciones se ejecuten en segundo plano de forma nativa, usando código Java.

El segundo intento fallido de hoy ha sido desarrollar una pequeña aplicación que se desplace por una barra de volumen de JQuery UI usando las teclas de volumen del teléfono. He caído en la cuenta un poco tarde de que estos eventos sólo funcionan en Blackberry 10, pero aun así, he aquí el código:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
  <head>  
   <title>Cordova Volume Down Button Example</title>  
   <link rel="stylesheet" href="themes/base/jquery.ui.all.css">  
      <script src="jquery-1.10.2.js"></script>  
      <script src="ui/jquery.ui.core.js"></script>  
      <script src="ui/jquery.ui.widget.js"></script>  
      <script src="ui/jquery.ui.mouse.js"></script>  
      <script src="ui/jquery.ui.slider.js"></script>  
      <link rel="stylesheet" href="../demos.css">  
   <style>  
   #eq span {  
     height:120px; float:left; margin:15px  
   }  
   </style>  
   <script type="text/javascript" charset="utf-8">  
   // Call onDeviceReady when Cordova is loaded.  
   //  
   // At this point, the document has loaded but cordova-2.5.0.js has not.  
   // When Cordova is loaded and talking with the native device,  
   // it will call the event `deviceready`.  
   //  
   function onLoad() {  
     document.addEventListener("deviceready", onDeviceReady, false);  
   }  
   // Cordova is loaded and it is now safe to make calls Cordova methods  
   //  
   function onDeviceReady() {  
     // Register the event listener  
     document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);  
     document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);  
   }  
   // Handle the volume down button  
   //  
   function onVolumeDownKeyDown() { 

           var valor = $( "#master" ).slider( "option", "value" );  
           valor -= 10;  
           $( "#master" ).slider( "option", "value", valor );  
   }  
   function onVolumeUpKeyDown() {  
           var valor = $( "#master" ).slider( "option", "value" );  
           valor += 10;  
           $( "#master" ).slider( "option", "value", valor );  
   }  
   $(function() {  
     // setup master volume  
     $( "#master" ).slider({  
                min: 0,  
                max: 100,  
       value: 60,  
       orientation: "horizontal",  
       range: "min",  
       animate: true  
     });  
   });  
   </script>  
  </head>  
  <body onload="onLoad()">  
   <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">  
   <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>  
   Master volume  
   </p>  
   <div id="master"></div>  
  </body>  
 </html>  

Documentación en la red

Ya hemos subido la primera versión de la documentación a Internet, hemos creado un subdominio de hostinger donde poder alojarla y ya puede visitarse.
Para acceder a ella haz click sobre el icono de Apache cordova:

El archivo config.xml

Hemos estado investigando y creando la sección que habla sobre el archivo config.xml dentro de los proyectos de cordova, este archivo es independiente de la plataforma y esta basado en el formato especifico de la W3C (Empaquetado de aplicaciones web (Widgets)), ampliado para cumplir con las especificaciones de la API Cordova, con sus plugins y con la configuración de cada plataforma.

Por defecto tiene varios elementos:

• Atributo id de la etiqueta <widget>: el cual proporciona un identificador y un número de versión.
• La etiqueta <name>: especifica el nombre formal de la aplicación, como aparece en la pantalla principal del dispositivo y como aparecerá dentro de la tienda de app.
• Las etiquetas <descripcion> y <author>: especifican metadatos e información de contacto que pueden aparecer en los anuncios de la tienda app.
• La etiqueta opcional <content>: la cual define la página de inicio de la aplicación. El valor predeterminado por defecto es el archivo index.html, que habitualmente se encuentra en el directorio www del proyecto. 
• Etiquetas <access>: definen el conjunto de dominios externos que pueden comunicarse con la aplicación. El valor determinado que se muestra, le permite acceder a cualquier servidor. 
• La etiqueta <preference>: establece varias opciones como pares de, nombre/valor de atributos, referidos a las preferencias name, siendo sensible a las mayúsculas. Muchas de estas preferencias son exclusivas de plataformas especificas.

 Aparecen de este modo una serie de preferencias globales, como:

• Fullscreen: permite ocultar la barra de estado en la parte superior de la pantalla. El valor predeterminado es false
• Orientation: Permite bloquear la orientacion y evitar que se rote la pantalla en respuesta a los cambios de orientacion del  dispositivo. Los valores posibles son; default, landscape y protrait.

 Y otras preferencias sobre multiples plataformas, como:

• DisallowOverscroll (boolean, valor predeterminado false): Si no se quiere que la interfaz regenere el scroll de la pantalla. Esto puede dar problemas, pero se arreglan tan solo poniendo el valor en true.

• BackgroundColor: Sirve para definir el color de fondo de la aplicacion, admitiendo un valor hexadecimasl de cuatro bytes, representando el primero el valor alfa y los demas el RGB stándard para los siguientes tres bytes.

• HideKeyboardFomAccessryBar (boolean, valor predeterminado false): si se coloca en true, se oculta la barra de herramientas que aparece encima del teclado.

Finalmente hemos puesto el uso de la etiqueta <feature> así como su posición en, los archivos config.xml y su formato básico:

 <featurename="Plugin"value="PluginID"/>

La interface de la línea de comandos

He estado investigando como funciona la línea de comandos o CLI para crear proyectos, añadir plataformas tanto desde Mac:

    $ cordova platform add ios
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Como desde windows:

    $ cordova platform add wp7
    $ cordova platform add wp8
    $ cordova platform add windows8
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Comprobando el sistema actual de plataformas instaladas:

$ cordova platforms ls

Eliminar plataformas:

    $ cordova platform remove blackberry10
    $ cordova platform rm android

La ejecución de comandos para agregar o quitar plataformas afecta a los subderectorios donde se encuentran los diversos directorios www, dentro de platforms, como por ejemplo platforms/android/assets/www (visto a lo largo del manual), o platforms/ios/www. De forma predeterminada, el archivo de configuración de cada plataforma se configura para poder acceder a todas las APIs de Cordova.

Naturalmente esta información se nota más desarrollada en la documenteción que estamos realizando.

Aplicación que maneja la cámara

Siguiendo con la realización de plugins, hemos hecho una aplicación que conlleva la activación de la cámara, muestra un mensaje de error si se cancela su utilización y que realiza una fotografía guardándola en el dispositivo para después poder acceder a ella de forma normal, el vídeo de dicha aplicación es el siguiente.

Battery Status

Hemos estado investigando como desarrollar un plugin que nos determine el estado de la batería, y si necesita cargarse o no el dispositivo.
Siguiendo la documentasen oficial de Apache Cordova sobre Battery Status, hemos creado el proyecto, implementado el plugin... nos hemos encontrado con el problema de que el javascript no nos  reconoce las llamadas de los eventos:

window.addEventListener("batterystatus", onBatteryStatus, false);

function onBatteryStatus(info) {
    // Handle the online event
    console.log("Level: " + info.level + " isPlugged: " + info.isPlugged);
}

ni para batterycritical o batterylow.
Esto nos ha llevado a comenzar a investigar sobre como hacer la llamada y hemos intentado modificar el js, llevar el plugin a otra carpeta donde hacerle la llamadas, modificar la llamada y la función.
Hemos buscado en internet, encontrando diferentes posibles soluciones y ninguna ha surtido efecto:

• cambiando window por document
• utilizando javascript y JQuery
• introduciendo alerts básicos...

Después de mucho intentarlo hemos cambiando los eventos del ejemplo por otros creados por nosotros, los cuales llamaban a una función con alerts, mostrando que el código funcionaba, pero tras intentar de nuevo varias opciones, no hemos tenido éxito en nuestra tarea.
También  destacar que hemos lanzado la sentencia cordova plugin ls para comprobar de que el plugin estaba correctamente instalado, y así era. Todo aparentemente estaba correcto.
Finalmente hemos intentado hacer un nuevo proyecto desde cero, por si había ocurrido algún error, pero seguía sin funcionar, lo cual nos ha llevado de nuevo a la documentación y hemos incluido las siguientes líneas, tal y como nos dice la API

app/res/xml/config.xml

<plugin name="Battery" value="org.apache.cordova.BatteryListener" />

app/AndroidManifest.xml

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

El resultado ha sido negativo...
Hemos seguido trabajando en ello, buscando por stack overflow,  githud, youtube, diferentes blogs de desarrolladores... haciendo multiples intentos sin resultado alguno.
Hemos mirado si todas las rutas eran correctas, estando todas bien, y la aplicación continuaba sin funcionar.
El periodo de investigación solo en esta aplicación ya rondaba las 5 horas de trabajo del equipo.

Manejadores de eventos en Apache Cordova (I)

El manejo de eventos en Apache Cordova es fundamental si queremos añadir a nuestra aplicación una funcionalidad dinámica acorde al hardware de nuestro dispositivo móvil. Esta mañana, ya que por lo visto en la empresa de prácticas hoy no tenían trabajo para mí, me he dedicado a investigar un poco con esto, ayudándome de la siempre necesaria y todopoderosa documentación de Apache Cordova.

He implementado una aplicación bastante simple, basandome en la documentacion, (de hecho, me he basado en la aplicación por defecto de Cordova y sólo le he modificado el contenido de los parrafos en el apartado visual, el elemento importante de este ejercicio era el manejo de Javascript). El ejercicio consiste en hacer que aparezcan mensajes de alerta cuando se pulsa la tecla de retroceso o de menú de un dispositivo móvil, mostrando un mensaje en el que se indica qué botón se ha pulsado:

 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>Ejemplos de manejador de eventos Apache Cordova</title>  
      <link rel="stylesheet" type="text/css" href="css/index.css" />  
   <script type="text/javascript" charset="utf-8" src="cordova.js"></script>  
   <script type="text/javascript" charset="utf-8">  
   // Esperar a que carguen las librerias API del dispositivo  
   //  
   function onLoad() {  
     document.addEventListener("deviceready", onDeviceReady, false);  
   }  
   // Las APIs del dispositivo estan disponibles  
   //  
   function onDeviceReady() {  
     // Escuchadores de eventos  
     document.addEventListener("backbutton", onBackKeyDown, false);  
     document.addEventListener("menubutton", onMenuKeyDown, false);  
   }  
   // acciones  
   function onBackKeyDown() {  
     alert("retroceso");  
   }  
   function onMenuKeyDown() {  
     alert("menu");  
   }  
   </script>  
  </head>  
  <body onload="onLoad()">  
      <div class="app">  
       <h1>Manejador de Eventos</h1>  
       <div id="deviceready" class="blink">  
         <p class="event listening">Cargando...</p>  
         <p class="event received">LISTO!!!</p>  
                     <p>Pulsa los botones de tu dispositivo para ver los mensajes de dialogo</p>  
       </div>  
     </div>  
     <script type="text/javascript" src="cordova.js"></script>  
     <script type="text/javascript" src="js/index.js"></script>  
     <script type="text/javascript">  
       app.initialize();  
     </script>  
  </body>  
 </html>  

En un principio quise hacerlo con el plugin de dialogos de Cordova, pero por ahora no me ha funcionado, seguiré investigando, ya que queda mucho más elegante y profesional que escribir un triste alert.

He aquí un video mostrando en ejecución el código anteriormente expuesto. A partir de aquí, iremos investigando, probando e implementando ejemplos de todos los diferentes tipos de eventos.

Aplicación utilizando el dispositivo de vibración

Tras los problemas y las investigaciones desarrolladas para poder conseguir acceder a los plugins que controlan los dispositivos del móvil, hemos logrado hacer la primera aplicación que los utiliza.

En este caso la aplicación consiste en un botón que al pulsarlo realiza una vibración del del móvil, tal y como podéis ver en el vídeo.

Apache Cordova vs PhoneGap

Algunas de las preguntas que nos estan surgiendo en el proyecto, sobre todo cuando otro compañero tiene que hacerlo sobre PhoneGap, sobre ApacheCordova y Phonegap son:

¿Que es PhoneGap?

PhoneGap es un framework para el desarrollo de aplicaciones móviles producido por Nitobi, y comprado posteriormente por Adobe Systems. Principalmente, PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y CSS3. Las aplicaciones resultantes son híbridas, es decir que no son realmente aplicaciones nativas al dispositivo (ya que el renderizado se realiza mediante vistas web y no con interfaces gráficas específicas de cada sistema), pero no se tratan tampoco de aplicaciones web (teniendo en cuenta que son aplicaciones que son empaquetadas para poder ser desplegadas en el dispositivo incluso trabajando con el API del sistema nativo).
En la tercera versión de PhoneGap se incorpora el uso de una interfaz de comandos a través de consola, una nueva arquitectura de complementos descentralizados y la posibilidad de utilizar un código web unificado para crear múltiples proyectos.
PhoneGap maneja API que permiten tener acceso a elementos como el acelerómetro, la cámara, los contactos en el dispositivo, la red, el almacenamiento, las notificaciones, etc. Estas API se conectan al sistema operativo usando el código nativo del sistema huésped a través de una Interfaz de funciones foráneas en Javascript.
PhoneGap permite el desarrollo ya sea ejecutando las aplicaciones en nuestro navegador web, sin tener que utilizar un simulador dedicado a esta tarea, y brinda la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQueryMObile.
Apache Cordova es un software de código abierto y tanto este como PhoneGap pueden ser utilizados libremente en cualquier aplicación sin necesidad de atribución o licencias de ningún tipo.
Lo cual viene a ser básicamente lo mismo que Apache Cordova, tal y como se puede ir leyendo en el proyecto.

Entonces, ¿Cuál es la diferencia entre Apache Cordova y PhoneGap?
Ambos sistemas tienen funciones casi idénticas, la diferencia principal entre Apache Cordova y Phonegap es que el segundo tiene acceso a servicios de compilación en la nube proporcionados por Adobe Creative Cloud.
De hecho tras tocar un poco uno y otro, podemos ver que a la hora de trabajar con ellos, una de las diferencias activas, por no decir la única, es que en algunas ordenes, como crear proyecto, añadir plugins... cambiael comando de cordova a phonegap.

Fuente: wikipedia

El inicio de la investigación

Antes de nada pedir disculpas por la tardanza en abrir el blog, la situación en la residencia nos ha tenido un poco atareados, pero no hemos estado ociosos respecto al proyecto del cual expondremos aquí nuestras investigaciones.
Nada más llegar a Polonia nos dispusimos a investigar un poco y descubrimos que la base de Apache Cordova era bastante simple, solo había que introducir algunas variables de sistema e instalar  un par de paquetes, entre los que se encontraba Phonegap, pero ya volveremos a eso en una entrada dedicada a ello.
Lo que en principio debía de ser algo sencillo, comenzó a complicarse ya que las variables de sesión empezaron a dar fallos, y por que se necesita una versión actualizada de paquetes en ADT o no funciona.
Nos pasamos una tarde entera intentando hacer que las variables de sesión funcionaran, ya que según donde miráramos nos definían diferentes PATH, hasta que finalmente dimos con todos ellos. Sobre todo esta falta de información nos vino enfocada hacia el Apache-ant, ya que dio bastantes problemas a la hora de que pudiera arrancar, descubriendo que la ruta a tomar es el directorio apache-ant-(versión)\bin

Apache Ant es una herramienta usada en programación para la realización de tareas mecánicas y repetitivas, normalmente durante la fase de compilación y construcción (build). Es, por tanto, un software para procesos de automatización de compilación, desarrollado en lenguaje Java y requiere la plataforma Java, así que es apropiado para la construcción de proyectos Java. (Lenguaje nativo de Android)
Esta herramienta, hecha en el lenguaje de programación Java, tiene la ventaja de no depender de las órdenes del shell de cada sistema operativo, sino que se basa en archivos de configuración XML y clases Java para la realización de las distintas tareas, siendo idónea como solución multi-plataforma.
Ant es un proyecto de la Apache Software Foundation. Es software open source, y se lanza bajo la licencia Apache Software.

Una vez tuvimos resueltos estos problemas instalamos los dos archivos necesarios:

• npm install -g phonegap
• npm install -g cordova

De este modo ya podíamos crear nuestros proyectos colocándonos con el shell donde queremos y crearlo utilizando la siguiente línea de comandos:

cordova create directorioDondeSeAlojaraElProyecto com.nombreDelPaquete.gap "nombreDelProyecto"

Después de esto solo había que importarlo, o eso creíamos, ya que al modificar el www no obteníamos nada y tuvimos que investigar el por qué. La razón era que había que desbloquearle a eclipse el exclusion filter, y de ese modo poder acceder a la otra carpeta www que se encuentra en el directorio asset.
Con esto ya habíamos conseguido crear el hola mundo y ya nos embarcamos en hacer la aplicación del cambio de divisas, y la documentación, que proximamente subiremos a internet para que se pueda seguir en tiempo real

Shake your device!

Lanzo esta entrada dedicada a la implementación de uno de los muchos plugins con los que cuenta Apache Cordova, la vibración. Principalmente porque las primeras pruebas no funcionaron a la perfección debido al desconocimiento que tenía aún de como instalar correctamente los plugins.

Para empezar intenté implementar un plugin en lenguaje Java para que sacara un 'alert' con el clásico "Hola Mundo" pero no hubo respuesta por parte de la aplicación. Lo que pasaba realmete es que al abrir la aplicación en el dispositivo móvil, éste se quedaba colgado y en una de las pruebas me obligó a desconectar el dispositivo de manera tajante (sustraer batería).

Siguiendo otros manuales, me topé con que tenía que declarar el plugin usado en cuestión en el archivo 'config.xml' que se encuentra en res/xml/ con la siguiente sentencia:

<plugin name="vibrator" value="org.apachecordova.vibrator"></plugin>

A lo que como respuesta tampoco funcionaba correctamente. Esta sentencia era correcta solo en parte. Es verdad que para declarar el uso de los plugins en la aplicación es de imperiosa necesidad que esté declarada en el archivo 'config.xml', que necesita los atributos name y value; pero, la etiqueta que se usa realmente es <feature> y además el atributo value debe apuntar correctamente al plugin, lo que originaba que no funcionara porque la ruta no era la correcta.

Menciono todo esto porque la resolución del problema es bastante más sencilla y solo con el lanzamiento de unos pocos comandos. Voy a comentar un poco por encima porque al final quedará recogido completamente en el manual que estamos realizando.

• Una vez tenemos un proyecto creado y hayamos agregado la plataforma a la que va destinada empezamos desde cero.
• Se edita el archivo index.html para que podamos agregarle los framework o estilos que deseemos así como las etiquetas HTML que vayamos a usar.
• NOTA IMPORTANTE: No debemos quitar las rutas de los scripts a cordova ya que nos servirán para que reconozca las sentencias referentes a dicha plataforma.
• Una vez tengamos montado nuestro entorno web, debemos añadir el plugin que vayamos a usar, en mi caso el de vibración.
• ¿Dónde encontramos los plugins de los que dispone Cordova Apache?
• Página de la documentación oficial de Cordova con los plugins.
• Página principal de los plugins.
• ¿Cómo lo instalo?
• En una consola nos dirigimos al directorio donde se encuentra nuestro proyecto y ayudándonos de la sentencia plugin add añadimos el plugin con su correspondiente ID.
• ¿Dónde está el ID del plugin que deseo instalar?
• En los enlaces de arriba aparecen las sentencias completas para instalar el plugin en cuestión. Por ejemplo:

• cordova plugin add org.apache.cordova.vibration

• Ya contamos con el plugin instalado. Y en verdad es así, no tenemos que modificar a mano ningún archivo más para que nuestra aplicación conozca los plugins que tiene instalados, automáticamente el archivo config.xml fue modificado para contemplar que tiene instalado el plugin de vibración.
• Lo único que falta es que nuestra aplicación se ponga en comunicación con el plugin de Cordova. Las sentencias que se deben usar para tal tarea se encuentran también en la documentación de los plugins, como por ejemplo el de la vibración.

Como se puede observar, a nivel de configuración solamente hay que tener en cuenta que en nuestro proyecto debemos instalar, con las sentencias de Cordova, aquellos plugins que vayamos a utilizar en nuestra aplicación. Y no caer en el error de modificar ficheros manualmente.

Primera aplicacion con Apache Cordova

He aquí un brevísimo video con una demostración de nuestra primera aplicacion en Apache Cordova (vale, en verdad es la segunda, pero no merece la pena hacer un video sobre HolaMundo no?).

Aprovechando que actualmente estamos realizando el módulo de prácticas profesionales en Polonia, hemos creado un pequeño conversor de divisas entre euros y złotys polacos (la abreviatura es PLN). Se introduce el valor actual del cambio y la cantidad que queremos modificar. En el video se visualizan los correspondientes mensajes de error que se muestran cuando los datos introducidos son incorrectos o insuficientes.

Investigando con Apache Cordova

Apache Cordova es un conjunto de API's cuya finalidad es la de poder desarrollar aplicaciones nativas para dispositivos moviles utilizando HTML, CSS y Javascript.

Por lo tanto, lo que tenemos es una app nativa (integrada mediante Java, Objective-C, etc) que implementa tecnologias web para su visualizacion y funcionamiento.

Como estudiantes de Desarrollo de Aplicaciones Web, se nos ha encomendado, como proyecto final, investigar, desarrollar y documentar esta tecnología.

Voy a hacer un resumen rápido pero intuitivo, en unas pocas entradas, y partiendo desde cero, hasta ejecutar la primera aplicacion de ejemplo de Apache Cordova.

Requisitos: En nuestro caso, hemos trabajado bajo sistema operativo Windows, por lo que el primer paso ha sido descargar Node.js, indispensable para instalar Cordova y trabajar con los comandos mediante los cuales vamos a crear nuestro primer proyecto.

Una vez creado nuestro proyecto tendremos que importarlo a un entorno de desarrollo desde el cual podamos modificarlo y pulirlo como aplicación nativa. En nuestro caso hemos trabajado con Android Developer Tools (una modificación de Eclipse preparada para desarrollar en Android haciendo uso de Java) y hemos testeado los primeros ejemplos con su máquina virtual. 

Nota sobre ADT: Eclipse es un entorno de desarrollo de Java bastante potente, pero su máquina virtual de Android deja bastante que desear en cuanto a rendimiento. Resulta mucho más cómodo y rápido habilitar un dispositivo móvil real mediante USB para que ejecute directamente los proyectos de Eclipse. 

Por último, merece la pena aclarar la diferencia en Apache Cordova y Phonegap (aunque no lo parezca, hay un poco de meollo con esto, aunque no suele suponer un problema ya que, a fin de cuentas, vienen a ser lo mismo). 

Apache Cordova es, como hemos dicho anteriormente, un conjunto de API's mediante las cuales se pueden desarrollar aplicaciones nativas para dispositivos móviles haciendo uso de tecnologías web, siendo una solución de código abierto y totalmente gratuita.

PhoneGap es una distribución de Apache Cordova bajo licencia oficial de Adobe. A pesar de esto último, también es una herramienta libre. Una de las principales diferencias con Cordova es que PhoneGap tiene acceso a servicios de compilación en la nube proporcionados por Adobe Creative Cloud.

En la práctica, os percataréis de que la documentación y los procedimientos de ambos son muy similares. Sin embargo, es importante tener siempre muy presente que tecnología es la que se está usando. En nuestro caso, trabajaremos con Apache Cordova, mas concretamente, con el desarrollo de plugins para Chrome usando esta tecnología.