Articles

Sådan opbygges et Restaurantanmeldelsessted uden kode

hvis du ønsker at finde den perfekte restaurant eller bar, kan platforme som Yelp, Yagat eller Urbanspoon hjælpe dig med at vælge mellem tusindvis af madmuligheder.

hvis du var interesseret i at opbygge din egen version af en restaurantanmeldelsesside, er Bubble dog den eneste platform, du har brug for.

no-code værktøjer som Bubble revolutionerer, hvordan hverdagens beslutningstagere kan bygge programmer. Bubbles kraftfulde platform har gjort det nemmere end nogensinde at begynde at bygge programmer uden at skulle skrive en enkelt linje kode.

vores visuelle programmeringsværktøj gør det muligt hurtigt at designe og bygge arbejdsprogrammer, der går ud over statiske oplevelser. Beslutningstagere bruger Bubble til at opbygge markedspladser, mapper og endda sociale netværk.

dette indlæg dækker den trinvise proces med at opbygge et no-code restaurantanmeldelsessted ved hjælp af Bubble. Uanset om du ønsker at replikere hele produktet, eller du bare er interesseret i at bruge nogle af platformens kernefunktioner, vil denne vejledning dele, hvordan du bygger de nødvendige arbejdsgange for at få dit produkt i gang.

trinene til opbygning af en Yelp-stil uden kode inkluderer:

Kom godt i gang

for at komme i gang skal du registrere din gratis Bubble-konto.

Registrer din konto på Bubble

ny til Bubble? Følg med på vores Crash Course introduktionsvideoer for at blive fortrolig med det grundlæggende i Bubble.

vi anbefaler også at gennemføre vores introduktionslektioner, som vil guide dig gennem den trinvise proces med de mest almindelige Boblefunktioner. Dette hjælper dig med at få en løbende start, når du bygger din no-code restaurantanmeldelsesapp.

vi anbefaler også at forstå, hvordan du opretter og redigerer brugerkonti. Vi har tidligere dækket dette mere detaljeret i vores andre hvordan man bygger guider.

når du starter dit projekt, kan du vælge at starte med at indramme dit produktdesign eller opbygge de nødvendige felter i din database.

i denne vejledning starter vi med at bruge Bubbles visuelle designværktøj til at forme brugergrænsefladen til vores produkt. Hvis du kopierer en version af Yelp, er nogle af de kernesider, du vil medtage:

  • Upload side – en backend portal, hvor du kan uploade nye restauranter
  • startside – viser en liste over restauranter og en søgefelt
  • søgeresultatside – viser en liste over restauranter og kategorier, når en bruger har søgt en placering
  • individuel restaurantside – en side, der viser den fulde information for hver restaurant
  • gennemgå indsendelsesside – en side, hvor brugerne kan indsende en restaurantanmeldelse

en vigtig funktion i Bubble er muligheden for at sende data mellem sider. Dette giver dig mulighed for at oprette en generisk version af en side og derefter dynamisk vise det relevante indhold fra din database, når det er nødvendigt.

i tilfælde af din side behøver du kun at oprette en side for at fremvise dine individuelle restauranter. Vi kan derefter oprette de nødvendige arbejdsgange for kun at vise den relevante restaurant på hver side, når det er nødvendigt (vi dækker dette mere detaljeret snart).

konfiguration af din app

når du har kortlagt visningen af dit produkt, kan du fokusere på at oprette de nødvendige datafelter til at drive din applikation. Vi bruger disse datatyper, felter til at forbinde arbejdsprocesserne bag dit produkt.

Bubbles forudbyggede database gør det nemt at oprette forskellige datatyper med unikke felter. Når vi bygger en Yelp – lignende restaurantapp som en MVP, skal vi oprette følgende datatyper & felter:

datatype: bruger

felter:

  • navn
  • foto
  • indsendte anmeldelser – liste over anmeldelser. Bemærk: oprettelse af et felt som en liste baseret på en separat datatype giver dig mulighed for problemfrit at integrere alle dens relevante datafelter. Dette sparer dig fra at skulle genskabe alle de yderligere datafelter
boble ingen kode yelp klon tutorial skabelon

datatype: Restaurant

felter:

  • navn
  • beskrivelse
  • by
  • Logo
  • hjemmeside link
  • telefonnummer
  • Fodkategorier – liste
  • adresse
  • udvalgte billeder – Liste
  • anmeldelser – liste over anmeldelser
boble ingen kode yelp klon tutorial skabelon

datatype: anmeldelse

felter:

  • indhold
  • Restaurant-Restaurant
Bubble no code Yelp clone tutorial template

tilføjelse af en restaurant til platformen

nu hvor du har konfigureret din database, kan vi begynde at opbygge de arbejdsgange, der vil drive din applikation. Den første funktion, vi opretter, er ikke noget, som brugerne direkte vil engagere sig i, men er i stedet et back-end-værktøj til at tilføje nye restauranter til platformen.

ved at opbygge en dedikeret portal til at uploade lister til din database, kan du strømline processen med at tilføje nye restauranter til din mappe.

på din uploadside kan du bruge en kombination af indtastningsfelter til at kortlægge de nødvendige data for hver ny restaurant. Når der er klikket på knappen Opret, udløser dette en arbejdsgang, der tilføjer disse kollektive data som en ny restaurant i din database.

Bubble no code yelp clone tutorial template

når du bygger din arbejdsgang, skal vi oprette en ny ting, konfigurere datatypen til en restaurant.

Bubble no code yelp clone tutorial template

du matcher derefter de relevante elementer på din side til datafelterne under restauranttypen i din database.

Bubble no code yelp clone tutorial template

visning af dynamisk indhold

når du har uploadet et katalog over restauranter, er det tid til at begynde at vise disse på en offentlig side, som brugerne kan få adgang til.

ved hjælp af bubbles gentagne gruppeelement kan du få vist en liste over dynamiske data fra din database – f.eks. dine eksisterende Restauranter.

Bemærk: gentagne grupper er som standard struktureret som et lodret format, men det er også muligt at omkonfigurere elementet, så det vises vandret.

før du begynder at tilføje indhold i din gentagne gruppe, skal du linke elementet til en datatype i din database. Dette vil hjælpe det med at identificere det specifikke indhold, det vil vise.

den type indhold, vi skal vise, er naturligvis restauranterne i din database.

Dernæst skal vi identificere en datakilde, så Bubble editor ved, hvilke specifikke restauranter der skal vises. For vores MVP viser vi kun en liste over alle de aktuelle restauranter, men du kan nemt tilføje begrænsninger til denne datakilde for at filtrere restauranter efter deres by-eller fødevarekategorier.

Bubble no code yelp clone tutorial template

når du har konfigureret den gentagne gruppe korrekt, skal du derefter begynde at tilføje eventuelle dynamiske indholdselementer, du gerne vil vise inde i hver celle. Inden for vores MVP, dette vil omfatte en restaurants titel og fremhævede foto.

da en restaurant kan have flere fremhævede fotos, konfigurerer vi det dynamiske indhold til at vise et af disse fotos tilfældigt.

Bubble no code yelp clone tutorial template

afsendelse af data til dynamiske sider

når vores startside kun viser et eksempelkort for hver restaurant, skal brugerne klikke igennem til en dedikeret udstillingsside for hver restaurant for at se dets fulde indhold og anmeldelser. Disse yderligere oplysninger vil blive hostet på restaurantsiden i din ansøgning.

fra vores gentagne gruppe er det muligt at oprette begivenheder baseret på handlinger, der er taget inden for hver enkelt række. Denne funktion bliver nyttig, når du bygger navigationsfunktioner på tværs af din platform.

hvis du vil dirigere en bruger fra startsiden til en bestemt side med restaurantfremvisning, skal du oprette en navigationsarbejdsproces, der udløses, når der klikkes på et billede med restauranter.

Bubble no code yelp clone tutorial template

du skal derefter sende yderligere data til denne side, så Bubble editor kan identificere, hvilken specifik restaurant der skal vises. De data, du vælger at vise, trækkes fra den aktuelle celles restaurant.

Bubble no code yelp clone tutorial template

Vis dynamisk indhold på forhåndsvisningssiden

når data er sendt til restaurantsiden, kan du nemt trække de relevante oplysninger og vise dette indhold for hver restaurant.

du skal først sikre dig, at destinationssidetypen matcher den dataegenskab, du sender i arbejdsprocessen. I dette tilfælde konfigureres restaurantsiden til en restaurantejendom.

Bubble no code yelp clone tutorial template

ved at klassificere typen af indhold på en side kan Bubble nemt trække og sende relevante data fra eksisterende kilder.

du kan nu begynde at tilføje dynamisk indhold i de felter, der viser oplysninger fra den aktuelle sides restaurant.

Bubble no code yelp clone tutorial template

søgning efter indhold

når vi tager et skridt tilbage til vores hjemmeside, bliver vi også nødt til at opbygge en funktion, der giver brugerne mulighed for at søge efter restauranter baseret på en by. Dette kan opnås ved at tilføje et ekstra tekstinputelement, som vi behandler som en søgefelt.

Bubble no code yelp clone tutorial template

herfra opretter vi en ny arbejdsgang, der klassificerer en brugers søgeudtryk og derefter overfører disse data til en separat side dedikeret til denne søgeforespørgsel (mere på denne side snart).

for at aktivere denne arbejdsproces opretter vi en hændelsesudløser, der genkender, når en inputværdi ændres. Elementet vil naturligvis være tekstindtastningsfeltet.

Bubble no code yelp clone tutorial template

når du sender brugeren til vores søgeresultatside, skal vi tilføje en unik søgeforespørgsel til vores URL-streng, så den følgende side kan hente disse data.

i stedet for at vælge at sende en bruger til en bestemt side i denne arbejdsproces, vælger vi at åbne en ekstern hjemmeside. Dette giver os mulighed for at tilpasse URL-stien mellem sider.

den URL, vi sender brugeren til, er den aktuelle hjemmesides Hjem-URL + URL ‘ en til vores søgeresultatside + den dynamiske forespørgselsværdi fra vores tekstindtastningsfelt.

Bubble no code yelp clone tutorial template

næste, vi er færdige med at opbygge vores dedikerede søgeresultatside i vores applikation. Når vi bygger denne side, skal vi konfigurere sidetypen til en restaurant, da vi ønsker at vise en liste over matchende restauranter.

Bubble no code yelp clone tutorial template

når vi designer denne side, inkluderer vi først et gentagende gruppeelement til at vise en liste over restauranter. I modsætning til vores første gentagne gruppe skal vi opdatere datakilden for denne gentagne gruppe for at matche søgeforespørgslen fra vores URL-streng.

Start med at konfigurere indholdstypen til at være en restaurant. Opdater derefter datakilden for kun at vise de restauranter, der indeholder vores URL-strenge tekst i deres byfelt.

Bubble no code yelp clone tutorial template

Dette viser nu kun de restauranter, der matcher byen fra brugernes søgeforespørgsel.

næste på denne side vil vi opdatere markøren på vores kort, når der klikkes på en restauranttitel, så brugerne visuelt kan se dens adresse.

hvis du vil oprette denne funktion, skal du bruge Redigering af Boblearbejdsgang til at oprette en brugerdefineret begivenhed, der genkender, når der klikkes på en restauranttitel.

Bubble no code yelp clone tutorial template

herfra vælger vi handlingen for at vise markører.

Bubble no code yelp clone tutorial template

nu vælger vi at vise markøren for vores kort på siden og konfigurere dens datakilde som den aktuelle celle restauranter adresse.

Bubble no code yelp clone tutorial template

den endelige nøglefunktion, vi bliver nødt til at tilføje til vores søgeresultatside, er en rullemenu i kategori, der giver brugerne mulighed for at filtrere gennem restauranter efter de kategorier af fødevarer, de serverer.

Bubble no code yelp clone tutorial template

når du har konfigureret indstillingerne til rullemenuen, skal vi tilføje en betingelse til vores gentagne gruppe, så den kan svare på rullemenuen.

logikken for denne betingelse vil identificere, hvornår rullemenuen ikke er tom. Når dette sker, opdaterer den derefter datakilden for den gentagne gruppe.

den nye datakilde vil igen omfatte en søgning efter restauranter og tilføje den samme betingelse for cities URL-strengen. Vi tilføjer også en anden begrænsning, der sikrer, at restaurantens fødevarekategorier også indeholder den samme værdi som valg af rullemenuer.

Bubble no code yelp clone tutorial template

når en fødevarekategori er valgt, opdateres denne gentagne gruppe automatisk med de mest relevante resultater.

den sidste funktion, vi skal tilføje til denne side, er en anden navigationsbegivenhed, der leder en bruger til vores dedikerede restaurantside, når der klikkes på et restaurantbillede.

vi replikerer den samme navigationsarbejdsproces, som vi oprettede fra vores gentagelsesgruppe på hjemmesiden.

Bubble no code yelp clone tutorial template

tilføjelse af anmeldelser til en restaurant

når en bruger har fundet en ny favoritrestaurant (takket være din no-code app), vil de måske bidrage med en anmeldelse og dele deres erfaringer med samfundet.

på vores restaurantside tilføjer vi en yderligere gentagende gruppe under restaurantens oplysninger. Denne gentagne gruppe vil blive brugt til at vise en liste over restauranternes aktuelle anmeldelser.

når du konfigurerer denne gentagne gruppe, indstilles datatypen til en gennemgang, og vores datakilde trækker alle anmeldelser fra den aktuelle side restaurant.

Bubble no code yelp clone tutorial template

herfra opretter vi en ny arbejdsgang, når der klikkes på knappen Tilføj anmeldelse.

Bubble no code yelp clone tutorial template

denne arbejdsgang omdirigerer en bruger til en dedikeret side, hvor de kan oprette en ny anmeldelse. Når du sender en bruger til denne side, vil vi også gerne videregive dataene fra den aktuelle pages-restaurant.

Bubble no code yelp clone tutorial template

på vores indsend gennemgangsside skal vi opdatere sidetypen for også at være en restaurant, så vi kan trække de aktuelle restaurantdata.

Bubble no code yelp clone tutorial template

endelig skal vi derefter oprette en anden arbejdsgang, der udløser, når knappen post anmeldelse er klikket.

Bubble no code yelp clone tutorial template

denne arbejdsgang vil blive brugt til at oprette en ny ting – en ny anmeldelse.

Bubble no code yelp clone tutorial template

som du har gjort før, matcher du derefter elementerne på siden med de nødvendige datafelter for at oprette en gyldig anmeldelse.

når en ny anmeldelse er oprettet, føjes den automatisk til den gentagne gruppe tilbage på siden restauranter.

yderligere funktioner

når du har opbygget kernefunktionerne til din MVP, bliver du fortrolig med processen med at oprette brugerdefinerede datafelter og vise dynamisk indhold. Hvis du gerne vil fortsætte med at tilføje yderligere funktioner til din mappe, kan du overveje:

  • tilføjelse af en funktion, hvor brugerne kan indsende fotos til en restaurantside
  • oprettelse af brugerprofiler – visning af en liste over brugernes kontooplysninger og de anmeldelser, de er oprettet på tværs af platformen

lancering

ansættelse af en udvikler eller et dev-team til at opbygge denne app ville koste tusinder, hvis ikke titusinder af dollars. Når du starter og vokser i brugere, giver vores betalte planer dig mulighed for at være vært for appen på dit eget brugerdefinerede domæne for så lidt som $25 pr. Nogle skabeloner og plugins koster muligvis mere, men du kan opbygge al funktionalitet i en mappe uden yderligere omkostninger.

skabeloner

hvis du ikke ønsker at opbygge dit restaurantanmeldelsestema fra bunden, kan du købe en af de skabeloner, der er lavet af vores fællesskabsmedlemmer. Nogle lignende skabeloner inkluderer:

  • Canvas anmeldelser Platform af AirDev
  • lokationsbaserede anmeldelser af Nulkode
  • Directory & notering af Nulkode

begynd at bygge

Bubble kan hjælpe dig med at opbygge et restaurantanmeldelsessted eller ethvert andet produkt, du vælger! Det har aldrig været nemmere at bygge noget utroligt uden at skulle kode.

for at komme i gang gratis, Tilmeld dig her.

du kan også oprette forbindelse til andre lidenskabelige beslutningstagere, der bygger med Bubble på vores community forum.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.