Bubble: Wdrażamy opcję logowania

0:00Aplikacja w naszym serwisie jest już gotowa.

0:02Zadbaliśmy również o to, aby w pasku adresu przekazywać parametr z odpowiednią

0:06wartością i na tej podstawie wyświetlać użytkownikowi odpowiedni formularz.

0:11Możemy więc przystąpić do realizacji

0:13kolejnego zadania, jakie nas czeka, a więc zdefiniowania odpowiedniego

0:16workflow, które pozwoli użytkownikowi zalogować się do naszej aplikacji.

0:20Wracamy więc do edytora.

0:24Jak pamiętasz na chwilę obecną nasz

0:26przycisk sign up ma przypięty tylko i wyłącznie jeden

0:29workflow, dzięki któremu użytkownik jest rejestrowany w naszej aplikacji.

0:34Naszym zadaniem będzie więc teraz ograniczanie tego workflow tak, aby odpalało

0:38się wyłącznie wtedy, kiedy rzeczywiście wyświetlamy formularz rejestracji.

0:43Przechodzę więc tutaj do tego trigger'a.

0:45Może zmieńmy mu kolor na jakiś inny, np.

0:48na kolor powiedzmy orange i teraz zdefiniujmy tutaj odpowiedni warunek.

0:53A więc odnoszę się do authentication view

0:59i mówię, że jeżeli ta wartość tego custom state view nie jest równa login,

1:04czyli w naszym przypadku może to być wartość pusta, może to być wartość register

1:07lub jakakolwiek inna, to wtedy będziemy tylko wyświetlać formularz rejestracji.

1:12A więc w takim przypadku, kiedy ten

1:14warunek będzie spełniony, chcemy zarejestrować użytkownika i potem po

1:18prostu przekierować go tylko na stronę z dashboard'em.

1:22A więc teraz pozostaje nam skopiowanie tego workflow,

1:25wklejenie go tutaj tym razem nadajmy mu korol może purple i warunek jaki ma być

1:32spełniony to authentication view ma być równa login, a więc tylko wtedy kiedy wyświetlamy

1:39formularz logowania chcemy rzeczywiście użytkownika zalogować.

1:43Pozbywamy się tej akcji, zaznaczam ją, klikam delete.

1:47Teraz mogę przejść kursorem w to miejsce,

1:50kliknąć lewym przyciskiem myszy i wstawić tutaj nową akcję.

1:54Tym razem będzie to po prostu log the user in.

1:57Schemat postępowania będzie niemal identyczny.

1:59Musimy przekazać odpowiednie wartości pod e-mail i password, czyli po prostu

2:04odnieść się do odpowiednich input'ów na naszej stronie.

2:08Wybieram input i e-mail value,

2:12password value,

2:14ja chcę aby po zalogowaniu użytkownik był cały czas zalogowany w naszej aplikacji.

2:20Możesz dodatkowo sprawdzić do czego służy ta opcja klikając tutaj w see reference.

2:24Zostaniesz przekierowany oczywiście tutaj do dokumentacji Bubble'a.

2:28Jak widzisz masz tutaj wyjaśnienie co ta opcja robi.

2:32Podobnie z resztą wyjaśnienie do czego

2:33służy ta druga opcja, czyli remember the e-mail.

2:37Możemy to zamknąć.

2:38Ja tutaj też chcę zaznaczyć yes.

2:42I teraz możemy sprawdzić, czy rzeczywiście nasze workflow działa poprawnie.

2:48Przechodzę więc tutaj do naszej strony.

2:50Odświeżam.

2:53Nasz custom state ma wartość login, a więc chcemy użytkownika zalogować.

2:59Mam tu też również wypełniony adres mailowy.

3:02Chce podać tutaj hasło 1, 2, 3, 4, 5, 6.

3:07Klikam sign in i powinniśmy zostać

3:09zalogowani i przekierowani do strony z dashboard'em.

3:15Operacja jak widzisz wykonała się poprawnie.

3:17Nasz użytkownik trafia dokładnie tam, gdzie trafić powinien.

3:20Dodatkowo jest zalogowany, ponieważ wyświetlamy tutaj te informacje.

3:24Możemy więc teraz go wylogować.

3:28Ja Tutaj dodałem jeszcze dodatkową akcję do

3:30tego workflow, który kieruje nas z powrotem na stronę logowania.

3:35Natomiast moim przypadku chcę teraz

3:36przetestować czy workflow do rejestracji również działa poprawnie, czyli czy te

3:41warunki uruchamiają się tak jak uruchamiać się powinny.

3:44Przejdźmy więc tutaj.

3:45Klikamy register i możemy zarejestrować nowego użytkownika.

3:53Zmieńmy tylko adres mailowy, dodajemy tu

3:55po prostu dwójkę, ustalam to samo hasło, czyli 1, 2, 3, 4, 5, 6.

4:00Klikam sign up.

4:03Jak widzisz zostaliśmy zarejestrowani przekierowani do strony z dashboard'em.

4:07Aktualnie zalogowanym użytkownikiem jest nasz nowy użytkownik, czyli John Wick.

4:12A więc wszystko działa poprawnie.

4:15Taki użytkownik został również dodany do naszej bazy danych.

4:18Możemy to zresztą sprawdzić.

4:21Przechodzimy do zakładki data

4:23i oczywiście tutaj musimy przejść do app data all users i kliknąć refresh.

4:29Jak widzisz, mamy teraz dwóch użytkowników w naszej bazie danych Adama Nowaka i

4:34John'a Wick'a.

4:35A więc wszystko działa tak, jak działać powinno.

4:37To co nam pozostało jeszcze, to wylogujemy się.

4:41Dodanie tutaj obsługi logowania i rejestracji za pomocą Google.

4:45Ale tym zajmiemy się już w kolejnej lekcji.