Articles

cum se construiește un site de revizuire a restaurantului fără cod

dacă doriți să găsiți restaurantul sau barul perfect, platforme precum Yelp, Zagat sau Zomato (Urbanspoon) vă pot ajuta să alegeți dintre mii de opțiuni alimentare.

dacă ați fost interesat să vă construiți propria versiune a unui site de revizuire a restaurantului, cu toate acestea, Bubble este singura platformă de care veți avea nevoie.

instrumentele fără cod, cum ar fi Bubble, revoluționează modul în care producătorii de zi cu zi pot construi software. Platforma puternică a lui Bubble a făcut mai ușor ca niciodată să începeți să construiți software fără a fi nevoie să scrieți o singură linie de cod.

instrumentul nostru de programare vizuală face posibilă proiectarea și construirea rapidă a software-ului de lucru care depășește experiențele statice. Producătorii folosesc Bubble pentru a construi piețe, directoare și chiar rețele sociale.

această postare va acoperi procesul pas cu pas de construire a unui site de revizuire a restaurantului fără cod folosind Bubble. Indiferent dacă doriți să reproduceți întregul produs sau sunteți interesat doar să utilizați unele dintre caracteristicile de bază ale platformei, acest ghid vă va împărtăși cum să construiți fluxurile de lucru necesare pentru a vă pune produsul în funcțiune.

pașii pentru construirea unui stil Yelp fără cod includ:

începeți

pentru a începe, va trebui să vă înregistrați contul Free Bubble.

înregistrați-vă contul pe Bubble

nou la Bubble? Urmăriți videoclipurile noastre introductive pentru a vă familiariza cu elementele de bază ale Bubble.

de asemenea, vă recomandăm să completați lecțiile noastre introductive, care vă vor ghida prin procesul pas cu pas al celor mai comune caracteristici cu bule. Acest lucru vă va ajuta să obțineți un început de funcționare atunci când vă construiți aplicația de revizuire a restaurantului fără cod.

de asemenea, vă recomandăm să înțelegeți cum să creați și să editați conturi de utilizator. Am acoperit anterior acest lucru mai detaliat în celelalte ghiduri cum să construim.

când începeți proiectul, puteți alege să începeți prin wireframing design-ul produsului sau prin construirea câmpurilor necesare în baza de date.

în acest ghid, vom începe prin utilizarea instrumentului de proiectare vizuală Bubble pentru a modela interfața cu utilizatorul a produsului nostru. Dacă reproduceți o versiune de Yelp sau Zomato, unele dintre paginile de bază pe care doriți să le includeți sunt:

  • pagina de încărcare – un portal backend unde puteți încărca noi restaurante
  • pagina de pornire – afișarea unei liste de restaurante și o bară de căutare
  • pagina cu rezultatele căutării – afișarea unei liste de restaurante și categorii odată ce un utilizator a căutat o locație
  • pagina restaurantului Individual – o pagină care prezintă informațiile complete pentru fiecare restaurant
  • pagina – o pagină în care utilizatorii pot trimite o recenzie restaurant

o caracteristică majoră în Bubble este capacitatea de a trimite date între pagini. Aceasta vă permite să creați o versiune generică a unei pagini, apoi să afișați dinamic conținutul relevant din Baza de date atunci când este necesar.

în cazul site-ului dvs., va trebui să creați o singură pagină pentru a vă prezenta restaurantele individuale. Putem crea apoi fluxurile de lucru necesare pentru a afișa doar Restaurantul relevant pe fiecare pagină atunci când este necesar (vom acoperi acest lucru mai detaliat în curând).

configurarea aplicației

după ce ați trasat afișarea produsului, vă puteți concentra pe crearea câmpurilor de date necesare pentru alimentarea aplicației. Ne vom baza pe aceste tipuri de date, câmpuri pentru a conecta fluxurile de lucru din spatele produsului dvs.

baza de date pre-construit Bubble îl face ușor de a crea diferite tipuri de date cu câmpuri unice. Când construiți o aplicație de restaurant asemănătoare Yelp ca MVP, va trebui să creăm următoarele tipuri de date & câmpuri:

tip de date: utilizator

câmpuri:

  • nume
  • fotografie
  • recenzii trimise – Lista de recenzii. Notă: crearea unui câmp ca listă bazată pe un tip de date separat vă permite să integrați fără probleme toate câmpurile sale de date relevante. Acest lucru vă scutește de necesitatea de a recrea toate câmpurile de date suplimentare
Bubble nici un cod Yelp clona tutorial șablon

Tipul de date: Restaurant

domenii:

  • nume
  • descriere
  • oraș
  • Logo
  • link – ul site – ului
  • Numărul de telefon
  • Categorii picior – listă
  • adresa
  • fotografii recomandate-listă
  • Comentarii-Lista de comentarii
Bubble nici un cod Yelp clona tutorial șablon

tip de date: revizuire

domenii:

  • conținut
  • Restaurant-Restaurant
Bubble no code Yelp clone tutorial template

adăugarea unui restaurant la platforma

acum, că ați configurat baza de date, putem începe construirea fluxurilor de lucru care va alimenta aplicația. Prima caracteristică pe care o vom crea nu este ceva cu care utilizatorii se vor angaja direct, ci este în schimb un instrument back-end pentru adăugarea de noi restaurante pe platformă.

construind un portal dedicat pentru a încărca înregistrări în baza dvs. de date, puteți eficientiza procesul de adăugare de noi restaurante în directorul dvs.

pe pagina de încărcare, puteți utiliza o combinație de câmpuri de introducere pentru a mapa datele necesare pentru fiecare restaurant nou. Odată ce se face clic pe butonul Creare, acest lucru va declanșa un flux de lucru care va adăuga aceste date colective ca un nou restaurant în baza de date.

Bubble nici un cod Yelp clona tutorial șablon

atunci când construirea fluxul de lucru, vom avea nevoie pentru a crea un lucru nou, configurarea tipul de date la un restaurant.

Bubble no code Yelp clone tutorial template

veți potrivi apoi elementele relevante de pe pagina dvs. cu câmpurile de date din tipul restaurantului din Baza de date.

Bubble no code Yelp clone tutorial template

afișarea conținutului dinamic

după ce ați încărcat un catalog de restaurante, este timpul să începeți să le afișați pe o pagină orientată spre public pe care utilizatorii o pot accesa.

folosind elementul de grup repetat al Bubble, puteți afișa o listă de date dinamice din Baza de date – cum ar fi restaurantele existente.

notă: grupurile repetate sunt structurate ca format vertical în mod implicit, dar este posibilă și reconfigurarea elementului pentru a fi afișat orizontal.

înainte de a începe să adăugați conținut în grupul care se repetă, va trebui să conectați elementul la un tip de date din Baza de date. Acest lucru îl va ajuta să identifice conținutul specific pe care îl va afișa.

tipul de conținut pe care va trebui să-l afișăm este, desigur, restaurantele din baza dvs. de date.

apoi, va trebui să identificăm o sursă de date, astfel încât editorul de bule să știe ce restaurante specifice să afișeze. Pentru MVP-ul nostru, vom afișa doar o listă cu toate restaurantele actuale, dar puteți adăuga cu ușurință constrângeri la această sursă de date pentru a filtra restaurantele în funcție de oraș sau de categoriile lor de alimente.

Bubble no code Yelp clone tutorial template

după ce ați configurat corect grupul care se repetă, va trebui apoi să începeți să adăugați orice elemente de conținut dinamic pe care doriți să le afișați în fiecare celulă. În cadrul MVP-ului nostru, aceasta va include titlul unui restaurant și fotografia prezentată.

deoarece un restaurant poate avea mai multe fotografii recomandate, vom configura conținutul dinamic pentru a afișa una dintre aceste fotografii la întâmplare.

Bubble no code Yelp clone tutorial template

trimiterea datelor către pagini dinamice

cu pagina noastră de pornire afișând doar un card de previzualizare pentru fiecare restaurant, utilizatorii vor trebui să facă clic pe o pagină dedicată vitrinei pentru fiecare restaurant pentru a vizualiza conținutul și recenziile sale complete. Aceste informații suplimentare vor fi găzduite pe pagina restaurantului aplicației dvs.

din grupul nostru care se repetă, este posibil să creați evenimente pe baza acțiunilor întreprinse în fiecare rând individual. Această caracteristică va deveni utilă atunci când construiți funcții de navigație pe platforma dvs.

pentru a direcționa un utilizator de pe pagina principală către o anumită pagină de prezentare a restaurantului, va trebui să creați un flux de lucru de navigare care este declanșat atunci când se face clic pe o imagine prezentată în restaurante.

Bubble no code Yelp clone tutorial template

va trebui apoi să trimiteți date suplimentare la această pagină, permițând editorului de bule să identifice ce restaurant specific să afișeze. Datele pe care veți alege să le afișați vor fi extrase din restaurantul celulei curente.

Bubble no code Yelp clone tutorial template

afișează conținut dinamic pe pagina de previzualizare

odată ce datele au fost trimise la pagina restaurant, puteți trage cu ușurință informațiile relevante și afișa acest conținut pentru fiecare restaurant.

va trebui mai întâi să vă asigurați că tipul paginii de destinație se potrivește cu proprietatea de date pe care o trimiteți în fluxul de lucru. În acest caz, pagina restaurantului va fi configurată la o proprietate a restaurantului.

Bubble no code Yelp clone tutorial template

prin clasificarea tipului de conținut pe o pagină, Bubble poate trage cu ușurință și trimite date relevante din surse existente.

acum Puteți începe să adăugați conținut dinamic în câmpurile care afișează informații din restaurantul paginii curente.

Bubble no code Yelp clone tutorial template

căutarea conținutului

făcând un pas înapoi la pagina noastră de pornire, va trebui, de asemenea, să construim o caracteristică care să permită utilizatorilor să caute restaurante bazate pe un oraș. Acest lucru poate fi realizat prin adăugarea unui element suplimentar de introducere a textului pe care îl vom trata ca o bară de căutare.

Bubble no code Yelp clone tutorial template

de aici, vom crea un nou flux de lucru care clasifică termenul de căutare al unui utilizator, apoi trece aceste date printr-o pagină separată dedicată acestei interogări de căutare (mai multe pe această pagină în curând).

pentru a alimenta acest flux de lucru, vom crea un declanșator de eveniment care recunoaște când se modifică o valoare de intrare. Elementul va fi, desigur, câmpul de introducere a textului.

Bubble no code Yelp clone tutorial template

când trimiteți utilizatorul la pagina noastră cu rezultatele căutării, va trebui să adăugăm o interogare de căutare unică la șirul nostru URL, permițând paginii următoare să recupereze aceste date.

în loc să optăm pentru a trimite un utilizator la o anumită pagină din acest flux de lucru, vom alege să deschidem un site web extern. Acest lucru ne va permite să personalizăm calea URL între pagini.

adresa URL la care vom trimite utilizatorul va fi adresa URL de acasă a site-ului curent + adresa URL a paginii noastre cu rezultatele căutării + valoarea interogării dinamice din câmpul nostru de introducere a textului.

Bubble nici un cod Yelp clona tutorial șablon

apoi, vom termina construirea pagina noastră de rezultate de căutare dedicat în aplicația noastră. Când construim această pagină, va trebui să configurăm tipul de pagină într-un restaurant, deoarece vom dori să afișăm o listă de restaurante potrivite.

Bubble no code Yelp clone tutorial template

când proiectați această pagină, vom include mai întâi un element de grup care se repetă pentru a afișa o listă de restaurante. Spre deosebire de primul nostru grup care se repetă, va trebui să actualizăm sursa de date a acestui grup care se repetă pentru a se potrivi cu interogarea de căutare din șirul nostru URL.

începeți prin configurarea tipului de conținut pentru a fi un restaurant. Apoi, actualizați sursa de date pentru a afișa numai restaurantele care includ textul șirurilor URL în câmpul lor de oraș.

Bubble no code Yelp clone tutorial template

aceasta va afișa acum numai restaurantele care se potrivesc cu orașul din interogarea de căutare a utilizatorilor.

în continuare, pe această pagină, vom dori să actualizăm marcatorul de pe harta noastră ori de câte ori se face clic pe un titlu al restaurantelor, permițând utilizatorilor să-i vadă vizual adresa.

pentru a construi această funcție, utilizați editarea fluxului de lucru cu bule pentru a crea un eveniment personalizat care recunoaște când se face clic pe un titlu de restaurante.

Bubble nici un cod Yelp clona tutorial șablon

de aici, vom alege acțiunea pentru a afișa markeri.

Bubble no code Yelp clone tutorial template

acum, vom selecta pentru a afișa marcatorul pentru harta noastră pe pagină, configurarea sursa de date ca celulele curente Restaurante adresa.

Bubble no code Yelp clone tutorial template

caracteristica cheie finală pe care va trebui să o adăugăm la pagina noastră cu rezultatele căutării este o categorie verticală, care permite utilizatorilor să filtreze prin restaurante după categoriile de alimente pe care le servesc.

Bubble no code Yelp clone tutorial template

după ce ați configurat opțiunile pentru meniul derulant, va trebui să adăugăm o condiție grupului nostru care se repetă, permițându-i să răspundă la selecția derulantă.

logica pentru această condiție va identifica atunci când valoarea dropdowns nu este gol. Când se întâmplă acest lucru, va actualiza apoi sursa de date a grupului care se repetă.

noua sursă de date va include din nou o căutare de restaurante, adăugând aceeași condiție pentru șirul URL orașe. Vom adăuga, de asemenea, o altă constrângere, asigurându-ne că categoriile de alimente ale restaurantului conțin, de asemenea, aceeași valoare ca și selecția meniurilor derulante.

Bubble no code Yelp clone tutorial template

acum, când este selectată o categorie de alimente, acest grup repetitiv se va actualiza automat cu cele mai relevante rezultate.

ultima funcție pe care va trebui să o adăugăm la această pagină este un alt eveniment de navigare care direcționează un utilizator către pagina noastră dedicată restaurantului atunci când se face clic pe o imagine a restaurantelor.

vom reproduce același flux de lucru de navigare pe care l-am creat din grupul nostru de repetare a paginii de pornire.

Bubble no code Yelp clone tutorial template

adăugarea de recenzii la un restaurant

odată ce un utilizator a găsit un nou restaurant preferat (datorită aplicației dvs. fără cod), ar putea dori să contribuie cu o recenzie, împărtășind experiența lor cu comunitatea.

pe pagina restaurantului nostru, vom adăuga un grup repetitiv suplimentar sub informațiile restaurantului. Acest grup repetitiv va fi folosit pentru a afișa o listă a recenziilor curente ale restaurantelor.

când configurați acest grup care se repetă, tipul de date va fi setat la o recenzie, iar sursa noastră de date va extrage toate recenziile din restaurantul pagini curente.

Bubble no code Yelp clone tutorial template

de aici, vom crea un nou flux de lucru atunci când se face clic pe butonul Adăugare recenzie.

Bubble no code Yelp clone tutorial template

acest flux de lucru va redirecționa un utilizator către o pagină dedicată unde poate crea o nouă recenzie. Când trimiteți un utilizator la această pagină, vom dori, de asemenea, să transmitem datele din restaurantul pagini curente.

Bubble nici un cod yelp clona tutorial șablon

pe pagina noastră de revizuire trimite, va trebui să actualizeze tipul de pagină pentru a fi, de asemenea, un restaurant, permițându-ne pentru a trage datele restaurante curente.

Bubble no code Yelp clone tutorial template

în cele din urmă, va trebui apoi să creăm un alt flux de lucru care se declanșează odată ce se face clic pe butonul post review.

Bubble nici un cod Yelp clona tutorial șablon

acest flux de lucru va fi folosit pentru a crea un lucru nou – un nou comentariu.

Bubble no code Yelp clone tutorial template

așa cum ați făcut înainte, veți potrivi apoi elementele de pe pagină cu câmpurile de date necesare pentru a crea o revizuire validă.

odată ce a fost creată o nouă recenzie, aceasta va fi adăugată automat la grupul care se repetă din nou pe pagina restaurante.

caracteristici suplimentare

după construirea caracteristicilor de bază pentru MVP, vă veți familiariza cu procesul de creare a câmpurilor de date personalizate și de afișare a conținutului dinamic. Dacă doriți să adăugați în continuare funcții suplimentare în directorul dvs., puteți lua în considerare:

  • adăugarea unei funcții pentru ca utilizatorii să trimită fotografii la o pagină de restaurant
  • crearea de profiluri de utilizator – afișarea unei liste cu detaliile contului utilizatorilor și recenziile pe care le-au creat pe platformă

lansarea

angajarea unui dezvoltator sau a unei echipe de dezvoltatori pentru a construi această aplicație ar costa mii, dacă nu zeci de mii de dolari. Pe măsură ce lansați și creșteți în utilizatori, planurile noastre plătite vă permit să găzduiți aplicația pe propriul domeniu personalizat pentru doar 25 USD pe lună. Unele șabloane și pluginuri pot costa mai mult, dar puteți construi toate funcționalitățile unui director fără costuri suplimentare.

șabloane

dacă nu doriți să vă construiți tema de revizuire a restaurantului de la zero, puteți achiziționa unul dintre șabloanele făcute de membrii comunității noastre. Unele șabloane similare includ:

  • panza Comentarii platforma de AirDev
  • comentarii bazate pe locație de Zeroqode
  • Director & listarea de Zeroqode

începe construirea

Bubble poate ajuta să construiască un site de revizuire restaurant sau orice alt produs pe care o alegeți! Nu a fost niciodată mai ușor să construiești ceva incredibil fără a fi nevoie să codifici.

pentru a începe gratuit, înscrieți-vă aici.

de asemenea, vă puteți conecta cu alți producători pasionați care construiesc cu bule pe forumul comunității noastre.

Lasă un răspuns

Adresa ta de email nu va fi publicată.