Polymer : “les mains dans le cambouis”, épisode 2 : Ajax

Nous parlerons de:

• Comment faire rapidement une petite API REST avec NodeJS et Express
• Comment faire des requêtes GET avec le composant <polymer-ajax>
• Comment faire des requêtes POST avec le composant <polymer-ajax>

Cet article est beaucoup plus court que le précédent, mais reste incontournable si vous voulez réaliser des SPA ayant des interactions avec un serveur.

Pré-requis

Tout d’abord, il faut avoir lu le tuto précédent : http://k33g.github.io/2013/12/07/POLYMER-1.html.

Ensuite, pour ce 2ème épisode nous aurons besoin d’un serveur qui puisse nous renvoyer du flux json et auquel nous pourrons envoyer des données (nous allons stocker notre liste côté serveur). Après réflexion (utiliser Play, utiliser SparkJava, …), j’ai donc décidé d’aller au plus simple : utiliser NodeJS et Express. Je pars du principe que vous avez installé déjà installé NodeJS (et donc le gestionnaire de package npm).

Création du serveur

• en mode console, installez Express : tapez sudo npm -g install express (sous Windows pas besoin de sudo)
• puis créez un répertoire pour votre application (dans mon cas : 02-ajax)

• dans ce répertoire (cd 02-ajax), créez un fichier package.json avec le contenu suivant

    {
      "name": "hello-polymer",
      "description": "hello-polymer app",
      "version": "0.0.1",
      "dependencies": {
        "express": "3.x"
      }
    }
  

• ensuite, tapez npm install, les dépendances nécessaires pour faire tourner Express vont être installées
• créer ensuite (toujours dans le répertoire de votre application) un répertoire public dans lequel vous pouvez copier l’ensemble des fichiers de l’article précédent (index.html, le répertoire components et son contenu, et faites de même pour le répertoire bower_components)

Vous devriez avoir l’arborescence suivante :

Création de l’application Express

Rien de plus simple. Créez dans votre répertoire applicatif un fichier app.js avec le code suivant:

var express = require('express');
var app = express()

var buddies = [
  {name:"Bob Morane"},
  {name:"Doctor No"},
  {name:"Fox Mulder"},
  {name:"Lady Penelope"}
];

app.use(express.static(__dirname + '/public'));
app.use(express.json());
app.use(express.urlencoded());

app.get("/buddies", function(req, res){
  res.send(JSON.stringify(buddies))
});

app.post("/buddies", function(req, res){
  var buddy = req.body
  buddies.push(buddy)
  res.send(JSON.stringify(buddy))
});

app.listen(3000)

Pour lancer notre application, il suffira de lancer node app.js, vous pouvez tester dès maintenant avec l’url http://localhost:3000 dans votre navigateur, vous arriverez sur le contenu de notre page index.html. Si vous avez le plugin Postman pour Chrome, vous pouvez tester votre “api” dès maintenant (vous pouvez aussi utilisez curl).

# Requête GET

# Requête POST

Relancez la requête GET :

Nous avons bien un nouvel enregistrement. Notre serveur est opérationnel. Nous pouvons retourner faire du Polymer.

<buddies-list> appelle le serveur

Alors souvenez-vous, notre “liste de copains” <buddies-list>avait le code suivant :

<polymer-element name="buddies-list">
  <template>
    <polymer-signals on-polymer-signal-newbuddy="{{onNewBuddySignal}}"></polymer-signals>
    <h2>{{title}}</h2>
    <ul>
      <template repeat="{{buddies}}">
        <li>{{name}}</li>
      </template>
    </ul>
  </template>
  <script>
    Polymer("buddies-list",{
      ready: function(){
        console.log("Title is ", this.title);
        this.buddies = [
          {name:"Bob Morane"},
          {name:"Doctor No"},
          {name:"Fox Mulder"},
          {name:"Lady Penelope"}
        ];
      },
      onNewBuddySignal : function(e, data, sender) {
        this.buddies.push(data)
        console.log("Sender : ", sender)
      }
    });
  </script>
</polymer-element>

Nous souhaitons que notre liste soit “remplie” par les infos du serveur. Pour cela nous allons utiliser le composant <polymer-ajax> (qui a été installé avec la commande bower install polymer-elements lors du 1er épisode)

• Supprimez le code de la méthode ready
• Dans <template> on ajoute le composant <polymer-ajax> en précisant ses attributs et callbacks
• Dans la méthode onReceive(response) déclenchée une fois que nous recevons les données du serveur, on affecte les données reçues à la propriétés buddies du composant (propriété utilisée dans le template)
• Remarque : dans le tag <polymer-ajax> vous remarquerez l’attribut auto, qui lance automatiquement la requête.

Votre code devrez ressembler à ceci :

<polymer-element name="buddies-list">
  <template>
    <polymer-ajax id="xhr" auto handleAs="json" method="GET" url="buddies"
                  on-polymer-response="{{onReceive}}"
                  on-polymer-error="{{onError}}"
                  on-polymer-complete="{{onComplete}}">
    </polymer-ajax>
    <polymer-signals on-polymer-signal-newbuddy="{{onNewBuddySignal}}"></polymer-signals>
    <h2>{{title}}</h2>
    <ul>
      <template repeat="{{buddies}}">
        <li>{{name}}</li>
      </template>
    </ul>
  </template>
  <script>
    Polymer("buddies-list",{
      ready: function(){

      },
      onReceive: function(response) {
        this.buddies = response.detail.response;
      },
      onError: function(error) { /*foo*/ },
      onComplete: function(data) { /*foo*/ },

      onNewBuddySignal : function(e, data, sender) {
        this.buddies.push(data)
        console.log("Sender : ", sender)
      }
    });
  </script>
</polymer-element>

Si vous ouvrez votre navigateur avec l’url http://localhost:3000/, vous devriez voir s’afficher la nouvelle liste.

Il ne nous reste plus qu’à gérer l’ajout de nouveaux “buddies”.

<hello-john-doe> parle aussi au serveur

Nous allons modifier notre composant <hello-john-doe> pour qu’il fasse des requêtes de type POST vers notre serveur (pour ajouter des “buddies” à la liste).

Notre code était le suivant :

<polymer-element name="hello-john-doe">
  <template>
    <h1 id="hello">Hello {{name}}</h1>
    <input value="{{name}}">
    <button on-click="{{clickMe}}">Click Me!</button>
  </template>
  <script>
    Polymer("hello-john-doe",{
      ready: function(){
        this.name = "John Doe";
      },
      nameChanged : function() {
        if(this.name != "John Doe") {
          this.$.hello.style.color = "red";
        } else {
          this.$.hello.style.color = "green";
        }
      },
      clickMe : function() {
        this.$.hello.innerHTML="CLICKED";

        this.asyncFire(
          'polymer-signal',
          {
            name : "newbuddy",
            data : { name : this.name }
          }
        );
      }
    });
  </script>
</polymer-element>

• Là aussi nous allons utiliser le composant <polymer-ajax> mais avec method="POST" et sans attribut auto
• Nous changeons la méthode clickMe : lorsque l’on appuie sur le bouton, on passe les informations { name : this.name } au seveur par le biais d’une requête POST.
• La commande this.$.xhr.go(); sert à déclencher l’appel ajax de type POST au serveur (où xhr est l’id du composant <polymer-ajax>)
• Une fois la réponse du serveur obtenue, la méthode onReceive est déclenchée (callback), donc nous déclenchons le signal "newbuddy" avec asyncFire() (cette fois ci pas besoin de passer les données, il faut juste déclencher le signal).

Voici le code modifié :

<polymer-element name="hello-john-doe">
  <template>
    <polymer-ajax id="xhr" handleAs="json" method="POST" url="buddies"
                  on-polymer-response="{{onReceive}}"
    </polymer-ajax>
    <h1 id="hello">Hello {{name}}</h1>
    <input value="{{name}}">
    <button on-click="{{clickMe}}">Click Me!</button>
  </template>
  <script>
    Polymer("hello-john-doe",{
      ready: function(){
        this.name = "John Doe";
      },
      nameChanged : function() {
        if(this.name != "John Doe") {
          this.$.hello.style.color = "red";
        } else {
          this.$.hello.style.color = "green";
        }
      },
      clickMe : function() {
        this.$.hello.innerHTML="CLICKED";

        this.$.xhr.xhrArgs = {
          headers: { "Content-Type": "application/json"},
          body: JSON.stringify({ name : this.name })
        };

        this.$.xhr.go();
      },
      onReceive: function(response) {
        this.asyncFire(
          'polymer-signal', { name : "newbuddy" }
        );
      }
    });
  </script>
</polymer-element>

Allons juste modifier le code du composant <buddies-list> pour qu’il rafraîchisse la liste lors de l’ajout d’un élément. Pour cela il suffit de modifier dans buddies-list.html la méthode onNewBuddySignal() (déclenchée par le signal “newbuddy”) de cette façon :

onNewBuddySignal : function(e, data, sender) {
  this.$.xhr.go();
}

Avec this.$.xhr.go();, on appelle la requête de type GET du composant.

Il ne vous reste maintenant plus qu’à tester.

Dernier petit réglage : rendons nos composants “paramétrable”

Il suffit d’ajouter l’attribut url avec la valeur buddies dans le tag de déclaration de chacun de nos composants dans notre page index.html :

<hello-john-doe url="buddies"></hello-john-doe>
<hr>
<buddies-list title="Buddies List" url="buddies"></buddies-list>

Ensuite pour chacun des composants, vous pouvez supprimer l’initialisation url="buddies" dans <polymer-ajax> et ajouter la ligne this.$.xhr.url = this.getAttribute("url"); dans la méthode ready().

Vous pouvez tester à nouveau. That’s all :)

Vous trouverez le code de l’exemple ici : https://github.com/k33g/polymer-les-mains-dans-le-cambouis/tree/master/02-ajax.

Piste de réflexion : j’ai embarqué le composant <polymer-ajax> au sein de mes composants. Il pourrait être intéressant de les “extraire” et les rendre indépendants, et les faire communiquer avec les autres composants par l’émission et la réception de signaux.

Bonne lecture.