Comment créer un tableau de bord personnalisé avec les API de WordPress et React

Lorsque vous gérez des sites Web, tout tourne autour des données : vues, temps de réponse, utilisateurs, taux de rebond, etc. Et, si vous gérez des sites Web, vous avez probablement eu à faire face à une instance de WordPress au moins une fois.

Il existe des centaines – ou peut-être des milliers – de plugins WordPress pour récupérer et afficher des données. Mais les API de WordPress peuvent nous donner un coup de main si nous voulons construire un tableau de bord personnalisé avec certaines informations spécifiques que nous voulons obtenir.

C’est pourquoi aujourd’hui je veux partager avec vous comment construire un service qui récupère les données de notre instance WordPress et les affiche dans un tableau. Pour être plus précis, je veux connaître le nombre de plugins que j’utilise et les plugins que j’ai installés précédemment et que je n’utilise plus.

Pourquoi devrais-je savoir quels plugins WordPress j’utilise ?

J’ai toujours trouvé cette information très importante. Surtout au début de votre voyage avec WordPress, vous pourriez être tenté d’installer un plugin pour chaque fonctionnalité que vous voulez que vos sites Web aient.

Les plugins sont peut-être faciles à installer, mais ils présentent aussi des inconvénients potentiels :

  • S’ils ne sont pas mis à jour régulièrement, ils peuvent exposer votre site Web à des attaques et à des vulnérabilités
  • Ils peuvent rendre le temps de chargement de votre site Web beaucoup plus long qu’il ne le devrait
  • Certains plugins peuvent entrer en conflit avec d’autres

Je ne dis pas que vous ne devriez pas utiliser ou faire confiance aux plugins. Mais c’est une chose à laquelle vous devez faire attention. Voyons donc comment nous pouvons avoir des informations utiles sur nos plugins à portée de main.

Les outils que je vais utiliser

  • API de WordPress – Je vais travailler avec le point de terminaison « plugins ».
  • React – Je vais créer un composant pour afficher des données.
  • Axios – Je l’utiliserai pour appeler facilement les API.
  • React-Bootstrap – J’ai choisi cette bibliothèque juste pour obtenir rapidement un composant de tableau agréable et facile à utiliser.
  • Postman – C’est l’outil que j’utilise toujours pour tester les API.
  • Npm – Je vais l’utiliser pour créer une application React et installer des paquets.
Voir aussi :  3 crochets React dont votre prochain projet a besoin

API de WordPress

Comme je l’ai dit au début de cet article, je veux appeler un endpoint spécifique pour obtenir JSON avec les informations sur les plugins que j’ai installés sur mon instance. Plus précisément, je veux compter les plugins que j’utilise actuellement (« actifs ») et ceux que je n’utilise pas (« inactifs »).

La documentation sur les APIs est très détaillée et pleine d’informations et de concepts utiles. Je clique donc sur « Endpoint reference » dans la barre latérale et je fais défiler la page pour cliquer sur « Plugins ».

Concentrons-nous maintenant sur la section « Schema ». Ici, je trouve tous les champs qui existent dans un enregistrement de plugin. La liste est assez longue, mais j’ai besoin d’un seul de ces champs : « status ». La documentation indique qu’il me renvoie une chaîne avec deux valeurs possibles : « inactif » ou « actif ».

Voici donc l’API que je vais appeler pour récupérer les données nécessaires :

https:///wp-json/wp/v2/plugins

Jusqu’ici tout va bien. Il y a encore une chose que nous devons prendre en considération. Certains points de terminaison nécessitent une authentification de base pour retourner les données. Notre point final est l’un d’entre eux. À partir de la version 5.6, vous pouvez passer un nom d’utilisateur et un mot de passe d’application pour appeler ce point final.

Si vous souhaitez en savoir plus sur les mots de passe d’application et la façon de les générer, je vous recommande de consulter cet article rédigé par la communauté WordPress.

Il est temps de tester l’API

Une fois que je sais quel point de terminaison je dois appeler et que j’ai généré mon mot de passe d’application, je suis prêt à tester mon appel d’API avec Postman. Voici ce que j’obtiens :

postman

Comme vous pouvez le voir, j’obtiens un JSON contenant l’information que je recherche : la clé  » status « . Maintenant nous sommes prêts à créer notre application React !

Voir aussi :  Comment utiliser Recoil pour la gestion des états dans vos projets React

Codons l’application React

Il est maintenant temps de créer le front-end de notre application. Comme je l’ai déjà dit, je vais utiliser React pour sa flexibilité, Axios pour appeler facilement les APIs, et React-Bootstrap pour obtenir des composants prêts à l’emploi avec un beau design.

Avant de commencer à écrire du code, récapitulons ce que je veux réaliser : Je veux que mon application frontale récupère les données de mon instance WordPress concernant le statut – actif ou inactif – des plugins installés en appelant le point de terminaison  » Plugins « .

Pour ce faire, je veux que mon script effectue les actions suivantes :

  1. Créer des variables pour stocker le compte des plugins actifs et inactifs
  2. Appeler le point de terminaison par un appel d’API
  3. Itérer dans le JSON – l’appel API retourne avec la logique suivante : Si la clé de l’objet « status » est égale à « active », augmentez le compte associé d’une unité, sinon augmentez le compte associé aux plugins inactifs d’une unité. Mettez à jour les états associés – précédemment définis dans le constructeur – en conséquence
  4. Rendre le tableau en utilisant le composant « Table » de React-Bootstrap et passer les états dans le composant table où je veux que les données soient affichées avec le nombre de plugins actifs et inactifs

Assez parlé. Il est temps de coder ! 🙂

Tout d’abord, je crée mon application React comme ceci :

npx create-react-app report

Puis j’installe Axios et React-Bootstrap :

npm install axios
npm install react-bootstrap bootstrap@5.1.3

Tout est prêt. Maintenant, dans mon application React, je me déplace dans le répertoire /src et je crée un nouveau répertoire appelé « components » :

/src/composants

Puis je me déplace dans le dossier components et je crée un fichier « Report.jsx ». Voici à quoi ressemble le fichier maintenant :

import React de 'react' ;
import axios de 'axios' ;
import Table de 'react-bootstrap/Table'

class Report extends React.Component { 
  constructor(props) { 
      super(props) 
      this.state = { countActiveState : 0, countInactiveState : 0, } ;
  } 

  componentDidMount() {
  let countActive = 0 ;
  let countInactive = 0 ;
  
  axios.get("https:///wp-json/wp/v2/plugins", {
    auth : {
      username : process.env.REACT_APP_USERNAME,
      mot de passe : process.env.REACT_APP_CLIENT_SECRET
    }
  })
  .then(res => {
      const plugins = res.data ;
      for(let key in plugins) {
        if(plugins[key].status === "active") {
          countActive++ ;
          this.setState({countActiveState : countActive}) 
        }
        else{
          countInactive++ ;
          this.setState({countInactiveState : countInactive}) 
        }
    }
    })
    .catch(error => {
      alert("Quelque chose s'est mal passé. Réessayez plus tard.") ;
      console.log(erreur) ;
   })
  }

  render() { 
      return (
StatutMontant du plugin
Actif{This.state.countActiveState}
Inactif{This.state.countInactiveState}








      ) 
  } 
} 

export default Report ;

Découpons-le en petits morceaux et voyons ce qui se passe :

importe React de 'react' ;
import axios de 'axios' ;
import Table de 'react-bootstrap/Table'

J’importe Axios et le composant « Table » de la bibliothèque React-bootstrap.

constructor(props) { 
      super(props) 
      this.state = { countActiveState : 0, countInactiveState : 0, } ;
  } 

Dans le constructeur, je définis deux états : countActiveState et countInactiveState. Je leur donne la valeur 0.

componentDidMount() {
    let countActive = 0 ;
    let countInactive = 0 ;

Je déclare deux variables et leur donne la valeur 0 : countActive pour stocker le nombre de plugins actifs et countInactive pour stocker le nombre de plugins inactifs.

axios.get("https:///wp-json/wp/v2/plugins", {
      auth : {
        username : process.env.REACT_APP_USERNAME,
        mot de passe : process.env.REACT_APP_CLIENT_SECRET
      }
    })

J’utilise Axios pour effectuer un appel GET vers le point de terminaison « Plugins ». Je passe également les informations d’identification pour l’authentification de base.

.then(res => {
      const plugins = res.data ;
      for(let key in plugins) {
        if(plugins[key].status === "active") {
          countActive++ ;
          this.setState({countActiveState : countActive}) 
        }
        else{
          countInactive++ ;
          this.setState({countInactiveState : countInactive}) 
        }
    }
    })
    .catch(error => {
      alert("Quelque chose s'est mal passé. Réessayez plus tard.") ;
      console.log(erreur) ;
   })
  }

Ensuite, après avoir stocké les données de la réponse dans une variable appelée « plugins », j’itère à travers le JSON et je dis : « pour chaque objet JSON, vérifier si la clé « status » est égale à « active ». Si c’est le cas, augmenter la variable countActive de 1 et définir le countActiveState égal à countActive, sinon augmenter la variable countInactive de 1 et définir le countInactiveState égal à countInactive ».

render() { 
      return (
StatutMontant du plugin
Actif{this.state.countActiveState}
Inactif{this.state.countInactiveState} (en anglais)


      ) 
  } 
} 

export default Report ;

Ensuite, j’effectue le rendu du composant Table et je passe les variables countActiveState et countInactiveState là où je veux que les données soient affichées.

Voir aussi :  Comment gérer l'état dans vos applications React

Enfin, je vais dans le fichier App.js et j’ajoute le composant Report :

importez './App.css' ;
importez Report de './components/Report' ;

function App() {

  return (

Tableau de bord des statistiques de WordPress



  ) ;
}

export default App ;

Je lance l’application :

npm start

Et la magie opère ! 🙂

frontend

Et voilà, vous l’avez !

Ceci n’est qu’un exemple rapide de la façon dont vous pouvez facilement construire votre tableau de bord personnalisé pour récupérer et visualiser les données de votre instance WordPress.

Vous pouvez utiliser n’importe quel type de représentation graphique des données, comme un diagramme à barres ou à secteurs. C’est vous qui décidez !

N’oubliez pas de jeter un coup d’œil à mon dépôt sur GitHub. N’hésitez pas à partager cet article et vos commentaires 🙂