Aplikacje no-code z Bubble: Option sets w praktyce

0:00Zanim przejdziemy do budowy kolejnej

0:02sekcji, musimy poprawić kilka niedociągnięć z lekcji poprzedniej.

0:05Przede wszystkim zauważyłem, że nie zgadza mi się tutaj kolor nagłówka.

0:08Po drugie, odstęp pomiędzy tym tekstem a tą linią jest zbyt mały.

0:12Tak samo zresztą odstęp tutaj na dole.

0:14No i przede wszystkim jeszcze zdefiniowaliśmy tutaj odpowiednie

0:17właściwości dla naszego przycisku, ale nie zapisaliśmy tego jako style.

0:21Wróćmy więc do edytora i przystąpimy do działania.

0:25Przede wszystkim zaznaczam sobie ten nagłówek, czyli H1.

0:28Przechodzę do jego edycji i zmieniam tekst.

0:32Kolor tekstu na Neutral 800.

0:37Wracamy do zakładki Dizajn.

0:40Zaznaczmy teraz tą grupę na warsztat

0:42Wrapper Group i nadajemy jej większy odstęp od góry.

0:46Czyli margines top na 32 piksele.

0:50Kolejno zaznaczamy na rynku Hero

0:53Hero Container Group i nadajemy mu padding bottom równy 96 pikseli.

1:01Jeszcze. Teraz tylko zaznaczmy ten przycisk.

1:03Mamy tutaj zdefiniowane te wszystkie właściwości conditions dla tego przycisku.

1:07A więc gdybyśmy to zostawili w takiej formie i teraz przyszłoby nam np.

1:11zmienić kolor tego przycisku.

1:13A właśnie w takiej formie zostawiłby byś go wszędzie na swojej stronie.

1:17No to mam nadzieję, że już wyobrażasz

1:18sobie mękę, jaką musiałbyś przejść poprawiając to wszędzie ręcznie.

1:23Natomiast jeżeli tylko teraz zdefiniujemy styl, to jak widzisz wystarczy tylko

1:26zmiana w tym stylu czy edycja takiego stylu i ta zmiana ma zastosowanie?

1:31Wszędzie tam jest takiego stylu właśnie korzystasz.

1:34Tak więc jeżeli masz coś zapamiętać ze stylów, to to, że jest to Twój najlepszy

1:38przyjaciel i powinieneś z niego korzystać zawsze podczas budowy aplikacji.

1:43Dodajmy więc tutaj nowy styl.

1:46Nazwijmy to baton.

1:50Primary Big.

1:53Klikamy Create.

1:55I już te wszystkie poprawki są wprowadzone.

1:58Przejdźmy do podglądu.

1:59Odświeżamy.

2:01I teraz wszystko nam się zgadza.

2:03Nie przejmuj się też proszę, że te pola

2:04input potraktowaliśmy poprzedniej lekcji tak bardzo powierzchownie.

2:08W tej chwili zależało nam na tym, aby to

2:10tutaj za modelować tą opcję możliwości wprowadzania jakichś danych.

2:13A więc mogę sobie tutaj kliknąć do pola input i zacząć coś wpisywać.

2:17Do tych pól jeszcze wrócimy.

2:19Jeszcze porozmawiamy o tym, jakie pola

2:21input są dostępne w Babel, jak z nich korzystać, jak zmienić ich rodzaj, a także

2:26jak pobierać te dane, które przekazuje użytkownik, jak je przekazywać dalej.

2:30A więc skoro część z poprawkami mamy już z głowy, to przejdźmy do naszego layoutu

2:34wzorcowego strony i zerknijmy na kolejną sekcję.

2:38Mamy tutaj sekcję Features składającą się z czterech kolumn, a więc bardzo prosty

2:42układ, który myślę, że bardzo szybko wdrożymy.

2:46Wracamy więc do edytora.

2:47Jak widzisz, tutaj nie ma żadnej

2:48dodatkowej sekcji nadającej kolor, a więc powinniśmy zadbać o to, aby cały

2:53nasz page, czyli cała nasza strona miała kolor biały.

2:56Wróćmy więc do edytora.

2:58Przejdźmy do Page Index

3:01i nadajemy jej background title na flat color i wybierzmy kolor biały.

3:10Teraz możemy tutaj dodać nową grupę The Reaper Group.

3:17Dajmy ją w tym miejscu.

3:18Chociaż wydaje mi się, że wskoczyła ona wyżej.

3:20Zaraz zobaczmy to w drzewku elementów.

3:23Skoczyła nam ona tutaj do Hero Group. Możemy.

3:25To natomiast bardzo prosty sposób rozwiązać.

3:27Wystarczy, że kliknę na tę nazwę lewym przyciskiem myszy i przytrzymam go,

3:32a następnie przeciągnie tą grupę tutaj wyżej.

3:35Teraz mogę to samo zrobić dla Hero Group.

3:38Już mamy właściwy układ, czyli najpierw chorał, a potem sekcja features.

3:43W tym przypadku wystarczy nam container tylko nowość produkowania tych treści.

3:47A więc features.

3:53Container Group.

3:56Myślę, że mamy tutaj już

3:58standardowe ustawienia do wdrożenia, które pewnie znasz.

4:01Tutaj będzie to ROW, ponieważ mamy te elementy w rzędzie te 4 kolumny.

4:06Odznaczamy minimalną szerokość

4:09nadajemy maksymalną na 1200 padding z lewej i z prawej równe 32 piksele.

4:16I oczywiście musimy prezentować tą grupę

4:18względem jej rodzica, czyli całego wrapper group.

4:23Kolejno dodajemy następną grupę.

4:28Nazwijmy ją grupą feature.

4:35W tym przypadku będzie to kolumn.

4:39Odznaczamy minimalną szerokość.

4:43Ja chcę tutaj nadać maksymalną szerokość dla takiej grupy na 240 pikseli.

4:49Minimalną wysokość chwilowo sobie

4:50zostawmy, ale usuńmy ją dla rodzica, czyli Features Container Group.

4:56I teraz zacznijmy dodawać tutaj odpowiednie elementy.

4:59Czyli ma być to tutaj ten obrazek, nagłówek oraz tekst.

5:05Wracamy.

5:08Wybierzmy tutaj obrazek.

5:14Nazwijmy to feature image.

5:21Nie i nie tylko i MG.

5:28Wybieram. Tutaj jest odpowiedni obrazek.

5:31Tutaj znajdziesz go w Off Features.

5:34Natomiast, ponieważ te obrazki pochodzą

5:36bezpośrednio z płatnego i wiki, to ja nie mogę Ci ich udostępnić.

5:40Dlatego owszem, znajdziesz je tutaj w

5:42katalogu, ale będą one zabezpieczone taką nazwą UID.

5:45Jeżeli chcesz się jej pozbyć, to po prostu

5:47kup taki UID i wtedy eksportuj sobie te obrazki.

5:51Ja tutaj dodaję ten właściwy.

5:54Jeszcze tylko sprawdzę jakie on ma tutaj wymiary.

5:56W naszym projekcie wzorcowym.

5:59Będzie to 64 na 64 piksele.

6:03A więc 64 tutaj.

6:08Aspect ratio jeden do jednego.

6:11Kolejne elementy tutaj. Co my tu mamy?

6:14Mamy te feature group.

6:15Elementy w środku chcę odsunąć od siebie o 24 piksele.

6:19Czyli nadaję tutaj row gap równe 24 piksele.

6:23I teraz mogę skopiować sobie.

6:26Ten tekst nagłówkiem, wkleić go tutaj.

6:34I tylko zmienić dla niego style, ponieważ

6:36nie będzie to nagłówek trzeciego typu, a więc style.

6:40Zmieniam to na nagłówek czwartego typu.

6:43Kolor zostaje, grubość pozostaje, a rozmiar fontu.

6:47Zaraz zerkniemy.

6:49W tym przypadku będzie to 24 piksele.

6:55Align Space Ink ustawiamy na 1.

6:56Kropkę 4.

7:00I oczywiście zapisujemy sobie taki styl.

7:07H4 24 piksele.

7:17Co jeszcze potrzebujemy. Potrzebujemy tutaj jeszcze tego podpisu.

7:21Czyli klikam sobie ten tekst, kopiuję, wklejam do feature group.

7:28Przychodzę znów tutaj, podpinam ten styl

7:32i zaraz nadamy tutaj odpowiednie właściwości zgodne z projektem wzorcowym.

7:37W tym przypadku będzie to.

7:40Tutaj. 400.

7:42Grubość.

7:44Rozmiar konta to 16 pikseli lines passing pozostaje 1.

7:495. Kolor Neutral 600.

7:53A my tutaj napiszmy ten styl.

7:55Będzie to body MD 16 400.

7:59Czyli body.

8:04MD 16 pikseli i grubość 400.

8:11Teraz pozostaje nam tylko wstawić tutaj odpowiednie wartości dla tekstu.

8:16Pierwsza to będzie property insurance.

8:20Zaznaczam.

8:22Wklejam.

8:24Kolejna.

8:26Kopiuję ten tekst.

8:30I podmieniam go tutaj.

8:33Natomiast odstęp pomiędzy tym nagłówkiem a

8:35tym tekstem jest zbyt duży, więc myślę, że wiesz co zrobić.

8:38Musimy to zgrupować.

8:42Kolumn Container.

8:44Niech to będzie.

8:46Feature.

8:48Tekst.

8:55I tutaj dajemy odstęp rzędu czterech pikseli.

9:00A w zasadzie może ośmiu, jak będzie osiem.

9:04OK, teraz przejdźmy do tej całej grupy Feature Group.

9:07Usuńmy minimalną wysokość.

9:10I odpowiednio oraz jej miejsce ma teraz jeszcze te elementy.

9:13Ten nagłówek jest tutaj odpowiednio wyśrodkować.

9:16Chcę jeszcze wyceny dać ten tekst.

9:20A więc przechodzę tutaj i klikam sobie w centrowanie tekstu.

9:24Jeszcze muszę rozmieścić tą ikonkę na środku.

9:28A więc wybieram Horizon Element.

9:31Jedną grupę mam już gotową.

9:34To co mogę jeszcze zrobić to przejść do Features Container Group i dodać padding.

9:38Od góry i od dołu.

9:40To będzie w tym przypadku 96 i 96.

9:45To co by nam teraz zostało to jeszcze

9:47skopiowanie takiej grupy, wklejenie tutaj 4 razy i poprawa tych wszystkich tekstów.

9:52Natomiast zanim to zrobimy chciałbym poruszyć jeszcze jeden bardzo ważny temat.

9:56Wiesz już jak korzystać ze zmiennych kolorystycznych?

9:58Wiesz jak korzystać ze stylów dla tekstu?

10:01Aby właśnie

10:02takie same właściwości przekazywać w prosty sposób do różnych elementów na

10:06stronie i mieć to wszystko zsynchronizowane w jednym miejscu.

10:09Natomiast co zrobić, jeżeli chcemy np.

10:12synchronizować z jednego miejsca z naszego

10:14zaplecza, czyli z back endu naszej aplikacji?

10:17Cały ten element, czyli obrazek tutaj, ten

10:21tekst i ten opis w ten sposób, tak żebyśmy mogli sobie np.

10:25właśnie taką grupę Filters wstawić na, powiedzmy 50 stronach.

10:29Jeżeli przyjdzie nam do zmiany np.

10:31tutaj tych nagłówków, to nie będziemy musieli przechodzić

10:34ręcznie we wszystkie miejsca, tylko przejdziemy do zaplecza.

10:37Poprawimy ten tekst na back end, a ta zmiana zostanie przekazana właśnie

10:41wszędzie tam, gdzie taki element wykorzystywaliśmy.

10:44Jak więc podejść do takiego zagadnienia w Babel?

10:46Otóż znów jest to niesamowicie proste,

10:49ponieważ możemy wykorzystać coś, co się nazywa opcją set set w Babel.

10:53To najprościej rzecz mówiąc, taka uproszczona baza danych.

10:57Dlaczego uproszczona?

10:58Ponieważ Option sety możemy zdefiniować tylko i wyłącznie ręcznie.

11:02To po pierwsze.

11:04Po drugie, użytkownik przez jakiekolwiek

11:06działania w aplikacji nie będzie mógł go dodać, edytować lub go usunąć,

11:11a jedyne co będziemy mogli zrobić sobie w aplikacji to pobrać takie wartości z setu,

11:16czyli zaklętą naszej aplikacji i je wyświetlić na stronie.

11:20Sety definiuje się niesamowicie prosto.

11:22Przechodzimy do zakładki Data.

11:26Kolejna Option set.

11:29Możesz sobie tutaj obejrzeć ten tutorial

11:31Babel o tym czym są sety, jak się je tworzy jak klikne tutaj skip tutorial.

11:37I dodajmy pierwszy set.

11:38Nazwijmy go Chaos Features.

11:43Klikamy Create.

11:45Już pierwszy obszar został dodany, a my możemy dodawać nowe opcje.

11:49Czyli po prostu tak, jakbyśmy dodawali nowe rzędy w tabeli.

11:53Najłatwiej jest to pokazać na przykładzie Table.

11:56Przejdźmy tutaj do tabeli wzorcowej.

11:58Tutaj właśnie wstawiłem Ci tabelkę Officer, czyli odpowiednik naszego 800.

12:04To jest ta tabelka, To jest po prostu cały

12:06set, a poszczególne rekordy właśnie będziemy teraz dodawać.

12:10Jak widzisz mamy tutaj trzy kolumny, o których tu mamy tekst.

12:14Tu mamy tekst, a tu mamy obrazek, więc musimy sobie to odwzorować teraz w Babel.

12:20Przechodzę więc do edytora.

12:22Pierwszą kolumnę z pierwszym tekstem mamy

12:24automatycznie wbudowaną i nosi ona nazwę Display.

12:27Czyli to co wpisze tutaj, to właśnie wskoczy mi do tej kolumny display.

12:32W naszym przypadku będzie to.

12:36Property Insurance.

12:40Klikam Create i klikam Create.

12:44Dodajmy następne.

12:46Best Price.

12:51Następny to Love z Commission.

12:58I ostatni to Overall Control.

13:05Natomiast to co teraz dodaliśmy

13:07to jeżeli przejdziemy do ery table to jest właśnie tylko ta pierwsza kolumna.

13:11Jak więc dodać te kolejne kolumny w Babel?

13:14Znów wracamy do edytora i tym razem musimy klikać tutaj Create a new atrybut.

13:20To co potrzebujemy to jeszcze description.

13:25Tutaj nadajemy nazwę robotowi, czyli po prostu kolumnie.

13:29A tutaj wybieramy jaki typ danych chcemy tam przechowywać.

13:32Babel daje nam tutaj cały szereg różnych typów danych.

13:37Natomiast nas na chwilę obecną interesuje

13:38tylko tekst, ponieważ wpisujemy tam właśnie opis, czyli te nasze description.

13:43Klikam Create.

13:45I dodałem już tutaj widzisz kolejną kolumnę?

13:48Muszę kliknąć jeszcze raz.

13:49Tym razem kolumna ta nazywa się Icon.

13:53Jako typ wybierzemy obrazek, czyli po prostu image.

13:57Teraz, aby właśnie edytować taki rekord muszę kliknąć Modify atrybut.

14:03Otworzył mi się ten pierwszy record, czyli property Insurance.

14:07Tutaj wgrywamy sobie obrazek, czyli nasz feature 1.

14:13A kolejne przechodzimy tutaj i kopiujemy sobie tę treść.

14:22Pierwszy rekord mamy już gotowy.

14:24To samo robimy dla pozostałych, czyli Modify.

14:27Apple ładujemy obrazek.

14:33Kopiujemy tekst.

14:39I to samo dla kolejnego.

14:49Trzeci opis musimy sobie skopiować i wkleić.

14:54I został nam ostatni.

15:01I jeszcze opis.

15:08Już nasz Option set jest zdefiniowany.

15:11Natomiast w jaki sposób?

15:12Teraz te wartości z backendu, czyli z

15:14zaplecza naszej aplikacji przekazać na frontend, czyli tutaj do zakładki Design.

15:19Jest to niesamowicie proste.

15:20Wystarczy, że namierza główną grupę zawierającą wszystkie te elementy,

15:24czyli w naszym przypadku Feature group i wskaże jej jaki typ contentu, czyli jaki

15:29typ danych z naszego zaplecza chcemy wyświetlać.

15:32Robimy to w tym miejscu.

15:34W naszym przypadku jest to OS.

15:36Features i teraz musza wybrać Data Source czyli jaki element tutaj chcę przekazać.

15:41Jak widzisz pojawiają się tutaj te

15:42wszystkie nasze zdefiniowane rekordy na off features.

15:47Wybierzmy więc Property Insurance.

15:51I.

15:52I nic się nie zmieniło. Dlaczego?

15:54Dlatego, że teraz musimy wskazać,

15:56że te elementy obrazek, tekst i ten tekst mają być zaciągane z elementu rodzica.

16:02A więc przechodzę tutaj

16:03i zamiast tego statycznego obrazka, który tutaj mieliśmy, mogę to zaznaczyć, usunąć.

16:10Kliknąć tutaj jeszcze raz i wybrać ten

16:12niebieski tutaj Boxing Insert Dynamic Content.

16:17I teraz chcę się odwołać do elementu rodzica, czyli Parent group of features.

16:21I co tu chcemy wyświetlić?

16:22Oczywiście nasz obrazek, czyli Icon.

16:26To samo robimy teraz tutaj.

16:28Tylko zanim to robimy, zobacz co się stanie.

16:31Przejdę.

16:32Usunęło to wartość.

16:34Biorę Insert Dynamic i mam Parent Group Swing zamiast Parent Group Features.

16:39Dlaczego?

16:41Myślę, że się domyślasz, a jeżeli nie, to zaraz Ci pokażę o co chodzi.

16:45Otóż ten tekst.

16:47Cofnijmy sobie tą zmianę klikając tutaj.

16:49Ten tekst i ten tekst jest umieszczony w dodatkowej grupie.

16:53A więc jeżeli przekazujemy tutaj jakieś dynamiczne dane, to musimy przekazać to

16:57właśnie w takim łańcuszku, nazwijmy to tutaj.

17:01A więc tak ustaliliśmy off feature tutaj dla tej grupy Feature Group.

17:06I teraz musimy to przekazywać dalej do

17:08każdej grupy w środku, która jest zagnieżdżone.

17:10A teraz Feature Text group.

17:12Znów.

17:14Typ danych to a s features, ale tym razem będzie to.

17:18Parent. Group of Features.

17:20I ty byś miał tu jeszcze zagnieżdżone

17:22kolejną grupę, to ten schemat byłby taki sam.

17:25Typ danych będzie zawsze taki jaki jest ustalony dla tego nadrzędnego elementu,

17:30a potem przekazujemy właśnie Parent group feature.

17:33Teraz dopiero mogę wybrać ten tekst.

17:36Zaznaczyć, wybrać Insert Dynamic i wybrać Parent Group of Feature.

17:42Tym razem będzie to Display.

17:46A tu jak się domyślasz wstawimy description.

17:55I przejdźmy teraz do podglądu naszej strony.

17:57Odświeżamy.

18:01Jak widzisz wszystko zostało odpowiednio zaciągnięte z naszej bazy.

18:05Mamy odpowiednią ikonkę, nagłówek oraz tekst, a więc skopiuję je sobie teraz.

18:11Tą grupę 4 razy, ponieważ mieliśmy tam 4 kolumny jak pamiętasz.

18:15Tutaj w tym elemencie wzorcowym.

18:18A więc Command da command D command D

18:21To co chcę zrobić jeszcze to oczywiście pozmieniać te nazwy.

18:27Niech to będzie teraz powiedzmy feature.

18:30Jeden grób.

18:33Tutaj feature 2 grup i analogicznie dla pozostałych grup.

18:52Zaznaczmy jeszcze raz całe feature container i nadajemy tutaj odstęp

18:58dla tych grup równe 64 piksele, czyli kolumny ustawione na 64.

19:04Przejdźmy do podglądu.

19:06Odświeżamy.

19:08No i układ nam się zgadza, ale treści nam się nie zgadzają.

19:12Dlaczego?

19:13Otóż dlatego, że teraz do każdej tej grupy

19:15przekazujemy dokładnie ten sam rekord z naszego setu.

19:19Jak to zmienić?

19:20Wracamy do edytora.

19:21Zaznaczamy drugą grupę, czyli Feature Group i mówimy, że data Source to jest nie

19:28property insurance, tylko ten kolejny record bez price.

19:33I to samo robimy tutaj.

19:36Zmieniamy to na Loves Commission.

19:41I tutaj Overall control.

19:44Przechodzimy do podglądu, odświeżamy.

19:48Jak widzisz wszystko nam się teraz odpowiednio dopasowała.

19:50Teraz taki element mogę zastosować na dowolnym miejscu w naszym serwisie.

19:56Mogę sobie dodać 100 takich grup feature na 100 różnych stronach.

20:00I gdybym teraz stwierdził, że chcę zmienić ten nagłówek Overall Control

20:03na powiedzmy Super Ctrl, to przechodzę tylko do Option setu.

20:08Tutaj zmieniam to na Super Control.

20:11Jak zobaczysz nic nie musimy więcej robić, tylko odświeżyć stronę.

20:15I Babel przekaże automatycznie

20:17taką zmianę wszędzie tam, gdzie korzystamy z takiego elementu.

20:22Co jeszcze musisz zapamiętać, jeżeli chodzi o tą jedną bardzo ważną rzecz

20:27Korzystamy z nich tak jak widzisz tutaj do przekazywania takich statycznych danych,

20:32czyli takich, które nie będą tworzone przez użytkownika w naszym serwisie.

20:36Dodatkowo musisz pamiętać, że każdy ten obszar jest ładowany na każdej stronie w

20:41bólu, nieważne czy na niej z niego korzystasz, czy też nie.

20:44On i tak będzie załadowany.

20:46Dzięki temu te dane ładują się bardzo

20:48szybko, ponieważ są pobierane już w momencie ładowania się całej strony.

20:52Więc nie wysyłamy takiego dodatkowego zapytania do bazy danych.

20:55Natomiast właśnie ta ich zaleta, że są

20:57ładowane do każdej strony jest też ich największą wadą.

21:00Ponieważ jeżeli zbudujesz bardzo rozbudowany set, który będzie zawierał

21:03bardzo dużą ilość treści, bardzo dużo obrazków, to spowolni sobie ładowanie

21:07każdej strony, ponieważ wystarczy, że wykorzystasz go tylko na jednej, a Babel i

21:11tak załaduje go na wszystkich stronach Twojego serwisu, przez co szybkość

21:15ładowania się stron Twojego serwisu może ulec pogorszeniu.

21:20A więc chciałbym, żebyś zapamiętał te podstawowe reguły.

21:23Wiesz już jak tworzyć takie sety, Jak przekazywać właśnie te dane tutaj do grup,

21:28potem do zagnieżdżonych grup jakie wyświetlać na stronie.

21:31Ja dziękuję Ci za uwagę i widzimy się już za moment.