Articles

Come costruire un sito di recensioni di ristoranti senza codice

Se stai cercando il ristorante o il bar perfetto, piattaforme come Yelp, Zagat o Zomato (Urbanspoon) possono aiutarti a scegliere tra migliaia di opzioni alimentari.

Se eri interessato a costruire la tua versione di un sito di recensioni di ristoranti, tuttavia, Bubble è l’unica piattaforma di cui avrai bisogno.

Strumenti senza codice come Bubble stanno rivoluzionando il modo in cui i creatori di tutti i giorni possono creare software. La potente piattaforma di Bubble ha reso più facile che mai iniziare a creare software senza dover scrivere una singola riga di codice.

Il nostro strumento di programmazione visiva consente di progettare e costruire rapidamente software di lavoro che va oltre le esperienze statiche. I produttori utilizzano Bubble per costruire mercati, directory e persino social network.

Questo post coprirà il processo passo-passo di costruire un sito di recensioni di ristoranti senza codice utilizzando Bubble. Se stai cercando di replicare l’intero prodotto, o sei solo interessato a utilizzare alcune delle caratteristiche principali della piattaforma, questa guida condividerà come costruire i flussi di lavoro necessari per ottenere il vostro prodotto installato e funzionante.

I passaggi per creare uno stile Yelp senza codice includono:

Inizia

Per iniziare, devi registrare il tuo account Bubble gratuito.

Registra il tuo account su Bubble

Nuovo a Bubble? Segui i nostri video introduttivi del corso accelerato per familiarizzare con le basi di Bubble.

Si consiglia inoltre di completare le nostre lezioni introduttive, che vi guiderà attraverso il processo passo-passo delle caratteristiche Bolla più comuni. Questo ti aiuterà a iniziare a correre quando costruisci la tua app di revisione del ristorante senza codice.

Si consiglia inoltre di capire come creare e modificare gli account utente. In precedenza abbiamo trattato questo in modo più dettagliato nel nostro altro Come costruire guide.

Quando si avvia il progetto, è possibile scegliere di iniziare cablando il design del prodotto o creando i campi necessari all’interno del database.

In questa guida, inizieremo utilizzando lo strumento di visual design di Bubble per modellare l’interfaccia utente del nostro prodotto. Se stai replicando una versione di Yelp o Zomato, alcune delle pagine principali che vorrai includere sono:

  • pagina di Caricamento di un backend portale in cui è possibile caricare nuovi ristoranti
  • Home page – visualizzazione di un elenco di ristoranti e una barra di ricerca
  • pagina dei risultati di Ricerca – visualizzazione di un elenco di ristoranti e categorie una volta che un utente ha cercato una posizione
  • Individuo ristorante pagina – una pagina che presenta l’intera informazioni per ogni ristorante
  • Rivedere la pagina di presentazione – una pagina in cui gli utenti possono inviare la recensione di un ristorante

Una funzione importante all’interno della Bolla è la possibilità di inviare i dati tra pagine. Ciò consente di creare una versione generica di una pagina, quindi visualizzare dinamicamente il contenuto pertinente dal database quando è richiesto.

Nel caso del tuo sito, dovrai solo creare una pagina per mostrare i tuoi singoli ristoranti. Possiamo quindi creare i flussi di lavoro necessari per visualizzare solo il ristorante pertinente su ogni pagina quando è necessario (lo tratteremo presto in modo più dettagliato).

Configurazione dell’app

Una volta mappata la visualizzazione del prodotto, è possibile concentrarsi sulla creazione dei campi dati necessari per alimentare l’applicazione. Ci baseremo su questi tipi di dati, campi per collegare i flussi di lavoro dietro il vostro prodotto.

Il database pre-costruito di Bubble semplifica la creazione di diversi tipi di dati con campi unici. Quando si crea un’app ristorante simile a Yelp come MVP, sarà necessario creare i seguenti tipi di dati & campi:

Tipo di dati: Utente

Campi:

  • Nome
  • Foto
  • Recensioni inviate-Elenco delle recensioni. Nota: la creazione di un campo come elenco basato su un tipo di dati separato consente di integrare senza problemi tutti i campi di dati pertinenti. In questo modo si risparmia dal dover ricreare tutti i campi di dati aggiuntivi
Bolla n codice yelp clone modello di tutorial

tipo di Dati: Ristorante

Campi:

  • Nome
  • Descrizione
  • Città
  • Logo
  • link al Sito
  • numero di Telefono
  • Piede categorie – Elenco
  • Indirizzo
  • foto in primo piano – Elenco
  • Recensioni – opinioni
Bolla n codice yelp clone modello di tutorial

tipo di Dati: Recensione

Campi:

  • Contenuto
  • Ristorante-Ristorante
Bubble no code yelp clone tutorial template

Aggiunta di un ristorante alla piattaforma

Ora che hai configurato il tuo database, possiamo iniziare a costruire i flussi di lavoro che alimenteranno la tua applicazione. La prima funzionalità che creeremo non è qualcosa con cui gli utenti si impegneranno direttamente, ma è invece uno strumento di back-end per aggiungere nuovi ristoranti alla piattaforma.

Con la costruzione di un portale dedicato per caricare annunci al database, è possibile semplificare il processo di aggiunta di nuovi ristoranti alla directory.

Nella pagina di caricamento, è possibile utilizzare una combinazione di campi di input per mappare i dati richiesti per ogni nuovo ristorante. Una volta cliccato il pulsante Crea, questo attiverà un flusso di lavoro che aggiungerà questi dati collettivi come un nuovo ristorante all’interno del database.

Bubble no code yelp clone tutorial template

Quando costruisci il tuo flusso di lavoro, dovremo creare una nuova cosa, configurando il tipo di dati in un ristorante.

Bubble no code yelp clone tutorial template

Potrai quindi abbinare gli elementi rilevanti sulla pagina per i campi di dati sotto il tipo di ristorante nel database.

Bubble no code yelp clone tutorial template

Visualizzazione di contenuti dinamici

Una volta caricato un catalogo di ristoranti, è il momento di iniziare a visualizzarli su una pagina pubblica a cui gli utenti possono accedere.

Utilizzando l’elemento gruppo ripetuto di Bubble, è possibile visualizzare un elenco di dati dinamici dal database, ad esempio i ristoranti esistenti.

Nota: I gruppi ripetuti sono strutturati come formato verticale per impostazione predefinita, ma è anche possibile riconfigurare l’elemento da visualizzare orizzontalmente.

Prima di iniziare ad aggiungere contenuti nel gruppo ripetuto, è necessario collegare l’elemento a un tipo di dati all’interno del database. Ciò lo aiuterà a identificare il contenuto specifico che visualizzerà.

Il tipo di contenuto che dovremo visualizzare, è ovviamente, i ristoranti nel database.

Successivamente, dovremo identificare un’origine dati in modo che l’editor di bolle sappia quali ristoranti specifici visualizzare. Per il nostro MVP, visualizzeremo solo un elenco di tutti i ristoranti attuali, ma puoi facilmente aggiungere vincoli a questa origine dati per filtrare i ristoranti in base alla loro città o alle categorie di cibo.

Bubble no code yelp clone tutorial template

Una volta configurato correttamente il gruppo ripetuto, dovrai quindi iniziare ad aggiungere qualsiasi elemento di contenuto dinamico che desideri visualizzare all’interno di ogni cella. All’interno del nostro MVP, questo includerà il titolo di un ristorante e la foto in primo piano.

Poiché un ristorante può avere più foto in primo piano, configureremo il contenuto dinamico per visualizzare una di queste foto a caso.

Bubble no code yelp clone tutorial template

Invio di dati a pagine dinamiche

Con la nostra home page che mostra solo una scheda di anteprima per ogni ristorante, gli utenti dovranno fare clic su una pagina vetrina dedicata per ogni ristorante per visualizzare il suo contenuto completo e recensioni. Queste informazioni aggiuntive saranno ospitate nella pagina del ristorante della tua applicazione.

Dal nostro gruppo ripetitivo, è possibile creare eventi in base alle azioni intraprese all’interno di ogni singola riga. Questa funzione diventerà utile quando si creano funzionalità di navigazione sulla piattaforma.

Per indirizzare un utente dalla home page a una specifica pagina vetrina di un ristorante, è necessario creare un flusso di lavoro di navigazione che viene attivato quando si fa clic su un’immagine di un ristorante.

Bubble no code yelp clone tutorial template

Dovrai quindi inviare dati aggiuntivi a questa pagina, consentendo all’editor di bolle di identificare quale ristorante specifico visualizzare. I dati che sceglierai di visualizzare verranno estratti dal ristorante della cella corrente.

 Bubble no code yelp clone tutorial template

Visualizza contenuto dinamico sulla pagina di anteprima

Una volta che i dati sono stati inviati alla pagina del ristorante, si può facilmente tirare le informazioni rilevanti e visualizzare questo contenuto per ogni ristorante.

È necessario innanzitutto assicurarsi che il tipo di pagina di destinazione corrisponda alla proprietà dati che si sta inviando all’interno del flusso di lavoro. In questo caso, la pagina ristorante sarà configurata per una proprietà ristorante.

Bubble no code yelp clone tutorial template

Classificando il tipo di contenuto in una pagina, Bubble può facilmente estrarre e inviare dati rilevanti da fonti esistenti.

È ora possibile iniziare ad aggiungere contenuti dinamici nei campi che visualizzano le informazioni dal ristorante della pagina corrente.

Bubble no code yelp clone tutorial template

Ricerca di contenuti

Facendo un passo indietro alla nostra homepage, avremo anche bisogno di costruire una funzione che consente agli utenti di cercare ristoranti basati su una città. Questo può essere ottenuto aggiungendo un elemento di input di testo aggiuntivo che tratteremo come una barra di ricerca.

Bubble no code yelp clone tutorial template

Da qui, creeremo un nuovo flusso di lavoro che classifica il termine di ricerca di un utente, quindi passa questi dati attraverso una pagina separata dedicata a questa query di ricerca (più su questa pagina presto).

Per alimentare questo flusso di lavoro, creeremo un trigger di evento che riconosce quando viene modificato un valore di input. L’elemento sarà, ovviamente, il campo di immissione del testo.

Bubble no code yelp clone tutorial template

Quando inviamo l’utente alla nostra pagina dei risultati di ricerca, dovremo aggiungere una query di ricerca univoca alla nostra stringa URL, consentendo alla pagina seguente di recuperare questi dati.

Invece di scegliere di inviare un utente a una pagina specifica in questo flusso di lavoro, sceglieremo di aprire un sito Web esterno. Questo ci permetterà di personalizzare il percorso URL tra le pagine.

L’URL a cui invieremo l’utente sarà l’URL home del sito corrente + l’URL della nostra pagina dei risultati di ricerca + il valore della query dinamica dal nostro campo di input di testo.

Bubble no code yelp clone tutorial template

Successivamente, finiremo di costruire la nostra pagina dei risultati di ricerca dedicata all’interno della nostra applicazione. Quando si crea questa pagina, sarà necessario configurare il tipo di pagina per un ristorante come saremo voler visualizzare un elenco di ristoranti corrispondenti.

Bubble no code yelp clone tutorial template

Quando si progetta questa pagina, includeremo prima un elemento di gruppo ripetuto per visualizzare un elenco di ristoranti. A differenza del nostro primo gruppo ripetuto, dovremo aggiornare l’origine dati di questo gruppo ripetuto in modo che corrisponda alla query di ricerca dalla nostra stringa URL.

Inizia configurando il tipo di contenuto per essere un ristorante. Quindi, aggiorna l’origine dati per visualizzare solo i ristoranti che includono il testo delle stringhe URL nel loro campo città.

Bubble no code yelp clone tutorial template

Questo ora mostrerà solo i ristoranti che corrispondono alla città dalla query di ricerca degli utenti.

Avanti in questa pagina, ti consigliamo di aggiornare il marcatore sulla nostra mappa ogni volta che un titolo ristoranti viene cliccato, consentendo agli utenti di vedere visivamente il suo indirizzo.

Per creare questa funzione, utilizzare Bubble workflow edit per creare un evento personalizzato che riconosce quando si fa clic sul titolo di un ristorante.

Bubble no code yelp clone tutorial template

Da qui, sceglieremo l’azione per visualizzare i marcatori.

Bubble no code yelp clone tutorial template

Ora, selezioneremo per visualizzare il marcatore per la nostra mappa on-page, configurando la sua origine dati come l’indirizzo attuale celle ristoranti.

Bubble no code yelp clone tutorial template

La caratteristica fondamentale finale che dovremo aggiungere alla nostra pagina dei risultati di ricerca è un menu a discesa categoria, che consente agli utenti di filtrare i ristoranti per le categorie di alimenti che servono.

Bubble no code yelp clone tutorial template

Una volta configurate le opzioni per il menu a discesa, dovremo aggiungere una condizione al nostro gruppo ripetitivo, permettendogli di rispondere alla selezione dei menu a discesa.

La logica per questa condizione identificherà quando il valore dei menu a discesa non è vuoto. Quando ciò si verifica, verrà quindi aggiornata l’origine dati del gruppo ripetuto.

La nuova origine dati includerà ancora una volta una ricerca di ristoranti, aggiungendo la stessa condizione per la stringa URL città. Aggiungeremo anche un altro vincolo, assicurando che le categorie di cibo del ristorante contengano anche lo stesso valore della selezione dei menu a discesa.

Bubble no code yelp clone tutorial template

Ora, quando viene selezionata una categoria di cibo, questo gruppo ripetuto si aggiornerà automaticamente con i risultati più rilevanti.

L’ultima funzione che dovremo aggiungere a questa pagina, è un altro evento di navigazione che indirizza un utente alla nostra pagina dedicata ristorante quando si fa clic su un’immagine ristoranti.

Replicheremo lo stesso flusso di lavoro di navigazione che abbiamo creato dalla nostra homepage ripetendo gruppo.

Bubble no code yelp clone tutorial template

Aggiunta di recensioni a un ristorante

Una volta che un utente ha trovato un nuovo ristorante preferito (grazie alla tua app senza codice), potrebbe voler contribuire con una recensione, condividendo la propria esperienza con la comunità.

Nella nostra pagina del ristorante, aggiungeremo un ulteriore gruppo ripetuto sotto le informazioni del ristorante. Questo gruppo ripetuto verrà utilizzato per visualizzare un elenco delle recensioni correnti dei ristoranti.

Quando si configura questo gruppo ripetuto, il tipo di dati verrà impostato su una revisione e la nostra origine dati estrarrà tutte le recensioni dal ristorante pagine corrente.

Bubble no code yelp clone tutorial template

Da qui, creeremo un nuovo flusso di lavoro quando si fa clic sul pulsante Aggiungi recensione.

Bubble no code yelp clone tutorial template

Questo flusso di lavoro reindirizzerà un utente a una pagina dedicata dove possono creare una nuova recensione. Quando si invia un utente a questa pagina, vorremo anche trasmettere i dati dal ristorante pagine corrente.

Bubble no code yelp clone tutorial template

Sulla nostra pagina di revisione invia, avremo bisogno di aggiornare il tipo di pagina per essere anche un ristorante, che ci permette di tirare i dati attuali ristoranti.

Bubble no code yelp clone tutorial template

Infine, avremo quindi bisogno di creare un altro flusso di lavoro che si attiva una volta cliccato il pulsante post recensione.

Bubble no code yelp clone tutorial template

Questo flusso di lavoro verrà utilizzato per creare una nuova cosa – una nuova recensione.

Bubble no code yelp clone tutorial template

Come hai fatto prima, potrai quindi abbinare gli elementi sulla pagina con i campi di dati necessari per creare una recensione valida.

Una volta creata una nuova recensione, verrà automaticamente aggiunta al gruppo ripetuto nella pagina ristoranti.

Funzionalità aggiuntive

Dopo aver creato le funzionalità principali per il tuo MVP, acquisirai familiarità con il processo di creazione di campi dati personalizzati e visualizzazione di contenuti dinamici. Se vuoi continuare ad aggiungere ulteriori funzionalità al vostro directory, si potrebbe prendere in considerazione:

  • Aggiunta di una funzionalità per gli utenti di inviare le foto ad una pagina ristorante
  • Creazione di profili utente – visualizzazione di un elenco di utenti, i dettagli dell’account e le recensioni che hai creato attraverso la piattaforma

Avvio

Assumere uno sviluppatore o dev team per costruire questa applicazione potrebbe costare migliaia, se non decine di migliaia di dollari. Mentre lanci e cresci negli utenti, i nostri piani a pagamento ti consentono di ospitare l’app sul tuo dominio personalizzato per un minimo di $25 al mese. Alcuni modelli e plugin possono costare di più, ma è possibile costruire tutte le funzionalità di una directory senza costi aggiuntivi.

Modelli

Se non vuoi costruire il tuo tema di recensione del ristorante da zero, puoi acquistare uno dei modelli creati dai nostri membri della community. Alcuni modelli simili includono:

  • Canvas Reviews Platform di AirDev
  • Location Based Reviews di Zeroqode
  • Directory& Elenco di Zeroqode

Inizia a costruire

Bubble può aiutarti a costruire un sito di recensioni di ristoranti o qualsiasi altro prodotto tu scelga! Non è mai stato così facile costruire qualcosa di incredibile senza dover codificare.

Per iniziare gratuitamente, registrati qui.

Puoi anche connetterti con altri creatori appassionati che costruiscono con Bubble sul nostro forum della community.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.