Crear y simular Aplicación para Firefox OS desde nuestro PC

NOTA: Ha pasado mucho tiempo y ya nada en este post se puede realizar quedará como monumento histórico a un sistema operativo que de la nada llegó, pero de la nada se fue. Firefox OS.

Hoy en una charla de Firefox hablando de todo un poco sobre lo nuevo en su impacto con la telefonía como lo es con su sistema Firefox OS el construir aplicaciones o por lo menos tener un buen arranque en ello aunque es un campo muy abierto y relativo se puede tratar con calma, quiero mostrarles como iniciar por una buena parte en cuanto al crear la aplicación, no importa que ideal tenga la misma y que métodos lleve; comencemos:

NOTA: El post se hace asumiendo que quien lo lee sabe aunque sea la programación básica en HTML y lo relacionado con ello como el CSS entre otros, así que, no se explicará el como usar  HTML exactamente.

 Herramientas a usar:

- Bloc de notas o editor html cualquiera.

- Navegador mozilla Firefox (última versión). Descargala aquí

- Complemento para mozilla (Firefox OS simulator 4.0) Descargar aquí

1. Iniciamos con nuestro navegador Mozilla Firefox como se dijo en su última versión.

2. Instalamos el complemento que ya puse también para descargar y para saber como lo ejecutamos vamos a donde está: firefox en naranja > Desarrollador web > Firefox OS Simulator

3. Nos saldrá una página la cual dejaremos quieta por el momento la necesitaremos mas adelante, ahora usamos nuestro editor HTML o el bloc de notas y crearemos dos archivos uno que se llame index.html y otro que se llame manifest.webapp bien como se ve las extensiones deben ser .html y .webapp si no lo hacen de esta forma no funcionará, veamos el index al ser html se abre con el navegador el otro queda tal y como está:

4. Los archivos se encuentran vacíos ahora abrimos el index.html Advierto lo abrimos para editar así que podemos dar click derecho editar archivo ya que si lo abrimos directamente este nos lleva al navegador:

Trabajando con el index ya que es html, le ponemos la estructura básica de html o html5:

5. Bien, al tener nuestro archivo index con la estructura lista guardamos el archivo y ahora procedemos a abrir el archivo manifest.webapp lo mismo lo abrimos para editar con bloc de notas y en él pondremos lo siguiente:

{
  "name": "Nombre de la App",
  "description": "Descripcion de la App",
  "launch_path": "/index.html",
  "icons": {
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Nombre de tu organizacion",
    "url": "Pagina web URL"
  },
  "default_locale": "en"
}

Reemplazamos lo que está en rojo por lo que nos pide ahí "Nombre de la App, descripción, nombre organización, página web; ahora lo que está en azul bueno donde dice /index.html es la dirección del directorio donde tenemos el archivo html recuerden el que modificamos anteriormente si lo tienen en la misma carpeta déjenlo como sale ahí sino deben poner el directorio exacto de donde lo tengan, pero se recomienda que los dos archivos que creamos se dejen en una sola carpeta juntos.

Para que me entiendan lo mejor es dejar los dos archivos en una sola carpeta así de fácil para no complicarnos con la dirección de alguna de ellas. continuemos....

6. Muy bien hasta ahora todo llevamos los dos archivos modificados los cuales llevaríamos mas o menos así y guardamos:

7. Aclarando nuevamente, el HTML es libre para que creen lo que se les ocurra aunque mejor HTML5 pero para no tener tanto complique en ello usamos lo normal y podemos crear cosas muy sencillas así que pues el HTML lo editan a su gusto, si visualizan el html como el que está en la imagen saldrá algo muy básico como: 

8. Recuerden el complemento que instalamos y la página que dejamos abierta en el navegador firefox sale así:

Damos click en lo encerrado color azul "Add Library" allí buscaremos el archivo llamado manifest.webapp y lo agregamos luego de agregarlo se nos carga en la parte de abajo, como se ve en la imagen anterior.

9. Luego, al lado izquierdo de la misma página aparece un botón que dice Stopped.

Daremos click sobre ese botón y nos saldrá running, allí el simulador comenzará a correr y saldrá una ventana que será el mismo con Firefox OS corriendo como si fuera un teléfono:

10. Sólo queda buscar nuestra aplicación moviendo con el puntero del mouse a un lado cada escritorio o ventana del OS simulado, la App que yo cree se llama AFLM recuerden que en el manifest asignábamos el nombre a la App así que es bueno que sepan que nombre le dan veamos si sale: 

11. Ejecuto la aplicación en el simulador a ver que tal recuerden "El código HTML que hallamos usado era el que consideraran, yo cree uno muy sencillo para demostrarles que si funciona con HTML y un poco de CSS, lo que realicé fue un título y unas imágenes sencillas mas un buscador personalizado" veamos:

Perfecto lo que quería se logró la aplicación funciona, para terminar, el objetivo del post no es crear una aplicación muy genial que haga cosas complejas, No! sino demostrar el desarrollo de una aplicación sencilla y su emulación en Firefox OS desde un computador con el navegador Mozilla Firefox.