MVP aplikacji w rekordowym czasie z Bubble: Data type - Review
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, której tym razem skupimy się na następnej
funkcjonalności w naszym serwisie, a będą nią oczywiście recenzje.
Pamiętaj recenzje w naszym serwisie będą mogły być wystawiane zarówno przez gościa,
który zablokował jakiś pobyt i był z niego zadowolony bądź nie,
ale także również przez samych hostów, którzy w odpowiedzi będą mogli wystawić
odpowiednią recenzję naszemu gościowi.
Ja specjalnie przygotowałem to w ten sposób, abyś miał w przyszłości pojęcie
jak to działa w takim systemie dwustronnym.
Najczęściej system recenzji, który pojawia się w innych tutorialach dotyczy tylko
jednej strony, a moim zdaniem jest to za bardzo ograniczone i dużo fajniej jest.
Jeżeli będziesz potrafił właśnie ogarnąć to również i w drugą stronę i obsługiwać
zarówno gości jak i naszych hostów.
Natomiast mój sposób na tą lekcję wygląda następująco.
Jak widzisz ja już tutaj przygotowałem całkiem sporo rzeczy.
Sekcja Review całkowicie mi się zmieniła.
Wygląda teraz trochę inaczej.
Pojawiły się tutaj nowe przyciski, ja już pod spodem dodałem odpowiednie typy.
Dodałem również kilka przykładowych rekordów tylko po to, żeby Ci omówić
jak to wszystko będzie działało.
Natomiast potem przejdziemy przez to wszystko jeszcze raz, krok po kroku,
odpowiednio to wszystko ustawiamy.
Pamiętaj również, że wszystko to co Ci pokazuję, to mój sposób
na daną funkcjonalność.
Jeżeli chciałbyś to zrobić po swojemu, to nie tylko będę zadowolony, ale
wręcz Cię do tego zachęcam.
Pamiętaj natomiast, że nawet jeśli coś proponujesz, a bardzo często piszecie do
mnie właśnie takie wiadomości, co się stanie jeżeli zepsuje to lub tamto,
to odpowiadam nic się nie stanie.
Zaraz Ci pokażę jak możesz sobie w bólu tworzyć tzw.
save pointy i szybko wrócić do etapu aplikacji na danym punkcie.
Ja wychodzę z prostego założenia, że nawet jeżeli coś psujesz,
to poprawiając to później uczysz się dużo więcej niż po prostu przerabiając
to, co Ci pokazuję krok po kroku.
A więc po kolei jak tworzyć sobie taki save point?
Wystarczy, że przejdziesz do edytora Babel, klikniesz w tym miejscu na main
na History i możesz sobie utworzyć save.
Jak widzisz, ja mam tutaj kilkaset fantów.
Wystarczy tylko, że klikniesz na ten button, nazwiesz sobie taki save i
zaczniesz praca.
Jeżeli rzeczywiście narysujesz coś tak, że nie będziesz w stanie tutaj wrócić
i cofnąć tych wszystkich zmian.
W każdej chwili możesz wybrać sobie właśnie taki gotowy save
i kliknąć Restore.
To taka rada na przyszłość i oczywiście zachęcam Cię do jak największej ilości
samodzielnej pracy, to wtedy najwięcej wyniesiesz z takiego sprintu.
Natomiast wracając tutaj do edytora, a w zasadzie do naszego dashboard
jestem na koncie gościa, jestem w sekcji Review i pojawiły mi się tutaj 3 zakładki.
Chciałbym, żeby to działało w następujący sposób.
Jeżeli użytkownik zapakuje jakiś pobyt no to tworzymy nowy rekord
w data typu Booking.
To już wcześniej zrobiliśmy i myślę, że to jest dla Ciebie całkowicie zrozumiałe.
Natomiast kiedy taki booking dobiegnie końca, chciałbym w określonym czasie po
jego zakończeniu, żeby on się tutaj pojawiał w tej sekcji.
Będąc tu, mimo że to jest sekcja review, ja sobie wyświetlam na razie booking.
Dlaczego tak robię?
Ponieważ bardzo często w tutorialach spotkasz się z taką informacją, że
wystarczy użytkownikowi po zakończeniu bookingu wysłać tylko maila
z prośbą o wystawienie recenzji.
No i niestety w prawdziwym serwisie to nie do końca zadziała.
Ja doskonale zdaję sobie sprawę, że użytkownicy po prostu
ignorują takie maile.
Zresztą ja też to robię.
A pamiętaj, że w naszym serwisie chodzi przede wszystkim o wzajemne zaufanie.
To znaczy, że użytkownicy powinni wystawiać recenzje, a ci powinni wystawiać
odpowiedzi właśnie po to, abyśmy mogli odpowiednio sortować takie listing,
castingi, czyli wysuwać na prowadzenie te, które są najbardziej popularne
i mają najwyższe recenzje.
I oczywiście pilnować tych, gdzie recenzje są najniższe i wtedy ewentualnie
interweniować i blokować konta takich hostów lub użytkowników.
Mam nadzieję, że to jest jasne.
I teraz rozumiesz dlaczego ja do tego w taki sposób podszedłem.
Natomiast pamiętaj jest to moje indywidualne podejście i nie musisz się
oczywiście całkowicie z nim zgadzać.
OK, skoro to mamy omówione, to przejdźmy dalej.
Mam tutaj bookingu, do którego będę chciał wystawić recenzję jako gość.
Czyli zakończył mi się pobyt w Sakura Heaven i teraz chciałbym
go oczywiście ocenić.
Klikam w ten przycisk i mogę oczywiście tutaj wystawić ocenę
i wpisać swoją recenzję i oczywiście wysłać ją dalej.
To co się stanie to tworzy mi się nowa recenzja i wskoczę do tego widoku.
Jak widzisz tutaj jakąś recenzję już sobie wystawiłem, natomiast czekam
teraz na odpowiedź hosta.
Host powinien zobaczyć właśnie taką nową recenzję u siebie w panelu, a w zasadzie u
siebie w dashboard ie i oczywiście wystawić tutaj odpowiedź tak,
żeby właśnie to działało w obie strony.
Jak widzisz nie dodawałem tutaj nigdzie opcji usunięcia, ignorowania itd.
Możesz to oczywiście wdrożyć we własnym zakresie.
Ja natomiast niejako chcę wymuszać na użytkownikach takie akcje,
czyli wystawienie recenzji oraz potem wystawienie odpowiedzi.
Natomiast w momencie, kiedy host zobaczy taką recenzję, wystawi odpowiedź,
to ona stąd u gościa wskoczy.
Tutaj do tego trzeciego widoku o nazwie Reply.
Czyli mamy tutaj już taką pełną ścieżkę.
My wystawiliśmy recenzję.
Host nam odpowiedział i mamy to tutaj.
W tym widoku takiego listingu to dotyczy.
Możemy sobie do niego przejść.
Jak widzisz, dodałem tutaj również gwiazdki, czyli jaką ocenę wystawił tutaj
gość i potem jaką ocenę wystawił Oczywiście host w odpowiedzi.
To co jeszcze tutaj może zdziwić to właśnie nazwę na tych przyciskach.
Do tego też zaraz sobie przejdziemy.
Ja pokażę Ci nieco inny sposób właśnie na tutaj Zarządzanie takimi
widokami i dodatkowa rzecz, do której chciałbym
jeszcze przejść w pierwszej kolejności to w ogóle wrócić tutaj na stronę Dashboard.
Przejść sobie tutaj do tych elementów, które tutaj zamieszczamy
i przede wszystkim tak w przypadku wishlisty wywalamy
po prostu gest wishlisty Empire.
Jak pamiętasz z poprzedniej lekcji, zawsze będziemy tworzyć taką default ową
listę, której nie da się usunąć.
Dlatego po prostu właśnie ten widok empty nie będzie nam tutaj całkowicie potrzebny.
A dodatkowo, jak widzisz tutaj Condition mi się zmienił.
Jeśli tylko użytkownik kliknie i przejdzie do tej sekcji dla tego widoku,
to zawsze będziemy wyświetlać mu właśnie tą listę.
Dodatkowo pozmieniałem to samo oczywiście dla review na Guest Reviews.
Jak widzisz, tutaj odnosimy się już rzeczywiście do review, które istnieją w
systemie i sprawdzamy właśnie, czy takie review istnieje
do samego data type review.
Jeszcze sobie za chwilę przejdziemy.
Natomiast są tam dwa bardzo ważne pola guest i host.
Czyli jeżeli guest jest równe user, no to znaczy, że review wystawione przeze
mnie tam istnieje w systemie.
Analogicznie robimy to dla hostów.
Myślę, że po skończeniu tej lekcji będziesz tutaj bezproblemowo w stanie
sobie odpowiednio zdefiniować te conditions, ale tak, żebyśmy mogli w końcu
pozbyć się tych zwykłych numerów, które ustawialiśmy jeszcze w pierwszym sprincie.
A więc skoro mamy tutaj omówione w jednym mniej więcej jak ma tutaj działać
cały ten system, chociaż może jeszcze nie.
Może jeszcze Przejdźmy tylko na chwilę do konta hosta.
Zerknijmy.
Ja mam tutaj jakieś przykładowe bookingu i tutaj hostem jest Sara.
Spróbujmy przejść na konto Sary i zobaczyć, czy ja tam
wystawiłem właśnie jakiś siebie.
Kogo my tu mamy, a nie mamy lewej?
OK, mogę przejść na konto Edwina czy jakkolwiek się to wymawia?
Spróbujmy go tutaj namierzyć.
OK, spróbujmy wybrać raz.
Zależy mi na tym, abyś zobaczył jak to wygląda.
Oczywiście od strony hosta.
Znów mamy tutaj Revue.
Jak wejdziesz to jest waiting for reply.
Nieco zmieniłem ten widok, to otrzymałem jakąś recenzję od Johnnego
i teraz będę mógł na nią odpowiedzieć.
Znów przenoszę tutaj sporo tych informacji.
To czy zrobisz to w taki sam sposób jak ja, zależy oczywiście od Ciebie.
Ja lubię informować moich użytkowników o wszystkim.
Tak, żeby było jasne, gdzie dokładnie się znajdują i jakiego listingu dotyczy taki
reviews, taki komentarz I oczywiście będą mogli wystawić odpowiedź, która po
wystawieniu wskoczy do widoku Reply.
Akurat w przypadku tego użytkownika nie mam żadnej odpowiedzi.
Natomiast jeżeli przejdę tutaj na tej konsoli, to jak widzisz tutaj zaraz
tam to powinno wskoczyć reviews.
Reply.
Wygląda to niemal dokładnie tak samo jak na koncie gościa, czyli mamy tutaj
główną recenzję i oczywiście odpowiedź.
OK, mam nadzieję, że teraz cała ta logika i to jak to ma funkcjonować
jest dla Ciebie jasne.
Przynajmniej teoretycznie.
A zaraz przejdziemy oczywiście do praktyki i rozbijemy to na poszczególne kroki.
A więc wracamy do edytora i w pierwszej kolejności chciałbym
przede wszystkim wywalić tutaj te wszystkie one mi są na
razie tutaj niepotrzebne.
To były tylko testowe.
Zaraz będziemy sobie to odpowiednio tutaj tłumaczyć, chociaż może nie.
Chociaż jeszcze zostawmy, jak będę omawiał tutaj zmiany w
dizajnie, żeby to było widoczne wszystko.
Natomiast wróćmy do Data Type.
I tak tworzymy nowy Data Type o nazwie Review.
Ja go tutaj już dodałem.
A teraz omówmy sobie wszystkie pola, które dodałem.
Przede wszystkim wyciągam sobie tutaj booking.
Jak pamiętasz, na koncie gościa najpierw wystawiamy booking,
a potem tworzymy do nich recenzje.
Ja chcę mieć takie połączenie pomiędzy konkretnym booking em i recenzją
jaka została wystawiona.
I to samo połączenie robię robia również w drugą stronę,
czyli dla bookingu to dałem tutaj sobie reviews i oczywiście linkowanie do
samego review to będzie jeden do jednego.
Nie tworzymy żadnej listy ani w jedną ani w drugą stronę.
Wracamy do review.
Mamy tutaj kolejne dwa pola, czyli guest i host.
To będą oczywiście pola typu user.
Mamy tutaj również pole Replay, które będziemy oznaczać wartością jest lub None.
Do tego jeszcze zaraz przejdziemy.
Mamy tutaj oczywiście listing, tak żebyśmy mogli przy recenzji wyświetlić
jakiego listingu to dotyczyło.
Mamy tutaj oczywiście samą treść recenzji.
Rating, czyli ile gwiazdek dany użytkownik wystawił.
I ostatnie pole, które połączone jest z tym replay.
Czyli najpierw wystawiamy recenzje, a potem do takiej recenzji host
będzie wystawiał odpowiedź.
Natomiast jak widzisz mam tutaj Ripley, a to się odnosi do Rivii, czyli linkuje do
tego samego typu, w którym akurat jestem.
Z takim linkowanie jeszcze do tej pory nie mieliśmy do czynienia, ale
jest ona bardzo popularna.
Bardzo często będziesz linkował właśnie do tego samego Data Type.
Z tego prostego powodu, że odpowiedź będzie zawierała dokładnie te
same pola, które mamy tutaj w GW, więc bez sensu byłoby po prostu aplikować
data type tylko po to, żeby utworzyć sobie właśnie połączenie
pomiędzy jednym a drugim data type.
Dlatego też właśnie najpierw będziemy tworzyć tutaj główny
komentarz gdzie s replay będzie.
No bo to oczywiście nie jest odpowiedź.
I replay będzie na początek miała pole puste i dopiero wtedy, kiedy host w swoim
kodzie zobaczy taki komentarz i utworzy odpowiedź, to my będziemy tworzyć właśnie
kolejny item w Data Type Review,
który tym razem będzie miał ID replay ustawione na Yes, bo to będzie oczywiście
odpowiedź i wstawimy ja tutaj właśnie podporę replay do tej głównej recenzji.
I tak, zdaję sobie sprawę, że ta logika na pierwszy rzut oka jest dosyć mocno
skomplikowana, ale zobaczysz jak rozbijemy ją na czynniki pierwsze, to nie
okaże się wcale taka trudna.
Natomiast jak widzisz tutaj Data Day Booking, oprócz kolumny Revue dodałem
jeszcze dwa pola, które będą bardzo pomocne.
Jest to kolumna City.
O tym rozmawialiśmy sobie właśnie kiedy tworzyliśmy tą wyszukiwarkę na stronie
search i mówiłem Ci, że to pole będzie nam bardzo przydatne.
Wtedy będziemy mogli sobie dodać filtrowanie tych bookingu parkingów przez
miasto już na etapie serwera, a nie poprzez właśnie
filtrowanie poprzez filtry.
Natomiast to co dodałem tutaj jeszcze to pole and date.
Czyli wyciągam sobie datę zakończenia takiego bookingu.
To przyda mi się nie tylko przy sortowaniu, do czego też jeszcze zaraz
przejdziemy, ale również do tego, aby zdecydować
kiedy wyświetlać użytkownikowi właśnie takie booking, do których
musi wystawić recenzję.
Niestety poprzez datę nie będziemy mogli wyciągnąć w prosty sposób tych dat.
Dlatego też właśnie przy tworzeniu bookingu będziemy mogli
dodatkowo uzupełnić te pola.
A skoro wiemy jakie pola dodaliśmy, to właśnie może zadbajmy teraz najpierw o
sam booking je tutaj odpowiednio uwzględnimy.
A więc przede wszystkim przechodzimy tutaj na stronę listingu.
Tu mamy oczywiście całą logikę do tworzenia bookingu.
Zerknijmy. Mamy tutaj foldery Reserved.
OK, i tutaj mamy właśnie Create New Booking I tutaj właśnie będę chciał dodać
oczywiście te dwa pola, czyli przede wszystkim City
oraz oczywiście end date, bo o pole Revue zadbamy już przy samej recenzji,
a więc dodajmy City.
Oraz.
End Date i City to będzie oczywiście miasto wyciągnięte właśnie
z naszego listingu.
And Date.
To będzie Oczywiście mogę sobie wybrać to selected range.
I odnieść się oczywiście do daty końcowej, czyli do End.
I to wszystko co musieliśmy tutaj dodać do naszego bookingu.
Skoro to mamy z głowy, to przejdźmy teraz do samego designu.
Omówmy sobie co ja tam w zasadzie pozmieniałem.
A więc przechodzę w pierwszej kolejności do Guest reviews Re.
Do designu.
I zacznijmy tutaj od tych buttonów.
Jak pamiętasz w poprzednim przykładzie mieliśmy tutaj zwykłe batony.
Mogę to nawet zademonstrować przy Wyszliście, bo tam chyba
właśnie z tego korzystaliśmy.
Nie, nie przeszły.
Szliście przy booking. Ach.
Gdzieś na pewno. Spróbujmy to sobie namierzyć.
O właśnie tu mieliśmy takie brutalne jak widzisz właśnie tutaj.
Po kliknięciu w taki button wybierzmy sobie workflow.
Ustawialiśmy Custom State i wpisaliśmy tutaj ręcznie właśnie taką wartość.
To jest po prostu zwykły tekst pisany z palca i to samo robiliśmy właśnie tutaj
dla custom states ustawialiśmy sobie np. Karen Wu.
Był to zwykły tekst.
Jako default value wpisywałem po prostu ręcznie AP Coming i potem porównywaliśmy
właśnie ten tekst z tym tekstem.
Mówiłem ci, że możemy to oczywiście zastosować Option Set.
Natomiast ponieważ korzystamy z tego tylko tutaj, to dużo łatwiej było
to zrobić w ten sposób.
Natomiast teraz chciałbym Ci pokazać nieco inne podejście, z którego ja
też bardzo często korzystam.
Nie wiem czy jest lepsze, ale chciałbym, żebyś wiedział, że jest
właśnie również i taka opcja.
Mianowicie wracamy do Guest Reviews Ra i tym razem tak dodaję sobie
tutaj Custom State o nazwie View.
Jego wartość jest ustawiona na text, natomiast tutaj nie wpisuję
żadnych default value.
Dlaczego?
Ponieważ te batony zamieniłem na zwykłe grupy.
A skoro mamy grupę, to jak się domyślasz możemy przekazać
typowy content i data source.
Day of content ustawiam w tym przypadku na tekst, ponieważ właśnie taki type ma nasz
custom state i tutaj jako data source w tym miejscu ręcznie
wpisuję po prostu wartość.
Nie musisz tego przekazywać z zewnątrz.
Właśnie skoro masz tutaj tekst, możesz ręcznie wprowadzić taką wartość.
Tu mam właśnie padding, tu mam Waiting for reply i tu mam reply.
A teraz przejdźmy do Dashboard i przełącz się na konto gościa.
A więc wyloguj się.
I zaloguj tutaj jako demo gest.
Dodatkowo pozbądźmy się tego debuggera.
I przejdźmy do review, żeby widział dokładnie wszystko co się dzieje.
Mamy te trzy przyciski.
Ja mam tutaj.
Właśnie wpisałem ręcznie ten tekst i jego tutaj wyciągam właśnie w
tym miejscu jako Parent Group text.
Tekst natomiast, ponieważ pisałem to w takiej formie
właśnie Padding waiting for reply, to dokładnie taki tekst pojawia
mi się tutaj na tych przyciskach.
No i musisz przyznać, że nie wygląda to zbyt fajnie.
Dlatego też możemy to w bardzo prosty sposób zmienić.
Przechodząc tutaj do tego tekstu i wyciągając ten tekst, a kolejno
wybierając tutaj opcję Przede wszystkim kapitalizm AdWords.
Czyli każde słowo będzie pisane z dużej litery, a dodatkowo chce się
pozbyć jeszcze tego myślnika.
Czyli wybieram sobie Find out place.
Z tego też już korzystaliśmy.
Zamiast myślnika wstawiamy tu po prostu spacja.
Klikam close.
Mogę sobie skopiować to wyrażenie wszędzie będzie dokładnie takie same.
I tutaj również.
No i dobrze.
Co robimy?
Kolejno po kliknięciu w taki przycisk oczywiście ustawiamy nasz custom state
i w tym przypadku wszystkie te akcje będą identyczne, ponieważ
po prostu odnosimy się do Disk Group Text.
Czyli jeżeli dla tego przycisku mieliśmy wartość padding to dokładnie taka zostanie
wpisana właśnie tutaj dla naszego custom state.
statu.
Jak widzisz dzieje się to dokładnie dla każdego takiego przycisku.
Natomiast co zrobić w sytuacji, kiedy załaduje nam się strona?
Jak pamiętasz tutaj mamy ten custom style główny ustawiony,
ale ja nigdzie nie podałem default value.
No i mógłbym rzeczywiście tutaj wpisać padding, natomiast to tak nie zadziała.
Nie chciałbym robić tego w ten sposób.
Chciałbym się odnieść bezpośrednio do wartości na tym przycisku,
ponieważ on może ulec zmianie.
Za tydzień stwierdzi, że to nie jest padding, tylko waiting for
review, cokolwiek innego i wtedy musiałbym pamiętać o tym,
żeby sobie tą wartość tutaj zmienić.
Dlatego też ustawiamy ją po prostu poprzez page is loaded.
Odnosimy się do naszego Custom status i wyciągamy wartość
właśnie z tego przycisku.
Nie możemy tego ustawić ręcznie.
Musimy właśnie to zrobić poprzez workflow.
Mam nadzieję, że rozumiesz w jaki sposób to działa.
Wtedy tutaj po załadowaniu się takiego elementu, label pobierze sobie
wartość z tego przycisku tego tekstu.
Ustawię go jako custom state.
Jak widzisz mam tutaj odpowiednie condition ale, które sprawdzają jaki tekst
jest ustawiony i czy on się zgadza i wtedy kolor tych przycisków mi
się odpowiednio zmienia.
Natomiast same konfesjonale znów nie są niczym trudnym.
I wszędzie będą dokładnie tak samo.
Wyglądają one w ten sposób.
Czyli odnosimy się do Custom state View.
To jest oczywiście tekst.
Jeżeli ten tekst jest równy disk lub text, no to wtedy właśnie ten background koloru
sobie zmieniamy, żeby wiedzieć który przycisk, a w zasadzie który użytkownik
wybrał właśnie i w tej chwili z niego korzysta.
Jak widzisz jest z tym trochę zabawy.
Natomiast ja bardzo lubię właśnie takie podejście i odnoszenie się do
tekstu wyciągniętego z grup.
Moim zdaniem dużo łatwiej się z tym pracuje niż z takim tekstem pisanym
bezpośrednio z palca, ponieważ unikamy ryzyka, pomyłek i nie musimy pamiętać
o tym, żeby wprowadzać tam zmiany.
Jeżeli uznamy, że ten tekst powinien brzmieć nieco inaczej,
a więc skoro tutaj te filtry mamy z głowy.
Ja w przypadku tej grupy w pierwszej kolejności zmieniłem
jej nazwę na ref type.
Kolejno n text to jest ręcznie wpisane type, a po kliknięciu w tą grupę
będzie nam się otwierała ta grupa fokus czyli ta tutaj ref Type focus i tutaj mamy
podział na różne typy takich recenzji.
All czyli wszystkie pozytywne, neutralne i negatywne.
Tego chwilowo nie będziemy sobie tutaj wdrażać.
Na razie po prostu zostawiamy tą grupę nie ruszone.
I oczywiście tutaj jedyne co się będzie działo to ta grupa będzie się pojawiała i
zamykała i ona na razie w żaden sposób nie będzie wpływała na wyniki.
A więc wróćmy znów do edytora.
Zamknijmy tą grupę i przejdźmy teraz do najważniejszej rzeczy, czyli
oczywiście do Repeat Group.
Zamknijmy tę chwilę.
Jak widzisz, mam tutaj trzy.
Pierwsza będzie widoczna oczywiście wtedy, kiedy ten view jest równy padding.
Czyli tutaj widzisz, odnoszę się do view.
Tym razem muszę się odnieść do konkretnej grupy, czyli padding filter group.
Tak nazwałem tą grupę i z niej wyciągam sobie tekst, porównuję
i wtedy wyświetlam tutaj właśnie tą grupę.
Natomiast co my tutaj mamy?
Już Ci pokazuję.
Tak, sama ta repeat ING Grupa tak jak mówiłem odnosi się do bookingu,
a więc wyszukuje sobie wszystkich bookingu, gdzie
guest to jest oczywiście parent user and date jest mniejsza właśnie od daty
bieżącej, czyli wyświetlam tylko te booking, które już się
zakończyły i review jest empty, czyli takiego bookingu jeszcze
nie wystawiliśmy recenzji.
Jak widzisz dodatkowo tutaj przydaje mi się to pole and date
nie tylko tu, ale również do sortowania.
W ten sposób mogę sobie wyświetlać tutaj odpowiednio posortowane takie booking.
Kolejno oczywiście przekazujemy tutaj booking.
Tutaj niewiele się zmieniło, natomiast tak ja ten element
już tutaj mogę do niego przejść, czyli do naszego listingu,
który wygląda w ten sposób.
Ja ten element zamieniłem jak widzisz tutaj na element i dodatkowo chciałbym
jeszcze tutaj zwrócić Twoją uwagę na jedną bardzo ważną rzecz.
Myślę, że element bez problemu sobie poradzisz i odpowiednio
przekazujesz tam te tamte wartości.
Natomiast przejdźmy jeszcze do tych Properties.
My je wykorzystywaliśmy na stronie search i tam przekazywaliśmy sobie np.
cenę maksymalną.
W ten sposób mogliśmy przekazać to dalej, np.
do naszego Price Leadera.
Natomiast chciałbym, żebyś teraz bardzo mocno się skupił,
ponieważ właśnie możliwość dodawania tych property sprawia, że Usability Elements
stały się niesamowicie potężne.
W moim przypadku ja tutaj dodałem 1 o nazwie Show Rating.
Zaznaczyłem, że on może być opcjonalny i wpisałem sobie tutaj default value.
Ona jest za pomocą właśnie tego parametru.
Będę pokazywał tutaj całą tą grupę, czyli właśnie tą grupę z ratingiem.
Ona nie zawsze jest mi potrzebna, czasami właśnie ta cała.
Cały ten element, w zasadzie just label element nie będzie musiał
wyświetlać tego właśnie elementu.
Dlatego też właśnie to w Conditions mam, że jeżeli on jest ustawiony na
no to chcę go po prostu ukryć.
I widzisz, teraz takim właśnie parametrem jest to super mega proste.
Natomiast przedtem musielibyśmy tworzyć dwa osobne elementy i na jednym właśnie
wyświetlać taki rating, a na drugim go po prostu całkowicie usunąć.
A teraz wystarczy jeden prosty parametr i mogę sobie tutaj widzisz
odpowiednio to ustawić.
Dlatego też chcę, żebyś sobie na spokojnie zerknął na te parametry i zastanowił się,
kiedy one mogą być dla Ciebie przydatne.
Natomiast wracamy sobie tutaj do Guest Reviews.
Otwórzmy sobie właśnie to reviews padding.
I co my tutaj mamy?
Oczywiście mamy właśnie ten listing i button, który będzie nam otwierał popup,
a popup będzie wyglądał w ten sposób.
Pokażmy go sobie.
I tak dla całego popu oczywiście Tutaj pop content ustawiamy na booking,
ponieważ będziemy tworzyć nową recenzję na podstawie bookingu.
Mam nadzieję, że to jest zrozumiałe.
Tutaj jak widzisz znowu przekazuję ten sam element, natomiast tutaj Show rating
ustawiłem na Noł, a więc ta grupa mi zniknie.
To wszystko jest dokładnie tak jak było.
Czyli mamy ten element do ustawiania ratingu, a w zasadzie
wskazywania ilości gwiazdek.
I oczywiście tutaj ref do importu.
Jak to wygląda?
Mamy tutaj właśnie tą repeat grupę.
Mamy ten listing, więc jak widzisz tą grupę tutaj z ratingiem klikam Start
i to jest dokładnie ten sam element, tylko tutaj tą grupę ukrywam.
Teraz mogę tutaj oczywiście dodać odpowiednią ilość gwiazdek i wystawić
właśnie tutaj odpowiedni komentarz.
Tego jeszcze nie będę robił.
Chciałbym wrócić do kolejnych grup na Waiting for Reply.
Jak widzisz znowu mamy tą samą grupę z listingu.
I tu przekazuję sobie komentarz, który właśnie wystawiłem tutaj do tego bookingu.
Natomiast zobacz jak sobie to ustawiłem.
Wracamy tutaj.
Zamykamy ten popup.
Przejdźmy tutaj do odpowiedniej repeat grupy.
Tym razem jest ona.
To jest tak repeat thing grupa, czyli Reviews.
Ten skrót w FR to oczywiście Waiting for Replay i to jest nasza repeat grupa.
Pokażmy ją sobie i tym razem.
Mam tutaj jak widzisz trzy rzędy.
Podział na dwie kolumny Data Source to oczywiście nasze archiwum
i tu wyszukujemy właśnie sobie Ref.
Gdzie GES to jest Current user?
Gdzie replay jest empty czyli my wystawiliśmy komentarz, ale
host jeszcze na niego nie odpowiedział.
I gdzie zaznaczam to pole, że to nie to nie jest odpowiedź.
To jest ten główny komentarz.
Do tego jeszcze wrócimy.
Pokażę Ci później co by się stało, gdybyśmy tego parametru
tutaj nie zastosowali.
Natomiast reszta już jest prosta sortuje sobie po created date.
W samym tym elemencie mam oczywiście grupę Reviews.
Tutaj mam właśnie ten listing.
Natomiast tą część, gdzie mam właśnie informację z komentarzem
i użytkownikiem, którego wystawił ilością gwiazdek, ja znów zamieniłem na element
i tym razem nazwałem go w ten sposób.
I mam tutaj kolejny parametr informacją czy to jest komentarz
wystawiony przez gościa czy nie.
Mogę to zrobić za pomocą jednego parametru i gest ustawiony na jest lub now
jak on wygląda tutaj.
Tu oczywiście przekazujemy grupę DW.
Tu mamy ten parametr.
Tym razem oznaczyłem Optional.
On jest wymagany, ponieważ ja muszę wiedzieć czy rzeczywiście mam tutaj
wyświetlić komentarz gościa czy odpowiedź hosta.
Dlatego też oznaczyłem ten checkbox.
Nie mam tutaj żadnych default value.
W ten sposób będę wymuszał sam na sobie przy korzystaniu z takiego user
element, żeby podać tamte informacje.
A tutaj mam tu oczywiście odpowiednie przekazywanie, czyli
wyświetlam tutaj ten komentarz.
W tym polu jak widzisz tutaj review message.
A tutaj mam dwie grupy.
W przypadku gościa odnoszę się jak widzisz wszędzie do całego tego elementu.
Z tego wyciągam first name last name oczywiście jego avatar.
Tutaj mogę sobie właśnie review odnieść się do bookingu i
wyciągnąć sobie właśnie datę.
Startował i datę końcową.
Dlatego właśnie chciałem to połączyć w obie strony, czyli booking z reviews
a reviews z Booking.
Mam nadzieję, że tutaj wszystko jest dla Ciebie zrozumiałe.
Po prostu przekazujemy to wszystko dynamicznie.
To samo robimy tutaj w przypadku hosta.
Tutaj po prostu piszemy Professional host.
I jak widzisz mam tutaj 2 proste warunki.
Jeśli ten parametr jest guest jest now to wyświetlam tą grupę,
a jeżeli parametr s jest równy yes czyli wartości Tak, to oczywiście
wyświetlamy tą pierwszą grupę.
Mam nadzieję, że zaczynasz dostrzegać potęgę tych parametrów i tego jak
fajnie możemy teraz tworzyć element.
Natomiast tutaj będzie to działało właśnie w ten sposób,
to wyświetla mi się oczywiście tylko ta jedna grupa, a jak widzisz tutaj
mam dokładnie te dwie same grupy.
Jak widzisz w tym przypadku wykorzystuję dokładnie te same user element
tylko przekazuje inny parametr.
A więc wróćmy tutaj.
Wróćmy do Guest Reviews.
Byliśmy właśnie na tej drugiej repeat grupie, czyli Waiting for Reply.
I oczywiście przekazaliśmy sobie listing z takiego review, a tu przekazałem
sobie po prostu ten komentarz.
Mam nadzieję, że to wszystko jest dla Ciebie jasne i oczywiście odpowiednie.
Wartość dla tego parametru to oczywiście trzecia grupa,
gdzie mamy już odpowiedź i tym razem właśnie wyszukujemy Search for
Reviews, gdzie guest to jest parent user i reply isn't empty.
Czyli nasz host odpowiedział a my właśnie przenosimy review z waiting for reply to
rip played jak mamy tutaj to ustawione?
Znów jest to oczywiście review, znów przekazuję tutaj listing,
a tutaj jak widzisz mam dokładnie dwa te same elementy przekazuję do jednego
review, a do drugiego Revue Replay.
Czyli tu mam główny komentarz, tu główną recenzję, a tu mam odpowiedź
hosta, który jej udzielił.
Natomiast korzystamy dokładnie z tego samego element,
posiłkując się tylko innym data Source i zmieniając to Properties.
Tak więc tą część mamy omówiony.
Mam nadzieję, że już teraz rozumiesz mój zamysł jak ja to ustawiałem
i jak to powinno działać.
Skąd się wzięły te dziwne nazwy i właśnie jak działają?
Ten over just element w zasadzie nie nowe, ale po prostu element
połączony z tymi parametrami.
Natomiast nie chcę już przedłużać tej lekcji.
Wiemy już teoretycznie jak to ma działać.
Omówiliśmy sobie design i te poprawki w przekazywaniu danych, a w
kolejnej lekcji przejdziemy już właśnie do tego, aby dodać tutaj odpowiednią logikę.
Ja dziękuję Ci już za uwagę i widzimy się dosłownie za moment.