IONIC HTTP: Comment lire les données d’une API REST dans Ionic avec HTTP ?

Bonjour à tous! Dans ce tutoriel Ionic 5 nous allons lire les données d’une API REST avec le plugin Http d’Ionic.

Nous allons utiliser l’API OMDb qui est un service Web permettant d’obtenir des informations sur les films, des contenus et des images.

Le but étant de créer rapidement une application de recherche de films, avec affichage des informations basiques du film trouvé.

Pour lire les données de cette API avec le plugin Http dans Ionic, nous allons suivre les étapes suivantes:

• Qu’est-ce qu’une API REST ?
• Comment fonctionne une API REST comme OMDb ?
• Lire les données HTTP avec Ionic
• Stocker les données de l’API et les afficher
• Créer une barre de recherche
• Utiliser le plugin natif Ionic Http

Qu’est-ce qu’une API REST ? (exemple OMDb API)

On commence ce tutoriel Ionic Http avec une introduction aux API REST, très répandus et très utiles pour nos projets.

Une API REST est un outil informatique qui via un site, va nous renvoyer des données et des informations sur un sujet précis.

YouTube et WordPress proposent par exemple des API REST que j’utilise dans mon application Driss AS pour afficher le contenu de mes articles.

Dans ce tutoriel Ionic Http, nous allons utiliser une API REST d’information sur les films, disponible gratuitement.

Il s’agit de l’API OMDb, qui met à disposition toutes les informations en rapport avec les films, comme le titre, la description, le poster ou encore les critiques du films.

Comme la majorité des API REST, OMDb API renvoie des données JSON ou XML.

Dans ce tutoriel Ionic Http, nous allons nous concentrer sur la lecture des données JSON, pour récupérer les informations d’un film.

Voilà par exemple les données JSON que l’API OMDb renvoie pour le film Les Gardiens de la galaxie:

Pas d’inquiétude si vous n’avez jamais ce genre de données, nous allons facilement récupérer ces informations.

Comment fonctionne une API REST comme OMDb ?

Commençons par voir comment fonctionne rapidement une API REST, et comment bien la manipuler pour nos projets d’applications ?

Sur leur site, il propose d’ailleurs un premier lien à tester pour afficher les données JSON d’un film, avec son identifiant.

Je vous invite donc à ouvrir le lien suivant pour tester et visualiser les données JSON renvoyé pour le film Les gardiens de la galaxy: http://www.omdbapi.com/?i=tt3896198&apikey=ffb23b0

Votre navigateur devrait vous afficher les données JSON suivantes:

{"Title":"Guardians of the Galaxy Vol. 2","Year":"2017","Rated":"PG-13","Released":"05 May 2017","Runtime":"136 min","Genre":"Action, Adventure, Comedy, Sci-Fi","Director":"James Gunn","Writer":"James Gunn, Dan Abnett (based on the Marvel comics by), Andy Lanning (based on the Marvel comics by), Steve Englehart (Star-Lord created by), Steve Gan (Star-Lord created by), Jim Starlin (Gamora and Drax created by), Stan Lee (Groot created by), Larry Lieber (Groot created by), Jack Kirby (Groot created by), Bill Mantlo (Rocket Raccoon created by), Keith Giffen (Rocket Raccoon created by), Steve Gerber (Howard the Duck created by), Val Mayerik (Howard the Duck created by)","Actors":"Chris Pratt, Zoe Saldana, Dave Bautista, Vin Diesel","Plot":"The Guardians struggle to keep together as a team while dealing with their personal family issues, notably Star-Lord's encounter with his father the ambitious celestial being Ego.","Language":"English","Country":"USA","Awards":"Nominated for 1 Oscar. Another 14 wins & 52 nominations.","Poster":"https://m.media-amazon.com/images/M/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_SX300.jpg","Ratings":[{"Source":"Internet Movie Database","Value":"7.6/10"},{"Source":"Rotten Tomatoes","Value":"85%"},{"Source":"Metacritic","Value":"67/100"}],"Metascore":"67","imdbRating":"7.6","imdbVotes":"531,435","imdbID":"tt3896198","Type":"movie","DVD":"22 Aug 2017","BoxOffice":"$389,804,217","Production":"Walt Disney Pictures","Website":"N/A","Response":"True"}

Ces données JSON contiennent toutes les informations associées au film en question, à savoir son titre, l’année de sortie en salle, etc.

Analysons rapidement la structure de cette URL qui nous renvoie les informations d’un film bien précis:

http://www.omdbapi.com/?i=tt3896198&apikey=ffb23b0

Pour chaque API REST, on commence par l’adresse du site fournisseur de l’API, ici:

http://www.omdbapi.com/

Ensuite, nous allons ajouter des paramètres à notre URL pour indiquer notamment notre clé d’API, qui nous donne accès aux données du site.

Comme le site fournit une URL d’exemple, la clé dans ce cas là est:

apikey=ffb23b0

Vous devrez d’ailleurs vous créer une clé d’API pour utiliser le service de ce site web: http://www.omdbapi.com/apikey.aspx

Enfin, on indique ici l’identifiant du film en question, qui est unique et permet de l’identifier précisément:

i=tt3896198

Dans la suite du tutoriel Ionic Http, nous utiliserons le type paramètre t, pour title qui nous permettra de chercher un film avec son titre.

Par exemple pour chercher le film Captain Marvel, on pourra cherche le film avec le paramètre:

t=marvel

Nous ferons en sorte de bien paramétrer notre recherche avec les espaces notamment, pour chercher un film comme Iron Man.

Pour finir on commence à ajouter les paramètres avec le symbole ?, et entre chaque paramètre on ajoute le symbole &.

Voilà pour le résultat final de notre URL d’API: http://www.omdbapi.com/?i=tt3896198&apikey=ffb23b0.

Comment lire les données HTTP avec Ionic ?

On continue ce tutoriel Ionic Http avec l’utilisation direct de l’API OMDb dans notre application.

Pour cela nous utiliser le module Http d’Angular pour lire les données de cette API, que nous devons importer dans le fichier suivant:

src/app/app.module.ts

Ajoutez ensuite ce module dans votre fichier, qui est par défaut installer dans votre application Ionic/Angular:

import { HttpClientModule } from  '@angular/common/http';
[..]
imports: [
  IonicModule.forRoot(),
  HttpClientModule <-- ajouter le module
],

On continue ensuite avec l’utilisation de ce plugin dans notre page d’accueil Home:

src/app/home/home.page.ts

Vous pouvez maintenant importer ce plugin dans votre page:

import { HttpClient } from '@angular/common/http';

Et le déclarer dans votre constructor() pour utiliser ses fonctions:

constructor(private http: HttpClient) {}

La fonction principale, qui va nous lire et nous renvoyer les données de nos API est la suivante:

readAPI(URL: string) {
  return this.http.get(URL);
}

On utilise en fin de compte la fonction get() du plugin Http pour lire les données de l’API, en lui transmettant l’URL de celle-ci.

Nous pouvons alors utiliser cette fonction que nous venons de déclarer, avec par exemple l’URL fournit par le site:

constructor(private http: HttpClient) {
  this.readAPI('http://www.omdbapi.com/?i=tt3896198&apikey=VOTRE_CLÉ_API')
    .subscribe((data) => {
    console.log(data);
  });
}

Vous pouvez tester le fonctionnement de cette fonction, mais vous devez autoriser les requêtes CORS dans votre navigateur.

C’est une simple formalité, il existe plusieurs plugin Chrome qui permettent de l’activer et de le désactivé en un clique.

Installez donc par exemple ce plugin sur votre navigateur Chrome pour continuer: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Une fois le plugin installé et activé, vous pouvez actualiser votre application et ouvrir la console.

De cette manière on affichera les données JSON du site Les gardiens de la galaxie, qui devraient s’afficher dans la console au format suivant:

Nous sommes donc capable de lire les données de notre API dans la console mais pas encore de les afficher dans notre HTML.

Comment stocker les données de l’API et les afficher ?

Nous souhaitons maintenant stocker et afficher les informations renvoyées par l’API, en séparant les différentes données notamment.

Nous allons commencer par créer différentes variables, pour mieux organiser notre code et structure nos étapes.

La première variable est une chaîne de caractère pour contenir l’URL de notre API, avec par la suite notre clé d’API et les paramètre de la recherche:

movieApiUrl = '';

On continue avec la deuxième variable qui est un objet, avec plusieurs champs pour contenir les informations de notre film:

movieData = {
  title: '',
  description: '',
  imageUrl: ''
};

On stockera donc ici sous forme de chaîne de caractère le nom du film, sa description ainsi que l’adresse de son affiche.

De cette manière on pourra afficher ces informations dans le HTML, avec par exemple l’écriture:

{{ movieData.title }}

Mais il nous faut en premier lieu récupérer les données de notre l’API, et cette fois-ci nous allons proposer une fonction plus complète.

this.movieApiUrl = 'http://www.omdbapi.com/?apikey=VOTRE_CLÉ_API&t=avengers';
this.readAPI(this.movieApiUrl)
  .subscribe((data) => {
  console.log(data);
  this.movieData.title = data['Title'];
  this.movieData.description = data['Plot'];
  this.movieData.imageUrl = data['Poster'];
});

On commence donc par stocker l’URL de notre API dans une variable, ici movieApiUrl en prenant soin d’y entrer notre clé d’API ainsi que le titre du film.

this.movieApiUrl = 'http://www.omdbapi.com/?apikey=VOTRE_CLÉ_API&t=avengers';

Ensuite on reprend la même syntaxe que dans la partie précédente, on utilise la fonction readAPI() pour renvoyer les données dans l’objet data:

this.readAPI(this.movieApiUrl)
  .subscribe((data) => {
  console.log(data);
});

On peut ensuite lire un champ précis des données renvoyées, en indiquant le nom du champ en question, par exemple le titre:

data['Title'];

De cette manière, je peux récupérer les trois informations dont j’ai besoin pour mon film avec chaque l’objet data renvoyé:

this.movieData.title = data['Title'];
this.movieData.description = data['Plot'];
this.movieData.imageUrl = data['Poster'];

Passons enfin à l’affichage de ces informations dans notre HTML, que l’on fera très simplement avec les balises suivantes:

<div class="img_box">
  <img [src]="movieData.imageUrl">
</div>
<h1>{{ movieData.title }}</h1>
<p>{{ movieData.description }}</p>

Et je vous propose en bonus, quelques lignes de CSS pour styliser notre page et créer un thème cinéma à notre application:

ion-content {
  --background: black;
}
.img_box {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
img {
  width: 60%;
  border-radius: 10px;
}
h1 {
  color: white;
  margin-left: 20px;
    font-weight: 800;
}
p {
  margin-left: 20px;
  margin-right: 10px;
  color: #c6c6c6;
  font-weight: 300;
}

Avec tout ce code, nous sommes capables d’afficher les données d’un film dans notre application Ionic.

Mais comment automatiser le processus de récupération, et chercher par exemple les données de différents films ?

C’est ce que nous allons voir dans la dernière partie.

Comment créer une barre de recherche ?

On termine ce tutoriel Ionic Http avec la création d’une barre de recherche pour compléter cette fonctionnalité.

Le but ici est de pouvoir chercher un film avec son titre, et d’afficher en conséquence le film en question.

On commence par créer une nouvelle variable, une chaîne de caractère pour stocker le résultat de notre recherche:

searchTitle = '';

Nous allons ensuite associer notre barre de recherche avec cette variable pour récupérer le contenu entré par l’utilisateur.

Concrètement on utilise le composant Ionic ion-searchar, pour créer notre barre de recherche et on l’associe avec la variable searchTitle:

<ion-searchbar [(ngModel)]="searchTitle"></ion-searchbar>

On utilise ici la directive ngModel pour connecter notre variable à notre champ ion-searchar.

Ainsi dès que l’utilisateur entre une valeur dans ce champ, la variable searchTitle stocke le résultat.

On créé également un bouton à côté de notre champ ion-searchbar pour exécuter une fonction et lancer notre recherche:

<ion-button color="light" (click)="searchMovie()">
  <ion-icon name="search-sharp"></ion-icon>
</ion-button>

Voilà le résultat final du nouveau header de notre page, avec le champ ion-searchbar associé à la variable searchTitle et le bouton associé à la fonction searchMovie():

<ion-header>
  <ion-toolbar color="dark"></ion-toolbar>
  <ion-toolbar color="dark">
    <ion-searchbar [(ngModel)]="searchTitle"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button color="light" (click)="searchMovie()">
        <ion-icon name="search-sharp"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Dans notre fichier TypeScript, nous sommes donc capable de récupérer le champ de ion-searchbar avec la syntaxe suivante:

this.searchTitle

Pour une recherche sur le film « Avengers« , aucun problème on peut effectuer une recherche avec l’API.

En revanche pour le film « Iron Man« , on ne peut pas entrer d’espace dans notre URL de recherche.

Il nous faut donc convertir les caractères spéciaux dans un syntaxe lisible dans une URL.

Par exemple on remplacera les espace par les caractères %20. Il existe heureusement en JavaScript une fonction qui propose de convertir automatiquement une chaîne de caractère à ce format:

encodeURIComponent(this.searchTitle).trim()

De cette manière notre recherche pour le film iron man sera converti en:

iron%20man

Pour tester le fonctionnement de cette fonction on peut par exemple l’afficher dans la console:

console.log('recherche du film ' + encodeURIComponent(this.searchTitle).trim());

Si cette étape fonctionne bien, nous pouvons enchaîner en stockant le résultat de cette recherche dans une constante locale, et ensuite en rédigeant une URL d’API sur mesure:

const search = encodeURIComponent(this.searchTitle).trim();
this.movieApiUrl = 'http://www.omdbapi.com/?apikey=VOTRE_CLÉ_API&t=' + search;

Ici pour la recherche sur le film Iron Man, l’URL finale sera:

http://www.omdbapi.com/?apikey=VOTRE_CLÉ_API&t='iron%20man.

Nous pouvons maintenant pour finir déclarer notre fonction searchMovie(), où nous effectuons cette recherche en fonction du champ actuellement présent dans la barre:

searchMovie() {
  console.log('recherche du film ' + encodeURIComponent(this.searchTitle).trim());
  const search = encodeURIComponent(this.searchTitle).trim();
  this.movieApiUrl = 'http://www.omdbapi.com/?apikey=ffb23b0&t=' + search;
  this.readAPI(this.movieApiUrl)
    .subscribe((data) => {
    console.log(data);
    this.movieData.title = data['Title'];
    this.movieData.description = data['Plot'];
    this.movieData.imageUrl = data['Poster'];
  });
}

On termine le tutoriel Ionic avec le cas spécifique du l’utilisation du plugin natif Ionic Http pour iOS et Android.

Lire les données d’une API REST avec le plugin natif Ionic Http

Pour lire ces données sur iOS et Android, nous devons également utiliser le plugin natif Ionic Http: https://ionicframework.com/docs/native/http

Il vous suffit d’installer ce plugin dans votre application avec les commandes suivantes:

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

Puis à vous rendre dans le fichier global:

src/app/app.module.ts

Pour importer et déclarer cet autre module:

import { HTTP } from '@ionic-native/http/ngx';

providers: [
    HTTP,

Vous pouvez alors revenir dans votre fichier TypeScript de la page Home:

src/app/home/home.page.ts

Pour importer et déclarer à nouveau dans votre page:

import { HTTP } from '@ionic-native/http/ngx';

constructor(private http: HTTP) {}

Le principe pour ce module est quasiment le même que la méthode précédente:

this.http.get(this.movieApiUrl, {}, {})
  .then(res => {
  console.log(res.data);
  this.post = JSON.parse(res.data);
  this.movieData.title = JSON.parse(res.data).title;
  this.movieData.description =  JSON.parse(res.data).Plot;
  this.movieData.imageUrl =  JSON.parse(res.data).Poster;
})
  .catch(error => {
  console.log(error);
});

Vous pouvez maintenant tester le fonctionnement de votre application avec la commande:

ionic cordova run browser

Voilà pour ce tutoriel Ionic Http, j’espère qu’il vous sera utile pour le développement de vos applications!