Può succedere che un servizio che voglio integrare non ha un plugin disponibile, oppure che il plug-in che integra quel servizio, non abbia tutte le funzionalità che mi servono.

Come faccio in questo caso? Sono spacciato, assolutamente no.

Esiste l' EPI connector che è un'interfaccia dentro cui posso, compilare delle chiamate PI che poi posso richiamare dai miei workflows o dalla mia interfaccia di design per prendere dati o comunque interagire con servizi esterni.

In questa lezione ti mostro un'integrazione con OpenAI, nello specifico stremo focalizzati su quello che è il processo per andare a compilare una nuova chiamata.

Ti anticipo che questo processo richiede di fare un pochino di fatica a livello tecnico, cose che puoi delegare alla tua AI preferita, nell'estrapolare dalle documentazioni dello specifico servizio che vorremmo andare a integrare i campi che l' API connector di Bubble ci richiede.

Ora ti mostrerò la struttura di questa chiamata API nuova, quindi ti mostro, um come stiamo creando un' API nuova, vedi che scrivo API di esempio, um mentre poi la chiamata ad Open AI, non sto a farti vedere tutto l'interazione tecnica con la la documentazione PI perché quella poi è differente per ogni documentazione API di diverso servizio che trovi.

Intanto qua vedi che il primo parametro che viene richiesto è l'autenticazione, cioè come dimostra di essere effettivamente io spesso i servizi um VIPI sono a pagamento o comunque interagiscono con account personali, quindi richiedono una sorta di password che si chiama token o altri sistemi di autenticazione um per poter far sì che la chiamata che tu fai sia autorizzata.

Quindi questo qua è il primo parametro da andare a cercare nella documentazione API di un servizio esterno.

Tu ad esempio puoi prendere la documentazione PI di questo servizio esterno, in questo caso ti sto mostrando quella di OpenAI, e um darla in pasto a Gemini o al GPT, quello che è il tuo servizio preferito, spiegargli cosa stai facendo, eventualmente dargli lo screenshot della schermata dell' API connector di Bubble e chiedergli quale parametro o quale fra le opzioni del dropdown devi andare a inserire per soddisfare le necessità del um dell'interfaccia dell' API connector.

Quindi qua abbiamo settato la chiamata in generale, lo la scatolona della chiamata, dentro qui poi potrei mettere tante chiamate diverse.

Ad esempio, qua si è chiamata API di esempio e sopra è OpenAI, però OpenAI può fare tante cose, no? Può generare immagini, può generare testo, può fare tanti tipi di attività anche più tecniche.

Quindi a nell'ambito del servizio OpenAI, dentro a cui avrò identificato quella che mi è la mia autenticazione, Posso um andare poi a creare tanti tipi di API.

In questo caso ad esempio nella mia API di esempio, faccio una sottosezione relativa alla chiamata specifica che è quella che mi genera le immagini.

A questo punto vediamo che c'è una scelta di fianco, cioè usalo come data o azione.

Qua semplicemente gli sto andando a dire se sarà una chiamata che andrò a richiamare dalla sezione design del mio sito, oppure se è una chiamata che andrò a richiamare dalla sezione quella dei flussi, quella dei workflows, quella immediatamente sotto.

In questo caso devo mettere action, se la voglio richiamare come flusso.

Ti mostrerò dopo che andando a selezionarla fare menù delle azioni disponibili ti comparirà, um oltre alle chiamate um alle attività, alle azioni già predefinite di babbola, anche questa tua nuova chiamata che hai definito.

Andiamo a vedere ora la chiamata di OpenAI che ho già preparato, okay? Qua ho offuscato la private key perché è mia personale del del mio account.

um Dopodiché qua vedi già compilati tutti i campi e ripeto, non sto a farti vedere come li ho trovati, ma di fatto cerchi.

Documentazione API, nome del servizio, in questo caso Open AI, e poi o con un um con un cerca nel testo, vai a cercare le parole chiave o ancora prima, um lo dai in pasto al tuo CGPT, Gemini, quello che è il tuo la tua AI preferita e gli chiedi di estrapolarti quella che è l'informazione che ti serve.

Okay? In questo caso ho creato nella scatolona di OpenAI una completion, In questo caso qua sotto c'è quello che si chiama payload della chiamata, cioè i dati che vado a trasferire la chiamata, ad esempio, gli andrò a trasferire la domanda, no? Che sto facendo alla mia EI, gli andrò a trasferire qual è il modello che voglio che usa.

Questo codice passami, lo trovi sempre nella documentazione um dell' EPI, dovrei copiarlo, incollarlo qua dentro, e qua vedi che le i dati che ho messo fra queste parentesine a punta sono i dati dinamici, okay? Quindi qua gli sto dicendo che, come modello passagli.

Il modello che poi um ti metto fra le parentesine appunto, e questo qua sarà disponibile direttamente dall'interfaccia dei workflows.

In questo caso qui vado a precompilare queste variabili di modo da poter fare una chiamata di prova, e inizializzare la call, okay? Quale avevo già inizializzato, quindi mi propone reinitialize call.

Ricordati che una chiamata poi per diventare disponibile sia nella sezione data che nella sezione design deve prima essere in- inizializzata con successo.

Quindi nel momento in cui schiaccio reinicia l' call in questo caso, lui andrà a fare una chiamata, vede se gli ritorna effettivamente una risposta dal servizio e me la va a validare, di modo che da questo.

in poi, posso utilizzarla.

Andiamo ora a provarlo, sono tornato nella sezione design, e andiamo a fare qualche modifichina, ad esempio su questo testo statico, introducendo una funzione che mi permette di fare una domanda a hai, e ricevere direttamente una risposta qua dentro.

Okay, quindi in questo caso vado ad aggiungere un bottone che sarà quello che andrò ad utilizzare poi per lanciare la mia chiamata ad OpenAI, e vado ad aggiungere un campo input che è quello dentro a cui poi andrò a mettere la domanda per l' AII.

Aggiungo anche un testo che è quello dentro cui poi farò comparire la risposta che mi torna da um OpenAI.

Il testo, questa è una piccola tecnicalità, vado a racchiuderlo dentro un gruppo perché questo qua mi permette di poterci poi inviare dentro dei dati.

Non posso immediatamente inviare dei dati in un elemento di tipo testo, ma posso dire l'elemento di tipo testo, okay, leggi e mostra i dati del gruppo dentro a cui ti trovi, e posso invece inviare i dati a un gruppo.

Okay, quindi che cosa ho fatto? Ho fatto tasto destro, Raggruppa questo testo in un gruppo, quindi di fatto un gruppo che contiene solo questo testo, sono andato a settare il data source di questo testo, di modo che um inizialmente fosse prova e che poi um gli potesse venire inviato dentro qualcosa, e a livello invece di testo, ho scritto mostra i dati del tuo gruppo.

Okay, per questo che inizialmente me lo mostrava vuoto in preview, dopodiché successivamente ha iniziato a mostrare parent group text, quindi il il testo del contenuto nel gruppo, che se vado a vederlo in preview, ci sarà scritto proprio, prova fintanto che non faccio una domanda effettiva ad OpenAI e che la chiamata mi torna qualcosa.

Vado ora effettivamente a vedere in interview e vedi che qua ho scritto prova.

Il testo di per sé è vuoto, ma il gruppo in cui è contenuto ha scritto dentro prova.

Ora devo andare a completare il mio sistema di modo che, um dentro il campo input io possa scrivere la domanda e e schiacciando questo bottone dove ora c'è.

Edit me, um parto una chiamata ad OpenAI che poi vada a restituire dentro il mio elemento di testo, la risposta.

Quindi vado a cambiare un po' quella che è la la label del del bottone, ci scrivo chiedimi, okay, metto una una call to action.

E vado ad aggiungere un testo descrittivo di quello che è il campo input, sennò l'utente, non ha veramente la più vaga di di cosa um io voglia fargli fare.

In questo caso gli dico fammi una qualunque domanda, mettiamo su Wow, che è l'azienda che stiamo usando come esempio.

Quindi a questo punto mi aspetto che l'utente scriva la sua domanda dove c'è scritto type here e poi schiacci il pulsante chiedimi.

Per far partire la chiamata e vedere e visualizzare poi la la risposta a schermo dentro a questo elemento.

A questo punto cosa mi manca? Mi manca di aggiungere un workflow al bottone.

Vedi che qua mi compare la chiamata Open AI Completion, che è quella che ti ho mostrato che ho creato io prima, con l' API connector, e qui già mi precompila il body, il prompt, con il dato statico che avevo messo nella chiamata di prova.

Quindi a questo punto gli dico come prompt passa, il valore dell'input, okay, quindi quello che trovo scritto qua dentro, adesso gli do un nome più comprensibile per rendere più semplice, come sempre chiamarlo dalla parte di di flussi.

E quindi vedi che qua anche mi si aggiorna, quindi dico okay, chiama OpenAI, con una chiamata di di completion che è quella appunto che genera poi il testo, e pass l come come prompt quello che ho scritto nel campo input.

Qua però non si esaurisce il tutto, devo anche mostrare i dati, no? Infatti uso questa funzione display data in a group pop-up, che mi andrà a mostrare.

I dati appunto qua dentro, dentro il gruppo dove ho il mio elemento di testo.

Vado a modificare anche qua per maggiore chiarezza e facilita di gestione.

Il nome del gruppo.

E a questo punto posso andarlo a richiamare facilmente qua dai flussi, gli dico okay, mostra, questi dati dentro al gruppo che si chiama Grou respost di OpenAI che ho appena rinominato.

Quale data devo mostrare? Devo mostrare il risultato dello step precedente fondamentalmente, e, Vado a prendere il primo elemento di questo campo Choices e poi prendere il campo message content um di questo di questo ulteriore campo.

Queste cose qua sono sempre tutte cose che vedo dalla documentazione che posso farmi aiutare la LI a capire come trovare la documentazione.

Oppure anche quando faccio initialized call già lui mi mostra, quella che è la struttura della chiamata e quindi lì posso andare a individuare e e e annotarmi quello che è il campo che effettivamente mi interessa.

Andiamo subito a testare quello che abbiamo fatto.

Ad esempio, prova a scrivergli cosa fa Wow Spaces.

it, schiaccio chiedimi e cosa vedo.

Vedo che in- intanto la barretta sta andando e intanto le risposte mi è tornata.

Poi LI mi ha risposto che è dispiaciuta ma um non può accedere a siti web, però in ogni caso, per questo perché abbiamo utilizzato un modello che è il GPT 3.

5, um che non è in grado di fare questa questa cosa.

um In ogni caso abbiamo visto che lei ci ha risposto, quindi ora um magari lo, lo possiamo provare con un'altra tipo di domanda che non non implica che debba um accedere a siti.

Ad esempio ciao quanto fa uno +1? Glielo chiedo e vedo che mi risponde che uno +1 fa 2.

Posso ora andare a sistemare qualche elemento grafico per rendere più uniforme e presentabile queste um cose che ho creato, e vado quindi nella sezione di design.

Come prima cosa porto tutto a livello centrale, okay? E tolgo la la larghezza fissa.

Quindi in questo caso ho perso il gruppo, gli ho tolto il vincolo sulla larghezza e l'ho portato centrale e poi portato centrale, anche tutti gli altri elementi, cliccando su uno alla volta, andando nella sezione layout.

Del mio solito tabellotto grigio um e cliccando layout center.

A questo punto lo vediamo in preview e possiamo riprovarlo, ad esempio, um vediamo intanto che già appare molto più centrato, e gli possiamo chiedere come stai.

Cosa succede però che il testo rimane stretto.

Il testo rimane stretto perché ho tolto il vincolo sulla larghezza al gruppo, ma non ho tolto il vincolo alla larghezza sul testo stesso.

Quindi adesso vado a fare questa cosa, vado sull'elemento testo, vado a controllare sempre nella sezione layout e vedo che è fixed wit.

Okay, quindi anche in questo caso gli vado, scusa, qua mi ero posizionato sul gruppo, vado sul testo, gli vado a togliere il fixed wit.

In questo caso non avremo più il vincolo di essere di larghezza fissata e quindi per questo che poi continua ad andare a capo all'infinito.

Torniamo in perview, um ricarichiamo la pagina di modo che possa recepire, Le modifiche che ho appena fatto e a questo punto posso digitare qua la mia domanda, in questo caso scrivo domanda di prova, um giustamente lì mi dice posso aiutarti con qualcos'altro però intanto vedi che abbiamo implementato questa feature, a un livello già carino, già da da MVP.