La mia prima esperienza nella creazione di un componente personalizzato Qodly con l’intelligenza artificiale

In questo post del blog racconto come ho iniziato a sviluppare il mio primo componente personalizzato per Qodly senza scrivere una sola riga di codice né realizzare nulla da solo. Tutto il lavoro è stato svolto dall’IA, guidata da istruzioni chiare.

Con poche istruzioni appropriate, ho ottenuto il mio primo componente personalizzato utilizzando VSCode e Github Copilot. Grazie all’IA, puoi concentrarti esclusivamente sulla definizione delle tue esigenze e su ciò che desideri, senza doverti preoccupare delle complesse questioni tecniche relative allo sviluppo.

Continua a leggere per saperne di più.

Prima di iniziare

Come spiegato nella documentazione, se hai bisogno di un componente che 4D Qodly Pro non fornisce in modo nativo, un componente personalizzato rappresenta una soluzione flessibile.

Può essere condiviso tra diversi progetti o all’interno della comunità di Qodly. Una volta disponibile, viene utilizzato proprio come qualsiasi componente nativo di Qodly.

Per prima cosa, ho guardato questa demo completa. Una volta compresa l’idea di base, ho seguito questi passaggi.

I due ingredienti

Scaricare le competenze

Per funzionare correttamente, l’IA necessita di un insieme di competenze. Le competenze sono le linee guida che l’IA deve seguire come metodo. Grazie a queste competenze, l’IA sa come implementare un componente personalizzato (framework, architettura, ecc.) e come scrivere test automatizzati.

Ho scaricato queste “skills” da questo repository GitHub.

In VS Code, ho creato una cartella vuota e poi ho creato la cartella .github/skills contenente le competenze.

Poi è arrivato il mio turno

Il mio ruolo era quello di descrivere il contratto del componente: i suoi input, gli eventi da monitorare, il suo comportamento, ecc.

Partendo da quella breve specifica e dalle competenze, l’IA implementa autonomamente il componente personalizzato.

Le informazioni da fornire sono:

– il nome e lo scopo del componente

– proprietà: le proprietà che determinano il comportamento del componente

– aspetto: come appare il componente in modalità progettazione e in modalità rendering

– eventi: le azioni dell’utente a cui il componente deve rispondere

– comportamento: come si comporta il componente in base agli eventi e alle sue proprietà

Tutto questo viene fornito all’IA in linguaggio naturale.

Esempio: un componente personalizzato “copia negli appunti”

Il mio obiettivo era quello di realizzare un componente molto semplice in grado di copiare una fonte dati stringa di Qodly negli appunti (del computer su cui avviene il clic). Questo componente non esiste in modo nativo in 4D Qodly Pro.

Primo prompt principale

È il momento di fornire il prompt all’IA. Come spiegato nel video, il prompt si basa su una sorta di mini-specifica: un contratto composto da tre parti principali, come descritto sopra.

Dopo aver installato le skill, ho inviato il mio primo prompt:

Ecco il testo del prompt da copiare e incollare:

Ci troviamo in una cartella vuota.

Nella cartella .gihub abbiamo solo alcune skill.

Queste skill hanno lo scopo di creare componenti personalizzati per Qodly.

Inizieremo a creare un componente personalizzato.

Utilizza lo skill qodly-custom-component.

Crea lo scaffold con @qodly/cli, quindi implementa il componente utilizzando la struttura standard Build / Render / Config / Settings.

Crea un componente da zero per Qodly. Il componente deve utilizzare un contratto in tre parti: Props, Events e Behavior.

Se necessario, chiedimi di inserire il nome del componente, la versione e altre informazioni richieste

Ecco i dettagli:

I Props definiscono cosa viene passato al componente:
• datasource: stringa Qodly obbligatoria come fonte dati
• aspetto del componente in modalità progettazione e al momento del rendering: una comune icona di copia

Gli eventi definiscono ciò che esce dal componente:
• onClick: viene attivato quando si fa clic sul componente

Comportamento:
• Quando si fa clic sul componente, copia il contenuto della fonte dati associata negli appunti locali (gli appunti del computer su cui è avvenuto il clic).
• Se la fonte dati è vuota o nulla, non viene copiato nulla e gli appunti locali del computer su cui è avvenuto il clic rimangono invariati.
• Se il componente non è associato a una fonte dati Qodly di tipo String, non viene copiato nulla e gli appunti locali del computer su cui è avvenuto il clic rimangono invariati.

La risposta dell’IA

Ecco la risposta che ho ricevuto:

E il mio componente personalizzato copyclipboard era stato creato

Test del mio lavoro

Ho quindi chiesto come testare il componente localmente. Copilot mi ha suggerito di eseguire:

Il componente personalizzato può quindi essere testato localmente aprendo http://localhost:5001/ in un browser

È necessario eseguire un’istanza di 4D

http://localhost:5001/ è l’URL locale del server Vite. Esso serve esclusivamente un ambiente di sviluppo locale che include il componente personalizzato. Per usufruire di tutte le funzionalità di Qodly Studio, come le sorgenti Qodly e le funzioni ORDA disponibili, è necessario assicurarsi di pubblicare l’istanza di Qodly Studio di un progetto 4D sulla porta HTTPS 7443.

Ho quindi creato e aperto un progetto 4D vuoto con queste impostazioni web:

E le impostazioni di amministrazione web dell’istanza 4D sono:

In questo modo, l’istanza di Qodly Studio del mio progetto 4D è accessibile all’indirizzo https://localhost:7443/studio. Viene utilizzata dall’ambiente di sviluppo locale durante l’esecuzione di http://localhost:5001/.

Ed ecco il risultato!

Compilazione e pubblicazione

Per compilare e pubblicare la versione finale del mio componente personalizzato, ho semplicemente chiesto a Copilot di compilarlo come già fatto per altri componenti personalizzati esistenti. Ho fornito a Copilot un esempio (ad esempio https://github.com/b-fadwa/Qodly-file-download).

Gli ho anche chiesto di pubblicare il componente in un determinato repository GitHub, includendo sia il codice sorgente che le versioni.

E questo è tutto.

Quali sono le prospettive

Questa prima esperienza dimostra che l’IA abbassa notevolmente la barriera all’estensione di Qodly Studio. Se riesci a descrivere cosa dovrebbe fare un componente (le sue proprietà, i suoi eventi e il suo comportamento), l’IA può crearlo per te.

Le possibilità di personalizzazione di Qodly Studio sono quindi molto ampie: oggi un pulsante “copia negli appunti”, ma domani qualsiasi componente di cui le vostre applicazioni abbiano bisogno, senza dover essere esperti di front-end. L’unico vero limite è la chiarezza delle vostre specifiche.