In questa seconda parte del tutorial in italiano bubble farò una breve presentazione dei comandi ed elementi principali che stanno alla base dello sviluppo della tua applicazione no-code.
Come ho già anticipato nella prima parte del tutorial in italiano Bubble (ed in generale la maggior parte di piattaforme di sviluppo no-code) utilizza un approccio visuale per la composizione del Front-End (la parte grafica che l’utente della tua applicazione vedrà ed interagirà) e del Back-End (la parte logica su cui si appoggia il front-end).
Senza perderci in troppe chiacchiere scopriamo come è fatto l’editor di programmazione.
Tutorial in italiano bubble: interfaccia principale
Avviato il processo di creazione/modifica dell’applicazione no-code ci troviamo nella schermata principale del nostro editor.
Possiamo dividere questa pagina in due sezioni:
- la sezione a sinistra dello schermo dove sono raggruppati gli strumenti di lavoro
- la rimanente sezione della pagina che è il piano di lavoro vero e proprio
Focalizziamoci per il momento sull’editor (purtroppo la lingua al momento è in inglese e non in Italiano).
All’estrema sinistra sono presenti sette tabs che racchiudono tutto il necessario per realizzare la tua app:
Tab Design: questa tab contiene gli strumenti per disegnare le interfacce della tua applicazione no-code in bubble.
Se ci clicchiamo apparirà la lista di tutti gli strumenti grafici che possiamo inserire nelle nostre interfacce.
Aggiungere un elemento è semplice, basta selezionarlo e poi inserirlo all’interno dell’area di lavoro.
Cliccando 2 volte su ciascun elemento apparirà l’editor per modificare la proprietà dell’elemento selezionato in modo tale da customizzarlo a proprio piacimento.
Tab Workflow: questa tab permette di definire tutti i workflow che permetterano poi di far funzionare la tua applicazione no-code in bubble.
Ogni box presente al suo interno rappresenta un workflow a cui è associato un evento.
Cliccando sul box è possibile scegliere le differenti azioni che attiveranno il workflow.
Come per gli elementi grafici, cliccando su ciascun evento o azione, si aprirà l’editor della proprietà, in cui è possibile definire le variabili che influenzeranno il funzionamento dell’azione selezionata.
Tab data: Questa tab permette di visualizzare e modificare la struttura dei dati della tua applicazione no-code, quindi le differenti tipologie di dati ed i campi di inserimento di ciascuno di essi.
La sezione “App Data” mostra i dati che effettivamente stai utilizzando.
La visualizzazione è in stile foglio di calcolo, se hai un minimo di esperienza con Microsoft Excel o Google Sheet non avrai difficoltà a capire come funziona.
Su questa specie di foglio di calcolo puoi fare delle elaborazioni come query, esportazioni, modifiche oppure eliminare i dati che non ti interessano.
La sezione “Privacy” ti permette di definire le regole sulla privacy ed assegnare a ciascuna tipologia di utente quali e quanti dati possono visualizzare.
Tab Styles: questa tab definisce i diversi stili degli elementi nella tua interfaccia in bubble.
Per stile si intende colori di sfondo, dimensioni e font del carattere ecc, che possono essere applicati a singoli elementi o gruppi di elementi.
Tab Plugins: come ho già scritto nel tutorial precedente, i plugin sono un modo di estendere le funzionalità principali di bubble.
Tramite questa tab è possibile installare plugin realizzati dal team di bubble oppure plugin realizzati dalla community di bubble o da terze parti.
Tab Settings: questa tab ti permette di tenere sotto controllo il tuo abbonamento a bubble e tutti i componenti aggiuntivi a pagamento che hai utilizzato per la realizzazione delle tue app.
In questa scheda inoltre ci sono alcune impostazioni che dovrai definire prima di lanciare sul mercato la tua applicazione no-code.
Tab Logs: attraverso questa scheda puoi monitorare le attività generate all’interno della tua app dopo che è stata messa in produzione o quando la stai testando in modalità di esecuzione.
E’ fondamentale durante la fase di test e per monitorare e diagnosticare eventuali problemi.
Un paio di considerazioni importanti su bubble!
Con Bubble puoi rilasciare applicazioni web perfettamente funzionanti anche con l’abbonamento gratuito, peró le funzionalità più importanti saranno disponibili sono negli abbonamenti a pagamento.
Nonostante questo, anche con l’abbonamento gratuito puoi testare le funzionalità a pagamento ma non potrai rilasciare in produzione la tua applicazione no-code.
Inoltre è una piattaforma in Cloud con salvataggio automatico in tempo reale ogni volta che viene effettuata una modifica alla tua applicazione nocode.
CONSIGLIO: fai sempre caso al colore della notifica del salvataggio, se è verde è tutto ok.
Se è rossa è perchè c’è un problema di connessione , ti consiglio di fermarti con lo sviluppo, controllare se la tua connessione internet funziona correttamente ed eventualmente provare a ricaricare la pagina dell’editor attraverso un refresh.
Non lavorare se la notifica è rossa, potresti perdere tutte le modifiche effettuate durante la perdita di connessione con i server di bubble.
Ovviamente tutte le modifiche fatte all’interno della sessione del tuo browser sono annullabili/ripristinabili attraverso le icone Undo/Reundo.
Puoi inoltre ripristinare la tua app ad un punto di ripristino dello sviluppo attraverso il version control panel. In questo caso però perderai tutte le modifiche che sono state fatte successivamente al salvataggio del punto di ripristino selezionato.
Quando le tue modifiche sono pronte, attraverso il comando preview puoi in qualsiasi momento far partire l’applicazione e testarla.
In conclusione
Abbiamo visto in questo tutorial in italiano bubble quale è l’area principale di lavoro, cosa sono le tabs e quali sono.
Nel prossimo tutorial introdurrò altri tre strumenti fondamentali: l’editor delle proprietà, lo strumento di ricerca e lo strumento per il controllo degli errori.
Tutorial in Italiano Bubble – Parte 3: editor delle proprietà, strumento ricerca e controllo degli errori
Nocodeitalia.it è il punto di riferimento in Italia sul mondo dello sviluppo senza codice.
Ogni mese pubblichiamo interviste, news, recensioni e tutorial in italiano su tutto quello che riguarda il movimento nocode.
Stiamo lavorando inoltre alla migliore formazione nocode in Italiano.
Scopri di più su ScuolaNoCode.it
