miércoles, 20 de noviembre de 2013

Cómo saber si hay conexión de datos en FirefoxOS.

Si estamos desarrollando una aplicación que requiera hacer peticiones a un servidor o descargar contenido de una fuente externa, tal vez necesitemos saber si el dispositivo está o no conectado a una red.

Según la documentación de FirefoxOS, existen varios métodos para realizar esta tarea; sin embargo, cuando los probé ninguno me dió los resultados esperados. La opción más popular en Google y que aparece en más ejemplos es la siguiente:

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;  

En teoría, solo bastaría saber el valor de connection.bandwidth pero de esta forma parece que siempre devuelve Infinity. Otra solución es realizar una petición a algún servidor y así detectar si se está conectado o no según la respuesta que se obtenga.

Para mi lo que mejor se adaptó a lo que necesitaba fue utilizar navigator.onLine. Aquí un ejemplo:

var online = navigator.onLine;

if(online){
   // aquí va el código
}

Ojalá les sirva.
Felices líneas.

martes, 29 de octubre de 2013

Cross Domain en Firefox OS. Ejemplo

Cuando hacemos una aplicación y queremos mandar datos a un servidor (por ejemplo a una web API), nos topamos con errores debido a que no se nos permite hacer peticiones 'Cross Domain'.

A continuación un ejemplo de cómo puede realizarse.  Nótese el argumento en al crear el objeto (mozSystem: true)

var url = "http://pagina.net/test.php";

var request = new XMLHttpRequest({ mozSystem: true });

request.open("get", url, true);
        request.onreadystatechange = function() {

          if (request.readyState == 4) {
            if (request.status == 200 || request.status == 0) {
             
              var data = request.responseText;
              //console.log(data);
            }
          }
        }
        request.send();


Saludos y felices líneas.

miércoles, 7 de agosto de 2013

Hola mundo en Firefox OS

Mozilla va con todo y quiere ser una alternativa real en el mundo de los dispositivos y aplicaciones móviles. Su "nuevo" bebé, Firefox OS,  tiene grandes expectativas y se perfila para ser una de las sorpresas de este año.

Hola mundo


Empecemos a desarrollar para este nuevo SO; obviamente el primer paso será el clásico "Hola mundo".

Herramientas

Firefox promete que cualquier desarrollador de front-end podrá crear aplicaciones en Firefox OS (FFOS) ya que está basado en HTML5, por lo que las herramientas no son nada del otro mundo.

Necesitaremos un editor de texto. Sublime Text es una buena opción.
También se requiere el simulador de FFOS (add-on de Firefox).

Pasos.

+ Crear la estructura de la aplicación:

La estructura de una aplicación básica para FFOS es muy similar a la de una aplicación web (una página). No es obligatorio tener nuestros recursos en carpetas pero se recomienda; así pues, nuestros scripts en JavaScript irán en un directorio "js", las imágenes en uno llamado "images" y así sucesivamente.

Para nuestro ejemplo, solo necesitaremos tres archivos y crearemos una carpeta llamada "app" (o con cualquier otro nombre):
  • Un archivo index.html
  • El archivo manifest.webapp
  • El archivo manifest.appcache
  • Una imagen icon.png 
+ index.html

Aquí diseñamos la aplicación, como cualquier página web, este es el comienzo.

<!DOCTYPE html>
<html>
<head>
<title>Hola mundo en Firefox OS</title>
</head>
<body>
<h1>Mi primera app en Firefox OS</h1>
<p>Hola mundo</p>
</body>
</html>
 
+ manifest.webapp

 Contiene la información necesaria de nuestra aplicación. Este archivo es muy importante dentro de cualquier aplicación de FFOS, es requisito indispensable contar con él.

Como verás, es un simpre JSON:

{
  "version": 1.0,
  "name": "Hola mundo en Firefox OS",
  "description": "Esta es mi primer app para Firefox OS",
  "launch_path": "/index.html",
  "icons": {
    "128": "icon.png"
  },
  "developer": {
    "name": "Hiram E. Perez",
    "url": "http://hiramperez.net"
  },
   "installs_allowed_from": ["*"],
   "default_locale": "es"
}



Los campos  permitidos y su descripción los puedes ver en la documentación.


+ manifest.appcache

En este archivo se indica qué recursos serán "cacheados", es decir, que estarán disponibles en todo momento.

CACHE MANIFEST
# v0.1
/index.html
/icon.png


+ icon.png

Es el ícono de nuestra aplicación. Crearemos una imagen con extensión png de 128 x 128 pixeles. Si no quieres complicarte, puedes descargar una imagen con estas dimensiones.

Así se ven los archivos de la aplicación.



Simulador

Una vez que hayamos creado nuestros documentos abrimos nuestro simulador de Firefox OS.


En la pestaña del add-on, damos clic en Add directory y seleccionamos el archivo manifest.webapp. Se abrirá el emulador y veremos nuestra app.






Ahora solo faltará agregar los estilos (CSS) y las funcionalidades (JS).

Felices líneas