Aplikacje no-code z Bubble: Strona onboardingu

0:00Witam Cię w ostatniej lekcji z tego

0:01modułu, w której czeka nas trochę pracy związanej z modułem kolejnym.

0:06Prowadzimy kilka odpowiednich poprawek, tak aby w przyszłym module, kiedy będziemy

0:10tworzyć dashboard dużo wygodniej już nam się pracowało.

0:14Przede wszystkim jak widzisz jestem obecnie na stronie logowania,

0:17gdzie dodałem dwa przyciski login as demo gest i login AS Demo host.

0:21A skoro mamy tutaj logowanie, to znaczy, że będziemy musieli najpierw utworzyć

0:25odpowiednie konto gościa i odpowiednie konto hosta w naszym serwisie.

0:30Jak pamiętasz w lekcji dotyczącej workflow

0:32ja już zarejestrowałem jednego użytkownika.

0:35Jeżeli wrócę sobie do edytora, przejdę do bazy danych.

0:39Tutaj do zakładki Data kolejno AppData i All Users.

0:44Mam tutaj właśnie tego zarejestrowanego użytkownika.

0:47Natomiast nie pamiętam jakie hasło tam ustawiłem.

0:50Oczywiście moglibyśmy teraz wyposażyć naszą aplikację

0:54w odpowiednie workflow, które by przypominało takie hasło użytkownikowi.

0:57Natomiast nie chcę tracić na to swojego

0:59czasu, a więc po prostu zaznaczam ten rekord i go usuwam.

1:04I teraz po prostu za pomocą formularza

1:06rejestracji utworzę jeszcze dwa odpowiednie konta.

1:10Klikam Gotowe.

1:11Natomiast jeżeli widzisz tutaj ten guzik o nazwie New Entry, to możesz sobie pomyśleć

1:15dlaczego nie dane użytkownika właśnie w ten sposób do naszej bazy danych.

1:19Ja nie chcę się tutaj za bardzo zagłębiać

1:20w szczegóły, natomiast w przypadku tutaj data type users oczywiście w ten sposób

1:25możesz dodać nowy rekord, czyli taki odpowiednik rejestracji.

1:29Natomiast nie będziesz w stanie ustalić

1:31tutaj hasła, co znaczy, że nie będziesz mógł potem się

1:34zalogować na takiego użytkownika, ponieważ no właśnie nie masz dostępu do jego hasła.

1:38Dlatego właśnie musimy skorzystać z formularza rejestracji.

1:42A więc wracamy na stronę.

1:45Tutaj z taśmą logowania.

1:46Przejdźmy na stronę rejestracji i dodajmy pierwszego użytkownika.

1:51W moim przypadku będzie to ja sobie tu skopiuje ten adres.

1:57Jeżeli dam radę.

2:00Czy tutaj coś mi to pomoże?

2:02Nie, niestety nie pomoże to nic.

2:05Mamy tutaj Office, Małpa, Stay nest Info.

2:08A więc od tego zacznijmy.

2:16To będzie konto gościa, więc tu dodaje sobie plus gest.

2:21I teraz ustalam odpowiednie hasło.

2:25Klikam sign up.

2:28Pierwsze konto zostało utworzone.

2:30Przenieśliśmy się na stronę naszego

2:32dashboard, którą utworzyliśmy w jednej z poprzednich lekcji.

2:36Tutaj wiele się zgadza.

2:38Klikam layout.

2:40I dodaje kolejne konto.

2:50Opus Dei Nest Info.

2:54Oczywiście bez literówek.

2:58Tym razem będzie tutaj Plus host.

3:07Daje hasło.

3:09Klikam sign up.

3:11I mam już otworzone oba konta, mogę kliknąć Lock out.

3:16Nic się nie dzieje. Jesteśmy z powrotem na stronie logowania.

3:19I teraz wróćmy sobie do edytora.

3:25Przejdźmy tutaj.

3:27Spróbujmy odświeżyć.

3:31No babol czasami ma problem żeby sobie odświeżyć tą bazę danych.

3:36Jeszcze raz.

3:39Spróbujmy po prostu odświeżyć cały edytor.

3:46Teraz pojawiają się tutaj oba te konta, czyli konto gościa i konto hosta.

3:52Natomiast w jaki sposób możemy je rozróżnić po samym mailu?

3:55Na pewno nie. Jak się domyślasz

3:57w mailu nie będziesz w stanie później wyłapać podczas rejestracji Twoich

4:01użytkowników czy ktoś wybrał sobie konto gościa czy konto hosta.

4:05Dlatego też musimy tutaj dodać odpowiednią kolumnę do naszego data type user.

4:09A więc przechodzę tutaj.

4:10Ja nie chcę się za bardzo zagłębiać tutaj jeszcze bazy danych,

4:13natomiast jedyne co tutaj chwilę obecną potrzebujemy to po prostu nowy filtr.

4:18A ten film będzie się odnosił do setu, którego jeszcze nie mamy.

4:21A więc może najpierw przejdźmy do 800.

4:24I tu dodajmy sobie nowy o nazwie S User Type.

4:30I tak naprawdę potrzebujemy tutaj tylko dwóch opcji, czyli host.

4:36Oraz gest.

4:39Właśnie bardzo często W ten sposób za pomocą Option setu będziesz tworzył

4:43różne typy użytkowników w swojej bazie danych i dzięki temu w kolejnej lekcji,

4:48kiedy będziemy tworzyć nasz dashboard, będziemy mogli się odnosić do tej opcji.

4:51Do tego pilnować i odpowiednio wyświetlać

4:54właściwy dashboard dla danego typu użytkownika.

4:57Natomiast na razie utworzyliśmy tylko taki obszar.

5:00Set Wracamy więc do Data Types.

5:04Dochodzimy do username tylko Data type.

5:07Klikam Create new wild i po prostu nazywam to User type.

5:12I odnoszę się do OS i user type.

5:17Klikam Create.

5:19Teraz muszę sobie już ręcznie edytować oba te rekordy i wskazać odpowiedni user type.

5:27A więc klikam tutaj na tą ikonkę edycji

5:29tego rekordu i tutaj user type powinien być równy host.

5:34Mogę to zaznaczyć po prostu ręcznie,

5:36tak jak robiliśmy to w przypadku kiedy je wypełniliśmy.

5:39Klikam save i to wszystko.

5:42Godot jak widzisz tutaj to nie o to wyskoczyło.

5:44To samo robię teraz.

5:47Dla konta gościa.

5:48I już mam dwa rodzaje kont zarejestrowanych w serwisie.

5:53Skoro te konta już mamy, to dodajmy teraz

5:55odpowiednie logo workflow na stronie logowania.

5:58A więc przechodzimy do dizajnu.

6:00Klikam ten guzik demo gest btn Start Edit Workflow.

6:05Jedyne co chcę tutaj zrobić to po prostu zalogować użytkownika.

6:11Natomiast tym razem nie pobieramy tutaj żadnych wartości z pól email, tylko

6:14wykorzystujemy po prostu te dane użytkowników, których już mamy w serwisie.

6:19A więc ja mogę sobie tutaj po prostu ręcznie wpisać Office.

6:24Plus gest.

6:27Małpa.

6:30Info.

6:32I hasło, które podałem.

6:36OK. Czemu mi to nie wyskoczyło?

6:38Spróbujmy jeszcze raz.

6:40Office małpa.

6:43Office plus gest.

6:46Małpa.

6:47Next info Zaznaczam sobie ten tekst, w razie czego klikam tutaj.

6:55I ok, teraz się to zgadza.

6:56Jak widzisz po prostu podałem te dane, które mamy w bazie.

6:59Te dane muszą się zgadzać z danymi, które podałeś przy rejestracji, kiedy tworzyłeś

7:04konto u siebie, konto gościa i konto hosta.

7:07Ja mam taki mail i takie hasło.

7:09Nie jest ono zbyt skomplikowane.

7:11Chcę tutaj zalogować użytkownika i przenieść go później.

7:16Na naszą stronę Dashboard.

7:20To samo robimy teraz tego drugiego balonu dotyczącego konta hosta.

7:26A więc started it workflow.

7:29Znowu account the user in.

7:32W tym przypadku będzie to.

7:36Tutaj plus post.

7:42Ich hasło to po prostu chaos w moim przypadku.

7:47I znów nawigacja Gould Page.

7:51Dashboard.

7:53I zerknijmy, czy rzeczywiście nam to odpowiednio zadziałało.

7:58Może nie tutaj, tylko tutaj.

8:00Odświeżam stronę.

8:03I spróbujmy przejść na konto gościa.

8:07Wygląda na to, że wszystko jest ok i wyskoczył mi poprawnie.

8:10Zostałem przeniesiony na stronę Dashboard.

8:13Jeszcze przetestuję sobie konto hosta na wszelki wypadek.

8:19Wszystko się zgadza.

8:20Podałem właściwe dane, a więc Babel mnie odpowiednio zalogował.

8:24Natomiast tak jeszcze kolejna bardzo ważna rzecz.

8:27User type, który ja teraz ustawiłem ręcznie, czyli guest albo host.

8:31Ty oczywiście ręcznie ustawiać nie będziesz dla swoich użytkowników,

8:35więc musimy dać im jakiś sposób na to, aby sami mogli wybrać jakie typ konta chce

8:40utworzyć, czy chcą być gośćmi, czy chcą być hostami w naszym serwisie.

8:45Jak widzisz, jeżeli przejdę tutaj do strony rejestracji.

8:49Nie mamy tutaj żadnego check boxa,

8:51który by pozwolił wybrać jaki typ konta użytkownik chce stworzyć.

8:56Ja to zrobiłem specjalnie,

8:57ponieważ jeżeli dodałbym tutaj checkbox to jestem na 99% pewien, że cała masa

9:02użytkowników po prostu zapomniała by zaznaczyć.

9:05Dodatkowo jeżeli wybrałbyś jeszcze opcję Continued.

9:08Google, do czego zresztą przejdziemy w sprincie numer dwa.

9:11Kiedy dodamy możliwość tworzenia konta za

9:13pomocą Googla ciężko będzie użytkownikowi zaznaczyć to trzeba kliknąć tutaj.

9:19To będzie stwarzało bardzo dużo problemów.

9:21O tym później porozmawiamy.

9:23Dlatego też ja w tym celu stworzyłem w naszym serwisie osobną stronę.

9:27Zaraz Ci pokażę i osobie omówimy, a Twoim

9:30zadaniem będzie oczywiście wdrożenie jej potem samemu.

9:33Wracamy więc do edytora.

9:37I ta strona w moim przypadku nosi nazwę po prostu on boarding.

9:40Będzie to taki bardzo prosty on boarding,

9:42który musimy na użytkowniku po utworzeniu konta w naszym serwisie.

9:48I nagrywają mi się tutaj dwie grupy, ale to nic.

9:53Ukryjemy chwilowo objaw

9:54i przejdźmy do ustawień strony to mamy standardowe ustawienia.

10:00Layout typu Align to parent 1440 pikseli w tym przypadku na 700.

10:06Do środka dodajemy page wrapper, który

10:08również ma align to parent i zajmuje całą szerokość i wysokość tej strony.

10:14Kolejno dodajemy tutaj grupę o nazwie Step 1.

10:18I w tym przypadku jest to kolumn rok lub 32 piksele.

10:23Padding z każdej strony to 32 piksele.

10:27Jak się domyślasz.

10:28Break point 768.

10:30Wybierzmy tutaj właśnie ten.

10:33Padding zmieniamy z lewej i z prawej strony na 16 pikseli.

10:37Kolejno mamy tutaj następną grupę header, gdzie mamy rok ustawiony na 16 pikseli.

10:44Kontener layout typu column.

10:46W środku mamy z kolei.

10:49Nagłówek trzeciego typu.

10:52Kolejno body MD 16, pikseli 400.

10:55Tutaj mamy kolejną grupę.

10:58Tym razem mamy tutaj rok próbny 24 pixele

11:02i dodatkowo jeszcze maksymalna szerokość ustawione na 320 pikseli.

11:06Jak widzisz i marginesy od góry i od dołu równe 12 pikseli.

11:12W środku mamy zwykłe pole input, wysokość

11:1548, a styl to NAS po prostu input standard.

11:20Kolejno button, button, premier i Big.

11:23Taki styl mamy tutaj zastosowany.

11:26Kolejna mamy tekst Body SM 14 pixeli 400 i tutaj dodałem jeszcze grupę,

11:32która ma tak przede wszystkim border top ustawiony na

11:371 piksel solid nasz color neutral 300 a w środku.

11:44A padding.

11:45Szesnaście pikseli z góry i 64 piksele z lewej i z prawej strony.

11:52A w środku po prostu tylko tekst.

11:56Body XS 12 pikseli 400.

11:59To jest cała ta grupa.

12:01Twoim zadaniem będzie teraz tutaj dodać.

12:05Dostać odpowiednio również dostosować do stylów mobilnych, czyli pod RWD.

12:10Natomiast ona jest na tyle prosta, że nie będziesz miał tutaj zbyt wiele roboty.

12:13Trochę więcej do zrobienia będziesz miał przy grupie numer dwa.

12:17A więc przejdźmy teraz do niej.

12:19Oznaczam tą grupę, pokazuję grupę nr 2.

12:24Jak widzisz mamy trochę więcej elementów i zaraz je sobie omówimy.

12:27Zaznaczmy tutaj całą tą grupę.

12:31Znów padding to 32 piksele.

12:35Góra dół.

12:37To dajmy może właśnie 32.

12:40Jeszcze lewa prawa.

12:41Pewnie o tym zapomniałem, a chcę to jeszcze dodać.

12:45O właśnie!

12:48Max White tutaj ustawiłem sobie na 1000 57 dajmy tu 1000 to.

12:55Właśnie w ten sposób.

13:00Condition, ale to tylko zmniejszamy lewy padding, prawy padding dla tysiąca dwustu.

13:08O właśnie w ten sposób

13:10jeszcze ustalamy wtedy maksymalną szerokość całej tej grupy na 768 pikseli.

13:16Layout.

13:18Wróćmy jeszcze do tego typu kolumn i 32 piksele rogate.

13:23Teraz przejdźmy.

13:25Mamy tutaj header.

13:28Jest to grupa typu kolumn 16 pikseli, a w środku w zasadzie mamy

13:34tylko ten nagłówek, więc równie dobrze mógłbyś się całej tej grupy pozbyć.

13:39Ja po prostu pewnie kopiowałem to z poprzedniego stepu.

13:42Tutaj nagłówek też trzeciego typu

13:44standardowo jak to było miejsce, jak to miało miejsce w tej grupie numer 1.

13:50Oczywiście to powinno być grób.

13:54Zawsze wyłapujemy gdzieś jakieś drobne niedociągnięcia.

13:59OK.

14:02Teraz przechodzimy.

14:04Tutaj do tej grupy content same mamy tutaj ustawione.

14:08Mamy ustawiony tak.

14:10Layout na row 32 piksele row i kolumn.

14:15I w zasadzie tutaj tyle.

14:18Następnie mamy tutaj grupę Step Account Group.

14:22Kolor. 24 piksele.

14:25Maksymalna szerokość ustawiona na 496 pikseli.

14:28To już sobie odpowiednio wcześniej dobrałem.

14:31I tutaj mam jeszcze dwa break point poniżej 1.

14:35200.

14:35Maksymalna szerokość ustawiona na 100%, żeby ta grupa mi się tutaj rozciągnęła, a

14:40ta druga jak się domyślasz wskoczyła pod nią.

14:44Kolejno mamy tutaj.

14:47Tekst.

14:48Jest to nagłówek piątego typu, który potem odpowiednio je.

14:54I mamy tutaj te grupy z kartami.

14:56One będą się zachowywały dokładnie tak samo.

14:58Tu mam jakieś niepotrzebne odniesienia.

15:02Pewnie kopiowałem tą grupę.

15:05I wyskakiwały mi jakieś dziwne rzeczy.

15:10I teraz zerknijmy na całą tą grupę.

15:13Border 1 piksel solid nasz standardowy kolor obramowania Neutral 300.

15:20Mamy tutaj row.

15:21Maksymalna szerokość 500 pikseli.

15:26Conditions.

15:29Zerknij sobie proszę jak ja to ustawiałem.

15:32Mamy 2 dla 1200 i 768 pikseli kolejno w środku.

15:39Mamy grupę.

15:41Która domyślnie ma tutaj nadany obrazek.

15:45Jest to gest, skąd o ile dobrze pamiętam albo akord gest.

15:50Znajdziesz go w katalogu Images.

15:53Centrowanie.

15:54Tutaj po zaznaczane te opcje.

15:57I tak w tym przypadku dajemy tutaj

15:59zaokrąglenie 8 pikseli dla top left oraz bottom left.

16:05Natomiast dla conditions na 768 pikseli mamy tutaj tak.

16:11Smarujemy to zaokrąglenie bottom left, ale

16:14za to dodajemy zaokrąglenie to Prime i ustawiamy max i Midway na 100%.

16:22Kolejna ta grupa z contentem.

16:25Tu z kolei mamy typ kolumn.

16:28Maksymalna szerokość 50%.

16:34Padding.

16:34Jak widzisz 16 pikseli z każdej strony i rogach równe 8 pikseli

16:39i condition, ale bardzo zbliżone, czyli poniżej 768 100% na max width i 2.

16:46I dokładnie to samo mamy zastosowane tutaj.

16:49To jest po prostu powielanie tej grupy.

16:50Zmieniasz tylko obrazek.

16:53Kolejno przechodzimy tutaj do tej grupy Step Details.

16:59I tak domyślnie mamy tutaj układ typu

17:02kolumna waga 24 piksele, maksymalna szerokość 496 pikseli.

17:09I tutaj.

17:11Oczywiście Condition na 1.

17:14200 i poniżej max mid ustawione na 100%.

17:18Następnie tutaj mamy.

17:21Nagłówek piątego typu, podobnie zresztą jak tutaj i tutaj.

17:25Kolejno grupy.

17:27Tura.

17:30Będą się odpowiednio tutaj ustawiały.

17:35Tak tutaj mamy roll 24 na 24 piksele.

17:41Tutaj mam zastosowany picture Apple After.

17:44Z niego jeszcze nie korzystaliśmy.

17:45Znajdziesz go.

17:48Tutaj w sekcji Input Forms.

17:50Ja mu nadałem stałe wymiary 96 na 96 pikseli i niemal standardowe style.

17:57Please holder to upload an image i tutaj powinno być 500k, czyli standardowe style,

18:04które mamy zwykle ustawione dla pól input czyli 14 a secondary 600.

18:10Biały kolor tła obramowanie 1 piksel neutral 300.

18:16Nazwijmy ten styl.

18:19Picture Apple Puder Standard.

18:25Tu mamy button.

18:27Styl Button Outline Smile.

18:30A tutaj mamy grupy.

18:33Które mają szesnaście na szesnaście pikseli.

18:37W środku mamy pola zwykłe pola input.

18:42Tutaj ustawione style na input standard.

18:46Nic nowego już z tych pól input korzystaliśmy.

18:48Tutaj mamy tekst, tutaj mamy tekst, tu dodałem nowe pole.

18:52Jest to to pole Search Box.

18:56Pracę kodera zmieniłem na Location a, czyli styl wybrałem na Geographic Places.

19:02Będziemy z tego korzystać w sprincie numer dwa.

19:04Pokaże Ci właśnie, co ta opcja nam tutaj daje.

19:08Natomiast jeżeli dodasz takie pole, to pojawi Ci się ten komunikat.

19:12Tu już wspominałem o braku tych kluczy do Google Map.

19:15Tym się nie przejmujemy, po prostu ignorujemy to i już.

19:20To mamy standardowe pole input, tym razem Content Format ustawione na US von.

19:26Następnie dodałem tutaj pole Multi Line Input.

19:29Czyli to jest zbliżone i działa w zasadzie dokładnie tak samo jak zwykłe pole.

19:33Input natomiast pozwala nam wstawić tutaj po prostu więcej niż jedną linijkę tekstu.

19:38Stuff Jak widzisz mamy tutaj standardowe ustawienia dla stylów i tylko layout.

19:43Tu mam ustawione min.

19:45Height na 120 pikseli.

19:48Kolejno mamy tutaj.

19:51Body MD 16 pikseli 500.

19:54A tutaj wstawiono Reporting grupę z językami dostępnymi dla naszego hosta.

20:01Znów może sobie tą grupę po prostu skopiować.

20:04O ile dobrze pamiętam z popup u na stronie search.

20:09I dokładnie mamy tu niemal te same ustawienia condition, ale to dla

20:14track pointów poniżej 576 pikseli, a w zasadzie mniejszych równych.

20:19Zmieniam ten układ na dwie kolumny i trzy rzędy.

20:23Standardowy baton.

20:26I ta sama grupa, z której korzystaliśmy w sklepie Eden.

20:28Tylko tutaj tekst się zmienia.

20:31Teraz Twoim zadaniem będzie oczywiście

20:33przygotować taką grupę, przejść przez te wszystkie sceny, które Ci pokazałem.

20:39I tak na dzień dobry po załadowaniu się

20:41strony chcemy sobie tak pokazywać tą pierwszą grupę.

20:46Czyli ta ma być widoczna po załadowaniu strony.

20:50Natomiast grupę Step 2 ukrywamy.

20:53W ten sposób one nie będą na siebie nachodzić.

20:56Natomiast oczywiście w trakcie pracy dodawania pamiętaj, żeby ta grupa była

20:59widoczna, a żebyś mógł sobie przetestować to na różnych widokach itd.

21:04To jest Twoje zadanie domowe.

21:07I tym właśnie zadaniem kończymy cały moduł numer dwa.

21:11Za nami cała masa pracy za modelowaniem

21:13tych wszystkich stron, a przed nami jeszcze budowa Dashboard u.

21:17A więc dziękuję Ci jeszcze raz za uwagę i widzimy się już kolejnej lekcji.