Bubble: Wprowadzenie do Custom States

0:01Kontynuujemy od miejsca, w którym skończyliśmy w poprzedniej lekcji.

0:04Jesteśmy na stronie dashboard.

0:06Tą stronę pozostawimy na chwilę obecną w takiej formie.

0:09Nie będziemy tutaj nic więcej zmieniać, ponieważ jej budową, czyli budową pełnej

0:13aplikacji zajmiemy się dopiero w kursie praktycznym.

0:16Wróćmy więc do strony

0:19autentyfikacji.

0:20Przejdźmy do podglądu i zastanówmy się teraz w jaki sposób dać

0:25naszym użytkownikom możliwość logowania się do naszej strony, czyli naszej

0:29aplikacji po tym jak już utworzą tutaj konto.

0:33Zerknijmy więc jak rozwiązaliśmy to w projekcie wzorcowym.

0:36Jeżeli teraz klikne przycisk sign in,

0:39to zostanę jak się domyślasz przekierowany do strony logowania.

0:43Jak widzisz różnice pomiędzy tymi stronami są minimalne.

0:46Tak naprawdę mamy to tylko nieco inne teksty na przyciskach.

0:50W tym miejscu, na tym przycisku oraz w tej

0:52części, dodatkowo na stronie logowania nie wyświetlamy pola full name,

0:57jest ono nam niepotrzebne.

0:59Do zalogowania użytkownika wystarczy tylko e-mail oraz jego hasło.

1:05W jaki więc sposób osiągnąć efekt, o który nam chodzi?

1:08Otóż mamy w tej kwestii dwa wyjścia.

1:10Możemy przygotować dwie osobne strony,

1:12czyli osobno stronę z logowaniem i osobno stronę z rejestracją.

1:16W zależności od tego, który przycisk użytkownik kliknie na

1:19stronie, czyli jeżeli kliknie w przycisk sign in, to przekieruje go na stronę logowania.

1:25Natomiast jeżeli klikniesz przycisk sign up, get started lub to przycisk w sekcji

1:30pricing zostanie przekierowany na stronę rejestracji.

1:33Jest to oczywiście jak najbardziej poprawne rozwiązanie.

1:37Ja natomiast chciałbym Ci zaproponować nieco inne wyjście.

1:40Otóż jak wiesz, ponieważ te strony

1:42różnią się od siebie w zasadzie tylko drobnymi szczegółami,

1:45my wykorzystamy tutaj tylko i wyłącznie jedną stronę.

1:49Ale w jaki sposób sprawić, aby wyświetlała

1:51ona tylko te informacje, których akurat potrzebujemy?

1:53Otóż w tym celu wykorzystamy tzw.

1:55custom states.

1:57Jeżeli korzystałeś z framework'ów takich

1:58jak np. React, to pojęcie custom states jest już Ci doskonale znane.

2:03Jeżeli nie, to już Ci tłumaczę na czym to polega.

2:06Otóż custom states to dynamiczne wartości

2:08przypisane do elementu, przechowywane w przeglądarce użytkownika.

2:12Takie wartości możemy odczytywać, możemy je aktualizować bądź zerować.

2:17A ponieważ egzystują one tylko w przeglądarce użytkownika,

2:21to będą przypisane po pierwsze tylko i wyłącznie do niego,

2:24a po drugie zostaną utracone, czyli przywrócone do wartości domyślnych

2:28za każdym razem, kiedy użytkownik przeładuje stronę lub ją zamknie.

2:32Ja wiem, że takie wyjaśnienie może na chwilę obecną niewiele Ci mówi,

2:36ale nie przejmuj się, zaraz zademonstruje Ci w praktyce jak to działa.

2:40W tym celu wróćmy do edytora

2:42i utwórzmy custom states dla naszej strony autentyfikacji.

2:46Aby dodać custom states przechodzę do danego elementu.

2:50W moim przypadku będzie to po prostu cała strona.

2:53Klikam tutaj w ikonkę i.

2:56I w tym miejscu mogę zdefiniować nowy custom state.

3:00Klikam więc add a new custom state.

3:03W pierwszej kolejności muszę zdefiniować nazwy.

3:05W moim przypadku będzie to nazwa view, czyli widok.

3:09Ponieważ nasz custom state dotyczy widoku jaki chcemy wyświetlać na stronie autentyfikacji,

3:14czyli albo będzie to widok logowania albo widok rejestracji.

3:19Kolejno wskazujemy tutaj typ takiego state'u.

3:22Jeżeli kliknę w tym miejscu jak widzisz mam całą listę dostępnych opcji.

3:27O nich porozmawiamy sobie bardzo dokładnie w kursie praktycznym.

3:31My natomiast skorzystamy tutaj z tej opcji text.

3:34Proszę wybierz ją

3:36w tym miejscu, czyli jako pierwszy element z listy, klikamy create

3:40i nasz custom state został już utworzony i dodany do danego elementu, czyli w naszym

3:44przypadku do całej strony czy elementu page.

3:48Kolejno musimy zdefiniować czy taki custom

3:51state ma posiadać domyślną wartość, czy ma być pusty.

3:55Definiujemy ją w tym miejscu.

3:57Tu mamy default value.

3:59Ponieważ przekazaliśmy to jako typ text

4:02to możemy w tym miejscu pisać tylko i wyłącznie,

4:04jak się domyślasz sam tekst, w moim przypadku

4:07chcę, żeby taka default value była równa login.

4:11Dlaczego akurat taka, to porozmawiamy sobie nieco później.

4:14Na chwilę obecną po prostu zdefiniuje ją tutaj o takiej wartości.

4:19Zamykamy to i teraz możemy przystąpić do pracy.

4:23Skoro nasz custom state jest już zdefiniowany,

4:26to to co możemy zrobić teraz to odnieść się do niego tutaj w sekcji conditional.

4:31Przejdźmy więc do zdefiniowania nowego warunku.

4:34Jak już doskonale wiesz, w tym miejscu

4:36możemy odnosić się zarówno do elementu, w którym teraz jesteśmy, czyli po prostu

4:41do tego tekstu możemy się też odnosić do innych elementów.

4:45O tym z resztą już wcześniej mówiłem, kiedy pokazywałem Ci, że po najechaniu na

4:49przycisk możemy zmienić np. kolor karty, ale dodatkowo zakładka

4:54conditional pozwoli nam również odnieść się do state'u danego elementu.

4:58W tym celu muszę tutaj wskazać

5:02authentication, czyli po prostu całą naszą stronę.

5:05I kolejno jak widzisz tutaj mam utworzony custom states, czyli view.

5:11I teraz muszę wskazać określony warunek.

5:14Ja chcę powiedzieć, że jeżeli ten custom state jest równy i tutaj muszę

5:19wpisać wartość tekstową, ponieważ taką ustawiliśmy, czyli jak się domyślasz login.

5:27To teraz chcę tutaj zdefiniować jakąś określoną właściwość.

5:30A więc jeżeli authentication view

5:33is login, to tym razem mogę się odnieść tutaj do wartości text.

5:39I w tym polu zmienić po prostu tekst, który będziecie wyświetlał na tym przycisku.

5:44W moim przypadku jedyna zmiana to będzie sign up zamienione na sign in.

5:52I to w zasadzie wszystko.

5:56Tutaj na chwilę obecną nie widzimy żadnych

5:58zmian, ale zobaczę co się stanie, jeżeli przejdziemy do podglądu naszej strony.

6:04Tak zmienił się na sign in mój Google.

6:07Dlaczego tak się stało?

6:08Otóż jak doskonale zdajesz sobie sprawę.

6:11Wybraliśmy tutaj customs state

6:13i ustawiliśmy wartość domyślną równą login, a więc przy załadowaniu naszej

6:18strony właśnie taka wartość zostanie przypisana do całego tego custom state'u,

6:22i dzięki czemu ten warunek będzie miał tutaj zastosowanie.

6:27Jeżeli teraz usunął bym tylko wartość domyślną.

6:31Wrócił do podglądu i przeładował naszą

6:33stronę, to znów wrócimy do poprzedniego tekstu.

6:38Dlaczego?

6:39Ponieważ oczywiście

6:41strona po załadowaniu sprawdza sobie po kolei wszystkie warunki, a więc w

6:46pierwszej kolejności wygeneruje nam tekst, który mamy tutaj, a następnie przejdzie do

6:51zakładki conditional i sprawdzi, czy ten warunek tutaj ma miejsce.

6:56W naszym przypadku authentication view

6:58nie jest równe login, ponieważ go wyzerowaliśmy.

7:00Ten warunek się nie spełni, a więc treść nie zostanie zmieniona.

7:03Mam nadzieję, że teraz rozumiesz już jak to działa i w jaki sposób

7:06poprzez zakładkę conditional możemy się odnosić do state'u danych elementów.

7:12Przywróćmy więc te

7:14domyślne, czyli przechodzę do całego

7:16page'a, klikam ikonkę i, i jako default value ustawiam login.

7:22To co musimy teraz zrobić to zadbać

7:24oczywiście o te teksty, o te pola i całą tą resztę.

7:28Przejdźmy więc po kolei.

7:30Zaznaczam ten tekst.

7:33Znów definiuję nowy kwarunek, odnoszę się

7:39do całej naszej strony, kolejno do custom state o nazwię view

7:44i mówię, że ma być równy login.

7:49Jak się domyślasz znów właściwość, którą będziemy zmieniać.

7:52To oczywiście tekst.

7:56I standardowo zamiast sign up będzie sign in.

8:03O tym, jak ukrywać elementy też już rozmawialiśmy wcześniej.

8:08Przejdźmy sobie do drzewka elementów.

8:10Zaznaczmy całą tą grupę fullname-wrapper

8:15i oczywiście zdefiniujmy warunek, czyli cała nasza strona.

8:22Custom state ma być równy login.

8:24Jeżeli tak się stanie, to oczywiście nie chcemy pokazywać takiego elementu, czyli

8:30this element is visible i nie zaznaczamy tego checkbox'a.

8:34Przy okazji musimy zadbać tutaj o jego odpowiednie ukrywanie,

8:38czyli collapse when hidden. Te pola tutaj pozostają bez zmian.

8:43Oczywiście musimy zmienić tekst na tym przycisku.

8:48Znów zakładka conditional, znów cała nasza strona.

8:57Custom state równy login.

9:00Jeżeli taki warunek będzie spełniony to oczywiście zmieniamy tekst na sign in.

9:10Możemy sobie skopiować ten warunek.

9:13Przejść tutaj do tego tekstu, wkleić go w to miejsce i skopiujmy sobie wartość,

9:19która się tutaj pojawia na stronie logowania.

9:28Wklejam w to miejsce.

9:29Pozostaje mi jeszcze zmiana tutaj.

9:34Wklejam warunek jeżeli view jest równe login to ja chcę tu wyświetlić tekst register.

9:44Przejdźmy do podglądu i zerknijmy, czy rzeczywiście wszystko się zgadza.

9:49Teksty na przyciskach są prawidłowe.

9:51W tym miejscu też.

9:53Tutaj dodatkowo ukryliśmy to niepotrzebne pole.

9:57Tutaj wszystko jest w porządku.

9:59Zerknijmy jeszcze tutaj na ten odstęp wydaje mi się jakiś taki bardzo duży.

10:07Dlaczego tak się dzieje?

10:09Zaraz sprawdzimy.

10:11Aha, już wiem.

10:12Ustawiliśmy margines

10:14tutaj, więc go w tym miejscu wyzerujmy.

10:18Dodajmy go tutaj po prostu na całą grupę

10:21fullname-wrapper.

10:23Teraz jeżeli ją ukryjemy, to po prostu ukryjemy również ten margines,

10:27który ona tutaj dawała, ponieważ kolejna pod nią również ma 40 pixeli

10:31od góry, to teraz wszystko będzie wyglądało już tak jak trzeba,

10:35nie będziemy mieć tutaj takiego dużego odstępu.

10:38Przejdźmy do podglądu.

10:39No jak widzisz teraz nasza strona logowania wygląda już tak jak powinna.

10:43A my w kolejnej lekcji skupimy się na tym,

10:45w jaki sposób możemy zmieniać wartość custom state.