Articles

hur man bygger en Restaurangrecensionssida utan kod

om du letar efter den perfekta restaurangen eller baren kan plattformar som Yelp, Zagat eller Zomato (Urbanspoon) hjälpa dig att välja mellan tusentals matalternativ.

om du var intresserad av att bygga din egen version av en restaurang översyn webbplats, dock, Bubble är den enda plattform du behöver.

inga kodverktyg som Bubble revolutionerar hur vardagliga tillverkare kan bygga programvara. Bubbles kraftfulla plattform har gjort det enklare än någonsin att börja bygga programvara utan att behöva skriva en enda kodrad.

vårt visuella programmeringsverktyg gör det möjligt att snabbt designa och bygga arbetsprogramvara som går utöver statiska upplevelser. Beslutsfattare använder Bubble för att bygga marknadsplatser, kataloger och till och med sociala nätverk.

detta inlägg kommer att täcka steg-för-steg-processen för att bygga en no-code restaurang översyn webbplats med Bubble. Oavsett om du vill replikera hela produkten, eller om du bara är intresserad av att använda några av plattformens kärnfunktioner, kommer den här guiden att dela hur du bygger de nödvändiga arbetsflödena för att få din produkt igång.

stegen för att bygga en Yelp-stil utan kod inkluderar:

Kom igång

för att komma igång måste du registrera ditt gratis Bubble-konto.

registrera ditt konto på Bubble

ny till Bubble? Följ med på våra introduktionsvideor för snabbkurs för att bekanta dig med grunderna i Bubble.

vi rekommenderar också att du slutför våra introduktionslektioner, som guidar dig genom steg-för-steg-processen med de vanligaste Bubbelfunktionerna. Detta kommer att hjälpa dig att få en löpande start när du bygger din no-code restaurang översyn app.

vi rekommenderar också att du förstår hur du skapar och redigerar användarkonton. Vi har tidigare täckt detta mer detaljerat i våra andra hur man bygger guider.

när du startar ditt projekt kan du välja att börja med wireframing din produktdesign eller bygga de nödvändiga fälten i din databas.

i den här guiden börjar vi med att använda Bubbles visuella designverktyg för att forma användargränssnittet för vår produkt. Om du replikerar en version av Yelp eller Zomato är några av de kärnsidor du vill inkludera:

  • Ladda upp sida – en backend – portal där du kan ladda upp nya restauranger
  • hemsida – visar en lista över restauranger och en sökfält
  • sökresultatsida – visar en lista över restauranger och kategorier när en användare har sökt en plats
  • individuell restaurangsida – en sida som visar fullständig information för varje restaurang
  • granska inlämningssidan-en sida där användarna kan skicka en restaurang recension

en viktig funktion inom bubble är möjligheten att skicka data mellan sidor. Detta gör att du kan skapa en generisk version av en sida och sedan dynamiskt visa relevant innehåll från din databas när det behövs.

när det gäller din webbplats behöver du bara skapa en sida för att visa upp dina enskilda restauranger. Vi kan sedan skapa nödvändiga arbetsflöden för att bara visa relevant restaurang på varje sida när det behövs (vi kommer att täcka detta mer detaljerat snart).

konfigurera din app

när du har kartlagt visningen av din produkt kan du fokusera på att skapa nödvändiga datafält för att driva din applikation. Vi förlitar oss på dessa datatyper, fält för att ansluta arbetsflödena bakom din produkt.

Bubbles förbyggda databas gör det enkelt att skapa olika datatyper med unika fält. När vi bygger en Yelp-liknande restaurangapp som en MVP måste vi skapa följande datatyper & fält:

datatyp: användare

fält:

  • namn
  • foto
  • inlämnade recensioner – lista över recensioner. Obs!: Om du skapar ett fält som en lista baserad på en separat datatyp kan du sömlöst integrera alla relevanta datafält. Detta sparar dig från att behöva återskapa alla ytterligare datafält
bubbla ingen kod yelp klon handledning Mall

datatyp: Restaurang

fält:

  • namn
  • beskrivning
  • Stad
  • Logo
  • webbplatslänk
  • telefonnummer
  • fotkategorier – lista
  • adress
  • utvalda bilder – lista
  • recensioner – lista över recensioner
bubbla ingen kod yelp klon handledning Mall

datatyp: recension

fält:

  • innehåll
  • Restaurang-Restaurang
bubbla ingen kod yelp clone tutorial Mall

lägga till en restaurang till plattformen

nu när du har konfigurerat din databas, kan vi börja bygga arbetsflöden som kommer att driva din ansökan. Den första funktionen vi skapar är inte något som användarna direkt kommer att engagera sig med, men är istället ett back-end-verktyg för att lägga till nya restauranger på plattformen.

genom att bygga en dedikerad portal för att ladda upp listor till din databas kan du effektivisera processen att lägga till nya restauranger i din katalog.

på uppladdningssidan kan du använda en kombination av inmatningsfält för att kartlägga nödvändiga data för varje ny restaurang. När du har klickat på knappen Skapa kommer detta att utlösa ett arbetsflöde som lägger till denna kollektiva data som en ny restaurang i din databas.

bubbla ingen kod yelp clone tutorial Mall

när du bygger ditt arbetsflöde, måste vi skapa en ny sak, konfigurera datatypen till en restaurang.

 bubbla ingen kod yelp clone tutorial Mall

du matchar sedan de relevanta elementen på din sida till datafälten under restaurangtypen i din databas.

 Bubble no code yelp clone tutorial template

visar dynamiskt innehåll

när du har laddat upp en katalog med restauranger är det dags att börja visa dessa på en offentlig sida som användare kan komma åt.

med Bubbles upprepande gruppelement kan du visa en lista med dynamiska data från din databas – till exempel dina befintliga restauranger.

Obs: upprepande grupper är strukturerade som ett vertikalt format som standard, men det är också möjligt att konfigurera om elementet så att det visas horisontellt.

innan du börjar lägga till innehåll i den upprepande gruppen måste du länka elementet till en datatyp i databasen. Detta hjälper det att identifiera det specifika innehållet som det kommer att visa.

den typ av innehåll vi behöver visa är naturligtvis restaurangerna i din databas.

Därefter måste vi identifiera en datakälla så att Bubble editor vet vilka specifika restauranger som ska visas. För vår MVP visar vi bara en lista över alla aktuella restauranger, men du kan enkelt lägga till begränsningar för denna datakälla för att filtrera restauranger efter deras stad eller matkategorier.

 Bubble no code yelp clone tutorial template

när du har konfigurerat den upprepande gruppen korrekt måste du börja lägga till några dynamiska innehållselement som du vill visa i varje cell. Inom vår MVP kommer detta att innehålla en restaurangs titel och ett foto.

eftersom en restaurang kan ha flera utvalda foton konfigurerar vi det dynamiska innehållet för att visa en av dessa foton slumpmässigt.

 Bubble no code yelp clone tutorial template

skicka data till dynamiska sidor

med vår hemsida som bara visar ett förhandsgranskningskort för varje restaurang måste användarna klicka igenom till en dedikerad showcase-sida för varje restaurang för att se hela innehållet och recensionerna. Denna ytterligare information kommer att finnas på restaurangsidan i din ansökan.

från vår upprepande grupp är det möjligt att skapa händelser baserat på åtgärder som vidtas inom varje enskild rad. Den här funktionen kommer att bli användbar när du bygger navigeringsfunktioner över din plattform.

om du vill dirigera en användare från hemsidan till en specifik restaurangutställningssida måste du bygga ett navigeringsarbetsflöde som utlöses när en restaurangens utvalda bild klickas.

 Bubble No code yelp clone tutorial template

du måste sedan skicka ytterligare data till den här sidan, så att Bubble editor kan identifiera vilken specifik restaurang som ska visas. De data du väljer att visa kommer att dras från den aktuella cellens restaurang.

bubbla ingen kod yelp clone tutorial Mall

Visa dynamiskt innehåll på förhandsgranskningssidan

när data har skickats till restaurangsidan kan du enkelt dra relevant information och visa detta innehåll för varje restaurang.

du måste först se till att målsidtypen matchar den dataegenskap som du skickar i arbetsflödet. I det här fallet kommer restaurangsidan att konfigureras till en restaurangfastighet.

Bubble No code yelp clone tutorial Mall

genom att klassificera typen av innehåll på en sida kan Bubble enkelt dra och skicka relevanta data från befintliga källor.

du kan nu börja lägga till dynamiskt innehåll i fälten som visar information från den aktuella sidans restaurang.

 bubbla ingen kod yelp clone tutorial Mall

söker efter innehåll

ta ett steg tillbaka till vår hemsida, vi måste också bygga en funktion som tillåter användare att söka efter restauranger baserat på en stad. Detta kan uppnås genom att lägga till ett extra textinmatningselement som vi behandlar som ett sökfält.

 Bubble no code yelp clone tutorial template

härifrån skapar vi ett nytt arbetsflöde som klassificerar en användares sökord och skickar sedan dessa data till en separat sida dedikerad till denna sökfråga (mer på den här sidan snart).

för att driva detta arbetsflöde skapar vi en händelseutlösare som känner igen när ett ingångsvärde ändras. Elementet kommer givetvis att vara textinmatningsfältet.

 bubbla ingen kod yelp clone tutorial Mall

när du skickar användaren till vår sökresultatsida måste vi lägga till en unik sökfråga till vår URL-sträng, så att följande sida kan hämta dessa data.

istället för att välja att skicka en användare till en viss sida i det här arbetsflödet väljer vi att öppna en extern webbplats. Detta gör att vi kan anpassa URL-sökvägen mellan sidor.

webbadressen vi skickar användaren till kommer att vara den aktuella webbplatsens hemadress + webbadressen till vår sökresultatsida + det dynamiska frågevärdet från vårt textinmatningsfält.

 bubbla ingen kod yelp clone tutorial Mall

därefter kommer vi att bygga vår dedikerade sökresultatsida i vår ansökan. När vi bygger den här sidan måste vi konfigurera sidtypen till en restaurang eftersom vi vill visa en lista över matchande restauranger.

 Bubble no code yelp clone tutorial template

när du utformar den här sidan kommer vi först att inkludera ett upprepande gruppelement för att visa en lista över restauranger. Till skillnad från vår första upprepande grupp måste vi uppdatera datakällan för den här upprepande gruppen för att matcha sökfrågan från vår URL-sträng.

börja med att konfigurera innehållstypen som en restaurang. Uppdatera sedan datakällan för att bara visa de restauranger som innehåller vår URL-strängtext i deras stadsfält.

 bubbla ingen kod yelp clone tutorial Mall

detta kommer nu att visa endast de restauranger som matchar staden från användarnas sökfråga.

nästa på den här sidan vill vi uppdatera markören på vår karta när en restaurangtitel klickas, så att användarna visuellt kan se adressen.

för att bygga den här funktionen, Använd Bubble workflow edit för att skapa en anpassad händelse som känner igen när en restaurangtitel klickas.

 bubbla ingen kod yelp clone tutorial Mall

härifrån väljer vi åtgärden för att visa markörer.

 bubbla ingen kod yelp clone tutorial Mall

nu väljer vi att visa markören för vår karta på sidan och konfigurerar dess datakälla som nuvarande celler restauranger adress.

Bubble no code yelp clone tutorial template

den sista nyckelfunktionen vi måste lägga till på vår sökresultatsida är en kategori rullgardinsmeny, så att användare kan filtrera genom Restauranger efter de kategorier av livsmedel de serverar.

 bubbla ingen kod yelp clone tutorial Mall

när du har konfigurerat alternativen för rullgardinsmenyn måste vi lägga till ett villkor för vår upprepande grupp, så att den kan svara på rullgardinsmenyn.

logiken för detta villkor identifierar när dropdowns-värdet inte är tomt. När detta inträffar kommer det att uppdatera datakällan för den upprepande gruppen.

den nya datakällan kommer återigen att innehålla en sökning efter restauranger och lägga till samma villkor för cities URL-strängen. Vi lägger också till en annan begränsning, så att restaurangens matkategorier också innehåller samma värde som rullgardinsmenyerna.

Bubble No code yelp clone tutorial Mall

nu när en livsmedelskategori väljs uppdateras denna upprepande grupp automatiskt med de mest relevanta resultaten.

den sista funktionen vi behöver lägga till på den här sidan är en annan navigationshändelse som leder en användare till vår dedikerade restaurangsida när en restaurangbild klickas.

vi replikerar samma navigeringsarbetsflöde som vi skapade från vår hemsida upprepande grupp.

Bubble no code yelp clone tutorial template

lägga till recensioner till en restaurang

när en användare har hittat en ny favoritrestaurang (tack vare din No-code-app) kanske de vill bidra med en recension och dela sina erfarenheter med samhället.

på vår restaurangsida lägger vi till ytterligare en upprepande grupp under restaurangens information. Denna upprepande grupp kommer att användas för att visa en lista över restauranger aktuella recensioner.

när du konfigurerar den här upprepande gruppen kommer datatypen att ställas in på en recension, och vår datakälla kommer att dra alla recensioner från den aktuella sidans restaurang.

bubbla ingen kod yelp clone tutorial Mall

härifrån skapar vi ett nytt arbetsflöde när knappen Lägg till recension klickas.

 Bubble no code yelp clone tutorial Mall

detta arbetsflöde omdirigerar en användare till en dedikerad sida där de kan skapa en ny recension. När du skickar en användare till den här sidan vill vi också vidarebefordra data från den aktuella sidans restaurang.

 bubbla ingen kod yelp clone tutorial Mall

på vår skicka recension sida, måste vi uppdatera sidtypen att också vara en restaurang, så att vi kan dra de aktuella restauranger data.

 bubbla ingen kod yelp clone tutorial Mall

Slutligen måste vi sedan skapa ett annat arbetsflöde som utlöser när knappen post review klickas.

 bubbla ingen kod yelp clone tutorial Mall

detta arbetsflöde kommer att användas för att skapa en ny sak – en ny recension.

 bubbla ingen kod yelp clone tutorial Mall

som du har gjort tidigare matchar du elementen på sidan med nödvändiga datafält för att skapa en giltig recension.

när en ny recension har skapats läggs den automatiskt till i den upprepande gruppen tillbaka på sidan restauranger.

ytterligare funktioner

när du har byggt kärnfunktionerna för din MVP blir du bekant med processen att skapa anpassade datafält och visa dynamiskt innehåll. Om du vill fortsätta lägga till ytterligare funktioner i din katalog kan du överväga:

  • lägga till en funktion för användare att skicka bilder till en restaurang sida
  • skapa användarprofiler – visar en lista över användarnas kontouppgifter och recensioner de är skapade över plattformen

starta

anställa en utvecklare eller dev team för att bygga denna app skulle kosta tusentals, om inte tiotusentals dollar. När du startar och växer i användare tillåter våra betalda planer dig att vara värd för appen på din egen anpassade domän för så lite som $25 per månad. Vissa mallar och plugins kan kosta mer, men du kan bygga all funktionalitet i en katalog utan några extra kostnader.

mallar

om du inte vill bygga ditt restaurangrecensionstema från grunden kan du köpa en av mallarna som gjorts av våra medlemmar i samhället. Några liknande mallar inkluderar:

  • Canvas recensioner plattform av AirDev
  • platsbaserade recensioner av Zeroqode
  • katalog & notering av Zeroqode

börja bygga

Bubble kan hjälpa dig att bygga en restaurang översyn webbplats eller någon annan produkt du väljer! Det har aldrig varit lättare att bygga något otroligt utan att behöva koda.

för att komma igång gratis, Registrera dig här.

du kan också ansluta till andra passionerade tillverkare som bygger med Bubble på vårt communityforum.

Lämna ett svar

Din e-postadress kommer inte publiceras.