Chi sono vado molto veloce, se avete visto i miei vecchi webinar, mi occupo di sviluppo e consulenza in ambito di intelligenza artificiale.

E quindi sicuramente lo sviluppo um ho visto molto molto um con attenzione questi nuovi strumenti um fin dal giorno in cui sono nati e sono stati messi un po' nel mercato.

Ed ecco qui che um vorrei riportarvi un po' e la mia esperienza e darvi strumenti per approcciarci a questo strumento.

allora Ci tengo a sottolineare che è un webinar in due parti.

um il questa prima è più introduttiva, andremo a fare un'applicazione più più più introduttiva, nella seconda andremo ancora più, nei dettagli e nei cavilli um per andare a programmare.

Creare WebA nel CL, questo è un po' la narrativa che um sussiste nei social, su LinkedIn ex, ex Twitter.

um questo di creare web app semplicemente scrivendo cosa vogliamo, un po' il sogno se vogliamo di tutti i non tecnici, che magari hanno una forte creatività, mi servirebbe un'app che fa questo.

allora Sai cosa sarebbe? Sarebbe veramente bella un'app che fa questo ecco di solito queste sono le le frasi che si sentono a persone non tecniche ma che hanno una diciamo uno spiccata um creatività e vogliono realizzare una propria idea.

Cosa vedremo? Lovable, le basi, funzionalità, integrazione, prompting e faremo un esempio di applicazione funzionante.

Che cos'è Lovable punto D? per chi non l'avesse mai um provata, è una piattaforma che ci consente di creare una web app, um full stack, adesso vediamo anche per i poco tec- per i meno tecnici, um cosa significa full stack, descrivendo l'idea, il linguaggio naturale.

Ad esempio, voglio un'app che um mi crei un riassunto di un video.

E um Lovab, A differenza di piattaforme semplici come CGPT non solo scrive il codice, ma scrive più pagine di codice.

Le connetti insieme e poi fai in modo che queste pagine vengono deploiate, ovvero, vengono messe in un server e fare in modo che le persone poi possono utilizzare quest'app.

possiamo esportare il codice e collaborare in tempo reale su un progetto.

La promessa è questa voglio un'applicazione che che che mi guida durante la meditazione durante una meditazione.

Ed ecco che abbiamo la nostra applicazione funzionante di meditazione che possiamo potenzialmente attestare sul mercato.

Ora, prima di iniziare come funziona Lovable, avete un piano free, con cinque crediti al giorno, un credito è uguale a una richiesta, um nella chat, nella chat prompt, adesso vediamo l'interfaccia, quindi seguitemi un attimo e poi tutto sarà più chiaro.

Una richiesta, ad esempio, creiami una web app che è dato un video YouTube, crea un riassunto dettagliato, questo è una richiesta.

Quindi abbiamo cinque crediti con 25 $ al mese, abbiamo 100 crediti al mese che non sono cumulabili attenzione, se non li usate in un mese purtroppo, andranno sprecati.

Con 30 $ al mese avete um anche un, 11 sistema, avete gli stessi crediti però un sistema di gestione TIM, quindi più persone possono collaborare sullo stesso progetto e c'è una gestione migliore.

E poi ci sono dei tiers, vado avanti, eccoli qua i tiers, quindi per cento messaggi al mese 25 $, per 250, per 400 messaggi, um crediti 100 $ e così via.

Ve la lascio qua nelle slide così vi fate anche un'idea.

um In media perché è una web app semplice, serviranno una ventina trentina di prompt occhio e croce a livello empirico vi dico eh? Cosa ci permette di fare questa applicazione? Andiamo a fare, vi ho lasciato uno schema così che vi possa tornare utile anche come reference card.

Per creare le applicazioni.

allora Questa è la nostra interfaccia di base che andremo a usare brevemente, dove abbiamo una casella di testo dove inseriamo effettivamente cosa vogliamo che l'app faccia.

Ad esempio crearmi un'app che mi guida durante una meditazione e mi può fare un tracking del mio mood.

Quindi qui inseriamo modifica l'accesso, possiamo farla pubblica, quindi renderla pubblica a tutta l'audience di Lovable oppure farla privata.

Possiamo caricare delle referenze, quindi se abbiamo uno screenshot di un'applicazione che ci piace, lo possiamo mettere dentro e dire guarda il front end, ovvero quello che l'utente vede dell'applicazione deve essere um simile a questo.

E questo è il tastino by b nel senso che lo clicchi e poi le cose avvengono.

La seconda parte è la chat laterale, quando si um apre un progetto, lo vediamo brevemente fra- fra poco a breve lo vediamo tutto, abbiamo una chat laterale dove possiamo fare richieste aggiuntive.

Aggiungi questo, fai quest'altro.

E come si configura questa chat? beh se, Semplice casella di testo, possiamo anche qui, fare un allegato di una interfaccia grafica eccetera, e poi c'è questo pulsantino con il quale possiamo indicare, perché a sinistra poi abbiamo la web app, che effettivamente um la possiamo vedere, possiamo an-, La possiamo vedere proprio nella sua funzionalità, possiamo cliccare sopra un elemento e dire modificami questo elemento, oppure guarda che questa cosa deve essere di un altro colore, oppure collega questo bottone a una funzionalità.

Quindi è lo vediamo a breve, è una funzionalità molto interessante.

Poi c'è questa questo pulsantino che è chat.

Quando scriviamo qualcosa nella chat laterale andrà a modificare il codice, ma se noi volessimo solo chiedere un consiglio, ad esempio, cosa mi consigli fare per sviluppare una funzionalità EI che va a riassumere tutte le mie meditazioni? ecco Per fare in modo che non modifichi il codice ma mi dia solo un'informazione, dobbiamo premere questo pulsantino.

le cose più interessanti è che ci sono delle integrazioni l'integrazione diciamo base è quella di Supabase.

Vediamo a breve cos'è, ma in soldoni è quello che ci permette di far diventare un'applicazione una web app oppure ovvero connette la nostra applicazione in un database, in modo tale che una volta che io loggo e esco dall'app e mi riloggo tutti i miei file sono là e ci sono poi delle funzioni.

Ad esempio, voglio chiamare Open GPT, il quattro per fare un riassunto e gestirà tutto questo questa logica che l'utente non vede, ma è il cervello dietro ogni webhub.

Poi possiamo integrarlo con GTub che per chi programma immagino conosca benissimo, è un ambiente dove um c'è il versionamento del codice, dove hai una storicità del codice ciò che cambi e poi puoi pubblicarlo.

Se um una volta pubblicato hai il il la web app funzionante e deplata.

Poi sulle impostazioni adesso vediamo come arrivarci, c'è la knowledge.

È un po' un system prompt che possiamo dare a ogni progetto, per fare in modo che lui ogni è una conoscenza che condivide con il progetto.

Ovvero posso dire la mia il mio obiettivo è quello di creare una web app che ha questa finalità, questo obiettivo, e questa informazione verrà utilizzata sempre, prima di tutti i prompt che noi inseriamo.

Poi c'è una history dove possiamo andare a vedere la storia della nostra web app, e poi c'è il dev mode dove possiamo modificare potenzialmente anche il codice a mano.

Tutto questo adesso è una reference che um rimarrà, qua nelle slide, adesso però vediamo in pratica perché poi tutte queste, um schermate lasciano il tempo che trovano, lo vediamo subito nella pratica.

Come vedete qua abbiamo sicuramente anche una parte molto interessante di templates, ovvero ci dicono vuoi fare un fitness tracker, vuoi fare una una listing, quindi una directory, per quanto riguarda degli immobili, possiamo, um cliccarci sopra e sono de- una sorta di template che poi possiamo personalizzare.

E poi alla fine quando abbiamo fatto lo pubblichiamo, possiamo connetterlo al nostro do- dominio oppure lasciare il dominio, che è un sottodominio di Lovable punto app.

allora Alberto dice che non sente niente, fatemi sapere se questo è un problema comune oppure è un solo è un problema solo mio.

um intanto vado avanti.

Se non leggo altre altri messaggi simili.

Uh, vado avanti.

Okay.

um Labs, su Labs vediamo le features beta che escono.

um che escono in um successivamente per esempio qua c'è una funzione beta in questo momento in cui, Registrando in cui puoi selezionare a livello tecnico il branch di GitHub.

E poi un'altra cosa importante sono le integrazioni, cioè se vogliamo fare una web app integrata con Stripe, quindi che accetta pagamenti, è già configurato per interfacciarsi con queste applicazioni.

Poi, come vediamo c'è l'integrazione di GitHub, abbiamo già parlato per avere il codice versionato.

Abbiamo l'integrazione con Supabase, abbiamo l'integrazione con il dominio custom.

Per i non tecnici non vi preoccupate, a breve tutto questo sembrerà molto semplice, per i più tecnici invece quello che dico è che se avete un grip tecnico sopra questi strumenti potete velocizzare di molto lo sviluppo.

Ci sono integrazioni appunto anche verificate e non ufficiali, ad esempio Builder IO ci permette di trasformare qualsiasi nostro file Figma in una web app in un click.

Per quanto riguarda OpenAI, quindi possiamo già interfacciarci con tutti i vari strumenti di intelligenza artificiale, l' API di intelligenza artificiale, poi per quanto riguarda anche Anthropics um quindi cloud eccetera, c'è un'integrazione, questo ci permette di um um di visualizzare grafiche 3D nella nostra app, e ce ne sono tante altre.

Ve le lascio e poi nell'avanzato andremo ad applicarne alcune di esse ma anche oggi ne applicheremo una.

Piccolo piccolo momento D time per i developers, sarò molto veloce qua.

Per i non developers vi de- è molto importante se c'è qualcuno che sta ascoltando, che non ha delle basi anche minime di um dev, è importante averle.

allora dovete capire che c'è ogni volta che vediamo un'applicazione c'è una distinzione tra il front end e il back end.

Il front end è tutto quello che noi vediamo, okay? Vediamo una casella di testo, un bottone.

un qualcosa è la logica dell'utente diciamo più visuale.

Il backend invece, è la logica che è dietro il software.

Ad esempio, se io chiedo, um entrando nella piattaforma learn, nel momento in cui clicco in un video, quello che vediamo è il front end, ma una volta che clicco in un video, il back end è quel softwarino che andrà a chiedere al server, guarda che l'utente sta chiedendo una richiesta di streamare questo video.

e faglielo vedere.

E quindi prenderà tutta questa, ho semplificato eh, i più tecnici non me ne vogliate, è il modo più semplice per spiegarlo a persone meno tecniche, quindi è la logica che c'è dietro.

ecco È molto importante, um che questi strumenti gestiscano entrambe le parti, mentre il front end, se vogliamo, è più semplice da parte le hai, andare a configurarlo il backend un po' meno, ecco che viene in supporto supabase.

Su base è un must se vogliamo utilizzare l'ovaball perché è WebA è un backend data service.

Dobbiamo connetterlo per fare in modo anche qui, Semplifico al massimo che un utente si possa registrare, possa comprare un abbonamento, possa modificare le proprie impostazioni e allo stesso tempo vengano fatte le giuste richieste EPI per l'applicazione che verrà che verrà creata.

Qui due slide per i tecnici che non leggo neanche s- su quali sono le tecnologie che utilizzano l'ovable, per scrivere codice, quindi se ci volete poi mettere le mani sapete che il Frontendo utilizza React um 18 script, Winch SS, eccetera eccetera.

Il back end, Queste tecnologie qua, soprattutto su base.

Finito, um end of the time e adesso vediamo l'esperienza della creazione di un'app.

Prima le vediamo sulle slide con dei prompt copia incol che potete provare alla fine di questa lezione, volendo.

um Poi um con dei um lo f- lo lo vediamo insieme, cercheremo di creare una web app nel tempo che um che che rimane.

Prima, scusate, prima di farvi vedere questi prompt copy and call, andiamo a vedere i limiti perché tutto è bello però c'è da considerare un po' di aspetti.

Gli aspetti da considerare sono um sicuramente tecnici.

Non è oro tutto ciò che luccica.

Ci sono stati già delle delle esperienze, sentite sentite questa questa è veramente grande, un influencer molto grande um al agli albori della nascita di questo strumento.

ha creato una web app, un SAS, che um poi ha venduto la sua audience.

Tempo un giorno avevano già bucato il database.

L' API è la chiave segreta con il che, connessa all'account OpenAI, quindi pagando ogni richiesta di intelligenza artificiale, era stata messa nel front end e poteva essere presa tranquillamente.

Non aveva um minimamente controllato i privilegi di rotta e quindi le persone potevano arrivare, potevano scavalcare il paywall.

E ragazzi è una tragedia, una tragedia, quindi attenzione, attenzione, perché questi strumenti sono sì interessanti, per dei prof proof of concept, per dei pilot, per delle piccole cose, ma un minimo di supporto di una persona, tecnica che vada a sistemare il tutto a livello di sicurezza eccetera, ci vuole, mi raccomando, Questo è l'u-, cioè questo è non non è non è un consiglio, è un must.

Quindi non non non me lo non ve lo sto consigliando, se volete utilizzarla in maniera giusta dovete poi alla fine far dei controlli, tecnici da parte di una persona che possa fare.

Vediamo per i limiti.

I limiti sono questo, che, sì okay, ci permette di creare WebA, ma qual è il vero costo della web app? a livello di crediti? Voi non pensate che scrivete adesso, voglio una web app che fa questo e tutto funziona, a parte che lo vediamo insieme, vedremo ci sono degli errori.

Quindi ogni messaggio in, Sconsuma crediti e quindi più vado avanti e dico cambia questo, questo non funziona, quest'altro non funziona più, spreco crediti.

Questo forse è il minore dei limiti.

Qualità del codice, l'Outlook spesso non è ottimizzato, è ridondante o fuori delle best practice.

Anche qui non pensate di creare la web app scalabile con Lovable, per ora.

Però possiamo sicuramente fare qualcosa di molto interessante, funzionante che può andare a validare un mercato con MVP.

Personalizzazione avanzata limitata.

Nelle slide tecniche, quelle in cui ho messo le librerie software, Ho messo tutto quello che loro utilizzano, tutto ciò che non sta in quelle slide non viene utilizzato oppure dobbiamo farlo manualmente.

Quindi non c'è questa grande personalizzazione nell'utilizzare, altre librerie che non sono incluse, lo posso fare ma esportando il codice e a manina me lo faccio.

Backend unicamente subabase, quello che ho detto prima, non possiamo mettere un altro backend, per i più tecnici può essere appunto altri linguaggi, ma dobbiamo utilizzare sempre subabase.

Poi debug complesso.

Quando abbiamo un bug, soprattutto dopo tante richieste, è molto difficile debuggare, a meno che non abbiamo uno sviluppatore, um che può andare ad avere un attimo il codice e chiedere la giusta cosa, perché abbiamo capito che il prompt engineering, avete già visto, magari i corsi, il learn eccetera, e e fare le giuste domande per ottenere le giuste risposte.

ecco Qual è la giusta domanda, se sono una persona tecnica posso fare la giusta domanda, se non lo sono, posso tentare la fortuna, ma alcune volte um non avrò risultato, quindi il debug potrebbe essere complesso.

Scalabilità e manutenzione, l'ho già detto, non pensate che, così come viene fuori è già un software scalabile, dobbiamo metterci le mani.

La sicurezza, vi ho già fatto l'esempio dell'influencer che ha creato l'applicazione senza controllare nulla in sicurezza in poco tempo è stato bucato.

E poi, sta ancora in una beta, ci sono delle delle um dei cambiamenti rapidi, ogni giorno entro e vedo che qualcosa cambia eccetera.

Probabilmente se stai guardando questo video in differita, oggi siamo il 21/05, magari lo vedrai tra un mese, Ci saranno altre funzionalità, altre cose, ecco perché l'obiettivo in queste mie lezioni è darvi più o meno la metodologia di a- approccio più che farvi una disamina di tutte le funzionalità, um più specifiche cioè, le vedremo, eh, le vedremo, però, l'importante è capire come approcciarsi a questo um vibe coding.

Quindi qui ho- ho creato un meme molto semplice, creare una piattaforma scalabile in tre mesi, no, creare un MVP in CL in tre giorni, sì.

allora C'è questa citazione del caro Reid Hoffman di Linclin che se non sei imbarazzato um della tua prima versione del prodotto allora è lanciato troppo tardi.

ecco Diciamo che il vibe coding va verso questa direzione, verso un prodotto che, um si tiene.

in piedi un po' con lo scotch, con il Patafix e altre strutture di fissaggio, ma alla fine, barcollo ma non mollo.

Questo è quello che dice l'applicazione appena uscita da da dal by coding con le giuste accortezze.

Che andremo ancora più a sviluppare nella seconda sessione, il secondo webinar che faremo.

How to fight coding e qui c'è una serie di prompt, copia incolla, da utilizzare in local.

um Questi prompt portano alla creazione di un social network.

Okay? Testati funzionano, presi nel loro blog ufficiale, quindi vi ho lasciato un po' 11 tutorial, nero su bianco, modificato un pochino con delle mie accortezze su come creare un piccolo social network, un proof of concept e un social network funzionante.

Questo può essere utile non tanto um con le giuste accortezze, può essere anche lanciato sul mercato, ma un'altra funzionalità interessante, E avere un qualcosa di interno da testare perdere, ma funziona, la user experience ci sta, oppure vogliamo creare un prodotto, creiamo un piccolo, pilota con l'ovab lo facciamo vedere magari al team, agli investitori, al mercato, vediamo il mercato come risponde e poi investo in maniera abbastanza importante sullo sviluppo per renderlo scalabile eccetera, okay? um E quindi questo um eccetera.

um Leggo il commento di Antonio che dice aver messo in evidenza i limiti, ti ti ti rende onore perché fa credere, um perché far credere, e lo dico, perché quando ci ci prova che non deve avere un minimo di competenza e di conoscenza è poco professionale, almeno per il momento.

Guarda Antonio, um gli sconti di Dev quindi non lo posso pensare altrimenti.

Quindi so so, ho sperimentato, ho messo sotto torchio il mio CTO e effettivamente abbiamo visto un po' tutti i limiti.

Quindi ecco, come fare vibe coding? Il primo pronto potrebbe essere creare un'applicazione social media in cui gli utenti possono iscriversi, creare post, contesto, immagini, mettere mi piace, commentare post e seguire altri utenti.

L'app deve avere un'interfaccia utente moderna, con un feed, pagine di profilo ed indicazioni tramite mail.

Questo potrebbe tranquillamente essere il primo prompt nel nostro web coding.

ci genera.

Vete, abbiamo una una colonna di prompt al lato e qua abbiamo già il risultato che possiamo vedere e ci genera già questa interfaccia.

Dopodiché dobbiamo affinare.

Quindi aggiungi l'autenticazione degli utenti con l'email gli utenti devono essere in grado di registrarsi, accedere e uscire in modo sicuro che crea questo output.

Dopodiché connettiti con subabase che è il database dove vengono registrate queste persone e possono poi accedere con dati e magari ecco mantenere la memoria, di questo feed del social network.

E c'è questa connessione, adesso vediamo tutto nella pratica, eh? Adesso sto facendo una rapida carrellata ma andiamo a svilupparlo da 0.

E possiamo connetterci quindi a database e vediamo in maniera pratica, cliccando questo pulsantino vi faccio vedere in due o tre passi come fare.

Poi aggiungi un sistema di profili utenti in cui gli utenti possono impostare un nome, una biografia e bla bla bla e crea tutto questo.

Consente agli utenti di modificare il loro nome nel profilo.

Vedete com'è iterativo, dobbiamo una features dopo features, dopo features andrà a implementare qualcosa che um potrebbe essere interessante.

Poi implementa una funzionalità di creazione posta dove gli utenti possono condividere aggiornamenti, contesto e immagini.

Questo ve l'ho lasciato per farvi capire che nella web app non pensate che mettete un unico prompt e verrà generato tutto, anche nel se nel primo prompt includete, Tutte le informazioni verranno prese solo alcune di esse, messe nella nella pratica e poi le altre magari dovete ripetergliele.

Quindi un consiglio che do di prompting per questa applicazione, andate inizialmente un prompt generalista, e poi andate di features in features.

Quanto più piccolo è è meglio è perché si concentra solo su quella feature e magari ha una migliore, un migliore output.

Abilita l'archiviazione.

Crea feed in stile timeline che mostra i post in ordine cronologico, aggiunge una funzionalità di like and like, abilita il sistema di commenti dove gli utenti possono aggiungere commenti sotto ogni post, mostra il numero totale di like e commenti sotto, aggiungi una barra di ricerca globale.

Garantisce un design completamente reattivo per i disponibili mobile, e poi ecco che abbiamo il nostro codice e il nostro TTB, connesso a subabase che possiamo effettivamente deploiare e lanciare.

Tutto questo, e qui ripeto, è molto importante che una persona tecnica, CTO developer, vada a manualmente a vedere ognuna di queste caselle.

Testing, meglio se unit test.

Fix minori, ad esempio piccoli bug e ce- piccole um magari cose che non siamo riusciti a far bene.

Bug fix, quindi ci sono dei bug che magari devono essere fissati e sicurezza, questa forse è la più importante.

Una volta che abbiamo un, Un semaforo verde con questi um con questi quattro check, allora possiamo lanciarla come M- MVP sul mercato.

Questo mi sembra abbastanza doveroso dirlo perché è è è è un dato di fatto.

E dopodiché adesso andiamo a provare a questa introduzione teorica andiamo a toccare con mano tutto.

Prima rispondo a Gianluca cosa ne pensi Rapid l'hai mai provato? um Rapid sì assolutamente, l'ho provato un ottimo strumento che va verso una direzione simile a Lovable, um ma credo che l'all in quest'ora per il web vibe coding per l'argomento di che stiamo trattando sia uno dei una delle piattaforme migliori.

Ne esistono altre e sono molto similari.

Quindi il workflow che vediamo oggi per Lotable sono molto simili su altri strumenti di vipe coding.

Ne cito alcuni bolt punto news, adesso DeepSek ha creato il suo che tra l'altro è anche open source, che si chiama Deepsite.

Al netto di questo, facendo un po' di prove, credo che Lovable è quello che arrivi un output migliore.

Perché magari integra delle librerie più carine, più bello l'estetica, piccole cose che sicuramente possono far la differenza.

Andiamo in Lab, andiamo a vedere questa questa bellissima piattaforma, um eccoci qua, passo a un'altra scheda.

Questa è co- questo è come si presenta Lovab.

Okay, build something Lovable it to up in seconds.

um Dall'idea all'applicazione in secondi, il tuo personal full stack engineering.

Perfetto.

Come vediamo, un po' le le le le le um um le finestre di che abbiamo già visto nelle slides, um abbiamo la nostra casella, possiamo qua fare l'attach di um un, un'immagine che vogliamo copiare, magari un front end, facciamo lo screenshot, lo inseriamo.

Qui abbiamo già delle dei consigli, e-commerce product page, Confetti animation che sarebbero eguagliandoli, SAS landing page.

Per landing page, per esempio Lovable è fenomenale perché è quasi tutto frontend, non c'è sicurezza, non c'è niente, è molto buono per fare la parte grafica.

Recipe finder, probabilmente è un'applicazione che ci fa, trovare e cercare le ricette.

Se andiamo sotto questi sono i nostri progetti.

Che abbiamo nel in pancia che stiamo lanciando.

Poi c'è una sezione molto interessante F community dove possiamo prendere ispirazione, okay? Questi questi progetti che vediamo possiamo prendere ispirazione e fare un remix.

Che cos'è il remix se se ha- se questi utenti hanno concesso di creare il remix? È prendere il loro um la loro applicazione e creargli un twist.

No, modifica questa applica-, mi piace la grafica, mi piace tutto, modificala in questo modo.

Ad esempio io vedo già in preview che questa c'è una grafica accattivante, ci clicco sopra.

Ton table O, O, scusate.

Platinum Card Ding without the card, mi sembra molto molto carina, com'è fatta, okay? Se l'hanno concesso posso fare un remix di questo um di questo progetto, in questo caso credo che non hanno concesso perché non posso appunto andare a fare il remix, però ecco, um possiamo possiamo sicuramente fare uno screenshot e dire fammelo uguale, fammi lo stesso effetto, um me- metallo per la scritta, eccetera eccetera, mhm? E quindi qua sulla community abbiamo veramente molte idee che possiamo in qualche modo rubare come un artista, ispirarci eccetera.

Altrimenti incominciamo proprio a a pubblicare una nostra applicazione, possiamo scrivere qualsiasi cosa, qualsiasi cosa.

Ora sarebbe interessante um andare a creare un'applicazione da 0, mhm? um allora a me è venuta in mente un'applicazione, prima di entrare nel webinar, stavo facendo un brainstorming su cosa possiamo creare, um se voi siete d'accordo un'applicazione um che um ha, Un um crea un mind, un un'applicazione in cui possiamo dire i nostri pensieri.

Qualsiasi cosa ci venga in mente e abbiamo un analizzatore EI che analizza tutti i nostri pensieri.

Il mio problema principale è che mi vengono in mente tante idee, ma poi le scorto, invece un'applicazione dove posso fare il mind dump, si dice no? E quindi, gettare tutte le mie idee e poi a fine mese fare un'analisi su quali sono state tutte le mie idee e avere un riassunto che magari mi mi mi mi dia un insight su quali sono stati un po' i miei pensieri a livello professionale, a livello di lavoro, eccetera.

Quindi a questo punto um ci sono due strade, scriviamo il prompt oppure ce lo facciamo scrivere a CGPT.

Okay? Questa è un'altra strada molto molto interessante, per magari ecco prima ecco, questa empiricamente parlando vi do un consiglio.

Prima di scrivere una cosa qua nell'app, fatevi un'idea, fate un brainstorming, sul quale potrebbero essere le features dell'applicazione, eccetera eccetera eccetera.

E per questo io utilizzo spesso e volentieri um il mio il mio caro amico CGPT.

Però in questo caso adesso andiamo molto veloci um e quindi facciamoci, um pensiamo insieme.

allora Vorrei, anzi sviluppa, Una web app.

Che, Mi permetta.

D.

Memorizzare i miei pensieri.

Stile mind dump.

Posso inse- inserire.

I pensieri sia, Digitandoli che parlando, per la parte.

Text to speech, quindi da scusa speech to text, quindi dal, speech to text, utilizza, funzioni native del browser.

Oh, qui mi fermo, qui mi fermo per una questione.

Utili questa frase qua, quando ho detto no, che è molto importante.

Sapere di cosa stiamo parlando, io l'ho scritta perché ho una conoscenza pregressa.

So che ci sono delle funzioni native da browser che mi consentono di fare la traduzione dal parlato al testo.

Se non l'avessi specificato probabilmente avrebbe preso un l'PI di Open EI, che tramite intelligenza artificiale ci um trascrive quello che stiamo dicendo, però è un'altra chiamata, è un altro costo.

E quindi ho detto per risparmiare il costo ci sono delle funzioni native, utilizza quelle piuttosto che altre.

ecco che quando dico che okay vibe coding tutti possono fare la propria applicazione, ma nel momento in cui stiamo ora con la maturità odierna, per me avere un minimo di una base sicuramente è utile.

Poi possono farlo chiunque, però è utile affiancarsi magari con una persona che tecnicamente ci può dare delle dritte.

um Poi ci deve essere un una sezione.

D um una sezione con un bottone che, um Può.

Che deve generare un sunto di tutte le mie idee.

Questo bottone userà, Open Le api di OpenAI, che prenderà tutti i miei pensieri, memorizzati E ne farà un'analisi.

Ora potevamo fare molto meglio su questo prompt, possiamo fare brainstorming adesso anche visto un po' in ritardo eccetera, andiamo e incominciamo in con questo prompt e vediamo um effettivamente il primo step, come come, ma aggiungiamo solo questo, um bisogna inoltre, fare in modo che l'utente si logghi.

Quindi che abbia delle credenziali.

Una volta che c- clicchiamo, ecco che esce la, finestra che abbiamo visto precedentemente nelle slide, quindi vedete, questa è la chat dove possiamo fare richieste ulteriori, okay? Qui è dove possiamo connettere il database e il backend supabase e qua dove possiamo connettere GitHub per andare poi a gestire il codice e versionarlo nel- nella maniera migliore.

Qua possiamo invitare i collaboratori, qua possiamo pubblicare il sito una volta che è finito, okay? Questa è la versione chat, se non vogliamo modificare il codice, adesso sta creando, sta generando il codice, come vedete, um Possiamo pre- premerlo, premendolo non andrà a modificare il codice, ma andrà a risponderci, in base alle nostre domande, ad esempio, descrivimi quali librerie sta utilizzando, eccetera.

Possiamo anche qui a fare un allegato di una screenshot, per dire no guarda la scritta la voglio così e gli dai un'immagine.

Questo adesso lo vediamo appena pubblica, va a farci selezionare degli elementi della pagina, Che magari vogliamo modificare singolarmente, quindi andiamo con l'edit, pigiamo sopra il bottone da modificare, diciamo guarda modifica questo.

Qua abbiamo tutta la storia, tutta la cronologia, se vogliamo andare magari pian piano che qua scriviamo, il codice si aggiorna.

Ora, mettiamo il caso, e non è un caso raro, che il codice non funzioni e magari vogliamo tornare a una versione precedente e clicchiamo qua, e andiamo alle persone precedenti.

Adesso appena scriviamo due tre pronte vi faccio vedere questa questa soluzione.

um Questa è un po' la user experience di Lovable, okay? um Se clicchiamo qua possiamo vedere tutto quello che sta facendo, okay? Quindi andiamo sotto, sta scrivendo questa pagina, eccetera eccetera eccetera, possiamo vederlo live mentre scrive il codice.

Oh, ci ha messo un minuto e 46.

Ho creato una web app chiamata Mind Dump, per salvare i due pensieri con funzionalità di input vocale riassunto ai, completa di sistemi.

Autenticazione.

Okay, vediamola.

Mind Dump.

Perfetto.

Ora dobbiamo connetterci a Suabase.

Ho bisogno di salvare informazioni, aggiungere account utente e connettere altri servizi.

Dobbiamo creare il nostro, um progetto su Suabase.

Quindi, quindi dobbiamo andare qua su connetti con Supabase, cliccandoci ci ci arriva um arriviamo appunto a s- a a questa facciata, dove dobbiamo, io sono già connesso, dovete connettervi a Supabase.

Ora andiamo un attimo su Supabase così vi faccio vedere um cos'è.

um Vi faccio vedere un attimo, condividi questa scheda insieme um eccola qua.

Su base, una volta che abbiamo ci siamo loggati è un sistema che ci permette di creare un nuovo progetto.

Tutto quello che dovete sapere da non tecnici è che dovete creare, una volta loggati, avete due progetti gratuiti, dovete cliccare su New Project.

Okay? New Project ci consente ap.

io in questo caso, in questo account purtroppo um non è quello della della mia azienda, ma quello personale, ho effettivamente il um ho troppi progetti attivi, quindi quello che farò è metterò in pausa un progetto per fare in modo che poi, possa utilizzare il secondo progetto.

Vedete, io l'ho già sviluppata questa applicazione prima in circa 1015 minuti, E quindi c'ho questo database già già attivato, che andrò un attimo a mettere in pausa, Focus Project, okay? Per andare a crearlo insieme a voi.

Una volta che ho messo in pausa questo progetto.

Quindi ecco sappiate che se lavorate su più web app e non volete pagare il supabase a livello di abbonamento e consumo, potete mettere in pausa un progetto senza eliminarlo e attivare solo i progetti che in quel momento avete um funzionanti.

Uh, aspettiamo un attimo.

um Andiamo, torniamo qua, vediamo se è stato messo in pausa, sì, adesso posso creare un nuovo progetto.

Creando il suo nuovo progetto um dobbiamo solo mettere il nome del progetto, scriviamo Mind Dp 2, e poi una password, okay, per il nostro database.

Una password che ci è utile perché magari possiamo modificarla poi in in futuro.

Io adesso mi sono inventato una password, e voilà.

Regione, lasciate questa perché è quella più vicina alla nostra al nostro paese, siete in Italia eh, è quella più vicina.

ecco Qui Central EU Frankfort.

E poi fai cre- create new project.

Una volta, quindi questo è tutto quello che dobbiamo fare su Supabase.

Basta, per i non tecnici bisogna fare questo, per i più tecnici, ci sarebbero tante altre cose da dire, però adesso le lasciamo un po' a sé.

Una volta che abbiamo fatto questo supabase quindi loggandosi gratuitamente con Gmail, e creando questo progetto, quindi andare su project overview, new project, um si torna su L, okay? L'ovle viiderà di connettere l'account anche lì con una finestra di autenticazione si simile a quella conneti con Gmail, eccetera, ma soltanto con Suabase, ci connetterà, e vedete che abbiamo un progetto Mind Dump 2.

Tutto quello che dobbiamo fare, tutto quello che dobbiamo fare è connettere.

Facciamo connect.

Et voilà.

Fatto.

Abbiamo connesso il back end, ovvero il database con gli utenti, eccetera al front end, in modo tale che adesso la nostra piattaforma possa, um effettivamente andare a um registrare gli utenti.

Mhm? In questo caso c'è un errore, vedete, posso risolverlo subito.

um cliccandoci sopra, quando ci sono degli errori, ci clicco sopra.

um E faccio try to fix.

Diciamo il vibe coding si si si si si limita a dire c'è un errore, try to fix.

Se 61 programmatore riesci a capire questo, magari capisci anche cos'è e puoi dire non solo try to fix, ma se vedi che qualcosa non va, gli dici guarda questa cosa qua dovrebbe essere diversa.

Per ora adesso questo è, corso base, quindi andiamo su try to fix e lasciamo che la macchina stessa arrivi a una conclusione.

ancora.

E poi ci descrive una volta che diciamo try to fix ci descrive anche cosa non va.

um Alcune volte ci vuole anche un pochino eh per fare tutto questo, però, 1015 minuti prima appunto questa mattina l'ho creata questa app funzionante, eccetera con login, connessione a Open e e eccetera.

Vediamo se questo è il caso, o ci sono più errori.

Poi una cosa che dico sempre è che il il bello e il brutto dell'in- dell'intelligenza artificiale e generativa è che non è deterministica.

Ovvero ha uno stesso prom alcune volte risponde in ma-, anzi sempre risponde in maniera, Diversa, quindi alcune volte magari è più semplice, altri meno semplici, però ecco.

um Mi dice che l'errore è stato fissato um eccetera.

A questo.

io dico um abbiamo, mi puoi connettere.

L'autenticazione con Su base, quindi, vuoi esser certo che ha connesso la parte di accedi e registrati con Su base e quindi, Faccio una richiesta molto semplice di questo tipo per andare a capire se effettivamente è stata fatta la connessione.

Infatti non l'aveva fatta e la sta facendo in questo momento.

Quindi quello che sta facendo adesso è creare delle funzioni che fanno in modo che nel momento in cui io inserisco questi dati vengono memorizzati e in- in su supabase, sui vari database ci siano i giusti controlli di autenticazione.

Molto molto sempl- in modo semplicistico questo è quello che che succede.

allora intanto che qua lavora leggo delle domande e osservazioni.

Gerald scrive utilissimo loble anche per creare app interattive che vanno a rimpiazzare passaggi manuali che magari si fanno in Excel o altro.

Verissimo usato per la mia startup crea uno strumento di autovalutazione trasformato in Lak magnet.

Da Gerald è il go to questo, perfetto, ottimo.

Ad esempio, mettiamo che abbiamo una un'azienda che vende immobili, per dirne una, um potreste creare un piccolo calcolatore di prezzo del vostro immobile, basato magari su 11 un'applicazione che facciamo in Lob che, um Tramite l' API va a trovare il vostro immobile e fa una stima del valore che potrebbe avere e poi dici è una stima, però almeno dai quell'effetto, molto efficace dal entrare e avere una stima concreta del tuo immobile.

allora Ho implementato la notazione, allora quello che vi dico è l'ha implementata, quindi in teoria adesso funziona.

Se vogliamo testarla prima di lanciarla, possiamo andare a cliccare impostazioni hot superabase, questo è è un altro tips che vi do.

Per fare in modo che ogni volta che mi logghi non devo andare a confermare con la mail, il link, eccetera, disattivo momentaneamente, tutta quella procedura per andare a verificare la mail e te lo consiglia proprio lui, per rendere più veloce il processo di test ti consiglio di seguitare la verifica email.

Quindi clicco qua.

um Vediamo questa scheda.

Andando sulle vedi possiamo creare tra l'altro tutte queste autenticazioni, Azure, Figma, Apple, Phone, quindi la gente si può loggare con tutte queste opzioni.

Cliccando su mail, disattiviamo confirm email and secure email change.

Queste qui le disattiviamo in modo tale che possiamo registrarci e loggarci senza verifiche, ma per farlo per per andare ancora più veloce.

um Chiudo? Anzi faccio save.

OK.

E poi condivido questa scheda.

Ci registriamo con una mail Silvio@Silvio.

it, password, Okay.

Registrati.

Abbiamo effettuato tutto, quindi ci fa entrare direttamente nell'applicazione.

um Chiudiamo.

E voilà, sembrerebbe che l'applicazione sia stata, um sia stata generata, però andiamo a vedere se è solo la facciata oppure funziona davvero.

Quindi incominciamo a testarla, quindi sono mi sono loggato, quindi nella mia applicazione, adesso qui scrivo, um in questo momento sto pensando che il vibe coding, Sia um molto, molto utile, ma c'è da fare attenzione, all'aspetto sicurezza.

Salva pensiero, vediamo se lo salva, sembrerebbe di sì c'è anche il log di quando l'ho inserito, eccetera.

Adesso testiamo la parte vocale, registra pensiero vocale, allora sto registrando 123 prova, in questo pensiero sto um spero che verrà trascritto.

Come vediamo non funziona, quindi dobbiamo andare a implementarlo.

Quando vi ho detto, potete dirgli tutto però dovete andare poi in maniera graduale a implementare il le varie features.

Le rifacciamo? 123 prova, 123 prova.

Perfetto, non funziona, quindi dobbiamo andare a dirgli già questo è una cosa da fare, quindi gliela diciamo subito.

Guarda la registrazione um del pensiero con speech to text con funzionalità, native browser non funziona.

Fixa? Molto semplicemente il prompt cerchiamo di rispondere.

Intanto che se la se la pensa su come fixare questo um rispondere a delle domande, Emanuele è possibile convertire il tutto in un'app per smartphone e quindi poterle inserire su Android e Apple Store.

In maniera ufficiale no, in maniera ufficiosa sì, c'è un articolo però loro non non ti dicono che non è il caso.

cioè non non non lo supportano questa cosa qua, però c'è un articolo nel loro blog, in cui tu puoi esportare il il il codice e farla diventare una progressive app.

Però ufficialmente non c'è un modo.

Puoi farla mobile friendly, responsive, eccetera, quello sì, quanto vuoi, in maniera nativa non c'è questa opzione, però se hai um una volta che hai il codice, potresti fare una progressive web app che può andar bene.

Maurizio Secondo voi potrei creare un'app che mi aiuta a strutturare piani editoriali per i miei clienti o sui social? Perché ad esempio io uso Excel, ma lo odio.

Quindi mi servirebbe qualcosa di esteticamente più accattivante e funzionante, più semplice.

Quindi dan delle tabelle e righe, eccetera.

Sicuramente puoi creare una bella base.

Maurizio.

Sì, sì, assolutamente.

Questo lo puoi fare a mio avviso.

um mhm mhm mhm mhm mhm Gerald dice dai un'occhiata alle nuove funzionalità di Canva, effettivamente sono una una bomba.

Per quanto riguarda il carica video e immagini, come funziona e quale estensione comprende? Ci sono diverse integrazioni, Marco, um che abbiamo anche un po' visto nella nelle slides, però in linea di massima possiamo caricare le immagini.

Da qui possiamo creare.

possiamo postarle su un server e dire prendi questo link in modo tale che X che renderizzi questa immagine e ci sono veramente tante integrazioni, ve le faccio vedere, è molto utile, ve lo condivido perché è molto utile, attenzione che adesso vi condivido questa scheda.

Uh, eccolo qua.

Condividi questa scheda invece, eccolo qua.

Su docs punto L.

de sotto integrations, vedete effettivamente tutte le varie integrazioni, ce ne stanno alcuni ufficiali e alcune non ufficiali.

In queste situazioni non ufficiali abbiamo anche um tante um in- integrazioni che sono state verificate non ufficiali per le immagini, per creare addirittura dirammi interattivi, per Cerk che ci gestisce ancora in maniera migliore la parte di autenticazione, E Lel labs, puoi fare test generativo e tante altre, se ve- se vai e ve ne vedi veramente tantissime, tra cui anche la gestione delle immagini e dei video in maniera più efficiente, però in linea di massima lui da solo, riesce a gestire immagini e video tramite database in subabase.

um allora intanto vediamo se funziona e poi risponde alle altre domande eh perché così almeno sfruttiamo il tempo che lui ragiona.

Eh.

Questa è una prova, io spero che adesso tu stia funzionando.

Il corre- il- il corretto componente del voice input, vediamo.

Ho corretto il componente voice input per risolvere il problema con la funzionalità di speech to text, le principali modifiche includono il miglioramento dell'elemento dell' EPI speech recognition del browser con la gestione più giusta, aggiungere il sistema notifiche con toast, migliorare il sistema di gestione degli errori, risolve il problema di inizializzazione e di conoscimento vocale, però non funziona ancora.

Alcune volte faccio un bel refresh, um e poi andiamo.

Prova prova prova, 123 prova.

Non c'è nessun nessun tipo di response e quindi vi faccio vedere anche questa funzionalità che ho detto, con Edit possiamo fare diverse cose, cliccare una una sorta di funzionalità, a parte che possiamo modificare manualmente senza spendere crediti tutto questo componente, il bordo, il margine, ma in linea di massima possiamo anche far capire che questo il problema sta qui.

E dico, quando premo il bottone e poi termino, La registrazione, non c'è, Il transcript nella, um casella di testo, sopra.

Fai in modo che il transcript sia istantaneo.

Proviamo così.

Ora ovviamente, se vogliamo un attimo vedere il codice il problema lo risolveremo in tre secondi.

Per questo, come ho detto, l'obiettivo è anche a chi non ne sa nulla di codice, quindi andiamo avanti così per far vedere che si arriva a una soluzione.

allora intanto che cerca di risolvere il problema, andiamo, riesce a mantenere il focus su tutto il progetto? um riesce a mettere il fuoco sotto il progetto e il s- diciamo è la sua promessa.

è la sua promessa principale.

Ora, um è la sua promessa principale.

Scusate, non avevo condiviso la la pagina.

Adesso l'ho l'ho appena condivisa.

um Riesce a mettere il foco su tutto il progetto è la sua promessa principale, cioè nel senso che se noi andiamo a vedere, è proprio il punto focale, del software, ovvero creare una serie di pagine del progetto, una serie di file che possiamo poi scaricare nei nostri ide di sviluppo tipo VS Code, eccetera e tenere in considerazione tutto il progetto.

Ovviamente più il progetto diventa grande, più ha difficoltà, questo è chiaro.

Può essere utile quindi per togliere il lavoro grosso di coding da 0 e iniziare con una base di coding per poi passarlo, ma non del per avere un risultato definitivo? Assolutamente sì.

Tommaso, qua ti do anche una piccola tips di esperienza.

um Persone tecniche, CTO, D, eccetera, sono un po' allergici a queste a queste piattaforme.

Si può fare, però qui ti dico una tip veramente molto avanzata, laddove tu stai creando un progetto con dei tuoi componenti front end, immaginiamo è un tuo componente finestra, eccetera, con delle logiche dietro, anche di front end, lui non le rispetterà quelle.

Quindi tu puoi effettivamente creare l' HTML CSS, ma tutta anche la logica del front end devi un attimo rifartela a mano.

Ed è molto difficile.

Poi adattarla se tu hai un sistema complesso come lo stiamo.

un intestatore di agenti che va a, a a a gestire i flussi complessi.

Il nostro front end è molto modulare, a livello centrale possiamo cambiare tutto, quindi quando chiedo all'Ole di fare un frontend, um il CTO ci mette molto per riadattarlo perché deve rifare tutta la logica.

Quindi se vogliamo fare qualcosa di semplice sì, se abbiamo un software più complesso è anche difficile riadattare il front end, poi al nostro software complesso.

Per questo io consiglio un altro tool che si chiama cursor, Cursor.

Che si implementa nel nostro sistema di sviluppo IDE, che potrebbe essere VS Code o addirittura cursor a un'applicazione standalone che va a prendere il tuo codice e ti implementa poi soluzioni sul tuo codice.

Perfetto, andiamo a vedere se funziona, si spera di sì.

Prova prova prova, prova prova prova.

allora addirittura non non funziona, quindi quando è così, cosa fare? Cosa fare? allora in primis um, In primis io cercherei di dire um ri- cambia approccio.

Cambia approccio nel nel nell'affrontare il problema e questo è un consiglio che danno anche loro nella parte di um learn.

um di del learn del loro della loro pagina che abbiamo visto prima per imparare a utilizzare la piattaforma, dirgli proprio ripensa all'approccio con cui l'ha sviluppato.

Secondo punto, cercherei di andare avanti e dire guarda non funziona ancora, che cosa stai facendo, cambia quasi giù, probabilmente io a questo punto l'avrei, ci avrei messo le mani sul codice l'avrei connesse io con la funzionalità.

Però al netto che non abbiamo questa questa questa fi- qu- questa capacità andrei nel ripensa da 0, al um alla funzionalità.

E al front end.

E fai in modo che funzioni.

Perché dico questo? Perché ho delle supposizioni.

Posso supporre che lui magari me lo registra um però non me lo fa vedere qua perché questo è quello del testo e magari non ha una casella di testo dove metterlo.

Okay? Quindi io ho ho ipotizzato questa cosa e quindi gli sto dicendo ripensalo da 0.

Nel mentre andiamo a vedere una parte della parte riassunto che anche qui penso che non sia assolutamente implementata perché non abbiamo dato una chiave PI, qui c'è da pagare OpenI e questa non è implementata.

Quindi vediamo, questa è l'ultima volta che andiamo a mettere le mani su questo riassunto, dopo vado a lavorare sulla parte A che è più interessante.

Se funziona bene, sennò andiamo a far funzionare il concetto di fare il riassunto di questi pensieri, che per me è più più interessante.

Vediamo vediamo.

um Sta producendo writing voice inputs TXT.

Speriamo che funzioni.

allora um sono sono altre domande, vediamo.

Ottimo, ottimo, adesso um cerchiamo di capire questa cosa qua l'ho fa- l'ho fatto stamattina ecco per dire no? um Stam- stamattina prima di entrare 15 minuti ha funzionato tutto perfettamente.

Okay, Quindi alcune volte è questione anche um questo è un'altra tip che vi do, quando non mi funziona qualcosa, siccome ho visto che, Alcune volte funziona e alcune volte no.

Quello che faccio, apro un nuovo progetto, lo rifaccio da 0 dic- dicendo oppure di, un pronto del genere, ripensa da 0 la parte front end, ripensa fai questo, fai quest'altro, gli faccio prendere distanza da quello che ha fatto perché alcune volte le cose funzionano in maniera molto fluida, altre volte invece no.

E quindi um questo potrebbe essere 11 modo per andare a a a creare qualcosa che funzioni.

Però ripeto, forse l'opzione migliore, al netto dei limiti che ho enfatizzato e tutto, forse è collegarlo a GitHub e poi um andare.

Che vi ho detto? Non c'ha una finestra testo dove mettere il testo, volete vedere che questo era il problema? Vediamo.

Vediamo se se posso dire ve l'avevo detto oppure no.

Prova prova prova, prova prova prova.

Esattamente era quello che um avevo detto.

Però questo perché viene fuori? Perché un attimo ho minime conoscenze di front end, pensavo che quel componente l'avesse solo associato al testo, e quindi um ho detto ripensa da 0, il frontend, metti un'altra finestra eccetera.

Ci vuole un minimo di um scafatizza, chiamiamola così.

Quindi um possiamo poi salvare il pensiero eccetera, quindi ci abbiamo vis- o- ora quello che manca è il riassunto.

Quindi, cosa devo fare? Devo creare una una sezione privata per l'utente dove puoi inserire la chiave Open EI.

Perché dove vai senza chiave Open AI? Non puoi, quindi ognuno può mettere la propria chiave Open AI in modo tale che è connessa al loro account e quindi possono fatturare tutti i vari le varie chiamate PI, e quindi dico, mi devi creare una sezione impostazione dove l'utente, Deve Inserire la chiave, open, A.

Che verrà usata nella sezione riassunto.

In questo modo.

Quando premo il pulsante genera riassunto, mi deve fare un'analisi dei miei pensieri.

Okay.

um Gerald, alcune cose per cui servirebbe l'ai, come dare dei consigli in base alle risposte a un questionario, vedo che lo fa da solo.

Quanto è tendibile? Usa lei interna, meglio collegata ai PI di open? um um Credo di sì, perché se poi lo vuoi fare depoiare fuori, come dicono gli inglesi, there's no things as free meal, such fe meals, qualcosa del genere, non c'è un pasto gratis, nel senso che non ti fanno utilizzare il loro BI, per rispondere in maniera intelligente, oppure addirittura introiettano magari delle risposte già settate.

Io per non sbagliare non l'ho mai utilizzata questa funzionalità, ho sempre attaccato le PI e se le metti fuori sicuramente saranno i PI che devi settare tu.

Questo poco ma sicuro.

Poi se trovi delle BI libere ben venga.

Piccola cosa che non c'entra nulla, adesso che aspettiamo vi faccio un attimo, um riflettere su questo, se andiamo su Github, un programmatore e programmatori magari che non sono, Troppo accorti in junior, alcune volte fanno il deploy di um quindi co- no il deploy um fanno um il fanno l'upload di progetti, con dentro le chiavi open e pubbliche.

Quindi se voi fate un piccolo scrating di GitHub sono sicuro che, Tempo un'ora, trovate già una chiave da utilizzare.

Non ho detto nulla, non lo fate, è illegale, però è simpatico da vedere come la sicurezza è un ambito veramente trascurata, um trascurata, al massimo.

Okay, abbiamo anche impostazioni.

Qui metterò la mia chiave Open e e adesso la prenderò, voi non vedete nulla perché è una cosa um, È è qualcosa di privato, vedete? Eh, stavo solo assicurandomi che non si vedeva.

Perfetto, ottimo, questa è la mia chiave OpenI.

Faccio salva chiave Open.

FM.

Questo è un caso l'ha l'ha messa su Superabase um riassunto, vediamo um, Vediamo, vediamo quello che che genera.

Mettiamo un po' di di pensieri diciamo più più carini di questo um allora Sto pensando di creare un'applicazione che fa um l'analisi del mio M dump, metto tutti i miei pensieri e poi mi fa un riassunto, l'analisi di tutto di tutto quello che ho pensato.

Sto pensando che ieri sera ho mangiato troppo.

Sto pensando che dovrei organizzare meglio tutti i vari progetti in notion perché adesso sono sconnessi dal CRM.

Sto pensando che potrei creare un database in Nhe in cui metto tutte le idee di piccoli SAS che posso sviluppare facilmente con Lovable.

Okay, c'abbiamo un po' di pensieri, li abbiamo buttati dentro, adesso andiamo a vedere se la parte riassunto funziona.

E voilà, quindi non salvo niente, se questi pensieri per una serie di temi ricorrenti che ruotano attorno all'organizzazione e alla gestione delle idee e le riflessioni, c'è un forte di creare sistemi di archiviazione, organizzazione e bla bla bla bla bla bla bla bla bla.

Ora si può fare più carina? Sì, si può gestire in maniera migliore? Sì, anche questo sì, però ecco, abbiamo il lo scheletro di una, Un'applicazione che io onestamente su su me stesso comprerei, lo volevo, è un piccolo assistente in cui butto tutto quello che ho adesso io ce l'ho, su un mio agente personale, però così carino, adesso lo metto sulla sull'applicazione e quindi ho creato qualcosa che può essere utile anche a me.

um Mhm mhm mhm mhm mhm allora Gerald, per quanto riguarda queste PI comunque ecco il mio consiglio è quello sempre di di mettere le PI o cloud o PEI, assolutamente.

Marco, ad esempio si può creare una sezione, come fosse Leon che ti chiede all'inizio i tuoi interessi e ti consiglia corsi, quindi profilazione di interessi? Assolutamente sì, si può fare questo e tanto altro, addirittura con le hai ti fa un, alla fine del questionario ti fa anche 11 resoconto di, um Del profilo personale, quindi potenzialmente, qual è il profilo psicologico, quale potrebbe essere il social, potresti fare tante cose carine.

Nella seconda sessione che che faremo appunto, sempre sul Lovable um andremo avanti, facciamo altri esempi e affrontiamo dei tempi un po' più anche avanzati con dei tips un po' più, dirette verso una metodologia di prompting, d'approccio, ne abbiamo già viste alcune oggi eh però andrò più a fondo.

Per ora, ci accontentiamo in questa me- ci abbiamo messo mezz'ora più o meno nel discutere tutto, questa piccola applicazione, lungi dall'essere un'applicazione che possiamo lanciare nel mercato, adesso infatti, anche nella prossima dirò quali sono poi le accortezze a livello sempre I da avere per poi lanciarla sul mercato, connetterla su ITub eccetera.

Ci sono altre domande, sennò questo è un po' il l'overview di Lopab.

Scommetto che se non l'avete mai provato, vi perderete qualche pomeriggio intero.

um Il mio consiglio è quello appunto di testarlo, avete cinque crediti gratis al giorno, quindi già con cinque crediti potete fare qualcosa, poi pian piano, se siete interessati 20 $ um e così passa la paura.

Come vedete, abbiamo utilizzato um 10 crediti, anzi no- 88 crediti, avevo 20 crediti su 100 questo mese, ne ho utilizzati 8, quindi per fare questo otto crediti.

Quindi l'avremmo fatto con la versione gratis in due giorni.

Allora potresti fare una pro- una um potresti fare una prova di modifica della UI al volo.

um Ma in realtà l'ho già fatta quando gli ho chiesto di cambiare l'interfaccia che mi ha messo questo e questo e questo.

Però faccio faccio avere un esempio.

Qui clicco questo bottone.

um a parte che posso tranquillamente, come ho detto qua, andare a cambiare i margini, il font, senza effettivamente andare a sprecare crediti.

Okay, Quindi extra fin, eccetera eccetera eccetera.

Questo non lo possiamo fare a prescindere, a prescindere.

Poi c'è anche advanced, eccetera.

Dopodiché però possiamo anche dire possiamo anche dire questo gift card.

Sì, uh, clicchiamo l'edit.

um Scusate, eccolo qui.

Ho un piccolo che non mi fa vedere la casella sotto.

allora vediamo se effettivamente Ah.

Eccolo.

um Rendi questo bottone a tutto schermo e fallo con un gradiente, blu e viola, con un, allora facciamo così, due viola.

Capisce che que- questo componente qua deve farlo a tutto schermo e questa cosa qua, um possiamo andare avanti e poi possiamo dargli anche reference, potevamo metterci un touch di una reference.

Poi ecco la la volta prossima facciamo proprio questo, magari copiamo cerchiamo di copiare l'applicazione con una reference.

Voilà.

Tutto schermo con un gradiente dal viola al blu.

Ci siamo.

um allora vedevo una domanda um ultima che è arrivato, anche questa profilazione di interesse, comunque è da supervisionare da una persona IT o può essere molto attendibile? um Tutto ciò io nei miei corsi di intelligenza artificiale, lo dico sempre, tutto quello che viene da un'intelligenza artificiale non possiamo fidarci, appunto, cioè potrebbe essere soggetto allucinazioni.

Sempre, questo è un go to, ci sono diverse tecniche per ovviare a questo limite, ovvero far basare la risposta sui propri dati, um fare in modo che ci sia una conferma con un web, quindi con una fonte ufficiale, però tutto ciò che viene tutto ciò che viene diretto dall'intelligenza artificiale e generativa, dobbiamo stare molto attenti perché non è deterministica e ci sono dei limiti.

Eccetera.

Trasformo un file Excel in un web app se lo carico? Assolutamente sì, Mauro, assolutamente sì.

Può ripetere il passaggio o pe ne hai a PC Grazie.

allora, fondamentalmente te lo faccio vedere ripeterlo a riprogrammarlo da 0, mi dice che l'ho già fatto, quindi non me lo farò fare a parte ci vorrà un po'.

Io poi purtroppo ho un altro impegno tra cinque minuti e quindi dovrò lasciarvi um però, Il concetto è um chiave open e, si si mette a parte che c'è la ge- la registrazione, quindi potrei vedere effettivamente tutto quello che è successo.

Nel momento in cui mi ha creato um mi ha mi ha creato fondamentalmente il il il tool su impostazioni, um Che succede? Succede che non avevamo una parte impostazioni per inserire le open IK.

Quindi ho chiesto mi crea una sezione impostazioni dove posso inserire la mia Open AI key? Se la tua domanda è dove ho preso la Open AI key si prende nella piattaforma ufficiale di OpenAI.

um Si crea una un account, si collega una carta di credito e si gera una open IT, ma è un processo molto semplice e molto documentato, reperire quella chiave di intelligenza artificiale connesso ovviamente a un piano consumo.