Bubble: Rejestrujemy użytkownika

0:00W tej lekcji zajmiemy się stworzeniem odpowiedniego workflow, dzięki któremu

0:04będziemy w stanie zarejestrować użytkownika w naszej aplikacji.

0:07Zanim jednak do tego przejdziemy, chciałbym wyjaśnić pewną kwestię.

0:11Mam nadzieję, że Twoje czujne oko zwróciło uwagę, że w poprzedniej lekcji w pewnym

0:15momencie magicznie pojawiła mi się tutaj informacja o ośmiu istniejących błędach.

0:20Stało się tak dlatego, że ja w

0:21międzyczasie testowałem sobie tutaj tą stronę autentyfikacji.

0:25Potem ją usunąłem, aby nagrać materiał i pokazać Ci jak buduję ją od podstaw.

0:29Natomiast zapomniałem potem o stronie indeksowej tych workflow, które odsyłały

0:34użytkownika po kliknięciu w przycisk na stronę logowania i rejestracji, podpiąć ją

0:38ponownie i stąd właśnie pojawiła mi się ta usterka.

0:42Natomiast jeżeli wykonywałeś wszystkie operacje krok po kroku razem ze mną to nic

0:46takiego Ci się tutaj nie pojawiło i wszystko powinno być ok.

0:50Dodatkowo jak widzisz tutaj jeszcze wprowadziłem delikatne poprawki

0:55w naszym układzie tutaj w edytorze na stronie logowania i rejestracji, a

0:58mianowicie dodałem tutaj odpowiednie ikonki.

1:01Aby odwzorować ten układ musisz każde pole input ubrać dodatkowo w grupę.

1:07Jak się domyślasz nadać jej tutaj layout

1:10align to parent i wstawić odpowiednią ikonkę.

1:15Ikonki masz tutaj.

1:16Pierwsza z nich to ta ikonka user-thin.

1:21Kolejna to envelope-open-thin,

1:26i trzecia to ikonka lock-simple-thin.

1:32Dodatkowo dla pól input.

1:36Zastosowałem tutaj horizontal padding o wartości 45 pixeli,

1:40dzięki czemu ten tekst jest tutaj odsunięty od lewej krawędzi.

1:43Ikonka mogła być tutaj odpowiednio wstawiona, natomiast sama ikonka.

1:48Jeżeli zerkniemy tutaj na layout na wymiary 24 na 24 pixele

1:52to takie wypozycjonowanie i odsunięcie od lewej krawędzi równe 10 pixeli.

1:58Jeśli więc chcesz odwzorować ten sam

1:59układ, to zapauzuj wideo w tym momencie wprowadzi odpowiednie poprawki.

2:04I wystartujemy już za moment.

2:11Mam nadzieję, że już wszystkie poprawki

2:12zostały wprowadzone i Twój wygląda dokładnie tak jak mój.

2:17Jeżeli przejdziemy do podglądu, to jak widzisz.

2:22Te pola input teraz dużo fajniej wyglądają z tymi ikonami.

2:24A my możemy przystąpić do utworzenia naszego workflow, który pozwoli nam

2:28zarejestrować użytkownika w naszej aplikacji.

2:31Jeżeli korzystałeś z innych systemów do tworzenia aplikacji takich jak np.

2:35framework'i Vue, React bądz

2:37inne, to wiesz, że czasami obsługa rejestracji i logowania użytkowników może

2:42przyprawić o ból głowy i bywa niesamowicie skomplikowana.

2:46Na szczęście w Bubble jest to rozwiązane bardzo prosto.

2:49Otóż jego twórcy pomyśleli o tym, że użytkownicy to taka

2:53podstawowa jednostka, jaka występuje w naszej aplikacji.

2:56Oznacza to więc, że każda aplikacja powinna się z nich po prostu składać.

3:00Dzięki temu przygotowali dla nas odpowiednie, gotowe

3:04akcje, które pozwolą nam w bardzo prosty sposób ich obsługiwać.

3:09Wróćmy do edytora.

3:11Przejdźmy w pierwszej kolejności do zakładki data.

3:14No jak się okazuje mamy tu taki już gotowy, wbudowany

3:16w samo Bubble typ danych o nazwie user, czyli po prostu użytkowników.

3:21O typach danych i o tym jak to wszystko

3:23tutaj działa porozmawiamy sobie dokładniej w kolejnym kursie.

3:27Natomiast teraz trzeba obsługiwać

3:29rejestrację naszych użytkowników zgodnie z tym, co mamy w formularzu.

3:33Wykonaj proszę taką operację.

3:35Przechodzimy do zakładki data.

3:37Klikamy create a new field.

3:40Wpisujemy tutaj full name.

3:45I typ ustawiamy na text.

3:48Klikamy create.

3:49I to jedyna operacja, którą musimy tutaj zrobić na tym typie danych.

3:53Teraz możemy wrócić do workflow,

3:56a w zasadzie do zakładki design i w pierwszej kolejności oczywiście wybrać

3:59tutaj ten przycisk, który nam posłuży jako trigger.

4:03Teraz start edit workflow i tu z gotowych operacji, czyli z sekcji account wybieramy

4:11sign the user up

4:13następnie musimy przekazać wartości tutaj to e-mail oraz password.

4:19Aby to zrobić klikam tutaj w plik i mówię, że do pola tutaj e-mail do bazy danych,

4:24chcę przekazać wartość,

4:25jak się domyślasz z naszego pola input e-mail.

4:30Klikam input e-mail, wybieram value.

4:32Teraz to samo robię dla password.

4:34Odnoszę się do input password wybieram value.

4:39I tak naprawdę to jest wszystko.

4:41Tak, to wystarczy do tego, aby

4:43zarejestrować naszego użytkownika w aplikacji.

4:46Natomiast jak pamiętasz, my tutaj mamy jeszcze pole full name.

4:50Dlatego też dodaliśmy właśnie takie

4:52dodatkowe pole w tym typie danych użytkownika.

4:56Klikam więc tutaj change another field.

5:00Klikam tu, wybieram full name i odnoszę się do pola full name w moim formularzu.

5:06Oczywiście do mojego Value, i to wszystko.

5:09Teraz, jeżeli użytkownik wypełnij formularz, kliknij przycisk, zostanie zarejestrowany.

5:14Ja natomiast chcę dodać tutaj jeszcze jedną operację, a mianowicie

5:18po tym jak zarejestrujemy użytkownika w naszej aplikacji chce go przekierować na

5:22inną stronę, czyli wybieramy navigation go to page.

5:26I tym razem chcę, żeby to była strona o nazwie dashboard.

5:30Nie mamy jej tutaj na liście, ale możemy ją

5:32też utworzyć z tego miejsca, czyli create a new page.

5:39Dashboard, nic tutaj nie klonujemy.

5:41Klikamy create.

5:43Już teraz nasz workflow jest gotowy, tylko

5:45oczywiście musimy wskazać tą stronę utworzoną, czyli stronę dashboard'u.

5:49Wracamy więc do podglądu naszej strony.

5:52Odświeżamy.

5:56I musimy teraz wypełnić te pola.

6:02Wpisujemy jakieś przykładowe wartości.

6:10I hasło ustawmy może na 1, 2, 3, 4, 5, 6.

6:15Klikam przycisk sign up.

6:19Muszę chwilę poczekać.

6:22Klikam nigdy, nie chce zapisywać tego w przeglądarce.

6:26Jak widzisz, zostaliśmy przekierowani na właściwą stronę.

6:29Natomiast czy użytkownik został

6:30rzeczywiście zarejestrowany w naszej aplikacji?

6:33Możemy to w bardzo prosty sposób sprawdzić.

6:35Wracamy do edytora.

6:37Przechodzimy do zakładki data.

6:39Jeżeli chcemy zobaczyć jakie dane znajdują

6:41się w naszej bazie danych, wybieramy tutaj AppData.

6:45Wybieram ten typ, który mamy tutaj, jedyny

6:48na chwilę obecną, czyli wszystkich użytkowników.

6:51Jak widzisz Adam Nowak został dodany

6:54do naszej bazy danych, czyli został zarejestrowany w naszej aplikacji.

6:59Jak widzisz nie ma tutaj nic trudnego i

7:01rejestracja użytkowników jest niesamowicie prosta.

7:05W kolejnej lekcji skupimy się na tym,

7:07jak wyciągnąć takie dane podstawowe o użytkowniku, jak pozwolić mu się wylogować

7:11z naszej aplikacji oraz oczywiście jak potem się do niej zalogować.

7:15Tak więc widzimy się już za moment.