Articles

Jak zbudować witrynę z recenzją restauracji bez kodu

jeśli szukasz idealnej restauracji lub baru, platformy takie jak Yelp, Zagat lub Zomato (Urbanspoon) mogą pomóc Ci wybrać spośród tysięcy opcji jedzenia.

jeśli jednak byłeś zainteresowany zbudowaniem własnej wersji strony z recenzjami restauracji, Bubble jest jedyną platformą, której potrzebujesz.

narzędzia bez kodu, takie jak Bubble, rewolucjonizują sposób, w jaki codzienni twórcy mogą tworzyć oprogramowanie. Potężna platforma Bubble ułatwiła niż kiedykolwiek rozpoczęcie tworzenia oprogramowania bez konieczności pisania pojedynczej linii kodu.

nasze wizualne narzędzie do programowania umożliwia szybkie zaprojektowanie i zbudowanie działającego oprogramowania, które wykracza poza statyczne doświadczenia. Twórcy używają Bubble do budowy rynków, katalogów, a nawet sieci społecznościowych.

ten post obejmie krok po kroku proces budowania witryny z recenzją restauracji bez kodu za pomocą Bubble. Niezależnie od tego, czy chcesz replikować cały produkt, czy po prostu chcesz wykorzystać niektóre z podstawowych funkcji platformy, w tym przewodniku dowiesz się, jak zbudować niezbędne przepływy pracy, aby uruchomić produkt.

kroki do budowania stylu Yelp bez kodu obejmują:

rozpocznij

aby rozpocząć, musisz zarejestrować darmowe konto Bubble.

Zarejestruj swoje konto na Bubble

jesteś nowy w Bubble? Podążaj za naszymi wprowadzającymi filmami na Crash Course, aby zapoznać się z podstawami Bubble.

zalecamy również wypełnienie naszych lekcji wprowadzających, które poprowadzą Cię przez proces krok po kroku najczęstszych funkcji Bubble. Pomoże Ci to rozpocząć pracę przy tworzeniu aplikacji do przeglądania restauracji bez kodu.

zalecamy również zrozumienie, jak tworzyć i edytować konta użytkowników. Wcześniej omówiliśmy to bardziej szczegółowo w naszych innych przewodnikach jak budować.

rozpoczynając pracę nad projektem, możesz rozpocząć od oprawy graficznej projektu produktu lub budowania niezbędnych pól w bazie danych.

w tym przewodniku zaczniemy od użycia wizualnego narzędzia do projektowania Bubble, aby ukształtować interfejs użytkownika naszego produktu. Jeśli replikujesz wersję Yelp lub Zomato, niektóre z podstawowych stron, które chcesz dołączyć, to:

  • Upload page – portal zaplecza, w którym można wgrać nowe restauracje
  • Strona główna – Wyświetlanie listy restauracji i paska wyszukiwania
  • Strona wyników wyszukiwania – Wyświetlanie listy restauracji i kategorii po wyszukaniu przez użytkownika lokalizacji
  • indywidualna strona restauracji – strona zawierająca pełne informacje o każdej restauracji
  • składanie recenzji strona – strona, na której użytkownicy mogą przesłać recenzję restauracji

główną cechą Bubble jest możliwość wysyłania danych między stronami. Pozwala to utworzyć jedną ogólną wersję strony, a następnie dynamicznie wyświetlić odpowiednią zawartość z bazy danych, gdy jest to wymagane.

w przypadku twojej witryny wystarczy utworzyć jedną stronę, aby zaprezentować poszczególne restauracje. Następnie możemy utworzyć niezbędne przepływy pracy, aby wyświetlić tylko odpowiednią restaurację na każdej stronie, gdy jest to potrzebne (omówimy to bardziej szczegółowo wkrótce).

Konfigurowanie aplikacji

po zmapowaniu wyświetlania produktu możesz skupić się na tworzeniu pól danych niezbędnych do zasilania aplikacji. Będziemy polegać na tych typach danych i polach, aby połączyć obiegi pracy związane z Twoim produktem.

wbudowana baza danych Bubble ułatwia tworzenie różnych typów danych z unikalnymi polami. Podczas budowania aplikacji typu Yelp jako MVP, będziemy musieli utworzyć następujące typy danych & pola:

typ danych: User

pola:

  • Nazwa
  • Zdjęcie
  • przesłane opinie-lista opinii. Uwaga: utworzenie pola jako listy w oparciu o osobny typ danych umożliwia bezproblemową integrację wszystkich odpowiednich pól danych. Pozwala to uniknąć konieczności ponownego tworzenia wszystkich dodatkowych pól danych
Bubble NO code Yelp clone tutorial template

typ danych: Restauracja

pola:

  • Nazwa
  • opis
  • miasto
  • Logo
  • link do strony internetowej
  • numer telefonu
  • kategorie stóp – lista
  • adres
  • Polecane zdjęcia – Lista
  • recenzje – lista opinii
Bubble NO code Yelp clone tutorial template

typ danych: Przegląd

pola:

  • Restauracja-Restauracja
Bubble NO code Yelp clone tutorial template

dodawanie restauracji do platformy

po skonfigurowaniu bazy danych możemy rozpocząć tworzenie przepływów pracy, które zasilą Twoją aplikację. Pierwsza funkcja, którą stworzymy, nie jest czymś, z czym użytkownicy będą bezpośrednio się angażować, ale raczej narzędziem zaplecza do dodawania nowych restauracji do platformy.

budując dedykowany portal do przesyłania ofert do bazy danych, możesz usprawnić proces dodawania nowych restauracji do katalogu.

na stronie przesyłania możesz użyć kombinacji pól wejściowych, aby zmapować wymagane dane dla każdej nowej restauracji. Po kliknięciu przycisku Utwórz uruchomi się przepływ pracy, który doda te zbiorcze dane jako nową restaurację w bazie danych.

Bubble no code Yelp clone tutorial template

podczas budowania przepływu pracy musimy utworzyć nową rzecz, konfigurując typ danych do restauracji.

Bubble no code Yelp clone tutorial template

następnie dopasujesz odpowiednie elementy na stronie do pól danych pod typem restauracji w bazie danych.

Bubble no code Yelp clone tutorial template

wyświetlanie dynamicznej zawartości

po przesłaniu katalogu restauracji nadszedł czas, aby rozpocząć wyświetlanie ich na publicznej stronie, do której użytkownicy mogą uzyskać dostęp.

używając powtarzającego się elementu grupy Bubble, możesz wyświetlić listę dynamicznych danych z bazy danych-takich jak istniejące restauracje.

Uwaga: powtarzające się grupy są domyślnie ustawione jako format pionowy, ale możliwe jest również ponowne skonfigurowanie elementu tak, aby był wyświetlany w poziomie.

zanim zaczniesz dodawać zawartość do powtarzalnej grupy, musisz połączyć element z typem danych w bazie danych. Pomoże to zidentyfikować konkretną zawartość, którą będzie wyświetlać.

rodzaj treści, które będziemy musieli wyświetlić, to oczywiście restauracje w Twojej bazie danych.

następnie musimy zidentyfikować źródło danych, aby edytor bąbelków wiedział, które konkretne restauracje wyświetlić. W przypadku naszego MVP wyświetlimy tylko listę wszystkich aktualnych restauracji, ale możesz łatwo dodać ograniczenia do tego źródła danych, aby filtrować restauracje według ich miast lub kategorii żywności.

Bubble no code Yelp clone tutorial template

po prawidłowej konfiguracji powtarzającej się grupy musisz zacząć dodawać dowolne dynamiczne elementy zawartości, które chcesz wyświetlić w każdej komórce. W naszym MVP będzie to tytuł restauracji i Polecane zdjęcie.

ponieważ Restauracja może mieć wiele polecanych zdjęć, skonfigurujemy zawartość dynamiczną tak, aby wyświetlała jedno z tych zdjęć losowo.

Bubble no code Yelp clone tutorial template

wysyłanie danych do dynamicznych stron

nasza strona główna wyświetla tylko kartę podglądu dla każdej restauracji, użytkownicy będą musieli przejść do dedykowanej strony prezentacji dla każdej restauracji, aby zobaczyć jej pełną treść i recenzje. Te dodatkowe informacje zostaną umieszczone na stronie restauracji Twojej aplikacji.

z naszej powtarzalnej grupy można tworzyć zdarzenia na podstawie działań podejmowanych w każdym wierszu. Ta funkcja będzie przydatna podczas tworzenia funkcji nawigacyjnych na całej platformie.

aby przekierować użytkownika ze strony głównej na konkretną stronę prezentacji restauracji, musisz zbudować nawigacyjny obieg pracy, który jest uruchamiany po kliknięciu polecanego obrazu restauracji.

Bubble no code Yelp clone tutorial template

następnie musisz wysłać dodatkowe dane na tę stronę, umożliwiając edytorowi bąbelków zidentyfikowanie konkretnej restauracji do wyświetlenia. Dane, które wybierzesz do wyświetlenia, zostaną pobrane z restauracji bieżącej komórki.

Bubble no code Yelp clone tutorial template

wyświetl dynamiczną zawartość na stronie podglądu

po wysłaniu danych na stronę restauracji możesz łatwo pobrać odpowiednie informacje i wyświetlić tę zawartość dla każdej restauracji.

najpierw musisz upewnić się, że typ strony docelowej pasuje do właściwości danych wysyłanych w ramach obiegu pracy. W takim przypadku strona restauracji zostanie skonfigurowana do właściwości restauracji.

Bubble no code Yelp clone tutorial template

klasyfikując rodzaj treści na stronie, Bubble może łatwo pobrać i wysłać odpowiednie dane z istniejących źródeł.

możesz teraz zacząć dodawać dynamiczną zawartość do pól wyświetlających informacje z restauracji bieżącej strony.

Bubble no code Yelp clone tutorial template

wyszukiwanie treści

wracając do naszej strony głównej, będziemy również musieli zbudować funkcję, która pozwala użytkownikom wyszukiwać restauracje w oparciu o miasto. Można to osiągnąć, dodając dodatkowy element wprowadzania tekstu, który traktujemy jako pasek wyszukiwania.

Bubble no code Yelp clone tutorial template

stąd utworzymy nowy obieg pracy, który klasyfikuje wyszukiwany termin użytkownika, a następnie przekażemy te dane do osobnej strony poświęconej temu zapytaniu (więcej na tej stronie wkrótce).

aby zasilać ten obieg pracy, utworzymy WYZWALACZ zdarzenia, który rozpozna, kiedy wartość wejściowa zostanie zmieniona. Elementem będzie oczywiście pole tekstowe.

Bubble NO code Yelp clone tutorial template

wysyłając użytkownika na naszą stronę wyników wyszukiwania, musimy dodać unikalne zapytanie do naszego ciągu URL, umożliwiając następującej stronie odzyskanie tych danych.

zamiast wysyłać użytkownika na określoną stronę w tym obiegu pracy, wybierzemy otwarcie zewnętrznej witryny. Pozwoli nam to dostosować ścieżkę URL między stronami.

adres URL, na który będziemy wysyłać użytkownika, będzie adresem głównym bieżącej witryny + adresem URL naszej strony wyników wyszukiwania + dynamiczną wartością zapytania z naszego pola tekstowego.

Bubble NO code Yelp clone tutorial template

następnie zakończymy budowanie naszej dedykowanej strony wyników wyszukiwania w naszej aplikacji. Podczas tworzenia tej strony musimy skonfigurować typ strony dla restauracji, ponieważ będziemy chcieli wyświetlić listę pasujących restauracji.

Bubble no code Yelp clone tutorial template

podczas projektowania tej strony, najpierw dodamy powtarzający się element grupy, aby wyświetlić listę restauracji. W przeciwieństwie do naszej pierwszej powtarzającej się grupy, będziemy musieli zaktualizować źródło danych tej powtarzającej się grupy, aby dopasować zapytanie z naszego ciągu URL.

zacznij od skonfigurowania typu zawartości jako restauracja. Następnie zaktualizuj źródło danych, aby wyświetlić tylko restauracje, które zawierają tekst naszego adresu URL w polu miasta.

Bubble no code Yelp clone tutorial template

to teraz wyświetli tylko restauracje, które pasują do miasta z zapytania wyszukiwania użytkowników.

następnie na tej stronie będziemy chcieli zaktualizować znacznik na naszej mapie za każdym razem, gdy klikniemy tytuł restauracji, umożliwiając użytkownikom wizualne zobaczenie jego adresu.

aby utworzyć tę funkcję, użyj funkcji Edycja przepływu pracy w bańce, aby utworzyć niestandardowe zdarzenie, które rozpoznaje kliknięcie tytułu restauracji.

Bubble no code Yelp clone tutorial template

stąd wybierzemy akcję do wyświetlania znaczników.

Bubble no code Yelp clone tutorial template

teraz wybierzemy, aby wyświetlić znacznik naszej mapy na stronie, konfigurując jej źródło danych jako adres bieżącej komórki.

Bubble no code Yelp clone tutorial template

ostatnią kluczową funkcją, którą musimy dodać do naszej strony wyników wyszukiwania, jest rozwijana Kategoria, pozwalająca użytkownikom filtrować restauracje według kategorii serwowanych potraw.

Bubble no code Yelp clone tutorial template

po skonfigurowaniu opcji rozwijanego menu, będziemy musieli dodać warunek do naszej powtarzającej się grupy, pozwalając jej reagować na wybór rozwijanego menu.

logika tego warunku określi, kiedy wartość rozwijana nie jest pusta. Gdy to nastąpi, zaktualizuje źródło danych powtarzającej się grupy.

nowe źródło danych będzie ponownie zawierać wyszukiwanie restauracji, dodając ten sam warunek dla ciągu adresów URL miast. Dodamy również inne ograniczenie, dzięki któremu kategorie potraw restauracji będą zawierać tę samą wartość, co menu rozwijane.

Bubble no code Yelp clone tutorial template

teraz, gdy wybrana jest kategoria żywności, ta powtarzająca się grupa automatycznie zaktualizuje się z najbardziej odpowiednimi wynikami.

ostatnia funkcja, którą musimy dodać do tej strony, to kolejne zdarzenie nawigacyjne, które kieruje użytkownika do naszej dedykowanej strony restauracji po kliknięciu obrazu restauracji.

powtórzymy ten sam przepływ pracy nawigacji, który stworzyliśmy z naszej grupy powtarzania strony głównej.

szablon tutoriala Bubble no code Yelp clone

dodawanie recenzji do restauracji

gdy użytkownik znajdzie nową ulubioną restaurację (dzięki aplikacji bez kodu), może chcieć dodać recenzję, dzieląc się swoim doświadczeniem ze społecznością.

na naszej stronie restauracji dodamy dodatkową powtarzalną grupę poniżej informacji o restauracji. Ta powtarzalna grupa będzie używana do wyświetlania listy aktualnych recenzji restauracji.

podczas konfigurowania tej powtarzalnej grupy, typ danych zostanie ustawiony na recenzję, a nasze źródło danych pobierze wszystkie recenzje z bieżącej restauracji stron.

Bubble no code Yelp clone tutorial template

stąd utworzymy nowy przepływ pracy po kliknięciu przycisku Dodaj recenzję.

Bubble no code Yelp clone tutorial template

ten przepływ pracy przekieruje użytkownika na dedykowaną stronę, na której może utworzyć nową recenzję. Wysyłając użytkownika na tę stronę, będziemy również chcieli przekazać dane z bieżącej restauracji stron.

Bubble no code Yelp clone tutorial template

na naszej stronie prześlij recenzję, będziemy musieli zaktualizować typ strony, aby być również restauracją, co pozwala nam pobrać bieżące dane restauracji.

Bubble no code Yelp clone tutorial template

wreszcie, będziemy musieli utworzyć kolejny przepływ pracy, który uruchamia się po kliknięciu przycisku Dodaj recenzję.

Bubble no code Yelp clone tutorial template

ten przepływ pracy zostanie użyty do utworzenia nowej rzeczy – nowej recenzji.

Bubble no code Yelp clone tutorial template

tak jak wcześniej, dopasujesz elementy na stronie z niezbędnymi polami danych, aby utworzyć poprawną recenzję.

po utworzeniu nowej recenzji zostanie ona automatycznie dodana do powtarzającej się grupy na stronie restauracji.

dodatkowe funkcje

po zbudowaniu podstawowych funkcji MVP, zapoznasz się z procesem tworzenia niestandardowych pól danych i wyświetlania dynamicznej zawartości. Jeśli chcesz nadal dodawać dodatkowe funkcje do katalogu, możesz rozważyć:

  • dodanie funkcji umożliwiającej użytkownikom przesyłanie zdjęć na stronę restauracji
  • tworzenie profili użytkowników – Wyświetlanie listy szczegółów konta użytkowników i opinii, które są tworzone na całej platformie

uruchomienie

zatrudnienie programisty lub zespołu programistów do zbudowania tej aplikacji kosztowałoby tysiące, jeśli nie dziesiątki tysięcy dolarów. Wraz z uruchomieniem i wzrostem liczby użytkowników nasze płatne plany umożliwiają hostowanie aplikacji na własnej domenie za jedyne 25 USD miesięcznie. Niektóre szablony i wtyczki mogą kosztować więcej, ale możesz zbudować całą funkcjonalność katalogu bez żadnych dodatkowych kosztów.

Szablony

jeśli nie chcesz budować motywu recenzji restauracji od zera, możesz kupić jeden z szablonów wykonanych przez naszych członków społeczności. Niektóre podobne szablony obejmują:

  • Canvas Reviews Platform by AirDev
  • Location Based Reviews by Zeroqode
  • Directory& Listing by Zeroqode

Start Building

Bubble może pomóc ci zbudować witrynę z recenzjami restauracji lub dowolny inny produkt, który wybierzesz! Zbudowanie czegoś niesamowitego nigdy nie było łatwiejsze bez konieczności kodowania.

aby zacząć za darmo, zarejestruj się tutaj.

możesz również połączyć się z innymi pasjonatami budowania z Bubble na naszym forum społeczności.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.