Programmazione AI con 4D e VS Code: una guida pratica

Se avete recentemente seguito il nostro webinar sulla programmazione con l’IA in 4D 21, avete visto come abbiamo realizzato un’applicazione completa per un’agenzia di viaggi (struttura del database, dati, moduli e una funzionalità basata sull’IA) quasi interamente tramite comandi in linguaggio naturale. In questo articolo vi guideremo attraverso la configurazione e vi mostreremo come applicare lo stesso flusso di lavoro ai vostri progetti.

Cosa ti serve

• 4D 21 (o versione successiva)
• Visual Studio Code con GitHub Copilot abilitato (vedi configurazione di seguito)
• L’estensione 4D Analyzer (vedi sotto)
• Una serie di file di istruzioni su misura per lo sviluppo 4D (vedi sotto)

Configurazione di GitHub Copilot

Prima di tutto: GitHub Copilot funziona tramite il tuo account GitHub, non direttamente tramite OpenAI, Anthropic o qualsiasi altro fornitore di IA. Non è necessario acquistare crediti da Claude o da qualsiasi altro servizio. Tutto viene gestito tramite GitHub.

1. Crea un account GitHub se non ne hai uno: github.com

2. Attiva GitHub Copilot sul tuo account all’indirizzo github.com/features/copilot. È incluso un piano gratuito con un generoso credito mensile, non è richiesta alcuna carta di credito per iniziare.

3. Accedi da VS Code. Apri VS Code, clicca sull’icona Account nell’angolo in basso a sinistra e accedi con il tuo account GitHub. Una volta connesso, l’icona di Copilot appare nella barra di stato e la Chat diventa disponibile.

4. Seleziona il tuo modello. Nel pannello Copilot Chat, un selettore di modelli ti consente di scegliere quale modello di IA alimenta le tue risposte (GPT-4o, Claude, Gemini e altri a seconda del tuo piano). L’impostazione predefinita funziona bene per iniziare, puoi cambiarla in seguito.

Per controllare l’utilizzo e gestire il tuo piano: vai su github.com/settings/copilot. Puoi vedere quante richieste hai utilizzato, passare a un piano a pagamento e gestire la fatturazione se hai bisogno di maggiore capacità.

L’estensione 4D Analyzer

L’estensione 4D Analyzer è ciò che rende VS Code veramente compatibile con il linguaggio 4D. Installala dal Marketplace di VS Code e otterrai:

• Evidenziazione della sintassi per il codice 4D: metodi, classi, classi di moduli, ecc.
• Completamento del codice e aiuto per le firme
• Diagnostica (errori e avvisi) in tempo reale mentre digiti

Questo è molto importante quando si lavora con l’IA. Quando GitHub Copilot genera codice 4D, l’Analizzatore lo convalida immediatamente. Gli errori vengono evidenziati direttamente nell’editor, il che significa che puoi individuarli prima ancora di provare a eseguire il codice e segnalarli a Copilot per ottenere una correzione.

Per installarlo:

1. Apri VS Code
2. Vai al pannello Estensioni (Cmd+Shift+X su macOS, Ctrl+Shift+X su Windows)
3. Cerca “4D Analyzer”
4. Fare clic su Installa

Il gioco è fatto. Apri una cartella di progetto 4D qualsiasi e l’estensione si attiverà automaticamente.

File di istruzioni: insegnare a Copilot come scrivere codice 4D

Di default, GitHub Copilot conosce molti linguaggi di programmazione, ma non il tuo stile di codifica, le tue best practice o i dettagli dello sviluppo 4D. È qui che entrano in gioco i file di istruzioni.

I file di istruzioni sono documenti Markdown inseriti in una cartella .github/instructions/ nella directory principale del tuo progetto. Copilot li legge automaticamente e li utilizza come contesto per ogni risposta. Considerali come una guida di stile che l’IA segue.

Dove trovarli

Su GitHub è disponibile un set di file di istruzioni 4D pronti all’uso:

👉 github.com/mathieu-ferry/4D-github-instructions

Come configurarli

1. Nella directory principale del tuo progetto 4D, crea una cartella .github/instructions/
2. Copiate i file di istruzioni dal repository sopra indicato in quella cartella
3. Apri Copilot Chat e chiedi: “Quali sono i tuoi standard di codifica 4D?” e dovrebbe rispondere in base al contenuto dei tuoi file di istruzioni

Se lo fa, sei a posto. Le istruzioni trattano argomenti come:

• Preferenza per l’uso delle classi rispetto ai metodi procedurali
• Convenzioni relative alle classi dei moduli
• Riferimenti allo schema JSON per moduli e cataloghi
• Convenzioni di denominazione e struttura del codice

Suggerimento: questi file sono un punto di partenza. I risultati migliori si ottengono quando li adatti alle tue abitudini di codifica e alle convenzioni del progetto. Aggiungi le tue regole, rimuovi ciò che non è applicabile e perfeziona il tutto nel tempo.

Mettiamo tutto insieme: due esempi

Esempio 1: Creazione di una struttura di database con i prompt

Quando si lavora con l’editor Structure, le modifiche vengono riportate nel file 4DCatalog. Con i file di istruzioni dal repository GitHub, Copilot può modificare in tutta sicurezza questo stesso file per voi (il contesto dello schema è incluso in quelle istruzioni). Si continua a lavorare guidati dai prompt e, dopo il riavvio, le modifiche alla struttura sono immediatamente visibili in 4D. Ecco una sequenza realistica:

Voi: “Crea una tabella nel catalogo che elenchi i dipendenti con il loro cognome e nome.”

Copilot modifica la struttura. Riavvia 4D e otterrai una tabella Employee con una chiave primaria UUID e i campi richiesti.

Tu: “Crea una nuova tabella che elenchi i reparti dell’azienda.”

Viene visualizzata un’altra tabella.

Tu: “Aggiungi una relazione tra dipendenti e reparti, in modo che ogni dipendente appartenga a un reparto.”

Copilot aggiunge una chiave esterna e la definizione di relazione appropriata. In questo modo costruisci un intero modello relazionale, passo dopo passo, semplicemente parlando con l’IA.

L’idea chiave: descrivi l’intento in un linguaggio semplice e l’IA gestisce i dettagli del catalogo. I file di istruzioni mantengono l’output allineato alle convenzioni previste (chiavi UUID, tipi di attributi appropriati, sintassi di relazione corretta).

Esempio 2: Creazione di un modulo e della sua classe

I moduli sono il punto in cui le cose si fanno davvero interessanti. È possibile descrivere un layout in un unico prompt:

Tu: “Crea un modulo 4D che elenchi le attività. Voglio una casella di riepilogo sul lato sinistro con il riepilogo, il cognome dell’assegnatario, il reparto, la data di scadenza e lo stato. Sul lato destro, mostra una vista dettagliata con tutte queste informazioni più la descrizione dell’attività e il responsabile del reparto. Associa il modulo a una classe di moduli.”

Copilot genera:

• Il JSON del modulo (form.4DForm) con la casella di riepilogo, i campi di immissione e il layout
• La classe del modulo (.4dm) con la gestione degli eventi e la logica di associazione dei dati

Il risultato è un modulo funzionante che puoi aprire in 4D e iniziare a utilizzare. Sarà perfetto al primo tentativo? Probabilmente no. Ma ti offre una solida base da perfezionare tramite suggerimenti successivi o regolazioni manuali.

Perfezionamento del design

Il primo modulo generato è una base funzionante, non un prodotto finito. Esistono diversi modi per guidare Copilot verso un risultato migliore:

• Inserisci uno screenshot come fonte di ispirazione. Trova un’interfaccia utente che ti piace, incollala nella chat di Copilot e digita: “Riprogetta il modulo utilizzando questo come riferimento visivo.” Copilot estrarrà dall’immagine i modelli di layout, le tonalità di colore e la spaziatura.
• Fornisci un brief di progettazione preciso. Descrivi l’intento, l’atmosfera e i vincoli: “Riprogetta questo modulo per un agente di viaggio che ha bisogno di elaborare rapidamente le e-mail. Dai priorità alla densità delle informazioni, agli indicatori di stato ad alto contrasto e alla navigazione ottimizzata per la tastiera”.
• Specifica esplicitamente i token di design. Se disponi di un sistema di design, inseriscilo direttamente: “Usa una spaziatura di base di 8px, sfondi grigio neutro (#F5F5F5), blu (#1A73E8) per le azioni primarie e rosso/arancione/verde semantici per lo stato delle attività.”
• Richiedi coerenza con i moduli esistenti. Piuttosto che ricominciare da zero ogni volta: “Rendi questo modulo visivamente coerente con il modulo Dipendente esistente: stesso stile di intestazione, gerarchia dei pulsanti e densità delle righe dell’elenco.”
• Codifica il tuo stile nei file di istruzioni. L’approccio più duraturo. Definisci la tua tavolozza di colori, le regole di spaziatura e le convenzioni dei componenti dell’interfaccia utente una volta in .github/instructions/, e ogni modulo generato da Copilot le seguirà automaticamente, senza richiedere conferma.

Modalità di chat di Copilot: Ask, Plan e Agent

Copilot Chat in VS Code ha tre modalità, selezionabili dal selettore di agenti nella parte inferiore del pannello Chat:

• Chiedi: solo domande e risposte. Risponde a domande sul tuo codice, sui concetti di programmazione o su VS Code senza toccare alcun file. Utile per capire come funziona qualcosa o per esplorare idee.
• Plan: produce un piano di implementazione strutturato e passo dopo passo utilizzando un’analisi del codice di sola lettura, prima di scrivere una sola riga di codice. Fa emergere domande aperte su requisiti ambigui, in modo da poter chiarire l’intento in anticipo. Una volta soddisfatti, un pulsante “Avvia implementazione” trasferisce il piano direttamente alla modalità Agent per l’esecuzione.
• Agente: il cavallo di battaglia della codifica. Modifica autonomamente i file del progetto, esegue comandi da terminale, richiama strumenti e ripete le operazioni per correggere gli errori fino al completamento dell’attività.

Tutti gli esempi riportati in precedenza in questo post sono stati eseguiti in modalità Agente, che è l’impostazione predefinita corretta per qualsiasi attività che modifichi effettivamente il progetto.

Quando la modalità Piano dà i suoi frutti

Finora abbiamo lavorato in modo incrementale: un prompt, una modifica, revisione, ripetizione. Per il lavoro esplorativo o le aggiunte veloci, questo è perfettamente efficiente. Ma per funzionalità più grandi che toccano più componenti contemporaneamente, la modalità Piano vale il passo in più.

La modalità Plan legge il codice prima di produrre qualsiasi cosa. L’output è un riepilogo di alto livello suddiviso in passaggi attuabili, comprese eventuali domande sui requisiti. Si itera sul piano con una semplice conversazione fino a quando non riflette accuratamente ciò che si desidera, quindi lo si passa ad Agent.

Questo è particolarmente utile nei progetti 4D in cui una singola funzionalità può interessare contemporaneamente il catalogo, uno o più metodi o classi, un modulo JSON, una classe di modulo e file di risorse. Individuare un presupposto errato in fase di pianificazione è molto meno costoso che districare un’esecuzione su più file che ha preso la direzione sbagliata.

Come funziona nella pratica

Invece di questa sequenza incrementale:

• “Aggiungi una tabella e-mail”
• “Crea un modulo per le email”
• “Aggiungi un pulsante per elaborare le e-mail”
• “Scrivi il metodo di elaborazione AI”
• “Aggiungi dati di esempio”

È possibile scrivere un unico prompt ben strutturato che descriva l’intera funzionalità, eseguirlo tramite Plan per convalidare l’approccio, quindi lasciare che Agent lo esegua in un unico passaggio coordinato. Questo è esattamente ciò che abbiamo fatto nel webinar durante la creazione della funzionalità AI “email-to-task”: un unico grande prompt, che copriva contemporaneamente la tabella, il modulo, il pulsante, la logica di elaborazione, la configurazione della chiave API e i dati di esempio.

Suggerimenti per un flusso di lavoro AI efficiente

1. Adatta il tuo approccio alle dimensioni dell’attività. I prompt passo dopo passo funzionano bene quando stai esplorando o quando l’ambito non è chiaro, rendendo facile la revisione e la correzione del percorso. Per funzionalità ben definite, un unico prompt più ampio con la modalità Plan è più efficiente. La documentazione di VS Code raccomanda di suddividere le attività complesse, ma sottolinea anche che includere i risultati attesi (quali file, quale comportamento) aiuta l’agente a verificare il proprio lavoro.
2. Indica cosa ti aspetti, non come farlo. Per prompt più grandi, elencare i file, le tabelle o i moduli che ti aspetti vengano creati aiuta a ridurre le congetture. Evita di specificare eccessivamente i dettagli di implementazione: quello è compito dell’agente. L’obiettivo è stabilire confini chiari, non scrivere una specifica.
3. Tieni le regole fisse nei file di istruzioni, il contesto specifico nel prompt. Convenzioni, regole di denominazione e preferenze architetturali vanno inserite in .github/instructions/, non ripetute in ogni prompt. Secondo la documentazione di VS Code, i file di istruzioni vengono caricati ad ogni interazione, quindi mantienili incentrati su ciò che l’IA non può dedurre dal tuo codice da solo.
4. Riferisci gli errori, con il contesto per quelli non ovvi. Incollare un errore di runtime direttamente in Copilot è spesso sufficiente per errori isolati. Per problemi di logica o architettura, indica anche il file pertinente o spiega il comportamento previsto; il messaggio di errore da solo non fornirà un segnale sufficiente.
5. Utilizza screenshot per la diagnosi visiva. Allegare uno screenshot è più veloce che descrivere un problema di layout a parole, e la documentazione di VS Code lo elenca come tecnica di contesto raccomandata. Nota: potrebbe essere necessario abilitare il supporto delle immagini a seconda del tuo piano Copilot e delle impostazioni dell’organizzazione.
6. Rivedi l’output dell’IA: l’impegno è proporzionale alla posta in gioco. Per i prototipi, una lettura veloce va bene. Per la produzione, trattalo come qualsiasi codice contribuito: controlla la logica, i casi limite, la convalida degli input e tutto ciò che riguarda servizi esterni o credenziali.
7. Mantieni i file di istruzioni snelli e aggiornati. Istruzioni più mirate producono risultati migliori, ma i file di istruzioni vengono caricati ad ogni richiesta. La documentazione di VS Code consiglia di concentrarsi su aspetti che l’IA non può dedurre dal codice: convenzioni non predefinite, decisioni architetturali, specifiche dell’ambiente. Un file generico e gonfiato inizia a diluire il segnale.

Andare oltre: agenti e competenze personalizzati

Tutto ciò che abbiamo trattato finora utilizza gli agenti integrati con file di istruzioni condivisi. Ma VS Code ora consente di andare oltre definendo agenti e competenze personalizzati, memorizzati nel progetto in .github/agents/.

Un agente personalizzato è un file Markdown (.agent.md) che conferisce all’IA una personalità specifica, limita gli strumenti che può utilizzare e, facoltativamente, lo associa a un modello particolare. Ad esempio, potresti creare un agente 4D-reviewer dedicato che si concentri esclusivamente sulla qualità del codice, sulle vulnerabilità di sicurezza e sulle convenzioni di denominazione per i progetti 4D, utilizzando strumenti di sola lettura in modo che non modifichi mai nulla a meno che tu non lo richieda esplicitamente. Oppure un agente 4D-scaffolder precaricato con i tuoi modelli di moduli e classi, pronto a generare nuove schermate su richiesta.

Le competenze (file.skill.md ) rappresentano un ulteriore passo avanti: sono funzionalità riutilizzabili e portabili che possono includere script e accedere a risorse esterne. Mentre un file di istruzioni contiene regole passive, una competenza contiene una logica attiva che l’agente può invocare. Un esempio pratico in 4D: una competenza che sa come interrogare il sito della documentazione 4D e recuperare esempi di codice rilevanti direttamente nella chat.

La documentazione di VS Code descrive anche gli handoff: flussi di lavoro concatenati in cui un agente passa il contesto a quello successivo con un semplice clic. Un agente di pianificazione genera le specifiche di una funzionalità, poi le passa a un agente di implementazione, che a sua volta le passa a un agente di revisione. Ogni passaggio viene approvato da un utente prima di essere eseguito.

È possibile generare tutto questo con l’AI direttamente nella chat: digitate /create-agent o /create-skill e descrivete ciò che desiderate. Possono essere memorizzati a livello di area di lavoro (condivisi con il team tramite controllo del codice sorgente) o nel vostro profilo utente (personali, disponibili in tutti i progetti).

Oltre la generazione di codice: altri flussi di lavoro utili dell’IA

La creazione di funzionalità è solo una delle cose che un agente IA fa bene in un flusso di lavoro di sviluppo. Ecco altre situazioni in cui Copilot può svolgere un carico di lavoro significativo:

• Documentazione. Chiedi all’agente di scrivere o aggiornare la documentazione tecnica dal codice sorgente, generare stringhe di documentazione per metodi e classi o tradurre la documentazione esistente in un’altra lingua. Per 4D in particolare, questo può significare generare contenuti di aiuto rivolti all’utente dalla logica delle classi di modulo, o produrre un riferimento API strutturato da un insieme di metodi.
• Revisione della sicurezza. Chiedi all’agente di analizzare un metodo, una classe di modulo o un’intera funzionalità alla ricerca di vulnerabilità comuni: input non convalidati, controllo degli accessi mancante, esposizione a SQL o iniezioni, credenziali hardcoded. Un agente di sicurezza dedicato in sola lettura (vedi sopra) è la scelta naturale in questo caso. Questo non sostituirà un vero e proprio audit di sicurezza, ma è un primo passaggio veloce.
• Rifattorizzazione. Gli agenti AI gestiscono bene le attività di rifattorizzazione meccanica: rinominare i simboli in modo coerente, estrarre la logica ripetitiva in metodi o classi condivise, convertire il codice procedurale in modelli ORDA o modernizzare il codice 4D legacy secondo le migliori pratiche attuali.
• Spiegazione del codice e inserimento. Utilizzate la modalità Ask per comprendere il codice che non conoscete, tracciare ciò che fa un metodo o ottenere un riassunto in linguaggio semplice di una logica complessa. Ciò è particolarmente utile quando si riprende un progetto esistente o si inseriscono nuovi membri nel team.
• Generazione di test. Chiedi all’agente di scrivere test unitari per un determinato metodo o classe, inclusi casi limite e condizioni di errore. Copilot può anche eseguire i test dopo averli generati e iterare se falliscono.
• Messaggi di commit e descrizioni delle PR. VS Code include azioni intelligenti integrate per generare messaggi di commit dalle modifiche preparate e dai riepiloghi delle pull request. Piccoli risparmi di tempo che si sommano.

Cosa ci aspetta?

Il flusso di lavoro descritto in questo post è già disponibile. Crea la tua prima tabella e il tuo primo modulo tramite i prompt, usa la modalità Plan per affrontare una funzionalità completa, rifattorizza il codice legacy, genera documentazione, esegui una revisione della sicurezza, crea un agente personalizzato per il tuo team. L’unica cosa che resta da fare è provarlo.

Ecco tutto ciò che ti serve per iniziare:

1. Scarica 4D 21
2. Installa VS Code con GitHub Copilot abilitato
3. Aggiungi l’estensione 4D Analyzer
4. Copia i file di istruzioni nel tuo progetto

Apri la modalità Agent, descrivi ciò che desideri realizzare e verifica i risultati ottenuti.

Ci piacerebbe conoscere la tua esperienza. Condividi i tuoi risultati, i flussi di lavoro e le domande sul Forum 4D, la community ti aspetta!