Quando ChatGPT è stata presentata a novembre 2022, la sua capacità “quasi umana” di rispondere alle domande e di discorrere con i propri utenti hanno sorpreso e incuriosito.
Fra le tante abilità mostrate da ChatGPT, alcune sono sembrate fin da subito potenzialmente trasformative, una su tutti, la capacità di generare programmi per computer in qualsiasi linguaggio di programmazione, semplicemente descrivendo il problema che si intendeva risolvere. A chi si occupa di programmazione, questo è sembrato un passo ulteriore, e forse definitivo, per raggiungere gli obiettivi del cosiddetto movimento no-code.
La democratizzazione dello sviluppo software: il movimento no-code
La nascita di questo movimento può essere fatta risalire al 1982, quando James Martin preconizzava un’era in cui la tecnologia avrebbe permesso di sviluppare software e applicazioni senza la necessità di competenze approfondite di programmazione. Questa visione affondava le sue radici in un contesto in cui l’espansione dei personal computer era limitata dalla mancanza di sviluppatori in numero adeguato, suggerendo la necessità di sopperire a questa carenza attraverso lo sviluppo di soluzioni che premettessero a chiunque di realizzare le proprie applicazioni. Strumenti come Microsoft Excel, le prime piattaforme per lo sviluppo di app web come Dreamweaver e sistemi CMS come WordPress, sono solo alcuni esempi di software il cui obiettivo era di rendere la creazione di applicazioni più accessibile a tutti.
Fanno parte delle tecniche no-code i sistemi per lo sviluppo di programmi tramite interfacce drag-and-drop, i linguaggi di programmazione visuale (VPL), e le piattaforme di sviluppo low-code (ovvero che richiedono la produzione di poche righe di codice) che semplificano la creazione di software personalizzato. In questo contesto, l’utilizzo di linguaggio naturale tramite tecnologie IA per elaborare richieste ci sembra un passo ulteriore nella direzione della democratizzazione dell’accesso alla programmazione.
In realtà l’uso di IA generativa per lo sviluppo di programmi non è appannaggio di ChatGPT: già Microsoft, ad esempio, aveva lanciato a giugno del 2021 un prodotto dedicato, GitHub Copilot, sempre in collaborazione con OpenAI. Però questo prodotto era pensato come strumento di produttività per i programmatori, e non come interfaccia per i non programmatori. In questo senso il caso di ChatGPT ci è sembrato differente, in quanto quest’ultimo è destinato a tutti.
L’efficiacia di ChatGPT nello sviluppo di un’app web relativamente complessa
Forti di queste premesse, all’interno del corso di Laurea “Comunicazione, innovazione ed experience design” dell’Università LUMSA, ci siamo quindi proposti di valutare quanto efficace fosse chatGPT come strumento per aiutare un non programmatore (la dott.ssa Sellitti, in questo caso) nello sviluppo di un’app web relativamente complessa, ricerca che ha costituito l’oggetto della sua tesi magistrale: “Movimento no-code e generative AI: studio delle potenzialità di ChatGPT-4 per la creazione di una app di prenotazione”.
Le capacità generative di ChatGPT, peraltro, sono state testate non solo per la creazione di codice, ma in modo più ampio come vero e proprio supporto per l’ingegneria del codice che, come sa chi si è occupato di software, vede nella scrittura del codice solo una delle fasi necessarie per lo sviluppo di applicazioni davvero funzionali.
Gli obiettivi della tesi
La scelta del tipo di applicazione da sviluppare è caduta su una app per prenotare appuntamenti, “BeautyBook“, con l’obiettivo di sfruttare l’intelligenza artificiale in ogni fase del suo sviluppo. Per quant riguarda il tool di IA, abbiamo selezionato ChatGPT 4.0, che rappresenta ancora oggi il benchmark fra i vari modelli di IA – aperti e chiusi – oggi disponibili.
Lo scopo di BeautyBook è quello di semplificare il processo di prenotazione, consentendo ai clienti di prenotare autonomamente gli appuntamenti, visualizzare la disponibilità di oraria e scegliere il servizio desiderato, eliminando così la necessità di interazioni telefoniche.
In linea con le aspettative di un settore che predilige soluzioni sia funzionali che esteticamente gradevoli, durante lo sviluppo “BeautyBook” si è cercato di combinare un design intuitivo con una gamma di funzionalità volte a facilitare l’interazione dell’utente. Dalla creazione di un profilo personale alla navigazione attraverso calendari dettagliati e cataloghi di trattamenti, l’applicazione è stata progettata per garantire una soddisfacente esperienza utente.
L’obiettivo della tesi era quindi duplice: oltre alla realizzazione di un’applicazione funzionale, ci siamo prefissi anche di valutare il ruolo, l’efficacia e i limiti di GPT-4 nel facilitare il processo di sviluppo no-code, valutando le potenzialità e i limiti di questa tecnologia. In questo senso “BeautyBook” costituisce un caso di studio per esaminare l’impatto dell’intelligenza artificiale generativa sullo sviluppo software, offrendo una prospettiva critica sull’efficacia di tali innovazioni nel soddisfare le reali esigenze di utenti e gestori che non fanno della programmazione il loro core-business.
Per rendere questo processo quanto più realistico possibile, e in linea con gli obiettivi generali del corso di laurea, la progettazione dell’app è stata quanto più realistica possibile, quindi non limitandosi semplicemente alla creazione di un’app “che funzionasse”, ma considerando, nelle varie fasi dello sviluppo, anche gli aspetti estetici e operativi dell’interfaccia, che doveva rendere gradevole l’utilizzo dell’app stessa, in un’ottica di usabilità da parte degli utenti.
Struttura dell’applicazione
L’obiettivo di “BeautyBook” è offrire ai clienti di un centro estetico una gradevole esperienza grazie ad una interfaccia intuitiva, che li guidi dall’iniziale conoscenza dell’app alle funzionalità operative. L’applicazione è strutturata in moduli che corrispondono ad altrettante fasi di utilizzo della stessa: la fase iniziale di onboarding accoglie gli utenti, introducendoli ai servizi offerti e stabilendo un primo contatto. Questo momento è sfruttato per introdurre gli utenti alle varie funzionalità dell’app, ponendo le basi per un’esperienza fluida di utilizzo.
La registrazione e il login sono stati pensati per essere semplici ed efficaci, assicurando agli utenti un accesso agevole senza compromettere la sicurezza dei dati personali, perché la protezione dei dati è una considerazione indispensabile in un’applicazione dedicata al benessere personale.
Una volta effettuato l’accesso, gli utenti accedono alla pagina del loro profilo, un hub personale dove possono gestire le proprie informazioni e preferenze. Questa sezione, personalizzabile e intuitiva, è pensata per rendere semplice l’aggiornamento delle proprie informazioni personali e delle impostazioni dell’app.
La home dell’app funge da vetrina ed è stata disegnata per rendere più facile la navigazione e la ricerca dei trattamenti disponibili. Questa interfaccia è stata concepita per agevolare gli utenti nella esplorazione dei servizi e per prenotare i servizi offerti.
Il cuore di “BeautyBook” è rappresentato dalla pagina di prenotazione. Qui gli utenti possono facilmente selezionare trattamenti, date e orari, grazie ad un processo di prenotazione semplificato.
Infine, la funzione di logout è disegnata per essere facilmente accessibile, garantendo che gli utenti possano terminare la loro sessione in modo sicuro e veloce.
Per sviluppare l’applicazione si è usato il classico modello a cascata, che procede dalla definizione dei requisiti allo sviluppo, testing e implementazione. Questo ci ha permesso di isolare più facilmente i contributi che ChatGPT 4 poteva fornire nelle varie fasi, quindi valutando le sue capacità non come mero “generatore di codice”, ma come strumento di sviluppo tout-court.
Le fasi dello sviluppo “powered by ChatGPT” per BeautyBook
Le fasi dello sviluppo “powered by ChatGPT” per BeautyBook sono state:
- Raccolta dei requisiti.
- Design estetico.
- Progetto del database.
- Sviluppo del codice.
Raccolta dei requisiti
Durante la fase iniziale di sviluppo dell’applicazione “BeautyBook”, GPT-4 è stata usata per la definizione delle necessità e obiettivi dell’applicazione. Attraverso una conversazione interattiva, GPT-4 ha aiutato a formulare la lista dei requisiti funzionali e non funzionali essenziali per il successo dell’app. I requisiti funzionali includono la gestione degli utenti, la creazione di profili, un catalogo dei servizi, un sistema di prenotazione basato su calendario, la gestione degli appuntamenti, meccanismi di pagamento online e un sistema di feedback e recensioni. GPT-4 ha anche sottolineato l’importanza di aspetti non funzionali come la sicurezza dei dati, affidabilità, usabilità, scalabilità e conformità alle normative sulla privacy. Come si vede, già in questa fase di dialogo, l’uso di un tool di intelligenza artificiale ha messo in luce aspetti, come quello della sicurezza o la privacy, che difficilmente sarebbero stati considerati autonomamente da uno sviluppatore non professionale.
Figura 1 Interazione con GPT-4 nell’identificazione dei requisiti per ‘BeautyBook’
ChatGPT-4 ha permesso di ottenere una comprensione più estesa degli elementi chiave dello sviluppo dell’applicazione e ha aiutato, nelle successive interazioni, a chiarire aspetti non completamente definiti o non considerati inizialmente, come la gestione degli utenti e il sistema di prenotazione.
Benché per questione di tempi e priorità si è scelto di non implementare tutte le funzionalità suggerite da GPT-4, il suo supporto nella raccolta dei requisiti ha facilitato la definizione delle esigenze del progetto, riducendo la necessità di successive revisioni, particolarmente probabili quando lo sviluppatore non è un esperto del settore, che quindi può facilmente non considerare fin da subito tutte le esigenze di progetto e accorgendosi solo poi, nelle fasi più avanzate, di una necessità di integrazioni. Si noti come questo utilizzo di ChatGPT arricchisca il campo di utilizzo della IA Generativa nello sviluppo del software, superando il limite (si veda GitHub Copilot) della sola generazione del codice.
Design estetico
Nello sviluppo di “BeautyBook”, l’uso di GPT-4 ha coadiuvato il design UI/UX, accelerando la prototipazione e l’iterazione del design. L’impressione è che l’uso dell’IA abbia permesso di esplorare con maggiore facilità soluzioni innovative, contribuendo a creare un’interfaccia utente accattivante e un’esperienza intuitiva che rispondesse efficacemente alle esigenze degli utenti.
Dalla fase iniziale, con l’elaborazione di Wireframe[1] e l’uso di Figma[2] per digitalizzare gli schizzi, GPT-4 ha offerto consulenza su stile, colori e processi di onboarding, enfatizzando elementi quali la semplicità, l’intuitività e un design basato su colori caldi. In particolare, i consigli su colori hanno guidato verso tonalità che evocano cura, femminilità e tranquillità, sottolineando l’importanza del contrasto, della leggibilità e dell’accessibilità, e assicurando coerenza visiva fra i vari elementi dell’applicazione.
Con l’aiuto di GPT-4, si è proceduto alla creazione di interfacce su Figma, ricevendo orientamenti sui principi di UX/UI per garantire che ogni elemento fosse allineato con gli obiettivi dell’app. Lo screenshot seguente mostra un esempio delle interazioni con GPT-4che hanno contribuito al processo creativo, evidenziando come possa ispirare e validare le scelte di design.
Figura 2 – Interazione con GPT-4 per la schermata di onboarding di un’applicazione
Le interfacce finali di “BeautyBook” riflettono l’attenzione alla coerenza, usabilità e estetica. Queste includono pagine di onboarding che comunicano i valori chiave dell’app, una home page che funge da hub centrale, pagine di registrazione e login per facilitare l’accesso, una pagina di prenotazione per la selezione di servizi, e un profilo utente per personalizzare l’esperienza. Ogni schermata è progettata seguendo i principi estetici e funzionali suggeriti da ChatGPT-4, offrendo un’esperienza visiva gradevole e rilassante che rispecchia l’atmosfera del centro estetico.
Figura 3 – Interfacce create su Figma delle pagine di onoboarding
Figura 4 – Interfacce create con Figma per la pagina di Prenotazione
Questo processo ha mostrato l’efficacia dell’interazione tra designer e strumenti AI nel creare esperienze utente funzionali ed esteticamente piacevoli, dimostrando il potenziale dell’intelligenza artificiale nel migliorare il design UI/UX.
Disegno del database
Un elemento centrale nel disegno di applicazioni moderne è la presenza di un database che serve, ad esempio, a garantire la persistenza di alcuni elementi come il database utenti, le funzionalità disponibili, le azioni intraprese ecc. Una buona progettazione di questa componente è un passo importante per il funzionamento corretto dell’applicazione e per evitare “sorprese” in fase di sviluppo. La progettazione del database per “BeautyBook” ha beneficiato notevolmente dall’uso di GPT-4, che ha guidato sia la strutturazione che l’ottimizzazione dello schema del database. Utilizzando MAMP[3] e phpMyAdmin[4], il processo è passato fluidamente dalla teoria alla pratica. La collaborazione con GPT-4 ha permesso di identificare le entità principali come Utenti, Trattamenti, Appuntamenti e Orari Disponibili, e di definire le loro relazioni, assicurando che la struttura del database rispecchiasse le esigenze operative dell’app.
Le tabelle del database, come “Utenti” e “Trattamenti”, sono state create evidenziando l’importanza di considerare sia le necessità funzionali che gli aspetti di sicurezza e privacy. L’interazione con GPT-4 ha guidato le scelte tecniche e implementative, con benefici sulla funzionalità, efficienza e scalabilità dell’applicazione, oltre che sulla velocità di sviluppo.
Figura 5 – Schema del database proposto da GPT-4 che mostra entità, attributi e relazioni per il sistema di prenotazioni. Si noti l’output in un formato “database friendly”
Grazie a ChatGPT è stato possibile passare direttamente dalla ideazione alla realizzazione, grazie alla immediata generazione del codice SQL necessario per creare le tabelle necessarie, come mostrato nella figura successiva.
Figura 6 – Interazione con GPT-4 per la creazione della tabella “Utenti”
La fase conclusiva del processo di creazione del database è stata l’implementazione pratica delle tabelle nel database attraverso phpMyAdmin. Questo include le tabelle “Appuntamenti”, “Orari Disponibili”, “Trattamenti” e “Utenti”, ciascuna progettata per supportare aspetti cruciali dell’applicazione come la gestione degli appuntamenti e la catalogazione dei servizi offerti.
E’ importante notare che ChatGPT ha permesso anche di velocizzare la creazione della documentazione di progetto, una fase importante, soprattutto per quanto riguarda la futura manutenibilità dell’applicazione, ma spesso trascurata, soprattutto in caso di sviluppi applicativi “artigianali” come questo.
Sviluppo del codice
Dopo aver progettato funzionalmente l’applicazione e predisposto il database, il passo finale, e forse più atteso, è consistito nello sviluppo del codice con l’assistenza di ChatGPT.
Nel caso dell’applicazione “Beauty Book”, GPT-4 ha permesso, partendo da design su Figma, la produzione di codice HTML, CSS e JavaScript che rispecchiava il design previsto per l’applicazione. Interagendo con ChatGPT è stato possibile migliorare iterativamente il codice fino ad arrivare ai moduli funzionanti. Il processo di sviluppo ha incluso la generazione di codice per la pagina di registrazione, la connessione al database attraverso PHP e lo sviluppo di funzionalità complesse come una barra di ricerca dinamica, il tutto riducendo drasticamente il tempo di sviluppo ed estendendo le competenze dello sviluppatore a differenti domini e linguaggi.
Attraverso iterazioni successive e correzioni di errori, GPT-4 ha assistito nello sviluppo di pagine chiave dell’applicazione, dalla home alla gestione del profilo utente e alla pagina di prenotazione, permettendo di superare più agevolmente alcune sfide tecniche e guidando anche le attività di debugging. Questa fase ha evidenziato l’importanza di creare richieste precise (prompt engineering) a GPT-4 per ottenere i risultati voluti.
Le figure successivo mostrano la versatilità di ChatGPT, che può assistere nella creazione di codice di diverso tipo (es. HTML, Javascript…).
Figura 7 – Interazione con GPT-4 per la realizzazione della pagina di onboarding in HTML
Figura 8 – Codice JavaScript per l’invio del modulo di registrazione creato da GPT-4
In alcuni casi il codice prodotto presentava degli errori, e anche nella risoluzione di questi (debugging) l’IA si è rivelata un supporto prezioso, aiutando a comprendere la natura dell’errore e proponendo modi per risolverlo, in qualche caso riscrivendo parte del codice proposto.
Lo sviluppo del codice ha però mostrato anche i limiti di ChatGPT, uno strumento utile ma non infallibile. Ad esempio, in alcuni casi il codice prodotto si è rivelato errato, e ChatGPT, pur riconoscendo l’errore, è sembrata incapace di produrre il codice corretto, richiedendo numerose interazioni successive.
Figura 9 – Conversazioni con GPT-4 per la risoluzione di un errore, evidenti risposte ripetitive che non hanno portato alla soluzione del problema
In pochi casi, la correzione del codice è dovuta passare per altre – e più tradizionali – strade, come ad esempio la consultazione dei forum online. Questo è probabilmente dovuto al manifestarsi di condizioni particolarmente inusuali, o non presenti nel suo insieme di training, ad esempio perché le librerie usate sono state modificate dopo la fine dell’addestramento, e quindi ChatGPT non può conoscerne l’evoluzione.
Conclusioni
Grazie a ChatGPT-4 l’intero processo di sviluppo applicativo ha potuto procedere speditamente, beneficiando del vasto spettro di competenze portato dal tool di IA. Ma l’intelligenza artificiale si è mostrata ancora lontana dal costituire lo strumento “definitivo” per realizzare la visione del movimento no-code: si tratta di un ausilio all’ingegno umano, non di una sostituzione. In molti passi del processo di sviluppo l’esperienza di programmazione e l’ingegno del programmatore sono stati imprescindibili per superare alcuni ostacoli.
In sintesi, “BeautyBook” dimostra che, nonostante le capacità avanzate di GPT-4, l’intelligenza artificiale serve ancora come complemento all’ingegno umano, non come suo sostituto. La collaborazione tra creatività umana e innovazione tecnologica rimane essenziale per navigare i cambiamenti del panorama tecnologico e realizzare soluzioni innovative.
L’esperienza però ha permesso di provare a tracciare una probabile direzione di sviluppo: più che un tool universale che risolva ogni problema di programmazione, è lecito attendersi nel breve-medio termine, l’integrazione di sistemi di sviluppo basati sull’IA generativa all’interno dei software di uso comune: Excel, power point, i vari IDE (Interactive Development Environment), strumenti quali Wordpress eccetera, tutti probabilmente saranno presto dotati di un’intelligenza generativa dedicata, il cui compito sarà aiutare l’utente ad ottenere i risultati attesi dialogando in linguaggio naturale con l’applicazione.
Sarà compito dell’IA poi tradurre questi desiderata nei comandi necessari. Il linguaggio naturale, insomma, è destinato a divenire la principale interfaccia della maggior parte dei programmi e dei sistemi che utilizzeremo nel prossimo futuro. Si tratta, in fnd, di una facile previsione, visto che già oggi è visibile l’espandersi di questa tendenza, ad esempio con un numero sempre maggiore di oggetti che iniziano a rispondere a comandi vocali in linguaggio naturale, oppure a software quali PowerBI che già utilizza interfacce in linguaggio naturale per realizzare delle specifiche visualizzazioni di dati, senza dover ricorrere all’apprendimento del linguaggio di programmazione.
Prima di arrivare a questo punto saranno necessari però dei passaggi atti a garantire l’affidabilità del codice, in particolare per quanto attiene potenziali errori e vulnerabilità che l’intelligenza artificiale può inavvertitamente inserire nel codice generato.
Note
- Un wireframe è uno strumento visuale utilizzato nella progettazione di interfacce utente per rappresentare schematicamente la struttura di una pagina web o di un’applicazione. Funziona come una mappa o un blueprint che indica la disposizione degli elementi di una pagina, inclusi layout, contenuti e funzionalità, senza però concentrarsi su dettagli grafici come colori o stili. Questo permette ai progettisti di definire e rivedere rapidamente l’architettura dell’informazione e l’interazione utente prima di procedere con il design dettagliato e lo sviluppo. ↑
- Figma è uno strumento di design grafico basato sul cloud, ampiamente utilizzato per l’interfaccia utente e la progettazione dell’esperienza utente (UI/UX). Offre funzionalità come prototipazione interattiva, creazione di wireframe, e un sistema di design integrato, facilitando il processo di design dall’ideazione alla consegna. ↑
- MAMP è l’acronimo di “Macintosh, Apache, MySQL, PHP”. È un pacchetto software che consente di installare facilmente un ambiente di sviluppo locale su un computer Mac. Questo ambiente include il server web Apache, il sistema di gestione di database MySQL, e i linguaggi di scripting PHP e Perl. MAMP è utilizzato da sviluppatori web per creare e testare siti web e applicazioni web in un ambiente locale prima di distribuirli su un server live. ↑
- PhpMyAdmin è uno strumento software gratuito e open source scritto in PHP, progettato per gestire l’amministrazione di MySQL e MariaDB su un’interfaccia web. ↑
