Articles

Jak Vybudovat Restauraci Recenzi Stránky Bez Kódu

Pokud hledáte najít perfektní restauraci nebo baru, platforem, jako je Yelp, Zagat, nebo Zomato (Urbanspoon) vám mohou pomoci vybrat si z tisíců možností potravin.

pokud jste měli zájem o vytvoření vlastní verze webu s recenzemi restaurací, Bubble je jediná platforma, kterou budete potřebovat.

nástroje bez kódu, jako je Bubble, revolucionizují, jak mohou každodenní tvůrci vytvářet software. Výkonná platforma společnosti Bubble usnadnila než kdy jindy začít vytvářet software, aniž byste museli psát jediný řádek kódu.

náš vizuální programovací nástroj umožňuje rychle navrhnout a vytvořit pracovní software, který přesahuje statické zkušenosti. Tvůrci používají bublinu k budování tržišť, adresářů a dokonce i sociálních sítí.

tento příspěvek se bude týkat postupného procesu budování webu pro kontrolu restaurací bez kódu pomocí Bubble. Ať už hledáte k replikaci celého produktu, nebo jste jen zájem o využití některé z klíčových vlastností platformy, tento průvodce bude sdílet, jak vytvořit potřebné pracovní postupy, aby si váš produkt a běží.

kroky k budování Yelp-styl s bez kódu patří:

začínáme

Chcete-li začít, budete muset zaregistrovat svůj volný Bublina účet.

Zaregistrujte svůj účet na Bubble

novinka v Bubble? Sledujte naše úvodní videa z Rychlokurzu, abyste se seznámili se základy bubliny.

doporučujeme také absolvovat úvodní lekce, které vás provedou podrobným procesem nejběžnějších funkcí bublin. To vám pomůže získat spuštění při vytváření aplikace pro kontrolu restaurace bez kódu.

doporučujeme také pochopit, jak vytvářet a upravovat uživatelské účty. Dříve jsme se o tom podrobněji zabývali v našich dalších průvodcích How to Build.

při zahájení projektu se můžete rozhodnout začít wireframingem návrhu produktu nebo vytvořením nezbytných polí v databázi.

v této příručce začneme pomocí nástroje vizuálního designu Bubble pro utváření uživatelského rozhraní našeho produktu. Pokud kopírujete verzi Yelpu nebo Zomata, některé z hlavních stránek, které budete chtít zahrnout, jsou:

  • Odeslat stránku – backend portálu, kde si můžete nahrát nové restaurace
  • Domovské stránce – zobrazení seznamu restaurací a hledání bar
  • stránka s výsledky Vyhledávání – zobrazení seznamu restaurací a kategorií jakmile uživatel hledal místo,
  • Jednotlivé restaurace stránka – stránka, představí úplné informace pro každou restauraci
  • Recenze podání stránku – stránka, kde mohou uživatelé odeslat recenzi restaurace

hlavní funkce v rámci Bublina je schopnost posílat data mezi stránkami. To vám umožní vytvořit jednu obecnou verzi stránky a poté dynamicky zobrazit relevantní obsah z databáze, pokud je to požadováno.

v případě vašeho webu budete muset vytvořit pouze jednu stránku, abyste předvedli své jednotlivé restaurace. Poté můžeme vytvořit potřebné pracovní postupy pro zobrazení pouze příslušné restaurace na každé stránce, když je to potřeba (brzy se o tom budeme podrobněji zabývat).

Konfigurace aplikace

Jakmile jste zmapovali displej vašeho produktu, můžete se soustředit na vytvoření nezbytných datových polí na výkon vaší aplikace. Spoléháme se na tyto datové typy, pole, abychom propojili pracovní postupy za vaším produktem.

bublina je pre-postavený databáze usnadňuje vytváření různých datových typů s jedinečnými polí. Při budování Yelp-jako restaurace aplikace jako MVP, budeme muset vytvořit následující typy dat & pole:

typ Dat: Uživatel

Pole:

  • Jméno
  • Foto
  • Předložené recenze – Seznam, recenze. Poznámka: vytvoření pole jako seznamu založeného na samostatném datovém typu umožňuje bezproblémovou integraci všech příslušných datových polí. To vám ušetří od museli znovu vytvořit všechny další datová pole
Bubble žádný kód yelp clone tutorial šablony

typ Dat: Restaurace

Pole:

  • Jméno
  • Popis
  • Město
  • Logo
  • Stránky odkaz
  • Telefonní číslo,
  • Noha kategorií – Seznam
  • Adresa
  • Nejlepší fotky – Seznam
  • Recenze – Seznam recenze
Bubble žádný kód yelp clone tutorial template

Datový typ: Recenze

Pole:

  • Obsah
  • Restaurace – Restaurace
Bubble žádný kód yelp clone tutorial template

Přidání restaurace k platformě

Teď, že jste nastavili své databáze, můžeme začít stavět pracovní postupy, které budou moci své aplikace. První funkce, kterou vytvoříme, není něco, s čím se uživatelé budou přímo zabývat, ale místo toho je back-end nástroj pro přidávání nových restaurací na platformu.

vytvořením specializovaného portálu pro nahrávání výpisů do databáze můžete zefektivnit proces přidávání nových restaurací do adresáře.

na stránce nahrávání můžete pomocí kombinace vstupních polí zmapovat požadovaná data pro každou novou restauraci. Jakmile kliknete na tlačítko Vytvořit, spustí se pracovní postup, který přidá tato kolektivní data jako novou restauraci do vaší databáze.

Bubble žádný kód yelp clone tutorial template

Při budování své workflow, budeme muset vytvořit novou věc, konfigurace datového typu do restaurace.

Bubble žádný kód yelp clone tutorial template

Budete pak odpovídají příslušné prvky na vaše stránky datových polí, podle typu restaurace ve vaší databázi.

Bubble žádný kód yelp clone tutorial template

Zobrazení dynamického obsahu

Poté, co jste nahráli katalog restaurací, je čas začít zobrazování na tyto veřejné stránky, které mohou uživatelé přístup.

pomocí opakujícího se skupinového prvku Bubble můžete zobrazit seznam dynamických dat z databáze – například vašich stávajících restaurací.

Poznámka: Opakující se skupiny jsou strukturované jako vertikální formát ve výchozím nastavení, ale je také možné překonfigurovat prvek pro zobrazení vodorovně.

než začnete přidávat obsah do opakující se skupiny, budete muset propojit prvek s datovým typem v databázi. To mu pomůže identifikovat konkrétní obsah, který se zobrazí.

typ obsahu, který budeme muset Zobrazit, jsou samozřejmě restaurace ve vaší databázi.

dále budeme muset identifikovat zdroj dat, aby Editor bublin věděl, které konkrétní restaurace se mají zobrazit. Pro naše HRÁČE, budeme jen zobrazí seznam všech aktuálních restaurací, ale můžete snadno přidat omezení k tomuto zdroji dat, aby filtrovat restaurace podle jejich město nebo kategoriích potravin.

Bubble žádný kód yelp clone tutorial template

Jakmile jste správně nakonfigurován opakující se skupinu, pak se budete muset začít přidávat dynamický obsah, prvky, které chcete zobrazit uvnitř každé buňky. V rámci našeho MVP, to bude zahrnovat název restaurace a doporučenou fotografii.

protože restaurace může mít více doporučených fotografií, nakonfigurujeme dynamický obsah tak, aby náhodně zobrazoval jednu z těchto fotografií.

Bubble žádný kód yelp clone tutorial template

Odesílání dat do dynamických stránek

S naší domovské stránce se zobrazuje jen náhled karty pro každou restauraci, budou uživatelé potřebovat, aby se click-through na specializované showcase stránky pro každou restauraci zobrazíte její plný obsah a recenze. Tyto dodatečné informace budou hostovány na stránce restaurace vaší aplikace.

z naší opakující se skupiny je možné vytvářet události na základě akcí provedených v každém jednotlivém řádku. Tato funkce bude užitečná při vytváření navigačních funkcí na vaší platformě.

Na přímé uživatele z domovské stránky na konkrétní restauraci, vitrína stránky, budete muset vybudovat plavební workflow, který se spustí, když restaurace vystupoval obraz klepnutí.

Bubble žádný kód yelp clone tutorial template

Vy pak budete muset odeslat další data na tuto stránku, umožňující Bublina editor určit, které konkrétní restauraci na displeji. Data, která se rozhodnete zobrazit, budou stažena z restaurace aktuální buňky.

Bubble žádný kód yelp clone tutorial template

Zobrazení dynamického obsahu na stránce náhledu

Jakmile jsou data byla odeslána do restaurace stránce, můžete snadno vytáhnout podstatné informace a zobrazit tento obsah pro každou restauraci.

nejprve se musíte ujistit, že typ cílové stránky odpovídá vlastnosti dat, kterou odesíláte v rámci pracovního postupu. V takovém případě bude stránka restaurace nakonfigurována na vlastnost restaurace.

Bubble no code yelp clone tutorial template

klasifikací typu obsahu na stránce může bublina snadno vytáhnout a odeslat relevantní data z existujících zdrojů.

nyní můžete začít přidávat dynamický obsah do polí, která zobrazují informace z restaurace aktuální stránky.

Bubble žádný kód yelp clone tutorial template

Vyhledávání obsahu

krok zpět na naši domovskou stránku, budeme také muset vytvořit funkci, která umožňuje uživatelům vyhledávat restaurace na základě městě. Toho lze dosáhnout přidáním dalšího prvku pro zadávání textu, který budeme považovat za vyhledávací lištu.

Bubble žádný kód yelp clone tutorial template

Z tady, budeme vytvořit nový pracovní postup, který klasifikuje uživatele je hledaný výraz, pak předá tyto údaje prostřednictvím samostatné stránce věnované této vyhledávací dotaz (více na této stránce brzy).

pro napájení tohoto pracovního postupu vytvoříme spouštěč událostí, který rozpozná změnu hodnoty vstupů. Prvkem bude samozřejmě pole pro zadávání textu.

Bubble žádný kód yelp clone tutorial template

Při odesílání uživatele na naše stránky s výsledky hledání, budeme muset přidat unikátní vyhledávací dotaz naší adresy URL řetězec, který umožňuje následující stránku načíst tato data.

místo toho, abychom se rozhodli poslat uživatele na konkrétní stránku v tomto pracovním postupu, zvolíme otevření externího webu. To nám umožní přizpůsobit cestu URL mezi stránkami.

URL pošleme uživateli bude aktuální webové stránky home URL + URL naší stránky s výsledky hledání, + dynamické dotazu hodnota z našeho pole pro vkládání textu.

 Bubble no code yelp clone tutorial template

dále dokončíme budování naší vyhrazené stránky s výsledky vyhledávání v naší aplikaci. Při vytváření této stránky, budeme muset nakonfigurovat typ stránky na restauraci, protože budeme chtít zobrazit seznam odpovídajících restaurací.

Bubble žádný kód yelp clone tutorial template

Při navrhování této stránce, budeme se nejprve zahrnovat opakující se skupiny prvek se zobrazí seznam restaurací. Na rozdíl od naší první opakující se skupiny budeme muset aktualizovat zdroj dat této opakující se skupiny tak, aby odpovídal vyhledávacímu dotazu z našeho řetězce URL.

začněte konfigurací typu obsahu jako restaurace. Dále aktualizujte zdroj dat a zobrazte pouze restaurace, které obsahují text řetězce URL v poli města.

 Bubble no code yelp clone tutorial template

to se nyní zobrazí pouze restaurace, které odpovídají město z vyhledávacího dotazu uživatelů.

dále na této stránce budeme chtít aktualizovat značku na naší mapě, kdykoli kliknete na název restaurace, což uživatelům umožní vizuálně vidět jeho adresu.

Chcete-li vytvořit tuto funkci, použijte Bubble workflow edit k vytvoření vlastní události, která rozpozná, když kliknete na název restaurace.

Bubble no code yelp clone tutorial template

odtud vybereme akci pro zobrazení značek.

Bubble žádný kód yelp clone tutorial template

Teď, budeme vybrat pro zobrazení značky pro naší on-page mapě, konfigurace zdroj dat jako aktuální buňky restaurací adresu.

Bubble žádný kód yelp clone tutorial template

poslední klíčové funkce, budeme muset přidat na naší stránce s výsledky vyhledávání je kategorie rozevírací seznam, který umožňuje uživatelům filtrovat restaurace podle kategorií potravin, které slouží.

Bubble žádný kód yelp clone tutorial template

Jakmile jste nastavili možnosti pro rozbalovací menu, budeme muset přidat podmínku, aby naše opakující se skupinu, což umožňuje reagovat na výběru rozbalovacích nabídkách.

logika pro tuto podmínku určí, kdy rozbalovací hodnota není prázdná. Když k tomu dojde, aktualizuje zdroj dat opakující se skupiny.

nový zdroj dat bude opět zahrnovat vyhledávání restaurací a přidá stejnou podmínku pro řetězec URL měst. Přidáme také další omezení, které zajistí, že kategorie potravin v restauraci obsahují stejnou hodnotu jako výběr rozbalovacích nabídek.

Bubble žádný kód yelp clone tutorial template

Teď, když jídlo kategorii je vybrán, tento opakující se skupiny se automaticky aktualizuje s nejvíce relevantní výsledky.

poslední funkce, kterou budeme muset přidat na tuto stránku, je další navigační událost, která nasměruje uživatele na naši vyhrazenou stránku restaurace, když kliknete na obrázek restaurace.

budeme replikovat stejný navigační pracovní postup, který jsme vytvořili z naší domovské opakující se skupiny.

Bubble žádný kód yelp clone tutorial template

Přidání recenze k restaurace

Jakmile uživatel našel nové oblíbené restaurace (díky své ne-kód aplikace), mohou chtít přispět recenzi, sdílet své zkušenosti s komunitou.

na naší stránce restaurace přidáme další opakující se skupinu pod informace o restauraci. Tato opakující se skupina bude použita k zobrazení seznamu restaurací aktuálních recenzí.

Při konfiguraci tento opakující se skupiny, datový typ bude nastaven na recenzi, a náš zdroj dat, bude tahat recenze z aktuální stránky restaurace.

Bubble no code yelp clone tutorial template

odtud vytvoříme nový pracovní postup, když kliknete na tlačítko Přidat recenzi.

Bubble no code yelp clone tutorial template

tento pracovní postup přesměruje uživatele na vyhrazenou stránku, kde může vytvořit novou recenzi. Při odesílání uživatele na tuto stránku budeme také chtít předat data z aktuálních stránek restaurace.

Bubble žádný kód yelp clone tutorial template

Na naše odeslat recenzi stránku, budeme muset aktualizovat stránku, napište také restaurace, což nám umožňuje vytáhnout aktuální restaurací data.

 Bubble no code yelp clone tutorial template

Nakonec budeme muset vytvořit další pracovní postup, který se spustí po kliknutí na tlačítko post review.

Bubble no code yelp clone tutorial template

tento pracovní postup bude použit k vytvoření nové věci-nové recenze.

Bubble žádný kód yelp clone tutorial template

Jak jste to udělal předtím, budete pak odpovídala on-page prvky nezbytné údaje pole vytvořit platný recenze.

jakmile bude vytvořena nová recenze, bude automaticky přidána do opakující se skupiny zpět na stránce restaurace.

další funkce

po vytvoření základních funkcí pro váš MVP se seznámíte s procesem vytváření vlastních datových polí a zobrazování dynamického obsahu. Pokud byste chtěli, aby i nadále přidat další funkce do vašeho adresáře, můžete zvážit:

  • Přidání funkce pro uživatele, aby předložil fotografie do restaurace stránku
  • Vytváření uživatelských profilů – zobrazení seznamu uživatelů, účet podrobnosti a recenze jsou vytvořeny přes platformu

Spustit

Najmout vývojáře nebo dev team k vybudování této aplikace by stálo tisíce, pokud ne desítky-of-tisíc dolarů. Při spuštění a růstu uživatelů vám naše placené plány umožňují hostovat aplikaci na vlastní doméně za pouhých 25 $měsíčně. Některé šablony a pluginy mohou stát více, ale můžete vytvořit všechny funkce adresáře bez dalších nákladů.

Šablony

Pokud nechcete, aby budovat své recenzi restaurace téma od začátku, můžete si koupit jednu ze šablon vyrobené členů naší komunity. Některé podobné šablony zahrnují:

  • Plátno Recenze Platformy AirDev
  • Umístění na Základě Recenze od Zeroqode
  • Adresář & Výpis o Zeroqode

Začít stavět

Bublina může pomoci vám vybudovat restauraci recenzi stránky nebo jakýkoli jiný produkt, můžete si vybrat! Nikdy nebylo snazší postavit něco neuvěřitelného, aniž byste museli kódovat.

Chcete-li začít zdarma, Zaregistrujte se zde.

můžete se také spojit s ostatními vášnivé tvůrci budovy s Bublina na naše fórum.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.