jueves, 29 de mayo de 2014

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

miércoles, 28 de mayo de 2014

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.

martes, 27 de mayo de 2014

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