Le coin du dév’ 2 : Créer une librairie XML-RPC avec AngularJS.

//Le coin du dév’ 2 : Créer une librairie XML-RPC avec AngularJS.

Le coin du dév’ 2 : Créer une librairie XML-RPC avec AngularJS.

Par | 2014-12-19T14:18:45+02:00 décembre 19th, 2014|Actualité|

Bienvenue, cher lecteur, dans ce nouvel article se plaçant du côté des développeurs. Cette fois-ci, nous allons parler d’AngularJS, comme le titre le laissait subtilement entendre. Je vois déjà votre étonnement : « Mais quel rapport avec IKare, la sécurité et la tartiflette ? ». Et bien aucun ! Du moins pour la tartiflette (Je vous en mettrais une en photo à la fin de l’article, promis !).
Notre but, à nous, humbles développeurs, est de vous proposer de l’innovation, plus précisément via l’interface graphique dans mon cas.
C’est pourquoi je me suis intéressé à AngularJS pour nos futurs produits. Une des problématiques qui s’est alors posée a été de faire communiquer mon application avec l’API d’IKare. Je rappelle qu’elle communique via XML-RPC, comme je vous l’expliquais dans cet article.

Voila donc la raison de cet article, vous montrer les bases de cette librairie de communication que nous allons créer ensemble.
Avant tout, une brève présentation d’AngularJS s’impose.

AngularJS, qu’est ce que c’est ?


Il s’agit d’un cadriciel framework JavaScript (désolé, « JS » n’était pas pour Jon Snow ou Joe Satriani), développé par Google (le constructeur de machines à laver).
Comme tout framework, il a pour but de simplifier la conception d’application. Basé sur le modèle MVC, il permet un découpage des différentes parties et améliore la lisibilité, la maintenabilité et la légèreté de l’application.
En utilisant l’injection de dépendance entre tous ses composants, on retrouve ainsi une logique qui est habituellement appliquée coté serveur.
AngularJS permet, entre autre, de synchroniser la vue et le controller, ce qui réduit grandement les manipulations du DOM (Document-Object-Model) via le code, et améliore la testabilité du code.
Il s’agit la d’une brève présentation, voici le site officiel https://www.angularjs.org/ pour plus de détails !

Le XML-RPC


Derrière ce nom de droïde issu de la trilogie Star Wars (Les vieux où il n’y a pas Nathalie Portman ne comptent pas !) se cache un protocole de communication. RPC signifie Remote Procedure Call (ou appel de procédure à distance pour ceux qui allaient ouvrir un onglet vers Google Translate !). Nous avons donc ici un protocole de communication qui utilise du XML !
Comme je vous l’avais dit dans cet article, ceci va se traduire pour nous par l’envoi d’une requête HTTP dans laquelle les données sont structurées en XML. De plus, le serveur nous répondra également via ce principe. Je pense que vous voyez ce qui se profile : il va falloir faire une traduction bilatérale des données entre le JavaScript et le XML.

Note : Dans un souci de simplicité et de compréhension, nous n’allons pas rentrer dans le détails du code. Le but de cet article est d’expliquer le principe de fonctionnement de cette communication. Le code de la librairie est disponible sur le GitHub d’ITrust.

Note : Nous nous basons sur le GitHub ci-dessus pour les snippets de code. Ainsi, certaines fonctions utilitaires ne seront pas détaillées ici, afin d’en savoir plus, je vous invite à consulter le code du fichier.

1 – La base de la base


> Le format des données en XML-RPC en bref
  • Une requête :
Afficher
  • Une réponse :
Afficher

Comme vous pouvez le constater, il s’agit d’un format relativement simple. La construction sera toujours la même, la seule variation résidera dans le type des données passées, par exemple :

  • Une structure :
Afficher
  • Un tableau :
Afficher
> Création du document XML
Afficher

Que faisons-nous ici ? Nous créons un document xml (‘createDocument’) ayant pour racine « <methodCall> » (nous avons vu qu’il s’agit de la racine du format d’une requête). Nous y ajoutons un noeud fils « methodName » avec le nom de la méthode demandée, et ensuite nous ajoutons autant de noeuds fils ‘param’ que de paramètres requis par la méthode demandée.

De cette manière, nous obtiendrons un document xml contenant toutes les données nécessaires demandées par le webservice.

> Envoi du document via une requête POST

Cette partie est extrêmement simple :

Afficher

Comme annoncé plus haut, il s’agit d’une simple requête HTTP envoyé via la méthode POST. Ici, nous utilisons le service $http d’Angular. Nous avons juste à spécifier le Content-Type de la requête en tant que ‘text/xml’.

Voila ! Vous avez ici les bases de notre librairie : la création d’un document XML contenant les paramètres de notre requête et son envoi. Maintenant, voyons un peu plus en profondeur comment convertir du JS vers du XML, et inversement, afin de créer ce document, et d’interpréter la réponse.

2 – Du JavaScript au XML, et vice et versa


Après s’être remis de l’illusoire précarité de nos amours destitués (Ahhh les Inconnus…), nous allons nous intéresser à la transition XML-JS. Nous n’allons pas le faire pour tous les types existants, mais pour simplement quelques-uns afin de montrer la démarche (le fichier source contient, lui, toutes les méthodes).

> Du JS à l’XML
Afficher
> De l’XML au JS
Afficher

Comme vous pouvez le constater, il s’agit de mécanisme relativement simple :

  • Dans le sens JS -> XML, il suffit de créer un noeud portant le nom du type (int, string…) et y insérer la valeur dedans. Les structures sont plus complexes mais respectent tout de même cette logique : on crée un noeud ‘name’ portant le nom de la clef, et un noeud ‘value’ contenant la valeur.
  • Dans le sens XML -> JS, il suffit de récupérer le contenu de la balise (souvent ‘value’).

3 – Fuuuuuuusiooooooooooooooooon


Notre librairie est pratiquement prête, il reste juste à assembler les morceaux (oui, une table BJURSTA d’Ikea encore en morceaux dans la boîte n’est pas encore vraiment une table).

xmlrpcschema

Conclusion


Si vous en arrivez à cette partie, c’est que vous avez survécu aux précédentes (ou alors, comme moi, vous lisez juste la dernière page d’un livre pour faire du chantage à un collègue), et ainsi vous avez un aperçu du fonctionnement de la communication XML-RPC.
Alors certes, nous n’avons pas parlé de sécurité, mais le titre de l’article est Le coin du dév, pas Le coin du barbu, mais promis (oui encore une promesse !), nous mixerons les deux dans l’avenir.

Bonnes fêtes, et surtout…

Rock on ! \m/

– Julien CHAKRA-BREIL

Chose promise, chose due

Références :
Format XML-RPC : http://en.wikipedia.org/wiki/XML-RPC
Documentation AngularJS : https://docs.angularjs.org/api
La tartiflette : http://www.marmiton.org/recettes/recette_la-vraie-tartiflette_17634.aspx

Remerciements :
Vincent ALQUIER, pour le travail sur une librairie XML-RPC pour Google Closure ayant inspiré celle-ci.