Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Ionic
  3. Communiquer avec un serveur
Extrait - Ionic Développez des applications mobiles multiplateformes avec Cordova et AngularJS
Extraits du livre
Ionic Développez des applications mobiles multiplateformes avec Cordova et AngularJS Revenir à la page d'achat du livre

Communiquer avec un serveur

Présentation de l’architecture REST

Une application mobile moderne est rarement autonome, mais plus souvent connectée à un serveur de manière à pouvoir récupérer ou envoyer des données. C’est le cas des réseaux sociaux, des applications bureautiques, des lecteurs d’actualités, etc.

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...

Création d’un service de communication HTTP

Ionic ne propose aucun élément pour faciliter la communication avec un serveur web. C’est AngularJS qui intègre tous les outils pour interagir avec un serveur facilement et rapidement, sans avoir à embarquer de librairie complexe ou à traiter avec la librairie bas niveau HttpRequest.

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) :

Attribut

Comportement

Type de valeur

method

Méthode HTTP utilisée pour la requête : GET, POST, PUT, DELETE, etc.

Chaîne de caractères

url

URL complète (adresse du serveur et URI de la ressource)

Chaîne de caractères

params

Liste des paramètres à ajouter à l’URL

Map de chaîne de caractères.

Exemple :

params["param"] = "valeur"

data

Charge utile de la requête. Par exemple pour envoyer les détails d’une nouvelle ressource à...

Promesses et appels asynchrones

Avant d’aller plus loin dans la communication entre une application mobile et un serveur, il est nécessaire de présenter et de s’attarder sur le concept d’appels asynchrones.

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) { 
                ...

Échanges avec l’API OMDb

Il est maintenant temps de mettre en œuvre tous les mécanismes vus dans ce chapitre (requêtes HTTP, appels asynchrones et promesses) pour se connecter à une véritable API, à même de nous permettre de rechercher des films et de récupérer les détails d’un film en particulier.

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.

a. Recherche d’une liste de films

Pour rechercher une liste de films, les paramètres suivants sont disponibles :

Paramètre

Description

Type/Valeur

s

Titre du film

Chaîne de caractères

Paramètre requis

type

Type du film

movie

series

episode

y

Année de sortie

Année sur 4 chiffres

r

Type du format de retour

json (par défaut)

xml

page

Numéro de la page à retourner

Nombre entre 1 et 100

1 par défaut

Exemple de recherche pour le film Star Wars, de l’année 2015, en json :


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

Retourne la réponse suivante :


{   
   "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", ...

Utilisation du scroll infini

Pour favoriser les performances et éviter de trop solliciter le réseau (côté client comme côté serveur), il est recommandé de récupérer les données au fur et à mesure de la navigation. C’est particulièrement vrai dans le cas des listes de données où l’utilisateur se contente généralement de consulter les premières entrées alors qu’il existe plusieurs centaines, voire milliers, de résultats.

Pour les utilisateurs qui souhaitent aller plus loin dans les résultats, un héritage du web consiste à utiliser un système de pagination. Les résultats de la première page sont affichés, puis en bas de l’écran, une fois toutes les entrées parcourues, plusieurs boutons sont affichés pour passer aux pages suivantes. C’est le comportement typique des moteurs de recherche ou des sites d’annonces. 

Avec l’apparition des smartphones et des premières applications natives est apparu un autre type de navigation à l’ergonomie beaucoup plus naturelle et adaptée à la consultation de données volumineuses sur mobile. Ce mécanisme, nommé Infinite Scroll ou défilement infini, consiste à charger les données suivantes, une fois le bas de la page atteint, sans demander à l’utilisateur de cliquer sur un bouton suivant ou sur un numéro de page.

Bien que très pratique pour l’utilisateur, la mise en œuvre de ce mécanisme nécessite de mettre en place des fonctions complexes : vérifier si l’utilisateur arrive en bas de page, émettre une nouvelle requête pour la page suivante, rafraîchir la liste, etc. Ionic propose...