Communiquer avec un serveur

1. Protocole HTTP

Toutes ces applications reposent généralement sur le même principe : elles communiquent à l’aide du protocole HTTP avec le serveur et engagent un dialogue constitué uniquement de questions, suivies immédiatement par des réponses. Le serveur ne pousse pas d’informations vers l’application, c’est l’application qui va demander au serveur les informations dont elle a besoin pour fonctionner. Ce mode de communication est totalement inspiré de ce qui se fait sur le web depuis de nombreuses années.

Le choix du protocole HTTP pour la communication entre serveur et application n’est pas fait au hasard : le nombre de librairies disponibles côté serveur comme côté client est conséquent car hérité du web, et ce protocole permet de transporter facilement des informations au format texte, ce qui est particulièrement adapté à l’usage mobile où de grandes quantités d’informations doivent être rapatriées afin d’être affichées. De plus, il repose sur un mécanisme d’URL et d’instructions à la fois souple et simple à utiliser. Un dernier argument a définitivement scellé son adoption : si une API web a déjà été implémentée côté serveur, elle peut être réutilisée sans aucune modification dans une application mobile, mais aussi dans des objets connectés, sur des smart TV, etc. Depuis quelques années, le protocole HTTP s’est détaché comme étant un véritable standard pour toute communication entre clients (quel que soit leur type) et serveurs sur Internet.

Dans la pratique, cela revient à utiliser son navigateur...

1. Service $http

Le module cœur d’AngularJS expose un service $http qui permet à lui seul de prendre en compte tous les raffinements possibles pour communiquer avec un serveur à travers le protocole HTTP. Ce service est à injecter dans un contrôleur ou un service. En termes de design applicatif, il est fortement recommandé de traiter les appels HTTP uniquement dans les services.

var MonSvc = function($http) { 
    return  { 
        maMethode: function () { 
                   $http(...); 
        } 
};
 

Pour fonctionner, le service prend en paramètre un objet qui contient les attributs suivants (liste non exhaustive) :

1. Appels asynchrones et callback

L’exécution d’une requête HTTP est un mécanisme asynchrone, c’est-à-dire qu’il peut s’écouler plusieurs secondes entre l’émission de la requête et la réception de son retour. Il est donc nécessaire que l’application puisse continuer de traiter d’autres informations pendant ce temps. Le service $http implémente ce mode de fonctionnement et demande d’indiquer deux fonctions de callback pour gérer le succès et l’échec de la requête.

Le problème est que l’appel HTTP est effectué par un service, qui lui-même va être appelé par un contrôleur. Dans certains cas, un contrôleur peut appeler un service qui va faire appel à un autre service, qui va lui-même faire appel au service $http. À chaque étape, il sera nécessaire de fournir une fonction de callback qui sera rappelée lorsque la requête se sera correctement exécutée.

Côté contrôleur :

var MonCtrl = function(MonSvcA) { 
        MonSvcA.maMethode( 
                   function(response) { 
                              console.log(response); 
                   }, 
                   function(errorCode, errorMsg) { 
                              console.log("ERREUR : ",  
errorCode, " : ", errorMsg); 
        });  
};
 

Côté service A :

var MonSvcA = function(MonSvcB) { 
    return  { 
        maMethode: function (callbackSuccess, callbackError) { 
                ...

1. OMDb API

Le site www.omdbapi.com propose une API accessible gratuitement permettant de récupérer ce type d’informations. Cette API ne respecte pas entièrement l’architecture REST et ne permet pas d’ajouter de nouvelles informations, mais elle suffit pour illustrer les concepts vus dans cet ouvrage et agrémenter notre projet d’application mobile.

Le service expose une seule URI pour rechercher et récupérer les détails d’un film : http://www.omdbapi.com/. Les critères de recherche sont ensuite précisés en tant que paramètres directement dans l’URL. Deux types de recherches sont possibles : retrouver un film en particulier ou rechercher une liste de films.

http://www.omdbapi.com/?s=Star+Wars&type=movie&y=2015&r=json
 

{   
   "Search":[   
      {   
       "Title":"Star Wars: The Force Awakens", 
       "Year":"2015", 
       "imdbID":"tt2488496", 
       "Type":"movie", 
       "Poster":"https://images-na.ssl-images-amazon.com/images/M/
MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg" 
      }, 
   ], 
   "totalResults":"40", ...