Hacking Gaia with Firefox OS Simulator

From my point of view, the real potential of Firefox OS is not developing applications for Gaia but modifying the system itself. It is true that nowadays Gaia and Gecko suffer from some hard coupling but you have all the code in the web so learn, improve and distribute. This is free software, bro!

The common way to hack Gaia itself in order to replace components such as the keyboard, the homescreen or even the system application is to clone the repository and use make to push your modifications to the device and adb for debugging. But the other day I found a way of doing the same but using Firefox OS simulator. I.e. with no need of pushing to the device!

Seguir leyendo “Hacking Gaia with Firefox OS Simulator”

Firefox OS: applications 101

Hi again!

The other day in TID I was told there is not much information about how to start a HTML5 application for Firefox OS and deploy it into the device. There is. Seriously. But I have to admit there is not a straight way to the topic and you could get lost in the middle of all the available information. So this is a try to provide a quick and basic Firefox OS application tutorial.

Step 0: set-up the environment

Firefox Nightly

Nightly is the latest version of Firefox. Always. Built every night from the source-code. You can download it from the Nightly’s official site.

Before open it, it is very important you close all sessions of Firefox.

Firefox OS Simulator

This is an extension to Firefox; grab it by clicking on “+ Add to Firefox” from the Firefox OS Simulator add-on page.

The device and drivers

If you are fortunate enough then you have a Firefox OS device. If not, you can purchase one from Geekphone’s store. You need its drivers as well and they depend on the device you have and the operating system of your PC.

Finally, in the device go to Settings > Information > More information > Developer and enable “Remote debugging”.

Now you are ready to start  developing Firefox OS applications!

Step 1: the first app

Before starting, create a new folder. Name it as you want (i.e. myapp) and enter the folder. All your application files will go here.

Open your favorite text editor and create a new document named “index.html”. Now enter the following HTML5 code and save it inside the folder you created before.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
  </head>
  <body>
    <p>This is my first Firefox OS application.</p>
  </body>
</html>

If you are not used with HTML5, let’s take a quick review to the code:

  • Line 1 indicates the navigator we are using HTML5.
  • Line 2 is the beginning of the HTML5 document.
  • Line 3 indicates the beginning of the head section where metadata goes.
  • Line 4 is metadata saying the document is encoded in “UTF-8”.
  • Line 5 is more metadata saying you don’t want Firefox OS to cache the content. This is very convenient while developing.
  • Line 6 indicates the end of the head section.
  • Line 7 indicates the beginning of the body section where content goes.
  • Line 8 is a paragraph with some text.
  • Line 9 indicates the end of the body section.
  • And line 10 indicates the end of the HTML5 document.

Step 2: the manifest

The index.html is one of the two things you need to make a Firefox OS application. Again, use your favorite text editor an create another file named “manifest.webapp”, Put this text inside:

{
"name": "MyApp",
"description": "My first Firefox OS application",
"launch_path": "index.html"
}

This is a JSON file. Again, if you never read about this format before let’s review what is it saying:

  • Line 1 indicates the beginning of a JSON object. A JSON object is a list of pairs “key”: “value”.
  • Line 2 is the key “name” which indicates the name of the application.
  • Line 3 contains the key “description” with the description of the application.
  • Line 4 has the key “launch_path” which says Firefox OS what file must be opened when launching the application.
  • Line 5 ends the JSON object.

Step 3: test your application!

Yes, you’ve read well, it’s time to test your application. Nothing more is needed. Now open Nightly and click on Tools menu, then go to Web Developer > Firefox OS Simulator.

Firefox OS Simulator dashboard
Firefox OS Simulator dashboard.

This will open the dashboard. Click on “Add directory” button and navigate to the folder you created in step 1. Select the manifest file and accept. This will launch the Firefox OS simulator allowing you to see your application as if it were running in a real device.

MyApp application in the dashboard.
MyApp application in the dashboard.

If you modify the application while the application is still running, go to “App” menu, then “Refresh” to reload the app.

Application running in the Simulator.
Application running in the Simulator.

Step 4: testing on the device!

If you have a device, connect it to your PC. If the drivers are installed properly you should see the phrase “Device connected” below the “Simulator” switch. Furthermore, your application entry will display a “Push” button.

Device has been recognized by the Firefox OS Simulator.
Device has been recognized by the Firefox OS Simulator.

Press the “Push” button and your application will be uploaded to your phone. The first time you upload an application, a prompt will be displayed on it. If you accept, the application will be installed and a status message will appear when finished.

Then you can go to your home screen and search for your application. Open it and see the results.

Note there is no such thing as Refresh in your real device. If you change the source files in your PC, you need to push your application again. Furthermore, you must close the application and reopen to see the changes.

Congratulations. You have written and run your first Firefox OS application.

Seguir leyendo “Firefox OS: applications 101”

Django 1.5 in a nutshell II

The first part of this tutorial introduced some interesting aspects of Django 1.5. In this second part we are diving deeper into Django features but coding a little bit more, trying always to use the framework properly. Here is the index:

  1. Modifying the model.
  2. Improving posts administration.
  3. Adding commentaries.
  4. Tweaking the administrator to manage posts and commentaries.
  5. Adding a search function.

Seguir leyendo “Django 1.5 in a nutshell II”

Django 1.5 in a nutshell I

In 2011, I wrote a quick tutorial about Django 1.3. I was going to demonstrate how to write a blog in just one hour in a live code session. This time I’m in a mentoring program teaching Python and Django to a colleague so I decided to update that tutorial. Django is now in version 1.5 and you can find what is new in the release notes of the framework. Let’s code!

Seguir leyendo “Django 1.5 in a nutshell I”

Preguntas de entrevista de Google (con respuestas)

Bueno, ayer me rechazaron en Gameloft. Pero vamos, estoy en tropocientos procesos de selección y no me precoupa demasiado. Al parecer uno de ellos parace que será con Google. Alguien de Google Careers se puso en contacto conmigo y me dijo que había pasado mi CV (del que tenéis una versión recién actualizada en el blog). Así que supongo que en me llamarán en breve. ¡Y voy a hacer trampas!

No, ahora en serio. Sencillamente se ha presentado una muy buena escusa para coger una lista de preguntas que Google acostumbra a preguntar y responderlas. Evidentemente no me las sé todas y la mayoría están buscadas por ahí pero espero que sirvan para el enriquecimiento personal y profesional de todo programador. Por supuesto, si alguien quiere proporcionar una respuesta mejor, que lo haga. Yo voy a intentar ser sencillo, abstracto e independiente de la implementación. A ver si hay suerte. Aquí van las 10 primeras:

Seguir leyendo “Preguntas de entrevista de Google (con respuestas)”

Arch Linux sobre Virtual Box 4/5

Esta versión actualizada del artículo contiene cambios sustanciales respecto de las primeras versiones.

En este capítulo de la serie vamos a instalar dos aplicaciones:

  • sudo. Que nos permitirá ejecutar comandos como si fuéramos superusuarios.
  • GNOME3. La última versión del popular escritorio.

Seguir leyendo “Arch Linux sobre Virtual Box 4/5”

Contando en otras bases de numeración I

En el último post hablaba del título del blog, de lo que quería transmitir con él. Ahora vamos a ver por qué 2, en binario, es 10.

Normalmente, nosotros utilizamos el sistema decimal para contar. La palabra decimal se utiliza porque utilizamos 10 símbolos para formar todos los números, a saber: 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9. Cuando utilizamos sólo uno de estos símbolos para designar un conjunto de cosas hablamos de ellos como si fueran unidades. En palabras más sencillas, cosas sueltas. Por ejemplo:

Cinco círculos
5 círculos

Con sólo estos diez símbolos no podríamos denotar conjuntos mayores de nueve elementos porque, sencillamente, no tenemos más símbolos. Pero gracias a Alá, sí que podemos dado que el sistema de numeración decimal es posicional y un 1 a la izquierda de un 0 no es lo mismo que a su derecha.

Diez elementos agrupados
1 conjunto de diez elementos y 0 elementos sueltos
Veintitrés elementos agrupados
2 conjuntos de diez y 3 elementos sueltos

Así, cuando encontramos diez elementos podemos afirmar que tenemos 1 grupo de diez cosas y 0 cosas sueltas y cuando tenemos veintitrés elementos podemos decir que tenemos 2 grupos de diez y 3 cosas sueltas.

Esto nos recuerda a esos tiempos en el colegio aprendiendo las unidades, decenas, centenas… y así es: las unidades son las cosas sueltas, las decenas los grupos de diez, las centenas los grupos de cien… Es decir, que vamos añadiendo columnas por la izquierda a medida que completamos grupos de 10. De ahí la palabra decimal.

Cuarenta y trés en base 5
4 grupos de cinco y 3 elementos sueltos
Veinte en base 5
2 grupos de cinco y 0 elementos sueltos

Ahora imaginad que en vez de diez símbolos contamos sólo con cinco: 0, 1, 2, 3 y 4. El principio es el mismo, sólo que ahora tenemos que agrupar cada cinco cosas porque no tenemos ningún símbolo para designar cinco cosas sueltas. En su luegar tendremos que decir que hay 1 grupo de cinco y 0 cosas sueltas. Como agrupamos cada menos elementos, las figuras anteriores, conservando el mismo conteo de elementos, se representan de manera distinta. Es decir, las cifras para representar los mismos conjuntos son distintas. Así podemos decir que 10 (base 10) = 20 (base 5) y que 23 (base 10) = 43 (base 5).

Además, en base cinco, las unidades siguen siendo elementos sueltos pero las “decenas” son grupos de cinco elementos (5 x 1), las “centenas” representan un grupo de cinco conjuntos de cinco elementos (5 x 5), las “unidades de millar”, un conjunto de cinco conjuntos de cinco conjuntos de cinco (5 x 5 x 5) y así sucesivamente. Es decir, que cada posición a la izquierda es 5 veces más que la posición inmediatamente a la derecha.

Ahora contar en binario es muy fácil. Sólo tenemos dos símbolos: 0 y 1 y tenemos que agrupar cada dos elementos así las figuras anteriores quedan:

Veinte en base 2
1 grupo de ocho elementos, 0 grupos de cuatro elementos, 1 grupo de dos elementos y 0 elementos sueltos

Y la otra:

Veintitrés en base 2
1 grupo de dieciseis, 0 grupos de ocho, 1 grupo de cuatro, 1 grupo de dos y 1 elemento suelto

Como se puede ver, necesitamos muchos más dígitos porque agrupamos muy, muy pronto y en seguida podemos hacer conjuntos más y más grandes. En este caso, cada nueva columna a la izquierda es el doble de la inmediatamente a la derecha.

Ahora bien, para terminar: ¿cuál es la cifra para un conjunto con tantos elementos como la base escogida? O dicho de otro modo, cómo representamos diez elementos en base diez, cinco elementos en base cinco o dos elementos en base dos. No tenemos símbolos para ellos pero podemos decir que tenemos 1 conjunto de [ponga aquí la base escogida] y 0 elementos sueltos. Es decir, usamos el número 10 y esto es así siempre: si tuviéramos base siete (símbolos 0, 1, 2, 3, 4, 5 y 6), siete cosas se representarían como 1 conjunto de siete y 0 elementos sueltos. De nuevo, 10.

Así que concluímos que, en decimal, 1 + 1 = 2, pero en binario 2 tenemos que representarlo como 10 y de aquí Uno y uno = diez, el título del blog.

Uno más uno… ¿qué?

Símbolo de encendido/apagado
El conocidísimo símbolo de encendido/apagado o "power" representa un 1 y un 0

Desde el momento que empecé a darle vueltas a la idea del blog sabía que el título del mismo sería éste. Uno y uno, diez hace referencia, por supuesto, al hecho de que en binario la representación del dos es diez. No obstante también sugiere un cálculo sencillo, que nos transporta a nuestra infancia (como la bofetada de Archie): la primera suma que muchos habremos hecho en nuestra vida. Así que el título trata de transmitir sencillez y aprendizaje al mismo tiempo que representa a las unidades básicas de la informática actual.

Pero,  ¿por qué uno y uno es diez y no once, o cien, o ciento uno? ¿Cómo se cuenta en binario?

Puestos a responder a esta pregunta, casi mejor nos planteamos qué es contar y, cuando lo tengamos claro, pasamos entonces a contar en binario, en hexadecimal o en lo que nos venga en gana. Aunque eso, mejor para otro post.

Símbolo de suspensión o "stand by"
Curiosamente, este no es el símbolo de encendido/apagado sino el de suspensión o "stand by". El círculo que representa al 0 aparece incompleto para indicar que el aparato no está apagado completamente sino "esperando".