Firefox vuela en primera clase: Mi charla en el #Gusenet #BackToMyRoots

Actualización: El vídeo está disponible en youtube:

Hace algo más de una semana, en el pasado Gusenet, tuve la oportunidad de dar una charla breve sobre un tema no exento de polémica, Firefox OS, la apuesta del navegador libre por los mercados en vías de desarrollo.

Durante aproximadamente media hora, pudimos repasar conceptos como:

Arquitectura
Servicios disponibles
Apariencia
Persistencia de datos

Todo ello a través de tres demos:

En la primera no pasamos del «hola mundo» aunque definimos el manifest, el fichero que necesita Firefox OS para que la app funcione:

{
  "name": "Gusenet",
  "description": "Gusenet Manager",
  "launch_path": "/demo/app1/index.html",
  "icons": {
    "128": "/demo/app1/icon.png"
  },
  "developer": {
    "name": "Roberto Luis Bisbe",
    "url": "http://rlbisbe.net"
  },
  "default_locale": "es"
}

En la segunda, con el mismo estilo (es decir, plano) agregamos la posibilidad de llamar por teléfono y además, notificaciones:

function Platform()
{
		this.phoneCall = function(phonenumber)
		{
			var call = new MozActivity({
		      name: "dial",
		      data: {
		      number: phonenumber
		      }});
		};

		this.notify = function(value) {
			var n = new Notification(value);
			n.onshow = function () { 
			  setTimeout(n.close, 5000); 
			}
		}
};

Por otra parte usamos IndexDB para almacenamiento local:

function DB() {
	var __self = this;
	var _db;

	function _getObjectStore()
	{
		var transaction = _db.transaction(["speakers"], "readwrite");
		return transaction.objectStore("speakers");
	}

	this.load = function(callback)
	{
		var request = indexedDB.open("speakers", 3);

		request.onsuccess = function(event){
			_db = this.result;
			if (callback) {callback()};
		}

		request.onupgradeneeded = function(event) {
		  var db = event.target.result;
		  var objectStore = db.createObjectStore("speakers", { autoIncrement : true });
		};
	}

	this.save = function(value) {
		var objectStore = _getObjectStore();
		objectStore.add(value);
	};

	this.getAll = function(callback)
	{
		var objectStore = _getObjectStore();
		objectStore.openCursor().onsuccess = function(event) {
		  var cursor = event.target.result;
		  if (cursor) {
	  		callback(cursor.value);
		    cursor.continue();
		  }
		};
	};
}

Base de datos, teléfono y notificaciones

Finalmente, mediante el uso de los «Building Blocks» pudimos conseguir una apariencia nativa, mediante las sections de HTML5, y algo de CSS, y javascript:


	<section role="region" id="index" data-position="current">
		<header class="fixed">
			<menu type="toolbar">
	            <button id="btn-add"><span class="icon icon-add">add</span></button>
         	</menu>
         	<h1>Gusenet - Ponentes</h1>
		</header>
		<article class="scrollable header">
			<div data-type="list">
				<ul id="speakers">
					
				</ul>
			</div>
		</article>
	</section>

	<section role="region" id="add" data-position="right">
		<header class="fixed">
			<h1>Agregar Nuevo</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p><input type="text" id="name" placeholder="Nombre" required=""></p>
				<p><input type="tel" id="phone" placeholder="Telefono" required=""></p>
				<p><input type="submit" class="button" value="Agregar" /></p>
			</form>
		</article>
	</section>