Créer des applications mobiles avec React Native

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des applications mobiles avec React Native Niveau recommandé pour le cours de Créer des applications mobiles avec React Native Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 8: Interroger une API avec React Native

Toutes les pages

Utiliser les API avec React Native pour plus de réactivité

Pourquoi les API?

Les API sont essentielles en React Native car elles permettent à une application mobile de communiquer avec des services externes comme des bases de données, des serveurs ou des outils tiers. Grâce aux API, l’application peut récupérer des données en temps réel, envoyer des informations (formulaires, images, paiements…), gérer l’authentification des utilisateurs, ou encore interagir avec des fonctionnalités avancées comme la géolocalisation ou la traduction. En gros, les API transforment une application statique en une interface dynamique et réactive.

Utiliser le stockage local sans passer par les API

Il est tout à fait possible d’utiliser des bases de données locales comme SQLite avec React Native, notamment pour stocker des données hors-ligne ou conserver des informations persistantes sur l’appareil. Cela convient bien aux applications simples ou aux fonctionnalités autonomes. Cependant, les API web offrent une plus grande flexibilité, car elles permettent de synchroniser les données entre plusieurs appareils, d’accéder à des services distants et de maintenir l’application à jour. En résumé, SQLite est utile pour le local, mais les API sont souvent préférables pour des applications connectées, évolutives et collaboratives.

A titre indicatif, si on veut utiliser le stockage local via SQLite, on peut faire appel au module react-native-sqlite-storage que l'on peut installer avec cette commande:
npm install react-native-sqlite-storage
ou via le gestionnaire yarn:
yarn add react-native-sqlite-storage
Dans ce cours, nous n'allons pas nous arrêter sur le stockage local, mais plutôt l'utilisation des API qui sont plus pratiques, performants et robustes.

Interroger une API à l'aide du module Axios

Requêtes asynchrones avec Axios

Axios est une bibliothèque largement utilisée en React Native pour effectuer des requêtes HTTP vers des API. Elle facilite la communication entre l’application mobile et les serveurs en proposant une syntaxe claire et concise pour envoyer ou recevoir des données. Considérée comme une version simplifiée et plus ergonomique de l’API native fetch, Axios gère automatiquement la conversion des réponses, les en-têtes, les erreurs et même les requêtes asynchrones. Grâce à elle, il devient facile d’intégrer des fonctionnalités dynamiques comme l’authentification, la mise à jour en temps réel ou la synchronisation avec des services web.

Pour utiliser le module axios, il faut commencer par l'installer (via le terminal) comme ceci:
npm install axios
ou via l'outil yarn
yarn add axios

Interroger une API dans une application React Native à l'aide du module Axios

J'ai prévu ce endpoint sur le serveur qui héberge ce site Web dont l'adresse est: https://www.chiny.me/api/cours.php. Cet API va tout simplement envoyer une réponse Json qui a cette forme:
{
   "titre":"Créer des applications mobiles avec React Native",
   "niveau":"Avancé",
   "duree":"30h"
}
En guise de rappel, un endpoint API est une adresse spécifique (URL) à laquelle une application peut envoyer une requête pour accéder à une ressource ou exécuter une action sur un serveur. En React Native, les endpoints sont les points de contact entre l'application mobile et une API.
L'idée consiste à afficher le titre du cours suite au clic sur un bouton présent dans l'interface de l'application. Bien entendu, ce clic va déclencher un appel de l'API via le module Axios.

Je propose ce code:
import { useState } from 'react';
import { StyleSheet, TextInput, Button, View, Text } from 'react-native';
import axios from 'axios'

export default function App() {
   const [cours,setCours]=useState(null)
   const handleButton=()=>{
      axios.get("https://www.chiny.me/api/cours.php")
      .then(res=>setCours(res.data.titre))
      .catch(err=>console.log("Erreur!"))
   }

   return (
      <View style={styles.container}>
         <Button title="Récupérer les données"
         onPress={handleButton} />
         <Text>{cours}</Text>
      </View>
   );
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
       justifyContent: 'center',
   },
});
L'exécution du code donnera un résultat qui ressemble à ceci:
Avant d'utiliser Axios, il faut d'abord l'importer comme ceci:
import axios from 'axios'
On prévoit un state (nommée cours) qui accueillera le texte qui proviendra de l'API et qui déclenchera le re-rendering afin de mettre l'interface à jour:
const [cours,setCours] = useState(null)
On prévoit également le bouton qui déclenchera l'appel de l'API (via un event handler) et une zone pour afficher le state (texte qui proviendra de l'API):
<Button title="Récupérer les données"
onPress={handleButton} />
<Text>{cours}</Text>
Enfin, on définit l'event handler qui invoquera le module Axios comme ceci:
const handleButton=()=>{
   axios.get("https://www.chiny.me/api/cours.php")
   .then(res=>setCours(res.data.titre))
   .catch(err=>console.log("Erreur!"))
}
Concernant l'instruction console.log("Erreur!") présente dans le catch de la promesse, il ne s'agit pas de la console du navigateur (vu qu'on est entrain de programmer une application mobile), mais de la console embarquée dans votre émulateur ou votre IDE. Dans le cas de VS Code, les logs seront affichés dans le terminal.
Si vous avez déjà utilisé l'API Fetch auparavant, alors l'implémentation d'Axios vous sera très facile à comprendre. Dans tous les cas, je vous invite à consulter cette section de cours où j'ai traité l'API Fetch (que vous pourrez d'ailleurs utiliser directement dans votre application React Native si vous voulez).