Come usare Bubble: tutorial passo passo nel 2025

Vuoi creare un'app ma pensi di dover conoscere un sacco di codice?

Questo è un grosso problema.

Molti utenti vorrebbero creare i propri contenuti, progettare le proprie pagine e persino lanciare le proprie app, ma si sentono bloccati.

Vogliono utilizzare le funzionalità dell'intelligenza artificiale e imparare a fare le cose guardando tutorial video, ma tutto questo sembra troppo lontano.

Ecco la soluzione: Bubble. 

Ti mostreremo come usare Bubble.

Bolla

Basta con le difficoltà con database complessi. Bubble ti consente di gestire visivamente i dati della tua app. Inizia subito a sviluppare la tua app basata sui dati!

Prova Bubble gratuitamente Leggi la recensione completa

Impostazione del tuo account Bubble

Come arrivare al sito web Bubble

Il primo passo per creare la tua app è accedere al sito web di Bubble.

Apri il tuo browser web preferito, ovvero il programma che usi per visitare i siti web.

Quelli più comuni sono Chrome, Firefox, Safari o Edge. Nella barra degli indirizzi in alto, digita "bubble.io" e premi Invio.

Verrai indirizzato direttamente alla homepage di Bubble.

Cerca un pulsante che dica qualcosa come "Iscriviti", "Inizia" o "Crea un account".

Questo è il tuo biglietto per iniziare a costruire.

Registrazione per un account gratuito

Cliccando su quel pulsante si avvia il processo di registrazione.

Proprio come quando crei un account per la posta elettronica o per un gioco, dovrai fornire alcune informazioni.

Bubble ha bisogno del tuo indirizzo email per poterti contattare e tu dovrai scegliere una password per proteggere il tuo account.

Scegli una password complessa (l'ideale è una combinazione di lettere, numeri e simboli) e scrivila in un posto sicuro per non dimenticarla.

Bubble potrebbe porti altre domande, ad esempio per quale scopo intendi utilizzare Bubble.

Non preoccuparti, scegli semplicemente l'opzione che più ti sembra adatta a ciò che vuoi fare.

Comprensione dell'interfaccia Bubble

Una volta effettuato l'accesso, vedrai l'interfaccia Bubble.

Questa è la schermata principale in cui creerai la tua app. Potrebbe sembrare un po' caotica a prima vista, ma è organizzata in sezioni.

Le parti più importanti sono:

• La scheda Progettazione: Qui puoi creare visivamente le pagine della tua app. Trascinerai e rilascerai elementi come pulsanti, testo caselle e immagini su quest'area.
• La scheda Flusso di lavoro: Qui, puoi dire alla tua app cosa fare. Crei dei "flussi di lavoro", che sono come istruzioni che la tua app deve seguire quando qualcuno clicca su un pulsante o digita qualcosa.
• La scheda Dati: Qui puoi gestire il database della tua app. Un database è come un archivio digitale in cui archiviare le informazioni.
• L'albero degli elementi: Qui vengono mostrati tutti gli elementi che hai aggiunto alla tua pagina, organizzati come un elenco.
• Il redattore delle proprietà: Quando clicchi su un elemento, quest'area ti mostra tutti i modi in cui puoi modificarne l'aspetto e il comportamento.

Creazione della prima pagina della tua app

Conoscere l'editor visuale

L'editor visuale è il luogo in cui progetterai effettivamente l'aspetto della tua app.

È come una tela bianca. Sul lato sinistro dello schermo, vedrai una serie di strumenti chiamati "elementi".

Sono elementi che puoi trascinare e rilasciare sulla tua pagina. Considerali come mattoncini digitali.

Hai caselle di testo per le parole, pulsanti su cui cliccare, immagini per mostrare foto e molto altro ancora.

Aggiunta di testo e pulsanti

Cominciamo con qualcosa di semplice.

Per aggiungere del testo, clicca sull'elemento "Testo" e trascinalo al centro della pagina.

Ora puoi digitare quello che vuoi. 

Forse qualcosa del tipo "Benvenuti nella mia app!" oppure "Clicca sul pulsante qui sotto".

Ora aggiungiamo un pulsante.

Fai clic sull'elemento "Pulsante" e trascinalo sotto il testo. Puoi modificare il testo del pulsante digitandolo nella casella di testo al suo interno.

Prova qualcosa come "Inizia" o "Clicca qui".

Progettazione del layout di pagina

Ora, potresti notare che le cose sono un po' disordinate.

Non preoccuparti, possiamo risolvere il problema. Puoi cliccare e trascinare gli elementi per spostarli.

Vedi quelle linee blu che appaiono quando trascini?

Ti aiutano a mettere in ordine le cose. 

Prova a spostare il testo e il pulsante finché non ottieni il risultato desiderato.

Puoi anche modificare le dimensioni degli elementi cliccando sui quadratini agli angoli e trascinandoli. Puoi ingrandire o rimpicciolire il testo, oppure allungare il pulsante.

Aggiunta di funzionalità di base

Comprensione dei flussi di lavoro

Bene, abbiamo reso la nostra app più gradevole.

Ma come lo facciamo? Fare qualcosa?

È qui che entrano in gioco i flussi di lavoro. Un flusso di lavoro è come un insieme di istruzioni.

Indica alla tua app cosa fare quando qualcuno clicca su un pulsante o fa qualcos'altro.

Far fare qualcosa a un pulsante

Facciamo in modo che il nostro pulsante faccia qualcosa di semplice.

Fai clic sul pulsante che hai creato. Quindi, cerca la scheda "Flusso di lavoro".

” Cliccaci sopra. Ora vedrai un pulsante che dice "Clicca qui per aggiungere un evento.

" UN evento è ciò che avvia il flusso di lavoro. Clicca su quel pulsante.

Selezionare "Azioni elemento", quindi "Clicca".

Ora dobbiamo dire all'app cosa fare quando si clicca sul pulsante.

Facciamo in modo che venga visualizzato un messaggio. Fai clic su "Aggiungi un'azione".

Vedrai un elenco di cose che la tua app può fare. Trova e clicca su "Avviso". Nella casella di testo, digita il messaggio che desideri visualizzare. Ad esempio, "Hai cliccato sul pulsante!"

Ora, quando qualcuno clicca sul pulsante, apparirà una piccola finestra con il tuo messaggio. Questo è il tuo primo flusso di lavoro!

Aggiunta di campi di input

I campi di input sono quelli in cui gli utenti possono digitare informazioni.

Immaginateli come delle caselle di testo in cui le persone possono scrivere i loro nomi, indirizzi email o qualsiasi altra cosa.

Per aggiungere un campo di input, fare clic sull'elemento "Input" e trascinarlo sulla pagina.

Proprio come con il testo e i pulsanti, puoi spostarlo e modificarne le dimensioni.

È anche possibile modificare il tipo di informazioni che il campo di input si aspetta.

Guarda l'editor delle proprietà. Puoi scegliere se visualizzare testo, numeri, email o password.

Collegamento di pagine e navigazione

Creazione di più pagine

La maggior parte delle app ha più di una pagina.

Potresti avere una home page, una pagina del profilo o una pagina delle impostazioni.

Per creare una nuova pagina, cerca un pulsante o un collegamento con la scritta "Nuova pagina" o qualcosa di simile.

Cliccaci sopra e otterrai una nuova pagina vuota.

Assegnagli un nome, ad esempio "Profilo" o "Impostazioni".

Collegamento di pagine con pulsanti

Ora facciamo in modo che le persone possano spostarsi tra le pagine.

Possiamo farlo con i pulsanti. Torna alla prima pagina.

Trascina un pulsante sulla pagina. Nel flusso di lavoro del pulsante, aggiungi una nuova azione.

Questa volta, seleziona "Navigazione" e poi "Vai alla pagina".

Quindi, seleziona la pagina a cui vuoi che il pulsante indirizzi le persone. 

Ora, quando qualcuno clicca su quel pulsante, andrà all'altra pagina.

Creazione di un menu di navigazione

Se hai molte pagine, può essere utile avere un menu di navigazione.

Si tratta semplicemente di una fila di pulsanti nella parte superiore o inferiore dell'app che consente agli utenti di spostarsi facilmente tra le pagine.

Per creare un menu di navigazione, aggiungi un elemento "Gruppo" nella parte superiore della pagina.

Quindi, aggiungi alcuni pulsanti all'interno del gruppo.

Rendi ogni pulsante collegato a una pagina diversa, proprio come abbiamo fatto prima. Ora hai un modo semplice per spostarti all'interno della tua app.

Passaggio di dati tra le pagine

A volte può essere utile inviare informazioni da una pagina all'altra.

Ad esempio, se hai una pagina del profilo, potresti voler inviare il nome dell'utente dalla home page alla pagina del profilo.

Per fare ciò, è necessario utilizzare qualcosa chiamato "parametri di pagina".

Quando crei un pulsante che rimanda a un'altra pagina, puoi aggiungere un parametro all'URL. 

È come aggiungere un piccolo tag che indica alla pagina quali informazioni mostrare.

Nella pagina a cui stai inviando i dati, puoi utilizzare il parametro per visualizzare le informazioni.

Ad esempio, puoi aggiungere un elemento di testo e dirgli di mostrare il nome dell'utente dal parametro.

Ora la pagina del profilo mostrerà il nome corretto.

Test e anteprima della tua app

Come visualizzare in anteprima il tuo lavoro

Bene, hai creato alcune pagine e aggiunto alcune azioni. 

Ora vuoi vedere come appare la tua app e come funziona.

Bubble semplifica le cose. Cerca un pulsante con la scritta "Anteprima" o qualcosa di simile.

Di solito assomiglia a un pulsante di riproduzione.

Cliccaci sopra e Bubble aprirà una nuova scheda nel tuo browser che mostrerà la tua app.

È come vedere la tua app dal vivo. Puoi cliccare sui pulsanti, digitare nei campi e vedere se tutto funziona come previsto.

Test di diversi scenari

Quando visualizzi l'anteprima della tua app, non cliccare a caso.

Prova a pensare ai diversi modi in cui le persone potrebbero utilizzare la tua app.

Clicca su ogni pulsante. Digita in ogni campo. Guarda cosa succede quando fai cose diverse.

Ad esempio, se hai una pagina di accesso, prova a digitare la password sbagliata.

Verifica se la tua app mostra un messaggio di errore.

Se è presente un pulsante che salva i dati, controlla il database per assicurarti che i dati vengano salvati correttamente.

Risoluzione dei problemi comuni

A volte le cose non vanno come dovrebbero. Va bene così.

Succede a tutti. Quando trovi un problema, lo chiami "bug". Per correggere un bug, devi eseguirne il "debug".

Bubble offre alcuni strumenti che possono aiutarti a trovare i bug.

Cerca uno strumento chiamato "Debugger".

Può mostrarti cosa succede dietro le quinte quando la tua app è in esecuzione. Questo può aiutarti a scoprire perché qualcosa non funziona.

I problemi più comuni includono:

• I pulsanti non fanno nulla.
• I dati non vengono salvati correttamente.
• Le pagine non si caricano.
• Messaggi di errore.

Alternative di Bubble

Cercando qualche altro Alternative alle bolle nello sviluppo di app no-code e low-code?

Ecco alcune opzioni popolari:

• Softr: Questa piattaforma eccelle nel trasformare rapidamente fogli di calcolo e database (come Airtable e Google Sheets) in app web e portali clienti. È nota per la sua facilità d'uso e i modelli predefiniti.
• Ronzante: Una potente piattaforma no-code che consente di creare applicazioni web complesse con un elevato grado di personalizzazione. Dispone di un solido ecosistema di plugin, ma può presentare una curva di apprendimento più ripida.
• Scivolare: Questo strumento punta sulla semplicità, consentendo di creare app per dispositivi mobili direttamente da Fogli Google. È ideale per creare rapidamente strumenti interni e applicazioni semplici.
• Softgen: Questa piattaforma basata sull'intelligenza artificiale mira a semplificare lo sviluppo di app interpretando le descrizioni degli utenti e generando applicazioni. È progettata per la prototipazione rapida e il perfezionamento iterativo.
• Adalo: Una piattaforma no-code focalizzata sulla creazione di app mobili native con un'interfaccia drag-and-drop facile da usare e un marketplace per componenti predefiniti.

Conclusione

Ce l'hai fatta! Ora hai capito come usare le basi di Bubble.

Questa guida ti ha fornito un corso accelerato, ma c'è ancora molto altro che puoi fare.

Non hai bisogno di una sola riga di codice.

Se vuoi lanciarti subito nel tuo prossimo progetto, ricorda questi consigli: fai pratica costantemente.

Non aver paura di cercare YouTube oppure i tutorial di Bubble.io per ulteriori spiegazioni dettagliate.

Puoi trovare tantissime risorse e buone pratiche per i principianti.

Il mercato Bubble è un ottimo posto per trovare aiuto.

Domande frequenti