Google Mashup Editor

Por el 13 de mayo de 2008

en: Negocio

Hace ya algún mes que Google anunció el lanzamiento de este nuevo servicio, de momento en beta cerrada para desarrolladores, hoy he recibido un correo en el que se me da la bienvenida al servicio y se me activa una cuenta para su uso.

Para aquellos que aún no hayan escuchado hablar de Google Mashup Editor decir que es un servicio que proporciona al usuario herramientas simples para crear mashups en poco tiempo.

La verdad que tras probarlo me gusta bastante y puedo decir que con este servicio la creación de mashup es cuestión de minutos.

Una vez creado un mashup se puede distribuir desde googlemashups.com, facilitando la publicación de proyectos para aquellos usuarios que no dispongan de servidor y base de datos, por la autentificación de usuarios no te preocupes Google lo hace por tí.

Aquí tienes la galería de proyectos publicados ya en los servidores de Google Mashup.

Estos son dos buenos ejemplos de aplicaciones creadas con este servicio: Task, Map Wiki.

Ejemplo de aplicación en Google Mashup Editor

Comenzar a utilizar este servicio es realmente sencillo, para este ejemplo se necesitan 5 minutos y una cuenta activa para el uso de la BETA de Google Mashup Editor.

Vamos a intentar crear una aplicación muy sencilla que muestre por pantalla el clásico mensaje de “Hola Mundo” y que lea un RSS mostrando sus 10 primeros registros en una tabla.

  1. La primera parte es muy sencilla, simplemente deberemos incluir los tags de inicio y fin de aplicación y el HTML que queremos mostrar.

    <gm:page title=”hello”>
    <h1>Hello World!</h1>
    </gm:page>

  2. Ahora viene la parte más complicada de este sencillo ejemplo, queremos mostrar las 10 primeras entradas de un RSS.

    Para ello deberemos tener clara la estructura de las aplicaciones creadas con este servicio, tendremos módulos (module) y plantillas (template).

    En este ejemplo tenemos que tener en cuenta que el módulo se encargará de recuperar los datos del archivo XML y la plantilla definirá como debemos mostrar esos datos.

    En primer lugar nos encargaremos de la plantilla:

    <gm:template id=”TuFuncion”>
    <table>
    <tr>
    <td>CAMPO LIBRE</td>
    <td>ENTRADA DEL FEED</td>
    </tr>
    </table>
    </gm:template>

  3. Le indicamos cuál es el elemento a repetir a la hora de ir listando los diferentes registros recogidos del archivo XML.

    <gm:template id=”TuFuncion”>
    <table>
    <tr repeat=”true”>
    <td>CAMPO LIBRE</td>
    <td>ENTRADA DEL FEED</td>
    </tr>
    </table>
    </gm:template>

  4. Hasta el momento no habíamos definido los datos que debe contener la tabla y habíamos colocado dos cadenas de prueba, vamos a reemplazar estas cadenas por los campos que nos devolverá el módulo y que contiene los datos del feed.

    <gm:template id=”diggTemplate”>
    <table>
    <tr repeat=”true”>
    <td>Titulo:</td>
    <td><gm:text ref=”atom:title”/></td>
    </tr>
    </table>
    </gm:template>

  5. Para terminar añadimos el módulo que se encarga de recoger los datos e indicar la plantilla sobre las que se deben imprimir los datos.

    <gm:list id="diggFeed" data="http://www.tufuncion.com/rss" pagesize="10" template="TuFuncion"/>

  6. El archivo final nos quedará así:

    <gm:page title="My App" authenticate="false">
    <h1>Hola Mundo!</h1>
    <gm:list id="diggFeed" data="http://www.tufuncion.com/rss" pagesize="10" template="TuFuncion"/>
    <gm:template id="TuFuncion">
    <table>
    <tr repeat="true">
    <td>Titulo:</td>
    <td><gm:text ref="atom:title"/></td>
    </tr>
    </table>
    </gm:template>
    </gm:page>

  7. Una vez hemos realizado todos estos pasos podremos guardar nuestro proyecto, mediante la opción “Publish Project” se nos da la opción de publicar el proyecto, Google Mashup nos pedirá un nombre para guardar el proyecto y la dirección de acceso quedará: TUPROYECTO.googlemashups.com, así de fácil.

    Para este pequeño ejemplo he almacenado el proyecto en http://tufuncion.googlemashups.com.

Ejemplo de aplicación: “Organizador de tareas”

Si este ejemplo te ha parecido sencillo y básico prueba con esta otra aplicación.

En este sencillo “organizador de tareas” no he empleado más de 10 minutos y el resultado es notable teniendo en cuenta que el conocimiento del servicio es muy limitado, dejo el código por si a alquien le interesa.

Ejemplo: listadetareastf.googlemashups.com

Si te identificas con tu cuentas de Google verás el ejemplo con gráficos incluidos (porque al estar logueado permite la edición y creación de proyectos y tareas), en caso de no estar logueado el ejemplo queda un poco más simple.

<gm:page title="Lista de Tareas | TuFunción">
<table width="100%>
<tr>
<td width="50%>
<a href="http://www.tufuncion.com/" title="TuFuncion"><img src="http://www.tufuncion.com/themes/tufuncion/logo.png" alt="TuFuncion" border="0"></a>
</td><td width="50%><h1>Organizador de Tareas</h1></td>
</tr>
</table>
<br>
Crea proyectos y añade diferentes tareas. Es muy fácil!
<br><hr>
<table width="100%">
<tr>
<td width="50%">
<gm:list id="Projects" data="${app}/Projects" template="simpleProjects"/>
</td>
<td width="50%">
<gm:list id="tasks" data="${Projects}/tasks" template="simpleTasks">
<gm:handleEvent src="Projects"/>
</gm:list>
</td>
</tr>
</table>
<gm:template id="simpleProjects">
<div repeat="true">
<gm:text ref="atom:title"/>
<gm:editButtons/>
</div>
<gm:create label="Nuevo Proyecto"/>
</gm:template>

<gm:template id="simpleTasks">
<table width="100%">
<tr repeat="true">
<td><gm:text ref="atom:title"/></td>
<td><gm:date ref="gd:when/@startTime"/></td>
<td><gm:editButtons deleteOnly="true"/></td>
</tr>
</table>
<gm:create label="Nueva Tarea"/>
</gm:template>
</gm:page>

He de confesar que me ha sorprendido gratamente este servicio puesto que es muy sencillo crear aplicaciones útiles con unas pocas líneas de código.

Dejar un comentario