martes, 3 de junio de 2014

Intentar guardar ficheros en local

La idea de esta incursión era poder escribir, leer y borrar ficheros que se encontraran en nuestro dispositivo. Antes de leer he pensado que sería mejor poder escribirlos con algún tipo de contenido. Algo sencillo: un documento de texto (.txt) con algún texto escrito.

Obviamente el plugin para poder manejar esta máquina será File. Como anteriormente se habría comentado el comando para instalar el plugin en nuestro proyecto sería:

cordova plugin add org.apache.cordova.file

He optado por no pedirle datos al usuario y que dándole a un simple botón automáticamente hiciera todo lo necesario para crear el fichero, escribirlo y alojarlo en nuestro dispositivo (en este caso se guarda en la tarjeta de memoria, que en realidad es donde se instala el apk, en otras palabras, donde se encuentra la aplicación instalada).

Lo primero sería especificar mediante JavaScript que queremos guardar un fichero. Nos ayudaremos del método requestFileSystem al que le especifico un guardado persistente, de un tamaño de 100 bytes y las dos llamadas éxito y de fallo:

window.requestFileSystem(LocalFileSystem.PERSISTENT,
                         100, 
                         gotFileSystem, 
                         fail);

Si este objeto se crea nos llevaría a la función gotFileSystem especificada anteriormente para que ahora nos cree físicamente el archivo en nuestro dispositivo. Nos ayudamos del método getFile, al que le paso el nombre del archivo, unas cuantas opciones y las dobles funciones de éxito y fallo:

fileSystem.root.getFile("readme2.txt",
                             {create: true, exclusive: false}, 
                             gotFileEntry, 
                             fail);

Si se ha creado satisfactoriamente el fichero en el dispositivo tenemos que crear un objeto FileWriter que nos sirva de manejador para escribir en el fichero en cuestión. Nos ayudamos del método createWriter, el cual solo recibe el éxito o el fallo:

fileEntry.createWriter(gotFileWriter, fail);

Una vez tenemos el manejador podremos escribir en nuestro documento con el método write. Automáticamente nos reemplazará el contenido con el texto que le hayamos pasado por argumento y lo guardará.

Todo esto está tal cual de la documentación oficial de Cordova. El problema con el que me he encontrado es que a veces solo crea los escuchadores, otras solo crea el fichero vacío, otras lo hace todo bien y una solución burda para que lo hiciera bien de primeras era tener que darle muchas veces repetidas al botón. He de decir que este ejemplo está copiado totalmente de la documentación y se supone que está testeado por los propios desarrolladores. Sin embargo, no conseguimos crear a la primera el fichero con el texto que le hayamos puesto.

Aplicación real con Apache Cordova

Como parte del proyecto, y con el fin de poder trabajar en él durante las prácticas, propusimos a la empresa, ZPAS.net, hacerle una aplicación para ellos, cuya página ni ten siquiera es responsive.
En respuesta ellos nos dijeron que querían una especie de presentación tipo catalogo, y es lo que le estamos haciendo, aunque aun estamos en la fase de desarrollarlo tipo web, podemos determinar varias cosas:
  • Las transiciones, overs, focus... de css3 no funcionan bien y hemos tenido que no recurrir a ellas
  • Se debe de producir primero en formato web local para poder desarrollarla entera y después introducir todos los plugins de Cordova y utilizarlos.
Esperamos tenerla terminada para dentro de poco, aunque como es normal, ahora mismo no podemos mostrar mucho, ya que esta en desarrollo, pero aun así ponemos aquí el menú principal.

lunes, 2 de junio de 2014

Primero incursión DataStorage

Hemos querido implementar un par de aplicaciones que nos sirviera para comprobar el manejo de bases de datos. Por un lado ha imperado el almacenamiento por Web SQL Database que se ha enfrentado al LocalStorage.

Ambos cuentan con sentencias potentes; por un lado el Web SQL se sirve de sentencias en lenguaje SQL, mucho más numerosas y potentes pero hay que remarcar que la W3C ha dejado de darle soporte ( no por ello, signifique que no podemos seguir utilizándola ). El LocalStorage utiliza menos sentencias y la disposición de sus datos se basa en claves y valores indexados.

La primera prueba sobre LocalStorage daba positivo pero en un navegador web convencional como en el que teníamos en nuestra máquina. Sin embargo al portarlo a Apache Cordova, la aplicación no lanzaba ningún resultado satisfactorio. Simplemente no aparecían los valores y claves que habíamos introducido. Aún tratamos de esclarecer porque funciona en un navegador y no en la aplicación nativa.

La segunda apuesta por Web SQL guarda y muestra bien los datos en toda la ejecución de la aplicación sin embargo, desconocemos donde se encuentran estos datos almacenados.

De ahí nuestro interés de que podamos administrar dichos datos para guardarlos en ficheros de extensión .sql por ejemplo. Será nuestra próxima arremetida contra este inconveniente.

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