Au fil des ans, nos services Kinsta ont toujours été gérés manuellement via le tableau de bord MyKinsta. Cependant, avec l’introduction de l’API Kinsta et la publication continue de nouveaux points de terminaison de l’API, vous pouvez améliorer votre jeu en développant une méthode personnalisée pour vous engager avec les services Kinsta. L’un de ces moyens consiste à développer un Slackbot pour surveiller et gérer des activités telles que la création de sites.
Ce que vous construisez
Ce tutoriel explique comment créer un Slackbot (ou une application Slack) qui interagit avec l’API de Kinsta pour récupérer des informations et les transmettre sous forme de messages en temps réel à un canal Slack désigné à l’aide des Webhooks entrants de l’API Slack.
Pour cela faire, vous allez créer une application Node.js avec le framework Express pour créer une interface utilisateur pour la création de sites WordPress et l’intégrer à l’API Kinsta. L’application utilise un formulaire pour collecter les détails de configuration de votre site WordPress et envoie ensuite une mise à jour en temps réel des informations sur le site et des détails sur la façon de vérifier son état de fonctionnement au canal Slack spécifié.
Pré-requis
Pour suivre ce projet, vous devez disposer des éléments suivants :
- Connaissances de base en JavaScript et Node.js
- Node.js version 12 ou supérieure
- npm (Node Package Manager) installé sur votre ordinateur
- Un espace de travail Slack
Configuration de l’environnement de développement
Pour commencer, créez un nouveau répertoire pour votre application et initialisez-le avec npm :
mkdir my-express-app
cd my-express-app
npm init -yAprès avoir exécuté la commande npm init -y, un nouveau fichier package.json sera créé dans le répertoire de votre projet avec des valeurs par défaut. Ce fichier contient des informations importantes sur votre projet et ses dépendances.
Ensuite, installez les dépendances nécessaires à votre projet. Les dépendances suivantes sont essentielles :
- ejs: EJS (Embedded JavaScript) est un moteur de template qui vous permet de générer du contenu HTML dynamique avec JavaScript.
- express: Express est un framework d’application web rapide et minimaliste pour Node.js. Il simplifie la création d’applications web et d’API en fournissant des fonctionnalités essentielles telles que le routage, la prise en charge d’intergiciels et la gestion des requêtes et réponses HTTP.
- express-ejs-layouts: Express EJS layouts est une extension pour Express qui permet d’utiliser des mises en pages ou des modèles pour maintenir une structure cohérente entre plusieurs vues.
Pour installer ces dépendances, exécutez la commande ci-dessous :
npm install ejs express express-ejs-layoutsEn outre, vous devrez installer les dépendances suivantes pour faciliter la construction et le test de votre projet Node.js :
- nodemon: Un outil précieux qui redémarre automatiquement votre application Node.js chaque fois qu’un changement de fichier est détecté dans le répertoire, garantissant ainsi un flux de développement rationalisé.
- dotenv: ce module sans dépendance joue un rôle crucial dans le chargement des variables d’environnement à partir d’un fichier .env.
Pour installer ces dépendances, exécutez la commande ci-dessous :
npm install -D nodemon dotenvUne fois que votre package.json est initialisé et que toutes les dépendances sont installées, créez un nouveau fichier, par exemple app.js.
touch app.jsVoici une configuration par défaut pour votre fichier app.js, où vous importez les modules nécessaires et le configurez pour fonctionner sur un port spécifique :
// Import required modules
const express = require('express');
const app = express();
// Set up your routes and middleware here
// ...
// Start the server to listen on the specified port
app.listen(process.env.PORT || 3000, () => {
console.log(`Server is running on port ${process.env.PORT || 3000}`);
});Pour lancer votre application Node.js, exécutez la commande :
node app.jsCependant, l’exécution d’une application de ce type implique de la redémarrer manuellement à chaque fois que vous apportez des modifications à votre projet. Pour pallier cet inconvénient, utilisez nodemon, que vous avez déjà installé. Configurez-le dans votre fichier package.json en créant une commande script :
"scripts": {
"dev": "nodemon app.js"
},Maintenant, exécutez votre application Node.js avec redémarrage automatique en utilisant la commande suivante :
npm run devPremiers pas avec Express et EJS Templating
Dans ce tutoriel, vous construisez une application Node.js qui affichera du contenu sur le navigateur. Pour ce faire, express.js est utilisé comme framework web, et EJS (Embedded JavaScript) comme moteur de templating.
Pour définir EJS comme moteur de visualisation, ajoutez la ligne suivante à votre fichier app.js. Cela permettra d’exécuter les fichiers .ejs:
// Use EJS as the view engine
app.set('view engine', 'ejs');Maintenant qu’Express est configuré avec EJS, définissez vos routes. Dans les applications web, les routes déterminent la manière dont l’application répond aux différentes requêtes HTTP (telles que GET ou POST) et spécifient les actions à entreprendre lorsqu’une URL spécifique est consultée.
Par exemple, créez une route qui chargera une page spécifique lorsqu’un utilisateur naviguera jusqu’à la page d’index (/). Pour cela, utilisez la méthode de requête GET.
// Define a route for the homepage
app.get('/', (req, res) => {
// Here, you can specify what to do when someone accesses the homepage
// For example, render an EJS template or send some HTML content
});Dans le code ci-dessus, lorsqu’un utilisateur accède à l’index de votre application, le serveur exécute la fonction de rappel spécifiée en tant que deuxième paramètre. Dans cette fonction de rappel, vous pouvez gérer la logique de rendu d’un modèle EJS ou envoyer un contenu HTML à afficher sur la page d’accueil.
Vous pouvez utiliser la méthode res.render() pour rendre un modèle EJS ou utiliser res.send() pour envoyer un simple contenu HTML.
app.get('/', (req, res) => {
res.send('Hello World');
});Lorsque vous exécutez votre application, « Hello World » s’affiche sur la page d’index.
Modèle EJS
Ce tutoriel se concentre sur la logique et inclut des fichiers de démarrage, de sorte que vous n’avez pas à vous soucier de créer des modèles à partir de zéro. Suivez les étapes suivantes pour commencer :
- Accédez au modèle sur GitHub pour créer un nouveau dépôt.
- Cochez l’option Inclure toutes les branches lors de la création du dépôt.
- Une fois le dépôt créé, clonez le projet sur votre ordinateur à l’aide de Git.
- Pour accéder au code de démarrage, passez à la branche starter-files dans votre dépôt local.
Dans le code de démarrage, nous avons deux dossiers principaux : public et views. Le dossier public contient toutes les ressources statiques (fichiers CSS et images). Ils sont ajoutés au modèle en tant que fichiers statiques :
// Static files
app.use(express.static('/public'));
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/images', express.static(__dirname + '/public/images'));Dans le dossier views, vous avez le fichier layout.ejs et deux dossiers : pages et partials. Le fichier layout.ejs contient la mise en page générale de ce projet, de sorte que vous n’avez pas à répéter un code récurrent pour toutes les pages. Importez la bibliothèque express-ejs-layouts dans le fichier app.js, puis configurez-la :
// Import
const expressEjsLayouts = require('express-ejs-layouts');
// Configure
app.use(expressEjsLayouts);Le dossier pages contient les fichiers de route (index.ejs et operation.ejs), tandis que le dossier partials contient les composants (header.ejs et footer.ejs). Ajoutez-les à la mise en page comme suit :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/favicon.ico" />
<link rel="stylesheet" href="/css/index.css" />
<title>Site Builder</title>
</head>
<body>
<div class="app-container">
<%- include('partials/header') %>
<div class="container"><%- body %></div>
<%- include('partials/footer') %>
</div>
</body>
</html>Lorsque vous exécutez votre application Node.js, l’interface utilisateur se charge, mais vous devez ajouter de la logique à cette application pour envoyer les données du formulaire à l’API Kinsta et envoyer des informations sur le site à Slack lorsque l’opération démarre.
Démarrer avec les webhooks entrants de Slack
Les webhooks entrants de Slack offrent un moyen simple d’envoyer des messages d’applications externes à Slack. Pour utiliser les webhooks entrants de Slack, créez et configurez une application Slack, puis copiez l’URL de votre webhook pour envoyer des messages à Slack de manière programmatique.
Configuration d’une application Slack et obtention de l’URL du webhook
Créez une nouvelle application Slack en suivant les étapes suivantes :
- Accédez au tableau de bord de l’API Slack.
- Cliquez sur le bouton Créer une nouvelle application, qui ouvrira une fenêtre modale.
- Sélectionnez l’option À partir de zéro pour commencer à construire votre application à partir de zéro.
- Donnez un nom à votre application Slack, par exemple Kinsta Bot.
- Ensuite, choisissez l’espace de travail dans lequel vous souhaitez installer l’application et cliquez sur le bouton Créer une application.
Une fois votre application Slack créée, vous pouvez activer les webhooks entrants en naviguant vers Fonctionnalités et en sélectionnant Webhooks entrants. Basculez le commutateur pour activer les webhooks entrants pour votre application.
Faites défiler vers le bas jusqu’à la section URL du webhook pour votre espace de travail et cliquez sur Ajouter un nouveau webhook à l’espace de travail. Vous serez invité à choisir un canal où les messages seront envoyés. Sélectionnez le canal souhaité et cliquez sur Autoriser.
Une fois l’autorisation obtenue, vous recevrez une URL de webhook pour le canal sélectionné. C’est cette URL que vous utiliserez pour envoyer des messages à Slack de manière programmatique. Voici à quoi ressemble une URL de webhook :
https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXXCe Webhook est spécifique à un seul utilisateur et à un seul canal. Gardez-le sécurisé, car il sert de jeton d’authentification pour votre application. Vous pouvez stocker les codes uniques après /services/ dans votre fichier .env. Vous serez également invité à réinstaller l’application dans votre espace de travail pour que les modifications soient prises en compte.
Envoi de messages à Slack avec Node.js et l’API Kinsta
Maintenant que l’interface de votre application Node.js est configurée et que le Slackbot a été créé avec succès (avec votre URL de webHook), il est temps de gérer la logique.
Récupérer les données du formulaire en Node.js
Sur la page d’index, vous avez un formulaire qui enverra des données à l’API Kinsta pour créer un nouveau site WordPress. Pour que cela fonctionne, vous devez créer une requête POST à partir de la page d’index. Assurez-vous que votre formulaire a une méthode POST, et que les champs d’entrée ont un attribut name, qui sera utilisé dans le fichier app.js.
app.post('/', (req, res) => {
// Perform the desired operation with the form data
});Pour récupérer les données d’un formulaire dans Node.js, vous devez utiliser l’intergiciel suivant :
app.use(express.json());
app.use(express.urlencoded({ extended: true }));Vous pouvez maintenant accéder aux valeurs de votre formulaire en utilisant req.body.[form field name]. Par exemple, req.body.displayName vous donnera le nom d’affichage soumis par le biais du formulaire. Enregistrons les données globales du formulaire :
app.post('/', (req, res) => {
console.log(req.body);
});Lorsque vous exécutez votre code, les données du formulaire s’affichent après que vous avez rempli le formulaire et cliqué sur le bouton Envoyer.
Création d’un site avec l’API Kinsta dans Node.js
Pour créer un site WordPress avec l’API Kinsta dans Node.js, vous pouvez utiliser la méthode fetch(), qui est désormais prise en charge et fonctionne efficacement dans les dernières versions de Node.js.
Pour effectuer toute opération avec l’API Kinsta, vous devez créer une clé API. Pour générer une clé API :
- Allez sur votre tableau de bord MyKinsta.
- Naviguez jusqu’à la page des clés API (Votre nom > Réglages de l’entreprise > Clés API).
- Cliquez sur Créer une clé API.
- 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é.
- Donnez un nom unique à la clé.
- Cliquez sur Générer.
Veillez à copier la clé API générée et à la stocker en toute sécurité, car elle ne sera visible qu’à ce moment-là. Pour ce projet, créez un fichier .env dans votre répertoire racine et enregistrez la clé API sous KINSTA_API_KEY.
De plus, pour créer un site WordPress en utilisant l’API Kinsta, vous aurez besoin de l’identifiant de votre entreprise (qui peut être trouvé dans MyKinsta sous Entreprise > Détails de facturation > Identifiant de l’entreprise). Enregistrez également cet identifiant dans le fichier .env, afin de pouvoir accéder à ces variables d’environnement via process.env. Pour activer cette fonctionnalité, assurez-vous de configurer la dépendance dotenv en haut de votre fichier app.js comme suit :
require('dotenv').config();Pour créer un site WordPress via l’API Kinsta, envoyez une requête POST au point de terminaison /sites avec les données nécessaires fournies dans l’objet req.body:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
app.post('/', (req, res) => {
const createSite = async () => {
const resp = await fetch(`${KinstaAPIUrl}/sites`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,
},
body: JSON.stringify({
company: process.env.REACT_APP_KINSTA_COMPANY_ID,
display_name: req.body.displayName,
region: req.body.location,
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: req.body.email,
admin_password: req.body.password,
admin_user: req.body.username,
is_multisite: false,
site_title: req.body.siteTitle,
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US',
}),
});
const data = await resp.json();
console.log(data);
};
createSite();
});En exécutant le code ci-dessus, vous créerez un nouveau site WordPress avec l’API Kinsta. Mais ce n’est pas l’objectif principal. L’objectif est d’envoyer un message à Slack contenant des informations sur le site lorsque l’opération de création du site est réussie.
Envoyez un message à Slack avec l’URL du webhook entrant
Pour cela, créez une instruction If pour vérifier l’état de la réponse à la requête API. S’il s’agit de 202, cela signifie que la création du site a commencé et que vous pouvez envoyer un message à Slack à l’aide de l’URL Webhooks entrante. Pour cela, vous pouvez utiliser votre bibliothèque de requêtes HTTP préférée (par exemple Axios) ou une méthode pour envoyer une requête POST à Slack. Utilisons la méthode fetch():
if (data.status === 202) {
fetch(
`https://hooks.slack.com/services/${process.env.SLACK_WEBHOOK_ID}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: 'Hello, world.',
}),
}
);
}Exécutez le code ci-dessus et remplissez le formulaire de création de site. Si le processus est réussi, un message sera immédiatement envoyé à Slack.
Personnalisation des messages Slack
L’exemple ci-dessus envoie un message texte de base, mais les webhooks entrants de Slack prennent en charge bien plus qu’un simple texte. Vous pouvez personnaliser vos messages pour y inclure des pièces jointes, des liens, des images, des boutons, etc.
L’une des façons de personnaliser les messages Slack est d’utiliser le Block Kit Builder de Slack. Le Block Kit est un framework d’interface utilisateur fourni par Slack qui vous permet de créer des messages riches et interactifs avec divers éléments de contenu.
Pour ce tutoriel, voici un bloc créé avec le Block Kit Builder pour formater correctement le message et ajouter quelques valeurs du formulaire et de la réponse de création de site :
const message = {
blocks: [
{
type: 'section',
text: {
type: 'mrkdwn',
text: `Hello, your new site (${req.body.displayName}) has started building. It takes minutes to build. You can check the operation status intermittently via https://site-builder-nodejs-xvsph.kinsta.app/operation/${req.body.displayName}/${data.operation_id}.`,
},
},
{
type: 'divider',
},
{
type: 'section',
text: {
type: 'mrkdwn',
text: "_Here are your site's details:_",
},
},
{
type: 'section',
text: {
type: 'mrkdwn',
text: `1. *Site URL:* http://${req.body.displayName}.kinsta.cloud/n2. *WP Admin URL:* http://${req.body.displayName}.kinsta.cloud/wp-admin/`,
},
},
],
};Dans ce code, vous créez un objet message contenant un tableau de blocs. Chaque bloc représente une section spécifique du message Slack et peut avoir différents types de contenu.
- Bloc de section : Ce type de bloc est utilisé pour afficher une section de texte. Vous utilisez
type: 'section'pour indiquer qu’il s’agit d’un bloc de section. À l’intérieur du bloc de section, la propriété text est utilisée avectype: 'mrkdwn'pour spécifier que le contenu du texte doit être interprété au format Markdown. Le contenu textuel réel est fourni dans la propriété text, et nous utilisons des littéraux de modèle pour inclure des valeurs dynamiques provenant du formulaire et de la réponse de création de site, telles quereq.body.displayNameetdata.operation_id. - Bloc de séparation : Ce type de bloc est utilisé pour ajouter une ligne horizontale afin de séparer les sections du message. Nous utilisons
type: 'divider'pour créer le bloc séparateur.
Lorsque ce message est envoyé à Slack à l’aide du webhook entrant, il génère un message visuellement attrayant et informatif dans votre canal Slack. Le message comprendra des valeurs dynamiques provenant du formulaire (comme le nom du site) et des informations provenant de la réponse à la création du site, ce qui en fait un message hautement personnalisé.
Pour envoyer ce message personnalisé, remplacez l’objet dans le corps de la page fetch() par le contenu de la variable message :
if (data.status === 202) {
fetch(
`https://hooks.slack.com/services/${process.env.SLACK_WEBHOOK_ID}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
}
);
}
Gérer l’opération de création de site avec l’API Kinsta
Dans le message envoyé à Slack, un lien est créé avec l’ID de l’opération et le nom d’affichage. Vous pouvez créer une nouvelle route pour la page Opérations afin d’utiliser ces données pour vérifier le statut de l’opération.
Dans Express, vous pouvez accéder aux paramètres de l’URL avec le paramètre req. Par exemple, pour obtenir l’identifiant de l’opération, vous utilisez req.params.operationId.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
app.get('/operation/:displayName/:operationId', (req, res) => {
const checkOperation = async () => {
const operationId = req.params.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();
res.render('pages/operation', {
operationID: req.params.operationId,
displayName: req.params.displayName,
operationMessage: data.message,
});
};
checkOperation();
});Avec le code ci-dessus, cliquer sur le lien dans Slack enverra une requête à l’API Kinsta pour vérifier l’état de l’opération de votre site. Mettez à jour le fichier operation.ejs pour ajouter des données dynamiques :
<div class="container-title">
<h1 class="title">Check Site Operation Status</h1>
<p>
Check the status of your site tools operation via the id. Feel free to copy
the ID and check in few seconds.
</p>
</div>
<div class="form-container">
<div class="input-div">
<input class="form-control" value="<%= operationID %>" readOnly />
</div>
<button class="btn" type="submit" onclick="window.location.reload()">
Refresh Operation Status
</button>
</div>
<div class="services">
<div class="details">
<p><%= operationMessage %>..</p>
</div>
</div>
<div class="services">
<p class="description">
If message above indicates that "Operation has successfully finished", use
the links below to access your WP admin and the site itself.
</p>
<div class="details">
<a
href="http://<%= displayName %>.kinsta.cloud/wp-admin/"
target="_blank"
rel="noreferrer"
class="detail-link"
>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a
href="http://<%= displayName %>.kinsta.cloud/"
target="_blank"
rel="noreferrer"
class="detail-link"
>
<p>Open URL</p>
<FiExternalLink />
</a>
</div>
</div>
Une dernière chose, vous pouvez utiliser la méthode de redirection pour naviguer vers la page des opérations lorsque le processus de création d’un site démarre :
if (data.status === 202) {
fetch(
`https://hooks.slack.com/services/${process.env.SLACK_WEBHOOK_ID}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(message),
}
);
res.redirect(`/operation/${req.body.displayName}/${data.operation_id}`);
}Le code source complet de ce projet est disponible sur la branche principale de ce dépôt GitHub.
Déployer votre application Node.js sur Kinsta
Vous pouvez facilement déployer cette application Node.js sur la plateforme d’hébergement d’applications de Kinsta. Tout ce que vous avez à faire est de pousser votre code vers votre fournisseur Git préféré (Bitbucket, GitHub, ou GitLab). Suivez ensuite les étapes suivantes :
- Connectez-vous à votre compte Kinsta sur le tableau de bord MyKinsta.
- Cliquez sur Ajouter un service.
- Sélectionnez Application dans le menu déroulant.
- 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.
- Sélectionnez l’un des centres de données disponibles. Kinsta détectera et installera les dépendances de votre application à partir du fichier package.json, puis construira et déploiera.
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.
Une fois que vous avez lancé le déploiement de votre application, celle-ci sera généralement construite et déployée en quelques minutes. Un lien vers votre nouvelle application sera fourni, qui ressemble à ceci : https://site-builder-nodejs-xvsph.kinsta.app.
Résumé
Dans ce tutoriel, vous avez appris à envoyer des messages à Slack à partir d’une application Node.js à l’aide de webhooks entrants et à personnaliser les messages Slack avec le Block Kit Builder.
Les possibilités offertes par Slack et l’API Kinsta sont vastes, et ce tutoriel n’est qu’un début. En intégrant ces outils, vous pouvez créer un flux de travail transparent qui permet à votre équipe d’être bien informée et d’accroître sa productivité.
Comment utilisez-vous l’API Kinsta ? Quelles sont les fonctionnalités que vous aimeriez voir ajoutées/exposées prochainement ?
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.
Laisser un commentaire