Les extensions jouent un rôle essentiel dans la personnalisation et l’amélioration de vos sites WordPress. Elles sont utilisées pour ajouter des fonctionnalités telles que les formulaires de contact, le commerce électronique et les statistiques à vos sites sans qu’aucun codage ne soit nécessaire.

Tout comme WordPress, qui reçoit des mises à jour régulières, les extensions reçoivent également des mises à jour régulières pour ajouter de nouvelles fonctionnalités, corriger une faille de sécurité, améliorer la compatibilité, et bien plus encore. C’est pourquoi Kinsta a inclus la gestion des extensions et des thèmes parmi les outils disponibles dans MyKinsta pour chacun de vos sites.

Cependant, la mise à jour des extensions sur de nombreux sites peut encore être décourageante pour les clients occupés comme les agences. Cet article présente une solution qui utilise l’API de Kinsta pour gérer simultanément les extensions sur plusieurs sites.

Ce que vous construisez

Ce guide se concentre sur la construction d’une solution avancée utilisant l’API Kinsta, qui offre maintenant des points de terminaison pour récupérer et mettre à jour les extensions.

Nous y créons une application React personnalisée qui récupère toutes les extensions de votre compte Kinsta. Cet outil vous permet d’identifier et de mettre à jour une extension spécifique sur plusieurs sites, ce qui simplifie considérablement le processus.

Outil construit avec React et l'API Kinsta pour mettre à jour les extensions WordPress sur plusieurs sites.
Outil construit avec React et l’API Kinsta pour mettre à jour les extensions WordPress sur plusieurs sites.

Conditions préalables à l’application

Pour suivre ce projet, vous devez disposer des éléments suivants :

Comprendre l’API Kinsta

L’API Kinsta est un outil puissant qui vous permet d’interagir de manière programmatique avec les services Kinsta tels que les sites WordPress hébergés. Elle peut vous aider à automatiser diverses tâches liées à la gestion de WordPress, y compris la création de sites, la récupération d’informations sur les sites, l’obtention de l’état d’un site, la consultation et la restauration de sauvegardes, et bien plus encore.

Pour utiliser l’API de Kinsta, vous devez avoir un compte avec au moins un site, une application ou une base de données WordPress dans MyKinsta. Vous devez également générer une clé API pour vous authentifier et accéder à votre compte.

Pour générer une clé API :

  1. Allez sur votre tableau de bord MyKinsta.
  2. Naviguez jusqu’à la page des clés API (Votre nom > Réglages de l’entreprise > Clés API).
  3. Cliquez sur Créer une clé API.
  4. Choisissez une date d’expiration ou définissez une date de début personnalisée et un nombre d’heures pour l’expiration de la clé.
  5. Donnez un nom unique à la clé.
  6. Cliquez sur Générer.

Après avoir créé une clé API, copiez-la et conservez-la en lieu sûr (il est recommandé d’utiliser un gestionnaire de mots de passe). Vous pouvez générer plusieurs clés API, qui seront répertoriées sur la page Clés API. Si vous devez révoquer une clé API, cliquez sur le bouton Révoquer.

Configurer votre environnement de développement React

React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Elle permet aux développeurs de créer des composants déclaratifs représentant différentes parties de l’interface utilisateur. Ces composants sont définis à l’aide de la syntaxe JSX, une combinaison de JavaScript et de HTML.

Pour commencer, suivez les étapes suivantes :

  1. Naviguez dans le dossier dans lequel vous souhaitez créer votre projet et utilisez create-react-app pour créer un projet React : 
    npx create-react-app <project-name>

    Remplacez <project-name> par le nom de votre choix pour votre projet.

  2. Une fois l’opération réussie, naviguez dans le dossier du projet et démarrez le serveur de développement : 
    cd <project-name>
npm run start

    Votre application React s’ouvre dans votre navigateur web par défaut sur http://localhost:3000.

La création d’un projet React à l’aide de create-react-app met en place une structure de dossiers. Le dossier crucial est src, où le développement a lieu. Les fichiers clés de ce dossier sont les suivants :

  • App.js : il s’agit du composant principal, qui rend tous les autres dans votre application React. C’est là que tout votre code pour cet outil sera ajouté.
  • index.js : C’est le point d’entrée, chargé en premier, et responsable du rendu d’App.js.
  • index.css : Ce fichier définit le style général et la mise en page de votre application. Tous les styles seront ajoutés ici.

Créer et styliser l’interface utilisateur

Concentrons-nous sur la construction et le style de l’interface d’une application de base hébergée dans le fichier App.js sans impliquer de routage. Notre interface utilisateur principale est un formulaire avec un champ select pour lister les extensions uniques sur vos sites Kinsta ainsi qu’un bouton submit pour récupérer les sites avec l’extension sélectionné.

Interface utilisateur pour l'outil de gestion des plugins permettant d'accéder à une liste d'extensions et de charger des sites.
Interface utilisateur pour l’outil de gestion des plugins permettant d’accéder à une liste d’extensions et de charger des sites.

En outre, une section d’affichage montre les détails du site comme le nom, l’état du plugin et la version. Elle comprend un bouton pour mettre à jour chaque site si nécessaire et un bouton général pour mettre à jour en masse tous les sites nécessitant la mise à jour de l’extension.

Dans votre fichier App.js, ajoutez le code suivant :

import KinstaLogo from './images/kinsta_logo.png';

const App = () => {
    return (
        <div className="container">
            <div className="title-section">
                <img src={KinstaLogo} className="logo" alt="" />
                <h2>Manage your site's plugins</h2>
                <p>
                    Easily update plugins across all sites hosted with Kinsta using the
                    Kinsta API.
                </p>
            </div>
            <div> className="info-section">
                <p>
                    This application allows you to retrieve a list of all sites within
                    your company that uses a specific plugin. You can then choose to update
                    the plugin across all these sites simultaneously or individually.
                </p>
            </div>
            <div className="form-section">
                <form>
                    <div className="form-control">
                        <label> htmlFor="plugin-name">Plugin name</label>
                        <select name="plugin-name" id="plugin-name">
                            <option> value="">Select a plugin</option>
                        </select>
                    </div>
                    <button> className="btn">Fetch sites with this plugin</button>
                </form>
            </div>
            <div className="display_container">
                <div className="site-list">
                    <div className="list-title">
                        <h3>Sites with WooCommerce plugin</h3>

                        <button> className="sm-btn">Update all sites to v.3.6</button>
                    </div>
                    <ul>
                        <li>
                            <div className="info">
                                <p>
                                    <b>Site Name:</b> WooCommerce
                                </p>
                                <p>
                                    <b>Plugin Status:</b> active
                                </p>
                                <p>
                                    <b>Plugin Version:</b> 3.5.1
                                </p>
                            </div>
                            <button> className="sm-btn">Update to v.5.6</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

export default App;

Pour styliser ce projet, visitez le fichier CSS dans notre dépôt GitHub complet et copiez son code dans votre fichier index.css.

Interagir avec l’API Kinsta

L’API de Kinsta offre une gamme de points de terminaison essentiels pour accéder à divers réglages nécessaires pour interagir avec l’extension d’un site. Par exemple, si vous souhaitez récupérer ou mettre à jour une extension, vous devez d’abord obtenir l’identifiant d’environnement du site.

L’obtention de cet identifiant d’environnement est un processus séquentiel. Dans un premier temps, vous devez déterminer l’ID du site. Pour obtenir l’ID du site, vous devez disposer de l’ID de votre entreprise Kinsta. Cet identifiant est disponible dans votre tableau de bord MyKinsta (Réglages de l’entreprise > Détails de facturation), et il s’agit d’une information sensible que vous ne voudrez pas partager avec qui que ce soit, comme votre clé API.

Vous pouvez les stocker de manière sécurisée en tant que variables d’environnement dans votre application React en créant un fichier .env dans le dossier racine de votre projet. Dans ce fichier, ajoutez ce qui suit avec la valeur correcte :

REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' 
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'

Pour accéder à ces variables d’environnement dans votre projet, vous pouvez utiliser la syntaxe process.env.THE_VARIABLE. Par exemple, pour accéder à la variable REACT_APP_KINSTA_COMPANY_ID, vous devez utiliser process.env.REACT_APP_KINSTA_COMPANY_ID.

En ajoutant le fichier .env à votre fichier .gitignore afin d’éviter qu’il ne soit transmis à GitHub. Cela permet de s’assurer que vos informations sensibles restent privées et sécurisées.

Récupérer tous les sites et plugins à l’aide de l’API Kinsta

Pour récupérer les données des extensions de tous les sites gérés par votre compte d’entreprise Kinsta, vous pouvez utiliser l’API Kinsta en exécutant trois requêtes API. Voici une explication simplifiée :

Commencez par enregistrer l’URL de l’API Kinsta dans une variable pour pouvoir vous y référer facilement.

const KinstaAPIUrl = 'https://api.kinsta.com/v2';
  1. Récupérer la liste des sites de l’entreprise : Vous devez obtenir une liste de tous les sites WordPress associés à votre entreprise. Pour ce faire, construisez une requête en utilisant l’identifiant de l’entreprise, faites une demande GET avec l’autorisation appropriée, traitez la réponse au format JSON et extrayez les détails du site à partir de la réponse. 
    const query = new URLSearchParams({
    company: process.env.REACT_APP_KINSTA_COMPANY_ID,
}).toString();
const response = await fetch(`${KinstaAPIUrl}/sites?${query}`, {
    method: 'GET',
    headers: { Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}` },
});

const data = await response.json();
const companySites = data.company.sites;
  2. Récupérer l’identifiant de l’environnement du site : L’étape précédente renvoie un tableau de sites WordPress. Pour chaque site, faites une boucle et faites une autre requête GET pour récupérer les environnements associés. 
    const sitesEnvironmentData = companySites.map(async (site) => {
    const siteId = site.id;
    const resp = await fetch(`${KinstaAPIUrl}/sites/${siteId}/environments`, {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
        },
    });
    const data = await resp.json();
    const environments = data.site.environments;
    return {
        id: siteId,
        name: site.display_name,
        environments: environments,
    };
});
  3. Récupérer la liste des plugins des sites WordPress : Après avoir obtenu l’ID du site, le nom et l’environnement, vous pouvez maintenant utiliser l’ID de l’environnement pour récupérer une liste de toutes les extensions sur chaque site. Vous devez d’abord résoudre les promesses de l’étape précédente, puis effectuer les requêtes GET pour les extensions : 
    // Wait for all the promises to resolve
const sitesData = await Promise.all(sitesEnvironmentData);

// Get all plugins for each environment
const sitesWithPlugin = sitesData.map(async (site) => {
    const environmentId = site.environments[0].id;
    const resp = await fetch(
        `${KinstaAPIUrl}/sites/environments/${environmentId}/plugins`,
        {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
            },
        }
    );
    const data = await resp.json();
    const plugins = data.environment.container_info;
    return {
        env_id: environmentId,
        name: site.name,
        plugins: plugins,
    };
});

const sitesWithPluginData = await Promise.all(sitesWithPlugin);
return sitesWithPluginData;
  4. Consolidation du processus : Pour rationaliser le processus, vous pouvez encapsuler ces demandes d’API dans une seule fonction asynchrone getSitesWithPluginData, qui peut être réutilisée. Cette fonction exécutera les étapes décrites ci-dessus et renverra un tableau contenant les informations essentielles sur chaque site, notamment l’identifiant de l’environnement, le nom du site et un tableau d’extensions. 
    const getSitesWithPluginData = async () => {
    const query = new URLSearchParams({
        company: process.env.REACT_APP_KINSTA_COMPANY_ID,
    }).toString();
    const resp = await fetch(`${KinstaAPIUrl}/sites?${query}`, {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
        },
    });

    const data = await resp.json();
    const companySites = data.company.sites;

    // Get all environments for each site
    const sitesEnvironmentData = companySites.map(async (site) => {
        const siteId = site.id;
        const resp = await fetch(`${KinstaAPIUrl}/sites/${siteId}/environments`, {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
            },
        });
        const data = await resp.json();
        const environments = data.site.environments;
        return {
            id: siteId,
            name: site.display_name,
            environments: environments,
        };
    });

    // Wait for all the promises to resolve
    const sitesData = await Promise.all(sitesEnvironmentData);

    // Get all plugins for each environment
    const sitesWithPlugin = sitesData.map(async (site) => {
        const environmentId = site.environments[0].id;
        const resp = await fetch(
            `${KinstaAPIUrl}/sites/environments/${environmentId}/plugins`,
            {
                method: 'GET',
                headers: {
                    Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
                },
            }
        );
        const data = await resp.json();
        const plugins = data.environment.container_info;
        return {
            env_id: environmentId,
            name: site.name,
            plugins: plugins,
        };
    });

    // Wait for all the promises to resolve
    const sitesWithPluginData = await Promise.all(sitesWithPlugin);
    return sitesWithPluginData;
};

Récupérer les plugins uniques de tous les sites

Dans votre application, vous souhaitez afficher la liste des extensions de tous les sites dans un menu déroulant select. Pour cela, la fonction getSitesWithPluginData récupère l’ID d’environnement, le nom et les extensions de chaque site. Ces données constituent la base de l’extraction d’une liste d’extensions.

Définissez une nouvelle fonction, fetchAllSitesPlugins, qui appelle getSitesWithPluginData et traite sa sortie pour obtenir une liste de toutes les extensions :

const fetchAllSitesPlugins = async () => {
    const sitesWithPluginData = await getSitesWithPluginData();

    // get all plugins
    const allPlugins = sitesWithPluginData.map((site) => {
        const { plugins } = site;
        return plugins.wp_plugins.data;
    });

   // …
};

Ce code itère sur les données de chaque site et compile une liste d’extensions. Pour s’assurer que chaque extension n’est listée qu’une seule fois, utilisez l’objet JavaScript Set, qui stocke des valeurs uniques :

// get unique plugins
    const uniquePlugins = [
        ...new Set(allPlugins.flat().map((plugin) => plugin.name)),
    ];

La méthode .flat() aplatit la structure du tableau et .map() effectue une boucle pour extraire uniquement les noms des extensions. L’objet Set filtre les doublons.

Pour charger et afficher ces données dans votre application React, utilisez les crochets useState() et useEffect():

import { useState, useEffect } from 'react';

const App = () => {
    const [pluginName, setPluginName] = useState('');
    const [plugins, setPlugins] = useState([]);

    //Get sites with plugin data
    const getSitesWithPluginData = async () => {
        // perform requests
    };

    useEffect(() => {
        const fetchAllSitesPlugins = async () => {
            const sitesWithPluginData = await getSitesWithPluginData();
            // get all plugins
            const allPlugins = sitesWithPluginData.map((site) => {
                const { plugins } = site;
                return plugins.wp_plugins.data;
            });
            // get unique plugins
            const uniquePlugins = [
                ...new Set(allPlugins.flat().map((plugin) => plugin.name)),
            ];
            setPlugins(uniquePlugins);
        };

        fetchAllSitesPlugins();
    }, []);

     // JSX render code follows
    //...
};

Le crochet useEffect() s’assure que les données sont récupérées et définies lors du montage du composant. Le hook useState() maintient la liste des extensions uniques.

Enfin, affichez ces extensions dans un champ select. Si les extensions sont encore en cours de chargement, affichez un message de remplacement :

<select>
    name="plugin-name"
    id="plugin-name"
    value={pluginName}
    onChange={(e) => setPluginName(e.target.value)}
>
    {plugins.length > 0 ? (
        <>
            <option value="">Select a plugin</option>
            {plugins.map((plugin) => (
                <option key={plugin} value={plugin.toLowerCase()}>
                    {plugin}
                </option>
            ))}
        </>
    ) : (
        <option> value="">Loading plugins...</option>
    )}
</select>

Dans ce code :

  • L’élément select est lié à une variable d’état pluginName pour stocker la valeur sélectionnée.
  • Le gestionnaire onChange met à jour cet état chaque fois qu’une nouvelle extension est sélectionnée.
  • La fonction plugins.map() crée dynamiquement des éléments d’option pour chaque extension.

En suivant ces étapes, votre application affichera effectivement une liste unique d’extensions récupérés sur tous les sites, offrant ainsi une interface de sélection propre et conviviale.

Sélectionnez le champ affichant la liste des extensions uniques de tous les sites dans le compte de l'entreprise Kinsta.
Sélectionnez le champ affichant la liste des extensions uniques de tous les sites dans le compte de l’entreprise Kinsta.

Récupérer des sites avec un plugin spécifique

Jusqu’à présent, vous avez été en mesure de récupérer des extensions à partir de votre compte d’entreprise Kinsta, mais vous souhaitez parcourir en boucle tous les sites pour récupérer des sites avec une extension particulière, les stocker dans un état, puis les afficher.

Pour cela, créez deux états : un pour stocker les sites (sites) et un autre pour indiquer l’état de chargement (isLoading).

const [sites, setSites] = useState([]);
const [isLoading, setIsLoading] = useState(false);

Ensuite, créez une fonction fetchSites pour filtrer chaque site et vérifier s’il contient l’extension sélectionnée. Si c’est le cas, les détails pertinents du site sont stockés

Cette fonction commence par attribuer la valeur true à isLoading et par vider le tableau sites. Elle appelle ensuite getSitesWithPluginData pour récupérer toutes les données du site.

const fetchSites = async () => {
    setIsLoading(true);
    setSites([]);
    const sitesWithPluginData = await getSitesWithPluginData();

    // Filter out sites that don't have the plugin
    const sitesWithPluginDataFiltered = sitesWithPluginData
        .filter((site) => {
            const sitePlugins = site.plugins.wp_plugins.data;
            return sitePlugins.some((plugin) => {
                return plugin.name === pluginName;
            });
        })
        .map((site) => {
            const { env_id, name } = site;
            const { version, status, update, update_version } =
                site.plugins.wp_plugins.data.find(
                    (plugin) => plugin.name === pluginName
                );
            return {
                env_id,
                name,
                version,
                status,
                updateAvailable: update,
                updateVersion: update_version,
            };
        });
    setSites(sitesWithPluginDataFiltered);
    setIsLoading(false);
};

Dans la fonction sitesWithPluginDataFiltered:

  • La méthode .filter() isole les sites qui contiennent l’extension sélectionnée.
  • La méthode .map() extrait ensuite les détails nécessaires de chaque site.
  • Enfin, les crochets setSites et setIsLoading mettent à jour l’état avec les nouvelles données et l’état de chargement.

Créez ensuite une fonction handleSubmit et ajoutez-la au bouton « Fetch sites with this plugin » du formulaire afin d’invoquer la fonction lorsqu’un utilisateur sélectionne une extension et envoie le formulaire. Cette fonction empêche l’action par défaut du formulaire et appelle fetchSites:

const handleSubmit = (e) => {
    e.preventDefault();
    fetchSites();
};

Ainsi, lorsqu’un utilisateur sélectionne une extension particulière et clique sur le bouton d’envoi, il récupère tous les sites avec cette extension et les stocke dans l’état sites.

Afficher les sites avec le plugin sélectionné

Après avoir stocké les sites pertinents dans votre état sites, l’étape suivante consiste à afficher ces données dans l’interface utilisateur de votre projet. L’objectif est de présenter chaque site sous forme de liste avec des détails clés et un bouton conditionnel pour les mises à jour de l’extension.

<ul>
    {sites.map((site) => (
        <li key={site.env_id}>
            <div className="info">
                <p>
                    <b>Site Name:</b> {site.name}
                </p>
                <p>
                    <b>Plugin Status:</b> {site.status}
                </p>
                <p>
                    <b>Plugin Version:</b> {site.version}
                </p>
            </div>
            <button>
                className={`sm-btn ${
                    site.updateAvailable !== 'available' ? 'disabled-btn' : ''
                }`}
                disabled={site.updateAvailable !== 'available'}
            >
                {site.updateAvailable === 'available'
                    ? `Update to v.${site.updateVersion}`
                    : 'Up to date'}
            </button>
        </li>
    ))}
</ul>

Dans le code ci-dessus, le tableau sites est itéré à l’aide de la méthode .map(), ce qui crée une liste (<ul>) de sites ( éléments<li> ). Chaque élément de la liste contient des détails sur le site et un bouton pour les mises à jour de l’extension.

Le bouton de l’interface utilisateur change de style et de fonction en fonction de l’état de mise à jour de l’extension : il est actif pour les mises à jour disponibles, sinon il est désactivé et libellé « Up to date », contrôlé par un CSS conditionnel et l’attribut « disabled ».

En outre, pour améliorer l’expérience de l’utilisateur, ajoutons un texte de chargement conditionnellement en utilisant l’état isLoading lorsque les sites sont en cours de récupération.

{isLoading && (
    <div className="loading">
        <p>Loading...</p>
    </div>
)}
Une liste des sites qui utilisent une extension particulière du compte de la société Kinsta avec des boutons pour les mettre à jour individuellement ou en une seule fois.
Une liste des sites qui utilisent une extension particulière du compte de la société Kinsta avec des boutons pour les mettre à jour individuellement ou en une seule fois.

Mettre à jour les plugins avec l’API Kinsta

Jusqu’à présent, nous avons été en mesure de récupérer des sites avec des détails importants et d’accéder à leurs extensions. L’objectif de cet outil est de faciliter la mise à jour des extensions sur plusieurs sites à l’aide de l’API de Kinsta. Le processus comprend le déclenchement des mises à jour et le suivi de leur progression.

Déclenchement des mises à jour des plugins

Un bouton est fourni pour chaque site répertorié. Il est stylisé pour indiquer si une mise à jour est disponible. Si une mise à jour est disponible, cliquez sur le bouton pour déclencher la fonction updatePlugin.

<button>
    className={`sm-btn ${
        site.updateAvailable !== 'available' ? 'disabled-btn' : ''
    }`}
    disabled={site.updateAvailable !== 'available'}
    onClick={() =>
        updatePlugin(site.env_id, site.updateVersion)
    }
>
    {site.updateAvailable === 'available'
        ? `Update to v.${site.updateVersion}`
        : 'Up to date'}
</button>

Le gestionnaire onClick appelle updatePlugin avec l’ID d’environnement du site et la dernière version de l’extension (updateVersion). Cette fonction envoie une requête PUT à l’API Kinsta pour mettre à jour l’extension.

const updatePlugin = async (envId, pluginVersion) => {
    const resp = await fetch(`${KinstaAPIUrl}/sites/environments/${envId}/plugins`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
        },
        body: JSON.stringify({
            name: pluginName,
            update_version: pluginVersion,
        }),
    });

    const data = await resp.json();
    // Further processing
};

Suivre la progression de la mise à jour

Après avoir lancé la mise à jour, vous devez suivre sa progression. L’API Kinsta fournit une réponse de ce type lors du lancement d’une mise à jour :

{
  "operation_id": "wp-plugin:update-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
  "message": "Updating WordPress plugin in progress",
  "status": 202
}

Le site operation_id suit l’état de la mise à jour via le point de terminaison des opérations. Créez une fonction pour effectuer cette requête API, en attendant le operation_id comme argument :

// Check plugin update status
const checkPluginUpdateStatus = async (operationId) => {
    const resp = await fetch(`${KinstaAPIUrl}/operations/${operationId}`, {
        method: 'GET',
        headers: {
            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
        },
    });
    const data = await resp.json();
    return data.status;
};

À l’intérieur de updatePlugin, utilisez une instruction if pour vérifier si la demande de mise à jour initiale status est 202. Si c’est le cas, elle établit un intervalle pour appeler checkPluginUpdateStatus toutes les cinq secondes (5000 millisecondes).

L’intervalle vérifie à plusieurs reprises l’état de la mise à jour et, en cas de succès, il efface l’intervalle et appelle fetchSites pour actualiser la liste des sites. Si une erreur survient au cours de ces vérifications, elle est consignée dans la console.

if (data.status === 202) {
    const interval = setInterval(() => {
        checkPluginUpdateStatus(data.operation_id)
            .then((status) => {
                console.log(status);
                if (status === 200) {
                    clearInterval(interval);
                    fetchSites();
                }
            })
            .catch((error) => {
                // Handle any errors that occur during the promise resolution
                console.error('Error:', error);
            });
    }, 5000);
}

Commentaires de l’utilisateur pendant le fonctionnement

Tout fonctionne bien à ce stade, mais il est bon d’informer l’utilisateur de la progression de l’opération au lieu de le laisser deviner. Vous pouvez le faire en affichant une notification qui apparaît lorsque l’opération est en cours et qui disparaît lorsque l’opération est terminée. Créez un état showStatusBar pour contrôler cela :

const [showStatusBar, setShowStatusBar] = useState(false);

Lorsque showStatusBar est true, une barre d’état apparaît en haut de l’écran, indiquant qu’une mise à jour est en cours. Cette barre est conçue pour être fixée en haut de l’écran.

{showStatusBar && (
    <div className="status-bar">
        <p>Updating WordPress plugin in progress...</p>
    </div>
)}

Vous pouvez maintenant ajuster l’instruction if dans la fonction updatePlugin pour que showStatusBar devienne true ou false en fonction de l’état de la mise à jour :

if (data.status === 202) {
    setShowStatusBar(true);
    const interval = setInterval(() => {
        checkPluginUpdateStatus(data.operation_id)
            .then((status) => {
                console.log(status);
                if (status === 200) {
                    setShowStatusBar(false);
                    clearInterval(interval);
                    fetchSites();
                }
            })
            .catch((error) => {
                // Handle any errors that occur during the promise resolution
                console.error('Error:', error);
            });
    }, 5000);
}

Cette approche permet aux utilisateurs d’être informés de l’état des mises à jour des plugins, ce qui améliore la convivialité globale de l’outil.

Mettre à jour les plugins sur plusieurs sites avec l’API Kinsta

La principale caractéristique de cet outil est la possibilité de mettre à jour une extension particulière en un seul clic sur plusieurs sites de votre compte Kinsta. Cette fonctionnalité est similaire à celle mise en œuvre pour la mise à jour des extensions sur un seul site.

Le processus consiste à parcourir en boucle l’état sites, qui contient les sites sur lesquels l’extension en question doit être mise à jour. Pour chaque site nécessitant une mise à jour, une requête API est effectuée pour mettre à jour l’extension et suivre ensuite l’état de l’opération :

// Update all plugins
const updateAllPlugins = async () => {
    sites.map(async (site) => {
        if (site.updateAvailable === 'available') {
            const environmentId = site.env_id;
            const resp = await fetch(
                `${KinstaAPIUrl}/sites/environments/${environmentId}/plugins`,
                {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
                    },
                    body: JSON.stringify({
                        name: pluginName,
                        update_version: site.updateVersion,
                    }),
                }
            );
            const data = await resp.json();
            if (data.status === 202) {
                setShowStatusBar(true);
                const interval = setInterval(() => {
                    checkPluginUpdateStatus(data.operation_id)
                        .then((status) => {
                            console.log(status);
                            if (status === 200) {
                                setShowStatusBar(false);
                                clearInterval(interval);
                                fetchSites();
                            }
                        })
                        .catch((error) => {
                            // Handle any errors that occur during the promise resolution
                            console.error('Error:', error);
                        });
                }, 5000);
            }
        }
    });
};

Cette fonction est reliée à un bouton Update All. Pour améliorer l’expérience de l’utilisateur, le bouton affiche le numéro de la version vers laquelle les extensions sont mises à jour :

<button> className="sm-btn" onClick={updateAllPlugins}>
    Update all sites to v.
    {
        sites.find((site) => site.updateVersion !== null)
            ?.updateVersion
    }
</button>

En outre, nous rendons ce bouton conditionnel afin qu’il n’apparaisse que lorsque plus d’un site nécessite une mise à jour de l’extension. Si tous les sites sont à jour, un message s’affiche à la place :

<div className="list-title">
    <h3>Sites with {pluginName} plugin</h3>
    {sites.filter((site) => site.updateAvailable === 'available')
        .length > 1 && (
        <button className="sm-btn" onClick={updateAllPlugins}>
            Update all sites to v.
            {
                sites.find((site) => site.updateVersion !== null)
                    ?.updateVersion
            }
        </button>
    )}
    {sites.every((site) => site.updateAvailable !== 'available') && (
        <p>All sites are up to date</p>
    )}
</div>

Grâce à ces implémentations, vous pouvez désormais mettre à jour sans effort les extensions sur plusieurs sites de votre compte Kinsta, ce qui améliore l’efficacité et garantit que tous vos sites sont à jour avec les dernières versions des extensions.

Déployez gratuitement votre site statique React sur Kinsta

Nous utilisons l’hébergement de sites statiques de Kinsta pour démontrer l’application. En pratique, vous pourriez exécuter cette application React depuis votre propre réseau ou ne la déployer qu’après avoir ajouté un moyen d’authentification à cet outil pour des raisons de sécurité.

Vous pouvez héberger gratuitement vos applications React créées avec create-react-app en tant que site statique en utilisant notre hébergement de site statique en poussant votre code vers un fournisseur Git préféré(Bitbucket, GitHub ou GitLab).

Une fois que votre dépôt est prêt, suivez ces étapes pour déployer votre site statique sur Kinsta :

  1. Connectez-vous ou créez un compte pour afficher votre tableau de bord MyKinsta.
  2. Autorisez Kinsta avec votre fournisseur Git.
  3. Cliquez sur Sites statiques dans la colonne latérale de gauche, puis cliquez sur Ajouter un site.
  4. Sélectionnez le dépôt et la branche à partir desquels vous souhaitez déployer.
  5. Attribuez un nom unique à votre site.
  6. Ajoutez les réglages de construction dans le format suivant :
    • Commande de construction : npm run build
    • Version Node : 18.16.0
    • Répertoire de publication : build
  7. Enfin, cliquez sur Créer un site.

Et le tour est joué ! En quelques secondes, vous disposez d’un site déployé. Un lien est fourni pour accéder à la version déployée de votre site. Vous pourrez par la suite ajouter votre domaine personnalisé et votre certificat SSL si vous le souhaitez.

Comme alternative à l’hébergement de sites statiques, vous pouvez déployer votre site statique avec l’hébergement d’applications de Kinsta, qui offre une plus grande flexibilité d’hébergement, une plus large gamme d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker et des analyses complètes englobant des données en temps réel et historiques.

Résumé

L’API Kinsta offre des possibilités qui vont au-delà de ce que nous avons évoqué. Une application intéressante pourrait être la création d’un Slackbot qui vous notifie sur Slack chaque fois qu’une extension est obsolète. Cette intégration peut considérablement rationaliser votre flux de travail et vous permettre de rester informé et proactif.

Vous pouvez également développer un outil similaire, comme expliqué dans ce guide, pour mettre à jour vos thèmes, car l’API de Kinsta dispose déjà de points de terminaison pour cela.

L’équipe Kinsta travaille constamment à l’ajout de nouvelles fonctionnalités en suivant de près et en écoutant les commentaires, comme l’explique Kristof Siket, chef de l’équipe de développement de l’API Kinsta :

Les commentaires des utilisateurs déterminent l’ordre de priorité de l’exposition des fonctionnalités. Le plan actuel ne couvre pas entièrement la page Outils ; les fonctionnalités sont plutôt basées sur les demandes des utilisateurs et les commentaires recueillis. Si vous pensez qu’un outil ou un point de terminaison spécifique devrait être inclus dans l’API Kinsta, n’hésitez pas à nous faire part de vos commentaires.

Comment utilisez-vous actuellement l’API Kinsta ? Quelles fonctionnalités ou améliorations souhaiteriez-vous voir apparaître dans les prochaines mises à jour ?

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.