Corso completo di Bubble - Livello base

Meno di 5 minuti per vedere cosa "promette" di fare Bubble e poi creiamo assieme una nuova web app. Prima di affrontare la pagina bianca del canvas di Bubble, vediamo quali sono le aree, le sezioni e i menù principali della piattaforma.

Disegniamo una pagina web, analizzando le opzioni dell'element inspector. Facciamo una panoramica degli strumenti che abbiamo a disposizione nel UI Builder. Impariamo ad utilizzare i gruppi, gli elementi di testo, i pulsanti e le immagini. Cenni di adattabilità delle pagine web ai diversi dispositivi utilizzati (pagine responsive).

Vediamo cosa sono i workflow e come utilizzarli. Panoramica delle azioni disponibili. Navigazione tra pagine con il workflow go to page e con i link. Uso del debugger per verificare le azioni. Altri semplici workflow: mostra un messaggio di alert e usa il display data in base a determinate condizioni.

Impariamo come impostare la base dati in Bubble. Creazione dei custom data type e dei campi data field. Cosa sono le viste del database e come inserire nuovi dati. Vediamo la creazione di un modulo per l'inserimento dei dati e come modificare i dati.

Importanza della gestione degli stili grafici in Bubble. Panoramica del funzionamento e delle opzioni disponibili, con esempi pratici. Come modificare parzialmente uno stile. Approfondimento sugli stili dei pulsanti, dei form di input e dei gruppi.

Vediamo cosa sono i plugin di Bubble ed analizziamo brevemente l'elenco dei plugin ufficiali. Successivamente facciamo una panoramica del set-up generale della piattaforma, dai piani di servizio alla gestione delle lingue, dalla impostazione delle API al nome a dominio. Concludiamo la lezione con l'analisi della sezione dei logs.

Iniziamo a costruire la nostra web app, partendo da intestazione e piè di pagina. Vediamo cosa sono i resusable elements e i floating groups. Impostiamo le condizioni di visibilità per utenti anonimi e utenti registrati. Rendiamo responsive i nostri header e footer. Utilizziamo un plugin per il menù mobile. Creiamo i workflow necessari per rendere dinamici gli elementi.

Come gestire gli accessi degli utenti alla nostra web app. Analisi del popup standard di Bubble. Costruzione di una pagina di registrazione e di accesso con condizioni di visibilità, workflow di signup e login, cenni alle app text e controlli di adattabilità.

Impariamo a costruire un processo sequenziale di acquisizione dati. L'occasione viene fornita dalla procedura di onboarding: dopo che l'utente si è registrato, seguiamo un percorso di richiesta dei dati del profilo, dei dati della eventuale organizzazione di appartenenza e di convalida del suo indirizzo email. Creazione della pagina, del design e di tutti i workflow.

Costruiamo la pagina del profilo utente, con un menù di navigazione verticale dinamico. Impostiamo i dati e usiamo il repeating group per creare l'elenco delle voci. Con i workflow e i custom state creiamo la navigazione nelle sezioni della pagina. Vediamo come aggiornare i dati utente con le funzioni di autobinding sui dati e come impostare le regole di privacy relative.

Completiamo il tema della gestione utente con la creazione delle funzioni di cambio email e password da parte dell'utente che è loggato al sistema. Vediamo la gestione degli alert automatica in caso di errori e infine analizziamo la procedura di cambio password per l'utente registrato che non è loggato (invio del token alla pagina reset_pwd).

Impariamo a costruire una vera app, prendendo spunto da un noto community forum. In questa lezione vediamo come fare un'analisi delle funzionalità e del front end che vogliamo realizzare, come impostare il wireframing con idonei strumenti ed infine creeremo assieme la riproduzione statica del design che abbiamo progettato.

La lezione è incentrata sulla architettura della base dati della nostra applicazione. Vedremo come costruire il nostro database, fatto di tabelle e di campi, come collegare le informazioni tra loro in modo tale da disporre di una gerarchia di dati ed anche come usare gli options set in alternative ai custom data type.

In questa lezione ci prepariamo a trasformare la versione statica del nostro front end nella versione dinamica. Creeremo un menù basato su un repeating group. Assegneremo una fonte di dati ai gruppi ed agli elementi della pagina. Useremo una serie di custom state che ci permetteranno di gestire anche la navigazione interna della pagina.

Proseguiamo la costruzione del nostro forum, andando a creare le funzionalità di iscrizione dell'utente ai canali del forum, di creazione di un post nonchè di organizzazione della duplice vista dell'elenco dei post e degli utenti iscritti al canale. Vedremo anche come impostare l'ordinamento dei dati e la loro ricerca.

La lezione è incentrata sulla creazione dell'elenco dei post, che comprende la gestione dei like e dei commenti. Proseguiamo con la realizzazione del secondo livello del forum, ovvero la creazione dei commenti con i relativi like. Ed infine creiamo il terzo livello di gestione relativo alle risposte ai commenti.

La lezione tratta in dettaglio la realizzazione dell'ordinamento dei post attraverso una tecnica specifica che prevede l'invio di parametri nel URL della pagina e la loro interpretazione da parte dei repeating groups. Vedremo inoltre come costruire una ricerca e selezione di dati attraverso le funzioni di search.

Lezione speciale dedicata alla gestione dei grafici. Vedremo come impostare la base dati, come installare il plugin dedicato e come impostare i parametri e le opzioni disponibili nel plugin per costruire grafici di vario tipo.

Lezione speciale dedicata alla gestione del calendario. Installeremo il plugin del calendario ed imposteremo la base dati per la gestione degli appuntamenti. Vedremo poi come creare, modificare, eliminare gli appuntamenti dal calendario.

Lezione speciale dedicata alla gestione delle mappe. Utilizzando la funzionalità nativa delle mappe, vedremo come impostare le API Key di Google e come visualizzare una o più località sulla mappa. La lezione include l'uso del plugin Google Places per gestire tramite API la ricerca e visualizzazione di località per tipologia.

Ultima lezione del corso. Facciamo un riepilogo degli argomenti trattati e vediamo come prepararci per la pubblicazione live della nostra web app (dal nome a dominio alla gestione del deploy e delle versioni dell'app).