MVP aplikacji w rekordowym czasie z Bubble: Wyświetlamy wyniki na stronie search
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Witam Cię w kolejnej lekcji, w której nadal kontynuujemy pracę z
naszą wyszukiwarką na stronie.
Efektem działań z poprzedniej lekcji jest już tutaj funkcjonalna wyszukiwarka na
stronie Index nowej, co oznacza, że nasz użytkownik może
tutaj wybrać jakąś lokalizację np.
Nowy Jork, podać tutaj daty zakresu pobytu, liczba gości, kliknąć Search i tym
samym zostanie przekierowany na stronę.
Tutaj Search A dodatkowo tutaj do naszych parametrów
przekazaliśmy te wszystkie informacje jakie podał na stronie index owej.
Natomiast teraz naszym zadaniem będzie odpowiednio pobrać te parametry i
dostosować zarówno wygląd naszej strony search przede wszystkim tej wyszukiwarki
w tym miejscu, a także odpowiednio sobie teraz zawęzić tą listę wyników.
To co ja zrobiłem w międzyczasie to jak widzisz tutaj pozmieniałem
rekordy na Nowy Jork.
Mianowicie przeszedłem do naszej bazy danych.
Tutaj namierzyłem listing, a w zasadzie wyszukałem wszystkie listing,
które wystawiła Sara Mitchell.
Ponieważ jak pamiętasz w jednej z poprzedniej lekcji tworzyliśmy booking
właśnie do jej listingu.
Dlatego też zmieniłem tutaj wszędzie miasto na Nowy Jork, aby po prostu łatwo
było nam wyszukać je i potem zawężać.
Właśnie zgodnie z filtrami i dodatkowymi kryteriami.
A więc dam Ci teraz chwilę czasu, abyś sobie namierzył te listing, gdzie
masz jak najwięcej bookingu dodanych.
I proszę ustaw tam chwilowo City na jakieś jedno i to samo miasto.
To niekoniecznie musi być Nowy Jork.
Możesz wybrać dowolne.
To już zależy od Ciebie.
OK, mam nadzieję, że to już jest gotowe.
A więc możemy wrócić do designu strony search i teraz zacząć
dostosowywać te rekordy.
Przede wszystkim przejdźmy tutaj do grupy Results.
Jak?
Mamy tutaj wyszukiwanie po listingu i chwilowo mam tylko te,
które właśnie należą.
Jak zobaczysz tutaj do Sary Mitchell, a więc pozbywamy się tego train.
Na razie wyszukujemy po prostu wszystkie listing.
Ustawmy sobie to w ten sposób.
Po prostu mieszamy wszystkie listing.
Zaraz będziemy to odpowiednio zawężać.
Przejdźmy. Odświeżamy.
OK, wygląda na to, że pojawiają się wszystkie, a więc możemy
przystąpić do dalszego działania.
Pierwszym krokiem będzie tutaj dostosowanie właśnie tego bara, aby
odpowiednio wyciągał nam informacje z parametrów URL i przekazywał je
właśnie zarówno tutaj.
Tu mamy, jak pamiętasz, same teksty, ale tutaj jest już po prostu ten sam
element Where, z którego korzystamy na stronie głównej.
A więc wracamy do edytora.
Przechodzimy do baru, czyli elementu rel i tutaj szukamy nie w menu.
Tu tylko musimy tu namierzyć element Search.
Jest to, o ile pamiętam, chyba grupa Advanced Search Group.
Nie, jeszcze nie. To jeszcze nie ten element.
Mamy tutaj właśnie Search Group i tu dopiero mamy.
To są.
To jest ten element, który nas interesuje, czyli nosi on nazwę, przynajmniej
u mnie na Search Results Group.
I teraz tutaj mogę wyciągać odpowiednie informacje.
A więc zamiast tych pisanych tutaj z palca na sztywno odnosimy się do parametrów
URL i wyciągamy właściwe dane.
W tym przypadku będzie to Location Type to oczywiście Geographic Address.
W ten sposób Babel zapewni nam odpowiednie funkcjonalności dla takiego parametru.
Czyli możemy sobie tutaj wybrać Extract i City.
Tylko to tutaj pokazujemy.
Kolejno mamy tutaj Pekin i check out, a więc odnosimy się znów do
właściwych parametrów, czyli URL.
Parametr check in W tym przypadku jest to oczywiście date.
I tak sformatowany jako.
W moim przypadku, żeby to pasowało do poprzedniego layoutu.
będzie to taka forma czyli mp3 razy em i dwa razy D chce wyświetlać tylko miesiąc
w skróconej wersji oraz numer dnia.
To mi się tu zgadza.
Mogę sobie skopiować tą część, zaznaczyć ten tekst,
wybrać Insert Dynamic option i teraz wkleić i oczywiście odnieść się
teraz do parametru checkout.
I ostatnia informacja tutaj w tym elemencie to liczba gości.
Znów odnosimy się do parametru URL.
W tym przypadku będzie to s listing numbers, a parametr nosi nazwę get number.
Oczywiście tutaj będzie display.
OK, skoro tą część mamy gotową, to jeszcze dopasujemy ten element Search here.
Możemy do niego przejść właśnie z tego miejsca poprzez Edit Element.
I znów będziemy musieli tu przekazać niemal dokładnie te same wartości.
Czyli jako default value odnosimy się do parametru location.
Jeżeli go nie będzie w pasku adresu, to tutaj nic nie zostanie wstawione.
Mam nadzieję, że rozumiesz jak to działa.
Grafik Adres location.
Tu z kolei oczywiście odnosimy się do Initial Start Date i Initial end date.
Czyli niemal to samo, co robiliśmy na stronie listingu.
URL.
DAT.
I parametr check in.
Mogę sobie to skopiować i wkleić tutaj.
Tylko zmienić nazwę parametru na checkout.
I jeszcze tutaj ustawić default value.
Będzie to gest number.
I w tym przypadku oczywiście Other listing.
Jest to jak widzisz dosyć żmudna praca, ale niestety musimy ją wykonać.
Klikamy Close.
Teraz możemy przejść na stronę Search, bo tam będziemy kontynuować naszą pracę,
ale zerknijmy jeszcze do podglądu.
I teraz powinno nam się to odpowiednio poustawiać.
Wskoczył nam Nowy Jork, wskoczył nam odpowiedni przedział,
wskoczyła nam liczba gości i po otwarciu jak widzisz
uzupełnia się to w tym miejscu.
Dodatkowo mogę sobie teraz to zmienić klikając search.
Będę zmieniał te parametry.
Czyli będę znów przechodził na stronę search i tylko przekazywał właśnie te
nowe parametry, które tutaj teraz podałem.
A więc klikam Search.
Mogę to zamknąć?
Jak widzisz mi się to odpowiednio zastosowało.
Oczywiście jako pracę domową zadaję Ci, jeśli tylko będziesz chciał,
zastosowanie tutaj tego guzika w taki sposób, aby właśnie
jeżeli tutaj coś zmienię będąc na stronie search klikając ten guzik to mi się tutaj
zamykało i pojawiał mi się tylko ten domyślny, a w zasadzie zmniejszony
wygląd naszej wyszukiwarki.
W pierwszym sprincie pokazywałem Ci jak to zrobić za pomocą właśnie takich custom
state ów globalnych i tu oczywiście będziesz musiał wykorzystać, a jak mówię
jest to praca domowa tylko dla chętnych.
Jeżeli chcesz to pozostawić w takiej wersji jak jest, musimy po prostu
kliknąć tutaj w to miejsce.
To nic nie stoi na przeszkodzie, żebyś właśnie tak dalej działali.
Skoro mamy już gotowe, czyli zadbaliśmy o nasz bar,
zadbaliśmy o to, aby przynajmniej do kilku listingu dodać to samo miasto, czyli w
moim przypadku jest to po prostu Nowy Jork, to może przystąpimy do
dalszych działań na naszej stronie.
W pierwszej kolejności chciałbym dodać tutaj workflow do grupy Beck i kierować
użytkownika z powrotem na stronę indeksowania.
Super proste zadanie zajmie nam tylko chwilę,
a użytkownikowi ułatwi poruszanie się w naszym serwisie, czyli
Navigation Page Index. I to wszystko.
OK, skoro to mamy gotowe, to teraz przystąpimy do edycji grupy
Results Scripting Group.
I tutaj dodajmy sobie odpowiednie kontrakty odnoszące się do
parametrów jakie przekazaliśmy.
Natomiast w tej lekcji jeszcze nie będę się skupiał na datach.
Do tego wrócimy trochę później, ponieważ w przypadku dat, jak sam zobaczysz
będziemy mieć dosyć sporo komplikacji.
Dlatego też w pierwszej kolejności chciałbym się odnieść tutaj tylko do
parametru site oraz number.
Czyli wybieram sobie CT i mówię tu jest taki trochę dziwny zapis,
ponieważ w przypadku grafik adres mamy tutaj kilka opcji.
Czyli możemy sobie wybrać, że miasto z takiego listingu jest w zakresie.
Tutaj podajesz ile kilometrów albo ile mil.
Powiedzmy, że w obrębie 50.
Czyli wpisuję po prostu ręcznie 50 kilometrów od.
Tutaj się odnoszę. URL a dlaczego location?
Oczywiście odpowiedni type.
I tutaj wyciągam też Citi.
Czyli miasto zdefiniowane w listingu.
Powinno być w okręgu 50 km od tego miasta, które wybrał sobie
użytkownik w polu Location w naszym elemencie serwera.
Jak widzisz w tym przypadku na Geographic Address mamy kilka naprawdę
bardzo fajnych opcji.
Możemy sobie właśnie zdefiniować taki radius, czyli promień,
w którym wyszukujemy nasze rekordy.
Dodatkowo ja tutaj te 50 km wpisałem na sztywno, ale oczywiście ta wartość może
być dynamiczna i często właśnie na takich stronach typu Airbnb spotkasz się np.
z takim drop downem, które pozwoli Ci wybrać jakiś radius np.
5, 10, 15, 20 km itd.
A więc skoro pierwszy kontakt mamy z głowy, to dodajmy drugi.
W tym przypadku odnosimy się do Geass Number i mówimy, że ta wartość
ma być mniejsza bądź równa.
I wyciągamy ten parametr z URL a.
Jeżeli tu wybierzemy listing numbers i wpiszemy po prostu nazwę parametru,
to już nie będziemy musieli tego zamieniać na numery.
Nie mamy tutaj żadnego błędu.
Babel sam sobie odpowiednio poradzi z tym, aby porównać te dwie wartości.
Jeżeli wykryje tam wartości numeryczne, to po prostu zamieni je na number.
Zrobi to sama za nas, a my nie musimy tutaj dodawać nic więcej.
A więc klikam Close.
I teraz zerknijmy, czy rzeczywiście to zadziała.
Nadal mamy te parametry, które zdefiniowaliśmy tutaj,
czyli miasto oraz liczba gości i teraz ta lista powinna nam się odpowiednio zawęzić.
Odświeżamy.
I wygląda na to, że jest OK.
Pojawiają się tylko rekordy dotyczące Nowego Jorku.
Ale zmieńmy liczbę gości.
Zerknijmy, czy to się zgadza. Tu mamy trzech.
Tu mamy jednego. OK, to jest mniejsza bądź równe 4.
Dodajmy tutaj maksymalną wartość, czyli 8.
Klikamy Search.
Jak widzisz, to zadziałało.
Tu jest 7. W Mordorze może być powyżej 8.
Czyli te warunki tutaj odpowiednio zadziałały.
Grupa BIK też powinna działać, ale nie będę tego sprawdzał.
Mam nadzieję, że wierzysz mi na słowo.
Natomiast to co chciałbym teraz zrobić, to oczywiście dodać tutaj kolejny filtr
z możliwością wybrania tej kategorii.
Natomiast zastanówmy się jak do tego podejść.
Ponieważ te kategorie wyświetlamy bezpośrednio na stronie Search.
Nie jest to żaden element.
Dodatkowo tak naprawdę wykorzystujemy te kategorie tylko w tym widoku sklepowym.
Jeżeli zerkniesz na widok mobilny to po prostu całkowicie ukrywamy
ten element i nie dajemy tym samym użytkownikowi możliwości
zmiany tej kategorii.
Myślę, że akurat dla tego przykładu możemy wykorzystać Custom State.
Jak to zrobić?
Przechodzimy tutaj całą tą Scripting Group Categories RG i
dodajmy tutaj Custom State jako nazwę po prostu Current Category.
I Type to oczywiście Category, czyli Nasz Data Type.
Klikamy Create i teraz to co będę chciał zrobić, to dodać
tutaj przede wszystkim odpowiednie workflow, a także Condition.
Ale zacznijmy może od tych prostszych, czyli od condition.
I tutaj dla Your Search przechodzę sobie do ikonki i mówię, że jeśli.
Event kategorii, czyli ten custom state dla naszej repeat
grupy jest równy, w tym przypadku tutaj będzie empty, czyli jest pusty i z empty.
To wtedy właśnie chcę tutaj zmieniać kolor tej ikonki.
Kopiuję to wyrażenie i to samo dodaję tutaj dla tego tekstu.
I zmieniam tutaj oczywiście font kolor.
Czyli domyślnie jeżeli użytkownik nie wybrał żadnej kategorii, to
właśnie poprzez ten kolor Primary 600 oznaczymy tą grupę Your Search.
Teraz mogę przejść do naszej grupy i do tych ikonek w środku.
I tu mamy stan ofert, ale mogę sobie dodać jeszcze 2.
Czyli wybieram sobie OR.
Odnoszę się do Custom Status.
Ma być on równy Parent Group. Category.
Wtedy właśnie tutaj również zmieniam ten kolor.
Kopiuję sobie to wyrażenie.
Dodaję je do tekstu.
Teraz pozostaje nam oczywiście dodać tutaj jeszcze odpowiednie workflow
dla całej tej grupy.
Category z naszej repeat grupy.
Dodajemy workflow tu oczywiście, jak się domyślasz, po prostu zmieniamy state.
Nic to.
Categories Repeat Group Current Category Karen Sell Category.
Pozostaje nam jeszcze dodanie Custom status dla tej grupy Your Search.
Tutaj zadanie jest proste, ponieważ po prostu tylko ten state
mogę sobie skopiować, wkleić tutaj i tym razem po prostu clear expression.
Tutaj nic nie przekazujemy.
Zerknijmy czy to będzie działało.
Nie mamy zdefiniowanego żadnego custom state, więc to się zgadza.
Jeżeli kliknę sobie tutaj, to jak widzisz odpowiednio mi się te grupy zaznaczają.
A my oczywiście musimy zadbać o to, aby przekazać tą wybraną kategorię do
kont screen dla naszego listingu.
A więc wracamy.
Przechodzimy tutaj Search for Listing i dodajemy kolejny trainee.
W tym przypadku musimy zaznaczyć tą opcję, ponieważ ta
kategoria na dzień dobry może być pusta.
I teraz dopiero odnosimy się do kategorii.
Ona ma być równa.
kategorii Scripting Group, Current Category.
To wszystko, co musieliśmy zrobić.
Wracamy, odświeżamy.
Domyślnie nie mamy wybranej żadnej, ale jeżeli wybiorę np.
B to już pojawia mi się Mordor.
Jeżeli wybiorę najgorsze, to nie mamy tutaj zdefiniowanej żadnej.
Oczywiście w takim przypadku powinniśmy zadbać o to,
aby wyświetlać tutaj użytkownikowi jakieś powiadomienia, czyli ukrywać zarówno
mapkę, a dodać tutaj po prostu jakiś element z informacją
no results lub coś takiego.
Ja oczywiście to zadanie pozostawiam Tobie.
Nie będę się na tym skupiał, ponieważ jest ono mega proste i myślę, że sobie
z nim w zupełności poradzisz.
Condition L, który tutaj zastosować to odniesienie właśnie do tej repeat grupy.
Jeżeli listing, a w zasadzie ilość takich listingu wyświetlanych w Rising grupie
jest równe 0, to wtedy właśnie chcesz wyświetlać taki element z informacją,
że nie znaleziono żadnych wyników.
OK, lubimy kategorie i to co jeszcze musimy dodać, a w zasadzie poprawić.
To tutaj liczba takich rekordów.
Miasto, które będziemy wyciągać sobie stąd, czyli z naszego URL a,
a także nanieść te rekordy, które zostały naniesione na naszą mapkę.