Ce que vous construisez<\/h2>\n
Ce tutoriel explique comment cr\u00e9er un Slackbot (ou une application Slack) qui interagit avec l’API de Kinsta<\/a> pour r\u00e9cup\u00e9rer des informations et les transmettre sous forme de messages en temps r\u00e9el \u00e0 un canal Slack d\u00e9sign\u00e9 \u00e0 l’aide des Webhooks entrants de l’API Slack<\/a>.<\/p>\n Pour cela faire, vous allez cr\u00e9er une application Node.js<\/a> avec le framework Express<\/a> pour cr\u00e9er une interface utilisateur pour la cr\u00e9ation de sites WordPress<\/a> et l’int\u00e9grer \u00e0 l’API Kinsta. L’application utilise un formulaire pour collecter les d\u00e9tails de configuration de votre site WordPress et envoie ensuite une mise \u00e0 jour en temps r\u00e9el des informations sur le site et des d\u00e9tails sur la fa\u00e7on de v\u00e9rifier son \u00e9tat de fonctionnement au canal Slack sp\u00e9cifi\u00e9.<\/p>\n Pour suivre ce projet, vous devez disposer des \u00e9l\u00e9ments suivants :<\/p>\n Pour commencer, cr\u00e9ez un nouveau r\u00e9pertoire pour votre application et initialisez-le avec npm :<\/p>\n Apr\u00e8s avoir ex\u00e9cut\u00e9 la commande Ensuite, installez les d\u00e9pendances n\u00e9cessaires \u00e0 votre projet. Les d\u00e9pendances suivantes sont essentielles :<\/p>\n Pour installer ces d\u00e9pendances, ex\u00e9cutez la commande ci-dessous :<\/p>\n En outre, vous devrez installer les d\u00e9pendances suivantes pour faciliter la construction et le test de votre projet Node.js :<\/p>\n Pour installer ces d\u00e9pendances, ex\u00e9cutez la commande ci-dessous :<\/p>\n Une fois que votre package.json<\/strong> est initialis\u00e9 et que toutes les d\u00e9pendances sont install\u00e9es, cr\u00e9ez un nouveau fichier, par exemple app.js<\/strong>.<\/p>\n Voici une configuration par d\u00e9faut pour votre fichier app.js<\/strong>, o\u00f9 vous importez les modules n\u00e9cessaires et le configurez pour fonctionner sur un port sp\u00e9cifique :<\/p>\n Pour lancer votre application Node.js, ex\u00e9cutez la commande :<\/p>\n Cependant, l’ex\u00e9cution d’une application de ce type implique de la red\u00e9marrer manuellement \u00e0 chaque fois que vous apportez des modifications \u00e0 votre projet. Pour pallier cet inconv\u00e9nient, utilisez Maintenant, ex\u00e9cutez votre application Node.js avec red\u00e9marrage automatique en utilisant la commande suivante :<\/p>\n Dans ce tutoriel, vous construisez une application Node.js qui affichera du contenu sur le navigateur. Pour ce faire, express.js est utilis\u00e9 comme framework web, et EJS (Embedded JavaScript) comme moteur de templating.<\/p>\n Pour d\u00e9finir EJS comme moteur de visualisation, ajoutez la ligne suivante \u00e0 votre fichier app.js<\/strong>. Cela permettra d’ex\u00e9cuter les fichiers Maintenant qu’Express est configur\u00e9 avec EJS, d\u00e9finissez vos routes. Dans les applications web, les routes d\u00e9terminent la mani\u00e8re dont l’application r\u00e9pond aux diff\u00e9rentes requ\u00eates HTTP (telles que GET ou POST) et sp\u00e9cifient les actions \u00e0 entreprendre lorsqu’une URL sp\u00e9cifique est consult\u00e9e.<\/p>\n Par exemple, cr\u00e9ez une route qui chargera une page sp\u00e9cifique lorsqu’un utilisateur naviguera jusqu’\u00e0 la page d’index<\/strong> ( Dans le code ci-dessus, lorsqu’un utilisateur acc\u00e8de \u00e0 l’index<\/strong> de votre application, le serveur ex\u00e9cute la fonction de rappel sp\u00e9cifi\u00e9e en tant que deuxi\u00e8me param\u00e8tre. Dans cette fonction de rappel, vous pouvez g\u00e9rer la logique de rendu d’un mod\u00e8le EJS ou envoyer un contenu HTML<\/a> \u00e0 afficher sur la page d’accueil.<\/p>\n Vous pouvez utiliser la m\u00e9thode Lorsque vous ex\u00e9cutez votre application, \u00ab Hello World \u00bb s’affiche sur la page d’index<\/strong>.<\/p>\n Ce tutoriel se concentre sur la logique et inclut des fichiers de d\u00e9marrage, de sorte que vous n’avez pas \u00e0 vous soucier de cr\u00e9er des mod\u00e8les \u00e0 partir de z\u00e9ro. Suivez les \u00e9tapes suivantes pour commencer :<\/p>\n Dans le code de d\u00e9marrage, nous avons deux dossiers principaux : public<\/strong> et views<\/strong>. Le dossier public<\/strong> contient toutes les ressources statiques (fichiers CSS et images). Ils sont ajout\u00e9s au mod\u00e8le en tant que fichiers statiques :<\/p>\n Dans le dossier views<\/strong>, vous avez le fichier layout.ejs<\/strong> et deux dossiers : pages<\/strong> et partials<\/strong>. Le fichier layout.ejs<\/strong> contient la mise en page g\u00e9n\u00e9rale de ce projet, de sorte que vous n’avez pas \u00e0 r\u00e9p\u00e9ter un code r\u00e9current pour toutes les pages. Importez la biblioth\u00e8que Le dossier pages<\/strong> contient les fichiers de route (index.ejs<\/strong> et operation.ejs<\/strong>), tandis que le dossier partials<\/strong> contient les composants (header.ejs<\/strong> et footer.ejs<\/strong>). Ajoutez-les \u00e0 la mise en page comme suit :<\/p>\n Lorsque vous ex\u00e9cutez votre application Node.js<\/a>, l’interface utilisateur se charge, mais vous devez ajouter de la logique \u00e0 cette application pour envoyer les donn\u00e9es du formulaire \u00e0 l’API Kinsta et envoyer des informations sur le site \u00e0 Slack lorsque l’op\u00e9ration d\u00e9marre.<\/p>\n Les webhooks entrants de Slack offrent un moyen simple d’envoyer des messages d’applications externes \u00e0 Slack. Pour utiliser les webhooks entrants de Slack, cr\u00e9ez et configurez une application Slack, puis copiez l’URL de votre webhook pour envoyer des messages \u00e0 Slack de mani\u00e8re programmatique.<\/p>\n Cr\u00e9ez une nouvelle application Slack en suivant les \u00e9tapes suivantes :<\/p>\n Une fois votre application Slack cr\u00e9\u00e9e, vous pouvez activer les webhooks entrants en naviguant vers Fonctionnalit\u00e9s<\/strong> et en s\u00e9lectionnant Webhooks entrants<\/strong>. Basculez le commutateur pour activer les webhooks entrants pour votre application.<\/p>\n Faites d\u00e9filer vers le bas jusqu’\u00e0 la section URL du webhook pour votre espace de travail<\/strong> et cliquez sur Ajouter un nouveau webhook \u00e0 l’espace de travail<\/strong>. Vous serez invit\u00e9 \u00e0 choisir un canal o\u00f9 les messages seront envoy\u00e9s. S\u00e9lectionnez le canal souhait\u00e9 et cliquez sur Autoriser<\/strong>.<\/p>\n Une fois l’autorisation obtenue, vous recevrez une URL de webhook pour le canal s\u00e9lectionn\u00e9. C’est cette URL que vous utiliserez pour envoyer des messages \u00e0 Slack de mani\u00e8re programmatique. Voici \u00e0 quoi ressemble une URL de webhook :<\/p>\n Ce Webhook est sp\u00e9cifique \u00e0 un seul utilisateur et \u00e0 un seul canal. Gardez-le s\u00e9curis\u00e9, car il sert de jeton d’authentification pour votre application. Vous pouvez stocker les codes uniques apr\u00e8s Maintenant que l’interface de votre application Node.js est configur\u00e9e et que le Slackbot a \u00e9t\u00e9 cr\u00e9\u00e9 avec succ\u00e8s (avec votre URL de webHook), il est temps de g\u00e9rer la logique.<\/p>\n Sur la page d’index<\/strong>, vous avez un formulaire qui enverra des donn\u00e9es \u00e0 l’API Kinsta pour cr\u00e9er un nouveau site WordPress. Pour que cela fonctionne, vous devez cr\u00e9er une requ\u00eate POST \u00e0 partir de la page d’index. Assurez-vous que votre formulaire a une m\u00e9thode Pour r\u00e9cup\u00e9rer les donn\u00e9es d’un formulaire dans Node.js, vous devez utiliser l’intergiciel suivant :<\/p>\n Vous pouvez maintenant acc\u00e9der aux valeurs de votre formulaire en utilisant Lorsque vous ex\u00e9cutez votre code, les donn\u00e9es du formulaire s’affichent apr\u00e8s que vous avez rempli le formulaire et cliqu\u00e9 sur le bouton Envoyer<\/strong>.<\/p>\n Pour cr\u00e9er un site WordPress avec l’API Kinsta dans Node.js, vous pouvez utiliser la m\u00e9thode Pour effectuer toute op\u00e9ration avec l’API Kinsta, vous devez cr\u00e9er une cl\u00e9 API<\/a>. Pour g\u00e9n\u00e9rer une cl\u00e9 API :<\/p>\n Veillez \u00e0 copier la cl\u00e9 API g\u00e9n\u00e9r\u00e9e et \u00e0 la stocker en toute s\u00e9curit\u00e9, car elle ne sera visible qu’\u00e0 ce moment-l\u00e0. Pour ce projet, cr\u00e9ez un fichier .env<\/strong> dans votre r\u00e9pertoire racine et enregistrez la cl\u00e9 API sous De plus, pour cr\u00e9er un site WordPress en utilisant l’API Kinsta, vous aurez besoin de l’identifiant de votre entreprise (qui peut \u00eatre trouv\u00e9 dans MyKinsta sous Entreprise<\/strong> > D\u00e9tails de facturation<\/strong> > Identifiant de l’entreprise<\/strong>). Enregistrez \u00e9galement cet identifiant dans le fichier .env<\/strong>, afin de pouvoir acc\u00e9der \u00e0 ces variables d’environnement via Pour cr\u00e9er un site WordPress via l’API Kinsta, envoyez une requ\u00eate POST au point de terminaison En ex\u00e9cutant le code ci-dessus, vous cr\u00e9erez un nouveau site WordPress avec l’API Kinsta. Mais ce n’est pas l’objectif principal. L’objectif est d’envoyer un message \u00e0 Slack contenant des informations sur le site lorsque l’op\u00e9ration de cr\u00e9ation du site est r\u00e9ussie.<\/p>\n Pour cela, cr\u00e9ez une instruction If<\/strong> pour v\u00e9rifier l’\u00e9tat de la r\u00e9ponse \u00e0 la requ\u00eate API. S’il s’agit de Ex\u00e9cutez le code ci-dessus et remplissez le formulaire de cr\u00e9ation de site. Si le processus est r\u00e9ussi, un message sera imm\u00e9diatement envoy\u00e9 \u00e0 Slack.<\/p>\n 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\u00e8ces jointes, des liens, des images, des boutons, etc.<\/p>\n L’une des fa\u00e7ons de personnaliser les messages Slack est d’utiliser le Block Kit Builder de Slack<\/a>. Le Block Kit est un framework d’interface utilisateur fourni par Slack qui vous permet de cr\u00e9er des messages riches et interactifs avec divers \u00e9l\u00e9ments de contenu.<\/p>\n Pour ce tutoriel, voici un bloc cr\u00e9\u00e9 avec le Block Kit Builder pour formater correctement le message et ajouter quelques valeurs du formulaire et de la r\u00e9ponse de cr\u00e9ation de site :<\/p>\n Dans ce code, vous cr\u00e9ez un objet message contenant un tableau de blocs. Chaque bloc repr\u00e9sente une section sp\u00e9cifique du message Slack et peut avoir diff\u00e9rents types de contenu.<\/p>\n Lorsque ce message est envoy\u00e9 \u00e0 Slack \u00e0 l’aide du webhook entrant, il g\u00e9n\u00e8re 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\u00e9ponse \u00e0 la cr\u00e9ation du site, ce qui en fait un message hautement personnalis\u00e9.<\/p>\n Pour envoyer ce message personnalis\u00e9, remplacez l’objet dans le corps de la page Dans le message envoy\u00e9 \u00e0 Slack, un lien est cr\u00e9\u00e9 avec l’ID de l’op\u00e9ration et le nom d’affichage. Vous pouvez cr\u00e9er une nouvelle route pour la page Op\u00e9rations<\/strong> afin d’utiliser ces donn\u00e9es pour v\u00e9rifier le statut de l’op\u00e9ration.<\/p>\n Dans Express, vous pouvez acc\u00e9der aux param\u00e8tres de l’URL avec le param\u00e8tre Avec le code ci-dessus, cliquer sur le lien dans Slack enverra une requ\u00eate \u00e0 l’API Kinsta pour v\u00e9rifier l’\u00e9tat de l’op\u00e9ration de votre site. Mettez \u00e0 jour le fichier operation.ejs<\/strong> pour ajouter des donn\u00e9es dynamiques :<\/p>\n Une derni\u00e8re chose, vous pouvez utiliser la m\u00e9thode de redirection pour naviguer vers la page des op\u00e9rations lorsque le processus de cr\u00e9ation d’un site d\u00e9marre :<\/p>\n Le code source complet de ce projet est disponible sur la branche principale de ce d\u00e9p\u00f4t GitHub<\/a>.<\/p>\n Vous pouvez facilement d\u00e9ployer cette application Node.js sur la plateforme d’h\u00e9bergement d’applications<\/a> de Kinsta. Tout ce que vous avez \u00e0 faire est de pousser votre code vers votre fournisseur Git pr\u00e9f\u00e9r\u00e9 (Bitbucket<\/a>, GitHub<\/a>, ou GitLab<\/a>). Suivez ensuite les \u00e9tapes suivantes :<\/p>\n Enfin, il n’est pas s\u00fbr d’envoyer les cl\u00e9s d’API \u00e0 des h\u00f4tes publics comme votre fournisseur Git. Lors de l’h\u00e9bergement, vous pouvez les ajouter en tant que variables d’environnement<\/a> en utilisant le m\u00eame nom de variable et la m\u00eame valeur que ceux sp\u00e9cifi\u00e9s dans le fichier .env<\/strong>.<\/p>\n Une fois que vous avez lanc\u00e9 le d\u00e9ploiement de votre application, celle-ci sera g\u00e9n\u00e9ralement construite et d\u00e9ploy\u00e9e en quelques minutes. Un lien vers votre nouvelle application sera fourni, qui ressemble \u00e0 ceci : https:\/\/site-builder-nodejs-xvsph.kinsta.app<\/strong>.<\/p>\n![\"Gif](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/kinsta-services-slack.gif\")
Pr\u00e9-requis<\/h3>\n
\n
Configuration de l’environnement de d\u00e9veloppement<\/h2>\n
mkdir my-express-app \ncd my-express-app \nnpm init -y<\/code><\/pre>\nnpm init -y<\/code>, un nouveau fichier package.json<\/strong> sera cr\u00e9\u00e9 dans le r\u00e9pertoire de votre projet avec des valeurs par d\u00e9faut. Ce fichier contient des informations importantes sur votre projet et ses d\u00e9pendances.<\/p>\n\n
npm install ejs express express-ejs-layouts<\/code><\/pre>\n\n
npm install -D nodemon dotenv<\/code><\/pre>\ntouch app.js<\/code><\/pre>\n\/\/ Import required modules\nconst express = require('express');\nconst app = express();\n\n\/\/ Set up your routes and middleware here\n\/\/ ...\n\n\/\/ Start the server to listen on the specified port\napp.listen(process.env.PORT || 3000, () => {\n console.log(`Server is running on port ${process.env.PORT || 3000}`);\n});<\/code><\/pre>\nnode app.js<\/code><\/pre>\nnodemon<\/code>, que vous avez d\u00e9j\u00e0 install\u00e9. Configurez-le dans votre fichier package.json<\/strong> en cr\u00e9ant une commande script :<\/p>\n \"scripts\": {\n \"dev\": \"nodemon app.js\"\n },<\/code><\/pre>\nnpm run dev<\/code><\/pre>\nPremiers pas avec Express et EJS Templating<\/h3>\n
.ejs<\/code>:<\/p>\n\/\/ Use EJS as the view engine \napp.set('view engine', 'ejs');<\/code><\/pre>\n\/<\/code>). Pour cela, utilisez la m\u00e9thode de requ\u00eate GET.<\/p>\n\/\/ Define a route for the homepage\napp.get('\/', (req, res) => {\n \/\/ Here, you can specify what to do when someone accesses the homepage\n \/\/ For example, render an EJS template or send some HTML content\n});<\/code><\/pre>\nres.render()<\/code> pour rendre un mod\u00e8le EJS ou utiliser res.send()<\/code> pour envoyer un simple contenu HTML.<\/p>\napp.get('\/', (req, res) => {\n res.send('Hello World');\n});<\/code><\/pre>\nMod\u00e8le EJS<\/h3>\n
\n
\/\/ Static files\napp.use(express.static('\/public'));\napp.use('\/css', express.static(__dirname + '\/public\/css'));\napp.use('\/images', express.static(__dirname + '\/public\/images'));<\/code><\/pre>\nexpress-ejs-layouts<\/code> dans le fichier app.js<\/strong>, puis configurez-la :<\/p>\n\/\/ Import\nconst expressEjsLayouts = require('express-ejs-layouts');\n\n\/\/ Configure\napp.use(expressEjsLayouts);<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <link rel=\"icon\" href=\"\/images\/favicon.ico\" \/>\n <link rel=\"stylesheet\" href=\"\/css\/index.css\" \/>\n <title>Site Builder<\/title>\n <\/head>\n <body>\n <div class=\"app-container\">\n <%- include('partials\/header') %>\n <div class=\"container\"><%- body %><\/div>\n <%- include('partials\/footer') %>\n <\/div>\n <\/body>\n<\/html><\/code><\/pre>\nD\u00e9marrer avec les webhooks entrants de Slack<\/h2>\n
Configuration d’une application Slack et obtention de l’URL du webhook<\/h3>\n
\n
https:\/\/hooks.slack.com\/services\/T00000000\/B00000000\/XXXXXXXXXXXXXXXXXXXXXXXX<\/code><\/pre>\n\/services\/<\/code> dans votre fichier .env.<\/strong> Vous serez \u00e9galement invit\u00e9 \u00e0 r\u00e9installer l’application dans votre espace de travail pour que les modifications soient prises en compte.<\/p>\nEnvoi de messages \u00e0 Slack avec Node.js et l’API Kinsta<\/h2>\n
R\u00e9cup\u00e9rer les donn\u00e9es du formulaire en Node.js<\/h3>\n
POST<\/code>, et que les champs d’entr\u00e9e ont un attribut name<\/code>, qui sera utilis\u00e9 dans le fichier app.js<\/strong>.<\/p>\napp.post('\/', (req, res) => {\n \/\/ Perform the desired operation with the form data\n});<\/code><\/pre>\napp.use(express.json());\napp.use(express.urlencoded({ extended: true }));<\/code><\/pre>\nreq.body.[form field name]<\/code>. Par exemple, req.body.displayName<\/code> vous donnera le nom d’affichage soumis par le biais du formulaire. Enregistrons les donn\u00e9es globales du formulaire :<\/p>\napp.post('\/', (req, res) => {\n console.log(req.body);\n});<\/code><\/pre>\n![\"D\u00e9tails](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/req-details-node-js.jpg\")
Cr\u00e9ation d’un site avec l’API Kinsta dans Node.js<\/h3>\n
fetch()<\/code>, qui est d\u00e9sormais prise en charge et fonctionne efficacement dans les derni\u00e8res versions de Node.js<\/a>.<\/p>\n\n
KINSTA_API_KEY<\/code>.<\/p>\nprocess.env<\/code>. Pour activer cette fonctionnalit\u00e9, assurez-vous de configurer la d\u00e9pendance dotenv<\/code> en haut de votre fichier app.js<\/strong> comme suit :<\/p>\nrequire('dotenv').config();<\/code><\/pre>\n\/sites<\/a><\/code> avec les donn\u00e9es n\u00e9cessaires fournies dans l’objet req.body<\/code>:<\/p>\nconst KinstaAPIUrl = 'https:\/\/api.kinqsta.com\/v2';\n\napp.post('\/', (req, res) => {\n const createSite = async () => {\n const resp = await fetch(`${KinstaAPIUrl}\/sites`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n },\n body: JSON.stringify({\n company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n display_name: req.body.displayName,\n region: req.body.location,\n install_mode: 'new',\n is_subdomain_multisite: false,\n admin_email: req.body.email,\n admin_password: req.body.password,\n admin_user: req.body.username,\n is_multisite: false,\n site_title: req.body.siteTitle,\n woocommerce: false,\n wordpressseo: false,\n wp_language: 'en_US',\n }),\n });\n const data = await resp.json();\n console.log(data);\n };\n createSite();\n});<\/code><\/pre>\nEnvoyez un message \u00e0 Slack avec l’URL du webhook entrant<\/h3>\n
202<\/code>, cela signifie que la cr\u00e9ation du site a commenc\u00e9 et que vous pouvez envoyer un message \u00e0 Slack \u00e0 l’aide de l’URL Webhooks entrante. Pour cela, vous pouvez utiliser votre biblioth\u00e8que de requ\u00eates HTTP pr\u00e9f\u00e9r\u00e9e (par exemple Axios<\/a>) ou une m\u00e9thode pour envoyer une requ\u00eate POST \u00e0 Slack. Utilisons la m\u00e9thode fetch()<\/code>:<\/p>\nif (data.status === 202) {\n fetch(\n `https:\/\/hooks.slack.com\/services\/${process.env.SLACK_WEBHOOK_ID}`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n text: 'Hello, world.',\n }),\n }\n );\n}<\/code><\/pre>\n![\"Hello](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/message-sent-with-incoming-webhooks.jpg\")
Personnalisation des messages Slack<\/h3>\n
const message = {\n blocks: [\n {\n type: 'section',\n text: {\n type: 'mrkdwn',\n 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}.`,\n },\n },\n {\n type: 'divider',\n },\n {\n type: 'section',\n text: {\n type: 'mrkdwn',\n text: \"_Here are your site's details:_\",\n },\n },\n {\n type: 'section',\n text: {\n type: 'mrkdwn',\n text: `1. *Site URL:* http:\/\/${req.body.displayName}.kinsta.cloud\/n2. *WP Admin URL:* http:\/\/${req.body.displayName}.kinsta.cloud\/wp-admin\/`,\n },\n },\n ],\n};<\/code><\/pre>\n\n
type: 'section'<\/code> pour indiquer qu’il s’agit d’un bloc de section. \u00c0 l’int\u00e9rieur du bloc de section, la propri\u00e9t\u00e9 text est utilis\u00e9e avec type: 'mrkdwn'<\/code> pour sp\u00e9cifier que le contenu du texte doit \u00eatre interpr\u00e9t\u00e9 au format Markdown. Le contenu textuel r\u00e9el est fourni dans la propri\u00e9t\u00e9 text, et nous utilisons des litt\u00e9raux de mod\u00e8le pour inclure des valeurs dynamiques provenant du formulaire et de la r\u00e9ponse de cr\u00e9ation de site, telles que req.body.displayName<\/code> et data.operation_id<\/code>.<\/li>\ntype: 'divider'<\/code> pour cr\u00e9er le bloc s\u00e9parateur.<\/li>\n<\/ol>\nfetch()<\/code> par le contenu de la variable message :<\/p>\nif (data.status === 202) {\n fetch(\n `https:\/\/hooks.slack.com\/services\/${process.env.SLACK_WEBHOOK_ID}`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(message),\n }\n );\n}<\/code><\/pre>\n![\"Message](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/slack-block-kit-builder-message.jpg\")
G\u00e9rer l’op\u00e9ration de cr\u00e9ation de site avec l’API Kinsta<\/h2>\n
req<\/code>. Par exemple, pour obtenir l’identifiant de l’op\u00e9ration, vous utilisez req.params.operationId<\/code>.<\/p>\nconst KinstaAPIUrl = 'https:\/\/api.kinqsta.com\/v2';\n\napp.get('\/operation\/:displayName\/:operationId', (req, res) => {\n const checkOperation = async () => {\n const operationId = req.params.operationId;\n const resp = await fetch(`${KinstaAPIUrl}\/operations\/${operationId}`, {\n method: 'GET',\n headers: {\n Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n },\n });\n const data = await resp.json();\n res.render('pages\/operation', {\n operationID: req.params.operationId,\n displayName: req.params.displayName,\n operationMessage: data.message,\n });\n };\n checkOperation();\n});<\/code><\/pre>\n<div class=\"container-title\">\n <h1 class=\"title\">Check Site Operation Status<\/h1>\n <p>\n Check the status of your site tools operation via the id. Feel free to copy\n the ID and check in few seconds.\n <\/p>\n<\/div>\n<div class=\"form-container\">\n <div class=\"input-div\">\n <input class=\"form-control\" value=\"<%= operationID %>\" readOnly \/>\n <\/div>\n <button class=\"btn\" type=\"submit\" onclick=\"window.location.reload()\">\n Refresh Operation Status\n <\/button>\n<\/div>\n<div class=\"services\">\n <div class=\"details\">\n <p><%= operationMessage %>..<\/p>\n <\/div>\n<\/div>\n<div class=\"services\">\n <p class=\"description\">\n If message above indicates that \"Operation has successfully finished\", use\n the links below to access your WP admin and the site itself.\n <\/p>\n <div class=\"details\">\n <a\n href=\"http:\/\/<%= displayName %>.kinsta.cloud\/wp-admin\/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n class=\"detail-link\"\n >\n <p>Open WordPress admin<\/p>\n <FiExternalLink \/>\n <\/a>\n <a\n href=\"http:\/\/<%= displayName %>.kinsta.cloud\/\"\n target=\"_blank\"\n rel=\"noreferrer\"\n class=\"detail-link\"\n >\n <p>Open URL<\/p>\n <FiExternalLink \/>\n <\/a>\n <\/div>\n<\/div><\/code><\/pre>\n![\"Page](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/operations-page-1.jpg\")
if (data.status === 202) {\n fetch(\n `https:\/\/hooks.slack.com\/services\/${process.env.SLACK_WEBHOOK_ID}`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(message),\n }\n );\n res.redirect(`\/operation\/${req.body.displayName}\/${data.operation_id}`);\n}<\/code><\/pre>\nD\u00e9ployer votre application Node.js sur Kinsta<\/h2>\n
\n
![\"D\u00e9finissez](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/08\/set-env-mykinsta.jpg\")