Aplikacje no-code z Bubble: Startowe widoki

0:00Cześć!

0:00Mam nadzieję, że ani strona profilowana, ani tym bardziej dostosowanie jej pod RWD

0:04nie sprawiło Ci jakiegoś większego problemu.

0:07Jeżeli jesteś ciekaw jak ja to rozwiązałem to zerknij sobie tutaj.

0:12Ja ustaliłem SSID dla break pointa mniejszego bądź równego 1200

0:19maksymalną i minimalną szerokość tej grupy na 100%.

0:24Natomiast co to oznacza tutaj dla naszych stylów HTML?

0:27Oznacza tylko tyle, że to sticky pricing powinno się uruchomić dla szerokości

0:33przynajmniej jeden piksel większej niż 1200, czyli od 1200 1 pikseli w górę.

0:39Jak to osiągnąć?

0:41Jest to super proste.

0:43Wystarczy zastosować takie media query,

0:45gdzie tym razem minimalna szerokość od której chcemy uruchamiać to 1000 201

0:49pikseli i w środku pozostawiamy te nasze ustawienia.

0:53I tak naprawdę to wszystko.

0:55I teraz właśnie Sticky Pricing działa tylko na widoku desktopowego.

0:59Czyli dlatego powyżej tysiąca 201 pikseli,

1:02a poniżej już tutaj nie będzie nam się to ładowało.

1:06I ta grupa nie będzie miała tutaj ustawionego sticky pricing.

1:10Natomiast wróćmy jeszcze na chwilę do podglądu naszej aplikacji.

1:13Jesteśmy na stronie profilowego, jesteśmy zalogowani.

1:16Ja chciałbym wrócić właśnie teraz do

1:18naszego Dashboard u i okazuje się, że jest to niemożliwe.

1:21Bo jeśli kliknę teraz na nasze menu w

1:22barze, to okazuje się, że mam tutaj tylko opcję rejestracji itd.

1:26Musimy teraz więc zadbać o to, aby wyświetlać nieco inne tutaj linki.

1:31W zależności od tego, czy użytkownik jest czy nie jest zalogowany.

1:35A więc wracamy do edytora.

1:38Przechodzimy do naszego głównego gara, czyli E.

1:42Otwórzmy tutaj to nasze menu i to co chcę zrobić, to zaznaczyć wszystkie te.

1:48Elementy tutaj.

1:51I zgrupować je.

1:53W kolumnie container.

1:56Nazwijmy tą grupę.

2:00Będzie to menu.

2:03Locked out.

2:10O właśnie w ten sposób GRUB i tak nadaje my tutaj tylko

2:15caps passing taki jaki był wcześniej, czyli 16 pikseli.

2:19I tak ja domyślnie będę chciał ukryć taką grupę, czyli nie pokazywać jej tutaj.

2:25Natomiast kiedy chcemy ją pokazać, chcemy

2:27ją pokazać wtedy, kiedy nasz użytkownik jest wylogowaniu się.

2:33W Babel jest to niesamowicie proste do sprawdzenia.

2:35Wystarczy, że przejdziemy do zakładki Condition all.

2:40Tutaj wybierzemy sobie kręty user

2:42i tu na samym dole znajdziesz opcję is locked out, czyli bubble.

2:46Sam sprawdzi czy użytkownik niezalogowany.

2:48I to wszystko co musieliśmy zrobić dla wylogowanie tego użytkownika.

2:52Natomiast ja teraz będę chciał sobie

2:54zaznaczyć taką grupę i ją tutaj zduplikowane, czyli kopii.

3:02Wklejamy.

3:04Zmieniamy nazwę na No Getin Group.

3:09I tym razem mówimy, że ona ma być widoczna wtedy, kiedy użytkownik jest zalogowany.

3:13Czyli is located in. To wszystko.

3:16Teraz oczywiście musimy sobie poprawić

3:18odpowiednio te linki, a więc nazwijmy to grupę.

3:22Tak pozbywamy się sign up.

3:26Tutaj to będzie link o nazwie.

3:29Teraz.

3:31Privacy Policy.

3:35A więc odzwierciedla dokładnie to samo, co

3:37mamy w menu dla naszego baraku przystosowanego do Dashboard u.

3:42Tu będę chciał wstawić tekst pozbyć się Help Center.

3:48Tutaj wybrać Mój styl Tekst, link menu.

3:53Kogut.

3:58Pozbywam się.

4:00Tego i tego.

4:01Tutaj oczywiście będziemy chcieli dodać workflow.

4:06Czyli a konto log d user out.

4:10I navigation Goto Page Sign in.

4:15Wracamy do design.

4:18Grajmy i pokażmy tą grupę niech nam skoczy tutaj.

4:21OK?

4:22I teraz ten link Saiyanin chce zamienić na po prostu dashboard.

4:29I w ten sposób kierować użytkownika na naszą stronę Dashboard.

4:33Natomiast samo to nam nie wystarczy,

4:34ponieważ ja chcę, żeby od razu był przekierowany do właściwego widoku,

4:37a w moim przypadku chcę go przekierować właśnie do widoku gest po Kings.

4:43Natomiast kiedy?

4:45Ponieważ będziemy mieć konto zarówno

4:46gościa jak i hosta, a więc może najpierw prześlemy tutaj odpowiednie dane.

4:52Jak pamiętasz do tej pory Option sety

4:54opisywaliśmy do grupy i potem tym łańcuszkiem przekazywaliśmy dalej i w ten

4:58sposób mogliśmy się do tego odnieść i wybrać sobie odpowiedni atrybut.

5:02Natomiast tutaj nie mam żadnej grupy, co jednak mi w niczym nie przeszkadza,

5:06ponieważ mogę sobie wybrać ten set bezpośrednio właśnie z tych opcji poprzez

5:12ten option wybrać jakie opcje set mnie interesuje.

5:17Jaka konkretnie opcja?

5:18W moim przypadku będzie to Xbox i co tam chcę przekazać.

5:22Chcę przekazać display, czyli dokładnie to

5:24co normalnie przekazywaliśmy właśnie tutaj w data center.

5:28Natomiast kiedy chcę taki link wyświetlać.

5:31Oczywiście tylko wtedy.

5:33Kiedy current user user type.

5:37Jest gest.

5:39A więc jeżeli typ zalogowanego użytkownika to gest, to właśnie taki link tutaj

5:43wyświetlimy i przekieruje my go właśnie do Dashboard u.

5:47Przekierowują go do odpowiedniego widoku.

5:49To co możemy teraz zrobić, to oczywiście powielić sobie ten tekst.

5:53Przesunąć go na górę.

5:59I tym razem

6:01wybrać tutaj nie Xbox, a host listing, ponieważ będzie to główny widok

6:05jaki będzie się pokazywał w dashboard naszego hosta.

6:10A więc wybieram odpowiednią opcję.

6:13Oczywiście odnoszę się do display.

6:15I tym razem zmieniam to User type is host.

6:23I co chcę tutaj ustawić.

6:25This element is visible.

6:27A domyślnie ukrycie.

6:30Ten link i to samo zrobić tutaj

6:32domyślnie ukryć ten link collapse hidden i pokazywać go tutaj wtedy.

6:38Właśnie kiedy ten typ mi się zgadza.

6:42Zaraz zobaczysz, że to odpowiednio zadziała.

6:44Teraz oba te linki zniknęły.

6:45I bardzo dobrze, bo tak powinno być.

6:47Natomiast wróćmy.

6:51Do podglądu.

6:53Zerknijmy czy wyskoczy nam odpowiednie menu.

6:55Jestem zalogowany, więc powinno wyskoczyć.

6:58Jak widzisz zgadza się, mogę kliknąć dashboard.

7:00Jestem zalogowany na konto gościa, a więc

7:03powinienem zostać przekierowany do widoku Guest Booking.

7:06I to się zgadza. To jest tyle.

7:08Tutaj odpowiednio zaskoczyły.

7:11Natomiast to, na czym chciałbym skupić się w tej lekcji to widoki dla Mt.

7:14State.

7:15Jak na razie widzisz jesteśmy zalogowani w

7:18naszym Dashboard, gdzie jesteśmy w widoku Bugs.

7:20Nie mamy tutaj żadnych Boeingów.

7:23No i mamy co mamy pustą przestrzeń w naszym dashboard.

7:27Oczywiście tak być nie może.

7:29Ja zawsze staram się tutaj coś umieścić.

7:30Mógłbyś to myśleć po prostu jedno zdanie, brak rekordów i to wszystko.

7:34Natomiast ja nie lubię takiego podejścia.

7:35Staram się jakoś bardziej indywidualnie i bardziej kreatywnie do tego podejść.

7:39Dlatego też zaraz przygotujemy te empty state dla wszystkich tych widoków.

7:44A więc wracamy do edytora.

7:46Przechodzimy do Dashboard i dodajmy tutaj pierwszą grupę do naszego contentu.

7:53Nazwijmy ją po prostu wrapper group.

7:57I tak będziemy ją sobie zamieniać później

7:59na jej element, więc nie musimy tutaj za bardzo kombinować z nazewnictwem.

8:03I będę chciał ustawić tutaj.

8:06Kolumn.

8:09Spaces between Elements, czyli raw gap na 32 piksele.

8:16Pozbyć się tutaj.

8:19Minimalnej szerokości maksymalną ustawić sobie na 640 pikseli.

8:25Przesuniemy sobie ten panel właściwości w to miejsce.

8:28I teraz zacznijmy tutaj dodawać elementy.

8:31Pierwszym będzie obrazek.

8:37Powiedzmy, że to będzie ostatni MG.

8:44W tym przypadku będę chciał załadować statyczny obrazek.

8:51Z katalogu.

8:53Images Dashboard.

8:56To jest widok dla Pub Kings, czyli ten obrazek.

9:01I tutaj teraz jeszcze odpowiednie opcje.

9:09W moim przypadku tak.

9:12Minimalną szerokość ustawiam na 220 pikseli, maksymalną na 380.

9:20Aspect ratio ustawiam na 1 do jednego.

9:23Będę chciał jeszcze tutaj zaokrąglić te narożniki do ośmiu pikseli

9:28i dodać tutaj jeszcze border z każdej strony na nasz kolor Neutral 300.

9:37Teraz tak w centrum.

9:38Ten obrazek wewnątrz tej grupy.

9:42I dodajmy tutaj kolejną grupę.

9:48To będzie grupa Content Group.

9:54Znów kolumn.

10:02Tym razem tutaj Gap Space Link ustawiam sobie na 12 pikseli.

10:08Oczywiście pozbywamy się tutaj.

10:10Minimalnej szerokości.

10:13Zaznaczmy jeszcze całą tą grupę wrapper.

10:15Pozbądźmy się tutaj minimalnej wysokości.

10:18I teraz tutaj wstawiamy teksty.

10:22W moim przypadku będą to dwa teksty.

10:24Najpierw pozbądźmy się tak tych ustawień layoutu.

10:31Tu mogę sobie wybrać jeszcze fit fit tu content.

10:36I tak stop pikować ten tekst.

10:38I zaraz tutaj wstawimy odpowiednie wartości.

10:47Zaznaczmy ten pierwszy tekst My to pozbądźmy się tutaj tego centrum.

10:54Będzie to Helsing trzeciego typu.

10:59Tekst wyśrodkować kolor secondary 600. Co wyceny.

11:06Ten element.

11:09Teraz wstawiam następny tekst.

11:18Więc gdzie to taki tekst?

11:20Tutaj.

11:21Teoretycznie możemy sobie tutaj zostawić to centrowanie z wykorzystaniem BB kodu,

11:25ale jak się go pozbędę przechodzę do Rich Editor.

11:29Zaznaczam cały ten tekst.

11:32Klikam tutaj. OK.

11:35To nie do końca zadziałało.

11:37Dodało nam teraz left. Cofnijmy te zmiany.

11:39Zostawmy to w ten sposób, tylko zmieńmy czcionkę na właściwą.

11:44W moim przypadku będzie to body MD 16 pikseli 500.

11:52A więc tak mamy tutaj obrazek, mamy grupę z tekstami.

11:54Chcę wstawić jeszcze jedną grupę.

11:58Będzie to CT a Group.

12:05Tutaj też kolumn pozbywamy się minimalnej szerokości.

12:18Ustawiamy Caps Passing na 16 pikseli.

12:21Tu będę chciał dodać padding lewa prawa na 24.

12:27I tak do środka wstawić button, a w zasadzie dwa buttony.

12:33Pobierz button.

12:37I tak.

12:39Pozbądźmy się tych opcji.

12:42Tutaj wysokość 48 na stałą wysokość 48 pikseli.

12:50I to będzie Machine Button.

12:58Styl zmieniam na button Primary Outlook Small.

13:03Tekst na start exploding.

13:12Tak w centrum mega sobie.

13:15Teraz chcę go tutaj powielić.

13:21I tak to będzie z Tad button.

13:28Te ustawienia pozostawiam takie same.

13:30Natomiast jak będę chciał odpiąć te style.

13:35I zastosować tutaj.

13:38Kolor powiedzmy Neutral 600 jako bazowy border neutral 600.

13:46Przejdźmy jeszcze do Condition Alli.

13:50To będzie.

13:52Neutral 25.

13:55A tutaj będziemy mieć.

13:57Background color.

14:01Dajmy mu neutral.

14:02600 OK, będzie się dosyć mocno wyróżniał, ale to nic.

14:07I tutaj zmieniam tekst na szoł full stat.

14:15To daje jeszcze DVD r do środka tej grupy z batonami.

14:30Ta wysokość na jeden piksel.

14:35OK. Teraz zaznaczam całą tą grupę,

14:38pozbywam się minimalnej wysokości i ustawiam sobie field fit tu content.

14:45Chcę ją jeszcze tutaj odpowiednio wycenę ować.

14:49I teraz tylko zerknijmy, bo coś mi tu nie pasuje.

14:57Z.

14:59Mamy tutaj content.

15:00Oczywiście grupa ta wskoczyła mi do contentu.

15:03Przesuwamy sobie to w ten sposób, czyli mamy wrapper.

15:08Obrazek, content, któremu zarabiamy minimalną wysokość i następnie etc group.

15:16I teraz ten pierwszy tutaj element na bookingu jest już gotowy.

15:21To co możemy zrobić to zamienić go sobie oczywiście w USA.

15:24Element ponieważ będziemy tworzyć kilka takich podobnych elementów.

15:29A więc ja sobie go ubieram w grupę.

15:33Obojętnie jaką.

15:34I teraz.

15:36Klikam tylko.

15:38To będzie to gest pół Kings Empty are.

15:52Tu nam coś wyskoczyło jakiś kabel booking z empty cache.

15:57Tutaj mamy ok.

15:59Ustaw tutaj 640 jako default

16:02builder white i to będzie chyba wszystko co musimy tutaj ustawić.

16:09OK, to co mogę teraz zrobić, to na tej

16:11podstawie utworzyć sobie pozostałe Rio Isabel Element.

16:15One będą niemal identyczne.

16:16Zresztą zaraz zobaczysz.

16:18A więc tak mamy.

16:20A więc mamy pierwszy dla bookingu i teraz mogę.

16:23Teraz mogę utworzyć kolejny dla Review.

16:26A więc.

16:29A nierozerwalny element.

16:32Guest reviews Empty Area.

16:39Kopiujemy.

16:41Z tego.

16:44I teraz tak podmieniamy obrazek.

16:51Odnoszę się teraz do rewiru.

16:58Zmieniam teraz tylko te teksty.

17:10To oczywiście tylko tutaj.

17:14Otóż mi to wyskoczyło bez centrowania, więc centrum.

17:20Pogrubia tą ostatnią linijkę.

17:25I tak tutaj teraz ten guzik Gmail jest mi niepotrzebny, więc mogę się go pozbyć.

17:32I mogę się pozbyć DVD.

17:34A więc tak wygląda ten element La Revue.

17:42Teraz dodajemy kolejne.

17:50A więc Adam, Jurek, Isabel, Element, gest, Wish list.

18:08I znów podmieniamy obrazek.

18:11Jest to taka dosyć nudna robota, ale musimy ją wykonać.

18:16Podmieniamy tekst.

18:23I też.

18:27Koncentrujemy.

18:30Pogłębiamy ostatnią linijkę.

18:34I tutaj zmieniamy tekst na przycisku.

18:41W tym przypadku będzie to Create.

18:43Stwórz list.

18:53A został nam jeszcze jeden do utworzenia.

19:04Będzie to gest messages empty, ale tym razem mogę się odnieść do

19:13review, bo będę miał tam tylko jeden przycisk.

19:16Ułatwimy sobie zadania.

19:23Zmieniamy obrazek.

19:31Zmieniamy tekst nagłówka.

19:37I ten tekst.

19:47I to w zasadzie wszystko.

19:48Wszystkie nasze elementy są już utworzone.

19:51Jak widzisz, zajęło mi to dosłownie kilka minut.

19:54Na szczęście nie ma tutaj nic trudnego.

19:56A więc wracamy tutaj do strony Dashboard u.

19:59I teraz tak pozbądźmy się całej tej grupy.

20:06Twórzmy sobie tutaj właśnie. No właśnie.

20:10Niech nam się pokaże inny element strój.

20:17Coś z Babel jakoś nie chce współpracować.

20:20OK, pozbywam się tej grupy.

20:27I tutaj do tej grupy z contentem zaczynam wstawiać odpowiednie elementy.

20:31Zacznijmy od booking z Empty.

20:36Co my tutaj mamy?

20:37Zaznaczmy featured to content.

20:40Zaraz sobie to poprawimy.

20:44A może nie.

20:45Po prostu ustaw tutaj max gif na 640 pikseli.

20:49Właśnie teraz to działa tak jak powinno.

20:53Jeszcze będę chciał.

20:56Ten element centrowania w pionie.

21:00Wygląda na to, że wszystko jest ok.

21:04Tutaj ten obrazek jakoś mi się brzydko załadował, ale to nic.

21:08Mam tylko nadzieję, że to wina po prostu bubla w danej chwili.

21:12Natomiast to co teraz musimy zrobić, to oczywiście zarządzić

21:15tym, kiedy ten element ma się pokazywać, a więc domyślnie go sobie ukrywamy.

21:23I możemy je wykorzystać.

21:26Ten condition all, czyli odnieść się do URL i wyciągnąć tam odpowiedni option set.

21:35Klikam tutaj.

21:41Teraz zaznaczamy This is element i visible

21:43wtedy kiedy ten item numer 2 z naszego URL a to jest record get z booking.

21:48Wtedy będę chciał po prostu właśnie wyświetlać ten element.

21:53To co możemy zrobić teraz, to jeszcze tylko pozbyć się tego AZS nazwę.

22:00Ukryć. I powstawać kolejne.

22:04Czyli następny powinien być reviews.

22:07Zostawmy.

22:11Max White 640 pikseli.

22:15Wygenerowane.

22:18Kopiujemy sobie ten condition all.

22:29Stawiamy.

22:31I oczywiście hidden

22:34i ukryty przy zalogowaniu dokładnie w ten sam sposób, żeby wstawiać kolejne dwa.

22:39Ja teraz nie będę marnował na to czasu,

22:40ponieważ chciałbym omówić jedną bardzo ważną rzecz.

22:43Mianowicie teraz wykorzystujemy tutaj element, czyli tutaj.

22:48W tym kontekście będziemy dodawać

22:50poszczególne grupy odpowiadające za widoki.

22:53Pamiętasz, mówiłem Ci w lekcji o singel

22:55Page Application, że największym problemem jest to, że to wszystko ładuje się w

23:00momencie załadowania tej strony, czyli wszystkie te grupy, które tutaj widzisz.

23:04Natomiast nie do końca tak działa Babel, ponieważ gdybym tutaj zostawił, to niejako

23:10element tylko po prostu dodawał tutaj zwykłe grupy, to rzeczywiście tak by było.

23:14Natomiast Babel załadował by te grupy nawet wtedy, kiedy one są ukryte

23:17domyślnie, a pokazujemy dopiero wtedy, kiedy jest jakiś conditions all spełnione.

23:22Dodatkowo im więcej takich grup tutaj widoku, czyli np.

23:25byśmy chcieli zbudować cały dashboard właśnie składający się tutaj z grup, a nie

23:29element, to po bardzo szybkim czasie nasz edytor całkowicie by tutaj zwolnił

23:34i po prostu praca z nim przestałaby być w ogóle niemożliwa.

23:38Ja kiedyś tak właśnie zrobiłem.

23:39Zbudowałem sobie praktycznie całą

23:40aplikację właśnie jako tutaj grupy i potem się okazało, że nie da się z tym pracować.

23:45Dlatego też zawsze wykorzystujemy tutaj

23:47element, ponieważ w Babel taki element jest ładowany i pobierany w zasadzie

23:53dopiero wtedy, kiedy rzeczywiście musisz go pokazać na stronie.

23:57Czyli przeciwieństwie do normalnej grupy, która jest pobierana nawet wtedy, kiedy

24:00jest ukryta table, element zostanie pobrany i

24:03załadowany dopiero wtedy, kiedy go pokażesz na stronie.

24:07Dzięki temu właśnie dużo szybciej to działa.

24:09Cała ta strona z dashboard szybciej się

24:11załaduje, bo nie będzie musiała pobierać wszystkich za wiele elementu od razu,

24:14tylko będzie je sobie doładowywać wtedy, kiedy aktualnie będą potrzebne, a

24:19dodatkowo dużo szybciej będzie Ci działał sam edytor i ta zakładka design.

24:22A więc to jest to, co chciałbym abyś zapamiętał z tej lekcji.

24:26Właśnie tą mega fajną funkcjonalność

24:28usunal element i dzięki temu mam nadzieję, że będziesz teraz dużo częściej z nich

24:32korzystał, bo jak widzisz mają one praktycznie same zalety.

24:36A więc ja tutaj między lekcjami te dwa pozostałe elementy ustawia sobie tutaj

24:41odpowiednie conditions, ale aby je pokazywać.

24:44A Tobie dziękuję za uwagę.

24:45I widzimy się już za moment.