Crear una Aplicación para firefox OS

firefoxosapp

Una de las cosas interesantes de este nuevo sistema operativo es que las Aplicaciones son básicamente aplicaciones web HTML5, lo que hace que el desarrollo para Firefox OS sea sencillo y tan facil como crear un sitio web. Lo primero que necesitas son conocimientos sobre HTML5, es preferible también que sepas sobre diseño responsive. Para probar las aplicaciones primeramente instalaremos el simulador de Firefox OS.

Instalando el Simulador

1. Usando Firefox ve al vínculo apropiado para tu sistema operativo. Probablemente deberás decirle a Firefox que le permita al sitio instalar software:

2. Pulsa “Añadir a Firefox”.
3. Una vez que el complemento se ha descargado se te pedirá que lo instales: haz clic en “Instalar ahora”.

Debido al tamaño del complemento, Firefox puede que se bloquee durante varios segundos mientras lo instalas, y que aparezca un diálogo titulado “Aviso: El script no responde”. Si sucede esto, pulsa “Continuar” para esperar a que la instalación finalice. Cuando

FirefoxOSSimulator

Una vez instalado el complemento vamos a probar crear una aplicación. Existen dos tipos de aplicaciones Firefox OS las que son empaquetadas y las que son alojadas, las primeras se instalan en el dispositivo y las otras necesitan estar ubicadas en un servidor web para funcionar.

Crear una archivo Manifest

Aqui un pequeño ejemplo de como puede ser:

{
 "name": "Calcumoz",
 "description": "Calculadora sencilla y util ideal para calculos no tan complicados",
 "launch_path": "/index.html",
 "icons": {
 "128": "/img/icon-128.png"
 },
 "developer": {
 "name": "David Blanchard",
 "url": "https://blanchardspace.wordpress.com/"
 },
 "default_locale": "en"
}

2013-06-19-13-36-18En este archivo Manifest podemos observar:

Name: nombre de la aplicación

Description :la descripción de la aplicación

Launch Path: el cual indica la raíz de la misma

Icons: el icono que sera el que aparece en el teléfono.

y en developer la información del desarrollador de la aplicación y demas.

Para consultar mas sobre el archivo Manifest y sus cambios puedes seguir Este enlace a MDN donde detallan mas al respecto.

Una vez que tenemos el archivo Manifest procedemos a realizar la aplicación en HTML5 creando el index.html, para este ejemplo he creado una calculadora sencilla utilizando ademas Foundation para realizar el diseño responsivo.

Directorios de la aplicación

Para este ejemplo he puesto los directorios de la aplicación de esta manera

directorios

Dentro de CSS he puesto los css de Foundation y de la aplicación, los Javascripts y las imagenes.

Index.html

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width" />
<title>Calculadora Sencilla</title>

<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>

<style type="text/css">
#cabecera{
 /*background-color: #2aa3c8;*/
 height:60px;
 color:white;
 font-size: 24px;
 font-weight: lighter;
 padding: 0;
 text-align: center;
 background-image:url('img/bgr.png');
 background-repeat:repeat-x;
}
h2{
 color:white;
 font-weight:lighter;
 font-size:22px;
 text-align:left;
}
#resultado{
 font-size: 22px;
 font-weight: lighter;
}
#mostraroperacion {
 margin: 0;
 padding: 0;
}
</style>

<script src="script.js" type="application/javascript"></script>
</head>
<body>
<div class="row" id="headerlogo">
 <img src="img/header.png" alt="" width="100%" height="150px">
</div>

<div class="row">
<div class="large-12 columns">
 <div class="panel">
 <p id="mostraroperacion"><br/></p>
 <p id="resultado">0</p>
 </div>
</div>
</div>

<div class="row">

<div class="large-12 small-12 columns">
 <div class="clearing-close"></div>
<div class="small-3 large-3 column button small" id="n7">7</div>
 <div class="small-3 large-3 column button small" id="n8">8</div>
 <div class="small-3 large-3 column button small" id="n9">9</div>
 <div class="small-3 large-3 column button small" id="nc">C</div>

 <div class="clearing-close"></div>

 <div class="small-3 large-3 column button small" id="n4">4</div>
 <div class="small-3 large-3 column button small" id="n5">5</div>
 <div class="small-3 large-3 column button small" id="n6">6</div>
 <div class="small-3 large-3 column button small" id="division">/</div>

 <div class="clearing-close"></div>

 <div class="small-3 large-3 column button small" id="n1">1</div>
 <div class="small-3 large-3 column button small" id="n2">2</div>
 <div class="small-3 large-3 column button small" id="n3">3</div>
 <div class="small-3 large-3 column button small" id="multiplicacion">*</div>

 <div class="clearing-close"></div>

 <div class="small-3 large-3 column button small" id="n0">0</div>
 <div class="small-3 large-3 column button small" id="np">.</div>
 <div class="small-3 large-3 column button small" id="suma">+</div>
 <div class="small-3 large-3 column button small" id="resta">-</div>
<div class="clearing-close"></div>
 <div class="small-12 large-12 column button expand" id="igual">=</div>
</div> 
</div>
<div class="row">
 <img src="img/footer.png" alt="" width="100%" height="150px">
</div>
</body>
</html>

Puedes descargar el ejemplo de este enlace

Lo que nos mostraria este codigo seria lo siguiente:

calcumoz

Hasta este punto la calculadora no tiene las funciones solamente la apariencia para ello he creado un archivo Javascript que tiene las funciones que realiza la calculadora, si bien es cierto no es la forma mas optima de programar la misma sirve bien como ejemplo.

Script.js

var num1 = 0; //num 2 de operacion
var num2 = 0; //num 1 de operacion
var mostrando = ""; //lo que se muestra en pantalla
var primernumero = true; //identificar si es el primer numero que se ingresa
var operacion = 0; //la operacion que se ejecuta 1->suma, 2->Resta, 3->Multiplicacion, 4->Division
var respuesta = 0; //valor inicial de la varaible respuesta
var punto = false; //identificar si ya se presiono punto
var continuaroperacion = false; //identificar si se continua con la operacion
sepresionoigual = false;
window.onload = function (){
 document.getElementById('n0').addEventListener('click',function(){ concatenar(0); },false);
 document.getElementById('n1').addEventListener('click',function(){ concatenar(1); },false);
 document.getElementById('n2').addEventListener('click',function(){ concatenar(2); },false);
 document.getElementById('n3').addEventListener('click',function(){ concatenar(3); },false);
 document.getElementById('n4').addEventListener('click',function(){ concatenar(4); },false);
 document.getElementById('n5').addEventListener('click',function(){ concatenar(5); },false);
 document.getElementById('n6').addEventListener('click',function(){ concatenar(6); },false);
 document.getElementById('n7').addEventListener('click',function(){ concatenar(7); },false);
 document.getElementById('n8').addEventListener('click',function(){ concatenar(8); },false);
 document.getElementById('n9').addEventListener('click',function(){ concatenar(9); },false);
 document.getElementById('np').addEventListener('click',function(){ concatenarpunto(); },false);
 document.getElementById('division').addEventListener('click',function(){ myFunction(4); },false);
 document.getElementById('multiplicacion').addEventListener('click',function(){ myFunction(3); },false);
 document.getElementById('resta').addEventListener('click',function(){ myFunction(2); },false);
 document.getElementById('suma').addEventListener('click',function(){ myFunction(1); },false);
 document.getElementById('nc').addEventListener('click',function(){ borrarTodo(); },false);
 document.getElementById('igual').addEventListener('click',function(){ resolver(); },false);
 document.getElementById('headerlogo').addEventListener('click',function(){ headermessage(); },false);
 }
//---------------------------------------------------------
//---------------------------------------------------------
function headermessage(){
 alert("Calcumoz 1.0 \n Autor: David Blanchard \n Fecha: 03/06/2013 \n Blog: blanchardspace.wordpress.com");
}
//---------------------------------------------------------
//---------------------------------------------------------
function borrarTodo()
{
 num1 = 0;
 num2 = 0;
 mostrando = "";
 punto == false
 primernumero = true;
 continuaroperacion = false;
 var e = document.getElementById("resultado");
 e.innerHTML = "0";
 var e2 = document.getElementById("mostraroperacion");
 e2.innerHTML = "<br/>";
}
//---------------------------------------------------------
//---------------------------------------------------------
function concatenar(num)
{
 var str1 = mostrando;
 var str2 = num;
 mostrando = str1.concat(str2);
 var e = document.getElementById("resultado");
 e.innerHTML = mostrando;
}
//---------------------------------------------------------
//---------------------------------------------------------
function concatenarpunto()
{
 if(punto == false){
 punto = true;
 var str1 = mostrando;
 var str2 = ".";
 mostrando = str1.concat(str2);
 var e = document.getElementById("resultado");
 e.innerHTML = mostrando;
 } 
}
//---------------------------------------------------------
//---------------------------------------------------------
function myFunction(op)
{
 punto = false;
 operacion = op;

 //si es el primer numero
 if(primernumero == true){

 continuaroperacion = true;
 num1 = parseFloat(mostrando);

 var e = document.getElementById("resultado");
 e.innerHTML = "0";
 mostrando = "";

 //si no es el primer numero
 primernumero = false;
 var e = document.getElementById("mostraroperacion");

 switch(op){
 case 1: e.innerHTML = num1.toString() + " + ";
 break;
 case 2: e.innerHTML = num1.toString() + " - ";
 break;
 case 3: e.innerHTML = num1.toString() + " * ";
 break;
 case 4: e.innerHTML = num1.toString() + " / ";
 break; 
 }//fin switch

 } //fin si primer numero true
 else{

 resolver();

 }

}
//---------------------------------------------------------
//---------------------------------------------------------
function alertass(){
 alert("alert test");
}
//---------------------------------------------------------
//---------------------------------------------------------
function resolver()
{
sepresionoigual = true;
num2 = parseFloat(mostrando);
switch(operacion){
 case 1: respuesta = num1 + num2;
 break;
 case 2: respuesta = num1 - num2;
 break;
 case 3: respuesta = num1 * num2;
 break;
 case 4: 
 if(num2 == 0){
 var e = document.getElementById("resultado");
 e.innerHTML = "No se puede dividir entre cero";
 }else{
 respuesta = num1 / num2;
 }
 break; 
 }
var e = document.getElementById("resultado");
 e.innerHTML = respuesta;
 var e = document.getElementById("mostraroperacion");
 e.innerHTML = num1.toString() + " + " + num2.toString();

 switch(operacion){
 case 1: e.innerHTML = num1.toString() + " + " + num2.toString();
 break;
 case 2: e.innerHTML = num1.toString() + " - " + num2.toString();
 break;
 case 3: e.innerHTML = num1.toString() + " * " + num2.toString();
 break;
 case 4: e.innerHTML = num1.toString() + " / " + num2.toString();
 break; 
 default:
 e.innerHTML = "0"; 
 }
 mostrando = "";
 num1 = respuesta;
 num2 = 0;
 primernumero = true;
}

Con esto tenemos lista y funcional la calculadora. Para probarla hay que ir al simulador de firefox OS y presionar el boton add directory y agregar el manifesto.

adddirectoryLuego corremos la aplicación y el resultado seria el siguiente:

FirefoxOSCalcumoz

Una vez que la aplicación esta terminada hay que empaquetarla y subirla al marketplace. Esto lo explicare en publicaciones posteriores pero puedes consultar aqui el proceso de envio: https://marketplace.firefox.com/developers/docs/submission

Fuentes consultadas:

Anuncios

Un comentario en “Crear una Aplicación para firefox OS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s