Articles

Hogyan építsünk éttermi áttekintő oldalt kód nélkül

ha a tökéletes éttermet vagy bárot szeretné megtalálni, akkor az olyan platformok, mint a Yelp, a Zagat vagy a Zomato (Urbanspoon), segíthetnek több ezer étkezési lehetőség közül választani.

ha érdekli az étterem áttekintő webhelyének saját verziójának elkészítése, akkor a Bubble az egyetlen platform, amelyre szüksége lesz.

az olyan kód nélküli eszközök, mint a Bubble, forradalmasítják a mindennapi döntéshozók szoftverét. A Bubble nagy teljesítményű platformja minden eddiginél könnyebbé tette a szoftverek készítésének megkezdését anélkül, hogy egyetlen kódsort kellene írni.

vizuális programozási eszközünk lehetővé teszi a statikus élményeken túlmutató működő szoftverek gyors tervezését és elkészítését. A döntéshozók a Bubble segítségével piactereket, könyvtárakat, sőt közösségi hálózatokat építenek.

ez a bejegyzés a Bubble használatával egy kód nélküli éttermi Áttekintő oldal felépítésének lépésről lépésre történő folyamatát ismerteti. Akár a teljes terméket szeretné megismételni, akár csak a platform néhány alapvető jellemzőjének kihasználása érdekli, ez az útmutató megosztja, hogyan kell felépíteni a szükséges munkafolyamatokat a termék üzembe helyezéséhez.

a Yelp-stílus kód nélküli felépítésének lépései a következők:

első lépések

a kezdéshez regisztrálnia kell az ingyenes Bubble-fiókját.

regisztrálja fiókját a buborékban

új a buborékban? Kövesse végig a gyorstalpaló bevezető videóinkat, hogy megismerkedjen a Bubble alapjaival.

azt is javasoljuk, hogy töltse ki bevezető óráinkat, amelyek végigvezetik Önt a leggyakoribb Buborékfunkciók lépésről lépésre történő folyamatán. Ez segít abban, hogy elinduljon a kód nélküli éttermi áttekintő alkalmazás felépítésekor.

azt is javasoljuk, hogy ismerje meg, hogyan hozhat létre és szerkeszthet felhasználói fiókokat. Ezt korábban részletesebben tárgyaltuk a másik Hogyan építsünk útmutatókat.

a projekt elindításakor dönthet úgy, hogy a terméktervezést drótvázzal vagy az adatbázis szükséges mezőinek felépítésével kezdi.

ebben az útmutatóban kezdjük a Bubble vizuális tervező eszközével a termék felhasználói felületének alakításához. Ha a Yelp vagy a Zomato egy verzióját replikálja, akkor a következő alapvető oldalakat szeretné felvenni:

  • feltöltési oldal – háttérportál, ahol új éttermeket tölthet fel
  • Kezdőlap – éttermek listájának megjelenítése és keresősáv
  • keresési eredményoldal – éttermek és kategóriák listájának megjelenítése, miután a felhasználó keresett egy helyet
  • egyedi éttermi oldal – az egyes éttermekre vonatkozó teljes információt bemutató oldal
  • felülvizsgálati benyújtási oldal – egy oldal, ahol a felhasználók benyújthatják az étterem véleményét

a bubble egyik fő jellemzője az adatok küldése az oldalak között. Ez lehetővé teszi az oldal egy általános verziójának létrehozását, majd dinamikusan megjeleníti az adatbázis releváns tartalmát, amikor szükséges.

webhelye esetében csak egy oldalt kell létrehoznia az egyes éttermek bemutatásához. Ezután létrehozhatjuk a szükséges munkafolyamatokat, hogy minden oldalon csak a megfelelő éttermet jelenítsük meg, amikor szükség van rá (ezt hamarosan részletesebben ismertetjük).

az alkalmazás konfigurálása

miután feltérképezte a termék megjelenítését, összpontosíthat az alkalmazás működéséhez szükséges adatmezők létrehozására. Ezekre az adattípusokra, mezőkre támaszkodunk a termék mögötti munkafolyamatok összekapcsolásához.

a Bubble előre elkészített adatbázisa megkönnyíti a különböző adattípusok létrehozását egyedi mezőkkel. Amikor egy Yelp-szerű éttermi alkalmazást építünk MVP-ként, a következő adattípusokat kell létrehoznunk & mezők:

adattípus: felhasználó

mezők:

  • név
  • fotó
  • benyújtott vélemények – Vélemények listája. Megjegyzés: Ha egy mezőt külön adattípuson alapuló listaként hoz létre, akkor zökkenőmentesen integrálhatja az összes releváns adatmezőt. Így nem kell újra létrehoznia az összes további adatmezőt
buborék nincs kód yelp klón bemutató sablon

adattípus: étterem

mezők:

  • név
  • leírás
  • város
  • logó
  • weboldal link
  • telefonszám
  • láb kategóriák – lista
  • cím
  • kiemelt fotók – lista
  • vélemények – Vélemények listája
Bubble nincs kód yelp klón bemutató sablon

adattípus: felülvizsgálat

mezők:

  • tartalom
  • étterem-Étterem
Bubble no code yelp clone tutorial template

étterem hozzáadása a platformhoz

most, hogy konfigurálta az adatbázisát, megkezdhetjük az alkalmazást működtető munkafolyamatok felépítését. Az első szolgáltatás, amelyet létrehozunk, nem olyan, amellyel a felhasználók közvetlenül részt vesznek, hanem egy háttér-eszköz új éttermek hozzáadásához a platformhoz.

egy dedikált portál létrehozásával, amely listákat tölt fel az adatbázisba, egyszerűsítheti az új éttermek hozzáadásának folyamatát a könyvtárba.

a feltöltési oldalon beviteli mezők kombinációjával leképezheti az egyes új éttermekhez szükséges adatokat. Miután rákattintott a Létrehozás gombra, ez elindít egy munkafolyamatot, amely ezeket a kollektív adatokat új étteremként adja hozzá az adatbázisához.

Bubble no code yelp klón bemutató sablon

a munkafolyamat felépítésekor új dolgot kell létrehoznunk, az adattípust egy étterembe konfigurálva.

Bubble no code yelp klón bemutató sablon

ezután az oldal releváns elemeit az adatbázis éttermi típusa alatti adatmezőkhöz illeszti.

Bubble no code yelp clone bemutató sablon

dinamikus tartalom megjelenítése

miután feltöltötte az éttermek katalógusát, itt az ideje, hogy ezeket megjelenítse egy nyilvános oldalon, amelyhez a felhasználók hozzáférhetnek.

a Bubble ismétlődő csoport elemével megjelenítheti az adatbázis dinamikus adatainak listáját – például a meglévő éttermeket.

Megjegyzés: Az ismétlődő csoportok alapértelmezés szerint függőleges formátumként vannak felépítve, de lehetőség van az elem vízszintes megjelenítésére is.

mielőtt elkezdené tartalom hozzáadását az ismétlődő csoportba, össze kell kapcsolnia az elemet az adatbázis egyik adattípusával. Ez segít azonosítani a megjelenített konkrét tartalmat.

a megjelenítendő tartalom típusa természetesen az adatbázisban található éttermek.

ezután meg kell határoznunk egy adatforrást, hogy a Buborékszerkesztő tudja, melyik éttermet jelenítse meg. MVP – nk számára csak az összes jelenlegi étterem listáját jelenítjük meg, de könnyen hozzáadhat korlátozásokat ehhez az adatforráshoz, hogy szűrje az éttermeket városuk vagy élelmiszer-kategóriájuk szerint.

Bubble no code yelp clone bemutató sablon

miután megfelelően konfigurálta az ismétlődő csoportot, el kell kezdenie hozzáadni az egyes cellákban megjeleníteni kívánt dinamikus tartalomelemeket. Az MVP – n belül ez magában foglalja az étterem címét és a kiemelt fotót.

mivel egy étteremben több kiemelt fotó is lehet, A dinamikus tartalmat úgy állítjuk be, hogy véletlenszerűen jelenítse meg az egyik képet.

Bubble no code yelp clone bemutató sablon

adatok küldése dinamikus oldalakra

mivel a kezdőlapunkon csak egy előnézeti kártya jelenik meg minden Étterem számára, a felhasználóknak át kell kattintaniuk az egyes éttermek külön bemutató oldalára, hogy megtekinthessék annak teljes tartalmát és véleményét. Ezt a kiegészítő információt az alkalmazás éttermi oldalán tároljuk.

ismétlődő csoportunkból eseményeket lehet létrehozni az egyes sorokban végrehajtott műveletek alapján. Ez a funkció akkor lesz hasznos, ha navigációs funkciókat épít a platformon.

ahhoz, hogy egy felhasználót a kezdőlapról egy adott éttermi bemutató oldalra irányítson, létre kell hoznia egy navigációs munkafolyamatot, amely akkor aktiválódik, amikor egy éttermi kiemelt képre kattint.

Bubble no code yelp klón bemutató sablon

ezután további adatokat kell küldenie erre az oldalra, lehetővé téve a Bubble editor számára, hogy meghatározza, melyik éttermet jelenítse meg. A megjelenítendő adatokat az aktuális cella étterméből húzza ki.

Bubble no code yelp clone bemutató sablon

dinamikus tartalom megjelenítése az előnézeti oldalon

Miután az adatokat elküldték az éttermi oldalra, könnyen kihúzhatja a vonatkozó információkat, és megjelenítheti ezt a tartalmat minden étteremben.

először meg kell győződnie arról, hogy a céloldal típusa megegyezik a munkafolyamatban elküldött adattulajdonsággal. Ebben az esetben az étterem oldal egy étterem tulajdonságra lesz konfigurálva.

Bubble no code yelp klón bemutató sablon

az oldalon található tartalom típusának osztályozásával a Bubble könnyen lekérheti és elküldheti a releváns adatokat a meglévő forrásokból.

mostantól dinamikus tartalmat adhat hozzá az aktuális oldal étterméből származó információkat megjelenítő mezőkhöz.

Bubble no code yelp clone bemutató sablon

tartalom keresése

visszalépve a honlapunkra, egy olyan funkciót is ki kell építenünk, amely lehetővé teszi a felhasználók számára, hogy Város alapján keressenek éttermeket. Ez egy további szövegbeviteli elem hozzáadásával érhető el, amelyet keresősávként kezelünk.

Bubble no code yelp clone tutorial template

innentől kezdve létrehozunk egy új munkafolyamatot, amely osztályozza a felhasználó keresési kifejezését, majd továbbítja ezeket az adatokat egy külön erre a keresési lekérdezésre szánt oldalra (hamarosan bővebben ezen az oldalon).

a munkafolyamat működtetéséhez létrehozunk egy eseményindítót, amely felismeri, ha egy bemeneti érték megváltozik. Az elem természetesen a szövegbeviteli mező lesz.

Bubble no code yelp clone bemutató sablon

amikor elküldi a felhasználót a keresési eredményoldalunkra, egyedi keresési lekérdezést kell hozzáadnunk az URL-karakterláncunkhoz, amely lehetővé teszi a Következő oldal számára az adatok lekérését.

ahelyett, hogy a felhasználót a munkafolyamat egy adott oldalára küldenénk, egy Külső Webhely megnyitását választjuk. Ez lehetővé teszi számunkra az oldalak közötti URL-útvonal testreszabását.

az az URL, amelyre a felhasználót elküldjük, az aktuális webhely otthoni URL-je + a keresési eredményoldal URL-je + a dinamikus lekérdezési érték a szövegbeviteli mezőnkből.

Bubble no code yelp klón bemutató sablon

ezután befejezzük a dedikált keresési eredményoldalunkat az alkalmazásunkon belül. Az oldal felépítésekor be kell állítanunk az oldal típusát egy étterembe, mivel meg akarjuk jeleníteni a megfelelő éttermek listáját.

Bubble no code yelp klón bemutató sablon

az oldal megtervezésekor először egy ismétlődő csoport elemet fogunk tartalmazni az éttermek listájának megjelenítéséhez. Az első ismétlődő csoporttól eltérően frissítenünk kell ennek az ismétlődő csoportnak az adatforrását, hogy megfeleljen az URL-karakterláncunk Keresési lekérdezésének.

Kezdje azzal, hogy a tartalomtípust étteremnek állítja be. Ezután frissítse az adatforrást, hogy csak azokat az éttermeket jelenítse meg, amelyek az URL-karakterláncok szövegét tartalmazzák a város mezőben.

Bubble no code yelp klón bemutató sablon

ez most csak azokat az éttermeket jeleníti meg, amelyek megfelelnek a városnak a felhasználók keresési lekérdezéséből.

ezen az oldalon következő lépésként frissíteni szeretnénk a térképünk jelölőjét, amikor egy étterem címére kattintanak, lehetővé téve a felhasználók számára, hogy vizuálisan láthassák a címét.

ennek a funkciónak a létrehozásához használja a Bubble workflow edit elemet egy egyéni esemény létrehozásához, amely felismeri, ha egy étterem címére kattint.

Bubble no code yelp klón bemutató sablon

innen választjuk ki a markerek megjelenítéséhez szükséges műveletet.

Bubble no code yelp klón bemutató sablon

most kiválasztjuk, hogy megjelenítse a jelölőt az oldaltérképünkhöz, konfigurálva annak adatforrását az aktuális cellák éttermi címeként.

Bubble no code yelp clone bemutató sablon

az utolsó kulcsfontosságú funkció, amelyet hozzá kell adnunk a keresési eredményoldalunkhoz, egy kategória legördülő menü, amely lehetővé teszi a felhasználók számára, hogy az éttermekben szűrjenek az általuk felszolgált élelmiszerek kategóriái szerint.

Bubble no code yelp clone bemutató sablon

miután beállította a legördülő menü beállításait, hozzá kell adnunk egy feltételt az ismétlődő csoportunkhoz, amely lehetővé teszi, hogy válaszoljon a legördülő választásra.

ennek a feltételnek a logikája azonosítja, ha a legördülő érték nem üres. Amikor ez megtörténik, akkor frissíti az ismétlődő csoport adatforrását.

az új adatforrás ismét tartalmazza az éttermek keresését, hozzáadva ugyanezt a feltételt a városok URL-karakterláncához. Hozzáadunk egy másik korlátozást is, biztosítva, hogy az étterem ételkategóriái ugyanazt az értéket tartalmazzák, mint a legördülő menük kiválasztása.

Bubble no code yelp klón bemutató sablon

Most, amikor egy élelmiszer-kategória van kiválasztva, ez az ismétlődő csoport automatikusan frissül a legrelevánsabb eredményekkel.

az utolsó funkció, amelyet hozzá kell adnunk ehhez az oldalhoz, egy másik navigációs esemény, amely a felhasználót a dedikált éttermi oldalunkra irányítja, amikor egy éttermi képre kattint.

ugyanazt a navigációs munkafolyamatot replikáljuk, amelyet a honlap ismétlődő csoportjából hoztunk létre.

Bubble no code yelp clone bemutató sablon

vélemények hozzáadása egy étteremhez

miután a felhasználó új kedvenc éttermet talált (a kód nélküli alkalmazásnak köszönhetően), érdemes hozzájárulni egy értékeléshez, megosztva tapasztalataikat a közösséggel.

éttermi oldalunkon további ismétlődő csoportot adunk hozzá az étterem adatai alatt. Ez az ismétlődő csoport az éttermek aktuális véleményeinek listájának megjelenítésére szolgál.

az ismétlődő csoport konfigurálásakor az adattípus egy áttekintésre lesz állítva, és az adatforrásunk az aktuális oldalak étterem összes véleményét lekéri.

Bubble no code yelp klón bemutató sablon

innen létrehozunk egy új munkafolyamatot, amikor rákattintunk a vélemény hozzáadása gombra.

Bubble no code yelp clone bemutató sablon

ez a munkafolyamat átirányítja a felhasználót egy dedikált oldalra, ahol új véleményt hozhat létre. Amikor egy felhasználót küldünk erre az oldalra, az aktuális oldalak étterem adatait is továbbítani szeretnénk.

Bubble no code yelp klón bemutató sablon

a beküldési áttekintő oldalunkon frissítenünk kell az oldal típusát, hogy Étterem is legyen, lehetővé téve számunkra az aktuális éttermek adatainak lekérését.

Bubble no code yelp klón bemutató sablon

végül létre kell hoznunk egy másik munkafolyamatot, amely a felülvizsgálat utáni gombra kattintva aktiválódik.

Bubble no code yelp klón bemutató sablon

ezt a munkafolyamatot egy új dolog – egy új felülvizsgálat-létrehozására használják.

Bubble no code yelp klón bemutató sablon

mint korábban is, akkor majd egyezik az oldalon elemeket a szükséges adatmezőket, hogy hozzon létre egy érvényes felülvizsgálat.

az új értékelés létrehozása után automatikusan hozzáadódik az ismétlődő csoporthoz az éttermek oldalon.

további funkciók

miután elkészítette az MVP alapvető funkcióit, megismerheti az egyéni adatmezők létrehozásának és a dinamikus tartalom megjelenítésének folyamatát. Ha továbbra is további funkciókat szeretne hozzáadni a könyvtárához, fontolja meg:

  • hozzáadása funkció a felhasználók számára, hogy küldje el a képeket egy étterem oldal
  • felhasználói profilok létrehozása – listájának megjelenítése a felhasználók fiók adatait és a vélemények ők létre az egész platform

Launch

bérbeadása fejlesztő vagy dev csapat építeni ezt app kerülne ezer, ha nem több tízezer dollárt. Ahogy elindítja és növekszik a felhasználók körében, fizetett terveink lehetővé teszik, hogy az alkalmazást saját egyéni domainjén tárolja havonta 25 dollárért. Egyes sablonok és bővítmények többe kerülhetnek, de a könyvtár összes funkcióját további költségek nélkül felépítheti.

sablonok

ha nem akarja a semmiből felépíteni az étterem áttekintő témáját, megvásárolhatja a közösség tagjai által készített sablonok egyikét. Néhány hasonló sablon a következőket tartalmazza:

  • Canvas vélemények Platform által AirDev
  • hely alapú vélemények által Zeroqode
  • Directory & Listing által Zeroqode

Start Building

Bubble segíthet építeni egy étterem felülvizsgálat oldalon, vagy bármely más termék úgy dönt! Soha nem volt könnyebb valami hihetetlen dolgot építeni anélkül, hogy kódolni kellene.

az ingyenes kezdéshez iratkozzon fel itt.

azt is csatlakozhat más szenvedélyes döntéshozók épület buborék a közösségi fórum.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.