Trascrizione

Buongiorno, sono Dario Severini, siamo su Studio Samo Pro e siamo all'inizio di una lezione molto interessante secondo me che è quella delle basi del vibe coding, questo termine, vibe coding, che probabilmente avrete già sentito ma non avete mai avuto l'occasione di iniziare a metterci mano, quindi ad usare l'AI per scrivere codice, per realizzare piccoli programmini. questa lezione serve proprio a questo, a darvi l'inizio e darvi le basi, quindi gli strumenti fondamentali per iniziare a fare questo ma prima di ciò, appunto, io mi sono Davide Severini, mi occupo di trasformazione digitale, di sostenibilità e di applicazioni dell'AI in diversi contesti organizzativi parallelamente porto avanti la mia attività, Mancardi Green, che è un progetto di consulenza dedicato all'innovazione digitale per le realtà sociali di varia natura che siano organizzazioni ad alto impatto sociale, se in realtà no profit o istituzioni. Oggi collaboro anche come docente per i corsi di studio Siamo Pro. Potete ovviamente trovarmi su tutti i canali social, in particolare su LinkedIn. Ora, guardiamo un attimo quelli che saranno i contenuti di oggi. Ci sarà una piccola introduzione teorica dove parleremo del vibe coding, che cos'è il vibe coding, gli diamo una definizione pratica. Parleremo soprattutto dei rischi del vibe coding, vi porterò un caso studio, insomma un caso reale, e parleremo un po' dei livelli che io do al vibe coding, ovviamente non è una definizione ufficiale, è una definizione mia, ma ci può aiutare a muoverci in questo mondo. E poi andremo sul pratico, scopriremo alcuni strumenti, soprattutto gli strumenti in cloud, come Lovable e Base44, e parleremo un attimo di prompt engineering per il vibe coding, quindi di come fare le domande agli strumenti di vibe coding, e parleremo di uno strumento tra i tanti disponibili, ma in particolare quello di Antropic, quindi Cloud e in particolare Cloud Code, quindi impareremo ad utilizzarlo e vedremo cosa possiamo realizzare con Cloud Code e poi creeremo la nostra web app da zero, se vogliamo un nostro SaaS, software as a service da zero. Bene, partiamo con il primo argomento appunto, che cos'è il Vibe Coding? Ora, partiamo da una definizione di questo signore, questo signore Andrea Carpazzi, è uno dei fondatori di OpenAI, dell'azienda di CIGPT, che ha rilasciato un po' questa definizione, questa dichiarazione. C'è un nuovo tipo di programmazione, che io chiamo Vibe Coding, appunto, in cui ci si abbandona completamente alle vibe, alle vibrazioni, se vogliamo un po' all'istinto, si accetta una crescita esponenziale, poi adesso vediamo cosa significa crescita esponenziale, e si dimentica persino che il codice esista. Ecco, questa parte finale penso sia la parte più importante per definire che cos'è il vibe coding. Come dice il sottotitolo di questa parte di lezione, il vibe coding non è un assistente che fa il codice. Se tu hai usato un LLM, un Large Language Model, per scrivere codice, tu non hai scritto nessuna linea di codice, però allo stesso tempo tu sei consapevole di che codice ha scritto sei andato a leggertelo l'hai capito, l'hai testato, l'hai rivisto l'hai modificato in piccoli dettagli eccetera non stai facendo vibe coding essenzialmente stai usando un large language model come assistente che scrive scrive al posto tuo è la stessa cosa di se noi stiamo scrivendo un libro con l'AI però l'AI ci scrive la bozza iniziale del libro poi noi siamo andati là a modificare a rileggere, a cancellare a farlo leggere ad altre persone per vedere se effettivamente sembrava troppo come AI e così via non stiamo facendo vibe coding, vibe writing se vogliamo, ok? bene, il vibe coding invece è, ci dimentichiamo persino che il codice esista, il vibe coding è non toccare evidentemente il codice ok? quindi significa essenzialmente dare la disponibilità di chiunque che non è tecnico, che non è figura tecnica, che non è un programmatore di poter andare a realizzare dei progetti digitali, dei strumenti digitali. Per crescita esponenziale intendo è che qua ci sono degli aspetti positivi e negativi della crescita esponenziale. Da un lato, non avendo competenze tecniche, se noi facciamo un errore in fase iniziale di creazione del nostro strumento in vape coding, dobbiamo accettare che esponenzialmente questo errore si moltiplicherà e si ingiganterà, avete capito, insomma, diventerà molto più grande poi successivamente. Quindi c'è questo rischio e poi parleremo adesso anche dei rischi. Il secondo luogo però è anche la crescita esponenziale di questi strumenti, perché fino a poco tempo fa potevano fare delle piccole cose, mentre adesso possono diventare quasi sostitutivi di un team di software engineering completo. Parliamo un attimo appunto dei rischi. vi porto questo caso studio per chi è a bezzo ai social in particolare al mondo di Twitch forse riconoscerà questo ragazzo questo ragazzo si chiama Greenbaud o almeno questo è il nome d'arte ed è uno streamer su Twitch un ragazzo che si muove sui social, un influencer durante una sua live si vantò di aver creato un nuovo social network Bauder appunto interamente in vibe coding e disse ah io con 40 euro di abbonamento ho creato un nuovo social network venite iscritti i follower miei a iscrivervi insomma al mio social network qual è il dato però? che tempo un paio d'ore il nuovo social network è stato hackerato è stato hackerato perché? in primis perché tutto il codice di questo social network è stato salvato su un unico file javascript Quindi già questo fa capire che la struttura di questo social network non era proprio solida. In secondo luogo, tutte le chiamate API, ovvero tutti i momenti in cui il front-end, quindi l'interfaccia che noi vediamo del social network, e il back-end, quindi il database, e tutto ciò che funziona dietro al nostro social network, erano visibili da chiunque essenzialmente, erano visibili lato client, si dice. quindi chiunque poteva effettivamente aprire gli strumenti per sviluppatori di Chrome e vedere appunto queste chiamate, quindi essenzialmente come funzionava il social network. Questa diciamo non è una vulnerabilità grave, però comunque è un problema perché dà agli attaccanti degli indizi su come funziona il social network. La cosa più grave però in questo caso era che queste chiamate API non erano protette lato server, quindi non erano protette dal punto di vista del database, quindi chiunque non solo poteva vedere come funzionava, ma poteva modificare e fare delle chiamate API appunto poteva modificare il codice di questo social network essenzialmente Quindi gli attaccanti con un facilit hanno subito preso i dati di migliaia di utenti che si erano iscritti hanno mandato via, hanno cancellato il profilo del proprietario di questo social network, quindi Greenbaud appunto, e lui si è ritrovato costretto a chiudere in poco tempo il social network che aveva creato. a causa del GDPR, la pena massima che può avvenire a causa del GDPR è di 20 milioni di danni, quindi è passato da 40 euro e il vanto di aver creato un social network con 40 euro, a invece ad aver rischiato una pena di 20 milioni di euro di danni. Quindi questo è per dire che noi qui in questo corso non vi stiamo dicendo che con il vibe coding potete diventare ricchi immediatamente, potete creare un nuovo social network, un nuovo tool che rivoluzionerà la storia, eccetera eccetera l'AI come in tutte le cose non sostituisce anche in questo caso non sostituisce il professionista e l'AI soprattutto se è guidata male può apportare a degli errori gravi come in questo caso nel caso che vi ho mostrato quindi è certamente uno strumento utilissimo è certamente uno strumento che vi permette di fare tante piccole cose che possono esservi utili nel quotidiano adesso lo vedremo è anche uno strumento dove effettivamente potete poi andare a vendere dei servizi anche grazie al webcoding però ecco da qui a cambieremo il mondo perché abbiamo scritto a cloudcode generami il nuovo social network non fare errori ecco da qui ce ne passa di acqua bene parliamo invece di i livelli del webcoding vi mostrerò anche tre esempi anche pratici in questo caso che fanno parte del mio quotidiano anche. Io qua ho messo quattro livelli, in realtà tre più uno, diciamo uno si sviluppa un po' più in profondità, però diciamo partiamo dal primo livello, che è il livello base, ovvero la scoperta degli strumenti. Utilizziamo soluzioni in cloud molto semplici, molto intuitive, per realizzare dei prototipi, dei proof concept, oppure dei siti web semplici, siti web statici. Vi faccio un esempio, questo logo qua, Azzurra, è un'associazione della mia città di Trieste con cui collaboro, è un'associazione che si occupa di malattie rare, di bambini che soffrono di malattie rare. In riunione è emersa la necessità di poter trovare nuove forme di sostentamento per questa associazione e abbiamo proposto delle attività online che si possono fare. Tra queste mi è stata molto molto utile in riunione presentare una piccola landing page, un piccolo sito per fargli vedere non come deve essere adesso ma una sorta di proof of concept, quindi un'idea di come potrebbe essere un nuovo sito di Azzurra e una nuova attività. Ovvero aveva un proposto, e se lo apro, la possibilità per le persone esterne che volessero supportare Azzurra diventare fratelli digitali, fratelli e sorelle digitali di Azzurra, ovvero poter donare un corrispettivo mensile a una famiglia, famiglia totalmente anonimizzata, raccontata con un anonimizzato come vedete, famiglia sole, famiglia luna, famiglia arcobaleno. quindi anonimizzata e raccontata con tono giocoso se vogliamo, poter donare un corrispettivo economico, 5 ore al mese, una cosa di questo tipo, e poter ricevere in cambio delle newsletter dove raccontano che cosa è stato fatto con i soldi donati. È una cosa molto semplice, però effettivamente è stata estremamente utile in fase di colloqui, di confronti con l'associazione Azzurra. Piccola landing page e piccola pagina realizzata in 5 minuti con uno strumento che si chiama Lovable che poi vedremo. Bene, veniamo al secondo livello. Livello appassionato, se vogliamo. realizzazione di piccoli strumenti quotidiani o anche piccoli agenti magari quelli che possono andarvi a cercare news quotidiane su un vostro piccolo argomento eccetera o automazione comunque piccole cose piccoli strumenti che possono esservi utili io ho un esempio molto molto chiaro e chi ha visto le altre lezioni sicuramente se ne è accorto io ho questo qua in alto un piccolo strumento una piccola estensione di Chrome ok dove ho salvato i prompt per le mie lezioni ad esempio per quelle di studio SAMO ok? per studio SAMO PRO questo è un piccolo strumento molto banale una piccola estensione ma che mi salva molto tempo ok? quindi sono quei strumenti quei piccoli tool che vi permettono di risparmiare 5 minuti ogni volta che li tirate fuori ok? 5 minuti al giorno sommandoli tanti poi appunto avete risparmiato delle ore ogni giorno questo esempio è un organizzatore di prompt per salvarmi i prompt da utilizzare. Altro esempio invece, altro livello, invece è quello del livello professionale. Qua mi dividerei in due parti, ma soprattutto in base alla complessità dello strumento. A livello professionale, e noi alla fine di questa lezione arriveremo anche a realizzare uno strumento professionale, abbiamo la venta di software as a service, abbiamo i prototipi più complessi. Abbiamo la realizzazione di prodotti o tool che possono essere utili al nostro business, al nostro quotidiano, strumenti magari che possono essere utilizzati internamente in azienda, strumenti che non sono un sito statico ma che magari gestiscono accessi, autenticazione, hanno un database dietro, metodi di pagamento, hanno dei controlli di sicurezza più elevati. E perché io qua parlo di tre livelli più uno, perché appunto all'aumentare della complessità dello strumento e anche a livello di responsabilità che abbiamo, se abbiamo tanti utenti all'interno del nostro strumento o se dobbiamo vendere questo strumento, ecco, all'aumentare di questa complessità cresce anche il team che c'è dietro allo strumento che siamo andati a realizzare e ci si avvicina sempre di più al software engineering classico, quindi si saluta, si accantona un attimo il mondo del vibe coding puro e si arriva in più invece a dover capire il codice che abbiamo realizzato quindi vengono creati dei documenti specifici di design, questo poi noi lo vedremo per dare delle indicazioni chiare all'AI ma anche ai nostri collaboratori di che cosa bisogna realizzare il lavoro viene diviso per MVP, per cicli reversibili viene organizzato il debugging in maniera strutturata viene fatta manutenzione del codice da dei professionisti si creano documenti contestuali per l per sfecchiare bene cosa bisogna fare e delle policy anche sull'utilizzo dell'AI. Vengono utilizzate librerie, repo, prompt riutilizzabili, analitica, agenti, eccetera. Quindi quando si parla di livello professionale, si parte dal code in classico e poi dopo piano piano ci si avvicina invece ha semplicemente al software engineering supportato dall'intelligenza artificiale. Vi mostro un esempio di un prototipo un po' più complesso che ho realizzato, sempre con uno di questi strumenti in cloud molto semplici. Questo prototipo l'ho realizzato per un mio amico che aveva un ristorante. La storia in realtà è molto buffa, questo mio amico gestisce una catena di locali, di distoranti e non si trova spesso nella mia città ora quando c'è cerca sempre di invitarmi non va bene una birretta cose questo tipo allora un giorno lui mi invita e mi dice guarda sali un attimo su in cambusa devo fare una riunione veloce e poi dopo dopo sono di nuovo disponibile per te riunione veloce durata un'ora con la responsabile del locale di quel locale lì un'ora per discutere i turni essenzialmente da fare perché c'erano un sacco di turni da organizzare e soprattutto un sacco di variabili anche umane, allora gli ho detto sai cosa ti realizzo un piccolo progetto e questo è il prototipo di questo progetto con InViveCoding lui può entrare nell'area team nell'area team creare i profili dei propri dipendenti Franco Rossi, Lucia Rossi eccetera ognuno di questi si rinomano e cognome, quanto guadagnano all'ora, quante ore lavorano settimanalmente, le loro skills, in che cosa sono bravi, in sala, cucina o bar o quella cos'è, se stanno facendo training o meno, perché tra le variabili di cui mi hanno parlato c'era anche questo, eh ma Lucia magari non è tanto brava in bar, però magari se fosse messa accanto a Franco che invece è un barman famosissimo, ecco potrebbe imparare, quindi dobbiamo metterla in bar lo stesso le disponibilità ferie permessi limite di ore e poi soprattutto team dynamics e relational constraints quindi dinamiche di team ok dove si diciamo che Matteo non può stare con Paolo perché Paolo gli ha fregato la fidanzata il tool qui capisce che Matteo e Paolo non possono lavorare insieme ok quindi una volta creato diciamo tutto il team si va sul calendario si organizza si organizza i turni ok traffico che ci si aspetta si possono mettere più turni, in questo caso ne facciamo uno dai 7 ai 23, i requirements quindi dello staff, quindi una persona in sala, una in cucina, una in bar, limite di budget e si crea poi il turno e poi rigenera e viene generato il turno indicato anche la spesa eccetera. Per ognuno delle persone si può cliccare, vi viene detto quanto hanno lavorato una settimana, quanto è previsto che paghino e viene data anche una spiegazione del perché è stato scelto in quel turno. Allora questo è un esempio di strumento abbastanza facile, qua nella dashboard per il riassunto, abbastanza facile che si può realizzare, che però ha avuto bisogno, potete vederlo, di un po' di interazione, di un po' di discussione tra me e l'AI per poterlo realizzare. Ora siamo già a un livello più professionale, arriveremo poi per realizzare non con questi strumenti in cloud ma con altri strumenti, in particolare cloud code. Allora, perfetto, bene, ora che abbiamo discusso un po' di questi strumenti, di questi livelli scusate, passiamo a scoprire invece gli strumenti. Ce ne sono un'infinità nel mondo del vibe coding. Il mio consiglio è di trovarne uno in cloud con cui vi trovate bene, che può essere Base44, Lovable, Bolt, eccetera. Altri invece che fanno parte di uno stack che già utilizzate. Cosa significa? a volte ci si chiede ma qual è lo strumento di AI migliore che deve utilizzare deve utilizzare CGPT, deve utilizzare Cloud, deve utilizzare Gemini eccetera eccetera allora questi tre in particolare hanno uno stack dietro ovvero non fanno soltanto CGPT, Gemini eccetera ci sono delle aziende dietro, c'è Anthropic, c'è Google, c'è OpenAI ecco ognuno di questi ha dietro lo strumento per generare le immagini lo strumento per generare video, lo strumento per generare audio lo strumento appunto per generare codice Ora, questi essenzialmente fanno uscire un modello nuovo, uno strumento nuovo ogni giorno, ok? Ogni giorno o una volta a settimana se proprio vogliamo, ok? Quindi se oggi io sto utilizzando Cloud Code, ok? Perché mi posso trovare bene con Cloud Code, ok? domani però esce un modello fortissimo di Gemini non sono obbligato a passare a Gemini Antigravity e quello che è ok? o Codex di OpenAI non sono obbligato a passare di nuovo su OpenAI e lì c'è uno strumento fortissimo fantasmagorico ok? perché tanto tra un mese CloudCode raggiungerà di nuovo quel livello ok? chiaro se siete persone che campano di AI e fanno divulgazione sull'AI eccetera eccetera allora sì chiaramente cercate di restare aggiornati il più possibile, ma se siamo persone normali che lavorano magari in un'agenzia, eccetera scegliete uno stack che sia possa essere quello di Google, quello di OpenAI o quello di Antropic e andate avanti in quella maniera, ok? Tra questi troverete ovviamente anche la vostra soluzione per generare il codice, ok? Bene oggi vi ne mostro tre di questi strumenti appunto Lovable, Base44 e CloudCode e lo facciamo e lo facciamo cercando di realizzare delle cose che effettivamente possano esserci utili partiamo da Lovable Lovable io ve lo mostro perché in primis è molto semplice e molto intuitivo ha una ottima user interface comprensibile da tutti ed è sfrutto molto forte nel front end nel generare l'interfaccia grafica nostra parte proprio dal persupposto ok ho un'idea allora vado e creo il sito ok di quest'idea se sapete posso dire così che se sapete scrivere un brief ok sapete anche già usare lovable bene vediamo come possiamo realizzare una landing page molto semplice apriamo lovable lo potete scrivere tranquillamente con il vostro account google ok perfetto perfetto allora mi prendo un attimo i prompt e poi e poi lo leggiamo insieme allora aspetto fondamentale poi lo leggiamo un attimo i prompt nel nel AI nel vibe coding nel mondo del vibe coding il prompt fondamentale tanto quanto qualsiasi altro utilizzo che voi facciate dell Quindi se il prompt engineering era una cosa chiave per poter dialogare con CIGPT CLODE o quello che volete è ugualmente importante anche per gli strumenti di vibe coding. Un buon prompt fa tutta la differenza del mondo e la struttura è la stessa, la stessa con qualche piccola differenza, ma è la stessa per la scrittura dei prompt. ok? o meno i principi sono gli stessi per scritto dei prompt su qualsiasi altro strumento dei AI quindi vi viene dato un contesto vi viene detto che chi siete e cosa state facendo sono un capo della divisione marketing di una palestra sono stato incaricato di realizzare una landing page per far iscrivere potenziale cliente i nostri corsi di acro yoga ok? vi viene dato un obiettivo ok? un obiettivo da realizzare progetta la landing page e qua non solo un obiettivo ma anche un ruolo quindi progetta la landing page come se fosse un marketer esperto nel mondo B2C con focus sulla fase TOFU e MOFU, quindi top middle of the funnel, e l'obiettivo di raccogliere contatti email di potenziali interessanti. Quindi gli viene dato un obiettivo chiaro e un ruolo, come vedete, molto dettagliato. E poi gli vengono dati dei limiti progettuali di che cosa deve fare. Realizza la landing page con l'obiettivo di massimizzare l'attenzione dell'utente nella sezione hero della pagina, invitando l'utente a lasciarci il suo contatto email. Considera un target tra i 25 e i 40 anni, sia maschile che femminile, nella provincia di Trieste. focalizzati molto sul fatto che è un'attività che fa bene per la salute ed è un ottimo modo per fare sport in coppia con un amico o amica usa colori caldi che richiamano l'attenzione e la passionalità di questa disciplina per l'immagine usa siluetta stratta ispirata all'acroyoga non dobbiamo fare altro quindi abbiamo scritto il nostro prova, sono stati molto dettagliati e abbiamo seguito la struttura classica quindi contesto, ruolo, obiettivo e limiti adesso diamo un po' di libertà a Lovable vedremo che in pochissimo tempo andrà a realizzare il nostro strumento in generale quando andiamo a definire i dettagli appunto del nostro prompt andremo a toccare i dettagli sull'obiettivo che noi abbiamo con questa landing page andremo a toccare i dettagli estetici, che colori vogliamo possiamo ovviamente andare a inserire immagini, il nostro logo tutte cose che noi chiaramente possiamo andare a fare e andare a specificare Intanto vi posso dire, mentre lo strumento lavora, che il piano base ad oggi costa 25 euro al mese. Potete ovviamente avere i piani gratuiti per iniziare. Avete dei crediti che potete utilizzare giornalmente. Comunque il piano base costa 25 euro al mese e avete anche a disposizione il dominio personalizzato nel piano base. potete effettivamente utilizzare il sito per realizzare landing page, siti statici eccetera una cosa molto interessante che si è vista ultimamente molte persone stanno aprendo questi piccoli business legati al mondo dell'AI, legati all'Ovable in particolare dove semplicemente contattano delle piccole PMI contattano delle realtà che magari non hanno un sito web o ce l'hanno poco aggiornato molto vecchio, datato e in pochissimi minuti raccogliono informazioni su questa azienda, forniscono l'informazione lovable, creano un prototipo, una base di sito web, di landing page e poi inviano via email, lo fanno loro o magari lo fanno degli agenti, inviano un email a queste piccole attività e fanno guarda ho visto che il tuo sito web è un po' datato. se vuoi ho realizzato una piccola versione di questo sito web una nuova versione del tuo sito web fammi sapere cosa ne pensi magari possiamo entrare in contatto e lavorare insieme e così iniziano a realizzare piccoli siti web veramente spendendo pochissimo come dicevo 25 euro al mese eccolo qua perfetto ho già realizzato in un paio di minuti il nostro sito web potete vedere insomma landing page con i bottoni per prenotare adesso non è perfetto chiaramente, però quello che possiamo fare, possiamo vedere il codice possiamo andare a chiedere ulteriormente alla chat di fare delle modifiche possiamo chiedere metti più in evidenza il bottone per la prenotazione con un colore più scuro, ad esempio abbiamo qui la chat a disposizione per poter fare tutte le modifiche che noi vogliamo. Comunque una landing page bella, pulita, clean che veramente ci abbiamo messo due minuti a realizzare ecco vedete mi ha cambiato in poco tempo mi ha cambiato anche il bottone perfetto probabilmente si stava anche bisogno di caricarsi comunque insomma strumento molto semplice ha una buona UI è molto carino e riesce insomma immediatamente a darvi una soluzione non solo sul sito web di Lovable avete anche un sacco di risorse, di template un sacco di risorse, di template che potete utilizzare per poter realizzare i vostri siti web anche questi sono di ottima qualità vedete, adesso ne ho scelto una a caso vedete, ottima qualità per essere AI quindi se cercate qualcosa che non assomigli troppo all'AI o che non sia troppo visibile che sia AI potete guardare anche nei vari template ci sono delle cose molto belle, interessanti create da altri utenti bene, un'altra cosa che possiamo fare con Lovable riguarda la parte del prompt engineering è che non solo possiamo scrivere noi il prompt ma possiamo anche effettivamente fare metaprompting cosa significa? che se non vogliamo perdere tempo noi a scrivere il prompt possiamo aprire FGPT o il nostro large language model di fiducia che è qua da copiarmi il prompt e chiedere sei un esperto prompt engineer by Coder esperto nella generazione di landing page per la piccola e media impresa italiana l'obiettivo è realizzare una landing page per un'azienda che vende attrezzi da giardino e vuole far iscrivere i propri clienti ad una newsletter dove raccontano storie segreti per avere il giardino perfetto inventato un po' così chiede un prompt approfondito e dettagliato per il tool Lovable e CGPT ci andrà a creare il prompt perfetto che noi andremo a copiare su Lovable e andremo a creare un nuovo sito web un nuovo valentine e i dettagli, sempre da un ruolo poi da un obiettivo, spiega il target spiega tutto quello che abbiamo detto prima in maniera molto più approfondita di come potremmo farlo noi dà anche una struttura della landing page uno dice come deve essere la hero section ovviamente tutta questa cosa potete andare a modificare come desiderate adesso non serve che andiamo a realizzare il nuovo sito però la cosa essenziale è che potete copiare questo mega prompt scritto da cgpt possiamo darlo a lovable e poi potete realizzare tutte le landing page che volete Bene.