Kinsta est une plateforme cloud conçue pour aider les entreprises et les équipes de développement à livrer et à gérer leurs projets web plus rapidement et plus efficacement.

Kinsta fournit aux développeurs et aux utilisateurs une API pour gérer leurs sites WordPress, leurs applications et leurs bases de données de manière programmatique.

L’API Kinsta peut être utilisée pour automatiser des tâches, récupérer des données et intégrer Kinsta à d’autres applications sans accéder à MyKinsta. Pour accéder à l’API, vous avez besoin d’une clé API. Cet article explique le processus de création et d’utilisation d’une clé API Kinsta.

Comment créer une clé API

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 devrez également générer une clé API pour vous authentifier et accéder à votre compte via l’API. 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.
Créez une clé API sur MyKinsta.
Créez une clé API sur MyKinsta.

Lorsque vous créez une clé API, copiez-la et conservez-la dans un endroit sûr, car c’est la seule fois où vous pourrez la voir. Vous pouvez générer plusieurs clés API – elles seront listées sur la page Clés API. Si vous devez révoquer une clé API, cliquez sur Révoquer à côté de celle que vous souhaitez révoquer.

Comment utiliser l’API Kinsta avec votre clé API

Une fois que vous avez la clé API, vous pouvez interagir avec tous les services de Kinsta (sites WordPress, applications et bases de données) via l’API Kinsta, comme obtenir une liste de bases de données par identifiant d’entreprise, des sites d’entreprise, créer un site WordPress, et plus encore.

Par exemple, pour obtenir une liste des sites d’entreprise dans votre MyKinsta, le point de terminaison est /sites. La clé API servira d’en-tête d’autorisation ; vous ajouterez également l’identifiant de l’entreprise (paramètre obligatoire). Voici comment effectuer cette requête API à l’aide de cURL :

curl -i -X GET 
  'https://api.kinsta.com/v2/sites?company=' 
  -H 'Authorization: Bearer <YOUR_API_KEY_HERE>'

Remplacez YOUR_API_KEY_HERE par la clé API que vous avez générée et COMPANY_ID_HERE par l’identifiant unique de votre entreprise. Vous obtiendrez une réponse JSON de tous les sites d’entreprise dans votre tableau de bord DevKinsta :

{
    "company": {
        "sites": [
            {
                "id": "YOUR_SITE_ID",
                "name": "my-test-site",
                "display_name": "Test site",
                "status": "live",
                "site_labels": []
            }
        ]
    }
}

Autre exemple, supposons que vous souhaitiez récupérer un site spécifique par ID (requête GET). Vous pouvez utiliser le point de terminaison /sites/{site_id}. {site_id} sera remplacé par l’identifiant unique du site spécifique que vous souhaitez récupérer. Voici comment effectuer cette requête API à l’aide de NodeJS :

import fetch from 'node-fetch';

async function fetchSite() {
  const siteId = 'YOUR_SITE_ID';
  const response = await fetch(
    `https://api.kinsta.com/v2/sites/${siteId}`,
    {
      method: 'GET',
      headers: {
        Authorization: 'Bearer 
      }
    }
  );

  const data = await response.json();
  console.log(data);
}

fetchSite();

Les possibilités offertes par l’API de Kinsta ne s’arrêtent pas là. Pour plus de détails sur les points de terminaison de l’API disponibles et les paramètres nécessaires, pour télécharger notre spécification OpenAPI, et pour essayer les points de terminaison, consultez notre Référence API.

Autorisations

Les autorisations d’accès à l’API de Kinsta dépendent du rôle de l’utilisateur au sein de l’entreprise. Les propriétaires, les administrateurs et les développeurs de l’entreprise peuvent créer des clés d’API.

Par exemple, une clé API générée par un développeur n’aura pas le même niveau d’accès qu’une clé générée par un propriétaire ou un administrateur de l’entreprise. Les autorisations spécifiques associées à chaque rôle d’utilisateur garantissent un contrôle d’accès et une sécurité appropriés pour l’API de Kinsta.

Comment utiliser l’API Kinsta pour créer un vérificateur d’état

Lorsque vous créez une application, un site ou une base de données sur MyKinsta, elle passe par différentes étapes. Ces étapes sont identifiées par leur état. Par exemple, une application déployée sur Kinsta aura un état de déploiement, de déploiement réussi ou d’échec.

L’API Kinsta fournit des points de terminaison qui vous permettent de récupérer des informations sur l’état de vos projets sur MyKinsta. Pour ce projet, vous interagirez avec trois points de terminaison, à savoir les points de terminaison /applications, /sites, et /databasespour récupérer un tableau de toutes les applications, sites et bases de données à l’aide de l’API JavaScript Fetch.

Une fois la liste récupérée, vous pouvez utiliser la méthode find() en JavaScript pour rechercher un nom de projet spécifique saisi dans l’interface utilisateur (UI). Cette méthode renvoie le nom et l’état du projet s’il existe.

Application web de vérification de l'état du projet.
Application web de vérification de l’état du projet.

Pré-requis

Pour suivre ce projet, il est conseillé d’avoir une compréhension de base de HTML, CSS et JavaScript et une certaine familiarité avec React. L’objectif principal de ce projet est de démontrer l’utilisation de l’API Kinsta, l’article n’entrera donc pas dans les détails de la création ou du style de l’interface utilisateur.

Vous pouvez créer un dépôt Git en utilisant ce modèle sur GitHub. Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un nouveau dépôt au sein de votre propre compte GitHub, et assurez-vous de cocher la case pour inclure toutes les branches. Lorsque vous vous rendez sur votre ordinateur local, assurez-vous de basculer vers l’option status-checker-ui pour utiliser les fichiers de démarrage en utilisant la commande ci-dessous :

git checkout status-checker-ui

Installez les dépendances nécessaires en exécutant la commande npm install. Une fois l’installation terminée, vous pouvez lancer le projet sur votre ordinateur local à l’aide de la commande npm run start. Le projet s’ouvrira alors à l’adresse http://localhost:3000/.

Vérifiez l'état des projets avec MyKinsta.
Vérifiez l’état des projets avec MyKinsta.

Ce projet comporte deux pages principales : la page Home et Services page. La Home affiche une liste des services fournis par Kinsta (hébergement de WordPress, d’applications et de bases de données). Lorsque vous cliquez sur l’un des services, vous accédez à Services page, qui est conçue pour fournir des informations spécifiques relatives au service sélectionné.

Par exemple, en cliquant sur la section « Applications », vous serez redirigé vers Services page consacrée aux applications. Vous pouvez rechercher n’importe quelle application de votre compte MyKinsta sur cette page, qui récupère le statut de l’application en utilisant son nom unique ou son nom d’affichage.

Interagir avec l’API Kinsta

Pour mettre en œuvre la fonction de recherche de ce projet, vous devez créer trois fonctions pour gérer les demandes de récupération pour chaque service (applications, sites et bases de données). Ensuite, vous mettrez en œuvre une fonctionnalité de recherche qui analyse l’ensemble du tableau de données pour vérifier si une valeur de recherche donnée existe.

Vous avez besoin de l’identifiant de votre entreprise et de la clé API pour interagir avec l’API Kinsta afin de pouvoir récupérer une liste de bases de données, d’applications et de sites disponibles dans votre compte MyKinsta. Une fois que vous les avez, stockez-les en tant que variables d’environnement dans votre application React en créant un fichier .env dans le dossier racine de votre projet.

REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'

Vous pouvez maintenant accéder à ces valeurs n’importe où dans votre projet en utilisant process.env.THE_VARIABLE. Par exemple, pour accéder à REACT_APP_KINSTA_COMPANY_ID, vous utilisez process.env.REACT_APP_KINSTA_COMPANY_ID.

Avant d’utiliser l’API, créez trois états dans la page Service.jsx pour stocker l’état et le nom de la sortie générée lorsque vous recherchez un site, une application ou une base de données. Le troisième état sert à stocker les informations d’erreur.

let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');

Créez également une variable pour stocker l’URL de l’API Kinsta :

const KinstaAPIUrl = 'https://api.kinsta.com/v2';

Une fois cela fait, attachez un événement onClick avec une fonction CheckQuery() au bouton d’envoi du formulaire sur la page Service.jsx, de sorte qu’il déclenche une fonction basée sur le mot-clé. En d’autres termes, si l’intitulé indique « database », c’est la fonction CheckDatabases() qui sera déclenchée :

const CheckQuery = async (name) => {
  if (slug === 'wp-site') {
      await CheckSites(name);
  } else if (slug === 'application') {
      await CheckApplications(name);
  } else if (slug === 'database') {
      await CheckDatabases(name);
  }
}

Récupérer une liste de sites avec l’API Kinsta

Pour récupérer la liste des sites disponibles sur votre compte MyKinsta avec l’API Kinsta, vous allez créer une fonction, passer une requête avec l’identifiant de l’entreprise comme paramètre, puis autoriser la requête avec votre clé API. Cette requête utilisera le point de terminaison /sites de l’API Kinsta :

const CheckSites = async (name) => {
  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}`
          }
      }
  );
}

Le code ci-dessus récupère tous les sites disponibles dans votre compte MyKinsta, vous pouvez maintenant utiliser la méthode find() pour rechercher si la requête correspond à un nom ou à un nom d’affichage:

const data = await resp.json();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);

Vous pouvez ensuite créer des conditions pour vérifier si la méthode renvoie une valeur, puis définir les états, sinon mettre à jour l’état d’erreur avec un message pour informer l’utilisateur que ce site n’existe pas :

if (site) {
    setName(site.display_name);
    if (site.status === 'live') {
        setStatus('🟢 Running');
    } else if (site.status === 'staging') {
        setStatus('🟡 Staging');
    } else {
        setStatus('🟡 Unknown');
    }
    setUniqueName('');
} else {
    setError('No such site found for your account');
    setUniqueName('');
}

Lorsque vous réunissez tous ces éléments, voici à quoi ressemblera votre code pour vérifier l’état d’un site particulier :

const CheckSites = async (name) => {
  setName('');
  setStatus('');
  setError('');
  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();
  let sitesData = data.company.sites;
  let site = sitesData.find(site => site.name === name || site.display_name === name);
  if (site) {
      setName(site.display_name);
      if (site.status === 'live') {
          setStatus('🟢 Running');
      } else if (site.status === 'staging') {
          setStatus('🟡 Staging');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such site found for your account');
      setUniqueName('');
  }
}

Remarque : les trois états sont initialisés en tant que chaînes vides chaque fois que la fonction CheckSites() est déclenchée. Cela est nécessaire pour s’assurer que toutes les données de recherche antérieures sont effacées.

Récupérer la liste des applications avec l’API Kinsta

Comme vous l’avez fait pour les sites, vous utiliserez le point de terminaison /applications, transmettrez une requête contenant l’identifiant de l’entreprise et utiliserez également la méthode find() pour effectuer une recherche dans le tableau retourné :

const CheckApplications = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/applications?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let appsData = data.company.apps.items;
  let app = appsData.find(app => app.unique_name === name || app.name === name || app.display_name === name);
  if (app) {
      setName(app.display_name);
      if (app.status === 'deploymentSuccess') {
          setStatus('🟢 Running');
      } else if (app.status === 'deploymentFailed') {
          setStatus('🔴 Failed');
      } else if (app.status === 'deploymentPending') {
          setStatus('🟡 Pending');
      } else if (app.status === 'deploymentInProgress') {
          setStatus('🟡 In Progress');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such app found for your account');
      setUniqueName('');
  }
}

Récupérer une liste de bases de données avec l’API Kinsta

Pour obtenir une liste de bases de données, vous utiliserez le point de terminaison /databases de l’API Kinsta :

const CheckDatabases = async (name) => {
  setName('');
  setStatus('');
  setError('');
  const query = new URLSearchParams({
      company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
  }).toString();
  const resp = await fetch(
      `${KinstaAPIUrl}/databases?${query}`,
      {
          method: 'GET',
          headers: {
              Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
          }
      }
  );
  const data = await resp.json();
  let databasesData = data.company.databases.items;
  let database = databasesData.find(database => database.name === name || database.display_name === name);
  if (database) {
      setName(database.display_name);
      if (database.status === 'ready') {
          setStatus('🟢 Running');
      } else if (database.status === 'creating') {
          setStatus('🟡 Creating');
      } else {
          setStatus('🟡 Unknown');
      }
      setUniqueName('');
  } else {
      setError('No such database found for your account');
      setUniqueName('');
  }
}

Une fois que c’est fait. Vous avez utilisé avec succès l’API Kinsta dans votre projet React. Pour vous assurer que votre application fonctionne bien, ajoutez à votre code de balisage les données renvoyées par ces fonctions, qui ont été définies dans les états que nous avons créés plus tôt :

{status !== '' && (
  <div className="services">
      <div className="details">
          <div className="name-details">
              <span> className="tag">Name: </span>
              <span> className="value">{name}</span>
          </div>
          <div className="status-details">
              <span> className="tag">Status: </span>
              <span> className="value"> {status}</span>
          </div>
      </div>
  </div>
)}

Ajoutez également une condition qui sera déclenchée en cas d’erreur. Par exemple, lorsqu’un utilisateur recherche un projet qui n’existe pas dans MyKinsta, l’erreur est déclenchée.

{error !== '' && (
  <div className="services">
      <div className="details">
          <p>{error}</p>
      </div>
  </div>
)}

A ce stade, votre projet fonctionne bien, et vous pouvez vérifier l’état des applications, sites ou bases de données disponibles sur votre tableau de bord MyKinsta. Vous pouvez vérifier votre code avec ce dépôt GitHub.

Comment déployer votre vérificateur d’état sur Kinsta

Pour déployer votre projet React sur Kinsta, vous devez pousser le projet sur votre fournisseur Git préféré. Lorsque votre projet est hébergé sur GitHub, GitLab ou Bitbucket, vous pouvez procéder au déploiement vers Kinsta.

Pour déployer votre dépôt sur Kinsta, suivez les étapes suivantes :

  1. Connectez-vous ou créez votre compte Kinsta sur le tableau de bord MyKinsta.
  2. Dans la colonne latérale de gauche, cliquez sur « Applications », puis sur « Ajouter un service ».
  3. Sélectionnez « Application » dans le menu déroulant pour déployer une application React sur Kinsta.
  4. Dans la fenêtre modale qui s’affiche, choisissez le dépôt que vous souhaitez déployer. Si vous avez plusieurs branches, vous pouvez sélectionner la branche souhaitée et donner un nom à votre application.
  5. Sélectionnez l’un des emplacements de centre de données disponibles dans la liste des 25 options. Kinsta détectera automatiquement la commande de démarrage de votre application.

Enfin, il n’est pas sûr d’envoyer les clés d’API à des hôtes publics comme votre fournisseur Git. Lors de l’hébergement, vous pouvez les ajouter en tant que variables d’environnement en utilisant le même nom de variable et la même valeur que ceux spécifiés dans le fichier .env.

Définissez les variables d'environnement sur DevKinsta lors du déploiement.
Définissez les variables d’environnement sur DevKinsta lors du déploiement.

Une fois que vous avez lancé le déploiement de votre application, le processus commence et se termine généralement en quelques minutes. Vous recevrez un lien pour accéder à la version déployée de votre application lorsque le déploiement aura réussi. Par exemple, dans ce cas, le lien est https://status-checker-1t256.kinsta.app/.

Résumé

La clé API de Kinsta vous permet d’automatiser facilement des tâches, de récupérer des données et d’intégrer Kinsta à d’autres applications. N’oubliez pas de conserver votre clé d’accès en toute sécurité.

Vous pouvez désormais exploiter la puissance de l’API Kinsta pour créer des rapports, planifier des tâches, créer des sites WordPress et automatiser diverses activités.

Quel point de terminaison aimeriez-vous voir ajouté à l’API de Kinsta ? Faites-le nous savoir dans les commentaires.

Joel Olawanle Kinsta

Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.