Aplikacje no-code z Bubble: Sekcja reviews - host

0:00W tej lekcji zajmiemy się ostatnim

0:02widokiem konta hosta w naszym dashboard jaki przygotowałem.

0:06Jest to oczywiście tutaj sekcja Review.

0:08Po przełączeniu się tutaj Full State uzyskuję właśnie taki widok.

0:13Jak widzisz, znów jest to powtórzenie tego, co przygotowałem wcześniej.

0:17A więc ja po prostu z klona dałem sobie tylko element o nazwie Guest reviews Where

0:23i wprowadziłem do niego kilka bardzo drobnych poprawek.

0:26Przede wszystkim zmieniłem nazwę na tym przycisku na Replay Review.

0:31Po jego kliknięciu otwiera się znany Ci już pop up, do którego dorzuciłem tylko tą

0:35grupę, gdzie mamy informację o tym, jaki rating w swojej opinii wystawił nasz gość.

0:41Jego tutaj komentarz oraz informacja.

0:45A w tym miejscu dodałem ten nagłówek i

0:47dzięki temu nasz host będzie mógł teraz odpowiedzieć właśnie na taki komentarz, a

0:51nasza aplikacja zyska na dynamice i wiarygodności, ponieważ zarówno goście

0:56jakich gości będą mogli dzielić się swoimi opiniami.

1:00W przypadku widoku Pool nic się tutaj nie zmieniła.

1:03Ja pozostawiłem go właśnie dokładnie w takiej formie, jaki był poprzednio.

1:08I w zasadzie na tym mogłaby się zakończyć cała ta nasza akcja.

1:11Ja jednak chciałbym tutaj wrócić do jednego, bardzo ważnego elementu, który

1:15pominęliśmy podczas naszej dotychczasowej pracy.

1:19Nie wiem, czy zwróciłeś na to uwagę.

1:20Mam nadzieję, że tak.

1:21A jeżeli nie, to zaraz wytłumaczę Ci o co chodzi.

1:25A więc tak chcę się wylogować.

1:29Następnie zalogować się na konto gościa.

1:34Przejdź do widoku sekcji Booking i widoku Empty State,

1:39ponieważ mamy tutaj przycisk Start exploding box, on chwilowo nic nie robi.

1:43Ja natomiast chciałbym, aby po jego

1:45kliknięciu otwierała nam się zaawansowana wyszukiwarka, a więc odpalało się niemal

1:49dokładnie to samo workflow, który odpala się gdy teraz kliknę w ten element.

1:54Jak pamiętasz dla naszego RISa element na

1:57dashboard Re wykorzystaliśmy odpowiedni custom state.

2:01Potem wykorzystaliśmy odpowiednie workflow

2:03oraz Condition, ale aby właśnie wyświetlać takie elementy.

2:07Natomiast w tym miejscu natrafisz na jeden bardzo ważny problem.

2:10Otóż zarówno nadmiar,

2:12jak i cały ten element box empty state są osobnymi useful elements.

2:19Tak jak pamiętasz, tłumaczyłem ci w

2:20lekcji, której mieliśmy wprowadzenia do tych elementów, że w Bubbles stanowią one

2:24niejako osobne strony, a przez to nie mogą bezpośrednio komunikować się między sobą.

2:30Natomiast to, że nie ma go bezpośrednio,

2:32nie oznacza, że nie mogą wcale Takich sposobów na to, aby różne

2:36elementy komunikowały się między sobą jest kilka, a jednym z najważniejszych i w

2:41zasadzie najczęściej używanych jest pasek adresu URL.

2:45Czyli możemy tutaj wykorzystać zarówno

2:47odpowiedni URL parameter, jak i podzielić nasz cały URL na segmenty,

2:51co wcześniej robiliśmy tutaj dla naszego menu i w ten sposób przekazać tam

2:55odpowiednie informacje i po co je potem pobierać?

2:58Wykorzystać odpowiednie condition, Ale i w

3:00ten sposób właśnie takie niepowiązane ze sobą elementy będą się mogły komunikować.

3:05Oczywiście w tym przypadku tutaj

3:07moglibyśmy wykorzystać na przykład zwykły parametr URL i za jego pomocą właśnie

3:12tutaj pokazywać albo ukrywać taką zaawansowaną wyszukiwarkę.

3:16Ja jednak chciałbym do tego tematu podejść w nieco inny sposób.

3:19Pokazać Ci kolejną metodę,

3:21za pomocą której właśnie taki element mogą się komunikować między sobą

3:25oraz porozmawiać o pewnej przykrej sytuacji, na którą na pewno nieraz się

3:28natkniesz, kiedy będziesz stosował takie inne metody.

3:32A tą metodą jest wykorzystanie po prostu pluginów.

3:36A więc przejdźmy do edytora.

3:38Przejdźmy do plugins.

3:40Ja chciałbym wykorzystać plugin o nazwie tutaj Zacznijmy sobie wpisywać DNS.

3:47I nosi on nazwę DNS Global Custom State.

3:50I tak w Babel bardzo często znajdziesz

3:52pluginy, które mają niesamowitą wręcz dokumentację np.

3:56pluginy od Zara Code. Tak właśnie działają.

3:58Tam jest wszystko dokładnie opisane.

4:00Masz podgląd jak działa taki plugin?

4:02Masz również dostęp do edytora twórcy takiego pluginu, więc możesz sobie

4:06dokładnie sprawdzić jak należy to wszystko poustawiać.

4:09Zresztą oni bardzo często wrzucają również

4:12instrukcje krok po kroku jak taki plugin wykorzystać w praktyce.

4:17Natomiast tutaj zobacz co się dzieje.

4:19Najpierw zainstalujemy taki plugin.

4:22I teraz kliknij plugin page co powinno nas przenieść na stronę pluginu.

4:28I klikamy Otwieramy.

4:31I nie ma tutaj nic.

4:32To jest właśnie ten problem, z którym bardzo często się spotkasz, a mianowicie

4:36twórcy zapominają o tym, aby dodać tutaj jakiekolwiek instrukcje.

4:40W takiej sytuacji możesz albo próbować

4:43rzeczywiście skontaktować się z twórcą takiego pluginu.

4:45Oni bardzo często są naprawdę komunikatywnie.

4:48Ja zresztą kilka razy pisałem do twórców, aby wyjaśnili mi jakieś opcje,

4:52albo gdy nie byłem pewien czy dokładnie to co tam ustawiam powinno działać tak jak

4:56sobie ten twórca zamierzył i bardzo często właśnie dostawałem odpowiednie odpowiedzi.

5:01Niemniej jednak trafisz również i na takich twórców pluginów, którzy chyba nie

5:06życzą sobie kontaktu i nie odpowiadają na żadne wiadomości.

5:09Wtedy możesz oczywiście próbować wykorzystać na przykład forum blabla i tam

5:13poszukać odpowiedzi albo podpowiedzi czy dobrze ustawiłeś dany plugin.

5:18Jak widzisz tutaj nie mamy żadnej informacji.

5:21Ja zainstalowałem sobie taki plugin, bo ustawiałem go według własnego uznania.

5:25Nie wiem czy zgodnie z zamierzeniami

5:27twórcy, ale uzyskałem efekt na którym mi zależało.

5:30Więc chyba działa to tak jak działać powinno.

5:32A więc zamykamy tą stronę.

5:36Dodaliśmy nasz plugin Global Custom Stats,

5:39dzięki czemu będziemy mogli ustawić custom globalne, do którego będziemy mieli dostęp

5:44z poziomu różnych Mariusa Elements, czyli z różnych miejsc naszej aplikacji.

5:49Klikamy Down i w pierwszej kolejności chcę

5:52przejść tutaj do Isabell element o nazwie Guest Booking Empty.

5:58A właśnie do tego.

6:00I będziemy teraz musieli taki plugin.

6:03Tutaj wstawia taki element dodany przez plugin wrzucić na naszą stronę.

6:07Ja w tym przypadku nie chcę sobie psuć

6:09tego całego układu, więc to co chcę zrobić to pokazać ten obrazek.

6:15Kolejno ubrać go w grupę align to parent.

6:19Nazwijmy ją np.

6:20Image wrapper czy Image Group.

6:22To nie ma tutaj większego znaczenia.

6:27A ponieważ jest to all in to parent, to

6:28bezproblemowo będę mógł wstawić tutaj właśnie ten element.

6:32On nie popsuje mi układu, on się nie będzie wyświetlał w podglądzie strony, a

6:35ja będę mógł sobie go tutaj odpowiednio zdefiniować.

6:38Zacznijmy od nazwy.

6:40Będzie to NAV Bar Global Custom State.

6:45Teraz tak nadajemy tutaj nazwę takiego statku.

6:48W naszym przypadku, o ile dobrze pamiętam, było to Show Advanced Search.

6:55Oczywiście nie musisz stosować dokładnie takiej samej nazwy, ale jeżeli już na

6:58jakąś się zdecydowaliśmy, to staraj się trzymać tej logiki.

7:02A więc mamy nazwę statku.

7:04Tutaj definiujemy jego data type.

7:06U nas będzie to oczywiście typ Boolean, a więc jest nowa i domyślna wartość.

7:11U nas było to ok.

7:13OK, mamy to zdefiniowane.

7:15To teraz dodajmy odpowiedni workflow, który będzie nam właśnie zmieniał taki

7:18custom state po kliknięciu w ten guzik start exploding.

7:23Zaczynamy sobie wpisywać stat.

7:27Jak widzisz mamy tutaj akcję, z której już

7:28wcześniej korzystaliśmy, czyli Set state of an element.

7:32Ta domyślna dodana przez Babel.

7:34Natomiast w momencie, kiedy wrzuciliśmy właśnie taki element na stronę,

7:37pojawiały się tutaj dodatkowe akcje właśnie zapewniane przez taki element.

7:42Czyli możemy w tym przypadku wybrać tą

7:43opcję, czyli set value a global custom state.

7:49Mamy tylko jeden element na stronie, a więc zostało odpowiednio rozpoznane,

7:54a my musimy teraz ustalić jaka waluta jako wartość chcemy zmieniać taki stat,

7:59oczywiście na wartość przeciwną niż była domyślnie ustawiona.

8:02A więc znów musimy wykorzystać trick,

8:04który wcześniej już pokazywałem, czyli odnieść się do takiego elementu.

8:12Kolejno wybieramy opcję Global Custom Stat

8:15Value, ponieważ chcemy zmienić value, a nie nazwę.

8:18I teraz wybieramy istną.

8:21W ten prosty sposób.

8:23Jeżeli tu była wartość, to zamienimy ją na Yes.

8:25A jeżeli będzie to wartość jest, to

8:27automatycznie po uruchomieniu takiego workflow ona zamieni się na NOW.

8:34Skoro ten element mamy gotowy, to workflow

8:37nam już działa, to musimy teraz podjąć następne kroki.

8:41Wracamy do dizajnu.

8:43Kopiujemy ten element na Global Custom State.

8:48I musimy go teraz wrzucić jak się domyślasz do naszego na bara.

8:51U nas jest to nasz dashboard a.

8:54Ja będę chciał go wstawić tutaj do tej grupy.

8:58Czyli do grupy CT Group. Wklejamy.

9:02To, co muszę tutaj zrobić, to przede wszystkim.

9:06Przejdźmy do layoutu. Chcę go sobie wycelować w pionie,

9:09przesunąć tutaj i tylko zmniejszyć go do dziesięciu pikseli.

9:14Nie potrzebujemy tutaj jakiegoś dużego rozmiaru tego pluginu.

9:18I teraz oczywiście będziemy wszędzie tam, gdzie odnosiliśmy się do custom state,

9:23czyli tego, który mamy zdefiniowany dla całego elementu element.

9:28A więc tego będziemy musieli właśnie ten custom stats podmienić na ten.

9:33Jak to najprościej zrobić?

9:34Moglibyśmy właśnie spróbować szukać wszystkie workflow i

9:37wszystkie condition, ale i tam to zmieniać.

9:41Ale najprościej będzie po prostu wykorzystać debugger w Babel.

9:44Czyli wywalamy ten custom state i otrzymujemy tutaj całą listę.

9:50W ten sposób Bubble sam nam pokaże, gdzie

9:52wcześniej właśnie wykorzystaliśmy taki custom state.

9:55I teraz odpowiednio musimy to podmienić.

9:57A więc klikam sobie tutaj.

9:59Podobny szereg błędów na pewno otrzymałeś

10:02w momencie, kiedy tworzyliśmy stronę profilowe.

10:05Ja specjalnie pominąłem ten krok z

10:06rozwiązywaniem tych błędów, ponieważ ich rozwiązanie najczęściej polega właśnie na

10:10kliknięciu w taki błąd i bubble sam wskaże Ci co i gdzie należy poprawić.

10:15A więc zacznijmy od tego.

10:17I mamy tutaj ok.

10:20Kiedy ten element jest widoczny?

10:22OK, czyli musimy się odnieść do.

10:26Na Global Custom State.

10:30Global Customs Value.

10:32Is jest.

10:36Wydaje mi się, że właśnie tak to powinniśmy zdefiniować.

10:40Zaraz zobaczymy. To jest grupa na FB Search Result.

10:44Jaka to jest grupa? Pokażmy ją sobie.

10:47A tutaj drzewku elementów.

10:55OK, czyli to jest ta grupa ok.

10:57Czyli na odwrót ta grupa powinna się pojawiać wtedy, kiedy

11:00ten custom state, a w zasadzie global custom state ma wartość.

11:04No.

11:07Zerknijmy teraz tutaj.

11:08Mamy grupę na Start Advanced, czyli ta dopiero powinna się pojawiać.

11:14Wtedy, kiedy ten custom state będzie miał wartość.

11:17Jest. A widzisz, tutaj mamy not found.

11:20Jest trudno, nawet się to zgadza.

11:22Tu się to odnosimy do custom statu, który

11:24nie istnieje i on powinien być równy tutaj i tu.

11:28Czyli jest.

11:29A więc na.

11:32Global taste state Customs, Valium issues.

11:39OK, tu mamy.

11:44Ten element Advanced Storage Group.

11:48OK, czyli to jest dokładnie.

11:50Ta grupa, która się będzie pojawiała.

11:53A więc możemy sobie wybrać tu na Global Custom State Custom z tych 2 i jest ok.

12:02Zadbaliśmy o odpowiednie pokazywanie takich elementów i ich ukrywania.

12:07I teraz oczywiście musimy tutaj odnieść

12:08się do samego workflow i zmieniamy właśnie ten custom state.

12:14A więc po kliknięciu w tą grupę będziemy.

12:19Się odnosić do.

12:25Właśnie tego elementu.

12:28OK, mamy create nowy custom state, czyli nie.

12:31Czyli musimy wywalić tą akcję i poszukać innej.

12:36Wybierzmy State.

12:38I teraz oczywiście wybieramy tę operację,

12:40którą zapewnia nam sam ten element, a w zasadzie sam ten plugin.

12:44I tu możemy wybrać.

12:46Jest.

12:51Natomiast po grupie po kliknięciu w grupę Advance kopiujemy sobie tą operację.

12:58Tu możemy się odnieść do nauki.

13:04Oczywiście moglibyśmy się odnosić

13:08do całego elementu i zamieniać go na przeciwny, natomiast w tym przypadku

13:11kliknięcie w tą pierwszą grupę powinno zmienić najazd, a kliknięcie w tą drugą

13:18powinno go zmienić na nową, więc możemy tutaj na stałe to wpisać.

13:21I teraz zerknijmy czy to tak naprawdę zadziała.

13:29Klikamy w tę grupę.

13:30Wygląda na to, że tak. OK.

13:33Jesteśmy w stanie pokazywać i ukrywać ten Advanced Search Box.

13:37Klikamy tutaj.

13:39Jak widzisz działa to dokładnie tak samo.

13:42A więc teraz te dwa różne elementy mogą komunikować się między sobą

13:46i wpływać na ten custom state, dzięki czemu za pomocą przycisku

13:51możemy pokazywać bądź ukrywać taką zaawansowaną wyszukiwarkę.

13:55Ja dziękuję Ci za uwagę w tej lekcji.

13:57W kolejnej lekcji przejdziemy już do podsumowania naszej pracy.

14:00I widzimy się już za moment.