Bubble: Tworzymy pierwsze workflow

0:00Nasza praca ze stroną Indeksową jest już niemal skończona.

0:03A skoro tak, to możemy porozmawiać o kolejnej bardzo ważnej kwestii,

0:07czyli o tym, czym są i do czego służą workflows w Bubblel. Workflows

0:12najłatwiej określić dwoma słowami, czyli akcja i reakcja.

0:17Akcję będą uruchamiane za pomocą tak zwanych trigger'ów, a reakcją

0:21będzie wykonanie pewnej zdefiniowanej przez nas operacji.

0:25Takich operacji może być jedna, bądź może być ich dowolna ilość.

0:30Jeżeli na chwilę obecną nic Ci to nie

0:31mówi, i wydaje się to dosyć mocno skomplikowane, to nie przejmuj się, zaraz

0:35rozbijemy to wszystko na czynniki pierwsze i sam zobaczysz, że tak naprawdę

0:39korzystanie z workflows w Bubble jest dziecinnie proste.

0:43Jeśli zdarzało Ci się korzystać z takich narzędzi jak np.

0:45Zapier bądź Integromat, to pojęcie akcji i reakcji jest Ci już na pewno doskonale znane.

0:50Tam też mamy trigger'y i następnie moduły, które wykonują za nas jakieś pewne operacje.

0:56Jak to działa Bubble?

0:58Otóż w pierwszej kolejności musimy oczywiście zdefiniować sobie trigger.

1:02Co może być takim trigger'em?

1:03Otóż bardzo wiele rzeczy.

1:05Najprostszym i najczęściej używanym jest po prostu kliknięcie w jakiś element.

1:10Takim elementem może być np.

1:11tutaj link.

1:13Może to być przycisk,

1:15ten przycisk, ten przycisk, a nawet i ten tekst, ten tekst lub obrazek.

1:19Poza drobnymi wyjątkami, niemal każdy

1:21element w Bubble może nam posłużyć jako trigger.

1:25Natomiast teraz, co może być reakcją?

1:28Otóż np. w naszym przypadku chcemy, aby użytkownik po kliknięciu tutaj

1:33w ten tekst, czyli link about został przescrollowany do tej sekcji.

1:39A skoro wiemy już, co mamy zrobić, to

1:41zastanówmy się teraz, jak taką operacja w Bubble zdefiniować.

1:45Wystarczy, że wrócimy do edytora i teraz musimy dany element zamienić na trigger.

1:51Aby to zrobić wystarczy, że go zaznaczę.

1:54W naszym przypadku może być to właśnie ten tekst about.

1:57I teraz muszę skorzystać z tego dużego przycisku start edit workflow.

2:01Jak widzisz, jeżeli wybrałbym ten tekst,

2:04ten tekst, przycisk bądź obrazek, to każdy z nich właśnie posiada tutaj tą opcję.

2:10Czyli może nam posłużyć jako trigger.

2:12Dodatkowo do tej samej opcji bardzo często dostaniesz się też z innego miejsca.

2:17Wystarczy, że kliknę prawym przyciskiem

2:19myszy i tu na liście na samym dole mam opcję start edit workflow.

2:23Skoro już wiemy

2:25jak zamienić element na trigger, to wybierzmy ten tekst,

2:29klikniemy start edit workflow i zostaniemy przeniesieni do zakładki

2:33workflow, z której możemy się oczywiście dostać klikając również w to miejsce.

2:38Teraz mamy zdefiniowany trigger, który mówi, że jeżeli tekst about

2:43zostanie kliknięty, to chcemy wykonać jakąś operacja bądź

2:48ich szereg operacji, a definiujemy je w tym miejscu.

2:53Klikam tutaj.

2:55Jak widzisz, dostaję szeroką listę różnych operacji, które mogę wywołać.

3:00Co mamy już predefiniowane przez same Bubble i podzielone na odpowiednie sekcję.

3:04Mamy tu sekcję account,

3:06która służy nam do obsługi logowania, rejestrowania użytkowników, wysyłania

3:11maili z potwierdzeniami, wysyłania maili jak tutaj widzisz z resetem haseł itd.

3:16Mamy tutaj sekcję nawigacji,

3:19która pozwoli nam poruszać się pomiędzy poszczególnymi stronami.

3:22O tych pozostałych opcjach porozmawiamy sobie jeszcze nieco później.

3:25Nas natomiast interesuje

3:27ta sekcja element actions i tutaj musimy wybrać scroll to.

3:33Teraz z kolei musimy zdefiniować do jakiego elementu

3:36chcemy przescrollować użytkownika.

3:38Klikam więc tutaj element i w moim przypadku

3:44jest to grupa about.

3:49I to by było w zasadzie wszystko.

3:51Mamy trigger, czyli akcję, mamy operację, którą chcemy wykonać, czyli naszą reakcję.

3:58Wróćmy więc do, znowu naszej strony.

4:04Odświeżmy ją, wróćmy do naszego menu.

4:07Klikamy przycisk about.

4:08Mam nadzieję, że zwróciłaś teraz uwagę na jeden bardzo ważny fakt.

4:12Jeżeli najadę kursorem na te teksty, to mam taką ikonkę,

4:17jak bym chciał coś po prostu pisać.

4:18Natomiast w tym przypadku zamienia się ona

4:20na taki znany Ci już na pewno kursor rączki.

4:23Dzieje się tak dlatego,

4:25że ten element służy nam teraz jako trigger, czyli wykonuje w Bubble jakąś operację.

4:30Jeżeli tak się dzieje, to właśnie kursor będzie się zmieniał, właśnie na taki

4:35kursor rączki, łapki czy jakkolwiek chcesz go nazwać.

4:38Klikamy więc w about.

4:40Jak widzisz operacja została wykonana.

4:43Zostaliśmy przescrollowani we właściwe miejsce.

4:46Wykonajmy więc teraz to samo dla tych pozostałych tekstów.

4:51Wracamy do zakładki design.

4:54Wybieramy tekst features,

4:56klikamy przycisk start edit workflow i ponieważ będziemy chcieli wykonywać tą

5:01samą operację, mogę ją sobie tutaj zaznaczyć.

5:03Klikam prawym przyciskiem myszy, klikam copy.

5:07Wracam tu.

5:09Najeżdżam na to miejsce i klikam paste.

5:14Oczywiście w tym przypadku odnosimy się nie do grupy about,

5:17z resztą jak widzisz, nawet tutaj Bubble nam wyświetla takie

5:21okienko z informacją, jak dany element wygląda, nas w tym przypadku interesuje

5:25oczywiście, jak się domyślasz sekcja features.

5:30Czyli grupa features,

5:31musimy ją tutaj odpowiednio namierzyć.

5:37Więc gruop features i ok

5:39do tej grupy chcemy przescrollować użytkownika, jak widzisz znowu

5:42mamy odpowiednio taką informację jak ta grupa będzie wyglądała na naszej stronie.

5:47Wracamy do zakładki design, zaznaczamy pricing.

5:51Znów wybieramy start edit workflow.

5:55Wklejamy sobie naszą operację i tym razem chcemy się oczywiście odnieść do grupy pricing.

6:06Pozostaje nam jeszcze

6:08jeden tekst tutaj jeden nav-link, czyli contact, znów started edut workflow.

6:15Wklejamy bądź wybieramy to z listy.

6:19Znajdziesz ją tutaj w sekcji elements scroll to

6:23i oczywiście tym razem grupa contact.

6:31Zdefiniowaliśmy więc cztery workflows.

6:34Nasza nawigacja przynajmniej nav-linki na stronie działają już poprawnie.

6:38Możemy to sobie oczywiście przetestować.

6:41Jeżeli kliknę teraz tutaj w features,

6:45to jak widzisz zostałem przekierowany do właściwej sekcji.

6:49Podobnie jest tutaj dla nav-linku pricing oraz oczywiście dla contact.

6:58Skoro wiemy już tutaj jak definiować takie proste workflows,

7:03które pozwoli nam scrollować użytkownika na naszej stronie,

7:08to zastanówmy się teraz jak przekierować go na inną stronę np.

7:12w przypadku kliknięcia przycisk sign in, sign up, tutaj get started.

7:16Chcemy, aby użytkownik został

7:18przekierowany na nową stronę, którą za chwilę utworzymy.

7:21Będzie to strona autentykacji, czyli logowania i rejestracji.

7:25Wracamy więc do edytora

7:27i pierwsze co musimy zrobić to oczywiście utworzyć taką nową stronę.

7:32Klikam więc add a new page, nadaje jej nazwę.

7:41Nie chcemy tutaj nic klonować.

7:45Klikam create.

7:49Na razie nie zmieniamy tutaj żadnych ustawień.

7:51Wystarczy tylko, że utworzyliśmy taką stronę.

7:54Wracamy więc na stronę indeksową.

8:00Wybieramy przycisk start edit workflow.

8:07Jak widzisz, tutaj znów mamy nasz trigger.

8:10Kiedy ten przycisk zostanie kliknięty, w tym przypadku ten tekst sign in zostanie kliknięty.

8:15To chcemy tym razem skorzystać z sekcji nawigacji.

8:19Jak się domyślasz, wybieramy opcję go to page.

8:22Musimy tylko teraz wskazać, na jaką stronę chcemy przekierować użytkownika.

8:26Oczywiście strona autentykacji.

8:30To samo chcemy zrobić tutaj.

8:33Na przycisku sign up.

8:36Znów start edit workflow.

8:39Ponieważ kierujemy go dokładnie na tą samą

8:41stronę, to jak się domyślasz możemy sobie skopiować

8:46tą operacje i wkleić ją w to miejsce.

8:53Wróćmy teraz do podglądu naszej strony.

8:55Odświeżmy i sprawdźmy, czy nasz workflow działa poprawnie.

8:59Klikam sign in.

9:02Jak widzisz, zostałem przekierowany na odpowiednią stronę.

9:06Wróćmy do poprzedniej.

9:08Kliknij przycisk sign up i oczywiście wszystko dzieje się dokładnie

9:14tak samo, czyli zostajemy przekierowani na właściwą stronę.

9:18Wróćmy jeszcze na chwilę do edytora.

9:22Jak widzisz mamy teraz tutaj zdefiniowane kilka różnych workflows

9:27i dodatkowo wszystkie one są w takim szarym kolorze, więc czasami trudno Ci się

9:31będzie połapać do czego one tutaj w zasadzie służą.

9:34Możemy je w bardzo prosty sposób rozróżnić.

9:37Otóż możemy tutaj wybrać tzw.

9:41event color i np.

9:42dla tekstu about zmienić go na niebieski, dla tekstu contact, czyli dla trigger'a kontakt.

9:49Zmieńmy go np. na kolor czerwony.

9:52Jak widzisz, taką operację możemy tutaj wykonywać dla każdego trigger'a

9:57i definiować sobie tutaj inny kolor z listy, tak aby potem łatwo Ci było rozróżnić, że

10:03np. ten trigger uruchamia dany ciąg operacji.

10:06Mam nadzieję, że to jest jasne.

10:07Że teraz rozumiesz jak działają takie podstawowe workflows w Bubble.

10:12I widzisz, nie ma tutaj nic trudnego, a więc myślę, że będziemy mogli przejść do

10:17tworzenia nieco bardziej skomplikowanych workflows, już w kolejnej lekcji.