Cosa costruiremo<\/h2>\n
Questo tutorial spiega come costruire uno Slackbot (o un’applicazione Slack) che interagisce con l’API di Kinsta<\/a> per recuperare informazioni e inviarle sotto forma di messaggi in tempo reale a un canale Slack designato utilizzando gli Incoming Webhook dell’API di Slack<\/a>.<\/p>\n Per raggiungere questo obiettivo, creeremo un’applicazione Node.js<\/a> con il framework Express<\/a> per creare un’interfaccia utente per la creazione di un sito WordPress<\/a> e integrarla con l’API Kinsta. L’applicazione utilizza un modulo per raccogliere i dettagli di configurazione di un sito WordPress e poi invia al canale Slack specificato un aggiornamento in tempo reale sulle informazioni del sito e i dettagli su come verificarne lo stato di funzionamento.<\/p>\n Per seguire questo progetto, \u00e8 necessario avere i seguenti requisiti:<\/p>\n Per iniziare, creiamo una nuova directory per l’applicazione e inizializziamola con npm:<\/p>\n Dopo aver eseguito il comando Successivamente, installiamo le dipendenze necessarie per il progetto. Le seguenti dipendenze sono essenziali:<\/p>\n Per installare queste dipendenze, eseguiamo il comando seguente:<\/p>\n Inoltre, dovremo installare le seguenti dipendenze dev per rendere pi\u00f9 semplice la build e il test del progetto Node.js:<\/p>\n Per installare queste dipendenze dev, eseguiamo il comando seguente:<\/p>\n Una volta che il package.json<\/strong> \u00e8 stato inizializzato e tutte le dipendenze sono state installate, creiamo un nuovo file, ad esempio app.js<\/strong>.<\/p>\n Ecco una configurazione predefinita per il file app.js<\/strong>, in cui importare i moduli necessari e impostare l’esecuzione su una porta specifica:<\/p>\n Per eseguire l’applicazione Node.js, eseguiamo il comando:<\/p>\n Tuttavia, eseguire un’applicazione come questa significa riavviarla manualmente ogni volta che si apportano delle modifiche al progetto. Per ovviare a questo inconveniente, utilizziamo Ora, eseguiamo l’applicazione Node.js con riavvio automatico utilizzando il seguente comando:<\/p>\n In questo tutorial stiamo realizzando un’applicazione Node.js che visualizzer\u00e0 contenuti sul browser. A tal fine, express.js viene utilizzato come framework web e EJS (Embedded JavaScript) come motore di template.<\/p>\n Per impostare EJS come motore di visualizzazione, aggiungiamo la seguente riga al file app.js<\/strong>. In questo modo sar\u00e0 possibile eseguire i file di Ora che Express \u00e8 configurato con EJS, definiamo le route. Nelle applicazioni web, le route determinano il modo in cui l’applicazione risponde alle diverse richieste HTTP (come GET o POST) e specificano le azioni da intraprendere quando si accede a un URL specifico.<\/p>\n Ad esempio, creiamo una route che carichi una pagina specifica quando un utente naviga verso la pagina indice<\/strong> ( Nel codice precedente, quando un utente accede all’indice<\/strong> dell’applicazione, il server eseguir\u00e0 la funzione di callback specificata come secondo parametro. All’interno di questa funzione di callback, possiamo gestire la logica per il rendering di un modello EJS o per l’invio di un contenuto HTML<\/a> da visualizzare nella homepage.<\/p>\n Possiamo utilizzare il metodo Quando eseguiamo l’applicazione, nella pagina index<\/strong> verr\u00e0 visualizzato “Hello World”.<\/p>\n Questo tutorial si concentra sulla logica e include dei file di partenza, cos\u00ec non dovrete preoccuparvi di creare dei template da zero. Seguiamo questi passaggi per iniziare:<\/p>\n Nel codice di partenza abbiamo due cartelle principali: public<\/strong> e views<\/strong>. La cartella public<\/strong> contiene tutte le risorse statiche (file CSS e immagini). Vengono aggiunti al template come file statici:<\/p>\n Nella cartella views<\/strong> sono presenti il file layout.ejs<\/strong> e due cartelle: pages<\/strong> e partials<\/strong>. Il file layout.ejs<\/strong> contiene il layout generale del progetto, quindi non sar\u00e0 necessario ripetere del codice ricorrente per tutte le pagine. Importiamo la libreria La cartella pages<\/strong> contiene i file di percorso (index.ejs<\/strong> e operation.ejs<\/strong>), mentre la cartella partials<\/strong> contiene i componenti (header.ejs<\/strong> e footer.ejs<\/strong>). Aggiungiamoli al layout in questo modo:<\/p>\n Quando eseguiremo l’applicazione Node.js<\/a>, l’interfaccia utente verr\u00e0 caricata, ma dovremo aggiungere la logica a questa applicazione per inviare i dati del modulo all’API di Kinsta e inviare informazioni sul sito a Slack quando l’operazione inizia.<\/p>\n Gli Incoming Webhooks di Slack rappresentano un modo semplice per inviare messaggi da applicazioni esterne a Slack. Per utilizzare gli Incoming Webhook di Slack, creiamo e configuriamo un’applicazione Slack, quindi copiamo l’URL del Webhook per inviare messaggi a Slack in modo programmatico.<\/p>\n Creiamo una nuova applicazione Slack seguendo i passaggi qui sotto:<\/p>\n Una volta creata l’applicazione Slack, possiamo attivare gli Incoming Webhook navigando su Features<\/strong> e selezionando Incoming Webhook<\/strong>. Attiviamo l’interruttore per abilitare gli Incoming Webhook per l’applicazione.<\/p>\n Scorriamo verso il basso fino alla sezione Webhook URLs for Your Workspace<\/strong> e clicchiamo su Add New Webhook to Workspace<\/strong>. Ci verr\u00e0 chiesto di scegliere un canale dove inviare i messaggi. Selezioniamo il canale desiderato e facciamo clic su Authorize<\/strong>.<\/p>\n Dopo l’autorizzazione, verr\u00e0 fornito un URL Webhook per il canale selezionato. Questo URL \u00e8 quello che useremo per inviare i messaggi a Slack in modo programmatico. Ecco come si presenta un URL Webhook:<\/p>\n Questo Webhook \u00e8 specifico per un singolo utente e un singolo canale. Teniamolo al sicuro, perch\u00e9 funge da token di autenticazione per l’applicazione. Possiamo memorizzare i codici univoci dopo Ora che l’interfaccia dell’applicazione Node.js \u00e8 stata configurata e lo Slackbot \u00e8 stato creato con successo (insieme all’URL del WebHook), \u00e8 il momento di gestire la logica.<\/p>\n Nella pagina index<\/strong>, abbiamo un modulo che invier\u00e0 i dati all’API di Kinsta per creare un nuovo sito WordPress. Per farlo funzionare, dobbiamo creare una richiesta POST dalla pagina indice. Assicuriamoci che il modulo abbia un metodo Per recuperare i dati da un modulo in Node.js, dovremo utilizzare il seguente middleware:<\/p>\n Ora possiamo accedere ai valori del modulo utilizzando Quando eseguiamo il codice, i dati del modulo vengono visualizzati dopo che l’utente avr\u00e0 compilato il modulo e cliccato sul pulsante Submit<\/strong>.<\/p>\n Per creare un sito WordPress con l’API di Kinsta in Node.js, possiamo utilizzare il metodo Per eseguire qualsiasi operazione con l’API di Kinsta, dobbiamo creare una chiave API<\/a>. Per generare una chiave API:<\/p>\n Assicuriamoci di copiare la chiave API generata e di conservarla in modo sicuro, perch\u00e9 sar\u00e0 visibile solo in questo momento. Per questo progetto, creiamo un file .env<\/strong> nella directory principale e salviamo la chiave API come Inoltre, per creare un sito WordPress utilizzando l’API di Kinsta, avremo bisogno dell’ID Azienda (che si trova in MyKinsta alla voce Azienda<\/strong> > Dettagli di fatturazione<\/strong> > ID Azienda<\/strong>). Memorizziamo anche questo ID nel file .env<\/strong>, in modo da poter accedere a queste variabili d’ambiente tramite Per procedere alla creazione di un sito WordPress tramite l’API di Kinsta, inviamo una richiesta POST all’endpoint Eseguendo il codice qui sopra, creeremo un nuovo sito WordPress con l’API di Kinsta. Ma questo non \u00e8 il nostro obiettivo principale. Il nostro obiettivo \u00e8, invece, inviare un messaggio a Slack contenente informazioni sul sito quando l’operazione di creazione del sito \u00e8 andata a buon fine.<\/p>\n Per farlo, creiamo un’istruzione If<\/strong> per verificare lo stato della risposta della richiesta API. Se \u00e8 Eseguiamo il codice qui sopra e compiliamo il modulo di creazione del sito. Se il processo va a buon fine, verr\u00e0 inviato immediatamente un messaggio a Slack.<\/p>\n L’esempio precedente invia un messaggio di testo di base, ma gli Incoming Webhook di Slack supportano molto di pi\u00f9 del semplice testo. Possiamo personalizzare i messaggi per includere allegati, link, immagini, pulsanti e altro ancora.<\/p>\n Uno dei modi per personalizzare i messaggi di Slack \u00e8 utilizzare il Block Kit Builder di Slack<\/a>. Il Block Kit \u00e8 un framework UI fornito da Slack che permette di costruire messaggi ricchi e interattivi con vari elementi di contenuto.<\/p>\n Per questo tutorial, ecco un blocco creato con il Block Kit Builder per formattare correttamente il messaggio e aggiungere alcuni valori dal modulo e dalla risposta alla creazione del sito:<\/p>\n In questo codice, creiamo un oggetto messaggio contenente un array di blocchi. Ogni blocco rappresenta una sezione specifica del messaggio Slack e pu\u00f2 avere diversi tipi di contenuto.<\/p>\n Quando questo messaggio viene inviato a Slack utilizzando l’Incoming Webhook, generer\u00e0 un messaggio informativo e visivamente accattivante nel nostro canale Slack. Il messaggio includer\u00e0 i valori dinamici del modulo (come il nome del sito) e le informazioni della risposta alla creazione del sito, rendendolo un messaggio altamente personalizzato.<\/p>\n Per inviare questo messaggio personalizzato, sostituiamo l’oggetto nel corpo del sito Nel messaggio inviato a Slack, viene creato un link con l’ID dell’operazione e il nome visualizzato. Possiamo creare un nuovo percorso per la pagina Operations<\/strong> e utilizzare questi dati per verificare lo stato dell’operazione.<\/p>\n In Express, possiamo accedere ai parametri URL con il parametro Con il codice qui sopra, cliccando sul link in Slack verr\u00e0 effettuata una richiesta all’API di Kinsta per verificare lo stato di funzionamento del sito. Aggiorniamo il file operation.ejs<\/strong> per aggiungere i dati dinamici:<\/p>\n Un’ultima cosa: possiamo utilizzare il metodo di reindirizzamento per navigare alla pagina delle operazioni quando inizia il processo di creazione di un sito:<\/p>\n Il codice sorgente completo di questo progetto \u00e8 disponibile nel branch principale di questo repository GitHub<\/a>.<\/p>\n \u00c8 possibile distribuire facilmente questa applicazione Node.js sulla piattaforma di Hosting di Applicazioni<\/a> di Kinsta. Basta inviare il codice al proprio provider Git preferito (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>) e poi seguire i passaggi qui sotto:<\/p>\n Infine, non \u00e8 sicuro inviare le chiavi API a host pubblici come un provider Git. Durante l’hosting, \u00e8 possibile aggiungerle come variabili d’ambiente<\/a> utilizzando lo stesso nome e valore della variabile specificata nel file .env<\/strong>.<\/p>\n Una volta avviata la distribuzione dell’applicazione, questa verr\u00e0 in genere creata e distribuita in pochi minuti. Verr\u00e0 fornito un link alla nuova applicazione, che avr\u00e0 il seguente aspetto: https:\/\/site-builder-nodejs-xvsph.kinsta.app.<\/strong><\/p>\n![\"Gif](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/kinsta-services-slack.gif\")
Prerequisiti<\/h3>\n
\n
Impostazione dell’ambiente di sviluppo<\/h2>\n
mkdir my-express-app \ncd my-express-app \nnpm init -y<\/code><\/pre>\nnpm init -y<\/code>, verr\u00e0 creato un nuovo file package.json<\/strong> nella directory del progetto con valori predefiniti. Questo file contiene informazioni importanti sul progetto e sulle sue dipendenze.<\/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>, che abbiamo gi\u00e0 installato. Configuriamolo nel file package.json<\/strong> creando un comando script:<\/p>\n \"scripts\": {\n \"dev\": \"nodemon app.js\"\n },<\/code><\/pre>\nnpm run dev<\/code><\/pre>\nPrimi passi con Express e EJS Templating<\/h3>\n
.ejs<\/code>:<\/p>\n\/\/ Use EJS as the view engine \napp.set('view engine', 'ejs');<\/code><\/pre>\n\/<\/code>). Per farlo, utilizziamo il metodo di richiesta 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> per eseguire il rendering di un modello EJS o res.send()<\/code> per inviare un semplice contenuto HTML.<\/p>\napp.get('\/', (req, res) => {\n res.send('Hello World');\n});<\/code><\/pre>\nTemplate 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> nel file app.js<\/strong> e configuriamola:<\/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>\nPrimi passi con gli Incoming Webhook di Slack<\/h2>\n
Configurare un’applicazione Slack e ottenere l’URL del Webhook<\/h3>\n
\n
https:\/\/hooks.slack.com\/services\/T00000000\/B00000000\/XXXXXXXXXXXXXXXXXXXXXXXX<\/code><\/pre>\n\/services\/<\/code> nel file .env<\/strong>. Verr\u00e0 inoltre richiesto di reinstallare l’app nello spazio di lavoro affinch\u00e9 le modifiche abbiano effetto.<\/p>\nInviare messaggi a Slack con Node.js e Kinsta API<\/h2>\n
Recuperare i dati del modulo in Node.js<\/h3>\n
POST<\/code> e che i campi di input abbiano un attributo name<\/code>, che verr\u00e0 utilizzato nel file 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>. Ad esempio, req.body.displayName<\/code> ci fornir\u00e0 il nome visualizzato inviato tramite il modulo. Registriamo i dati complessivi del modulo:<\/p>\napp.post('\/', (req, res) => {\n console.log(req.body);\n});<\/code><\/pre>\n![\"Dettagli](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/req-details-node-js.jpg\")
Creare un sito con l’API di Kinsta in Node.js<\/h3>\n
fetch()<\/code>, che ora \u00e8 supportato e funziona in modo efficiente nelle ultime versioni di Node.js<\/a>.<\/p>\n\n
KINSTA_API_KEY<\/code>.<\/p>\nprocess.env<\/code>. Per abilitare questa funzionalit\u00e0, assicuriamoci di configurare la dipendenza dotenv<\/code> all’inizio del file app.js<\/strong> in questo modo:<\/p>\nrequire('dotenv').config();<\/code><\/pre>\n\/sites<\/a><\/code> con i dati necessari forniti nell’oggetto req.body<\/code>:<\/p>\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.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>\nInviare un messaggio a Slack con l’URL dell’Incoming Webhook<\/h3>\n
202<\/code>, significa che “la creazione del sito \u00e8 iniziata” e possiamo inviare un messaggio a Slack utilizzando l’URL Incoming Webhook. A tal fine, possiamo utilizzare la libreria di richieste HTTP che preferiamo (ad esempio Axios<\/a>) o il metodo che preferiamo per inviare una richiesta POST a Slack. Utilizziamo il metodo 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:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/message-sent-with-incoming-webhooks.jpg\")
Personalizzare i messaggi 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> per indicare che si tratta di un blocco di sezione. All’interno del blocco di sezione, la propriet\u00e0 text viene utilizzata con type: 'mrkdwn'<\/code> per specificare che il contenuto del testo deve essere interpretato in formato Markdown. Il contenuto effettivo del testo viene fornito nella propriet\u00e0 text e si utilizzano i template literals per includere i valori dinamici del modulo e della risposta alla creazione del sito, come req.body.displayName<\/code> e data.operation_id<\/code>.<\/li>\ntype: 'divider'<\/code> per creare il blocco divisorio.<\/li>\n<\/ol>\nfetch()<\/code> con il contenuto della variabile messaggio:<\/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![\"Messaggio](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/slack-block-kit-builder-message.jpg\")
Gestire l’operazione di creazione del sito con l’API di Kinsta<\/h2>\n
req<\/code>. Ad esempio, per ottenere l’ID dell’operazione, usiamo req.params.operationId<\/code>.<\/p>\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.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![\"Pagina](\"https:\/\/kinsta.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>\nDistribuire un’applicazione Node.js su Kinsta<\/h2>\n
\n
![\"Impostare](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/set-env-mykinsta.jpg\")