MVP aplikacji w rekordowym czasie z Bubble: Zmiany na stronie listing i bookowanie pobytu
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?
Głównym zadaniem w tej lekcji będzie wdrożenie logiki do obsługi
blokowania pobytu w naszym serwisie.
Natomiast zanim do tego przejdziemy, będziemy musieli jeszcze
wdrożyć kilka drobnych poprawek.
Mam również nadzieję, że dostosowanie strony listingu do
nowego Data Type Listing nie sprawiło Ci najmniejszego problemu.
Jeszcze zaraz przejdę przez tą stronę i pokażę Ci w jaki sposób ja to rozwiązałem.
Natomiast tutaj jak widzisz, jesteśmy na razie na elemencie listing.
Teraz chciałbym wdrożyć dwie drobne poprawki.
Przede wszystkim zdecydowałem się tutaj przy adresie na wyświetlanie go właśnie w
takim formacie, czyli City a z formatem Address.
Dużo fajniej to wygląda.
Dodatkowo tutaj chciałbym dodać nieco większy odstęp,
czyli jedną spację z jednej strony i drugą spację.
Z drugiej strony to w zasadzie jedyne poprawki, jakie chciałem tutaj dodać.
A teraz wróćmy do strony listingu i przejdźmy sobie razem
przez to, co udało mi się zrobić.
Przede wszystkim zastosowałem dosyć hybrydowe podejście, ponieważ w wielu
miejscach mieliśmy właśnie ten łańcuszek, czyli przekazywanie parametrów do coraz
bardziej zagnieżdżonych grup i w takim przypadku rzeczywiście
starałem się go zachować.
Z tego prostego powodu, że dużo łatwiej je zmienić Mi na przykład właśnie
other listing na listing.
Wtedy Babel sam sobie tutaj potrafi zmienić to na parent Group listing,
zamiast po prostu usuwać obie te wartości.
A więc zacznijmy od początku.
Jak widzisz, wywaliłem tutaj grupę Beck z tego prostego powodu, że po prostu
wszystkie nasze listing ie będziemy otwierać w nowej karcie, a więc ta grupa
nie ma tutaj znaczenia, jest niepotrzebna.
Dodatkowo idąc tutaj od góry zerknijmy sobie na razie na page wrapper.
Tutaj wywaliłem typowy content.
Usunąłem go z tego miejsca, natomiast poddawałem go.
Jak widzisz tutaj do tych głównych grup, czyli do tych w środku.
Tutaj wszędzie ustawiłem właśnie listing current page listing i jeżeli gdzieś było
dalej to zagnieżdżone, to starałem się właśnie to przekazywać.
Tak jak widzisz tutaj mamy Parent Group listing.
Zaraz sobie też do tego przejdziemy.
Może zresztą właśnie od razu sprawdzajmy jak to tutaj wygląda.
Tu mamy tylko property type display i typeof place.
Oczywiście Listing Name City jako sformatowany adres.
Tu mieliśmy zdjęcia.
Jak pamiętasz wyświetlamy tę fotografia.
Myślę, że z tym sobie poradziłeś.
Po prostu odniosłeś się do listingu, wyświetliło się właściwe fotografie.
Natomiast mieliśmy tutaj również ten przycisk, który otwierał nasz popup,
przez co i my właśnie w ten sposób i tutaj trzeba było wprowadzić
kilka drobnych poprawek.
Jeżeli zamieniłeś to na listing.
Przejdźmy do Workflow do Gallery i mamy tutaj.
O właśnie.
zmieńmy to na Blue.
Jedyne co trzeba było tutaj zrobić, to odnieść się tym razem do listingu
Image Main, który był ustawiony jako stat oraz do Image main.
Mark White Disk Group Listing images List.
Czyli zamiast auth listing.
Wszędzie tutaj odnosiliśmy się właśnie do listingu z naszej głównej strony.
Więc myślę, że tutaj nie miałeś najmniejszych problemów.
Po prostu trzeba było zamienić to odwołanie do listingu,
a potem już przekazywaliśmy.
Nic nie przekazywaliśmy, tylko otwieraliśmy po prostu galerię Popup.
Natomiast w samym tym popie chciałbym, żebyś zobaczył,
jak ja to sobie rozwiązałem.
Otwórzmy go tutaj i przejdźmy do niego na całego.
Ustawiłem najpierw content na listing na Current Page Listing.
Możemy się odwoływać bezpośrednio na Parent page.
Natomiast w środku mamy tag header, który rzeczywiście wyświetlał nam listing name.
No i tutaj warto było ustawić w content listing, aby bezproblemowo
właśnie wyciągnąć tą wartość.
Dla contentu praktycznie nie musieliśmy nic ustawiać.
Wcześniej też tego nie robiliśmy.
Z tego prostego powodu, że elementy w środku odwołują się do strita,
a nie do właśnie tutaj listingu.
Natomiast jeżeli zerkniesz sobie na footer, to tak naprawdę nie wyświetla
informacji o listingu, a o hoście.
Dlatego też możemy zastosować takie podejście, z którego
jeszcze nie korzystaliśmy.
A ja bardzo Cię zachęcam, żebyś właśnie tak robił.
Jak widzisz tutaj zamiast listing ustawiłem user.
Czyli wyciągam te informacje, które tak naprawdę w środku mi są
najbardziej potrzebne.
Nie tyle listing, co informacje o user.
A takim userem w tym przypadku jest po prostu Parent Group Listing Host.
Dodatkowo tutaj utworzyłem sobie prosty user element, ponieważ ta
ta część tutaj gdzie mamy obrazek, imię i nazwisko hosta z tym oznaczeniem oraz
tekstem Professional Host pojawia się również tutaj.
Just Label Element już pracowaliśmy, więc jeżeli tego nie zrobiłeś, to zachęcam Cię
do tego, abyś stworzył ich jak najwięcej w tych miejscach, gdzie rzeczywiście
widzisz, że jakieś elementy się powtarzają.
Tą część pozostawiamy na razie bez żadnego typeof content.
Oczywiście do RIF jeszcze wrócimy.
Zamknijmy ten gallery pop up.
Just pop up.
Tutaj z kolei, jak widzisz, również dla całego pop up
ustawiłem listing Current page listing.
Natomiast tutaj nic na razie nie zmieniałem
oprócz właśnie header cie, tylko wyciągaliśmy sobie listing name.
Podobnie zresztą jak w gallery pop up.
Oczywiście do reviews jeszcze wrócimy.
Mamy tutaj całą masę błędów, która się teraz generuje właśnie przez te
condition, ale gdzieś dla Riff poustawiane pewnie tutaj na repeat thing,
grupę czy gdziekolwiek indziej.
Natomiast mi się na razie nie przejmujemy.
Olewamy te wszystkie issues.
Ja jeszcze sobie jak widzisz tutaj mamy jakieś filtrowanie,
które pewnie dotyczy listingu, ale tak jak mówię, na razie tym się nie przejmujemy.
Niech też sobie tam wiszą, będziemy je sobie w miarę naszych postępów
prac nad serwisem rozwiązywać.
OK.
Tutaj myślę, że już nie powinieneś mieć żadnych problemów, jeżeli chodzi właśnie o
tą część tutaj zamkniętą w grupie tu kolumn Group.
Mamy tutaj kontent. content.
Tutaj, jak widzisz przekazuje coraz głębiej ten listing i odnoszę
się do poszczególnych elementów.
Ficzer to po prostu odwołanie do other listing features, ale tym razem nie
odwołujemy się do wszystkich tych elementów z naszego setu, a jedynie do
tych, które mamy właśnie przypisane tutaj w kolumnie Features.
Analogicznie robimy oczywiście tutaj dla menu Cities oraz dla Rules.
Ja po prostu skopiowałem sobie grupę Mantis i dodałem tutaj
jeszcze grupę Rules.
I tym razem jak widzisz tutaj odnoszę się do Current Page Listing Rules.
Tutaj jak widzisz już sobie tego nie zagnieżdża, ponieważ wcześniej nie
mieliśmy tego zagnieżdżenia dla tych grup.
Dlatego odwołuje się bezpośrednio do Page Listing.
Pamiętaj, w Babel ten sam efekt można osiągnąć na kilka różnych sposobów.
Jeżeli zrobiłeś to poprzez zagnieżdżenia albo wszędzie odnosiły się właśnie na
event page listing, to nie ma najmniejszego problemu.
Pod warunkiem, że osiągniesz dokładnie taki sam efekt, jaki ja osiągnąłem.
Czy zrobiłeś to w ten sposób, czy inny, to już wszystko zależy od Twoich
upodobań i stylu pracy.
W przypadku Location u odnosimy się oczywiście do Listing City, tak żeby ta
mapka nam się fajnie tutaj wyświetlała.
Tutaj dla tej repeat grupy przekazałem po prostu set of listing.
Na razie bez żadnych ograniczeń, tak żeby nam się tutaj to
zgadzało i nie sypało błędami.
Więc skoro tą główną część mamy ogarniętą, to teraz pozostaje nam jeszcze
wprowadzenie kilku bardzo ważnych poprawek.
Tutaj do Acid, zanim ogólnie będziemy mogli przystąpić do obsługi bookingu.
Natomiast zanim to zrobimy to zastanówmy się jak my w zasadzie trafiamy
na tę stronę listingu.
Jaki jest flow użytkownika, żeby właśnie na taką stronę trafił?
Otóż jak pamiętasz, takich flow będzie w zasadzie dwa.
Pierwszy polega na tym, że jeżeli przejdziemy do strony index owej,
odświeżamy tutaj, to możemy kliknąć na listing,
który mamy tutaj i od razu zostaniemy przekierowani właśnie na stronę takiego
poszczególnego listingu, a także możemy czego jeszcze nie zrobiliśmy,
podać tutaj dane dla wyszukiwarki.
Tym sposobem trafimy potem na stronę search, gdzie będziemy mogli jeszcze
dodatkowo ograniczyć filtrować takie rezultaty i dopiero z
takiej strony search przejdziemy na stronę bezpośredniego listingu.
Natomiast to co będziemy tutaj robić i co jest mega ważne, będziemy tu
podawać daty Pekin oraz Checkout.
W ten sposób będziemy mogli ograniczyć te wyniki właśnie do tych, które
są wolne w danym terminie.
Dodatkowo, jeżeli przejdę sobie teraz na jakąkolwiek stronę listingu bez tej
wyszukiwarki, czyli zjedziemy tutaj, otwórzmy np.
właśnie Sakura Heaven.
No to mamy tutaj pewien problem, ponieważ jak mówiłem chciałbym to wartość serwisowi
wyliczać właśnie dynamicznie bazując na tej wartości, czyli
price per night razy ilość nocy i z tego chciałbym właśnie pobierać np.
10%.
Na chwilę obecną nie możemy tutaj nic wyliczyć z tego prostego powodu, że
nie mamy żadnych zaznaczonych dat.
Tutaj nie mamy właśnie wybranych dat.
To wszystko na razie jest wpisane na sztywno, a więc ten serwis i
w ogóle nam się nie wylicza.
Jeżeli będziemy kierować użytkownika na stronę listingu poprzez stronę search,
to tam możemy w parametrach od razu przekazywać sobie to co wpisał na stronie
index nowej czyli na stronie index owej podaje miasto, podaje daty,
przechodzi na stronę search.
Tam sobie to dodatkowo jeszcze filtruje.
Potem ze strony search przechodzi na stronę listingu, a my sobie
dalej przekazujemy te parametry.
Natomiast jeżeli klikniemy właśnie na ten listing z jakiegoś innego miejsca, to tych
dat nie mamy tutaj nigdzie przekazanych.
Dlatego też ja chciałbym je od razu ustawiać pod takim warunkiem,
że te parametry będą puste.
Czyli jeżeli ktoś kliknął właśnie na taki listing, nie poprzez stronę search,
to dodamy tutaj odpowiednie workflow i zaraz zobaczysz jak ono będzie działało?
Wracamy na stronę listingu i to co muszę zrobić to przejść do Workflow.
Dodajmy tutaj nowy folder.
Będzie to folder, może DAX, tak go może nazwijmy.
I tym razem będziemy się odnosić tutaj do Page Loaded, czyli kiedy strona
jest załadowana, a dodatkowo URL.
Czyli odnosimy się do parametrów get data from page url Będziemy mieć
tutaj dwa parametry check in i check out.
Oczywiście bez literówek.
Check in out to będzie oczywiście typ ustawiony na datę.
Czyli jeżeli tego parametru check in nie mamy, nie przekazaliśmy go sobie
wcześniej, czyli jest on po prostu pusty.
Is empty and URL i odnosimy się teraz do parametru checkout.
To będzie również date.
I ten parametr również będzie pusty, czyli is empty.
To co chcę zrobić chcę przejść, a w zasadzie przekierować
użytkownika znowu na stronę listingu, ale tym razem ustawić właśnie te parametry.
Czyli jeżeli ich wcześniej nie przekazywaliśmy,
użytkownik trafia tutaj bez nich to my przeładowuje stronę, a w zasadzie nawet
nie przeładowuje, tylko po prostu dodajemy parametry do URL a i będziemy
zaraz z nich korzystać.
Zobacz jak to robimy.
Przechodzimy tutaj poprzez Navigation Go to Page na stronę listingu.
Jakie dane chcemy przekazać?
Dokładnie te same, które tutaj mamy, a więc Current page Listing.
I jedyne, co musimy zrobić.
Jak się domyślasz, tutaj jest Parameter Study Page i będzie to
Szczecin oraz oczywiście Checkout.
Mam nadzieję, że rozumiesz tą logikę.
Jeżeli tych parametrów nie ma to tutaj odpowiednio je dodajemy i check in
to będzie po prostu current datę.
+ jeden dzień, ponieważ tak działa również ten
day speaker na naszej stronie, że możemy wybrać tylko na dzień
jutrzejszy jako Start date.
A więc tak to ustawmy.
Tutaj dajmy + 11 dni.
Zauważyłem, że dokładnie robi robi coś bardzo podobnego,
czyli właśnie od razu ustawia nam jakiś przedział czasowy, na który teoretycznie
chcemy właśnie wynająć dany lokal.
A więc mamy tutaj taki 10 dniowy rozstrzał i teraz będziemy musieli właśnie
wykorzystywać te parametry do tego, aby odpowiednio właśnie
przekazać je do naszego day speakera.
Dlaczego robimy to właśnie przez te parametry?
Zamiast ułatwić sobie życie i od razu np.
ustalić takie dane startowe.
Natomiast jest to bardzo dobre pytanie, a odpowiedź jest również bardzo prosta,
ponieważ daje p r, który mamy tutaj.
To nie jest jedyny dan speaker jaki mamy na stronie.
Jak pamiętasz user może zabukować pobyt na naszej stronie zarówno właśnie poprzez
cały ten element a side, ale także mamy tutaj userów Mobile
Floating Group, czyli taką grupę, którą ustawialiśmy dla widoku mobile i tam
również znajdują się te wszystkie elementy.
Dlatego też ja chciałbym właśnie mieć te parametry ustawione tutaj bezpośrednio w
URL u i w ten sposób będę je mógł sobie wykorzystywać i potem odpowiednio
przenosić właśnie zarówno tu, jak i do rezerw Floating Group.
Zaraz zobaczysz, jak to będzie działało.
A więc tak jestem tutaj na tym elemencie data updates.
Dodajmy tutaj jeszcze informację, że to jest Acid, żeby się te date nie myliły.
To po pierwsze.
I teraz mamy tutaj jak widzisz tip to będzie range, czyli rzeczywiście przedział
dat od startowej do końcowej initial start date to będzie właśnie Pekin.
Z naszego URL a.
Wybierzmy sobie, że typ to data, żeby odpowiednio nam tu wskoczyło.
A tutaj będzie to jak się domyślasz checkout.
Tak, i w ten sposób.
Oczywiście bez literówek.
I zobacz, jak to teraz zadziała.
Przechodzimy tutaj na stronę indeksowania.
Mamy tutaj cały nasz listing.
Klikam na przykład na Sakura Heaven, co nam się otworzy tutaj w nowym oknie.
Sprawdzam URL i mam tutaj jak widzisz ID oraz dodane parametry.
Checkout i tutaj wcześniej wartość cekiny i wcześniej nie miałem.
Babel przeszedł na tą stronę. Zobaczył.
OK, takich parametrów tam nie było.
Odpalił się nasz workflow i odpowiednio je ustawił.
Jak widzisz dokładnie te same daty wskoczyły nam teraz tutaj, a więc od
razu mamy ustawione jakieś wartości.
A skoro mamy ustawione wartości, czyli te 10 dni to będziemy mogli sobie zaraz tutaj
po przeliczać to wszystko tak jak być powinno.
Natomiast tak żeby to zadziałało to service fi to musimy dla każdego hosta w
naszym serwisie go rzeczywiście ustawić.
Jak pamiętasz w poprzedniej lekcji tylko dodaliśmy sobie taki obszar set,
a potem dodaliśmy tą wartość do data type, ale tak rzeczywiście nigdzie
tego nie opisywaliśmy.
A więc wracamy do edytora.
Przejdźmy do Data.
Zerknijmy na priva Rules User.
Przekazujemy ok.
Musimy pokazywać serwis i żeby nam to odpowiednio zaskoczyło.
Teraz przejdźmy tutaj.
Mamy ten widok tylko dla hostów i teraz dla każdego z nich.
Ustawmy tutaj to na standard, czyli serwis Phi.
Idziemy tutaj, to mamy.
Tutaj jest i wszędzie Safe.
Na szczęście nie ma ich tutaj dużo.
Moglibyśmy to zrobić również za pomocą odpowiedniego workflow, ale w tym
przypadku po prostu dużo szybciej jest się przeklikać przez te rekordy
i odpowiednio sobie to poustawiać.
OK, wydaje mi się, że już wszyscy nasi goście mają ustawione to serwisy.
Wracamy więc na stronę listingu.
No i teraz zastanówmy się, co tutaj chcemy wyliczać.
Przede wszystkim mamy tutaj ilość nocy, którą możemy sobie wyliczyć na podstawie
tych parametrów Pekin i Checkout.
Jak to zrobić?
Ja w tym celu będę chciał dodać do naszej całej strony
listing odpowiednie custom stats i potem z tych custom statów jeszcze korzystać,
żeby przekazywać te wartości dalej.
W ten sposób będziemy mieć to fajnie połączone poprzez URL, a
potem poprzez custom staty.
Jakie custom staty w ogóle potrzebujemy?
Potrzebujemy w tym przypadku trzech.
I będą to wszystko custom Staty typu number przede wszystkim DIS
czyli liczbę dni na jaką user będzie poprawiał swój pobyt.
Dajmy tutaj number.
Będzie to kolejny custom stat o nazwie Price per Nights,
czyli cena jaka user zapłaci za te wszystkie noce, które
będzie chciał zabukować.
To oczywiście również będzie Amber.
I kolejno jeszcze nasz serwis Phi, który też będziemy sobie wyliczać.
I to również będzie Amber.
I dobrze, kiedy taki właśnie statek będziemy chcieli ustawić.
Oczywiście po załadowaniu się strony.
Jak widzisz, tutaj nie ma dostępu do żadnych dynamicznych danych.
Musimy to zrobić właśnie poprzez workflow.
A więc wróćmy tutaj.
Możemy to zrobić tutaj.
Dla date nie ma najmniejszego problemu.
Opcjonalnie może stworzyć osobny folder.
Ja to zrobię tutaj i powiem, że tak ma być.
Reloaded.
I tylko wtedy chce ten status ustawić.
Kiedy te parametry check in i check out są ustawione.
Czyli jeżeli trafimy tutaj ze strony search, no to od razu nam się odpali, to.
Natomiast jeżeli trafimy z innego miejsca, to najpierw odpali się to workflow, ustawi
to oczekiwanie i czeka out właśnie na ten przedział 10 dniowy od dnia jutrzejszego +
10 dni do przodu i dopiero wtedy mając te tutaj parametry
możemy właśnie ustawić dlatego, że będziemy z nich korzystać.
Czyli mogę sobie skopiować cały ten condition i expression
i tym razem powiedzieć, że te parametry nie mogą być puste, czyli is not empty.
Tu i tu.
I co wtedy chcemy zrobić?
Chcemy właśnie poustawiać nasz STAT czyli stat listing
i ustawiamy wszystkie te trzy staty.
Jak to teraz tutaj ustawić?
Liczba dni to będzie data końcowa Data początkowa.
Zobacz, jak łatwo można w Babel to zrobić.
Odnosimy się do URL a.
Wyciągamy tutaj.
Parametr checkout.
A ponieważ jest to pole typu date, to mamy tutaj właśnie cały szereg różnych opcji
dla niego dostępnych i to co możemy zrobić, to odjąć sobie od tego inną datę.
Czyli tym razem będzie to znowu URL, ale parametr.
Tutaj datę, a tutaj cekiny.
Możemy sobie jeszcze wybrać jako godziny, minuty, sekundy.
Nas interesuje liczba dni, czyli Rated ADX.
W ten sposób najpierw wyliczymy sobie ilość dni na jaką nasz
user chce zabukować pobyt.
A mając tą wartość możemy to przemnożyć przez cenę takiego listingu za noc i
uzyskać właśnie to price per nights.
Czyli mogę sobie skopiować to, wkleić tutaj,
kliknąć się tu kliknąć na More i pomnożyć to przez Karat Page Listing Price.
To jest cena za jedną noc.
To nam da price per nights.
A jak wyliczyć Service? Phi?
No jak się domyślasz będzie to ta wartość, czyli powiedzmy 10 dni razy 100 dolarów to
jest $1000 i z tego musimy pobrać sobie 10%.
Czyli pomnożyć to przez service jakie ustawiliśmy dla hosta.
Mam nadzieję, że rozumiesz ta matematykę.
Jeżeli nie, to na spokojnie sobie to przeanalizuj.
Nie ma tutaj nic trudnego, po prostu zwykła, prosta matematyka.
Czyli kopiujemy to, wstawiamy sobie tutaj i całość jeszcze
mnożymy poprzez Current page Listing.
Host.
Service i odnosimy się do Vario, ponieważ tak
pamiętasz, tutaj mamy to wartość numeryczną i teraz te 3 wartości mamy już
ustawione i możemy je sobie wykorzystywać do tego aby właśnie odpowiednio wyświetlać
te dane właśnie w naszym slajdzie.
Czyli wracamy.
Przejdźmy tutaj i zerknijmy co tutaj mamy.
Tu wyświetla się to odpowiednio, bo tu mamy tylko cenę Pride, tu
już przekazujemy te wartości.
Z tych parametrów Rekin i Checkout gest nas naprawdę nie interesuje, ponieważ
użytkownik nie płaci za liczbę gości, płaci po prostu cenę za
liczbę nocy razy właśnie ten price.
Natomiast tutaj musimy to odpowiednio sformatować.
Czyli mamy tutaj cenę takiego listingu.
OK, i tu mamy liczbę nocy, czyli tu zamiast 10 na sztywno możemy
się odnieść do listing.
I DISA.
Tu z kolei wyliczamy tą wartość, czyli mamy price razy liczba dni.
Czyli liczba nocy.
A więc w naszym przypadku jest to listing.
I price per night i oczywiście sformatowane tutaj jako
karencja dolar dwa miejsca po przecinku.
Tak, cleaning kwi.
To pozostaje na sztywno ustawione.
Tak jak wspominałem, możesz się pobawić i dodać tutaj dynamiczną wartość.
Natomiast service fi to jak się domyślasz nie będzie wartość na sztywno wpisana
tylko listing i nasz custom state service.
OK, to mamy ustawione to mamy ustawione, to teraz musimy jeszcze
tą wartość total wyliczyć.
Pozbywamy się tego?
Jaka będzie wartość total?
Będzie to listing.
Price Fernandes.
Do tego dodajemy nasz serwis fi.
Czyli listing serwis fi i do tego dodajemy jeszcze
właśnie to na sztywno 25 dolarów za czyszczenie + 25.
Znów jest to prosta matematyka.
Nie ma tutaj nic trudnego.
Przeanalizuj to sobie na spokojnie.
I na koniec wybieramy tylko tutaj http odpowiednio kliknąć we właściwe miejsce.
A właśnie tutaj, żeby mi się to samo ratowało jako karencji.
2 miejsca po przecinku.
No i teraz zerknijmy, czy to rzeczywiście zadziałało.
Pokażmy sobie ten pasek boczny.
Na razie zamknijmy te. Odświeżamy.
I ok, Wybierzmy np. Sakura Heaven.
Znów.
I zerknijmy, czy nam się to zgadza.
Od 9 do 19 mamy 99 razy 10 nocy.
To jest 990 dolarów.
Tutaj mamy cleaning fi, tu musimy jeszcze serwis fi poprawić.
Ale widzisz, wyliczyła nam to dobrze.
Jedna dziesiąta z 990 to po prostu 99.
Jeżeli dodamy te dwie wartości tutaj, to powinno nam się właśnie tutaj to zgadzać.
W zasadzie te trzy wartości to +100, +100.
Mam nadzieję, że Tosia wyliczyła dobrze, ale wydaje mi się, że tak.
Czyli jeszcze tylko serwis.
I tu musimy dodać też jako formatowanie ustawione na karencji.
Dwa miejsca.
Zerknijmy teraz odświeżamy.
OK, teraz wygląda to już dużo lepiej.
Wszędzie mamy wartości w dolarach.
Natomiast co się stanie, jeżeli użytkownik stwierdzi, że te daty mu nie
odpowiadają i chciałby je zmienić?
Musimy dodać odpowiednie workflow, które będzie to wyłapywał
i na podstawie tych dat będzie odpowiednio aktualizował nasze parametry w URL u, a te
parametry będą przekazywane właśnie dalej.
To jest takie dosyć skomplikowane na pierwszy rzut oka.
Mam nadzieję, że na spokojnie.
Jeżeli sobie przeanalizujesz jak to działa, to nie okaże się aż tak trudne.
Czyli tu zmieniamy wartość.
Te zmiany wpadają nam do URL a ten URL jest zmieniany
i potem z tego URL pobieramy te wartości znowu, aby je tutaj wyświetlić i potem po
wyliczać właśnie te wszystkie wartości tutaj.
Jak to zrobić?
Przede wszystkim wracamy do edytora i musimy zrobić jedną bardzo ważną rzecz,
przynajmniej na moment nagrywania tego kursu.
Przejdziemy sobie tutaj do tego pluginu.
Musimy sobie wybrać tutaj.
Nie do tego, tylko oczywiście do update speakera.
Mam tutaj informację, że ten plugin może zostać zaktualizowany
i żeby nam to zadziałało musisz wybrać sobie tą wersję 3 96 2.0.
Ja testowałem to najnowszą.
Ogólnie właśnie tak się zmienia i aktualizuje tę wersję pluginu w Babel.
Przechodzisz tutaj, wybierasz sobie tą listę i możesz właśnie sobie
wybrać dowolną wersję tego pluginu.
Ta 3 97 ma pewien zasadniczy problem.
Zresztą zaraz Ci pokażę jaki.
Zaznaczmy ją na razie powiedzmy, że chcemy korzystać z tej najnowszej.
i dodać sobie workflow, które będzie nam to obsługiwało.
Możemy tutaj datę.
Jak widzisz, mamy tutaj element.
Możemy sobie wybrać tutaj.
Kiedy wartość data p.
Klerze została zmieniona.
Jaki to element site i co chcemy zrobić?
Chcemy sobie przejść tutaj stronę listingu, czyli mogę sobie
skopiować te wartości.
Tutaj daty Pekin i Checkout to będą daty jakie użytkownik wybrał sobie w tym update
pingerze czyli An site date date selected day selected range.
Tam wybieramy przedział i start.
W ten sposób wybieramy sobie datę początkową, wklejamy tu ustawiamy
End i teraz mamy datę końcową.
I teraz zmieniając te daty właśnie w date pokerze będziemy przechodzić na tą stronę
listingu i aktualizować te parametry w URL u.
Więc zerknijmy czy to zadziała.
Przechodzę sobie tutaj. Odświeżam.
Ustawia się z automatu te 10 dni.
A teraz chciałbym ustawić tutaj inną wartość.
Zaznaczam 24.
No i widzisz, nie dałem radę kliknąć wartość końcową.
To jest właśnie ten problem, który się pojawia, jeżeli korzystamy z
tej nowszej wersji pluginu.
Nie jestem w stanie tutaj właśnie ustawić tego przedziału, bo klikam na jedną
i to okienko zaraz mi się zamyka.
A więc wracamy tu do plugins i wybieram wersję.
3 96 0 Teraz przechodzimy, odświeżamy i już powinno być w stanie wybrać
odpowiednie przedział dat.
10.
I dalej mi to niestety nie wyskakuje. Nie wiem dlaczego.
Spróbujmy jeszcze sobie przejść to odświeżyć.
Jeżeli nie ta wersja może.
Aha, przepraszam, już wiem dlaczego nie 3 96 tylko 3 95.
Przepraszam Cię najmocniej.
To była ta wersja pluginu, która jeszcze działała poprawnie.
A więc przejdźmy.
Odświeżamy tutaj.
Przejdźmy znów do Sakura Heaven.
I tym razem.
Mogę już bezproblemowo wybrać sobie inny przedział.
To się wszystko tutaj przelicza.
Mamy 6 nocy, taki serwis i taki total price, które użytkownik zapłaci
właśnie za cały pobyt.
Tak więc jak widzisz zarówno parametry URL jak i staty tutaj fajnie ze sobą
współgrają, odpowiednio przekazują nam te wartości.
To co ustawiałem tutaj jako pracę domową będziesz musiał ustawić
właśnie w tym blokowaniu dla systemów mobilnych.
Tam mamy niemal dokładnie te same wartości, te same kolumny i te same
rzeczy wyświetlamy, więc po prostu będziesz musiał
znów odpowiednio to sobie poustawiać.
Natomiast tutaj jeszcze jedna bardzo ważna rzecz.
Jeżeli tutaj ktoś sobie wybierze, jaką liczbę gości chce, to jak widzisz
ma pełen przekrój od 1 do 8+.
Ba, takie wartości mamy dla Option setu ustawione.
Natomiast jeżeli zjadę niżej.
To Basic info pokazuje mi i to już jest wartość wyciągana z listingu, że możemy
tutaj dla tego listingu zaoferować miejsce maksymalnie dla trzech gości.
Dlatego też musimy odpowiednio dostosować to pole drop down, żeby
wyświetlało tylko te opcje, które są zgodne właśnie z tym,
co ustawiliśmy dla listingu.
Jak to zrobić? Wracamy do edytora.
Odnosimy się tutaj do Gest number i na chwilę obecną wyciągamy sobie
wszystkie dostępne wartości z naszego Listing numbers.
Natomiast mogę zrobić tutaj taki myk, że klikam na to More i wybieram sobie opcję
o nazwie filter, co oznacza, że mogę filtrować te pobrane rekordy.
Jak widzisz mamy tutaj też opcję dodawania nowych kont train.
I czym to się różni od tego, co robimy w DUA Search for?
Otóż w Search For te warunki, które tutaj ustawiamy są od razu przekazywane do
serwera i tam Babel wysyła zapytanie, sprawdza jakie są warunki.
I zwraca tylko te rekordy, które do niego pasują.
Jak pamiętasz, w jednej z lekcji ustawialiśmy tutaj flag, więc już na
poziomie serwera Babel wyszukał rekord, gdzie ten slug był
właściwy i zwrócił nam -1.
Natomiast filtrowaniem jest trochę inaczej, ponieważ jeżeli ustawiasz te
warunki poprzez filtr SET, to Babel najpierw zwróci wszystkie rekordy
jakie znajdzie w bazie danych i dopiero tutaj je filtruje.
Dzięki tej opcji filtrowania mamy czasami możliwość ustawienia dużo bardziej
skomplikowanych tych filtrów, tych warunków.
Natomiast właśnie pamiętaj o tym największym ograniczeniu.
Czyli najpierw zwrócą Ci wszystkie rekordy i dopiero potem je filtruj
i ograniczasz ich widoczność.
Więc jakbyśmy mieli w bazie np.
100 000 rekordów użytkowników i wybrali sobie
search for, zwrócili wszystkie i dopiero poprzez filtrowanie ustawili tego Slacka.
No to niestety Babel odeśle Ci do przeglądarki 100 000 rekordów.
I dopiero na miejscu w przeglądarce użytkownika je filtruje.
Jest to bardzo złe rozwiązanie, dlatego z tego filtrowania staraj się
korzystać tylko wtedy, kiedy musisz.
Ale my niestety musimy, ponieważ inaczej nie będziemy w stanie tego ustawić.
Jakie warunki w zasadzie chcemy dodać on line?
Klikam sobie tutaj.
I dobra, jaki warunek tutaj teraz chcemy ustawić?
Najpierw odnosimy się do This os Listing Numbers kolejno do Display.
Tam mamy te wartości 1/2 do 8+.
Natomiast jak pamiętasz to był tekst, a więc musimy to sobie
sformatować do wartości liczbowej.
Możemy tutaj wpisać Converter to number.
I teraz możemy już porównywać wartości liczbowe tak jak z reguły
jesteście w stanie porównywać w matematyce.
Czyli chcemy wyświetlić tylko te, gdzie ta wartość liczbowa jest
mniejsza bądź równa tej ustawionej dla danego listingu.
Czyli tutaj było maksymalnie 3 gości, to użytkownik powinien wjechać pomiędzy
1 a 3, czyli mniejsze bądź równe.
Current page Listing tutaj Gest number.
Display i też sformatowane jako number.
Dopiero wtedy Convert Number.
Dopiero teraz nam to zaskoczy, ponieważ nie jesteśmy w stanie porównywać
w prosty sposób tekstów, czyli Babel mając 1 tekstowe i 1 tekstowe nie do końca
będzie wiedział jak to porównać.
Ale jeżeli konwertuje to już do wartości liczbowej to będzie wiedział, że 1 jest
równe 1 albo jeden jest mniejsza od dwóch itd.
Teraz dopiero to nam zaskoczy.
Klikam close.
Filtrowanie powinno nam zadziałać. Zerknijmy.
Powinniśmy mieć możliwość wybrania maksymalnie trzech gości.
Jak widzisz, teraz już to działa.
Użytkownik nie będzie mógł wskazać więcej niż właśnie dany listing dopuszcza.
A skoro tą część mamy już gotową.
Czyli ten nasz Acid już tutaj fajnie działa, przelicza wszystkie wartości, mamy
ograniczenia liczby gości, to możemy przystąpić do tego, co było głównym celem
tej lekcji, czyli dodanie logiki do pokazania pobytu.
Zaraz zobaczysz jak prosta ona będzie.
Mimo tej pracy i tyle czasu poświęconego na te przygotowania.
Wracamy do edytora i jedyne co chcę zrobić to jeszcze tutaj zerknąć na ten guzik.
Reserve button mamy tutaj bąknął.
Natomiast ja chcę, żeby użytkownik mógł zablokować pobyt tylko i wyłącznie
wtedy, kiedy jest zalogowany.
Czyli jeżeli jest niezalogowany, to wyświetlamy tutaj inny tekst, np.
login to profit albo register to profit jak już wolisz.
A jeżeli jest zalogowany to wtedy będzie mieć bug.
Możemy to zrobić na dwa sposoby.
Domyślnie np.
wyświetla puknął, ale dodać tutaj prosty condition ale
i powiedzieć, że kiedy current user.
Is locked out to tylko zmieniamy ten tekst na np.
właśnie login to profit.
I jest to jak najbardziej poprawne.
Możesz to robić właśnie w taki sposób, ale ja to stosuję trochę bardziej skróconą
wersję z tego powodu, że karencji ten warunek jak widzisz, jeżeli tutaj jadę
dewaluuje mi do wartości tak albo nie.
A skoro ewoluuje mi to na wartości tak albo nie.
Mogę sobie to sformatować jako tekst.
Wiem, że to trochę dziwnie brzmi, ale zaraz zobaczysz, jak to będzie wyglądało.
Zobacz, kopiuję sobie ten cały warunek.
Usuwam ten condition, ale tutaj przechodzę do tego tekstu głównego.
Wklejam sobie to teraz.
Będziemy mieć tutaj właśnie ewaluację do Jessi i możemy wybrać sobie formaty z txt.
Teraz ustawiasz takie wartości, które będą wyświetlane dla jest albo dla.
Gdybyśmy zostawili tak no to będziemy mieć po prostu jest albo No
zerknijmy czy to zadziała.
Odświeżamy.
Jestem zalogowany, więc jak widzisz wyświetla mi się tylko Yes.
Gdyby był niezalogowany wyświetliło by mi się tutaj.
No a skoro mamy też wstęp dostęp do tych tekstów, możemy je sobie od razu ustawić.
Czyli jeśli jest zalogowany to to co mieliśmy wcześniej puknął?
Jeżeli nie to login to profit.
Jest to bardzo fajna opcja.
Ja bardzo często korzystam i ustalam właśnie takie teksty.
W ten sposób zamiast korzystać z tej zakładki konwencjonalna.
A skoro tą część mamy z głowy, to dajmy tutaj workflow.
Utwórzmy sobie, a mamy nawet grupę rezerw i chyba nawet w niej jesteśmy.
Czy nie jesteśmy tak?
Aha, tylko mamy tutaj mobile.
OK, to jest ten Leather button.
Nie dawaliśmy tutaj żadnych workflow jeszcze.
To zróbmy to w ten sposób.
Dajmy tutaj kolor green i tylko wtedy, kiedy karencji user.
Getin czyli jeżeli jest zalogowany to chcemy po prostu zablokować ten pobyt
i to do folderu rezerw.
I teraz kopiujemy sobie, kleimy i kiedy jest wylogowanie?
Co chcemy zrobić kiedy użytkownik jest zalogowany?
Prosta akcja.
Kierujemy go po prostu na stronę SN.
Czyli jeżeli jest zalogowany, no to kierujemy go na stronę logowania, a jeżeli
jest zalogowany, no to dopiero wtedy rzeczywiście pozwalamy
mu zabukować dany pobyt.
I w pierwszej kolejności tworzymy nowy rekord.
Booking, czyli Tata Fink Create a New Fink Będzie to booking.
Wszystkie pola mamy tutaj teraz te wartości, które musimy
przekazać do trainee, czyli na jaki zakres dat użytkownik blokuje dany listing.
W naszym przypadku będzie to A Site, nasz tate Speaker i selected range,
czyli wybrany przedział.
Kto będzie gestem? Oczywiście current User.
Kto będzie hostem? Oczywiście Karen Page Listing Host.
Co do listingu myślę, że tutaj nie ma dla Ciebie nic trudnego.
Będzie to Karen Page Listing.
Status Na razie ustawiamy sobie to od razu in completed.
Potem jeszcze będziemy o to dbać.
Będziemy właśnie wdrażać systemy płatności.
Natomiast ja chcę, żeby to zadziałało w ten sposób, że
najpierw to sobie blokujemy, ustawiamy status na komplet, potem jak
dodamy system płatności, użytkownik płaci, wszystko będzie okej,
to tylko będziemy zmieniać ten status.
Trochę podobnie jak robiliśmy to z Wikingami właśnie z tego draftu
na Publish i Total Price.
No to tutaj musimy sobie znowu przekazać tą samą wartość.
Czyli to będzie listing price per units.
+ listing service Phi i plus te 25 dolarów za sprzątanie.
Tutaj już nie odczujemy tego jako gwarancji, bo Total Price przechowuje
wartość jako number i to nam wystarczy.
Utworzyliśmy taki booking, teraz musimy jeszcze te daty
zablokowane dodać do naszego listingu.
A więc wybieramy sobie Data Fink i Changes to Fink.
Będzie to oczywiście Current Page Listing i w tym przypadku chcę
od razu zmienić dwa pola.
Tak jak Ci mówiłem Then data range w formie listy
oraz po prostu zablokowane daty.
I tutaj robimy to w ten sposób.
Tutaj dodajemy ten przedział z naszego datami pingera czyli Acid Date
Selected date tylko Selected range.
Natomiast w tym przypadku dodajemy tutaj listę, wybieramy Add list
i wybieramy znowu Date P.
Ale tym razem Selected Range a z listy tutaj wstawiają nam się kolejne daty,
czyli jak wybierałem od pierwszego do dziesiątego np.
to będziemy mieć to pierwszy, drugi, trzeci, czwarty itd.
Aż do 10.
I ok.
Utworzyliśmy nowy booking, poprawiliśmy sobie listing,
dodaliśmy te zablokowane daty.
I ostatnim krokiem będzie przekierowanie użytkownika na
stronę bookingu, gdzie ma podziękowania i wszystkie informacje
i oczywiście co chcemy przekazać ten booking, który tutaj utworzyliśmy.
Mamy błąd, ale tylko dlatego, że nie właśnie nie ustawiliśmy tego bookingu
jako typ całej strony, a więc możemy sobie tutaj przejść.
I tutaj dla całej strony wybrać oczywiście Booking.
I teraz jeżeli wrócimy na stronę listingu, to nasze workflow już nie powinno
tutaj sypać żadnymi błędami.
Zerknijmy.
Wszystko jest OK.
Jak widzisz, całe workflow zajęło nam tak naprawdę 3 kroki,
a przygotowania ponad 30 minut.
I tak wiem, że była to dosyć długa lekcja, ale mam nadzieję, że była również ciekawa
i nauczyłeś się z niej sporo rzeczy.
A ja dziękuję Ci za uwagę i widzimy się za moment.