Herramientas para desarrolladores

En este documento se proporcionan directrices generales para programar, depurar y alojar gadgets.

Contenido

  1. Sugerencias de programación y depuración
    1. Empieza con un gadget sencillo
    2. Analiza los gadgets existentes
    3. Utiliza la consola JavaScript de Firefox
    4. Comprueba tus suposiciones
    5. Herramientas adicionales
  2. Alojamiento en el Editor de gadgets de Google (Google Gadgets Editor, GGE)
    1. Comandos del menú "Archivo"
    2. Publicación de gadgets desde el GGE
  3. Alojamiento en Google Code
    1. Creación de un nuevo proyecto
    2. Comprobación de un proyecto
    3. Subida de archivos

Sugerencias de programación y depuración

Una parte del proceso de desarrollo de gadgets (o cualquier proceso de desarrollo de código) es saber por qué las cosas no siempre funcionan de la forma que uno espera. En esta sección se describen algunas técnicas básicas para evitar problemas y para solucionarlos cuando se produzcan.

Empieza con un gadget sencillo

Una norma fundamental de la programación es empezar con un procedimiento sencillo. Crea un gadget básico y amplíalo progresivamente. Pruébalo cada vez que introduzcas una modificación. De este modo, te será más fácil detectar si un cambio ha provocado algún problema.

Analiza los gadgets existentes

Uno de los mejores recursos de que dispones como desarrollador de gadgets son los gadgets existentes. Ve al directorio de contenido y consulta el código fuente de aquellos gadgets que se parezcan al que intentas implementar.

Utiliza la consola JavaScript de Firefox

Puedes utilizar el navegador web Firefox para probar tus gadgets en iGoogle mientras los creas. Si un gadget no funciona correctamente, abre la consola JavaScript ("Herramientas" > "Consola de JavaScript"), selecciona "Errores" y desplázate hacia abajo para ver si tu gadget presenta errores de sintaxis JavaScript. Antes de cada prueba, no olvides borrar de la consola los mensajes de error anteriores.

Si utilizas otro navegador, busca un depurador o una consola JavaScript compatibles con tu navegador.

Comprueba tus suposiciones

Si compruebas tus suposiciones durante el proceso de creación del gadget, puedes ahorrarte mucho tiempo y esfuerzo. ¿Estás seguro de que tu variable tiene el valor que piensas? ¿Estás seguro de que tu conjunto contiene elementos? ¿Es posible que la función que "parece no funcionar correctamente" no se esté ejecutando? Para comprobar tus suposiciones, imprime los mensajes de estado en distintos puntos de tu programa. Por ejemplo, el gadget siguiente tiene una función print() que escribe mensajes de depuración en debug_div si la etiqueta debug tiene un valor distinto a cero:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs(); // debug flag. When its value is non-zero, debugging messages are displayed var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){ // DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
document.getElementById("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
document.getElementById("debug_div").innerHTML = debug_html;
}
}

gadgets.util.registerOnLoadHandler(displayDate);
</script>
]]>
</Content>
</Module>

Nota: consulta en la sección MiniMessages la descripción del API de MiniMessages, que permite modificar el comportamiento y el aspecto de los mensajes que aparecen en un gadget.

Herramientas adicionales

Los siguientes complementos de Firefox pueden ayudarte a tener un control más preciso de tus gadgets durante su creación:

  • Firebug ofrece herramientas de depuración e inspección DOM.
  • Web Developer añade al navegador un menú y una barra de herramientas para programadores web.

Alojamiento en el Editor de gadgets de Google (Google Gadgets Editor, GGE)

Si no tienes acceso a un servidor para almacenar los archivos XML de tus gadgets, el Editor de gadgets de Google (GGE) es una buena herramienta para alojar y editar gadgets rápidamente. Para utilizar GGE, asegúrate de haber accedido con una cuenta de Google (o de lo contrario no podrás guardar tu gadget). Por ejemplo, si cambias el mensaje "Hello, world!"" por "¡Hola, desarrolladores de gadgets!" y usas "Archivo" > "Guardar como" para guardar la especificación del gadget con un nuevo nombre, GGE alojará la nueva especificación del gadget con el nombre especificado:

Nota: GGE no es todavía totalmente compatible con el API gadgets.*, por lo que no todas las funciones se encuentran habilitadas. Puedes usar GGE para editar y alojar archivos, pero no podrás obtener una presentación preliminar de tu gadget.

Comandos del menú "Archivo"

La ficha "Editar" se compone de un menú desplegable "Archivo" que incluye los comandos que se mencionan a continuación. GGE usa tu cuenta de Google para identificar los archivos que te pertenecen, por lo que deberás acceder al sitio para usar la mayoría de estos comandos.

Comando Descripción
Abrir Abre un gadget creado anteriormente y guardado a través de GGE.
Guardar Guarda la especificación del gadget que se está editando. Si no has guardado el gadget con anterioridad, te preguntará qué nombre deseas para el gadget. Si guardas un gadget en GGE, GGE lo alojará automáticamente. Un gadget debe estar alojado en un servidor público para poder publicarlo. GGE proporciona este alojamiento, además de diversos medios para publicarlo.
Guardar como Guarda el gadget que se está editando con el nombre proporcionado.
Cambiar nombre Cambia el nombre del gadget que se está editando. Esta opción sólo está disponible una vez guardado el gadget.
Subir Permite buscar recursos de gadgets en el sistema de archivos y guardarlos en el entorno de GGE. Estos recursos pueden ser especificaciones de gadgets o otros recursos de gadgets como, por ejemplo, archivos de imágenes. GGE alojará los recursos una vez subidos. De este modo podrás importarlos a la especificación de tu gadget. Para ello, basta con que hagas referencia a sus direcciones URL de GGE.
Publicar El elemento de menú "Publicar" proporciona las siguientes opciones para publicar tu gadget:
  • Añadir a mi página de iGoogle
  • Publicar en un directorio de iGoogle
  • Añadir a una página web

El comando sólo está disponible una vez guardado el gadget (GGE alojará tu gadget una vez guardado). Para obtener más información, consulta Publicación de gadgets desde el GGE.
Suprimir Muestra una lista de tus gadgets de GGE, y te permite seleccionarlos y suprimirlos.

Publicación de gadgets desde el GGE

El elemento de menú "Publicar" del menú "Archivo" proporciona las siguientes opciones para publicar tu gadget:

  • Añadir a mi página de iGoogle - añade tu gadget a tu página de iGoogle. Es la forma más sencilla de probar tu gadget durante su creación.
  • Publicar en un directorio de iGoogle - te permite acceder a la página de envío de iGoogle con la URL de tu gadget rellenada previamente en el formulario. Puedes usar el formulario de envío para enviar tu gadget al directorio de contenido de iGoogle. Tu gadget no se enviará a menos que hagas clic en "Enviar". Éste es el último paso del proceso de creación de un gadget, una vez que el diseño de tu gadget sea definitivo y lo hayas probado. No es necesario que lleves a cabo este paso para usar tu gadget y compartirlo con tus amigos. Esta opción es para desarrolladores de gadgets que deseen poner sus gadgets a disposición de todos los usuarios.
  • Añadir a una página web - permite acceder a la página de creadores de sindicación. La sindicación no es compatible aún con las API de OpenSocial ni gadgets.*.

La URL de tu gadget aparece en la esquina superior derecha de GGE. Para obtener la URL completa, haz clic en el enlace.

Cuando desarrolles y pruebes tu gadget, te recomendamos que lo pruebes en tantos entornos distintos como te sea posible. Una vez que el diseño de tu gadget sea definitivo y lo hayas probado, podrás decidir si deseas distribuirlo a todos los usuarios enviándolo al directorio de contenido de iGoogle.

Alojamiento en Google Code

La forma más sencilla de alojar los recursos y las especificaciones de gadgets es a través de GGE. A los desarrolladores que necesiten un sistema de control de fuentes más completo, les recomendamos que alojen sus gadgets en Google Code: http://code.google.com/hosting. Es un servicio gratuito que ofrece varias ventajas a los desarrolladores de gadgets. Una de sus principales ventajas es el control de versiones a través de Subversion, un sistema de control de versiones de software libre. Gracias a Subversion, podrás supervisar los cambios y conservas distintas versiones de tus gadgets. Es posible consultar todo el historial de revisión, lo que permite recuperar versiones anteriores o analizar las diferencias entre versiones distintas. Para obtener más información sobre Subversion, consulta el libro de Subversion.

Para alojar tus gadgets en Google Code, lo primero que necesitas hacer es instalar un programa de escritorio ("cliente Subversion") que te permitirá subir y guardar archivos en code.google.com ("repositorio Subversion"). La mayoría de los clientes Subversion cuentan con una interfaz gráfica de usuario que permite interactuar con Subversion de una forma más sencilla que la interfaz de la línea de comandos. Existe una gran variedad de clientes entre los que puedes elegir, en función de tu sistema operativo. Asegúrate de instalar uno que sea compatible con tu sistema. Estos son algunos de los que recomendamos:

  • TortoiseSVN es un cliente Subversion para Windows fácil de utilizar que integra las funciones directamente en el Explorador de Windows.
  • AnkhSVN es un complemento Visual Studio que ofrece acceso a Subversion desde IDE.
  • ZigVersion es un cliente Subversion creado para Mac OS X.
  • RapidSVN es un cliente Subversion para GUI de varias plataformas.  Este cliente es compatible con los tres sistemas operativos principales: Windows, Mac OS X y Linux.

A continuación te ofrecemos una lista completa de clientes y complementos.

Cuando hayas instalado Subversion en tu equipo, sigue los pasos que se describen a continuación para empezar a utilizar Google Code para alojar tus proyectos.

Creación de un nuevo proyecto

Para crear un nuevo proyecto:

  1. Accede a http://code.google.com/hosting con tu cuenta de Gmail.  Si todavía no la tienes, crea una.
  2. Haz clic en Crear un proyecto nuevo.
  3. Rellena los campos de tu nuevo proyecto:
    • Utiliza caracteres en minúscula para el nombre de tu proyecto como, por ejemplo, my-gadgets. Recuerda que el nombre del proyecto forma parte de la URL del mismo y, una vez definido, no se podrá modificar.
    • Escribe un resumen y una descripción.
    • Elige una licencia de software libre. Para obtener más información, consulta el artículo de la Wikipedia sobre licencias Open Source.
    • Paso opcional: asigna etiquetas para que los demás usuarios encuentren tu proyecto fácilmente.
  4. Comprueba si hayas rellenado todos los campos obligatorios y haz clic en Crear proyecto.
  5. Has terminado.  Accederás a la página Página principal del proyecto. Comprueba que tu URL se parezca a esta: http://code.google.com/p/<nombre de proyecto>/

Ya tienes tu proyecto en code.google.com. Se habrá creado un repositorio Subversion con el nombre de tu proyecto. Haz clic en la ficha Fuente y, a continuación, en el enlace Repositorio Subversion.

La URL deber ser parecida a ésta: http://<nombre de proyecto>.googlecode.com/svn/. Deben aparecer tres enlaces de directorio: branches, tags y trunk. Cuando subas tus archivos en tu proyecto, se colocarán en la carpeta /trunk. Puedes incluir la URL http://<nombre de proyecto>.googlecode.com/svn/trunk/ en tus favoritos para acceder a ella más adelante.

Comprobación de un proyecto

Antes de subir archivos, debes descargar el código del repositorio Subversion de tu proyecto. Para ello, necesitas disponer de tres tipos de datos: la URL del repositorio (debes utilizar la versión precedida de https, no de http), el nombre de usuario y la contraseña. Para encontrar esta información, accede a la ficha Fuente (http://code.google.com/p/<nombre de proyecto>/source). La información que aparecerá se debe parecer a ésta:

svn checkout https://<nombre de proyecto>.googlecode.com/svn/trunk/ gadgets-test --username <nombre de usuario>

Cuando el sistema lo solicite, introduce tu contraseña SVN.

Deja esta página abierta en una ventana del navegador mientras sigues con el proceso para obtener los datos necesarios.

Los detalles de la descarga real pueden variar en función del cliente Subversion que utilices. No obstante, el proceso general es el mismo. En las instrucciones de este apartado vamos a asumir que estás usando TortoiseSVN.

Para descargar un proyecto:

  1. Crea una nueva carpeta en el Explorador de Windows y entra en ella.
  2. Haz clic con el botón derecho en SVN Obtener...
  3. Introduce la URL de tu repositorio y haz clic en Aceptar. Ten en cuenta que para este paso debes usar la versión de la URL del repositorio precedida por https. Es necesario para poder leer y escribir. Si usas las versión que empieza por http, sólo tendrás acceso de lectura y no podrás añadir ni confirmar archivos.
  4. TortoiseSVN se conectará al servidor e intentará autenticarte. Se te pedirá que introduzcas tu nombre de usuario y contraseña. Introduce tu nombre de usuario y contraseña, selecciona Guardar autentificación y haz clic en Aceptar. Si no se te pide que introduzcas un nombre de usuario y una contraseña, vuelve al paso 3 y asegúrate de que la URL de tu repositorio comienza por https y no por http.

El cliente se conectará y descargará el repositorio completo. Has terminado.

Si la operación se ha realizado correctamente, verás una nueva carpeta oculta, /.svn.  No la modifiques ni la elimines.

Subida de archivos

Una vez realizada la descarga de tu proyecto, podrás empezar a añadir nuevas carpetas y archivos al directorio mediante los comandos de Subversion.En las instrucciones de este apartado vamos a asumir que estás usando TortoiseSVN.

Para subir un archivo:

  1. Crea un nuevo archivo en tu directorio <nombre de proyecto>.googlecode.com/svn/trunk/ y guárdalo (por ejemplo, nuevo-gadget.xml). Puedes colocar el directorio de archivos en /trunk o en un subdirectorio de /trunk.
  2. Haz clic con el botón derecho en el archivo y selecciona Añadir...  De este modo el archivo se marcará como añadido, pero aún no se habrá subido al servidor. Si colocas el archivo en un directorio que aún no se haya añadido al repositorio, también deberás añadir el directorio. Si añade un directorio, también añadirás todos los archivos que haya dentro de él. A la confirmación de cambios se les aplican estas mismas reglas. No puedes confirmar un archivo en el repositorio hasta que el directorio en el que se encuentra se ha confirmado.
  3. Continua editando el archivo hasta que estés listo para confirmarlo (subirlo).
  4. Cuando estés preparado para confirmar el archivo, haz clic derecho en el archivo y selecciona SVN Confirmar...

Si se te pide, introduce una nota opcional en el registro de mensajes y haz clic en Aceptar. Comenzará la transferencia de tu archivo al servidor.

Una vez que el archivo se ha transmitido al servidor, el proceso de confirmación (subida) habrá finalizado y el archivo estará disponible online de forma inmediata en http://<nombre de proyecto>.googlecode.com/svn/trunk/new-gadget.xml. Ten en cuenta que para consultar (leer) archivos del repositorio de una forma sencilla, debes utilizar la URL de repositorio que comienza por http.

Puedes crear estructuras de directorio dentro de tu repositorio que aparecerán reflejadas en la URL. Por ejemplo, si añades y confirmas un nuevo archivo en /a/b/c/nuevo-gadget.xml, el archivo se alojará en http://<nombre de proyecto>.googlecode.com/svn/trunk/a/b/c/nuevo-gadget.xml.

Para obtener más información sobre el alojamiento de proyectos en Google Code, visita la sección de preguntas frecuentes.

Volver al principio