MVP aplikacji w rekordowym czasie z Bubble: Bookings w dashboardzie hosta
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?
Zgodnie z obietnicą w tej lekcji nadal kontynuujemy naszą przygodę z okienkami i
tym razem zadbamy o to, aby odpowiednio wyświetlały się one
również na koncie hosta.
Natomiast zanim do tego przejdziemy, czeka nas jeszcze tutaj kilka
drobnych poprawek i przygotowań.
Przede wszystkim, jak już zauważyłeś, ja tutaj ten element zamieniłem na
element, czyli tą grupę Booking Charter.
Oczywiście data source jest ustawiona na Parent sal Booking i tam przekazujemy
właściwy booking tutaj z listy.
Natomiast wróćmy jeszcze na chwilę do tej grupy.
Grupy Idea wyszukiwania oraz właśnie tych filtrów dotyczących Dave Branch.
Jak pamiętasz, ja w poprzedniej lekcji próbowałem się do tego odnieść
i sprawić, żeby właśnie ten przedział był mniejszy od określonej daty.
Możemy to osiągnąć po części przynajmniej wybierając tą opcję i small i point.
I teraz mogę wstawić tutaj odpowiednią wartość.
czyli np. Current date time.
Jak widzisz teraz Babel nie świeci na czerwono, natomiast to nie do końca się
sprawdza, ponieważ ta opcja z Power Point bierze datę końcową z tego przedziału, a
nas z kolei interesuje data początkowa, a więc to nie zadziała tak jak powinno.
Natomiast to, że tutaj mieliśmy właśnie to czerwoną informację, że to się nie zgadza,
wynika z tego, że ta opcja porównuje ze sobą dwa przedziały.
Czyli tutaj musiałbym podać jakiś przedział właśnie, albo gdzieś wyciągany z
bazy danych, albo taki przedział mogę sobie stworzyć na przykład sam.
I takim przedziałem może być skręt, datę do datę.
Wiem, że to trochę dziwnie brzmi, ale to po prostu taki przedział.
Właśnie z tym dzisiejszym dniem.
A jeżeli nie wiesz jak tworzyć date range, to już Cię pokazuję.
Najpierw wybierasz początek, czyli np. Current Date Time.
Potem wybierasz opcję Range i teraz musisz podać zakończenie takiego przedziału.
W moim przypadku na przykład może być coś takiego, czyli przedział pomiędzy dniem
dzisiejszym, dniem dzisiejszym, czyli po części to co chcieliśmy uzyskać.
Natomiast jak widzisz, po pierwsze nie mamy tutaj teraz informacji, że jest źle.
Nic nam się nie świeci na czerwono, ale tak jak mówię, to znów nie zadziała do
końca tak jak trzeba, ponieważ wyciąga tutaj datę końcową, a nie początkową.
Natomiast jak działają te opcje pozostałe?
Zachęcam Cię do zapoznania się z nimi.
Po prostu kierując Cię do jak się domyślasz dokumentacji blabla, tam
znajdziesz dokładne wyjaśnienie co te poszczególne opcje pozwalają Ci ustawić.
Ja się tego pozbywam.
Zostawiamy to po prostu z tymi filtrami, które ustawiliśmy wcześniej.
Kolejną rzeczą, którą musimy tutaj zrobić, to dostosować właśnie te
teksty, bo o nich zapomnieliśmy.
Jeżeli klikniemy sobie tutaj na listę błędów, to okazuje się, że właśnie ten
booking Cartera ma ich tutaj całkiem sporo.
A jeżeli przejdę, to większość dotyczy właśnie tutaj.
Tego, że stosujemy nie takie dokładnie filtry.
A więc domyślnie niech to będzie AB coming, tak jak jest u nas.
Natomiast active.
Musimy to wyczyścić, odnieść się do candidate time.
Ma być większa niż data rozpoczęcia takiego pobytu
i mniejsza, czyli current date time.
Mniejsza niż data zakończenia, czyli niemal dokładnie to samo
co ustawialiśmy wcześniej.
Wtedy łapiemy się tą datą w ten przedział.
A tutaj dla tych zakończonych będzie Cart Date time.
Jest większa niż Parent Group Booking trening end.
I teraz tak, ponieważ ten tekst wyświetlamy w dwóch miejscach.
Wyświetlamy go również tutaj.
Dla wersji mobilnej to musimy skopiować tego Nationale.
A więc kopiuję ten.
Przechodzę tutaj do tego tekstu tego małego i wstawiam tutaj.
Pierwsze conditions, kopiuję sobie drugi.
I znów poprawiam to w tym miejscu.
Dodatkowo z tego co pamiętam mieliśmy jeszcze workflow ustawione
na kliknięcie w taką grupę.
A to się zgadza.
Kierujemy użytkownika na stronę bookingu, ale już pozbywamy się tego parametru i tym
razem przekazujemy Parent Group Booking.
Zerknijmy na Issues.
Czy mamy tutaj jeszcze na liście coś, co dotyczy naszego elementu booking Cartera?
Wydaje mi się, że nie.
Wygląda na to, że wszystko jest ok.
Możemy więc wrócić do Get Booking.
Tutaj już jest to wszystko ustawione.
Zerknijmy, czy nam się nic w międzyczasie nie popsuło.
Odświeżamy.
Zaloguj się na konto gościa.
Logujemy się z tego konta Login as the guest.
Zerknijmy na Active.
To nam się zgadza.
NET nam się zgadza.
A więc to, co powinieneś zrobić teraz.
Jeżeli nie miałeś wcześniej, nie utworzyłeś takiego elementu dla hosta,
to właśnie albo skopiowanie tego całego elementu i dodanie tutaj pola search.
Bo tak naprawdę tylko tym różni się ten element między
kontem gościa a kontem hosta.
Już Ci to pokazuje host booking z RS a go po prostu tutaj powiesiłem
i wstawiłem sobie tylko właśnie tutaj to pole Listing Search Box.
Następnie musimy zadbać o odpowiednie connection, ale żeby elementy bardziej
wyświetlały, bo na chwile obecną oczywiście są one błędne.
Czyli przechodzimy do dashboard a.
Tutaj do contentu i mamy tak z booking.
Widok nam się zgadza, natomiast z tego już nie korzystamy,
ponieważ nie zapisaliśmy bookingu bezpośrednio do rekordu usera, a musimy
skorzystać z search for wyszukać sobie booking.
Gdzie oczywiście gościem jest nasz klient. User.
Count mniejsze niż 1.
Jeżeli zastanawiasz się dlaczego ja tutaj nie stosuje zapisu s a 0
co dałoby dokładnie to samo, to zauważyłem, że czasami ma z tym problemy.
Jeżeli piszesz tutaj mniej niż 1 co też daje nam 0 to już działa bezproblemowo.
Dlatego ja właśnie zawsze stosuję taki zapis.
Jeżeli tylko mogę teraz skopiuj to.
Tutaj i tym razem Count musi być większa równe 1.
To było dla booking.
Teraz poszukajmy z booking.
Mamy tutaj.
Jeżeli duplikat miałeś taki element i usunąłeś ten wcześniejszy to Bubble będzie
krzyczał, że tu jest odwołanie do nieistniejącego elementu.
Musisz to po prostu wtedy na nowo dodać.
Taki świeżo utworzony post booking z ręki.
I zaraz tutaj zadbamy o odpowiednie warunki.
I tutaj current user nie możemy wkleić.
A w zasadzie nie zostawmy tak Hop booking and search for Zróbmy to porządnie.
Booking, gdzie host tym razem jest równy Create user.
Count mniejsze od jednego dla widoku. Empty.
Tutaj możemy wkleić.
I tym razem count większe równe 1.
I tu część pracy mamy za sobą.
Po tych poprawkach nasze elementy powinny się odpowiednio
wyświetlać w Wordzie, ale powinny odpowiednio zaskoczyć.
Natomiast wróćmy jeszcze na chwilę do bazy danych.
Zerknijmy na bookingu i zerknijmy dla jakich hostów to dodaliśmy.
OK, jak widzę mamy 3 różne booking dla 3 różnych hostów.
A ja chciałbym Ci pokazać jak działa to pole Search Box.
Ale do tego potrzebuję, żeby jeden host posiadał kilka pól pingu.
Zerknijmy, który z nich ma najwięcej wystawionych listingu ów.
OK, u nas jest to Sara, więc może łatwo ułatwimy sobie życie.
Przejdźmy na stronę search.
Tu, gdzie wyświetlamy te wszystkie listing i dodajmy jeszcze Conditions.
Gdzie email?
Listing.
Oczywiście musimy się odnieść do tutaj ownera.
Czyli jest host.
Jest.
OK, host jest równy.
My tutaj możemy tutaj sobie wstawić.
Zróbmy to w ten sposób po prostu sobie skopiuj.
Unikat.
Powinno to tak zadziałać.
Zaraz sprawdzimy.
Chociaż tu pewnie musimy wyszukać.
Czyli host musi być równy search for user.
unique ID. To właśnie chciałem zrobić.
W taki sposób wyszukamy SARE.
Czyli host musi być równy Sarze czyli first.
Zatem teraz powinniśmy na stronie search widzieć tylko i wyłącznie castingi,
które są dodane przez Sarę.
Jesteśmy na razie na koncie gościa.
OK, przejdźmy na stronę wyszukiwania.
Jak widzisz tutaj ta lista dostępnych castingów się zmniejszyła.
Ja w ten sposób mogę dodać sobie tutaj właśnie kolejne booking.
A więc zróbmy to na szybko, niech one wszystkie będą ab coming.
Czyli ustawmy tutaj jakieś daty do przodu.
Puknął.
Teraz możemy wybrać kolejny lifting o nazwie Urban Skyline Loft.
Znów jakaś data do przodu.
Tym razem może coś w lipcu.
Zamykamy. I jeszcze jeden.
Tym razem w Mordorze.
Znów data do przodu.
OK, otworzyliśmy booking.
Wróćmy do edytora.
Zerknijmy do naszej bazy danych na booking.
Jak widzisz, tym razem Sara jako host ma 3 tutaj dodane, a więc uruchomimy teraz
dashboard jako Sara Mitchell.
I zamknę to przejdę tutaj do Dashboard.
Czyli dokładnie w to samo miejsce.
I teraz zerknijmy tutaj.
OK, jeszcze tylko zerknijmy na nasz dashboard, bo pewnie znowu
zapomniałem zaznaczyć flagi, która będzie wyświetlała nasz
element czyli host booking.
Reszta warunek się zgadza.
Oczywiście, że tak.
This is visible.
Teraz powinniśmy już widzieć Kingę.
Sarę.
OK, nie widzimy. Dlaczego?
Sprawdzamy teraz host Brookings Reed, jaką mamy tutaj.
OK, oczywiście nie zgadza się Konstantin.
Musimy się odnieść do hosta.
Czyli host jest równy rent user i to samo zrobić w pozostałych
miejscach, czyli Host current user.
Niestety jak widzisz nie mogę tutaj poprawić tego.
Muszę usunąć ten screen, dodać go na nowo.
Teraz już stara powinna być w stanie wyświetlić listing.
I to się zgadza.
Mamy trzy nadchodzące listing, które należą do Sary.
W zasadzie 3 nadchodzące booking w castingach należących do Sary.
Dokładnie tak chciałem to powiedzieć.
Natomiast tak to powinno nam działać i działa.
Klikniemy datę też działa tak jak mówiłem.
Natomiast chciałbym tutaj jeszcze dać Sarze jako postowi możliwość wyszukania
właśnie takiego listingu po jego nazwie.
Jak się domyślasz, takiego bookingu po nazwie listingu właśnie.
Tak jak się domyślasz jako host Sara pewnie takich parkingów będzie miała
bardzo dużo i chciałbym, żeby była tutaj. Wpisać np.
Rijad i pojawią się tylko te Kingi, które właśnie go dotyczą.
Natomiast żeby to zaskoczyło, muszę Ci wytłumaczyć jak działa
pole typu search box.
W tym celu wracamy do edytora i kolejno przechodzimy na stronę Scratch PAD, gdzie
już przygotowałem dla Was taki mega prosty przykład, który wykorzystamy w tej lekcji.
Dodatkowo jak widzisz zacząłem sobie tutaj już dzielić te przykłady na poszczególne
grupy, tak żebyś potem miał do nich bardzo prosty dostęp.
A więc nie przedłużamy.
Tu mamy tak naprawdę tylko grupę, w której umieściłem pole typu search
box i teraz sobie o nim porozmawiamy.
Do tej pory wykorzystywaliśmy go głównie tylko w tej formie,
gdzie tutaj wybieraliśmy Geographic Places I w ten sposób, jak pamiętasz na stronie
nowego listingu, w jednym z kroków nasz user pozostanie tutaj wpisać jakąś nazwę.
A Google Maps zatroszczył się o to, aby mu namierzyć właściwy adres.
Natomiast jest to tylko jedno z nielicznych zastosowań pola typu sandbox,
ponieważ jak widzisz możemy tutaj wybrać sobie Static Acces i kolejno podać tutaj
listę wyborów, z których będzie mógł skorzystać użytkownik.
Natomiast ja z tego rozwiązania nigdy nie korzystam i raczej wydaje
mi się mało potrzebne.
Natomiast jeżeli uda Ci się znaleźć dla niego zastosowanie swojej aplikacji,
to jak najbardziej z niego skorzystaj.
Natomiast najczęstszym wyborem tutaj jest wybranie tej środkowej,
czyli Dynamic Success.
I teraz za pomocą pola typu search Box jesteśmy w stanie przeszukiwać rekordy
bezpośrednio w naszej bazie danych.
Natomiast ma to pewne ograniczenia.
Przede wszystkim ograniczeni jesteśmy do jednego data type, który musimy
zdefiniować sobie tutaj poprzez Define List of Options.
I teraz jak widzisz mamy dostęp tylko do tych data types, które
zdefiniowaliśmy w naszej bazie danych.
To znaczy, że nie będziemy mogli w ten sposób przeszukiwać np.
setów bądź innych zbiorów danych naszej aplikacji.
Natomiast jak teraz do tego podejść?
Powiedzmy, że chcemy sobie przeszukiwać listing.
A więc wybieram tutaj listing.
Mogę dodać odpowiednie const train i oczywiście ograniczyć listę listingu.
Natomiast tego nie chcę robić.
Klikam Close.
Chcę przeszukiwać wszystkie listing jakie mamy dodane w aplikacji.
I teraz musimy zdecydować po jakim polu, a w zasadzie po jakiej kolumnie
chcemy takie wyszukiwanie prowadzić.
I tutaj znów kolejne ograniczenie.
Możemy wybrać tylko jedno z nich i dodatkowo jak widzisz tylko te pola
tekstowe, czyli description, name lub slug.
W praktyce oznacza to, że nie jesteśmy w stanie wykonać takiego zagnieżdżenia.
Czyli jak pamiętasz np.
dla listingu mamy ustawionego hosta i nie możemy poprzez pole typu search box
przejść sobie najpierw do listingu, potem wybrać hosta, a potem po tym hoście
przeszukiwać właśnie po jego kolumnach.
W tym przypadku niestety jesteśmy ograniczeni do takich flag data, czyli
tylko do tych pól, które zdefiniowaliśmy bezpośrednio w danym data type, który
chcemy przeszukiwać, a więc wybieramy Name.
Po tym polu chcemy właśnie wyszukiwać nasze tutaj listingu i zaraz zobaczysz
dlaczego pole Search Box jest tak bardzo przydatne.
Przejdźmy sobie do Preview.
I zacznijmy tutaj wpisywać jakąś nazwę.
Pamiętam, że mamy tutaj coś na O właśnie Riad Marrakesz Oasis.
Jak widzisz zacząłem wpisywać, a Babel zadbał już o to, aby namierzyć
taki rekord właśnie po tym polu. Po polu name.
I wskazać nam tutaj właśnie podpowiedź.
Spróbujmy tutaj może coś na co my tam mamy?
Mamy chyba nordic.
O właśnie, znów.
Znów Babel nam podpowiada tutaj rekordy.
Znów jesteśmy w stanie to w prosty sposób namierzyć, ale zerknijmy na nasze tutaj.
Przejdźmy sobie. Może w ten sposób zamknijmy to.
Zerknijmy na nasz listing.
Jakie my tutaj nazwy mamy?
OK, tu się one nie pojawiają, ale to nic.
Wybierzmy sobie tutaj np. name.
OK, mamy tutaj Sakura Heaven, mamy Santorini.
Czy mamy jeszcze jakieś na S?
Aha, mamy 2 razy Sakura Heaven, bo je skopiowali.
A więc mogę ci teraz udowodnić, że jeżeli zacznę tutaj w tym polu
pisać Sakura czyli SA.
To jak widzisz Babel namierzył nam całą masę innych rekordów i teraz ta lista
z wyborem jest znacznie prostsza.
W ten sposób użytkownik nie do końca musi pamiętać właśnie jak nazywał się dany
rekord, bo w naszym przypadku po prostu dany listing.
Można zaczynać wpisywać jakieś znaki typu SSA.
I zaraz właśnie mamy tutaj całą resztę podpowiedzi.
A więc jest to jeden z takich sposobów, którym właśnie możesz wykorzystać pole
typu search box i w prosty sposób namierzyć dany rekord w bazie danych dany
rekord danego data type oczywiście, czyli danego typu.
Natomiast pamiętaj o tym głównym ograniczeniu to pole musi być dodane
bezpośrednio do danego data type.
Natomiast czasami będziesz chciał skorzystać z jeszcze innej opcji, którą
zapewnia nam pole typu Search box.
A mianowicie to, że jeżeli teraz tutaj wyszukasz sobie jakiś rekord
i go wybiorę np.
Sakura Heaven to to, że ta nazwa pojawia mi się tutaj w
tym polu Search box oznacza również to, że teraz całe to pole Search Box
przechowuje taki właśnie wyszukany rekord.
Co to oznacza?
Oznacza to teraz, że możemy się takiego pola teraz box odnieść i wyciągnąć np.
jakąś wartość z kolumny dla tego danego data type.
Zerknijmy jak to może zadziałać.
Przejdźmy sobie tutaj do designu.
Dodajmy tutaj jakiś tekst.
I teraz wyciągnijmy sobie może UniCredit takiego właśnie
rekordu, który tutaj mierzymy.
A więc odnosimy się do Search Box, czyli listing Search box value.
I widzisz, mam teraz dostęp do tych wszystkich kolumn zdefiniowanych
właśnie dla naszego listingu.
Mnie interesuje np. Unique ID.
OK, przechodzimy do Preview.
Na razie tekst nam się nie pojawia, ponieważ nic nie znaleźliśmy, ale
jeżeli wybiorę sobie znowu np.
Sakura Heaven, to jak widzisz Babel automatycznie
wyciągnął mi Unique ID z takiego pola.
Dlaczego o tym Ci mówię?
Ponieważ właśnie to pole typu search box możemy wykorzystywać
na te dwa różne sposoby.
Jak możemy to wykorzystać u nas?
U nas mamy do przeszukania bookingu.
Jak pamiętasz, wróćmy tutaj do tego pola Booking.
Host Booking sra.
Gdzie tutaj mamy booking.
Natomiast tutaj chcemy wyszukiwać po nazwie listingu.
No i znów możemy do tego podejść na dwa sposoby.
Moglibyśmy sobie wrócić do data tutaj.
Jak pamiętasz, mamy tutaj rzeczywiście linkowanie do listingu, ale nie będziemy
mogli właśnie z tego wyciągnąć name.
Jak Ci mówiłem, musimy mieć tutaj flat data, więc moglibyśmy dodać tutaj albo po
prostu pole o nazwie Listing name i przy tworzeniu listingu wyciągać sobie
właśnie taką wartość tutaj z listingu i uzupełniać to pole.
W ten sposób będziemy mieć właśnie prosty dostęp do tego pola
i rzeczywiście mogłoby to działać.
Natomiast co w sytuacji, jeżeli nasz user, a w zasadzie nasz host,
zmieniłby nazwę takiego listingu?
Wtedy znów musielibyśmy aktualizować wszystkie rekordy bookingu
i odpowiednio właśnie poprawić sobie takie pole o nazwie Listing name.
Jeżeli chciałbyś zastosować takie rozwiązanie, oczywiście nic
nie stoi na przeszkodzie.
Przejdziemy jeszcze do Back and Workflow w kolejnym module i tam pokażę Ci jak
moglibyśmy taki problem rozwiązać.
Natomiast tutaj chciałbym jednak pozostawić taką strukturę danych, jaką
mamy i rozwiązać to nieco inaczej.
Przede wszystkim dać tutaj naszemu host owi możliwość wyszukiwania wszystkich
listing ów, które sobie zdefiniował w naszym serwisie.
Nie będziemy tutaj sprawdzać tego, czy rzeczywiście do nich
dopięte są jakieś bookingu.
żeby pokazać listę wszystkich.
Nawet jeżeli jakiegoś bookingu nie będzie, to przynajmniej otrzyma informację, że
taki właśnie lokal nie został jeszcze zablokowany.
Jak to zrobić?
Definiujemy to tutaj poprzez listę w Options wybieramy listing i
dodajemy oczywiście znane Ci już train, czyli host jest równe Parent user,
czyli tylko jego listingu nie będziemy sobie tutaj wyświetlać.
Po jakim polu chcemy przeszukiwać?
Oczywiście pod name.
No i właśnie jak teraz powiązać to, co nam się tutaj wyszuka z tym, co mamy tutaj?
Jak się domyślasz, możemy to zrobić albo tutaj poprzez Search for Booking i od razu
na etapie serwera wyszukiwać w zasadzie na właściwe listingu.
Opcjonalnie możemy dodać to tutaj właśnie w polu filtra.
Które rozwiązanie będziesz chciał zastosować zależy od Ciebie.
Natomiast jeżeli to damy tutaj, to w tym miejscu tak jak pamiętasz, najpierw
pobierzemy sobie wszystkie booking i dopiero potem będziemy je filtrować.
Może jest to lepsze rozwiązanie, ponieważ chciałbym, aby właśnie tutaj pojawiły się
te, które rzeczywiście już zostały pobrane, a więc dodajemy nowy Contains
i wybieramy, że listing ma być równy, jak nazwaliśmy to pole Listing Search Box.
OK.
I zobacz, co się stanie.
Nie mamy teraz żadnego błędu, ponieważ tak jak Ci mówiłem w polu Search Box jeżeli
bierzemy jakiś rekord, to on tam automatycznie wskakuje, a więc
możemy odnieść listing do listingu.
I teraz rzeczywiście powinno nam to zadziałać.
Wróćmy tutaj do Host Booking i do podglądu rekordów naszego hosta.
No i coś nam nie wyszło.
Mamy tutaj AP Coming.
Nie szukaliśmy żadnego rekordu, natomiast zniknęły nam wszystkie
nadchodzące bookingu.
Dlaczego tak się stało?
Otóż odpowiedź jest bardzo prosta.
Zadziałało nasze filtrowanie.
Natomiast jak zadziałało, skoro nic nie wpisaliśmy?
No właśnie tak zadziałało.
Babel wybrał sobie, sprawdził to pole typu search box,
sprawdził jaki ma rekord i wysłał to właśnie do naszego filtrowania.
A ponieważ nie znalazł żadnego, to dopasował to do pustego rekordu.
Oczywiście dopasowanie mu nie zadziałało, żaden rekord się nie zgadza.
Ponieważ każdy booking ma przypisany u nas jakiś listing.
A więc jak to rozwiązać?
Wracamy tutaj, Przechodzimy do tego pola.
Tutaj wsadzic do tej opcji File Dread i musimy teraz zaznaczyć tą
bardzo super ważną opcję.
Jeżeli będziesz właśnie tutaj do tych filtrów Konstantin przekazywał jakąś
wartość dynamiczną, która może być pusta tak jak u nas właśnie
to pole typu start box.
Po załadowaniu strony, kiedy użytkownik po prostu nic tam nie wpisze
to musisz zaznaczyć zawsze tą opcję Ignore emotikon train,
co oznacza, że jeżeli tutaj przekażesz jakąś pustą wartość
to bubel dzięki tej opcji sobie to zignoruje i zachowa się w taki sposób
jakby właśnie ten constans po prostu na tą chwilę obecną nie istniał.
Zobacz jak to teraz zadziała.
Ignorujemy Empty Train.
Odświeżam.
OK, już się pojawiły odpowiednie bookingu a ja mogę zacząć sobie wpisywać np Mordor.
Klikam.
Jak widzisz teraz to wyszukiwanie już tutaj zadziałało.
Oczywiście musielibyśmy teraz zadbać o to, aby takie pole w prosty sposób
można było sobie wyczyścić.
Oczywiście możemy to zrobić w ten sposób zaznaczyć to wartość i ją tutaj usunąć.
Jak widzisz tutaj już to działa.
Natomiast możemy tutaj dodać ikonkę, za pomocą której właśnie takie
czyszczenie mogłoby się odbyć.
To w jaki sposób to rozwiążesz to już zależy od Ciebie.
Ja na razie nie będę tego robił.
Zrobię to między lekcjami i pokażę Ci potem, jak prosty sposób można
właśnie zastosować takie czyszczenie.
Natomiast na chwilę obecną, jak widzisz, mogę tutaj właśnie wyszukiwać
sobie listing, na przykład read.
Mam od razu podpowiedź, klikam i zawiesiło mi się to tylko
i wyłącznie do tych wyników.
Dodatkowo działa to tutaj, ponieważ screeny są ze sobą połączone, czyli
jednocześnie działają te oraz ten.
Tutaj z Pola serca.
Mam nadzieję, że już teraz rozumiesz jak duże możliwości daje nam pole typu search
Box, a także jakie są jego ograniczenia.
No właśnie najważniejsze to to, że musimy mieć tu właśnie to pole zdefiniowane
bezpośrednio w danym data type A.
Po drugie niestety możemy wyszukiwać tylko po jednym polu naraz, co też
stanowi dosyć duże ograniczenie.
Natomiast te podpowiedzi są na pewno tutaj bardzo przydatne, ponieważ nie musimy
pamiętać pełnej nazwy danego rekordu, a Babel zadba o to, aby nam
tutaj właśnie podpowiedzieć.
Z mojej strony to by było na tyle w tej lekcji i widzimy się już za moment.