Este tutorial lo realizaré usando Ubuntu 8.10 y Firefox 3.0.8. Para comandos específicos de tu sistema operativo puedes revisar la documentación de Mozilla

¿Qué necesito saber?

• Javascript
• Nociones de XML
• Estar familiarizado con la línea de comando
• Conocimiento básico de inglés (sobre todo para leer información externa a esta guia)
• Sed de aprendizaje

En este primer post, realizaremos lo siguiente:

• Estableceremos un entorno de desarrollo sencillo
• Crearemos una pequeña extension de prueba que nos permitirá probar nuestro entorno.

Estableciendo el entorno de desarrollo sencillo

Lo primero que debemos hacer es crear un perfil distinto al que usamos en Firefox con la finalidad de que, en caso de ocurrir algún error grave, no dañemos los datos que tenemos guardados en nuestro firefox como Marcadores, Extensiones,Preferencias, etc.

Esto lo conseguimos corriendo Firefox desde la línea de comandos con los siguientes parámetros:

firefox -no-remote -P dev

Con esto estamos corriendo Firefox usando el Perfil “dev”. Al correrlo por primera vez, se lanzará el Administrador de perfiles de firefox. Pulsaremos el botón “Create Profile..” y estableceremos el nombre de nuestro perfil de desarrollo “dev”, de esta forma tendremos dos perfiles distintos: default, que es el predeterminado y dev, que será nuestro perfil de desarrollo.

Para correr Firefox con este perfil sin usar la línea de comandos, podemos crear un acceso directo o un launcher dependiendo de nuestro sistema operativo.

Una vez iniciado nuestro navegador con el perfil de desarrollo, procedemos a modificar la configuración que nos será útil en el momento del desarrollo. Esto lo realizamos ingresando ‘about:config’ en la barra de direcciones. Obtendremos una advertencia. Ya que somos desarrolladores y sabemos lo que hacemos (ajá), aceptamos y prometemos con la mano en el pecho que serémos cuidadosos.

Utilizaremos el Filtro para buscar las variables de configuración. En caso de no existir las crearemos con Click derecho -> Nuevo -> Lógico. Estas son las variables que modificaremos y el valor que debemos establecerle.

• javascript.options.showInConsole = true. Guarda los errores en los archivos del chrome en la Consola de errores.
• nglayout.debug.disable_xul_cache = true. Deshabilita el cache de XUL de tal forma que los cambios a las ventanas y diálogos no requieren reiniciar.
• browser.dom.window.dump.enabled = true. Nos permite usar la sentencia dump() para imprimir en la consola standard. Ver window.dump para mas información.
• javascript.options.strict = true. Habilita las advertencias estrictas de JavaScript en la consola de errores.
• extensions.logging.enabled = true. Enviará información más detallada acerca de problemas con la instalación y actualización en la Consola de errores.

Posteriormente instalaremos alguna extensión que nos ayude en la creación y pruebas de nuestra nueva extensión. Para este tutorial usaré la extensión Extension Developer’s Extension que es específica para nuestra tarea y es un todo en uno para el desarrollo de extensiones. Si encuentras más útil alguna otra, puedes usarla y si crees que es mejor que ésta, coméntalo y comparte.

Descargamos e instalamos la extensión de la forma clásica presionando el botón verde que dice “Add to Firefox” y reiniciamos el navegador. (Automáticamente reiniciará en el perfil de desarrollo). Encontraremos los comandos de la extensión en el menú Herramientas.

Ahora creamos una carpeta en donde comenzaremos a desarrollar nuestra extensión. Puede ser en cualquier lugar, ya que la extensión que acabamos de instalar nos permite indicarle en qué directorio trabajaremos. Yo específicamente hice una carpeta ‘extensiones’ dentro de la que trabajaré todas las extensiones que voy a hacer.

Dentro de esta carpeta crearemos nuestra primera extensión que nos servirá de prueba para comenzar nuestro desarrollo. Esta carpeta será llamada ‘hola_mundo’.

Una vez creada la carpeta vamos al menú Herramientas -> Extension Developer -> Extension Builder.  En esta ventana comenzaremos a crear nuestra nueva extensión. El primer dato solicitado es “Working Directory” que será específicamente la carpeta de nuestra nueva extensión. Notaremos que al seleccionar la carpeta de nuestra extensión (hola_mundo). Se le asignará automáticamente el nombre de la carpeta a nuestra extensión (aunque podremos cambiarlo manualmente).

Una extensión es un archivo empaquetado en un formato zip con una extensión xpi (pronunciada zippy). Dentro de él tendremos la siguiente estructura básica de archivos (extisten más carpetas y compontentes, pero éstos son los mínimos requeridos).

install.rdf
chrome.manifest
chrome\
   content\

El archivo install.rdf es un archivo xml con una estructura definida que contendrá información acerca de nuestra extensión como el nombre del creador (osea nosotros), la versión de la extensión, las versiones de firefox en donde funciona, etc. Dado que de momento estamos estableciendo el entorno y la extensión de desarrollo nos genera el archivo de una forma más sencilla, aún no ahondaremos en las opciones completas del manifiesto de instalación.

El archivo chrome.manifest es otro archivo clave para la extensión, en él registraremos nuestros archivos de la extensión. Así que creamos nuestro archivo de texto chrome.manifest y guardamos lo siguiente en él.

content hola_mundo chrome/content/
overlay chrome://browser/content/browser.xul chrome://hola_mundo/content/hola_mundo.xul

De esta manera estamos diciendo a Firefox que registre el contenido “hola_mundo” que se encuentra en la ruta (relativa a chrome.manifest), ‘chrome/content/’. No olvides la diagonal al final, ya que de no ser así, el contenido no será registrado. En la línea siguiente registramos una superposición al chrome original del navegador mediante un archivo XUL que crearemos en un momento.

Luego creamos la carpeta ‘chrome’ y dentro de ella la carpeta ‘content’. Dentro de ésta última es donde crearemos nuestro archivo XUL.

XUL es una estructura XML que utiliza Firefox para definir y presentar sus elementos en la ventana, e incluso la ventana misma (esto se denomina Chrome). Con un archivo XUL podemos extender y manipular la estructura y disposición de los elementos en la ventana del navegador.

CHROME es el nombre que se le da precisamente a los elementos del navegador que no forman parte del sitio que estamos visitando, como la barra de estado, botones de navegación, etc. No se debe confundir con Google Chrome, ya que precisamente se le dio ese nombre al navegador de manera sarcástica ya que éste carece de CHROME.

Creamos un archivo llamado hola_mundo.xul dentro de nuestra carpeta content y le agregamos el siguiente texto:

<?xml version="1.0"?>
<overlay id="hola_mundo"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
    <statusbarpanel id="mi-panel" label="Hola Mundo !"  />
</statusbar>
</overlay>

Con este último archivo estamos modificando la estructura básica del navegador. Estamos superponiendo un panel al elemento status-bar con el identificador ‘mi-panel’ y una etiqueta “Hola Mundo!”.

Ahora volvemos a la Herramienta Extension Builder y volvemos a cargar nuestra carpeta “Hola Mundo”. Ahora editaremos la información básica de nuestra extensión, presionamos el botón “Edit install.rdf” y nos presentará un formulario que llenaremos con la información de nuestra primera extensión.

Presionamos “Save” (No hay algun aviso explícito de que se haya guardado, así que confiemos en que lo hizo) y presionamos Close para cerrar la ventana.

Ahora, podemos notar que ya está activo el botón “Build Extension”, lo presionamos para que nos genere el archivo XPI. Vemos en la barra de estado que aparece la leyenda: Built hola_mundo.xpi

Ahora vamos a nuestra carpeta de la extensión y encontraremos nuestra extensión empaquetada y lista para probar. La abrimos con nuestro Firefox de desarrollo. y la instalamos como cualquier extensión normal. Nos pedirá reiniciar Firefox.

Al reiniciarse veremos que nuestra extensión ¡ya está corriendo en Firefox !. En la barra de estado en la esquina inferior derecha observaremos nuestra superposición “Hola Mundo!”. Felicidades !! acabamos de dar el primer paso en la creación de extensiones.

Más adelante veremos tareas más avanzadas y cómo podemos ayudarnos con la extensión para desarrolladores de extensiones que instalamos en nuestro Firefox de desarrollo.

Espero tus comentarios, trackbacks, dudas y sugerencias.

Parte 2: El XML rocks!

Una Interfaz de Programación de Aplicaciones (API en inglés) es una colección de procedimientos predefinidos para que un programa pueda usar a otro. En la Internet, una API hará posible que una computadora use a otra. Contrariamente al método del hacker explicado previamente, las APIs están destinadas a ser soportadas oficialmente por los propietarios de la aplicación web a través de documentación y soporte extensos. Tu script ya no intentará imitar de forma humana los nombres de variables y la URL del action, sino que más bien tomará su propia ruta para obtener datos del servidor.

Las mayoría de las APIs se basan en XML, que hace posible transferir datos estructurados a través de la web. Básicamente, en lugar de enviar variables POST simples al servidor y recibir HTML, tu petición enviará y recibirá datos XML limpios e inmutables.

Al inicio, no hay límite para imaginar y diseñar una API. Basándonos en los ejemplos de la parte 1, podemos imaginar la siguiente forma de solicitud y respuesta:

POST /submit HTTP/1.1
Host: api.community.com
Content-Length: 125
Content-Type: application/text-xml

<?xml version="1.0" encoding="UTF-8"?>
 <datos>
	<nombre>Juan</nombre>
	<ciudad>Guadalajara</ciudad>
	<edad>23</edad>
 </datos>

Nota: es muy comun diseñar la API de tal forma que las solicitudes se envíen a un subdominio como api.comunidad.com. De esta forma, las solicitudes al subdominio www se supone que son enviadas por seres humanos y devuelven respuestas HTML mientras que las solicitudes en el subdominio api se supone que son enviadas por computadoras y devuelven respuestas XML. También notemos que quité la extensión .php de la página de submit (envío): a través de la API, no estamos accesando a una página sino a un recurso.

HTTP/1.1 200 OK
Date: Tue, 17 Jun 2008 20:24:00 GMT
Content-Length: 111
Content-Type: application/text-xml

<?xml version="1.0" encoding="UTF-8"?>
  <datos>
    <nombre>Anna</nombre>
    <nombre>Lisa</nombre>
  </datos>

Programáticamente hablando, codificar la solicitud en PHP es posible usando cURL e interpretar la respuesta certamente sería más fácil usando SimpleXML (incluida en PHP5). Por lo tanto, implementar la llamada API anterior en PHP se vería así:

<?php

   // PASO 1: ENVIAR LA SOLICITUD
   $url = 'http://api.comunidad.com/submit';
   $header = array('Content-type: application/text-xml');
   $xml = '<?xml version="1.0" encoding="UTF-8"?><data><name>Joe</name>
           <city>Indianapolis</city><age>23</age</data>';
   $handle = curl_init();
   curl_setopt($handle, CURLOPT_URL, $url);
   curl_setopt($handle, CURLOPT_HTTPHEADER, $header);
   curl_setopt($handle, CURLOPT_POSTFIELDS, $xml);
   curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1);
   $response = curl_exec($handle);
   curl_close($handle);

   // PASO 2: INTERPRETAR EL RESULTADO E IMPRIMIR LOS NOMBRES
   $result = new SimpleXMLElement($response);
   $val = array();
   foreach ($result->nombre as $nombre) {
      $val[] = (string) $nombre;
   }
   print_r($values);

?>

Nots: en este script cURL tuve que especificar el encabezado Content-type para que nuestra solicitud fuera interpretada correctamente por el servidor. Pude haber usado algunas opciones más como CURLOPT_TIMEOUT, por ejemplo.

Usar una API es mejor que forzar un formulario web por 3 razones:

• La solicitud pasa por una ruta especial diseñada para computadoras que está claramente definida en el subdominio api.comunidad.com
• Los datos de la respuesta están estructurados de mejor forma y son más fáciles de interpretar que una página plana en HTML.
• Los desarrolladores de comunidad.com, deben comprometerse en mantener un formato XML constante para las respuestas XML que son entregadas a las máquinas: esto significa, por ejemplo, que no pueden drásticamente dejar de aceptar las etiquetas <ciudad> en las solicitudes, o cambiar <nombre> por <persona> en las etiquetas de la respuesta (o de lo contrario, podrían generar un terrible desastre en las aplicaciones de terceras partes que aprovechan su API).

Esta última razón se resume bien en la famosa nota de Joshua Bloch de Google sobre el diseño de APIs:

Las APIs públicas son para siempre – una oportunidad para hacerla bien.

En el ejemplo anterior, asumimos que los desarrolladores de comunidad.com crearon una API desde cero, inventando una estructura XML personalizada para solicitudes y respuestas. Cuando se trata de diseñar una API, la realidad es que los desarrolladores tienden a respetar algunas estructuras API existentes diseñadas específicamente para APIs de tal forma que la API sea más fácil de aprender y ser usada para desarrolladores de terceras partes.

Hoy en día, 3 estándares API son usados ampliamente en la web:

• REST (REpresentational State Transfer)
• XML-RPC (XML Remote Procedure Call)
• SOAP (Simple Object Access Protocol)

En los siguientes posts echaremos un ojo a estos tres estándares XML con ejemplos detallados de cómo enviar y recibir datos.

(Traducción realizada por Nokrosis, del post original de Nemetral)

Continuará…