Articles

So erstellen Sie eine Restaurant-Bewertungsseite ohne Code

Wenn Sie nach dem perfekten Restaurant oder der perfekten Bar suchen, können Plattformen wie Yelp, Zagat oder Zomato (Urbanspoon) Ihnen bei der Auswahl aus Tausenden von Speisen helfen.

Wenn Sie jedoch daran interessiert waren, Ihre eigene Version einer Website für Restaurantbewertungen zu erstellen, ist Bubble die einzige Plattform, die Sie benötigen.

No-Code-Tools wie Bubble revolutionieren die Art und Weise, wie alltägliche Hersteller Software erstellen können. Die leistungsstarke Plattform von Bubble hat es einfacher denn je gemacht, mit der Erstellung von Software zu beginnen, ohne eine einzige Codezeile schreiben zu müssen.

Unser visuelles Programmiertool ermöglicht es, schnell funktionierende Software zu entwerfen und zu erstellen, die über statische Erfahrungen hinausgeht. Maker verwenden Bubble, um Marktplätze, Verzeichnisse und sogar soziale Netzwerke aufzubauen.

Dieser Beitrag behandelt den schrittweisen Prozess des Aufbaus einer No-Code-Restaurant-Bewertungsseite mit Bubble. Egal, ob Sie das gesamte Produkt replizieren möchten oder nur einige der Kernfunktionen der Plattform nutzen möchten, in diesem Handbuch erfahren Sie, wie Sie die erforderlichen Workflows erstellen, um Ihr Produkt zum Laufen zu bringen.

Die Schritte zum Erstellen eines Yelp-Stils ohne Code umfassen:

Erste Schritte

Um loszulegen, müssen Sie Ihr kostenloses Bubble-Konto registrieren.

Registrieren Sie Ihr Konto auf Bubble

Neu bei Bubble? Folgen Sie unseren Einführungsvideos zum Crashkurs, um sich mit den Grundlagen von Bubble vertraut zu machen.

Wir empfehlen außerdem, unsere Einführungsstunden zu absolvieren, die Sie Schritt für Schritt durch den Prozess der häufigsten Bubble-Funktionen führen. Dies wird Ihnen helfen, einen laufenden Start zu bekommen, wenn Sie Ihre No-Code-Restaurant-Review-App erstellen.

Wir empfehlen außerdem, sich mit dem Erstellen und Bearbeiten von Benutzerkonten vertraut zu machen. Wir haben dies zuvor in unseren anderen Anleitungen zum Erstellen ausführlicher behandelt.

Wenn Sie Ihr Projekt starten, können Sie mit dem Wireframing Ihres Produktdesigns beginnen oder die erforderlichen Felder in Ihrer Datenbank erstellen.

In diesem Handbuch verwenden wir zunächst das visuelle Design-Tool von Bubble, um die Benutzeroberfläche unseres Produkts zu gestalten. Wenn Sie eine Version von Yelp oder Zomato replizieren, sollten Sie folgende Kernseiten einbeziehen:

  • Upload-Seite – ein Backend-Portal, in dem Sie neue Restaurants hochladen können
  • Startseite – Anzeige einer Liste von Restaurants und einer Suchleiste
  • Suchergebnisseite – Anzeige einer Liste von Restaurants und Kategorien, sobald ein Benutzer einen Ort gesucht hat
  • Individuelle Restaurantseite – eine Seite mit den vollständigen Informationen für jedes Restaurant
  • Überprüfungsseite – eine seite, auf der Benutzer eine Restaurantbewertung einreichen können

Ein Hauptmerkmal von Bubble ist die Möglichkeit, Daten zwischen Seiten zu senden. Auf diese Weise können Sie eine generische Version einer Seite erstellen und dann bei Bedarf den relevanten Inhalt aus Ihrer Datenbank dynamisch anzeigen.

Im Falle Ihrer Website müssen Sie nur eine Seite erstellen, um Ihre einzelnen Restaurants zu präsentieren. Wir können dann die notwendigen Workflows erstellen, um nur das relevante Restaurant auf jeder Seite anzuzeigen, wenn es benötigt wird (wir werden dies in Kürze ausführlicher behandeln).

Konfigurieren Ihrer App

Nachdem Sie die Anzeige Ihres Produkts festgelegt haben, können Sie sich auf die Erstellung der erforderlichen Datenfelder für die Anwendung konzentrieren. Wir verlassen uns auf diese Datentypen, Felder, um die Workflows hinter Ihrem Produkt zu verbinden.

Bubble vorgefertigte Datenbank macht es einfach, verschiedene Datentypen mit eindeutigen Feldern zu erstellen. Wenn Sie eine Yelp-ähnliche Restaurant-App als MVP erstellen, müssen Sie die folgenden Datentypen erstellen & Felder:

Datentyp: Benutzer

Felder:

  • Name
  • Foto
  • Eingereichte Bewertungen – Liste der Bewertungen. Hinweis: Wenn Sie ein Feld als Liste basierend auf einem separaten Datentyp erstellen, können Sie alle relevanten Datenfelder nahtlos integrieren. Dadurch müssen Sie nicht alle zusätzlichen Datenfelder neu erstellen
 Blase kein Code yelp Clone Tutorial Vorlage

Datentyp: Restaurant

Felder:

  • Name
  • Beschreibung
  • Stadt
  • Logo
  • Website Link
  • Telefonnummer
  • Fuß Kategorien – Liste
  • Adresse
  • Empfohlene Fotos – Liste
  • Bewertungen – Liste der Bewertungen
 Blase kein Code yelp clone Tutorial Vorlage

Datentyp: Überprüfung

Felder:

  • Inhalt
  • Restaurant – Restaurant
 Bubble no code yelp clone tutorial template

Hinzufügen eines Restaurants zur Plattform

Nachdem Sie Ihre Datenbank konfiguriert haben, können wir mit der Erstellung der Workflows beginnen, die Ihre Anwendung unterstützen. Die erste Funktion, die wir erstellen, ist nicht etwas, mit dem Benutzer direkt interagieren, sondern ein Back-End-Tool zum Hinzufügen neuer Restaurants zur Plattform.

Durch den Aufbau eines dedizierten Portals zum Hochladen von Angeboten in Ihre Datenbank können Sie das Hinzufügen neuer Restaurants zu Ihrem Verzeichnis optimieren.

Auf Ihrer Upload-Seite können Sie eine Kombination von Eingabefeldern verwenden, um die erforderlichen Daten für jedes neue Restaurant abzubilden. Sobald Sie auf die Schaltfläche Erstellen geklickt haben, wird ein Workflow ausgelöst, der diese kollektiven Daten als neues Restaurant in Ihrer Datenbank hinzufügt.

Bubble no code yelp clone tutorial template

Beim Erstellen Ihres Workflows müssen wir eine neue Sache erstellen und den Datentyp für ein Restaurant konfigurieren.

Bubble no code yelp clone tutorial template

Anschließend ordnen Sie die relevanten Elemente auf Ihrer Seite den Datenfeldern unter dem Restauranttyp in Ihrer Datenbank zu.

Bubble no code yelp clone tutorial template

Anzeigen dynamischer Inhalte

Sobald Sie einen Restaurantkatalog hochgeladen haben, ist es an der Zeit, diese auf einer öffentlich zugänglichen Seite anzuzeigen, auf die Benutzer zugreifen können.

Mit dem Element repeating group von Bubble können Sie eine Liste dynamischer Daten aus Ihrer Datenbank anzeigen, z. B. Ihre vorhandenen Restaurants.

Hinweis: Wiederkehrende Gruppen sind standardmäßig als vertikales Format strukturiert, es ist jedoch auch möglich, das Element so zu konfigurieren, dass es horizontal angezeigt wird.

Bevor Sie mit dem Hinzufügen von Inhalten zu Ihrer Wiederholungsgruppe beginnen, müssen Sie das Element mit einem Datentyp in Ihrer Datenbank verknüpfen. Dies wird ihm helfen, den spezifischen Inhalt zu identifizieren, den es anzeigen wird.

Die Art des Inhalts, den wir anzeigen müssen, ist natürlich die Art in Ihrer Datenbank.

Als nächstes müssen wir eine Datenquelle identifizieren, damit der Bubble Editor weiß, welche spezifischen Restaurants angezeigt werden sollen. Für unser MVP zeigen wir nur eine Liste aller aktuellen Restaurants an, aber Sie können dieser Datenquelle ganz einfach Einschränkungen hinzufügen, um Restaurants nach ihrer Stadt oder Lebensmittelkategorie zu filtern.

Bubble no code yelp clone tutorial template

Sobald Sie die Wiederholungsgruppe ordnungsgemäß konfiguriert haben, müssen Sie alle dynamischen Inhaltselemente hinzufügen, die Sie in jeder Zelle anzeigen möchten. In unserem MVP enthält dies den Titel eines Restaurants und ein Foto.

Da ein Restaurant mehrere vorgestellte Fotos haben kann, konfigurieren wir den dynamischen Inhalt so, dass eines dieser Fotos zufällig angezeigt wird.

Bubble no code yelp clone Tutorial template

Senden von Daten an dynamische Seiten

Da auf unserer Homepage nur eine Vorschaukarte für jedes Restaurant angezeigt wird, müssen Benutzer für jedes Restaurant auf eine spezielle Schaufensterseite klicken, um den vollständigen Inhalt und die Bewertungen anzuzeigen. Diese zusätzlichen Informationen werden auf der Restaurantseite Ihrer Anwendung gehostet.

In unserer Wiederholungsgruppe können Ereignisse basierend auf Aktionen in jeder einzelnen Zeile erstellt werden. Diese Funktion wird nützlich sein, wenn Sie Navigationsfunktionen auf Ihrer Plattform erstellen.

Um einen Benutzer von der Startseite zu einer bestimmten Restaurant-Showcase-Seite zu leiten, müssen Sie einen Navigationsworkflow erstellen, der ausgelöst wird, wenn auf ein ausgewähltes Bild des Restaurants geklickt wird.

Bubble no code yelp clone tutorial template

Sie müssen dann zusätzliche Daten an diese Seite senden, damit der Bubble Editor erkennen kann, welches Restaurant angezeigt werden soll. Die Daten, die Sie anzeigen möchten, werden aus dem Speicher der aktuellen Zelle abgerufen.

Bubble no Code yelp clone tutorial template

Anzeige dynamischer Inhalte auf der Vorschauseite

Sobald Daten an die Restaurantseite gesendet wurden, können Sie die relevanten Informationen einfach abrufen und diesen Inhalt für jedes Restaurant anzeigen.

Sie müssen zunächst sicherstellen, dass der Zielseitentyp mit der Dateneigenschaft übereinstimmt, die Sie im Workflow senden. In diesem Fall wird die Restaurantseite als Restauranteigenschaft konfiguriert.

Bubble no code yelp clone tutorial template

Durch die Klassifizierung der Art des Inhalts auf einer Seite kann Bubble relevante Daten einfach aus vorhandenen Quellen abrufen und senden.

Sie können jetzt dynamische Inhalte in die Felder einfügen, die Informationen aus dem Restaurant der aktuellen Seite anzeigen.

Bubble no code yelp clone tutorial template

Nach Inhalten suchen

Wenn wir einen Schritt zurück zu unserer Homepage machen, müssen wir auch eine Funktion erstellen, mit der Benutzer basierend auf einer Stadt nach Restaurants suchen können. Dies kann durch Hinzufügen eines zusätzlichen Texteingabeelements erreicht werden, das wir als Suchleiste behandeln.

Bubble no code yelp clone tutorial template

Von hier aus erstellen wir einen neuen Workflow, der den Suchbegriff eines Benutzers klassifiziert und diese Daten dann an eine separate Seite weiterleitet, die dieser Suchanfrage gewidmet ist (mehr dazu auf dieser Seite in Kürze).

Um diesen Workflow zu unterstützen, erstellen wir einen Ereignistrigger, der erkennt, wenn ein Eingabewert geändert wird. Das Element wird natürlich das Texteingabefeld sein.

Bubble no code yelp clone tutorial template

Wenn Sie den Benutzer auf unsere Suchergebnisseite senden, müssen wir unserer URL-Zeichenfolge eine eindeutige Suchanfrage hinzufügen, damit die folgende Seite diese Daten abrufen kann.

Anstatt einen Benutzer in diesem Workflow auf eine bestimmte Seite zu senden, öffnen wir eine externe Website. Auf diese Weise können wir den URL-Pfad zwischen den Seiten anpassen.

Die URL, an die wir den Benutzer senden, ist die Startseite der aktuellen Website + die URL unserer Suchergebnisseite + der dynamische Abfragewert aus unserem Texteingabefeld.

Bubble no code yelp clone tutorial template

Als nächstes werden wir die Erstellung unserer speziellen Suchergebnisseite in unserer Anwendung abschließen. Beim Erstellen dieser Seite müssen wir den Seitentyp für ein Restaurant konfigurieren, da wir eine Liste passender Restaurants anzeigen möchten.

Bubble no code yelp clone tutorial template

Beim Entwerfen dieser Seite fügen wir zuerst ein sich wiederholendes Gruppenelement hinzu, um eine Liste von Restaurants anzuzeigen. Im Gegensatz zu unserer ersten wiederholten Gruppe müssen wir die Datenquelle dieser wiederholten Gruppe aktualisieren, damit sie mit der Suchabfrage aus unserer URL-Zeichenfolge übereinstimmt.

Konfigurieren Sie zunächst den Inhaltstyp als Restaurant. Aktualisieren Sie als Nächstes die Datenquelle, um nur die Restaurants anzuzeigen, die unseren URL-Strings-Text in ihrem Stadtfeld enthalten.

Bubble no code yelp clone tutorial template

Dies zeigt jetzt nur die Restaurants an, die der Stadt aus der Suchanfrage des Benutzers entsprechen.

Als nächstes möchten wir auf dieser Seite die Markierung auf unserer Karte aktualisieren, wenn auf einen Restauranttitel geklickt wird, damit Benutzer seine Adresse visuell sehen können.

Um diese Funktion zu erstellen, verwenden Sie Bubble Workflow edit, um ein benutzerdefiniertes Ereignis zu erstellen, das erkennt, wenn auf einen bestimmten Titel geklickt wird.

Bubble no code yelp clone tutorial template

Von hier aus wählen wir die Aktion zum Anzeigen von Markierungen.

Bubble no code yelp clone tutorial template

Jetzt wählen wir die Markierung für unsere On-Page-Karte aus und konfigurieren ihre Datenquelle als die Adresse der aktuellen Zelle.

Bubble no code yelp clone tutorial template

Das letzte Hauptmerkmal, das wir unserer Suchergebnisseite hinzufügen müssen, ist ein Dropdown-Menü für Kategorien, mit dem Benutzer Restaurants nach den Kategorien der von ihnen servierten Lebensmittel filtern können.

Bubble no code yelp clone tutorial template

Sobald Sie die Optionen für das Dropdown-Menü konfiguriert haben, müssen wir unserer Wiederholungsgruppe eine Bedingung hinzufügen, damit sie auf die Dropdown-Auswahl reagieren kann.

Die Logik für diese Bedingung erkennt, wenn der Dropdown-Wert nicht leer ist. In diesem Fall wird die Datenquelle der wiederholten Gruppe aktualisiert.

Die neue Datenquelle enthält erneut eine Suche nach Restaurants und fügt dieselbe Bedingung für die URL-Zeichenfolge Städte hinzu. Wir werden auch eine weitere Einschränkung hinzufügen, um sicherzustellen, dass die Lebensmittelkategorien des Restaurants auch den gleichen Wert wie die Auswahl der Dropdown-Menüs enthalten.

Bubble no code yelp clone tutorial template

Wenn nun eine Lebensmittelkategorie ausgewählt wird, wird diese sich wiederholende Gruppe automatisch mit den relevantesten Ergebnissen aktualisiert.

Die letzte Funktion, die wir dieser Seite hinzufügen müssen, ist ein weiteres Navigationsereignis, das einen Benutzer zu unserer speziellen Restaurantseite leitet, wenn auf ein Restaurantbild geklickt wird.

Wir replizieren den gleichen Navigations-Workflow, den wir aus unserer Homepage-Wiederholungsgruppe erstellt haben.

Bubble no Code yelp clone Tutorial template

Hinzufügen von Bewertungen zu einem Restaurant

Sobald ein Benutzer ein neues Lieblingsrestaurant gefunden hat (dank Ihrer No-Code-App), möchte er möglicherweise eine Bewertung abgeben und seine Erfahrungen mit der Community teilen.

Auf unserer Restaurantseite fügen wir unterhalb der Restaurantinformationen eine zusätzliche Wiederholungsgruppe hinzu. Diese sich wiederholende Gruppe wird verwendet, um eine Liste der aktuellen Bewertungen des Restaurants anzuzeigen.

Wenn Sie diese Wiederholungsgruppe konfigurieren, wird der Datentyp auf eine Bewertung festgelegt, und unsere Datenquelle zieht alle Bewertungen aus dem aktuellen Seitenrestaurant.

Bubble no code yelp clone tutorial template

Von hier aus erstellen wir einen neuen Workflow, wenn Sie auf die Schaltfläche Bewertung hinzufügen klicken.

Bubble no code yelp clone tutorial template

Dieser Workflow leitet einen Benutzer zu einer speziellen Seite weiter, auf der er eine neue Bewertung erstellen kann. Wenn Sie einen Benutzer auf diese Seite senden, möchten wir auch die Daten aus dem Restaurant der aktuellen Seiten weitergeben.

Bubble no Code yelp clone tutorial template

Auf unserer Bewertungsseite müssen wir den Seitentyp aktualisieren, um auch ein Restaurant zu sein, sodass wir die aktuellen Restaurantdaten abrufen können.

Bubble no code yelp clone tutorial template

Schließlich müssen wir einen weiteren Workflow erstellen, der ausgelöst wird, sobald auf die Schaltfläche Post Review geklickt wird.

Bubble no code yelp clone tutorial template

Dieser Workflow wird verwendet, um eine neue Sache zu erstellen – eine neue Bewertung.

Bubble no code yelp clone tutorial template

Wie Sie es bereits getan haben, ordnen Sie die Onpage-Elemente den erforderlichen Datenfeldern zu, um eine gültige Bewertung zu erstellen.

Sobald eine neue Bewertung erstellt wurde, wird sie automatisch zur Wiederholungsgruppe auf der Seite Restaurants hinzugefügt.

Zusätzliche Funktionen

Nachdem Sie die Kernfunktionen für Ihr MVP erstellt haben, machen Sie sich mit dem Erstellen benutzerdefinierter Datenfelder und dem Anzeigen dynamischer Inhalte vertraut. Wenn Sie Ihrem Verzeichnis weiterhin zusätzliche Funktionen hinzufügen möchten, können Sie Folgendes in Betracht ziehen:

  • Hinzufügen einer Funktion, mit der Benutzer Fotos an eine Restaurantseite senden können
  • Erstellen von Benutzerprofilen – Anzeigen einer Liste der Benutzerkontodetails und der Bewertungen, die sie auf der Plattform erstellt haben

Die Einstellung eines Entwicklers oder Entwicklerteams zum Erstellen dieser App würde Tausende, wenn nicht Zehntausende von Dollar kosten. Mit unseren kostenpflichtigen Plänen können Sie die App für nur 25 US-Dollar pro Monat auf Ihrer eigenen benutzerdefinierten Domain hosten. Einige Vorlagen und Plugins können mehr kosten, aber Sie können alle Funktionen eines Verzeichnisses ohne zusätzliche Kosten erstellen.

Vorlagen

Wenn Sie Ihr Restaurant Review-Thema nicht von Grund auf neu erstellen möchten, können Sie eine der von unseren Community-Mitgliedern erstellten Vorlagen erwerben. Einige ähnliche Vorlagen enthalten:

  • Canvas Reviews Platform von AirDev
  • Location Based Reviews von Zeroqode
  • Verzeichnis & Listing von Zeroqode

Start Building

Bubble kann Ihnen helfen, eine Restaurant Review Site oder ein anderes Produkt zu erstellen, das Sie wählen! Es war noch nie einfacher, etwas Unglaubliches zu bauen, ohne programmieren zu müssen.

Um kostenlos loszulegen, melden Sie sich hier an.

In unserem Community-Forum können Sie sich auch mit anderen leidenschaftlichen Machern verbinden, die mit Bubble bauen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.