jTemplates, jQuery et Piwik : I'm watching U !

Genèse

Acte 1 : aux techdays 2009, j'ai assisté à une session sur les nouveautés ASP.NET 4.0, dont MS Ajax Pure Client Model qui propose des contrôles côté client : pouvoir avoir en gros un repeater mais géré en javascript. Dans ce cadre, l'orateur a parlé de jTemplates, dont l'objectif est le même : moteur javascript (plugin jQuery) pour gérer des données uniquement côté client, ceci rendu possible à l'aide d'un langage lu par le moteur.

Acte 2 : avec mon outil de statistiques Piwik, j'utilise une application RDA Desktop Web Analytics fonctionnant sous AIR. Dans les dernières versions, il y a un onglet très sympa "Live !" qui affiche les dernières visites du blog :

Acte 3 : au hasard du Net, je suis tombé là-dessus, que j'ai trouvé terrible (un rien fascine le geek qui sommeille en moi).

Et là, Alfihar se dit, tiens

et si nous faisions la même chose avec Piwik sur une page Web pour avoir un aperçu de jTemplates.

Live visits

Dans l'API de Piwik, nous trouvons la méthode Live.getLastVisits qui retourne les 10 dernières visites (au format JSON, XML, ...) du blog inspecté. L'URL est accessible si l'accès anonyme est activé, par exemple avec un retour XML.

Avec la fonction getJSON de jQuery, on appelle Live.getLastVisits, en précisant que l'on souhaite un retour en JSON (format=json). Le résultat est injecté dans le squelette jTemplates qui itère dessus afin d'afficher chaque élément du tableau JSON dans le tableau.

La méthode Piwik renvoie un tableau au format JSON avec la liste des connexions :

[
{"label":"","ip":false,"idVisit":"15269","countActions":"1",
"isVisitorReturning":"0","country":"France","countryFlag":"plugins\/UserCountry\/flags\/fr.png",
"continent":"Europe","provider":"Numericable","providerUrl"
:"http:\/\/www.numericable.fr\/","idSite":"1","serverDate":"2009-03-07","visitLength":"10","visitLengthPretty"
:"10s","firstActionTimestamp":1236455913,"lastActionTimestamp":1236455913,"refererType":"searchEngine"
,"refererName":"Google","keywords":"poo+evenement+javascript","refererUrl":"http:\/\/www.google.fr\/search
?hl=fr&q=poo+evenement+javascript&start=10&sa=N","searchEngineUrl":"http:\/\/www.google.com"
,"searchEngineIcon":"plugins\/Referers\/images\/searchEngines\/www.google.com.png","operatingSystem"
:"Windows Vista","operatingSystemShortName":"Win Vista","operatingSystemIcon":"plugins\/UserSettings
\/images\/os\/WVI.gif","browserFamily":"gecko","browserFamilyDescription":"Gecko (Mozilla, Netscape)"
,"browser":"Firefox 3.0","browserIcon":"plugins\/UserSettings\/images\/browsers\/FF.gif","screen":"wide"
,"resolution":"1440x900","screenIcon":"plugins\/UserSettings\/images\/screens\/wide.gif","plugins":"flash
, director, realplayer, windowsmedia","serverDatePretty":"sam 07 mar","serverTimePretty":"20:58:33"}
]

Le template jTemplates avec une boucle #foreach et l'affichage des champs de l'objet JSON que l'on souhaite afficher (countryFlag, refererType, searchEnginIcon , keywords, serverTimePretty, ...). Chaque instruction jTemplates à interpréter est entre { }

<script type="text/html" id="visitTemplate">
{#foreach $T as visit}
   <tr style="vertical-align: top">
        <td><img src="../piwik/{$T.visit.countryFlag}" /></td>
        <td>{$T.visit.refererType.substring(0,1)}&nbsp;</td>
        <td>{#if $T.visit.searchEnginIcon != null} 
           <img src="../piwik/{$T.visit.searchEngineIcon}" alt="?"/> 
                  {#/if}
        </td>
        <td id="{$T.visit.idVisit}">{utf8_decode(unescape($T.visit.keywords.replace(/\+/g,' ')))}</td>
        <td>{$T.visit.serverTimePretty}</td>
        <td style="text-align: center">
         <img src="../piwik/{$T.visit.screenIcon}" alt="?"/>
         <img src="../piwik/{$T.visit.operatingSystemIcon}" alt="?"/>
         <img src="../piwik/{$T.visit.browserIcon}" alt="?"/>
         </td>
    </tr>
{#/for}
</script>

où à chaque itération, le résultat sera ensuite injecté dans l'élément tbody grâce à la fonction setTemplates sur ce dernier (voir code javascript après) :

<table id="visits">
    <thead style="text-align: left">
     <tr style="vertical-align: top;">
         <th>Pays</th>
         <th>RT</th>
         <th></th>
         <th>Mots clés</th>
         <th>Heure</th>
         <th style="text-align: center">Détails visiteur</th>
     </tr>
     </thead>
    <tbody style="text-align: left"/>
</table>

le code javascript à la fin de la page (bonne pratique : toujours mettre le javascript à la fin d'une page) : appel Ajax, puis avec le retour en JSON, injection grâce à la fonction processTemplate(data) des données data qui appliquera les données au template précédemment défini. On rafraichit le tableau toutes les 60 s.

$().ready(function() {
     var visits = $('#visits TBODY');
     visits.setTemplate($('#visitTemplate').html());
     var loadData = function() {
         $.getJSON("http://olivier-duval.info/piwik/index.php?module=API&method=Live.getLastVisits&limit=20&format=json&idSite=1",
             function(data) {
                  if (data & data.length > 0) {
                         visits.processTemplate(data);
                  }
             });
      }
      window.setInterval(loadData, 60000);
      loadData();
});
</script>

Parmi les champs de l'objet JSON, nous avons keywords qui représente les mots clés de recherche lorsque l'internaute vient d'un moteur de recherche. Ces derniers sont encodés.

Nous aurons par exemple la phrase r%c3%a9f%c3%a9rencer+blogger, qu'il faudra transformer en référencer blogger.

Simple : on remplace les + par des espaces, puis on appelle la fonction javascript unescape qui permet de convertir le code Hexa en code ASCII. Les caractères encodés sont en UTF-8, soit sur 2 octets. Un é a pour code hexa en UTF-8 c3c9 (utiliser ce site de recherche, très utile pour trouver le é de notre exemple). Sur Internet, on pourra trouver une fonction pour ensuite décoder le caractère rendu par unescape pour l'afficher correctement.

On a donc cette suite de fonctions sur la chaîne keywords : utf8_decode(unescape($T.visit.keywords.replace(/\+/g,' ')))

La fonction utf8_decode :

<script language="javascript" type="text/javascript">
function utf8_decode ( str_data ) {
     var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0;
     str_data += '';
      while ( i < str_data.length ) {
             c1 = str_data.charCodeAt(i);
             if (c1 < 128) {
                    tmp_arr[ac++] = String.fromCharCode(c1);
                    i++;
             }
             else if ((c1 > 191) & (c1 < 224)) {
                    c2 = str_data.charCodeAt(i+1);
                    tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
                    i += 2;
             } else {
                    c2 = str_data.charCodeAt(i+1);
                    c3 = str_data.charCodeAt(i+2);
                    tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                     i += 3;
              }
       }
    return tmp_arr.join('');
}

Le résultat final du Live visits :

La page appelée par la iframe pour avoir le code complet.

Conclusion

Ce simple type d'application donne pas mal d'idées pour la mise en situation de jTemplates : page de tableau de bord, monitoring, ...où l'on exploite la navigateur pour les traitements avec JSON, et Ajax pour minimiser le chargement des données. L'expérience utilisateur s'en trouve enrichi.