Sommario[Nascondere][Spettacolo]
- Cos'è Bubble.io?
- Cos'è la programmazione visiva?
- Quali tipi di app puoi sviluppare?
Creazione di un'app con Bubble (Tutorial)+-
- 1. Per iniziare
- 2. Configurazione del database
- 3. Creazione di flussi di lavoro
- 4. Creazione di una notizia
- 5. Visualizzazione di contenuti dinamici nel feed
- 6. Invio di dati tra le pagine
- 7. Visualizzazione di contenuti dinamici nella pagina della storia
- 8. Visualizzazione dell'articolo dell'editore
- 9. Seguendo gli editori
- 10. Funzionalità aggiuntive che puoi aggiungere
- 11. Il risultato
- Vantaggi
- Svantaggi
- Prezzi
- Conclusione
Recentemente sono stato interessato ad approcci di sviluppo web diversi da HTML, CSS e JavaScript.
Con il crescente panorama senza codice, non è stato sorprendente scoprire che esistono diverse alternative agli approcci più standard per lo sviluppo di applicazioni web.
Devi avere familiarità con alcune delle piattaforme CMS più conosciute, come WordPress che sono praticamente prive di codice. Ma, se vuoi creare app web, tali piattaforme potrebbero sembrare restrittive.
Qui ti presento Bubble.io, un potente strumento senza codice che ti consente di creare app Web come mai prima d'ora.
Esploriamolo in profondità!
Che cosa è l' bolla.io?
Bubble è una piattaforma non tecnica che combina un linguaggio di programmazione visivo e a quadro di sviluppo web.
Gli utenti possono utilizzare questi strumenti di programmazione per costruire applicazioni online uniche, modificare database e processi, aggiungere componenti di pagina (immagini, testo, moduli di input, mappe) e progettare le loro interfacce.
È un mercato in cui puoi scoprire modelli, plug-in e servizi ideali per aiutarti a creare prodotti efficaci.
Senza dover impostare un tipico framework di programmazione, puoi creare qualsiasi cosa, da un marketplace a un social network a un CRM (Customer Relationship Management) utilizzando Bubble.
Offre ai clienti la possibilità di creare e personalizzare le proprie app utilizzando un'interfaccia intuitiva e un editor point-and-click.
Puoi usarlo insieme a servizi che forniscono un'API REST, come Facebook, SQL, analisi e app di pagamento. Consente agli utenti di dedicare tempo al miglioramento della funzionalità e dell'aspetto delle loro applicazioni in modo che abbiano un bell'aspetto su tablet e dispositivi mobili.
È appropriato per tutte le dimensioni aziendali, da piccole a medie e grandi; e accessibile per Windows, Mac e Web.
Cos'è la programmazione visiva?
La programmazione visiva è essenzialmente ciò che sembra. Invece di programmare manualmente scrivendo il codice, lo fai graficamente facendo clic e trascinando i componenti nelle pagine.
Non lasciarti ingannare da quella breve descrizione.
Non è come qualsiasi altra app per la creazione di cookie o strumento per la creazione di siti Web che hai incontrato online. La maggior parte dei costruttori di app richiede che tu faccia affidamento su modelli di base e abbia funzionalità estremamente limitate; ti consentono solo di sviluppare tipi specifici di app e limitare la tua personalizzazione.
Sebbene la nozione di "programmazione visiva" e "trascinamento e rilascio" appaia facile in Bubble, è tremendamente potente.
Il suo ambiente di programmazione visiva non solo ti consente di trascinare oggetti come testo, grafica, input e altro su una pagina, ma ti consente anche di configurare cosa fanno quegli elementi.
Cosa fa Bolla?
L'obiettivo principale di Bubble è consentire a chiunque di creare app Web senza dover scrivere codice.
Tuttavia, sebbene ciò fornisca una dichiarazione di obiettivo facilmente ricordabile, tralascia una parte significativa della storia. Il percorso dall'idea al mercato è più complicato della semplice creazione di righe di codice.
Nello sviluppo convenzionale è necessario un team di professionisti altamente qualificati che lavori su alcune sezioni della creazione, crescita e manutenzione dell'app. Considera questo.
Cosa richiede ogni app?
- Sicurezza per assicurarsi che nessuno abbia accesso non autorizzato ai dati.
- Un database per archiviare e recuperare informazioni come articoli, articoli e aggiornamenti sui social media.
- Scalabilità per consentire lo sviluppo senza ostacoli della base utenti e del volume di dati.
- Una piacevole interfaccia utente per rendere l'app attraente e facile da usare.
- Integrazione con vari servizi e sistemi.
Bubble sostituisce molto più di un programmatore. Fornisce tutti questi servizi in modo visivamente accattivante e altamente automatizzato, rendendo concepibile, se non semplice, la gestione di tutto da parte di una sola persona.
Mentre le precedenti piattaforme senza codice hanno cercato di sostituire la codifica in vari modi. Il suo concetto è rimuovere quante più barriere possibili affinché un'app raggiunga il mercato, gestendo qualsiasi cosa, dal design reattivo e dalle animazioni all'hosting, all'implementazione della versione, alla sicurezza e alle operazioni di database.
Utilizzo del connettore API per connettere Bubble ad altri servizi
Il suo connettore API è probabilmente il plugin più importante sul mercato. Come suggerisce il nome, questo ti consente di connetterti ad altre app e servizi per condividere azioni e dati.
Piuttosto che approfondire le specifiche tecniche di come funziona, considera questi esempi di ciò che le API potrebbero realizzare:
- Ottenere l'accesso a machine learning metodi come il riconoscimento e la traduzione delle immagini.
- Ottieni le informazioni meteo più recenti da qualsiasi parte della terra.
- Quando un evento viene attivato in Bubble, le informazioni vengono scambiate tra i sistemi, ad esempio stabilire un lead nel tuo CRM o un appuntamento nel tuo Google Calendar.
- Prenota un volo o un soggiorno in hotel ovunque nel mondo.
- Ottieni il numero di telefono, la posizione, le fotografie, il logo e le recensioni di qualsiasi azienda su Google Maps.
Utilizzo di plug-in per migliorare le funzionalità native
Tecnicamente, mescola moduli di codice JavaScript, CSS e HTML in un nodo funzionale. L'applicazione scritta in JS.JSON funge da base per il proprio linguaggio.
Sebbene non sia necessario comprendere appieno questa terminologia per creare app, indicano un fatto chiave: aderisce a standard Web noti e riconosciuti, consentendo agli sviluppatori di migliorare considerevolmente la sua funzionalità nativa.
Questo è già visto sul sito del plugin, dove sono disponibili centinaia di estensioni gratuite ea pagamento per le funzionalità di base. Implica anche che se raggiungi un punto in cui le sue capacità fondamentali sono insufficienti, ci sono molti esperti JavaScript disposti a creare una soluzione su misura per te.
Quali tipi di app puoi sviluppare?
È possibile creare una vasta gamma di applicazioni, alcune delle quali sono riportate di seguito.
- App per mercati specializzati con una community.
- App per bacheche di lavoro in una varietà di settori.
- Software per il personale ospedaliero.
- Software per punti vendita per negozi fisici.
- Software per studio dentistico con etichetta bianca.
- Inventario aziendale personale e software per il servizio clienti.
- Applicazioni di aggregazione immobiliare rivolte a broker e clienti.
- App per eventi e corsi sul mercato (e anche barche).
- I certificati professionali richiedono applicazioni di test interne.
- Le domande per i primi soccorritori.
- Software per la gestione dei dipendenti per uso interno.
Ad essere onesti, la piattaforma non è progettata per fare tutto. Potrebbe non essere la scelta ideale se stai progettando un'app di gioco con immagini e movimenti complessi. Inoltre, se stai creando un'app nativa (quella per gli app store), dovrai integrarla con un altro servizio di terze parti.
Funzionalità principali
Bubble è ricco di funzionalità. Non potremo coprirli tutti qui, ma cercheremo di coprire quelli più essenziali.
1. plugin
Ti consente di includere le funzionalità di numerosi strumenti su Internet nel tuo web application. Ad esempio, se desideri che i tuoi utenti accedano utilizzando il loro account Facebook, puoi utilizzare il plug-in di Facebook per farlo.
2. Sviluppa
Ti consente di creare app dinamiche e multiutente per browser Web desktop e mobili, nonché tutti gli strumenti necessari per creare un sito simile a Instagram o Airbnb.
3. Design
Puoi creare layout ottimizzati per dispositivi mobili e contenuti dinamici per dare il tocco finale a un prodotto che sarai felice di mostrare agli altri.
4. Hosting
Non devi mai preoccuparti della manutenzione del server, dell'infrastruttura o delle operazioni ancora e ancora.
Si occupa della distribuzione e dell'hosting per te in modo sicuro e protetto. Il numero di utenti, il volume di traffico e l'archiviazione dei dati sono tutti illimitati.
Creazione di un'app con Bubble (Tutorial)
Entriamo ora in azione ed esploriamo come creare un'app di notizie su Bubble.
1. Per iniziare
Per iniziare, devi prima registrati per un account gratuito su Bubble.
Inizieremo utilizzando lo strumento di progettazione visiva di Bubble per dare forma alla nostra piattaforma Interfaccia utente. Alcune delle pagine chiave da includere sono riportate di seguito:
- Pagina di caricamento: un sito Web in cui gli editori svilupperanno e distribuiranno articoli.
- Pagina iniziale: viene visualizzato un elenco delle storie pubblicate di recente.
- Pagina narrativa: una pagina in cui è possibile trovare ogni storia unica.
- Pagina dell'editore: una pagina per visualizzare un elenco di racconti di un determinato editore.
2. Configurazione del database
Dopo aver predisposto la visualizzazione del prodotto, puoi concentrarti sulla creazione dei campi di dati che alimenteranno la tua applicazione. Utilizzeremo questi campi per collegare i flussi di lavoro alla base del tuo prodotto.
Per questo esempio, stabiliremo due tipi di dati distinti per ciascuna notizia. Un tipo di dati conterrà i fatti di base di una storia (come il titolo, l'immagine in primo piano e l'editore), mentre l'altro tipo di dati conterrà file di contenuto più grandi come l'intera narrazione stessa.
Definendoli come tipi di dati discreti, possiamo caricare solo le informazioni richieste quando è richiesto, limitando la quantità di materiale che l'editor Bubble dovrà produrre.
Verranno creati i seguenti tipi di dati e campi:
Tipo di dati: Utente
campi:
- Nome
- I seguenti editori sono un elenco di editori. Nota importante: la creazione di un campo come elenco basato su un tipo di dati distinto consente di incorporare facilmente tutti i suoi campi di dati essenziali senza dover creare campi aggiuntivi.
Tipo di dati: Storia
campi:
- Titolo
- Foto di presentazione
- scrittore
- Categoria
- Publisher
- Contenuto della storia
Tipo di dati: Contenuto della storia
campi:
- Contenuto della storia
Tipo di dati: Publisher
campi:
- Nome
- Logo
- Seguaci
3. Creazione di flussi di lavoro
Ora che hai organizzato il design e il database della tua applicazione, è ora di iniziare a mettere insieme tutto e farlo funzionare.
I flussi di lavoro sono il metodo principale per farlo in Bubble.
Ogni flusso di lavoro si verifica quando si verifica un evento (ad esempio, un utente fa clic su un pulsante) e quindi esegue una sequenza di "azioni" in risposta (ad esempio, "registrare l'utente", "apportare una modifica al database" e così via) .
4. Creazione di una notizia
La prima funzionalità che offriremo è uno strumento che consente agli editori di scrivere e pubblicare notizie sul sito.
Nella pagina di caricamento, inizieremo incorporando molti elementi di input che verranno applicati all'immissione dei dati nel nostro database. Gli input di testo, un caricatore di immagini e una selezione a discesa sono esempi di questi campi.
Dovremo anche personalizzare il menu a discesa del publisher per visualizzare un elenco di opzioni dinamiche. Poiché ogni nuovo articolo verrà aggiunto all'elenco di articoli totali di un editore, dovremo scegliere un editore esistente dal nostro database.
Quando imposti questo menu a discesa, sceglieremo il tipo di opzioni per essere un editore.
Successivamente, la nostra fonte di dati eseguirà la scansione del nostro database e restituirà un elenco di tutte le pubblicazioni correnti. Infine, cambieremo la didascalia della fonte per includere il nome dell'editore.
Una volta che uno scrittore ha inserito le informazioni necessarie in ogni voce della pagina, farà clic sul pulsante di pubblicazione per generare un nuovo racconto.
Quindi, all'interno del tuo database, creerai una nuova cosa con il tipo di dati impostato su narrativo.
Quindi dovremo iniziare a popolare il nostro database con i campi necessari. Collega ciascuno dei componenti di input sulla pagina alle rispettive colonne del database.
Per prima cosa, creeremo il tipo di contenuto della storia, che sarà finalmente collegato al racconto stesso.
Successivamente, aggiungeremo un'altra fase a questa procedura, generando qualcos'altro: questa volta, il racconto stesso.
È possibile integrare questi dati senza sforzo in tutta la tua piattaforma integrando il primo materiale narrativo che abbiamo sviluppato con questo racconto.
Ad ogni attivazione di questa procedura verrà prodotto un nuovo conto.
5. Visualizzazione di contenuti dinamici nel feed
Una volta che gli editori iniziano a caricare materiale sulla tua app mobile, dovremo iniziare a creare la logica sulla tua home page che mostra ogni articolo come un elenco dinamico. Questo può essere ottenuto utilizzando il nostro elemento di gruppo ripetuto.
I gruppi ripetuti lavorano con il database per presentare e aggiornare un elenco di materiale dinamico.
Quando si applica un gruppo ripetuto, è necessario prima collegare l'elemento a un tipo di dati nel database.
In questo caso, classificherai il tipo di materiale come racconti. Dovrai anche fornire l'origine dati come elenco di tutte le tabelle nel database.
Organizzeremo anche questo gruppo ricorrente in base alla data di inizio di ogni storia, mostrando l'elenco in ordine cronologico inverso. Ora puoi iniziare a organizzare il materiale dinamico che apparirà all'interno di ciascuna griglia.
Compila semplicemente la riga superiore con il materiale appropriato che desideri visualizzare e questo potente elemento popolerà le colonne rimanenti con i dati del tuo database corrente.
6. Invio di dati tra le pagine
È anche possibile costruire eventi all'interno di ogni riga di un gruppo ripetuto. Durante lo sviluppo di funzionalità di navigazione per la tua piattaforma, questa funzionalità tornerà utile.
La home page della nostra app di notizie mostra semplicemente un'anteprima di ogni storia, incluso l'editore, un'immagine in primo piano e il titolo della storia.
Tuttavia, non mostra l'intero contenuto di un articolo finché l'utente non fa clic sulla pagina della storia. Useremo il nostro editor di flusso di lavoro per trasmettere i dati tra le pagine per visualizzare questo materiale.
Per iniziare, crea un processo che invii un utente alla pagina della storia quando si fa clic sull'immagine di una storia.
Utilizzare un evento di navigazione per trasferire un utente a un'altra pagina durante lo sviluppo di questo processo.
Scegli il tipo di pagina di destinazione come pagina narrativa dal menu a discesa. Dovrai quindi fornire ulteriori informazioni a questa pagina in modo che l'editor di Bubble capisca quale storia unica mostrare.
Le informazioni che dovrai fornire provengono dal racconto attuale delle cellule.
7. Visualizzazione di contenuti dinamici nella pagina della storia
Puoi facilmente recuperare i dati di questo evento e mostrare il materiale pertinente dalla narrazione quando un utente viene inviato a una determinata pagina della storia.
Per creare questa funzione, devi prima verificare che il tipo di pagina di destinazione corrisponda alla proprietà dei dati che stai fornendo attraverso il flusso di lavoro. In questa situazione, è necessario associare la pagina della storia a una proprietà della storia.
Può semplicemente estrarre e fornire dati appropriati da fonti esistenti classificando il tipo di contenuto in una pagina.
Ora puoi iniziare a inserire materiale dinamico nei campi che visualizzano le informazioni da una singola tabella.
8. Visualizzazione dell'articolo dell'editore
Dopo aver letto una notizia, un utente può scegliere di esaminare l'intero catalogo di articoli dell'editore. Se hai sviluppato un tipo di dati per i publisher, creare una pagina separata per i publisher è semplice come creare la nostra home page originale.
In questa pagina, dovremo iniziare impostando il tipo di pagina su publisher.
Quindi, copia il gruppo ripetuto dalla home page e modifica le impostazioni.
In questo caso, l'origine dati del nostro gruppo ripetuto cercherà tutti gli articoli esistenti il cui editore è l'editore della pagina corrente.
9. Seguendo gli editori
La terza caratteristica fondamentale che creeremo per il nostro MVP è la possibilità di seguire un editore sulla piattaforma. Aggiungeremo un pulsante Segui nella pagina dell'editore. Quando facciamo clic su questa icona, avvieremo un nuovo processo che modifica una cosa.
L'aggiunta dell'editore della pagina corrente all'elenco delle pubblicazioni successive cambierà l'utente corrente.
Successivamente, dovremo aggiornare l'elenco dei follower dell'editore della pagina corrente aggiungendo l'utente corrente.
10. Funzionalità aggiuntive che puoi aggiungere
Ora che sei a tuo agio con la creazione di campi dati personalizzati e la presentazione di informazioni dinamiche, puoi diventare creativo con le esperienze che crei per il tuo prodotto. Puoi anche includere:
- Crea una funzione che consenta agli utenti di salvare il contenuto per leggerlo in seguito.
- In fondo a ogni pezzo, fornisci una raccolta ricorrente di articoli suggeriti.
- Crea uno strumento di ricerca per aiutare le persone a trovare nuovi contenuti sul sito.
11. Il risultato
La tua app finale sarà simile a questa.
Vantaggi
- La possibilità di connettersi a molte API e plugin.
- Un'applicazione facile da usare, senza codice.
- Le persone senza esperienza di programmazione ne trarranno vantaggio.
- Strumenti di progettazione versatili e potenti.
- Elaborazione rapida delle query.
Svantaggi
- Maggiore affidabilità.
- La velocità di elaborazione dei dati è lenta.
- Le prestazioni sono limitate.
Prezzi
Il piano gratuito ti consente di conoscere la piattaforma e sviluppare la tua applicazione.
Gli abbonamenti a pagamento includono extra come white label, un dominio personalizzato, l'accesso all'API Bubble e la capacità riservata del server, elencati di seguito.
- Personale – $ 25/mese (pagato annualmente) o $ 29/mese (pagato mensilmente).
- Professional – $ 115/mese (pagato annualmente) o $ 129/mese (pagato mensilmente).
- Produzione – $ 475/mese (pagato annualmente) o $ 529/mese (pagato mensilmente).
Inizia con Bubble gratuitamente
Conclusione
Bubble è un'ottima alternativa per la creazione di applicazioni Web che possono mostrare solo informazioni o avere un'interfaccia utente minima.
È abbastanza semplice da usare e i tutorial forniti da Bubble sono estremamente utili. Il suo editor visivo online che ti consente di progettare app Web in base alle tue preferenze.
E la parte migliore è che non hai bisogno di alcuna esperienza o competenza di programmazione. Bubble è adatto a tutti, indipendentemente dal fatto che tu sappia programmare o meno.
Tuttavia, la comprensione preliminare dei linguaggi frontend può darti un vantaggio perché ti consente di capire rapidamente cosa sta facendo per quanto riguarda la gestione degli eventi.
Allora, cosa ne pensi delle capacità di Bubble?
Fateci sapere nei commenti!
Arbehi
È possibile creare un negozio per vendere prodotti utilizzando lo strumento bubble.io?