Articles

Hoe bouw je een Restaurant beoordelingssite zonder Code

als je op zoek bent naar het perfecte restaurant of bar, kunnen platforms als Yelp, Zagat of Zomato (Urbanspoon) je helpen kiezen uit duizenden eetopties.

als u geà nteresseerd bent in het bouwen van uw eigen versie van een restaurantrecensiesite, is Bubble echter het enige platform dat u nodig hebt.

no-code tools zoals Bubble zijn een revolutie in de manier waarop alledaagse makers software kunnen bouwen. Bubble ‘ s krachtige platform heeft het gemakkelijker dan ooit gemaakt om te beginnen met het bouwen van software zonder een enkele regel code te schrijven.

onze visuele programmeertool maakt het mogelijk om snel werkende software te ontwerpen en te bouwen die verder gaat dan statische ervaringen. Makers gebruiken Bubble om marktplaatsen, directory ‘ s en zelfs sociale netwerken op te bouwen.

dit bericht behandelt het stap-voor-stap proces van het bouwen van een no-code restaurant review site met behulp van Bubble. Of u nu op zoek bent naar het hele product te repliceren, of je bent gewoon geïnteresseerd in het gebruik van een aantal van de belangrijkste functies van het platform, deze gids zal delen hoe u de nodige workflows te bouwen om uw product up and running.

de stappen om een Yelp-stijl zonder code te bouwen zijn:

aan de slag

om te beginnen moet u uw gratis Bubble-account registreren.

Registreer uw account op Bubble

nieuw bij Bubble? Volg onze Crash Course introductievideo ‘ s om vertrouwd te raken met de basisprincipes van Bubble.

we raden ook aan om onze inleidende lessen af te ronden, die u door het stap-voor-stap proces van de meest voorkomende Bubble-functies zullen leiden. Dit zal u helpen om een lopende start bij het bouwen van uw no-code restaurant beoordeling app.

we raden u ook aan om te begrijpen hoe u gebruikersaccounts kunt maken en bewerken. We hebben dit eerder in meer detail behandeld in onze andere How To Build Gidsen.

wanneer u uw project kickstart, kunt u ervoor kiezen om te beginnen met het draadframen van uw productontwerp, of het bouwen van de benodigde velden in uw database.

in deze handleiding zullen we beginnen met het visual design tool van Bubble om de gebruikersinterface van ons product vorm te geven. Als u een versie van Yelp of Zomato repliceert, zijn enkele van de belangrijkste pagina ‘ s die u wilt opnemen:

  • upload page – a backend portal where you can upload new restaurants
  • Home page – display a list of restaurants and a search bar
  • zoekresultaten page – display a list of restaurants and categories once a user has searched a location
  • Individual restaurant page – a page showcase the full information for each restaurant
  • Review submission page – a page where users can submit a restaurant review
  • een belangrijke functie binnen bubble is de mogelijkheid om gegevens tussen pagina ‘ s te verzenden. Hiermee kunt u een algemene versie van een pagina maken en vervolgens dynamisch de relevante inhoud van uw database weergeven wanneer deze nodig is.

    in het geval van uw site hoeft u slechts één pagina aan te maken om uw individuele restaurants te presenteren. We kunnen dan de nodige workflows maken om alleen het relevante restaurant op elke pagina weer te geven wanneer het nodig is (we zullen dit binnenkort in meer detail behandelen).

    uw app configureren

    zodra u de weergave van uw product hebt toegewezen, kunt u zich concentreren op het creëren van de benodigde gegevensvelden om uw applicatie van stroom te voorzien. We vertrouwen op deze gegevenstypen, velden om de workflows achter uw product te verbinden.

    de vooraf gebouwde database van Bubble maakt het eenvoudig om verschillende gegevenstypen met unieke velden te maken. Bij het bouwen van een Yelp-achtige restaurant app als een MVP, moeten we de volgende gegevenstypen & velden aanmaken:

    gegevenstype: gebruiker

    velden:

    • naam
    • foto
    • ingediende beoordelingen-lijst met beoordelingen. Opmerking: Als u een veld als lijst maakt op basis van een afzonderlijk gegevenstype, kunt u alle relevante gegevensvelden naadloos integreren. Hierdoor hoeft u niet opnieuw alle gegevens velden
    Bubble geen code yelp-kloon tutorial sjabloon

    type: Restaurant

    Velden:

    • Naam
    • Beschrijving
    • Stad
    • Logo
    • link naar een Website
    • telefoonnummer
    • Voet categorieën – Lijst
    • Adres
    • Aanbevolen foto ‘ s – List
    • Beoordelingen – Lijst van reviews
    Bubble geen code yelp-kloon tutorial sjabloon

    Data type: Review

    Velden:

    • inhoud
    • Restaurant-Restaurant
    yelp clone tutorial template

    een restaurant toevoegen aan het platform

    Nu u uw database hebt geconfigureerd, kunnen we beginnen met het bouwen van de workflows die uw applicatie zullen voeden. De eerste functie die we zullen maken is niet iets dat gebruikers direct zal gaan met, maar is in plaats daarvan een back-end tool voor het toevoegen van nieuwe restaurants aan het platform.

    door een speciale portal te bouwen om advertenties naar uw database te uploaden, kunt u het proces van het toevoegen van nieuwe restaurants aan uw directory stroomlijnen.

    op uw uploadpagina kunt u een combinatie van invoervelden gebruiken om de vereiste gegevens voor elk nieuw restaurant in kaart te brengen. Zodra op de knop Aanmaken is geklikt, zal dit een workflow activeren die deze collectieve gegevens als een nieuw restaurant in uw database zal toevoegen.

    Bubble geen code yelp clone tutorial template

    bij het bouwen van uw workflow, moeten we een nieuw ding maken, het configureren van het gegevenstype naar een restaurant.

    Bubble no code yelp clone tutorial template

    u zult dan de relevante elementen op uw pagina vergelijken met de gegevensvelden Onder het restaurant type in uw database.

    Bubble geen code yelp clone tutorial template

    weergave van dynamische inhoud

    zodra u een catalogus van restaurants hebt geüpload, is het tijd om deze weer te geven op een openbare pagina die gebruikers kunnen openen.

    met het herhalende groepselement van Bubble kunt u een lijst met dynamische gegevens uit uw database weergeven, zoals uw bestaande restaurants.

    opmerking: herhalende groepen zijn standaard gestructureerd als een verticaal formaat, maar het is ook mogelijk om het element opnieuw te configureren om horizontaal weer te geven.

    voordat u inhoud begint toe te voegen aan uw herhalende groep, moet u het element koppelen aan een gegevenstype in uw database. Dit zal helpen bij het identificeren van de specifieke inhoud die het zal weergeven.

    het type inhoud dat we moeten weergeven, is natuurlijk de restaurants in uw database.

    vervolgens moeten we een gegevensbron identificeren zodat de Bubble-editor weet welke specifieke restaurants moeten worden weergegeven. Voor onze MVP tonen we alleen een lijst van alle huidige restaurants, maar u kunt eenvoudig beperkingen toevoegen aan deze gegevensbron om restaurants te filteren op hun stad of voedselcategorieën.

    Bubble no code yelp clone tutorial template

    zodra u de herhalende groep correct hebt geconfigureerd, moet u beginnen met het toevoegen van dynamische inhoud elementen die u wilt weergeven in elke cel. Binnen onze MVP, dit zal een restaurant titel en aanbevolen foto.

    omdat een restaurant meerdere Uitgelichte foto ‘s kan hebben, configureren we de dynamische inhoud om een van deze foto’ s willekeurig weer te geven.

    Bubble no code yelp clone tutorial template

    gegevens verzenden naar dynamische pagina ‘ s

    terwijl onze homepage alleen een voorbeeldkaart toont voor elk restaurant, moeten gebruikers doorklikken naar een speciale showcase pagina voor elk restaurant om de volledige inhoud en beoordelingen te bekijken. Deze aanvullende informatie wordt gehost op de restaurantpagina van uw aanvraag.

    vanuit onze herhalingsgroep is het mogelijk om gebeurtenissen te creëren op basis van acties die binnen elke afzonderlijke rij worden ondernomen. Deze functie wordt handig bij het bouwen van navigatiefuncties op uw platform.

    om een gebruiker van de homepage naar een specifieke showcase-pagina van een restaurant te leiden, moet u een navigatieworkflow maken die wordt geactiveerd wanneer op een afbeelding met restaurants wordt geklikt.

    Bubble no code yelp clone tutorial template

    vervolgens moet u extra gegevens naar deze pagina sturen, zodat de Bubble-editor kan bepalen welk specifiek restaurant U wilt weergeven. De gegevens die u wilt weergeven, worden uit het restaurant van de huidige cel gehaald.

    Bubble no code yelp clone tutorial template

    dynamische inhoud weergeven op de voorbeeldpagina

    zodra gegevens naar de restaurantpagina zijn verzonden, kunt u gemakkelijk de relevante informatie opvragen en deze inhoud voor elk restaurant weergeven.

    u moet er eerst voor zorgen dat het doelpagina-type overeenkomt met de eigenschap gegevens die u binnen de workflow verzendt. In dit geval zal de restaurant pagina worden geconfigureerd om een restaurant eigendom.

    Bubble geen code yelp clone tutorial template

    door het type inhoud op een pagina te classificeren, kan Bubble gemakkelijk relevante gegevens uit bestaande bronnen ophalen en verzenden.

    u kunt nu beginnen met het toevoegen van dynamische inhoud aan de velden die informatie weergeven van het restaurant van de huidige pagina.

    Bubble no code yelp clone tutorial template

    zoeken naar inhoud

    een stap terug naar onze homepage, moeten we ook een functie bouwen die gebruikers in staat stelt om te zoeken naar restaurants op basis van een stad. Dit kan worden bereikt door een extra tekstinvoerelement toe te voegen dat we zullen behandelen als een zoekbalk.

    Bubble no code yelp clone tutorial template

    vanaf hier maken we een nieuwe workflow die de zoekterm van een gebruiker classificeert en deze gegevens vervolgens doorstuurt naar een aparte pagina gewijd aan deze zoekopdracht (meer op deze pagina binnenkort).

    om deze workflow aan te zetten, maken we een gebeurtenis trigger die herkent wanneer een ingangswaarde wordt gewijzigd. Het element zal natuurlijk het tekstinvoerveld zijn.

    Bubble no code yelp clone tutorial template

    wanneer u de gebruiker naar onze pagina met zoekresultaten stuurt, moeten we een unieke zoekopdracht toevoegen aan onze URL-string, zodat de volgende pagina deze gegevens kan ophalen.

    in plaats van ervoor te kiezen om een gebruiker naar een specifieke pagina in deze workflow te sturen, kiezen we ervoor om een externe website te openen. Dit stelt ons in staat om het URL-pad tussen pagina ‘ s aan te passen.

    de URL waarnaar we de gebruiker zullen sturen is de home URL van de huidige website + de URL van onze pagina met zoekresultaten + De dynamische query-waarde uit ons tekstinvoerveld.

    Bubble no code yelp clone tutorial template

    volgende, zullen we eindigen met het bouwen van onze speciale zoekresultaten pagina binnen onze applicatie. Bij het bouwen van deze pagina moeten we het paginatype configureren voor een restaurant, omdat we een lijst met bijpassende restaurants willen weergeven.

    Bubble no code yelp clone tutorial template

    bij het ontwerpen van deze pagina zullen we eerst een herhalend groepselement toevoegen om een lijst van restaurants weer te geven. In tegenstelling tot onze eerste herhalende Groep, moeten we de gegevensbron van deze herhalende groep bijwerken om de zoekopdracht van onze URL-string te matchen.

    begin met het configureren van het type inhoud als een restaurant. Vervolgens, update de gegevensbron om alleen de restaurants die onze URL strings tekst in hun stad veld bevatten weer te geven.

    Bubble no code yelp clone tutorial template

    dit toont nu alleen de restaurants die overeenkomen met de stad van de zoekopdracht van gebruikers.

    volgende op deze pagina willen we de markering op onze kaart bijwerken wanneer op een restauranttitel wordt geklikt, zodat gebruikers het adres visueel kunnen zien.

    om deze functie te bouwen, gebruikt u Bubble workflow bewerken om een aangepaste gebeurtenis te maken die herkent wanneer op een restauranttitel wordt geklikt.

    Bubble no code yelp clone tutorial template

    hier kiezen we de actie om markeringen weer te geven.

    Bubble no code yelp clone tutorial template

    nu zullen we selecteren om de markering voor onze op-pagina kaart weer te geven, waarbij de gegevensbron wordt geconfigureerd als het huidige adres van cells restaurants.

    Bubble no code yelp clone tutorial template

    de laatste belangrijke functie die we moeten toevoegen aan onze zoekresultaten pagina is een categorie dropdown, zodat gebruikers kunnen filteren door restaurants op de categorieën van voedingsmiddelen die ze serveren.

    Bubble no code yelp clone tutorial template

    zodra u de opties voor het dropdown menu hebt geconfigureerd, moeten we een voorwaarde toevoegen aan onze herhalende groep, zodat deze kan reageren op de dropdowns selectie.

    de logica voor deze voorwaarde zal bepalen wanneer de dropdowns waarde niet leeg is. Wanneer dit gebeurt, zal het dan de gegevensbron van de herhalende groep bijwerken.

    de nieuwe gegevensbron zal opnieuw een zoekopdracht naar restaurants bevatten, waarbij dezelfde voorwaarde wordt toegevoegd voor de URL-string voor steden. We zullen ook een andere beperking toevoegen, zodat de voedselcategorieën van het restaurant ook dezelfde waarde bevatten als de keuzemenu ‘ s.

    Bubble no code yelp clone tutorial template

    wanneer een voedselcategorie is geselecteerd, zal deze herhalende groep automatisch worden bijgewerkt met de meest relevante resultaten.

    de laatste functie die we aan deze pagina moeten toevoegen, is een andere navigatiegebeurtenis die een gebruiker naar onze speciale restaurantpagina leidt wanneer op een restaurantafbeelding wordt geklikt.

    we zullen dezelfde navigatie workflow repliceren die we hebben gemaakt vanuit onze homepage herhalingsgroep.

    Bubble no code yelp clone tutorial template

    reviews toevoegen aan een restaurant

    zodra een gebruiker een nieuw favoriete restaurant heeft gevonden (dankzij uw no-code app), kunnen ze een review willen bijdragen en hun ervaringen met de gemeenschap delen.

    op onze restaurantpagina voegen we een extra herhalingsgroep toe onder de informatie van het restaurant. Deze herhalende groep zal worden gebruikt om een lijst van de restaurants huidige beoordelingen weer te geven.

    bij het configureren van deze herhalende groep, zal het gegevenstype worden ingesteld op een beoordeling, en onze gegevensbron zal alle beoordelingen van de huidige pagina ‘ s restaurant halen.

    Bubble no code yelp clone tutorial template

    vanaf hier maken we een nieuwe workflow wanneer op de knop review toevoegen wordt geklikt.

    Bubble no code yelp clone tutorial template

    deze workflow zal een gebruiker omleiden naar een speciale pagina waar ze een nieuwe review kunnen maken. Wanneer u een gebruiker naar deze pagina stuurt, zullen we ook de gegevens van de huidige pagina ‘ s restaurant willen doorgeven.

    Bubble no code yelp clone tutorial template

    op onze submit review pagina moeten we het paginatype bijwerken om ook een restaurant te zijn, zodat we de huidige Restaurantgegevens kunnen opvragen.

    Bubble No code yelp clone tutorial template

    ten slotte moeten we een andere workflow maken die wordt geactiveerd zodra de knop post review wordt geklikt.

    Bubble no code yelp clone tutorial template

    deze workflow zal gebruikt worden om een nieuw ding te maken – een nieuwe review.

    Bubble no code yelp clone tutorial template

    zoals u eerder hebt gedaan, zult u de elementen op de pagina matchen met de benodigde gegevensvelden om een geldige beoordeling te maken.

    zodra een nieuwe beoordeling is gemaakt, wordt deze automatisch toegevoegd aan de herhalingsgroep op de pagina restaurants.

    extra functies

    na het bouwen van de kernfuncties voor uw MVP, zult u vertrouwd raken met het proces van het maken van aangepaste gegevensvelden en het weergeven van dynamische inhoud. Als u wilt doorgaan met het toevoegen van extra functies aan uw directory, kunt u overwegen:

    • een functie toevoegen voor gebruikers om foto ‘ s naar een restaurantpagina te sturen
    • gebruikersprofielen aanmaken – een lijst weergeven van de gebruikersaccountgegevens en de beoordelingen die ze op het platform hebben gemaakt

    start

    het inhuren van een ontwikkelaar of dev-team om deze app te bouwen zou duizenden, zo niet tienduizenden dollars kosten. Als u start en groeien in Gebruikers, onze betaalde plannen kunt u de app hosten op uw eigen aangepaste domein voor zo weinig als $ 25 per maand. Sommige sjablonen en plugins kunnen meer kosten, maar u kunt alle functionaliteit van een directory te bouwen zonder extra kosten.

    sjablonen

    Als u uw restaurantrecensiethema niet helemaal opnieuw wilt opbouwen, kunt u een van de sjablonen kopen die door onze leden van de community zijn gemaakt. Enkele soortgelijke sjablonen omvatten:

    • Canvas Reviews Platform by AirDev
    • Location Based Reviews by Zeroqode
    • Directory & Listing by Zeroqode

    start Building

    Bubble kan u helpen bij het bouwen van een restaurant review site of een ander product dat u kiest! Het is nog nooit zo makkelijk geweest om iets ongelooflijks te bouwen zonder te hoeven programmeren.

    meld u hier aan om gratis te beginnen.

    u kunt ook contact opnemen met andere gepassioneerde makers die bouwen met Bubble op ons community forum.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.