La chiave per ottenere un vantaggio competitivo per le moderne agenzie WordPress non sta più solo nello scrivere codice di alta qualità. Le agenzie orientate alla crescita automatizzano le attività ripetitive, riducono i costi operativi e i tempi di immissione sul mercato e offrono ai clienti servizi più personalizzati.

Integrare strumenti di intelligenza artificiale nei processi di produzione è fondamentale per le agenzie che vogliono automatizzare i propri flussi di lavoro. In questo contesto, il Vibe Coding — il nuovo paradigma di sviluppo basato sull’intelligenza artificiale — sta guadagnando sempre più popolarità ogni giorno.

Il Vibe Coding non è però un modo facile per scrivere codice. Anche se è vero che non servono anni di esperienza per trarre vantaggio dall’approccio Vibe Coding, è fondamentale avere una solida conoscenza della programmazione e dei linguaggi che usi. E non è tutto. Oltre alle tradizionali competenze di programmazione, oggi è fondamentale sviluppare una serie più ampia di capacità. Sapere come utilizzare gli strumenti basati sull’AI più potenti è sicuramente una di queste.

Anche tu non vedi l’ora di applicare il Vibe Coding ai flussi di lavoro WordPress della tua agenzia? Continua a leggere.

Flussi di lavoro WordPress con Vibe Coding

Se non l’hai ancora adottato, il Vibe Coding è una metodologia di sviluppo orientata all’efficienza e all’ottimizzazione delle risorse. Con il Vibe Coding, smetti di scrivere fisicamente righe di codice e passi a un livello più alto di astrazione: il livello dell’intento. Tu, in qualità di developer, definisci l’architettura, la logica e i requisiti tecnici e di business di un progetto web, delegando la codifica vera e propria all’agente AI.

Adottare l’approccio Vibe all’automazione dei processi porta vantaggi significativi: riduzione del time-to-market, democratizzazione dell’automazione, flessibilità e adattabilità dei processi. Questi vantaggi si traducono in maggiore efficienza e scalabilità. Grazie all’automazione dei flussi di lavoro e all’introduzione di Vibe Coding, le agenzie WordPress possono espandersi più facilmente perché l’acquisizione di nuovi clienti non aumenta il carico di lavoro né i costi generali.

Prima di festeggiare, però, devi sapere che il Vibe Coding non è una panacea che produce magicamente codice ben strutturato, gestibile e che funziona sempre come previsto. Adottare questo nuovo paradigma richiede di capire come funzionano gli agenti AI e deve essere progettato secondo principi e best practice che lo rendano un approccio affidabile per un’agenzia WordPress.

Nelle prossime sezioni, ci immergeremo nella creazione di un flusso di lavoro automatizzato per l’inserimento di un nuovo progetto WordPress, seguendo un approccio pratico basato su un caso d’uso reale: vedremo come clonare un modello di sito WordPress preconfigurato ospitato su Kinsta utilizzando GitHub Copilot e l’API di Kinsta.

Speriamo che questo articolo ti aiuti a capire i vantaggi dell’automazione e come implementare efficacemente il Vibe Coding nel flusso di lavoro di sviluppo della tua agenzia.

Il tuo kit di strumenti per l’automazione

Per prima cosa, ti servirà un template di sito ospitato su Kinsta. Per questo esempio, abbiamo creato un nuovo sito e installato i temi Astra, GeneratePress e Neve. Abbiamo anche installato Yoast SEO, Starter Templates e altri plugin di supporto per il tema Astra.

La schermata di amministrazione dei temi del sito template
La schermata di amministrazione dei temi del sito template
La schermata di amministrazione dei plugin del sito template
La schermata di amministrazione dei plugin del sito template
La home page del sito template preconfigurato
La home page del sito template preconfigurato

Per creare un clone del sito, dovrai accedere al tuo ambiente di hosting Kinsta tramite l’API di Kinsta. Ti serviranno una chiave API Kinsta, l’ID della tua azienda e l’ID dell’ambiente che vuoi clonare.

Puoi trovare l’ID azienda nell’URL della tua dashboard MyKinsta (il parametro idCompany ) e nella sezione Informazioni sul sito in MyKinsta, andando su Siti > nome del sito > Info. Nella stessa sezione troverai anche l’ID dell’ambiente.

Sezione Informazioni sul sito in MyKinsta
Sezione Informazioni sul sito in MyKinsta

Infine, ti servirà un IDE su cui lavorare. Tra le tante opzioni disponibili ci sono ambienti di sviluppo molto diffusi come Visual Studio Code o Cursor, oppure ambienti di sviluppo incentrati sull’AI come Lovable. Potresti anche usare una piattaforma di prototipazione basata sul web come Google AI Studio, ideale per testare i prompt in un ambiente isolato prima di passare allo sviluppo vero e proprio.

Per questo articolo, abbiamo usato Google AI Studio per la creazione dei prompt e GitHub Copilot in Visual Studio Code per sviluppare l’app. Ecco perché questa configurazione funziona così bene:

  • Ampia diffusione: GitHub Copilot è incredibilmente popolare ed è già una parte fondamentale dello stack tecnologico di molte agenzie WordPress. Sfruttarlo per un progetto di automazione del workflow significa che il tuo team non dovrà perdere tempo a familiarizzare con nuovi strumenti di sviluppo.
  • Accesso diretto al file system: Copilot ha accesso al file system del progetto. Questo gli permette di creare direttamente i file necessari, inclusi gli asset di configurazione, e di scrivere codice in base alle tue richieste.
  • Istruzioni per l’agente: puoi definire regole globali a livello di progetto utilizzando un file di configurazione .github/copilot-instructions.md. L’agente seguirà rigorosamente queste istruzioni di sistema, assicurando che ogni file rispetti gli standard del tuo progetto.

Tenendo a mente queste funzionalità, vediamo come funziona GitHub Copilot.

Scrivere codice con GitHub Copilot: modalità, finestra di contesto e istruzioni per l’agente

Capire come funziona GitHub Copilot è fondamentale per sfruttarne appieno il potenziale. In questa sezione, andremo a familiarizzare con i concetti di base di Copilot.

Modalità di Copilot

Ci sono tre modalità distinte che puoi usare per interagire con GitHub Copilot, ognuna delle quali determina il tipo di conversazione che avrai con il chatbot.

Le tre modalità di GitHub Copilot
Le tre modalità di GitHub Copilot

Plan. Nella modalità Plan, Copilot genera un piano strutturato suddiviso in attività, che viene poi trasferito alla modalità Agent per l’esecuzione (leggi sotto per maggiori dettagli). Questo permette all’agente di rimanere concentrato sugli obiettivi generali del progetto e di monitorarne efficacemente i progressi.

In modalità Plan, Copilot fornisce una roadmap dettagliata, insieme alle fasi di implementazione e verifica. Dopo aver esaminato la proposta, puoi inviare il tuo feedback per apportare le modifiche necessarie. Quando il piano è in linea con le tue esigenze, puoi passare all’implementazione.

La modalità Plan offre una serie completa di strumenti disponibili nella sezione sezioneConfigure Tools, direttamente nella finestra di chat.

Gli strumenti disponibili nella modalità Plan di Copilot
Gli strumenti disponibili nella modalità Plan di Copilot

Agent. Nella modalità Agent, Copilot analizza la tua richiesta, consulta un modello di AI su come risolvere l’attività e si mette al lavoro. Una volta completata la prima iterazione, Copilot esegue un controllo per individuare eventuali errori e determina quali correzioni sono necessarie, che si tratti di modifiche al codice, comandi da terminale o chiamate a strumenti.

Per impostazione predefinita, tutti gli strumenti disponibili sono preselezionati in modalità Agent.

Gli strumenti disponibili nella modalità Agent di Copilot
Gli strumenti disponibili nella modalità Agent di Copilot

Per ulteriori informazioni sugli agenti, consulta la documentazione ufficiale di VS Code.

Ask. La modalità Ask serve per porre domande tramite la finestra di chat. Questa modalità è consigliata per richiedere aiuto e porre domande generali sulla programmazione.

Gli strumenti disponibili nella modalità Ask di Copilot
Gli strumenti disponibili nella modalità Ask di Copilot

Queste tre modalità di GitHub Copilot seguono una sequenza cronologica e logica precisa all’interno del ciclo di vita dello sviluppo di un’applicazione.

Durante la fase iniziale di progettazione dell’architettura del progetto, la modalità Plan ti aiuta a delineare i passaggi logici della roadmap, identificando i file da creare, le dipendenze da installare e l’architettura di base.

Nella fase di scrittura del codice vero e proprio, la modalità Agent si occupa della creazione dei file e della generazione del codice. In questa fase, l’agente diventa autonomo. Il tuo ruolo si trasforma in quello di supervisore: fornisci il feedback necessario per risolvere eventuali blocchi o perfezionare parti specifiche del codice.

La modalità “Ask” torna utile durante la fase di debug. In questa modalità, Copilot ti aiuta a chiarire i dubbi, gestisce le eccezioni e documenta il codice.

Finestra context

Il context, o contesto, è tutto ciò che il modello può vedere mentre elabora una risposta. Include elementi come la cronologia della chat, i file nello spazio di lavoro locale o remoto, le istruzioni di sistema e personalizzate, i risultati degli strumenti e qualsiasi riferimento che aggiungi esplicitamente alla chat.

La qualità delle risposte dipende dal contesto, quindi è fondamentale fornire al modello le informazioni giuste e pertinenti.

Diagramma della finestra di contesto
Diagramma della finestra di contesto (Fonte immagine: VisualStudio.com)

Il modello non ha una memoria illimitata. La finestra di contesto rappresenta la quantità massima di dati — misurata in token (porzioni di parole o codice) — che un LLM può elaborare e “tenere a mente” contemporaneamente durante un singolo ciclo di richiesta e risposta. In VS Code, puoi vedere quanti token sono disponibili nella tua finestra di contesto cliccando sull’icona nell’angolo in basso a destra, accanto alla finestra di chat.

La finestra di contesto di Copilot in VS Code
La finestra di contesto di Copilot in VS Code

La finestra di contesto rappresenta la memoria a breve termine del modello. Se si satura, l’agente potrebbe restituire dati errati o incoerenti. Un rischio ancora maggiore è l’inquinamento del contesto, che si verifica quando la finestra di contesto si riempie di informazioni irrilevanti. In entrambi i casi — sia per saturazione che per inquinamento del contesto — Copilot può generare bug, avere allucinazioni o produrre codice non ottimizzato.

Per evitare di passare ore a cercare di ottenere un codice pulito e privo di bug, è fondamentale mantenere una rigorosa “igiene della chat”. Puoi farlo chiudendo le schede che non ti servono davvero, usando riferimenti espliciti ai file da aggiungere al contesto, compattando la cronologia della chat con /compact, o semplicemente aprendo una finestra di chat nuova di zecca per ricominciare da zero con un contesto pulito.

Istruzioni per l’agente

Le istruzioni per l’agente stabiliscono le regole di comportamento che influenzano direttamente il modo in cui l’agente genera il codice e gestisce le varie attività di sviluppo. Questo ti garantisce di ottenere un codice conforme agli standard della tua azienda, che utilizzi esclusivamente librerie autorizzate o che mantenga completamente al sicuro i dati strategici come le chiavi API.

Invece di inserire manualmente queste direttive in ogni singolo prompt, puoi specificare le tue istruzioni personalizzate in un file Markdown per assicurarti che le risposte siano sempre in linea con i requisiti dell’azienda e del progetto. Se hai più file di istruzioni, VS Code li combina automaticamente e li aggiunge al contesto della chat.

Fornendo istruzioni precise, Copilot non confonderà i nomi dei parametri nelle richieste API e non commetterà errori durante l’elaborazione delle risposte provenienti da un servizio esterno.

Ma non preoccuparti troppo se ti sembra complicato. GitHub Copilot può infatti generare un file di istruzioni al posto tuo. Basta seguire i passaggi descritti nella documentazione ufficiale.

Generare il file di istruzioni per l'Agent in VS Code
Generare il file di istruzioni per l’Agent in VS Code

Ora che abbiamo visto le basi, nella prossima sezione impareremo a sviluppare con Vibe Coding un’applicazione per l’automazione del flusso di lavoro di WordPress basata sull’API di Kinsta utilizzando GitHub Copilot in VS Code. È ora di rimboccarsi le maniche e mettersi al lavoro.

Scrivere con metodo Vibe Coding per un flusso di lavoro di automazione WordPress reale

Proprio come nella programmazione tradizionale, il vibe coding di un progetto avanzato come l’automazione del flusso di lavoro di WordPress comporta una sequenza di fasi logiche durante tutto il ciclo di vita dello sviluppo del software.

Ecco perché abbiamo suddiviso il processo di Vibe Coding di un progetto di automazione del flusso di lavoro di WordPress in una serie di passaggi logici. Esploriamo ogni fase e scopriamo cosa cambia con l’approccio Vibe Coding:

Definizione delle regole

In questa fase, devi definire le direttive generali che stabiliscono i limiti entro cui opererà l’agente. Ciò comporta la creazione di file di contesto che definiscono lo stack tecnologico, le linee guida di sicurezza e i modelli di logging strutturati.

Dopo aver creato una nuova cartella di progetto in VS Code, il primo passo è aprire la chat di Copilot e avviare una conversazione con l’agente per definire il progetto di base. In questa fase iniziale, lavorerai principalmente in modalità “Ask” per determinare il linguaggio più appropriato per il progetto e strutturare una serie di istruzioni per l’agente.

Scegliere il linguaggio per il progetto

Se non hai ancora deciso lo stack tecnologico, la tua prima domanda dovrebbe mirare a scoprire quale sia il linguaggio più adatto al tuo progetto. Per il nostro flusso di lavoro di automazione, abbiamo chiesto a Copilot di elencare i pro e i contro di Node.js rispetto a Python:

Chat Copilot in modalità Ask
Chiedere a Copilot quale tecnologia si adatta meglio al progetto

Copilot ha risposto con un’analisi dettagliata dei pro e dei contro di entrambi i linguaggi e, alla fine, ha consigliato Node.js:

Consigli di Copilot
Copilot ha consigliato di usare Node.js per creare un flusso di lavoro automatizzato su WordPress

Istruzioni per l’agente Architect

Poi abbiamo chiesto a Copilot come strutturare correttamente le istruzioni personalizzate per l’agente, in modo da ridurre al minimo le allucinazioni ed evitare la perdita di contesto:

Chat Copilot in modalità Ask
Abbiamo chiesto a Copilot qual è l’approccio migliore per fornire istruzioni al modello

Copilot ci ha consigliato di suddividere le istruzioni per l’agente in più file. Questo eviterebbe la contaminazione del contesto.

Risposta di Copilot
Copilot ha consigliato un approccio a più file per le istruzioni dell’agente

Dopo aver compreso bene il consiglio di Copilot, siamo passati a pianificare l’architettura delle istruzioni del nostro agente.

Abbiamo cambiato Copilot dalla modalità Ask a quella Plan, chiedendogli di delineare la struttura dei file per il nostro sistema di istruzioni modulare con file separati .md:

Pianificazione dell’architettura delle istruzioni nella chat di Copilot
Pianificazione dell’architettura delle istruzioni nella chat di Copilot

Copilot ha iniziato a delineare i passaggi, fornendo un ragionamento chiaro e ponendo una serie di domande per adattare le regole alla configurazione del nostro progetto.

Interazione con Copilot
Consultare la documentazione dell’API di Kinsta nella chat di Copilot

Abbiamo fornito a Copilot i seguenti link:

https://api-docs.kinsta.com/api-reference/wordpress-sites/get-list-of-company-sites
https://api-docs.kinsta.com/api-reference/wordpress-sites/get-site-by-id
https://api-docs.kinsta.com/api-reference/wordpress-sites/clone-existing-site

Copilot ha suddiviso le fasi di esecuzione, ha spiegato le ragioni tecniche alla base delle sue scelte e ci ha chiesto se fossimo pronti ad applicare le modifiche.

Approvando il piano proposto, la modalità di Copilot passa automaticamente da Plan a Agent. L’agente AI lavora quindi direttamente sul file system locale per creare i file con le istruzioni per l’agente.

L’immagine qui sotto mostra un’anteprima del file copilot-instructions.md:

Un’anteprima del file copilot-instructions.md
Un’anteprima del file copilot-instructions.md

Sviluppo iterativo

Questa è la fase di creazione del codice. L’agente AI genera i file di progetto e gli script, mentre chi sviluppa funge da architetto e direttore del processo. In altre parole, durante questa fase, chiederai a Copilot di creare la struttura e il codice dell’applicazione, fornirai gli input e i feedback necessari, valuterai le opzioni disponibili e prenderai decisioni strategiche.

Il passo successivo nel nostro progetto di automazione del flusso di lavoro di WordPress è inizializzare il progetto Node.js e definire la struttura dei file. Siamo tornati alla modalità Plan e abbiamo chiesto a Copilot di pianificare i passi successivi:

Pianificazione dell’inizializzazione del progetto
Pianificazione dell’inizializzazione del progetto

Copilot ha prodotto un piano dettagliato, insieme a informazioni aggiuntive sui file rilevanti, sui controlli da eseguire e sulle decisioni da prendere. Dopo aver esaminato attentamente la risposta, abbiamo avviato l’implementazione.

Passaggi di inizializzazione nella chat di Copilot
Passaggi di inizializzazione nella chat di Copilot

Se ti sembra ci sia un po’ troppo da fare, non preoccuparti troppo. Chiederai a Copilot di eseguire tutte le operazioni necessarie al posto tuo.

Durante la generazione dei file, Copilot probabilmente ti chiederà un feedback su punti che necessitano di chiarimenti o il tuo permesso prima di procedere con operazioni specifiche. Esamina le richieste e procedi di conseguenza.

Richiesta di autorizzazione di Copilot
Richiesta di autorizzazione di Copilot

Una volta completata un’operazione, Copilot ti dirà cosa fare dopo:

Copilot elenca i passaggi successivi
Copilot elenca i passaggi successivi

La conversazione prosegue con domande e risposte finché Copilot non avrà creato tutti i file e il codice per la tua app. Nel prompt seguente, abbiamo chiesto a Copilot in modalità Plan di generare un modello per il file .env e di impostare i controlli di sicurezza appropriati (fail-fast).

Creazione di un modello di configurazione .env
Creazione di un modello di configurazione .env

L’immagine seguente mostra il file .env.example generato da Copilot:

Il file .env.example fornito da Copilot
Il file .env.example fornito da Copilot

Abbiamo poi chiesto di generare un file index.js che racchiudesse tutta la logica dell’app. Per un’applicazione più avanzata, sarebbe stato meglio suddividere lo script in più file; per questa applicazione, invece, abbiamo preferito tenere tutta la logica in un unico script.

Chiedere a Copilot di creare un file index.js
Chiedere a Copilot di creare un file index.js

È ora di eseguire il nostro script. Prima di iniziare la clonazione del sito, abbiamo creato un file .env basato su .env.example e abbiamo sostituito i segnaposto con i valori effettivi per KINSTA_API_KEY, KINSTA_COMPANY_ID e SOURCE_ENVIRONMENT_ID.

Una volta finito con lo script e le variabili d’ambiente, apri il terminale di VS Code e digita npm start.

Se tutto funziona come previsto, vedrai apparire un nuovo sito con un nome generico in MyKinsta. Se il prompt genera un errore, basta copiare l’errore dal terminale e incollarlo nella chat di Copilot, così l’agente potrà valutarlo, identificarne la causa e proporre le soluzioni appropriate. Potrebbe chiederti ulteriori feedback.

A questo punto, potresti voler aggiungere miglioramenti o nuove funzionalità alla tua app. Nel nostro caso, il nome generico del sito generato dallo script non era l’ideale. Quindi, siamo passati alla seconda iterazione.

Messa a punto dell’applicazione

Dopo aver raggiunto il nostro primo traguardo – clonare automaticamente un sito WordPress ospitato su Kinsta – abbiamo chiesto a Copilot di aggiungere una funzionalità che permettesse agli utenti di specificare un nome personalizzato per il sito al momento dell’esecuzione.

L’endpoint /sites/clone dell’API di Kinsta richiede 3 parametri: company, source_env_id e display_name. Mentre i primi due parametri sono fissati come variabili d’ambiente nel nostro file .env, il parametro display_name viene generato automaticamente dallo script.

Kinsta API playground
Testare una richiesta di clonazione del sito all’interno del playground API di Kinsta

Fornire agli utenti dell’applicazione una variabile d’ambiente di ripiego avrebbe garantito loro maggiore flessibilità, consentendo comunque di passare un parametro aggiuntivo direttamente tramite il comando npm run.

Abbiamo passato questa richiesta a Copilot. L’agente ha implementato le modifiche richieste, modificando sia index.js che .env, e ha fornito la seguente risposta:

Elenco dei comandi nella chat di Copilot
Copilot fornisce un elenco dei comandi disponibili per clonare un sito web

Infine, abbiamo testato la nostra applicazione in diverse condizioni seguendo le istruzioni di Copilot:

  • Abbiamo eseguito npm run senza parametri.
  • Abbiamo impostato un valore predefinito per la costante SITE_NAME nel file .env e abbiamo eseguito nuovamente npm run.
  • Abbiamo aggiunto manualmente il parametro SITE_NAME=your-site-name al comando npm run.
  • Abbiamo eseguito lo script utilizzando entrambe le sintassi: npm start -- --site-name your-site-name e npm start -- --site-name=your-site-name.
Clonare un sito WordPress in MyKinsta
Clonare un sito WordPress in MyKinsta

Spinti da questo ciclo di miglioramento continuo, abbiamo anche integrato una funzione per normalizzare l’input manuale in un nome visualizzato leggibile, pur continuando ad accettare senza problemi valori in stile slug come my-awesome-wordpress-website.

Di conseguenza, sono supportati entrambi i seguenti comandi:

npm start -- --site-name="My Awesome WordPress Website"
npm start -- --site-name=my-awesome-wordpress-website

Se ci hai seguito fin qui, complimenti, hai appena creato la tua primissima app di automazione dei flussi di lavoro con il vibe-coding. Ora controlla i plugin, i temi e il rendering frontend. Se ti vengono in mente altre funzionalità per migliorare il tuo script, continua semplicemente a svilupparlo seguendo l’approccio iterativo descritto sopra.

Controlli di sicurezza “fail-fast”

Per un’app critica che utilizza dati sensibili, come le tue chiavi API, è fondamentale che lo script esegua controlli rigorosi nei punti chiave dell’esecuzione e, in caso di errore, restituisca messaggi chiari sul tipo di errore e interrompa immediatamente l’esecuzione (vedi il prompt qui sopra).

GitHub Copilot ha implementato il “fail-fast” a tre livelli critici:

Convalida dell’ambiente: a questo livello, lo script verifica che le variabili d’ambiente esistano prima di effettuare qualsiasi chiamata API o eseguire qualsiasi attività. L’immagine seguente mostra la spiegazione di Copilot su questo controllo nella chat:

Convalida dell’ambiente
Convalida dell’ambiente

Ovviamente, il tuo codice potrebbe essere diverso da quello mostrato nell’immagine, ma qui ciò che conta è l’approccio.

Convalida della risposta API. Subito dopo l’avvio della clonazione, lo script verifica immediatamente l’esistenza di un ID operazione. Se lo script riceve un ID non valido, interrompe immediatamente l’esecuzione, evitando di effettuare il polling per mezz’ora. Di seguito trovi la spiegazione fornita da Copilot:

Convalida della risposta API
Convalida della risposta API

Propagazione graduale degli errori. Qualsiasi errore in qualsiasi punto della catena (convalida, API, polling) viene segnalato, registrato nei log e interrompe in modo pulito l’esecuzione dello script.

Propagazione graduale degli errori
Propagazione graduale degli errori

L’approccio “fail-fast” offre diversi vantaggi, tra cui:

  • Nessuna chiamata API sprecata
  • Messaggi di errore chiari
  • Capisci subito cosa non va

Per le agenzie WordPress che potrebbero dover scalare un’app come questa e clonare decine di siti in blocco, questo approccio permette di rilevare immediatamente gli errori dello script a qualsiasi livello, impedendo che si trasformino in una cascata di operazioni fallite.

Tuttavia, se la tua applicazione è pensata per essere scalabile, ti conviene implementare un sistema di test unitari.

Test unitari con Jest

Durante la fase di sviluppo, Copilot ha eseguito in modo autonomo diversi test locali, tra cui:

  • npm run check — eseguiti dopo ogni modifica, per individuare errori di sintassi.
  • npm start — eseguiti più volte per osservare le risposte delle API e identificare i bug.
  • npm start 2>&1 | head -30 — eseguiti per acquisire e leggere in tempo reale l’output strutturato dei log.

Sebbene questi test abbiano aiutato Copilot a individuare parecchi bug, sono piuttosto semplici e funzionano davvero solo per un’app semplice. Inoltre, presentano un grosso svantaggio: ogni volta che esegui npm start, attivi un clone del sito. Questo può farti raggiungere rapidamente il limite di capacità del tuo piano, come puoi vedere nell’immagine qui sotto:

Messaggio di errore relativo al numero massimo di installazioni
Hai raggiunto il numero massimo di installazioni

Inoltre, questi test non possono essere eseguiti in una pipeline CI/CD senza esporre le tue credenziali.

Per scalare davvero la tua applicazione, è fondamentale adottare un solido framework di test unitari come Jest.

Invece di inviare ogni volta richieste reali ai server di Kinsta, Jest ti permette di intercettare e simulare le risposte API (mocking). Questo ti consente di testare il comportamento del tuo software in totale isolamento.

Inoltre, dato che le chiamate API sono simulate, Jest ti permette di eseguire l’intera suite di test all’interno di pipeline di automazione come GitHub Actions senza dover toccare le tue credenziali di produzione.

Per rendere Jest operativo nel tuo progetto di automazione, puoi chiedere a Copilot le istruzioni passo passo oppure lasciare che sia lui a occuparsi del lavoro più impegnativo al posto tuo.

Copilot spiega come implementare Jest nel tuo progetto
Copilot spiega come implementare Jest nel tuo progetto
Installare Jest con Copilot
Installare Jest con Copilot

Una volta configurato Jest, puoi eseguire tutti i tuoi test in una volta sola con npm test. Puoi anche scegliere un file specifico o eseguire i test in modalità Watch:

Esempi di test forniti da Copilot
Esempi di test forniti da Copilot

Vale anche la pena notare che Copilot include comandi di chat integrati che ti aiutano con i test unitari con Jest:

  • /tests genera un file di test per il file attualmente aperto. Quando digiti /tests nella chat, Copilot genererà dei test Jest per le funzioni che trova in quel file.
  • @workspace /tests fa la stessa cosa del comando precedente, ma considerando l’intero contesto del progetto.

Mentre chatti con Copilot in modalità Ask, riceverai suggerimenti e consigli per guidarti nei tuoi test unitari:

Il test consigliato da Copilot
Il test consigliato da Copilot

Apri una nuova chat per questo test e assicurati che sia impostata su Agent mode. Poi, incolla il comando fornito in precedenza da Copilot direttamente nella chat:

@workspace /tests for pollUntilComplete and KinstaClient using fetch mocks

Premi Invio e vedrai il ragionamento di Copilot e le operazioni passo dopo passo visualizzarsi nella chat. Ti chiederà di confermare l’esecuzione del comando ogni volta che esegue un test, fino a quando ogni singolo errore non sarà risolto.

Esecuzione dei test in Copilot
Esecuzione dei test in Copilot

Documentazione e distribuzione

Un codice ben documentato è fondamentale per la manutenibilità del codice stesso. Ecco perché abbiamo chiesto a Copilot di generare un file README.md nella directory principale del progetto. Gli abbiamo chiesto di descrivere l’app, specificare i requisiti, spiegare come configurare il file .env, illustrare i diversi modi per avviare l’applicazione e mostrare come eseguire i test.

Abbiamo avviato una nuova chat in modalità Ask, aggiunto i file index.js e package.json al contesto (vedi la scorciatoia di Copilot #filename ) e abbiamo fornito a Copilot il seguente prompt:

chat Copilot
Abbiamo chiesto a Copilot di creare un file README.md in modalità Ask

Copilot ci ha fornito un’anteprima del file README.md. L’abbiamo esaminato attentamente e siamo passati alla modalità Agent per creare il file.

Il file README.md generato da Copilot in VS Code
Il file README.md generato da Copilot in VS Code

Il passo successivo è stato documentare il codice stesso. Con il file index.js aperto, abbiamo selezionato l’intero codice per aggiungerlo al contesto della chat e abbiamo inviato il seguente prompt in modalità Ask:

Un prompt dettagliato per creare documentazione inline
Un prompt dettagliato per creare documentazione inline

Copilot ha aggiornato il file index.js con la documentazione inline senza toccare il codice.

Il blocco JSDoc per la funzione pollUntilComplete
Il blocco JSDoc per la funzione pollUntilComplete

Anche in questo caso, dato che eravamo in modalità Ask, Copilot non aveva il permesso di modificare i nostri file. Quindi, siamo passati alla modalità Agent e abbiamo chiesto a Copilot di aggiornare il file index.js con le modifiche proposte.

L’ultimo passo è distribuire l’applicazione. Ci sono due opzioni principali:

  • Mantenere l’applicazione su un computer locale. Questa soluzione è ideale quando decidi di avviare la creazione del sito manualmente, ad esempio subito dopo che un nuovo cliente ha firmato un contratto.
  • Integrare lo script in una pipeline CI/CD inviando il codice a un repository GitHub. La creazione del sito può quindi essere avviata manualmente o automaticamente in risposta a un evento specifico. Questa soluzione è perfetta se stai lavorando con flussi di lavoro più strutturati e scalabili.

Se scegli la configurazione con il computer locale o con l’utility server, sei a posto. Se invece opti per la pipeline CI/CD più strutturata, puoi farti aiutare da Copilot a scrivere il prompt perfetto.

Prompt di distribuzione generato da Copilot
Prompt di distribuzione generato da Copilot

La nostra applicazione è completa. Ora, integrare un nuovo progetto WordPress è semplicissimo: basta eseguire il seguente comando:

npm start -- --site-name="My Awesome WordPress Website"

Vibe Coding e automazione: il futuro delle agenzie WordPress all’avanguardia

Vibe Coding non è solo un approccio semplicistico alla scrittura del codice. È invece una nuova metodologia di sviluppo che ridefinisce completamente il ruolo del developer: non più un programmatore nel senso tradizionale del termine, ma il direttore di un processo iterativo che spazia dall’esplorazione alla pianificazione, dalla codifica al miglioramento, dai test al debug, dalla documentazione alla distribuzione.

Se questo è il futuro dello sviluppo software e della scalabilità delle agenzie, allora collaborare con una piattaforma di hosting all’avanguardia è fondamentale per rimanere competitivi nell’era dell’AI. Sfruttando la potenza dell’API di Kinsta e coordinando gli agenti AI con regole chiare, test rigorosi e una solida documentazione, la tua agenzia smetterà di correre continuamente ai ripari e inizierà a lavorare in modo più efficiente, prevedibile e scalabile.

Che ne dici di far evolvere i workflow WordPress e a ridurre drasticamente i tempi di sviluppo? Dai un’occhiata ai nostri piani o contatta il nostro team commerciale e inizia oggi stesso a costruire la tua pipeline di automazione.

Carlo Daniele Kinsta

Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.