Wat je bouwt<\/h2>\n
Deze tutorial legt uit hoe je een Slackbot (of Slack applicatie) bouwt die interactie heeft met de Kinsta API<\/a> om informatie op te halen en deze als realtime berichten af te leveren aan een aangewezen Slack kanaal met behulp van de Slack API Incoming Webhooks<\/a>.<\/p>\n Om dit te doen maak je een Node.js<\/a> applicatie met het Express<\/a> framework om een UI te maken voor het maken van WordPress<\/a> sites en deze te integreren met de Kinsta API. De applicatie gebruikt een formulier om configuratiegegevens voor je WordPress site te verzamelen en stuurt vervolgens een real-time update over de informatie van de site en details over hoe je de operationele status kunt controleren naar het opgegeven Slack kanaal.<\/p>\n Om dit project te kunnen volgen, moet je over het volgende beschikken:<\/p>\n Om te beginnen maak je een nieuwe map aan voor je applicatie en initialiseer je deze met npm:<\/p>\n Na het uitvoeren van het commando Installeer vervolgens de noodzakelijke dependencies voor je project. De volgende dependencies zijn essentieel:<\/p>\n Voer het onderstaande commando uit om deze dependencies te installeren:<\/p>\n Daarnaast moet je de volgende dev dependencies installeren om het bouwen en testen van je Node.js project te vergemakkelijken:<\/p>\n Voer het onderstaande commando uit om deze dev dependencies te installeren:<\/p>\n Zodra je package.json<\/strong> is ge\u00efnitialiseerd en alle dependencies zijn ge\u00efnstalleerd, maak je een nieuw bestand, bijvoorbeeld app.js<\/strong>.<\/p>\n Hier is een standaardopzet voor je app.js<\/strong> bestand, waarin je de benodigde modules importeert en instelt dat het op een specifieke poort moet draaien:<\/p>\n Voer het volgende commando uit om je Node.js applicatie uit te voeren:<\/p>\n Het draaien van een applicatie als deze betekent echter dat je deze handmatig opnieuw moet starten elke keer dat je wijzigingen aanbrengt in je project. Om dit ongemak te omzeilen, kun je Draai nu je Node.js applicatie met automatisch herstarten met het volgende commando:<\/p>\n In deze tutorial bouw je een Node.js applicatie die inhoud weergeeft in de browser. Om dit te bereiken wordt express.js gebruikt als webframework en EJS (Embedded JavaScript) als templating engine.<\/p>\n Om EJS in te stellen als je view engine, voeg je de volgende regel toe aan je app.js<\/strong> bestand. Dit maakt het mogelijk om Nu Express is geconfigureerd met EJS, definieer je routes. In webapplicaties bepalen routes hoe de applicatie reageert op verschillende HTTP verzoeken (zoals GET of POST) en specificeren ze de acties die moeten worden ondernomen wanneer een specifieke URL wordt opgevraagd.<\/p>\n Maak bijvoorbeeld een route die een specifieke pagina laadt wanneer een gebruiker naar de indexpagina<\/strong> navigeert ( In de bovenstaande code zal de server, wanneer een gebruiker de index<\/strong> van je applicatie opent, de callback-functie uitvoeren die als tweede parameter is opgegeven. Binnen deze callback-functie kun je de logica afhandelen om een EJS template te renderen of wat HTML<\/a> content te sturen die op de homepage moet worden weergegeven.<\/p>\n Je kunt de methode Als je je applicatie uitvoert, wordt “Hello World” weergegeven op de index <\/strong>pagina.<\/p>\n Deze tutorial richt zich op de logica en bevat startbestanden, zodat je je geen zorgen hoeft te maken over het maken van templates vanaf nul. Volg deze stappen om aan de slag te gaan:<\/p>\n In de startcode hebben we twee belangrijke mappen: public<\/strong> en views<\/strong>. De public<\/strong> map bevat alle statische onderdelen (CSS bestanden en afbeeldingen). Ze worden aan de template toegevoegd als statische bestanden:<\/p>\n In de views<\/strong> map staat het layout.ejs<\/strong> bestand en twee mappen: pages<\/strong> en partials<\/strong>. Het layout.ejs<\/strong> bestand bevat de algemene layout van dit project, zodat je niet voor alle pagina’s een aantal terugkerende code hoeft te herhalen. Importeer de De map pages<\/strong> bevat de routebestanden (index.ejs<\/strong> en operation.ejs<\/strong>), terwijl de map partials<\/strong> componenten bevat (header.ejs<\/strong> en footer.ejs<\/strong>). Voeg ze als volgt toe aan de layout:<\/p>\n Wanneer je je Node.js applicatie uitvoert<\/a>, wordt de UI geladen, maar je moet logica aan deze applicatie toevoegen om de formuliergegevens naar de Kinsta API te sturen en informatie over de site naar Slack te sturen wanneer de operatie start.<\/p>\n Slack Incoming Webhooks bieden een eenvoudige manier om berichten van externe applicaties naar Slack te sturen. Om Slack Incoming Webhooks te gebruiken, maak en configureer je een Slack applicatie en kopieer je vervolgens je Webhook URL om berichten programmatisch naar Slack te sturen.<\/p>\n Maak een nieuwe Slack applicatie aan door deze stappen te volgen:<\/p>\n Zodra je Slack-applicatie is gemaakt, kun je inkomende Webhooks inschakelen door te navigeren naar Features <\/strong>en Incoming Webhooks<\/strong> te selecteren. Schakel de schakelaar in om Incoming Webhooks in te schakelen voor je app.<\/p>\n Scroll naar beneden naar de sectie Webhook URLs for your workspace <\/strong>en klik op Add new webhook to workspace<\/strong>. Je wordt gevraagd om een kanaal te kiezen waar de berichten naartoe worden gestuurd. Selecteer het gewenste kanaal en klik op Authorize<\/strong>.<\/p>\n Na autorisatie krijg je een Webhook URL voor het geselecteerde kanaal. Deze URL gebruik je om berichten programmatisch naar Slack te sturen. Zo ziet een Webhook URL eruit:<\/p>\n Deze Webhook is specifiek voor \u00e9\u00e9n gebruiker en \u00e9\u00e9n kanaal. Houd het veilig, want het fungeert als een authenticatietoken voor je app. Je kunt de unieke codes na Nu de interface van je Node.js applicatie is ingesteld en de Slackbot met succes is aangemaakt (samen met je WebHook URL), is het tijd om de logica af te handelen.<\/p>\n Op de index <\/strong>pagina heb je een formulier dat gegevens naar de Kinsta API stuurt om een nieuwe WordPress site te maken. Om dit te laten werken, moet je een POST verzoek maken vanaf de index pagina. Zorg ervoor dat je formulier een methode Om gegevens van een formulier op te halen in Node.js, moet je de volgende middleware gebruiken:<\/p>\n Nu kun je de waarden van je formulier opvragen met Als je je code uitvoert, worden de formuliergegevens weergegeven nadat je het formulier hebt ingevuld en op de knop Submit<\/strong> hebt geklikt.<\/p>\n Om een WordPress site te maken met de Kinsta API in Node.js kun je de methode Om een bewerking met de Kinsta API uit te voeren, moet je een API sleutel<\/a> aanmaken. Om een API sleutel te genereren:<\/p>\n Zorg ervoor dat je de gegenereerde API sleutel kopieert en veilig opslaat, want hij zal alleen op dit moment zichtbaar zijn. Maak voor dit project een .env<\/strong> bestand aan in je root directory en sla de API sleutel op als Om een WordPress site te maken met behulp van de Kinsta API, heb je bovendien je Bedrijfs-ID nodig (die je kunt vinden in MyKinsta onder Bedrijf<\/strong> > Factureringsgegevens<\/strong> > Bedrijfs-ID<\/strong>). Sla deze ID ook op in het .env<\/strong> bestand, zodat je toegang hebt tot deze omgevingsvariabelen via Om verder te gaan met het maken van een WordPress site via de Kinsta API, stuur je een POST verzoek naar het Door de bovenstaande code uit te voeren, maak je een nieuwe WordPress site met Kinsta API. Maar dit is niet het hoofddoel. Het doel is om een bericht naar Slack te sturen met informatie over de site als het maken van de site is gelukt.<\/p>\n Om dit te doen, maak je een If<\/strong> statement om de respons-status van het API verzoek te controleren. Als deze Voer de bovenstaande code uit en vul het formulier voor het maken van de site in. Als het proces succesvol is, wordt er direct een bericht naar Slack gestuurd.<\/p>\n Het bovenstaande voorbeeld stuurt een eenvoudig tekstbericht, maar Slack Incoming Webhooks ondersteunen veel meer dan eenvoudige tekst. Je kunt je berichten aanpassen met bijlagen, links, afbeeldingen, knoppen en meer.<\/p>\n Een manier om Slack berichten aan te passen is door gebruik te maken van de Slack Block Kit Builder<\/a>. De Block Kit is een UI framework van Slack waarmee je rijke en interactieve berichten kunt bouwen met verschillende contentelementen.<\/p>\n Voor deze tutorial is hier een blok gemaakt met de Block Kit Builder om het bericht goed op te maken en een aantal waarden toe te voegen uit het formulier en het antwoord voor het maken van de site:<\/p>\n In deze code maak je een berichtobject met een array van blokken. Elk blok vertegenwoordigt een specifiek deel van het Slack bericht en kan verschillende soorten inhoud hebben.<\/p>\n Wanneer dit bericht naar Slack wordt verzonden met de Incoming Webhook, genereert het een visueel aantrekkelijk en informatief bericht in je Slack kanaal. Het bericht bevat dynamische waarden uit het formulier (zoals de naam van de site) en informatie uit het antwoord op het maken van de site, waardoor het een zeer aangepast en gepersonaliseerd bericht wordt.<\/p>\n Om dit aangepaste bericht te versturen, vervang je het object in de body van de In het bericht dat naar Slack wordt gestuurd, wordt een link gemaakt met de ID van de operatie en de weergavenaam. Je kunt een nieuwe route maken voor de Operations<\/strong> pagina om deze gegevens te gebruiken om de status van de operatie te controleren.<\/p>\n In Express kun je URL parameters opvragen met de parameter Met de bovenstaande code zal klikken op de link in Slack een verzoek doen aan de Kinsta API om de operationele status van je site te controleren. Werk het operation.ejs<\/strong> bestand bij om dynamische gegevens toe te voegen:<\/p>\n Tot slot: je kunt de redirect-methode gebruiken om naar de operations pagina te navigeren als het proces voor het maken van een site start:<\/p>\n De volledige sourcecode voor dit project is beschikbaar op de main branch van deze GitHub repository<\/a>.<\/p>\n Je kunt deze Node.js applicatie eenvoudig deployen naar Kinsta’s Applicatie Hosting<\/a> platform. Het enige wat je hoeft te doen is je code pushen naar de Git provider van je voorkeur (Bitbucket<\/a>, GitHub<\/a> of GitLab<\/a>). Volg dan deze stappen:<\/p>\n Tenslotte is het niet veilig om API sleutels naar publieke hosts zoals je Git provider te sturen. Bij het hosten kun je ze als omgevingsvariabelen<\/a> toevoegen met dezelfde variabelennaam en waarde die in het .env<\/strong> bestand zijn gespecificeerd.<\/p>\n Zodra je de deployment van je applicatie start, zal deze normaal gesproken binnen een paar minuten gebouwd en gedeployd worden. Je krijgt een link naar je nieuwe applicatie, die er als volgt uitziet: https:\/\/site-builder-nodejs-xvsph.kinsta.app<\/strong>.<\/p>\n![\"Gif](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/kinsta-services-slack.gif\")
Vereisten<\/h3>\n
\n
De ontwikkelomgeving instellen<\/h2>\n
mkdir my-express-app \ncd my-express-app \nnpm init -y<\/code><\/pre>\nnpm init -y<\/code> wordt er een nieuw package.json<\/strong> bestand aangemaakt in de map van je project met standaardwaarden. Dit bestand bevat belangrijke informatie over je project en de dependencies.<\/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> gebruiken, dat je al hebt ge\u00efnstalleerd. Configureer het in je package.json<\/strong> bestand door een script commando te maken:<\/p>\n \"scripts\": {\n \"dev\": \"nodemon app.js\"\n },<\/code><\/pre>\nnpm run dev<\/code><\/pre>\nAan de slag met Express en EJS templating<\/h3>\n
.ejs<\/code> bestanden uit te voeren:<\/p>\n\/\/ Use EJS as the view engine \napp.set('view engine', 'ejs');<\/code><\/pre>\n\/<\/code>). Gebruik hiervoor de GET verzoekmethode.<\/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> gebruiken om een EJS template te renderen of res.send()<\/code> gebruiken om eenvoudige HTML inhoud te versturen.<\/p>\napp.get('\/', (req, res) => {\n res.send('Hello World');\n});<\/code><\/pre>\nEJS templating<\/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> bibliotheek in het app.js<\/strong> bestand en configureer het:<\/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>\nAan de slag met Slack Incoming Webhooks<\/h2>\n
Een Slack app maken en Webhook URL verkrijgen<\/h3>\n
\n
https:\/\/hooks.slack.com\/services\/T00000000\/B00000000\/XXXXXXXXXXXXXXXXXXXXXXXX<\/code><\/pre>\n\/services\/<\/code> opslaan in je .env<\/strong> bestand. Je wordt ook gevraagd om de app opnieuw te installeren op je workspace om de wijzigingen door te voeren.<\/p>\nBerichten naar Slack sturen met Node.js en Kinsta API<\/h2>\n
Formuliergegevens ophalen in Node.js<\/h3>\n
POST<\/code> heeft en dat de invoervelden een name<\/code> attribuut hebben, dat zal worden gebruikt in het app.js<\/strong> bestand.<\/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>. req.body.displayName<\/code> geeft je bijvoorbeeld de weergavenaam die via het formulier is verzonden. Laten we de totale formuliergegevens loggen:<\/p>\napp.post('\/', (req, res) => {\n console.log(req.body);\n});<\/code><\/pre>\n![\"Formuliergegevens](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/req-details-node-js.jpg\")
Site maken met Kinsta API in Node.js<\/h3>\n
fetch()<\/code> gebruiken, die nu wordt ondersteund en effici\u00ebnt werkt in de nieuwste Node.js versies<\/a>.<\/p>\n\n
KINSTA_API_KEY<\/code>.<\/p>\nprocess.env<\/code>. Om deze functionaliteit in te schakelen, moet je de dotenv<\/code> dependency bovenaan je app.js<\/strong> bestand als volgt configureren:<\/p>\nrequire('dotenv').config();<\/code><\/pre>\n\/sites<\/a><\/code> endpoint, met de benodigde gegevens in het req.body<\/code> object:<\/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>\nEen bericht sturen naar Slack met de Incoming Webhook URL<\/h3>\n
202<\/code> is, betekent dit “sitecreatie is gestart” en kun je een bericht naar Slack sturen met de inkomende Webhooks URL. Om dit te bereiken kun je de HTTP verzoekbibliotheek van je voorkeur gebruiken (bijv. Axios<\/a>) of een methode om een POST verzoek naar Slack te sturen. Laten we de methode fetch()<\/code> gebruiken:<\/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\")
Slack berichten aanpassen<\/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> om aan te geven dat het om een sectieblok gaat. Binnen het sectieblok wordt de text property gebruikt met type: 'mrkdwn'<\/code> om aan te geven dat de inhoud van de tekst moet worden ge\u00efnterpreteerd als Markdown format. De daadwerkelijke inhoud van de tekst staat in de text property, en we gebruiken template-literals om dynamische waarden van het formulier en de site creation response op te nemen, zoals req.body.displayName<\/code> en data.operation_id<\/code>.<\/li>\ntype: 'divider'<\/code> om het scheidingsblok te maken.<\/li>\n<\/ol>\nfetch()<\/code> door de inhoud van de berichtvariabele:<\/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![\"Slack](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/slack-block-kit-builder-message.jpg\")
Site-aanmaak afhandelen met Kinsta API<\/h2>\n
req<\/code>. Om bijvoorbeeld het ID van de operatie op te vragen, gebruik je 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![\"Operation](\"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>\nJe Node.js applicatie deployen naar Kinsta<\/h2>\n
\n
![\"Stel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/set-env-mykinsta.jpg\")