Google Mashup Editor

À quoi sert Google Mashup Editor ?

L'idée est d'offrir aux développeurs un Framework permettant d'utiliser des flux RSS à l'intérieur des services Google. Il vous permet de créer des Mashups à l’aide d’un langage de balisage simple et de déployer des composants d'interface utilisateur AJAX.

S'inscrire sur Google Mashup Editor

Vous pouvez laisser votre adresse email de façon à pouvoir vous inscrire sur ce service. Personnellement, j'ai reçu une invitation moins de 24 heures après. A priori, les invitations sont donc faciles à obtenir… Il vous suffit ensuite d'accéder à Google Mashup Editor (GME) puis de saisir les identifiants de votre compte Google.
Voici la liste des liens utiles :

• L'interface de Google Mashup Editor : http://editor.googlemashups.com ;
• Un guide de démarrage : http://code.google.com/gme/gettingstarted.html ;
• Une liste de Screencasts : ttp://code.google.com/gme/docs/screencasts.html ;
• Le groupe de discussion : http://groups.google.com/group/google-mashup-editor ;
• La documentation : http://code.google.com/gme/ ;
• La galerie : http://gallery.googlemashups.com.

Cet article a été écrit dans l'unique but de vous en faire une présentation rapide. Dois-je préciser que je n'ai strictement aucune notion de programmation ?

La structure d'un Mashup

Les applications Google Mashup Editor sont composées de HTML, de CSS, de JavaScript et de balises Google Mashup (gm:).
Chaque Mashup débute par la balise qui va encadrer l'ensemble.
À l'intérieur de ces deux balises, vous allez définir vos différents modules de cette façon :
Un module utilise un gabarit ou modèle préétabli (Blog, Task ou List) ou un autre type de modèle que vous allez définir à l'intérieur de la balise . Ce module peut aussi utiliser un flux RSS ou ATOM.
Vous pouvez juxtaposer des éléments du langage HTML avec ceux de Google Mashup Editor. Généralement, vous placerez ces éléments HTML dans la balise en les faisant précéder de balises Mashup Editor appelés Controls ( et ).
Ces contrôles sont placés à l'intérieur d'une balise HTML comme
ou .
Les étapes de création d'un Mashup peuvent être les suivantes :

• Définition de l'interface utilisateur ;
• Définition d'un modèle pour les éléments de l'interface graphique qui se répètent ;
• Définition de la source GME (l'élément Liste, par exemple) ;
• Définition de la source des données ;
• Mode d'interaction des modules entre eux et en fonction des événements que vous aurez définis.

Créer un Mashup avec Google Mashup Editor
Il n'y a vraiment rien de compliqué !
Vous copiez ce type de texte :

<gm:page title="Mon application" authenticate="false">
<h1>Toute l'actualité de Google !</h1>
<table>
<tr>
<td>Titre de l'histoire </td>
<td>L'histoire que je vais raconter </td>
</tr>
</table>
</gm:page>

Vous cliquez sur le bouton Test.
Afin de suivre les différentes étapes de votre travail, cliquez sur l'onglet Sandbox puis le bouton Reload.
Cliquez sur le bouton Tag look-up afin d'afficher une explication en anglais de la signification des différentes balises.

Créer un modèle pour votre Mashup

La prochaine étape consiste à faire de notre tableau un modèle. Il faut :

• Ajouter la balise gm:template ;
• Ajouter l'attribut Repeat de façon à répéter les modifications pour chacun des éléments de votre source de données ;
• Modifier le titre et la description de notre Mashup en les remplaçant par les balises gm:text ou gm:html qui font référence aux informations contenues dans notre source de données.

<gm:page title="Mon application" authenticate="false">
<h1>Toute l'actualité de Google !</h1>
<gm:template id="googlexxlTemplate">
<table>
<tr repeat="true">
<td>
<gm:text ref="atom:title"/></td>
</tr>
</table>
</gm:template>
</gm:page>

Nous allons maintenant ajouter une balise List afin de définir le modèle que nous allons utiliser :

<h1>Google XXL</h1>
<gm:list id="googlexxlFeed" template="googlexxlTemplate"/>

L'étape suivante consiste à définir la source de données que nous allons utiliser :

<gm:list id="googlexxlFeed" data="http://feeds.feedburner.com/GoogleXxl" pagesize="5" template="googlexxlTemplate"/>

L'attribut PageSize permet de définir le nombre de lignes qui vont être affichés.
Google Mashup Editor fournit un certain nombre de thèmes par défaut. Afin d'utiliser un thème, vous devez définir une classe CSS encadrée par la balise <div> ou <table> :

<table class="blue-theme">

Les thèmes possibles sont les suivants :

• blue-theme ;
• gray-theme ;
• orange-theme ;
• purple-theme ;
• green-theme ;
• red-theme ;
• black-theme.

Au final, vous obtenez ceci :

<gm:page title="Mon application">
<h1>Toute l'actualité de Google !</h1>
<gm:list id="xxlFeed" data="http://feeds.feedburner.com/GoogleXxl" pagesize="5" template="xxlTemplate"/>
<gm:template id="xxlTemplate">
<table class="blue-theme">
<tr repeat="true">
<td>
<gm:text ref="atom:title"/>
<gm:html ref="atom:summary"/>
<gm:html ref="atom:content"/>
</td>
</tr>
</table>
</gm:template></gm:page>

Dès que vous êtes satisfait du résultat, il ne vous reste plus qu'à cliquer sur File - Publish.
Durant mes tests, j'ai obtenu un paquet d'erreurs de ce style : "Server Error". En bref, cela arrive de temps en temps…
Afin d'obtenir plus d'exemples de ce qu'il est possible de faire, développez la branche Samples. Il y en a pour tous les goûts…
L'onglet Feed Browser vous permet de tester les flux RSS que vous souhaitez utiliser :
Dans la liste déroulante GData Feed, sélectionnez l'option Remote Feed.
Saisissez l'adresse URL du flux puis cliquez sur le bouton Get Feed.

Google Mashup Editor contre Yahoo! Pipes

On pourrait s'amuser à comparer cet outil avec Yahoo! Pipes. En fait, les deux se conjugue parfaitement : vous nettoyez votre flux avec le service de Yahoo! puis créez ensuite votre Mashup en utilisant le produit de Google. Le meilleur des deux mondes en quelque sorte !