MVP aplikacji w rekordowym czasie z Bubble: Wdrażamy onboarding
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
W tej lekcji kontynuujemy pracę z bazą danych i naszą chwilowo jedyną
tabelą jaką jest all users.
W poprzedniej lekcji sprawdziliśmy w jakich miejscach jakie dane przekazuje nam
nasz użytkownik, a więc teraz przyszła pora, byśmy zadbali
o to, by te dane rzeczywiście od niego pobrać i zapisywać w bazie danych.
Jak widzisz, ja już tutaj edytowałem sobie oba istniejące rekordy, a więc uzupełniłem
te wszystkie pola, które dodaliśmy w poprzednich lekcjach.
Natomiast zrobiłem to ręcznie klikając po prostu w tą ikonkę i wpisując
właśnie z palca te wartości.
Oczywiście nie jest to pożądane działanie, ponieważ nam zależy na tym, aby to
użytkownik przekazywał te informacje, a nasza aplikacja za pomocą odpowiednich
workflow zbierała je i zapisywała w bazie danych.
A więc w tym celu wracamy na stronę Sign Up, czyli na nasz formularz
rejestracji i mamy tutaj dodane pierwszy workflow.
Czym są workflow już mówiłem w punkcie numer 1.
Jeżeli więc nie wiesz jak działają, to oczywiście odsyłam Cię do niego.
Natomiast w naszym przypadku dodaliśmy tylko jeden prosty workflow Key Trigger
em jest kliknięcie w przycisk Sign up.
Możemy do niego przejść klikając tutaj Edit Workflow.
Jak widzisz, mamy tutaj opcję rejestracji naszego użytkownika.
W takim przypadku wymagane jest tylko pole email oraz password.
Te wartości przekazujemy sobie dynamicznie z pól input w naszym formularzu.
Jeżeli interesują Cię te pozostałe opcje, to możesz kliknąć w
ikonkę Search Reference.
Zostaniesz przeniesiony do dokumentacji i możesz sobie sprawdzić jak one działają.
Natomiast jeżeli chciałbyś oprócz maila i hasła przekazywać w momencie rejestracji
użytkownika jeszcze jakieś inne wartości, np.
moglibyśmy w formularzu pobierać sobie imię i nazwisko i
chciałbyś od razu uzupełnić tę kolumnę?
To możesz zrobić to w tym miejscu poprzez Change another Field.
Wybrać tutaj np. First name.
Jeżeli będziesz miał takie pole input w formularzu, to oczywiście będziesz w
stanie pobrać taką wartość i przekazać ją w tym miejscu.
My tego nie robimy.
U nas wystarcza tylko email i password i to jest wszystko, co jest tutaj wymagane.
Przejdźmy więc może teraz do kroku nr 2, w którym do tej pory kierowaliśmy
użytkownika na stronę Dashboard.
Oczywiście jest to błędne działanie, ponieważ teraz chcemy przekierować go na
stronę buildingu, więc tutaj zamiast Dashboard wybieram sobie on boarding i
użytkownik właśnie zaraz pod koniec rejestracji zostanie
przekierowany na taką stronę.
Natomiast to się zadzieje oczywiście w przypadku rejestracji.
Natomiast co by było, gdyby użytkownik został przekierowany na taką stronę
zaraz po utworzeniu konta i z jakiegoś powodu zamknął naszą aplikację?
Przy zalogowaniu chcielibyśmy sprawdzić, czy rzeczywiście on ten odbiornik
przeszedł, czy musimy go znowu do niego kierować.
W tym celu wracamy sobie tutaj na stronę Sign in, czyli na stronę logowania.
Mamy tutaj log de user in, czyli jak widzisz znowu prostą akcję
zapewnioną nam przez Babel, czyli logowanie naszego użytkownika.
I teraz jak to ma działać, kiedy użytkownik ma trafić
na stronę od brandingu?
Oczywiście tylko wtedy możemy tutaj dodać kolejną akcję.
Navigation Go to Page on boarding.
W momencie kiedy Parent user, czyli ten użytkownik, który się właśnie zalogował do
naszej aplikacji, czyli tutaj się zalogował, w tym momencie
on już jest tutaj zalogowany, a więc możemy się odnieść do parent user i
wyciągnąć sobie wartości ze wszystkich jego pól jakie tam wpisaliśmy.
Natomiast skąd mamy wiedzieć jaka jest wartość tego pola, tego
finisher or boarding?
Otóż jeżeli wrócimy do Data do zakładki Data Types to jak pamiętasz
ustawiliśmy sobie tą wartość default na nowo, a więc ją zarejestrował.
Tak, rekord skoczył do bazy.
Pobraliśmy tylko email i password.
Dodatkowo od razu ustawiliśmy właśnie tą wartość Finish routing na nowo.
Myślę, że dokładnie to samo możemy sobie tutaj zrobić dla I script.
Też chcemy to ustawić na nowo, żeby nie musieć potem tego zmieniać.
A więc te wartości są tutaj uzupełnione.
Oznacza to tylko tyle, że tutaj dla parent user możemy je sobie wyciągnąć.
A więc Karen the user finish recording is now.
Tylko wtedy tylko pod takim warunkiem chcemy właśnie tutaj znowu przekierować
użytkownika na stronę treningu.
Jeżeli finish recording został zakończony, to zmienimy to wartość na Yes.
Ten krok nam się nie wykona, warunek się nie spełni.
a więc bubel wykona natomiast następny krok, czyli przekieruje go na stronę
dashboard, czyli dokładnie tam, gdzie trafić powinien.
Skoro więc stronę logowania i rejestracji mamy już tutaj
w zasadzie skończoną, możemy ją sobie przetestować.
Przejdźmy do naszej aplikacji i spróbujmy się zarejestrować.
Klikamy Sign up.
Podaje maila. U mnie będzie to Office + test Małpa Stan.
Info Oczywiście możesz tutaj podać dowolnego maila.
Podaje jakieś proste hasło.
Klikam sign up i powinienem trafić na stronę art buildingu.
Nie chcę zapisywać.
każdy URL a i ok.
Trafiliśmy na stronę od briefingu.
Na chwilę obecną nic tutaj nie mamy, ale zaraz się tym zajmiemy.
Wracamy więc do edytora i przechodzimy na stronę on boarding.
Zerknijmy, co się tutaj dzieje.
Jak pamiętasz, mówiłem, że mamy tutaj dwa kroki.
A więc przejdźmy do tego.
Step numer 1 layout.
Nie chcemy tego elementu pokazywać na załadowanie się strony.
Ustawiamy collapse hidden, żeby nie zajmował nam tutaj przestrzeni.
Natomiast naszym celem jest pokazanie tego kroku numer
2, a więc tutaj sobie to zaznaczamy.
Wiem, że będzie tu 2 na 2, ale tym się chwilowo nie przejmujemy.
Na razie chcemy wyświetlać tylko ten formularz i musimy teraz zadbać o to, aby
dodać tutaj oczywiście właściwy workflow i pozwolić użytkownikowi
przejść przez ten formularz.
W pierwszej kolejności będziemy musieli zadbać o tą część, czyli użytkownik po
kliknięciu w tą grupę będzie wybierał jakiego typu konta chce korzystać.
Natomiast musimy to jakoś wizualnie wskazać.
Na chwilę obecną tego nie robimy, a więc spróbujmy sobie zaznaczyć całą tą grupę
grupę guest i Spróbujmy dodać tutaj.
Mamy tutaj border, mamy super, mamy border ustawiony na kolor neutral,
więc teraz musimy zadbać o to, aby użytkownik mógł kliknąć w taką
grupę, a my musimy gdzieś przechować tą wartość zanim przejdzie dalej.
A więc jak się domyślasz na pewno wykorzystamy tutaj custom states.
Przechodzę do stałej strony on boarding i wybieram sobie a tam
custom stats User type.
Będzie to oczywiście odniesienie do naszego OS User Type.
Nie chcę tutaj żadnej domyślnej wartości.
Natomiast teraz chcę dodać tutaj odpowiedni warunek.
A więc zaznaczam grupę guest.
Przechodzę do Condition i dodaję nowy warunek.
Tylko czy mamy tutaj ustawioną jakąś wartość dla tej grupy?
Nie, nie mamy typeof content nie ustawiliśmy.
A więc żeby nam się jeszcze prościej pracowało, to wybieram
tutaj Type of content.
Będzie to OS User type.
I w tym przypadku będzie to gest account.
Czyli mogę wskazać gest.
Zaraz zobaczysz do czego nam się to przyda.
To samo robię dla grupy Host.
Nie muszę przekazywać do środka żadnych wartości.
Ja chcę tylko ustawić pop content dla tych grup, czyli OS User Type.
W tym przypadku będzie to host.
To był guest.
Tu mamy hosta.
A więc wracamy do gestu do condition i mówimy kiedy on boarding odnosimy się do
custom statu przypisanego do całej strony.
W zasadzie strony obok ringu, czyli boarding user type jest równe
this group of user type.
To co chcemy zrobić?
Ja chcę zmienić tutaj tylko kolor tego burdelu czyli border color.
Nie neutral tylko dajmy tutaj może właśnie Primary 600.
Mogę sobie teraz skopiować ten condition czyli cały ten warunek i
dodac go tutaj na grupy host.
OK, czyli teraz jeżeli użytkownik kliknie to w jakiś sposób musimy ustawić ten
custom state, A więc musimy dodać właśnie znowu tutaj odpowiednie workflow
po kliknięciu w te grupy.
Zacznijmy od grupy Guest a do Workflow.
Co chcemy zrobić?
Chcemy zmienić status danego elementu, czyli wybieramy
tutaj akcje Set state of the element.
Naszym elementem jest on boarding i Custom state o nazwie User type,
a wartość to po prostu this group of user type, ponieważ go sobie tam zapisaliśmy.
Powiedzieliśmy, że cała ta grupa ma mieć właśnie tutaj ten OS user tip równy np.
gest, a więc taki zostanie ułatwiony.
Jak widzisz, w ten sposób nie musimy wskazywać ręcznie, tylko po
prostu przekazujemy sobie właśnie user type czy ten właśnie type
ustawiamy dla całej grupy.
To samo możemy zrobić właśnie tutaj, dla tej drugiej grupy.
Akcja będzie dokładnie taka sama, więc możemy sobie kopiować
tą akcję, wkleić tutaj i w ten sposób już powinniśmy móc sobie
wybierać odpowiedni user type.
Przejdźmy do strony od brandingu. Odświeżamy.
Powinna nam się załadować cała ta sekcja.
Klikam tutaj.
Jak widzisz ta grupa jest już tutaj podświetlona.
Klikam tą.
Zmienia się ten state na właściwy.
A więc tak użytkownik najpierw wybiera z jakiego konta będzie chciał korzystać,
a teraz będzie nam tutaj właśnie uzupełniał pozostałe dane.
Sam więc musimy znów dodać odpowiednie workflow i je sobie przekazać.
W tym przypadku będziemy oczywiście korzystać zwrotu ustawione na po
kliknięciu w ten przycisk, czyli użytkownik wypełni te dane, kliknie w
przycisk, a my je sobie oczywiście pobierzemy i aktualizujemy jego konto.
Natomiast zanim to zrobimy, to zerknij jeszcze tutaj na tę sekcję.
Tutaj znowu mamy odpowiedni option set, a więc podobnie jak
tutaj, również będziemy musieli zadbać o to, aby użytkownik mógł sobie kliknąć bądź
kliknąć, w ten sposób zaznaczyć bądź odznaczyć daną opcję.
A więc wracamy znów do strony buildingu i jak się domyślasz dodajemy
kolejny custom state.
Tym razem będą to języki, które użytkownik będzie mógł sobie wybrać jako takie,
którymi posługuje się właśnie na co dzień.
Wybieramy State Type.
Mamy to Host musimy tutaj zmienić, ponieważ zarówno
host jak i zwykły guest będzie mógł wskazać z jakich języków korzysta.
A więc na razie wskażemy sobie ten option set.
Klikamy Create, ale od razu zadbajmy o to, aby zmienić jego nazwę.
Tutaj na nic nam to nie wpłynie, ale niech zostanie tylko to po prostu taki set.
Wracamy do brandingu.
Babel automatycznie to zmienił.
Zresztą mogę ci to udowodnić.
Jak widzisz, mamy tutaj już odpowiednią wartość.
A więc tak tylko zadbajmy o to, żeby to była lista, ponieważ użytkownik może
wskazać więcej niż jedną wartość.
No i teraz mamy tutaj scripting grupę.
Znów pokazujemy te wszystkie języki.
Możemy więc zadbać o to, aby po kliknięciu właśnie w taką
grupę tylko oczywiście zmienimy jej nazwę.
Odpalić odpowiednie workflow.
Klikamy.
Tak.
Akcja będzie znów ta sama.
Set state of element.
Odnosimy się do on buildingu, do custom state z językami i co chcemy zrobić tutaj.
Tym razem chcemy pobrać sobie aktualną wartość
tego custom state i dodać do niego jakąś nową wartość albo ją odjąć.
Wiem, że brzmi to trochę skomplikowanie, ale zaraz zobaczysz jak to zadziała.
A więc znowu on. Boarding.
AT i.
W tym przypadku będzie to + właśnie + item i Disk Group.
Oczywiście odpowiedni typ setu.
A więc jeżeli ta grupa była pusta, użytkownik nie wybrał żadnych
języków to dodamy ten jeden.
Po kliknięciu, po kliknięciu w kolejny dodamy następny i następny itd.
Natomiast chcemy to dodać tylko wtedy, kiedy właśnie ta grupa nie zawiera jeszcze
takiego języka, a więc kiedy, kiedy on boarding.
Nasz custom state da Zend contains this group a set item.
Czyli jeżeli na tej liście wybranych języków jeszcze takiego języka nie
było, to chcemy go do tej listy dodać.
Tutaj zadziała nam właśnie ten condition all.
Mogę sobie teraz to skopiować.
I zmienić tutaj warunek.
OK, tylko czemu nam to nie wskoczyło?
Aha, przepraszam cię dodałem ten warunek w złym miejscu kopii Tutaj czyścimy
oczywiście po kliknięciu w tą grupę.
Tutaj chcemy sprawdzać.
A nie ok.
Wstawiamy na razie tutaj.
A więc mamy dwie takie same akcje.
A więc tak klikamy w tą grupę, sprawdzamy czy ten option set nie zawiera już
takiego języka, czyli Zend Container.
To się zgadza.
I teraz dodajemy do tego custom status właśnie ten wybrany język.
Ja tutaj żeby to rozróżnić bardzo często stosuję tutaj kolory.
Przede wszystkim green oznacza, że coś dodaję, a czerwony
będzie oznaczał, że coś tam odejmuje.
Dodatkowo możemy jeszcze nasze workflow organizować tutaj w odpowiednie foldery.
To też jest bardzo przydatne i zaraz zobaczysz jak to działa.
Klikam sobie tutaj Create new folder i to będzie jak się domyślasz
odniesienie do naszych języków.
To samo robię tutaj.
W tym przypadku jest to user type, czyli.
Taki folder.
Gdzie w ogóle podejrzeć takie foldery?
Otóż w label musimy kliknąć w to szare pole.
Tutaj jest to taką strzałką.
Jak widzisz teraz rozwija się ta zakładka i możemy sobie przeglądać foldery i w ten
sposób dużo łatwiej jest nad tym zapanować.
A więc tak jeżeli set nie zawiera danego języka to dodajemy
natomiast tutaj jeżeli zawiera, czyli contains, a więc on
building languages contains this group of languages.
Czyli ta lista zawiera już ten język, to co chcemy zrobić?
Chcemy je odjąć z tej grupy zamiast plusa i wybieramy main sitem.
A więc jeżeli to nadal jest dla Ciebie za trudne, to po prostu siądź sobie na
spokojnie i jeszcze raz odtwórz tą lekcję.
Sprawdź sobie te warunki.
Natomiast w teorii jest to niesamowicie proste.
Jeżeli na liście nie ma danego itemu dodajemy, a jeżeli już
jest to go odejmujemy.
A więc skoro tą część workflow mamy gotową, to teraz podobnie jak w przypadku
tych grup odnoszących się do user type musimy w
naszym formularzu wskazać wizualnie użytkownikowi, że wybrał
dany język bądź go odznaczył.
W tym celu będziemy musieli sobie oczywiście zmienić ikonkę
i odnosimy się do naszego custom states.
A więc on boarding.
Contains.
Parent Group.
other Languages.
Ikonka Musimy tu zmienić icon.
Jest.
Odnosimy się oczywiście do name i wklejamy tutaj odpowiednią wartość.
O właśnie w ten sposób.
I teraz zerknijmy, czy to zadziała.
To daje język.
Ikonka się zmieniła, Klikam drugi raz i to się tutaj odznacza.
Jak widzisz, działa to tak jak powinno.
Mogę dodawać i odejmować kolejne języki, a więc działa ta część.
Działa ta część.
Teraz musimy zadbać jeszcze o ten fragment.
A więc wracamy do edytora.
Przechodzimy tutaj do przycisku.
A do Workflow.
Co chcemy zrobić?
Chcemy się odnieść do Current User, a więc możemy tutaj wybrać Account I make changes
to current user, ponieważ to właśnie nasz zalogowany użytkownik
tutaj zmienia swój profil.
Klikamy Add All Fields.
W ten sposób wyświetlamy wszystkie i pozbywamy się tych,
których nie będziemy potrzebować.
About Odnosimy się do About mi tutaj tego pola.
Wybieramy jego wartość i podobnie robimy dla pozostałych.
Ding.
Jeszcze tutaj zostawimy i z Archive możemy się pozbyć.
I tak jedziemy po kolei.
Avatar to będzie avatar.
Picture Loader Value Site to będzie pole Input, czyli City Input Value.
Finish Tour Boarding. Tak.
Po kliknięciu w ten przycisk chcemy, żeby ta wartość została zmieniona na Yes,
a więc wybieramy To First name.
Znów odnosimy się do odpowiedniego pola input.
Pobieramy jego wartość.
Języki.
Tym razem musimy się odnieść do naszego custom states, ponieważ
tam przechowujemy wybrane wartości.
Mamy tutaj opcje A Remove set, List addict itd.
My w tym przypadku chcemy tą listę, czyli wartość tej kolumny ustawić na
listę, którą mamy właśnie w pierwszym secie, czyli set list on boarding.
I właściwy custom state.
Mogę sobie to skopiować, wkleić tutaj
i wybrać odpowiedni set, czyli User type Last name Znów pobieramy z pola input.
I Von Jak się domyślasz znowu input.
OK.
I teraz użytkownik najpierw wskaże jaki typ konta potrzebuje,
potem wypełni wszystkie informacje w formularzu,
wybierze odpowiednie języki i kliknie w button, aby pobierzemy te wartości
i przekażemy dalej.
Natomiast zanim tutaj to skończymy, zanim przekieruje go na stronę Dashboard, czyli
Navigation Go to Page Dashboard, bo to będzie nasz kolejny krok.
Co musimy jeszcze tutaj zrobić?
Musimy zadbać o to, aby użytkownik rzeczywiście wypełnił tutaj te pola,
czyli żeby te wartości nie były puste.
Jeżeli kliknę sobie tutaj na pole input to mam co prawda jak widzisz tutaj właśnie
taki checkbox list input, shoot and bmp, natomiast to nie do końca działa
właściwie, ponieważ żeby to zadziałało wszystkie pola input
oraz button musielibyśmy mieć w jednej grupie.
Natomiast jak widzisz ja mam tutaj to podzielone na różne grupy,
pozbierane te pola i tak dalej, a więc to niestety nie zadziała.
Jak więc tutaj zablokować użytkownikowi możliwość przejścia dalej?
Jest to niesamowicie proste.
Klikamy na button i zaznaczamy w pierwszej kolejności tą
opcję, a więc ten element nie powinien być klikalne.
Dodatkowo jeżeli przejdziesz sobie do styli to ja już tutaj dodałem odpowiedni
styl właśnie dla takiego warunku.
Po prostu zmieniam tutaj kolor przycisku i kolor fontu tak żeby on właśnie wyglądał
na taki, którego nie da się kliknąć.
I teraz tak.
Dopiero wtedy, kiedy zbierzemy te wszystkie informacje,
chcemy odblokować ten button.
A więc dajemy kolejny condition i zaczynamy tutaj od tej części.
Czyli użytkownik musi wskazać tutaj jakiś typ konta.
Wartość jaką wybrał przechowujemy oczywiście w naszym Custom
State, czyli on boarding.
User type is not empty, czyli jakaś wartość została wybrana.
i chcę, żeby to było end, ponieważ end wymaga, aby pierwszej i każdy
następny warunek był spełniony.
Czyli klikam sobie end.
I teraz odnoszę się tutaj do Avatar u.
Czyli tutaj value jest not empty, czyli jakiś plik został tam wgrany.
To samo robię tutaj end first name.
Value is not empty.
I tak samo robię tutaj dla tych wszystkich pozostałych pól, czyli End last name.
Value is not empty end CT.
Value is not empty and font fun number,
czyli phone input value is not empty.
End about me.
Jak widzisz ten warunek jest dosyć długi, ale niestety jest to w zasadzie jedyny
sposób, abyśmy tutaj rzeczywiście mogli sprawdzić, czy użytkownik wypełnił
wszystkie te pola, czyli About my value is not empty.
Jeszcze zostają nam tutaj języki, czyli znowu odnosimy się do one boarding.
Właściwe customs that.
I tu możemy powiedzieć, że jeżeli First Aid jest not empty, to został
wybrany chociaż jeden język.
Użytkownik musi wskazać przynajmniej jeden.
Nie wymagamy od niego, aby wskazywał więcej, dlatego możemy
właśnie zastosować taki zapis.
Jeżeli ten warunek zostanie spełniony.
Mamy tutaj end, więc każdy z tych poszczególnych warunków
musi zostać spełniony.
Czyli tutaj wartość musi być wybrana i dla tych wszystkich pól, również i tutaj
dla tych języków, co chcemy zrobić.
Wtedy chcemy powiedzieć, że this element is it klika i
zostawiamy ten checkbox pusty.
Czyli na dzień dobry on jest zaznaczony.
Użytkownik nie może kliknąć taki przycisk.
Natomiast jeżeli ten warunek zostanie spełniony, wypełni nam wszystkie wartości,
to go odblokowujemy i użytkownik może sobie kliknąć i przejść
do następnego kroku.
A więc pozostaje nam tylko jeszcze sprawdzić, czy to zadziała.
Mamy tutaj też opcję Change photo, ale do tego jeszcze wrócimy.
Ja pokażę Ci fajniejszy sposób na to, jak tutaj pobierać sobie awatar użytkownika.
Natomiast nie chcę, by ta lekcja trwała tutaj niesamowicie długo, a więc
ograniczmy się tylko do tego i przetestuj teraz ten krok.
Wracamy, Odświeżamy.
Wybieram sobie konto typu gościa.
Tu muszę wskazać jakiś obrazek.
Spróbujmy tutaj wgrać jakiś awatar, powiedzmy na przykład ten.
To będzie, powiedzmy John Wick London.
1, 2 3 1 2 3 1 2, 3, 4.
Cokolwiek, powiedzmy Lorem ipsum.
Nie będziemy tutaj marnować czasu.
Teraz chcę wybrać języki.
Widzisz, wybrałem chociaż jeden i już mogę kliknąć i przejść dalej.
To nam zupełności wystarczy.
Wypełniliśmy wszystkie wymagane dane, czyli użytkownik podał nam te
informacje, których potrzebujemy.
Klikam Save an Pro sid i powinienem zostać przekierowany na
stronę Dashboard, a my wróćmy do edytora.
Wróćmy do bazy danych i sprawdźmy, czy rzeczywiście
zostało to wszystko wypełnione.
Mogę kliknąć ikonkę.
Jak widzisz, wszystko nam się już tutaj wypełniło.
Mamy tutaj jeszcze problem ze slangiem, ale do tego też wrócimy.
Natomiast na chwilę obecną wszystko działa tak jak powinno.
A więc dziękuję Ci za uwagę w tej dość długiej lekcji i widzimy
się już za moment.
Gdzie będziemy dalej pracować właśnie tutaj z kontem użytkownika.