Articles

Slik Bygger Du Et Nettsted For Restaurantanmeldelse Uten Kode

hvis du ønsker å finne den perfekte restauranten eller baren, kan plattformer som Yelp, Zagat eller Zomato (Urbanspoon) hjelpe deg med å velge mellom tusenvis av matalternativer.

Hvis Du var interessert i å bygge din egen versjon av en restaurant gjennomgang nettsted, Men Bubble er Den eneste plattformen du trenger.

verktøy Uten kode som Bubble revolusjonerer hvordan hverdagsprodusenter kan bygge programvare. Bubbles kraftige plattform har gjort det enklere enn noensinne å begynne å bygge programvare uten å måtte skrive en eneste linje med kode.

vårt visuelle programmeringsverktøy gjør det mulig å raskt designe og bygge fungerende programvare som går utover statiske opplevelser. Beslutningstakere bruker Bubble til å bygge markedsplasser, kataloger og til og med sosiale nettverk.

dette innlegget vil dekke den trinnvise prosessen med å bygge en no-code restaurant gjennomgang nettsted ved Hjelp Av Bubble. Enten du ønsker å gjenskape hele produktet, eller du bare er interessert i å utnytte noen av kjernefunksjonene i plattformen, vil denne veiledningen dele hvordan du bygger de nødvendige arbeidsflytene for å få produktet i gang.

trinnene for å bygge En Yelp-stil uten kode inkluderer:

Kom I Gang

for å komme i gang må du registrere Din Gratis Bubble-konto.

Registrer din konto På Bubble

Ny På Bubble? Følg med på Våre Lynkurs introduksjonsvideoer for å bli kjent med Grunnleggende Om Bubble.

vi anbefaler også å fullføre våre innledende leksjoner, som vil veilede deg gjennom den trinnvise prosessen med de vanligste Boblefunksjonene. Dette vil hjelpe deg å få en løpende start når du bygger din no-code restaurant gjennomgang app.

vi anbefaler også å forstå hvordan du oppretter og redigerer brukerkontoer. Vi har tidligere dekket dette mer detaljert i våre Andre Hvordan Bygge Guider.

når du kickstarter prosjektet ditt, kan du velge å begynne med wireframing produktdesign, eller bygge de nødvendige feltene i databasen.

i denne veiledningen starter Vi med Å bruke Bubbles visuelle designverktøy for å forme brukergrensesnittet til produktet vårt. Hvis du replikerer en versjon Av Yelp eller Zomato, vil noen av kjernesidene du vil inkludere, være:

  • Last opp side – en backend portal hvor du kan laste opp nye restauranter
  • Hjemmeside – viser en liste over restauranter og en søkelinje
  • søkeresultatside – viser en liste over restauranter og kategorier når en bruker har søkt på et sted
  • Individuell restaurantside – en side som viser full informasjon for hver restaurant
  • – en side der brukere kan sende inn en restaurantanmeldelse

en viktig funksjon i bubble er muligheten til å sende data mellom sider. Dette gjør at du kan opprette en generisk versjon av en side, og deretter dynamisk vise relevant innhold fra databasen når det er nødvendig.

når det gjelder nettstedet ditt, trenger du bare å opprette en side for å vise frem dine individuelle restauranter. Vi kan da opprette de nødvendige arbeidsflytene for å vise bare den aktuelle restauranten på hver side når det trengs(vi vil dekke dette mer detaljert snart).

Konfigurere appen

når du har kartlagt visningen av produktet, kan du fokusere på å opprette de nødvendige datafeltene for å drive programmet. Vi stoler på disse datatypene, feltene for å koble arbeidsflyten bak produktet ditt.

Bubble pre-bygget database gjør det enkelt å lage forskjellige datatyper med unike felt. Når vi bygger En Yelp – lignende restaurantapp som EN MVP, må vi opprette følgende datatyper & felt:

datatype: Bruker

Felt:

  • Navn
  • Bilde
  • Innsendte anmeldelser – liste over anmeldelser. Obs!: Hvis Du Oppretter et felt som en liste basert på en egen datatype, kan du sømløst integrere alle relevante datafelt. Dette sparer deg fra å måtte gjenskape alle de ekstra datafeltene
Boble ingen kode yelp klone tutorial mal

Datatype: Restaurant

Felt:

  • Navn
  • Beskrivelse
  • By
  • Logo
  • Lenke Til Nettsted
  • Telefonnummer
  • Fotkategorier – Liste
  • Adresse
  • Utvalgte bilder – Liste
  • Anmeldelser – Liste Over Anmeldelser
Boble ingen kode yelp klone tutorial mal

datatype: Gjennomgang

Felt:

  • Innhold
  • Restaurant-Restaurant
Bubble no code yelp clone tutorial template

Legge til en restaurant på plattformen

Nå som du har konfigurert databasen, kan vi begynne å bygge arbeidsflyter som vil drive søknaden din. Den første funksjonen vi lager er ikke noe som brukerne vil engasjere seg direkte med, men er i stedet et back-end verktøy for å legge til nye restauranter til plattformen.

ved å bygge en dedikert portal for å laste opp oppføringer til databasen din, kan du effektivisere prosessen med å legge til nye restauranter i katalogen din.

på opplastingssiden kan du bruke en kombinasjon av inndatafelt til å kartlegge de nødvendige dataene for hver nye restaurant. Når opprett-knappen er klikket, vil dette utløse en arbeidsflyt som vil legge til disse kollektive dataene som en ny restaurant i databasen.

 Bubble no code yelp clone tutorial template

når du bygger arbeidsflyten din, må vi opprette en ny ting, konfigurere datatypen til en restaurant.

 tutorial Template For Bubble no code yelp clone

du vil deretter matche de relevante elementene på siden din med datafeltene under restauranttypen i databasen.

 bubble no code yelp clone tutorial template

Viser dynamisk innhold

Når du har lastet opp en katalog over restauranter, er det på tide å begynne å vise disse på en offentlig side som brukerne kan få tilgang til.

Ved hjelp Av Bubbles gjentatte gruppeelement kan Du vise en liste over dynamiske data fra databasen, for eksempel eksisterende restauranter.

Merk: Gjentatte grupper er strukturert som et vertikalt format som standard, men det er også mulig å omkonfigurere elementet slik at det vises horisontalt.

Før du begynner å legge til innhold i den gjentatte gruppen, må du koble elementet til en datatype i databasen. Dette vil hjelpe det med å identifisere det spesifikke innholdet det vil vise.

typen innhold vi må vise, er selvfølgelig restaurantene i databasen din.

deretter må vi identifisere en datakilde slik At Bobleredigereren vet hvilke spesifikke restauranter som skal vises. FOR VÅR MVP viser vi bare en liste over alle gjeldende restauranter, men du kan enkelt legge til begrensninger for denne datakilden for å filtrere restauranter etter by eller matkategorier.

 bubble no code yelp clone tutorial template

Når du har konfigurert den gjentatte gruppen riktig, må du begynne å legge til dynamiske innholdselementer du vil vise i hver celle. Innenfor VÅR MVP, dette vil inkludere en restaurant tittel og kjennetegnet bilde.

som en restaurant kan ha flere utvalgte bilder, konfigurerer vi det dynamiske innholdet for å vise et av disse bildene tilfeldig.

 bubble no code yelp clone tutorial template

Sende data til dynamiske sider

med vår hjemmeside som bare viser et forhåndsvisningskort for hver restaurant, må brukerne klikke seg gjennom til en dedikert showcase-side for hver restaurant for å se hele innholdet og vurderingene. Denne tilleggsinformasjonen vil bli vert på restaurantsiden av søknaden din.

fra vår repeterende gruppe er det mulig å opprette hendelser basert på handlinger som utføres i hver enkelt rad. Denne funksjonen vil bli nyttig når du bygger navigasjonsfunksjoner på tvers av plattformen din.

for å lede en bruker fra hjemmesiden til en bestemt restaurant showcase-side, må du bygge en navigasjonsarbeidsflyt som utløses når et utvalgt bilde av restauranter klikkes.

 bubble no code yelp clone tutorial template

Du må da sende ytterligere data til denne siden, slik At Bubble editor kan identifisere hvilken bestemt restaurant som skal vises. Dataene du velger å vise, blir trukket fra den nåværende cellens restaurant.

 bubble no code yelp clone tutorial template

Vis dynamisk innhold på forhåndsvisningssiden

når data er sendt til restaurantsiden, kan du enkelt hente relevant informasjon og vise dette innholdet for hver restaurant.

Du må først sørge for at målsidetypen samsvarer med dataegenskapen du sender i arbeidsflyten. I dette tilfellet vil restaurantsiden bli konfigurert til en restaurantegenskap.

Bubble no code yelp clone tutorial template

Ved å klassifisere typen innhold på en side, Kan Bubble enkelt trekke og sende relevante data fra eksisterende kilder.

Du kan nå begynne å legge til dynamisk innhold i feltene som viser informasjon fra den gjeldende sidens restaurant.

 bubble no code yelp clone tutorial template

Søke etter innhold

Ta et skritt tilbake til vår hjemmeside, vi må også bygge en funksjon som lar brukerne søke etter restauranter basert på en by. Dette kan oppnås ved å legge til et ekstra tekstinngangselement som vi behandler som et søkefelt.

 bubble no code yelp clone tutorial template

Herfra lager vi en ny arbeidsflyt som klassifiserer en brukers søkeord, og sender deretter disse dataene til en egen side dedikert til dette søket (mer på denne siden snart).

for å drive denne arbeidsflyten oppretter vi en hendelsesutløser som gjenkjenner når en inndataverdi endres. Elementet vil selvfølgelig være tekstfeltet.

 tutorial Template For Bubble no code yelp clone

når du sender brukeren til søkeresultatsiden vår, må vi legge til et unikt søk i URL-strengen vår, slik at følgende side kan hente disse dataene.

I Stedet for å velge å sende en bruker til en bestemt side i denne arbeidsflyten, velger vi å åpne et eksternt nettsted. Dette vil tillate oss å tilpasse URL-banen mellom sider.

NETTADRESSEN vi sender brukeren til, vil være den nåværende nettstedets HJEMADRESSE + NETTADRESSEN til søkeresultatsiden + den dynamiske spørringsverdien fra tekstfeltet vårt.

 Bubble no code yelp clone tutorial template

Neste, vil vi fullføre bygge vår dedikerte søkeresultatsiden i vår søknad. Når vi bygger denne siden, må vi konfigurere sidetypen til en restaurant, da vi vil vise en liste over matchende restauranter.

 tutorial Template For Bubble no code yelp clone

når du designer denne siden, vil vi først inkludere et gjentatt gruppeelement for å vise en liste over restauranter. I motsetning til vår første gjentatte gruppe, må vi oppdatere datakilden til denne gjentatte gruppen for å matche søket fra URL-strengen vår.

Start med å konfigurere innholdstypen til å være en restaurant. Deretter oppdaterer du datakilden for å vise bare restaurantene som inneholder URL-strengteksten i by-feltet.

 Bubble no code yelp clone tutorial template

Dette vil nå bare vise restaurantene som samsvarer med byen fra brukerens søk.

Neste på denne siden vil vi oppdatere markøren på kartet vårt når en restaurants-tittel klikkes, slik at brukerne visuelt kan se adressen.

hvis du vil bygge denne funksjonen, bruker Du Bubble workflow edit til å opprette en egendefinert hendelse som gjenkjenner når en restaurant-tittel klikkes.

 Bubble no code yelp clone tutorial template

Herfra velger vi handlingen for å vise markører.

 Bubble no code yelp clone tutorial template

Nå velger vi å vise markøren for vårt kart på siden, konfigurere datakilden som gjeldende celler restauranter adresse.

bubble no code yelp clone tutorial template

den siste nøkkelfunksjonen vi må legge til i søkeresultatsiden vår, er en rullegardinmeny for kategori, slik at brukerne kan filtrere gjennom restauranter etter kategoriene mat de serverer.

 bubble no code yelp clone tutorial template

Når du har konfigurert alternativene for rullegardinmenyen, må vi legge til en betingelse for vår gjentatte gruppe, slik at den kan svare på rullegardinvalgene.

logikken for denne betingelsen vil identifisere når rullegardinverdien ikke er tom. Når dette skjer, oppdateres datakilden for den gjentatte gruppen.

den nye datakilden vil igjen inkludere et søk etter restauranter, og legge til samme betingelse for cities URL-strengen. Vi legger også til en annen begrensning, slik at restaurantens matkategorier også inneholder samme verdi som rullegardinmenyene.

 bubble no code yelp clone tutorial template

nå når en matkategori er valgt, oppdateres denne repeterende gruppen automatisk med de mest relevante resultatene.

den siste funksjonen vi må legge til på denne siden, er en annen navigasjonshendelse som leder en bruker til vår dedikerte restaurantside når et restaurantbilde klikkes.

vi kopierer den samme navigasjonsarbeidsflyten vi opprettet fra vår repeterende gruppe på hjemmesiden vår.

tutorial template For bubble no code yelp clone

Legge til anmeldelser på en restaurant

når en bruker har funnet en ny favorittrestaurant (takket være appen din uten kode), kan det være at de ønsker å bidra med en anmeldelse og dele sine erfaringer med fellesskapet.

på vår restaurantside legger vi til en ekstra gjentatt gruppe under restaurantens informasjon. Denne gjentatte gruppen vil bli brukt til å vise en liste over restauranter nåværende vurderinger.

når du konfigurerer denne gjentatte gruppen, vil datatypen bli satt til en gjennomgang, og datakilden vår vil trekke alle anmeldelser fra gjeldende sider restaurant.

 bubble no code yelp clone tutorial template

Herfra oppretter vi en ny arbeidsflyt når legg til gjennomgang-knappen klikkes.

bubble no code yelp clone tutorial template

denne arbeidsflyten vil omdirigere en bruker til en dedikert side der de kan opprette en ny anmeldelse. Når du sender en bruker til denne siden, vil vi også sende data fra gjeldende sider restaurant.

 bubble no code yelp clone tutorial template

På vår send anmeldelse side, må vi oppdatere sidetypen for å også være en restaurant, slik at vi kan trekke dagens restauranter data.

 Bubble no code yelp clone tutorial template

Til Slutt må vi opprette en annen arbeidsflyt som utløser når post review-knappen er klikket.

 bubble no code yelp clone tutorial template

denne arbeidsflyten vil bli brukt til å lage en ny ting-en ny anmeldelse.

 bubble no code yelp clone tutorial template

som du har gjort før, vil du da matche elementene på siden med de nødvendige datafeltene for å opprette en gyldig anmeldelse.

når en ny anmeldelse er opprettet, blir den automatisk lagt til den gjentatte gruppen tilbake på restaurantsiden.

Tilleggsfunksjoner

etter å ha bygget kjernefunksjonene for MVP, blir du kjent med prosessen med å opprette egendefinerte datafelt og vise dynamisk innhold. Hvis du vil fortsette å legge til flere funksjoner i katalogen din, kan du vurdere:

  • Legge til en funksjon for brukere å sende inn bilder til en restaurant side
  • Opprette brukerprofiler-viser en liste over brukernes kontoopplysninger og vurderinger de er opprettet på tvers av plattformen

Launch

Ansette en utvikler eller dev team for å bygge dette programmet ville koste tusenvis, om ikke titalls-av-tusenvis av dollar. Når du starter og vokser i brukere, lar våre betalte planer deg være vert for appen på ditt eget tilpassede domene for så lite som $25 per måned. Noen maler og plugins kan koste mer, men du kan bygge all funksjonaliteten til en katalog uten ekstra kostnader.

Maler

hvis du ikke ønsker å bygge din restaurant gjennomgang tema fra bunnen av, kan du kjøpe en av malene laget av våre medlemmer. Noen lignende maler inkluderer:

  • Canvas Anmeldelser Platform By AirDev
  • Stedsbaserte Anmeldelser Av Zeroqode
  • Katalog & Oppføring Av Zeroqode

Begynn Å Bygge

Bubble kan hjelpe deg med å bygge en restaurant gjennomgang nettsted eller et annet produkt du velger! Det har aldri vært enklere å bygge noe utrolig uten å måtte kode.

for å komme i gang gratis, registrer deg her.

Du kan også koble deg til andre lidenskapelige beslutningstakere som bygger Med Bubble på vårt fellesskapsforum.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.