Aplikacje no-code z Bubble: Czym są workflow i praca z danymi

0:00Jesteśmy na stronie logowania, którą utworzyliśmy w poprzedniej lekcji.

0:04Chcę jeszcze tutaj dodać kilka bardzo drobnych poprawek.

0:07Przede wszystkim tutaj, dlatego linków od Password.

0:12Przejdźmy do Edit Tail i zmieńmy tutaj Lines passing na półtora.

0:16Ten tekst był jakoś tak bardzo dziwnie przycięty.

0:19Teraz wygląda to już dużo lepiej.

0:21Dodatkowo chcę, żeby ten link kierował na stronę, którą też już utworzyliśmy,

0:25a więc nie na stronę index ową, tylko na naszą stronę.

0:28Password Recovery Jeżeli teraz przejdziemy do podglądu odświeżamy.

0:34Jesteśmy tutaj Teraz na stronie rejestracji możemy sobie kliknąć tutaj.

0:39Dokąd?

0:41Przechodzimy na stronę logowania,

0:43a klikając Forget password przejdziemy na stronę przypomnienia hasła,

0:48którą też utworzyliśmy w poprzedniej lekcji.

0:51Natomiast tam korzystaliśmy z linków, a

0:53tutaj stworzyliśmy grupę zawierającą ikonkę oraz tekst.

0:57Moglibyśmy oczywiście dać tutaj zwykły link, który kierował by z powrotem na

1:00stronę logowania, natomiast ja chciałem właśnie zastosować taki efekt.

1:05Tutaj jeszcze może delikatnie to da. Pracujmy.

1:07Ta ikonka jest jakoś kiepsko wyrównana, zaraz o to zadbamy.

1:10A więc wróćmy do edytora. Na naszą stronę.

1:14Password Recovery.

1:16I spróbujmy tutaj tą ikonkę.

1:19Koncentrować w pionie.

1:20I podobnie zresztą zrobić to dla tego tekstu.

1:24I teraz zastanówmy się, w jaki sposób sprawić, żeby cała ta grupa background

1:29kierowała użytkownika z powrotem na stronę logowania.

1:34W tym celu będziemy musieli korzystać workflow.

1:37A czym w zasadzie jest workflow Babel?

1:39Otóż najprościej jest to określić mianem akcja i reakcja.

1:44Akcja to np.

1:46kliknięcie w button w grupę, załadowanie się strony

1:51lub jakakolwiek inna akcja, która jest dostępna w Babel i nosi ona nazwę

1:55triggera, czyli triggera odpala nam jakąś akcję, a odpalenie takiego triggera

2:00powoduje reakcję, czyli wykonanie jakiejś operacji pod ciągu takich operacji.

2:05Wiem, że to na początek brzmi tak dosyć

2:07dziwnie i mocno skomplikowanie, ale zaraz zobaczysz, że jest niesamowicie proste.

2:12Aby dodać workflow do elementu wystarczy, że przejdę do zakładki Appearance.

2:17Mam zaznaczoną grupę background i klikam A to workflow to sama mogę zrobić

2:22klikając na całą grupę prawym przyciskiem myszy i wybrać Start Edit Workflow.

2:26Niezależnie czy skorzystasz z tej opcji czystej, efekt będzie ten sam.

2:30Klikamy tutaj i zostaliśmy przeniesieni do zakładki Workflow.

2:35Jak widzisz mamy tutaj trigger, czyli 1 coś.

2:39Czyli w tym przypadku grupa back jest kliknięcia.

2:42To musi się coś wydarzyć.

2:43Czyli tu musi nastąpić reakcja, a w naszym przypadku ta reakcja to będzie.

2:48Mamy tutaj cały szereg różnych opcji do wyboru.

2:51Nas interesuje w tym przypadku navigation i po prostu good page,

2:55czyli kierujemy użytkownika do strony i kierujemy go na określoną stronę,

3:00w naszym przypadku stronę sign in, czyli stronę logowania.

3:05I to w zasadzie nasze pierwsze podstawowe workflow.

3:07Jak widzisz, nie było tutaj nic trudnego.

3:10Te workflow mogło być znacznie bardziej

3:11rozbudowane, ale my w tym pierwszym sprincie

3:14ograniczymy się do bardzo podstawowych workflow, a do tych bardziej

3:17skomplikowanych przejdziemy dopiero w kolejnym sprincie.

3:19A więc przejdźmy teraz do podglądu.

3:22Odświeżamy.

3:25Jak widzisz teraz kiedy wjeżdżam na tą grupę pojawia mi się taka ikonka rączki,

3:28co oznacza, że dodaliśmy tutaj właśnie jakąś akcję.

3:31Mogę teraz tutaj to kliknąć.

3:33Jak widzisz zadziałało.

3:34Zostaliśmy przeniesieni na stronę logowania.

3:38A więc pierwsze workflow tutaj dotyczące nawigacji mamy z głowy.

3:42Możemy więc dodać następne, a w tym celu musimy przejść do edytora.

3:48Czyli cofamy się tutaj i przechodzimy do naszego Isabelle.

3:52Element o nazwie Re.

3:54Jak pamiętasz w ostatniej lekcji pierwszego modułu.

3:57Przejdźmy do zakładki Design.

3:58Utworzyliśmy tutaj klub Focus o nazwie Menu, czyli nasze menu.

4:04Natomiast ono domyślnie jest niewidoczne.

4:06Tak właśnie działa group fokus przy załadowaniu się strony.

4:10Taka grupa jest ukryta

4:11i pojawia się tylko wtedy, kiedy rzeczywiście wykonamy jakąś akcję,

4:16a jakaś akcja to jak się domyślasz, znowu będzie to kliknięcie w jakiś element.

4:21W tym przypadku po prostu właśnie tutaj całą tą grupę o nazwie Menu Group.

4:28A więc znów wybieramy ADA Workflow. Znowu przeszłość.

4:32Przeszliśmy do zakładki Workflow.

4:34Znów mamy tutaj When na w barmani group i script.

4:36Czyli kiedy jakiś element jest kliknięcie, to chcemy znów wykonać jakąś reakcję.

4:46Tym razem będzie to shounen element, czyli

4:48pokazanie jakiegoś elementu po kliknięciu w dany element.

4:51Wiem, że to tak trochę masło maślane, ale właśnie tak to działa.

4:55Czyli po kliknięciu na w Bar Menu Group

4:57chcemy pokazać element, a tym elementem jest nasza grupa menu.

5:03Menu f g, a w osadzie g f menu.

5:08O właśnie musimy to wpisać.

5:09Menu g f czyli nasza Group fokus.

5:14Przejdźmy więc teraz do podglądu.

5:16Najpierw musimy przejść do strony index owej, bo tam mamy zastosowany nasz.

5:21I kliknij Preview.

5:24Poczekaj, aż się strona odświeży.

5:26I teraz po kliknięciu w ten element jak

5:28widzisz pojawia mi się grupa z naszym menu.

5:31To jeszcze musimy też zadbać o Land

5:33Height, bo jak widzę mamy ten tekst bardzo mocno przycięty.

5:37A więc wróćmy do edytora i popraw te style.

5:43Czyli.

5:45Na w miarę.

5:48Nazwijmy sobie tutaj ten element.

5:51Kliknij tu.

5:53I przejdźmy do edycji stylu i zmieńmy

5:56na Infinite na półtora i to samo zresztą zróbmy dla wszystkich linków.

6:04Wszędzie ustaw melancholię.

6:05Półtora.

6:08OK.

6:10Wróćmy jeszcze na chwilę do podglądu.

6:12Odświeżamy avek.

6:13Strona się przeładowana, ale nasza group fokus zniknęła.

6:18Klikamy i ona znów się pojawia.

6:21Aby ukryć taką grupę musimy kliknąć gdzieś

6:24poza stronę, czyli poza tą grupę, bo jeżeli klikniemy w te linki, to oczywiście

6:28zostalibyśmy przekierowani na właściwe podstrony.

6:30Zresztą zaraz zadbamy o to, żeby te linki odpowiednio przenosiły

6:33użytkownika na stronę rejestracji strony logowania.

6:36Ale jeżeli kliknę gdzieś tutaj tak widzisz lub fokus mi się zamyka.

6:42I to samo mogę zrobić tutaj klikając gdzieś na element.

6:45Poza właśnie tą grupą.

6:47Wtedy ona się odpowiednio pokazuje i zamyka.

6:50A więc nasze menu fajnie działa.

6:52Wyświetla się tak jak się wyświetlać powinno.

6:55B Zadbajmy jeszcze teraz o te linki.

7:00Czyli sign up ma kierować na stronę sign up.

7:04A login jak się domyślasz na stronę Saiyanina.

7:07I to w zasadzie wszystko, co musieliśmy zrobić.

7:10A więc poprawiliśmy przede wszystkim naszą nawigację.

7:16Czyli teraz za pomocą naszego menu

7:17będziemy mogli przekierować użytkownika na właściwe podstrony na stronę rejestracji.

7:24Pozbądźmy się jeszcze tego debuggera.

7:28On się bardzo często pojawia.

7:29Jeśli tylko klikamy preview jest tam niepotrzebne.

7:32Natomiast teraz

7:34to co chcę zrobić, to dodać kolejny workflow, za pomocą którego użytkownik

7:37będzie mógł się zarejestrować w naszym serwisie.

7:41A więc będziemy musieli wykonać akcję po kliknięciu w przycisk Sign up.

7:46W większości przypadków obsługa

7:48rejestracji logowania użytkowników w serwisach jest dosyć skomplikowana i

7:52wymaga przynajmniej nieco bardziej zaawansowanej wiedzy.

7:55Ale na szczęście twórcy Babel stwierdzili, że użytkownicy.

7:58To jest podstawowy typ danych, jakie powinna posiadać nasza aplikacja

8:01i dlatego ich obsługa uprości nam do absolutnego minimum.

8:06Zaraz zobaczysz jak to działa w praktyce.

8:07Przejdźmy do edytora.

8:10Przejdźmy na stronę sali.

8:15Wybieramy guzik Sign up.

8:18Prawy przycisk myszki Start Edit Workflow.

8:21To samo zresztą mógłbym zrobić tutaj.

8:22Jak widzisz tu mogę dodać trigger, czyli

8:24event, który będzie rozpoczynał nasze workflow.

8:28Jak widzisz mamy tutaj bardzo wiele różnych opcji do wyboru.

8:32Do tego jeszcze przejdziemy teraz i nie przejmuj się.

8:35Omówimy sobie to bardziej w drugim sprincie, jak widzisz.

8:38Natomiast tutaj nas interesuje ten, czyli element script.

8:42Moglibyśmy wybrać to i teraz dopiero tutaj wskazać nasz przycisk.

8:46Natomiast dużo łatwiej jest po prostu

8:47przejść do designu, kliknąć dany element, który ma rozpoczynać

8:51Twoje workflow i wybrać Start Edit Workflow.

8:55To co chcemy zrobić, to zarejestrować użytkownika, a więc Babel.

8:59Aby to zrobić wystarczy, że przejdziemy do tej sekcji Account i Sign the user app.

9:04I teraz musimy powiedzieć skąd Babel ma

9:07wziąć sobie wartości do pola email i pola password, bo tylko te

9:11dwa są wymagane by utworzyć konto naszego użytkownika w serwisie.

9:14My te pola już dodaliśmy.

9:17Jeżeli wrócimy do Design mamy tutaj input.

9:20Email oraz input password.

9:22I to co musimy teraz powiedzieć Bobowi, to żeby pobrał sobie wartości z tych pól,

9:27które wpisze użytkownik i przekazać je nam odpowiednio.

9:30Natomiast zanim to zrobimy, dodajmy

9:32jeszcze tutaj styl dla tych pól to będzie po prostu standard input.

9:42A w zasadzie korzystajmy ze standardowego nazewnictwa, czyli input standard.

9:50W ten sposób gad.

9:53I tutaj też wybierzmy dokładnie.

9:57Ten sam styl.

9:59I teraz wróćmy do zakładki Workflow do akcji Sign the User App.

10:03I teraz muszę tutaj dynamicznie przekazać wartości z tego pola input.

10:07Jak to zrobić? Klikam w to miejsce.

10:10Odnoszę się do email input.

10:13I jego wartości, czyli jego valium.

10:15Wybieram tą opcję i to sama muszę zrobić dla pola password.

10:20Czyli zaczynam wpisywać password input.

10:25Wybieram Valium.

10:27I tyle.

10:29Nie zaznaczamy opcję require password

10:31mason, bo to by wymagało dodania kolejnego pola password.

10:35Bardzo często spotykam się z tym na

10:36stronie, że wymaga podania hasła i potem jeszcze raz podania tego hasła.

10:40Dla mnie jest to bezsensowna opcja.

10:41Wystarczy, że użytkownik tylko raz poda swój password.

10:45Nie chcemy wysyłać maila z potwierdzeniem.

10:48Ta wysyła takiego bardzo brzydkiego maila sformatowany przez bubel.

10:52O tym sobie jeszcze porozmawiamy później,

10:55kiedy będziemy w kolejnym sprincie wysyłać mailing.

11:00Tutaj też tego nie zaznaczamy.

11:02Nie chcemy na razie zmieniać żadnych innych filtrów w naszej bazie danych.

11:07Tak, czyli rejestrujemy użytkownika i w zasadzie tyle.

11:12Tu jeszcze moglibyśmy go skierować do Dashboard.

11:14Po zarejestrowaniu Natomiast na chwilę

11:15obecną takiej strony nie mamy, więc może po prostu ją dodajmy.

11:21Kliknij je. Adam Page Nazwijmy ją chwilowo Dashboard.

11:27Nic nie planujemy.

11:31Przejdźmy do design.

11:34Zmieńmy tutaj layout, a powiedzmy Ala Into Parent.

11:37Na razie zostawmy sobie tutaj 1440 pikseli i to co chcę zrobić, to pokazać, że taki

11:43użytkownik rzeczywiście został zarejestrowany.

11:46A jak to zrobimy?

11:47Wyświetla Ci tutaj jego adres e-mail.

11:49Aby to zrobić, Babel mogę się odnieść

11:51dynamicznie do opcji Current user, czyli bieżące.

11:55Użytkownik, który właśnie działa w naszej

11:56aplikacji jest zalogowany i pokazać Ci jego e-mail.

12:01Zmieńmy ten styl na jakiś duży, powiedzmy tutaj H4.

12:07Odznacz tę opcję Filtruj to content. I to.

12:12A więc.

12:14Wracamy do Sign up strony do Workflow.

12:20I mówimy, że po zarejestrowaniu użytkownika to co chcemy zrobić to

12:23przekierować go do naszej strony Dashboard.

12:27I to wszystko.

12:28Jak widzisz, mamy tutaj kilka takich akcji.

12:31Nie ma tu jakiegoś ograniczenia, Wszystko

12:33zależy od Twojej wyobraźni i Twoich potrzeb.

12:35A więc przejdźmy do podglądu.

12:38Odświeżamy.

12:41I tutaj utwórzmy nowe konto.

12:44Ja tutaj nazwę to powiedzmy.

12:48Office.

12:50Małpa z Nest. Kropka.

12:53A jo.

12:56Natomiast to co chcę zrobić to tutaj dodać konto gościa.

12:59Czyli wpisuję sobie taką sztuczkę, dodaję tutaj + wpisuję gest i teraz wszystko to.

13:04Jeżeli masz konto na Google,

13:06wszystko to co dodasz + gest będzie traktowane w Babel jako nowy adres

13:10internetowy, nowy adres mailowy, w zasadzie internetowy.

13:13Natomiast wszystkie te maile będą Ci wpadały na to główne konto, czyli na

13:17Office w moim przypadku Małpa Studio, a w Twoim przypadku będzie jakiś inny

13:22adres Google, to wpadnie Ci to właśnie na tą skrzynkę.

13:26Dodajmy tutaj hasło.

13:31Klikam sign up i odpali mi się nasze workflow.

13:36Nie chcę zachowywać.

13:37Jak widzisz zostałem przekierowany na

13:39stronę Dashboard i wyświetla mi się tutaj adres zarejestrowanego użytkownika.

13:44A więc skoro nasz użytkownik może już utworzyć konto w naszym serwisie,

13:48to zadbajmy o to, aby mógł się potem na nie zalogować.

13:51Wracamy więc do edytora.

13:54Przechodzimy do strony.

13:55Tym razem sign in.

14:00Wybieramy ten button.

14:02Jak się domyślasz, będziemy musieli tutaj

14:03stworzyć kolejne workflow, tym razem pozwalające użytkownikowi

14:07użytkownikowi na zalogowanie się w naszym serwisie.

14:10A więc account i nie side user app tylko log user in.

14:15Jak widzisz mamy tutaj cały szereg gotowych akcji.

14:17I tak naprawdę wszystko co co

14:19potrzebujemy, żeby zalogować lub zarejestrować użytkownika.

14:23Znów przekazujemy wartości z pól input

14:26dokładnie to samo co robiliśmy na stronie rejestracji, czyli Email input value.

14:34Password input value.

14:37Tą opcję możemy zostawić na

14:40następną akcję to Navigation go Page i przekieruje na stronę znów Dashboard u.

14:50I wróćmy jeszcze na stronę Dashboard i to co możemy tam dodać to button, za pomocą

14:55którego będę mógł się w ogóle wylogować z serwisu.

14:57Na razie nie możemy tego zrobić.

14:59Użytkownik jest zalogowany, ponieważ przy utworzeniu konta w Bubble

15:02automatycznie logujemy go do naszego serwisu.

15:05A więc dodajemy tutaj przycisk.

15:10Dajmy go tutaj z grupy i my z tym.

15:13W kolumnie container i od sumy powiedzmy o 24 piksele.

15:21Chcę go przenieść na dół.

15:25Zostawmy tutaj te opcje.

15:27Nie ma problemu takiego sobie w centrum

15:29i nadajemy tutaj tekst logo cud czyli wylogowanie z serwisu.

15:35Jak to zrobić? A do Workflow?

15:39Account log the user route.

15:42I to wszystko.

15:43Tamte akcje pozwalały nam zarejestrować

15:45użytkownika, zalogować, a ta akcja pozwoli go wylogować się z naszego serwisu.

15:50I w tym przypadku jeżeli się wyloguj to skierujemy go np.

15:54na stronę Rejestracja bo logowania bardziej logowania.

15:57Skoro już ma konto to może się zalogować ponownie, czyli na stronę sign in.

16:03Przejdźmy teraz do podglądu.

16:08Jesteśmy na dashboard gdzie klikam log out.

16:12A widzisz, ten adres tutaj zniknął, bo

16:14zostałem wylogować się i znowu przeszliśmy na stronę logowania.

16:20Natomiast to co chcę zrobić teraz, to dodać tutaj.

16:23A w zasadzie czy potrzebujemy kolejnego konta?

16:25Jeżeli chcesz utworzyć kolejne konto, to nic nie stoi na przeszkodzie.

16:28Możesz podać znowu adres mailowy, znowu jakieś hasło.

16:33Natomiast to co ja chcę zrobić to zalogować się, a więc muszę wykorzystać

16:37dokładnie te same dane, które podałem, czyli Office.

16:42Plus gest małpa z tej.

16:48A jo Pamiętaj, że w przypadku bubla to on

16:50zadba o to, żeby sprawdzić czy ten adres jest poprawny, czy te dane się zgadzają.

16:55Jeżeli nie, to będzie tam wyświetlał odpowiednie komunikaty.

16:58My obsługą właśnie takich błędów zajmiemy się w Sprint nr 2.

17:02A teraz po prostu tylko się zaloguje, więc musiał podać odpowiednie dane.

17:09Klikam Saiyanin, czyli zaloguj się.

17:13Podałem poprawne dane i znów zostałem przekierowany do naszego Dashboard u.

17:17Tak właśnie działają podstawowe workflow Babel.

17:20Jak widzisz, nie ma tutaj nic trudnego.

17:22Przejdźmy do edytora.

17:24Wiemy już jak logować użytkownika, wiemy

17:26jak go rejestrować, jak go wylogować z naszego serwisu.

17:30A gdzie on w zasadzie tak trafia?

17:31Trafia tutaj do zakładki Data

17:33i do wbudowanego typu danych jakim jest właśnie user.

17:37Jak widzisz jest to bardzo, bardzo zbliżone do statów, które tworzyliśmy.

17:41Natomiast nie chcę teraz poruszać tutaj

17:43bardziej zaawansowanych tematów dotyczących baz danych.

17:46Chcę Ci tylko pokazać, że mamy tutaj Type user, a tutaj.

17:52Mamy naszego pierwszego zarejestrowanego

17:53użytkownika, czyli właśnie Office + gest Małpa z Tajne Studio.

17:59Mam nadzieję, że dzięki tej lekcji pojęcie

18:01workflow Babel jest już Ci odrobinę bliższe.

18:04Jak widzisz, nie ma tutaj nic trudnego.

18:07To bardzo podstawowe workflow.

18:08Są dosyć proste w implementacji w

18:10zastosowaniu i jeszcze będziemy do nich wracać.

18:13A ja dziękuję Ci w takim razie za uwagę.

18:15Żegnamy się na tę chwilę, odpocznij trochę i widzimy się już za moment.