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

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

adattípus: felülvizsgálat

mezők:

• tartalom
• étterem-Étterem

é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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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

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

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.