Gselper, et vos Google Spreadsheets deviennent des objets

Je viens tout juste de mettre en ligne et documenter un peu le code de Gselper, une petite classe Javascript ayant pour but d’utiliser n’importe quel document Google Spreadsheet comme un objet sur votre site.

Pourquoi faire une chose pareille

C’est une très bonne question. La seul raison qui est de loin la plus évidente étant que pour certains petits projets, ni vous ni moi n’avons le temps de créer un back office en bonne et due forme, avec une identification sécurisée des utilisateurs, un lieu de discussions, et des outils d’édition de données très souples. Et que vois-je ? Google Document rassemble tous ces éléments et dispose en plus d’une API. Pourquoi donc s’en priver ? J’ai mis en oeuvre cet outil il y a quelques semaines pour Eurosport et plus récemment pour RFI.  Le chargement du document par l’utilisateur est certes un peu plus long que pour un fichier statique mais cette première implémentation en Javascript n’est qu’une première implémentation en Javascript. Facile de la reproduire en PHP ou en Ruby pour mettre en place un système de cache sur votre serveur.

Bien démarrer avec Gselper

0. Dépendances

Pour fonctionner cette classe dépend de jQuery 1.4+ (non testée sur des version antérieures). Pour installer jQuery, vous pouvez utilisez en trois clics les CDNs de Google :

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

1. Inclure Gselper

Facile, vous faites ça 18 fois par jour. En ayant pris soin de récupérer Gselper sur git, saisissez :

1
<script src="./class.Gselper.js" type="text/javascript"></script>

2. Préparez votre Google Spreadsheet

Après avoir créé un nouveau Spreadsheet sur Google Document, indiquez en tête de votre tableau le nom des colonnes. Attention la version actuelle de Gselper ne fonctionne qu’avec des documents d’une seule feuille. Rendez vous ensuite dans le menu sur « Collaborer » > « Partager en tant que page Web » puis dans la fenêtre Pop-up qui s’affiche cliquez sur le bouton « Démarrer la publication ». Enfin, dans la partie « Insérer un lien vers les données publiées » du formulaire, sélectionnez la version « RSS » est mettez le lien obtenu de coté. C’est très important.

Si vous ne savez pas quelles données utiliser, prenez cet extrait de document.

3. Quelques lignes de code et c’est parti !

Souvenez vous, je vous ai bien dit de mettre le lien précédent de coté. Il va falloir en extraire deux petites choses. Un exemple avec le lien :

https://spreadsheets.google.com/feeds/list/0Avn7N68sxVzHdGpDRVVEZjZrMlBkTmNYLXM3aHYzUHc/od6/public/basic?alt=rss

Ici, relevez l’identifiant du document « 0Avn7N68sxVzHdGpDRVVEZjZrMlBkTmNYLXM3aHYzUHc » et le worksheet « od6  » (qui est toujours od6 si vous n’avez qu’une seule feuille dans votre document).

Une fois dans votre script Javascript vous n’avez plus qu’à faire :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Création de l'instance de Gselper
var doc = new Gselper({
 
    // Identifiant du document
    key: "0Avn7N68sxVzHdGpDRVVEZjZrMlBkTmNYLXM3aHYzUHc",
 
    // Le worksheet du document
    worksheet: "od6",
 
    // La fonction à appeler lorsque le document est chargé
    onComplete: function(data) {
 
        // Ici faites ce qu'il vous chante
        // Par exemple, afficher dans la console le contenu de la première case
        console.log( data.get(0).country );
 
        // Ou parcourir le document ligne après ligne
        $.each(data.get(), function(i, line) {
 
            // et afficher le résultat dans la console
            console.log("Pays : " + line.country);
 
        });
 
        // Jusqu'ici nous avons utilisé la variable reçu en paramètre "data"
        // mais une fois le document chargé, nous pouvons utiliser l'objet "doc",
        // ici pour afficher la première ligne
        console.log( doc.get(1) );               
    }
});

Ce qu’il reste à faire

Le processus de récupération me semble encore un petit peu trop fastidieux. Il serait bon de n’avoir qu’à donner l’url du document tel que son auteur la voit dans son navigateur et n’avoir ensuite qu’à clicher sur « Publier en tant que page Web ». Une Regex se chargerait ensuite d’en extraire les données.

Aussi tous les documents n’ont pas forcément besoin d’identifier leurs lignes par des numéros mais plutôt par des clefs plus élaborées. J’aimerai donc ajouter une nouvelle option pour préciser la clef à utiliser dans la méthode « get() » de la classe Gselper.

En outre l’utilisation de jQuery dans cette classe est minimale, nous pouvons donc sans trop de mal adapter le code pour supprimer cette dépendance qui n’est pas nécessairement la bienvenue.

Enfin, comme vous pouvez l’observer ce code est assez simple et il est largement envisageable d’en faire l’implémentation dans d’autres langage comme Ruby, PHP ou encore Java.

Votre aide est la bienvenue !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>