Bubble: Pluginy w Bubble

0:00Witam Cię w kolejnej lekcji, której dodamy nasz pierwszy plugin do edytora Bubble.

0:04Zanim jednak to zrobimy,

0:06chciałbym rozwiązać tutaj jeszcze kilka pewnych kwestii.

0:09Mianowicie, jak widzisz tutaj ten nagłówek ma jakąś określoną wysokość.

0:13Dzieje się tak dlatego, ponieważ nie po usuwaliśmy tych wartości minimal hight.

0:18Zróbmy więc to może tutaj dla wszystkich tych elementów.

0:20Wróćmy jeszcze raz do sekcji top i sprawdźmy każdy ten element po kolei.

0:25Zacznijmy od tego nagłówka.

0:28Wyzerujmy tą wartość.

0:30Tak samo tutaj dla tekstu.

0:33Zerknijmy jeszcze na ustawienia

0:35tego kontenera, więc grupa top też powinna mieć wzorowaną minimalną wysokość.

0:41Chcemy aby dostosowywała się tutaj do elementów w środku.

0:46Grupa wrapper jest w porządku.

0:49Przejdźmy więc tutaj do sekcji about.

0:51Zacznijmy tutaj od całego tego kontenera tej grupy about.

0:55Tutaj znów zerujemy tą minimalną wysokość.

0:59Przerzućmy się tutaj teraz na ten element, czyli grupę top.

1:04Tutaj wszystko jest w porządku, natomiast nagłówki też mają,

1:08jak widzisz tutaj

1:10minimalną wysokość, musimy ją wyzerować.

1:12To samo zrobić tutaj dla tego tekstu.

1:15Teraz przejdźmy tutaj do grupy, nazwijmy ją może po prostu grupa col-1.

1:25I ustalamy jej tutaj minimalną wysokość na 0.

1:29Przechodzimy do tego tekstu.

1:33Zerujemy, przychodzimy tutaj i zerujemy.

1:37Teraz przechodzimy do drugiej kolumny.

1:40Nadajemy jej nazwę col-2.

1:46Znów zerujemy minimalną wysokość.

1:49To samo robimy dla tekstów.

1:52Niestety jest to taka dosyć uciążliwa operacja.

1:57Ale żeby nasz layout był spójny i dobrze wyglądał, to powinniśmy o to zawsze zadbać.

2:02Tutaj nazwa col-3.

2:08Zerujemy wysokość i zajmujemy się tekstami.

2:15Teraz już wszystko jest ok.

2:17Grupa 3 kolumna nie ma tutaj minimalnej wysokości.

2:20Jedyne co musimy zrobić

2:21to dodać jej tutaj jeszcze margines na dole równe 30 pixeli.

2:25Dlaczego akurat tyle?

2:26Ponieważ każda ta kolumna jak pamiętasz, a tutaj margines na dole równy 50,

2:31plus te 30 ustawione dla całego mojego tego kontenera 3 kolumn 30 daje nam

2:36łącznie 80 pixeli tutaj od dołu, czyli dokładnie tyle, ile mamy tutaj na górze.

2:42Dzięki takiemu rozwiązaniu nasz layout zachowa spójność i będzie estetycznie wyglądał.

2:47Dodatkowo, jeżeli jesteśmy tutaj jeszcze w

2:49sekcji about, chciałbym Ci wyjaśnić dlaczego w tym przypadku dla tej całej

2:53grupy 3-col nie dodawaliśmy minimalnej szerokości.

2:58Dzieje się tak dlatego,

2:59że w tym przypadku chcemy, aby te właśnie poszczególne kolumny

3:04wraz ze zmianą rozdzielczości porzeskakiwały jedna pod drugą.

3:08A dodatkowo kiedy dojdziemy do tej

3:09minimalnej wartości, czyli do 320, aby ta kolumna właśnie dojechała do tej

3:15granicznej wartości, 320 pixeli, nie zjeżdżała już poniżej jej.

3:19Natomiast jeżeli

3:22te kolumny będą przeskakiwały jedna pod drugą.

3:24To cały ten rodzic będzie dostosowywał swoją szerokość do zawartości w środku.

3:28A więc w tym przypadku zjedzie do

3:31minimalnej wartości jaką mamy ustawioną tutaj na tej

3:34pojedynczej kolumny, czyli właśnie dla 320 pixeli.

3:38Mam nadzieję, że jest to jasne.

3:39Dodatkowo mogę Ci to zobrazować.

3:41Jeżeli przejdziemy tutaj do zakładki

3:42responsive to jak widzisz w tym przypadku w tej najmniejszej rozdzielczości

3:47mamy tą naszą jedną pojedynczą kolumnę tutaj ustawioną na 320 pixeli, czyli

3:52dokładnie na tą minimalną wartość do jakiej chcemy tutaj dojechać.

3:56A rodzic dostosowuje się tutaj swoją szerokością

3:59do tej zawartości w środku, czyli też nie zjedzie teraz poniżej 320 pixeli.

4:05Wróćmy więc do samego buildera i przystąpimy do dalszej pracy.

4:10Naszym zadaniem będzie doinstalowanie

4:12pierwszego plugin'u do aplikacji Bubble po to, aby właśnie te ikonki, które mamy

4:17tutaj zamienić na takie, jakie mamy tutaj w rzeczywistym projekcie.

4:22Dlaczego w ogóle korzystamy z tego tutaj elementu icon?

4:26Dzieje się tak z jednego bardzo prostego powodu.

4:28Otóż te ikonki oparte są o zestaw ikon font awesome.

4:32Jest to niesamowicie popularny zestaw ikon, a ponieważ jest bardzo

4:35popularny, to jest wykorzystywany niemal wszędzie.

4:38Dlatego też te ikony po prostu przejadły się już ludziom.

4:41A ja uważam, że dobrze dobrany zestaw ikon fantastycznie wpływa na Twój projekt i

4:46może sprawić, że przyciągnie uwagę użytkowników.

4:50Dlatego też, pozbędziemy się tych ikonek, możemy je pousuwać.

4:55Zaznaczam wszystkie i usuwam.

4:58I teraz przechodzimy do zakładki plugin.

5:00Aby zainstalować pierwszy plugin z jakiego będziemy korzystać.

5:04Aby to zrobić klikam tutaj przycisk add plugins.

5:11I muszę chwilę poczekać aż mi się to wszystko w Bubble załaduje.

5:15Jak widzisz zestaw pluginów został już tutaj

5:19wyświetlony, a my możemy poszukać tego, który jest nam potrzebny.

5:22Zanim jednak to zrobimy, chciałbym Ci

5:24powiedzieć, w jaki sposób korzysta się z plugin'ów w samym Bubble.

5:28Otóż część z nich jest przygotowana przez sam team Bubble'a.

5:31Jak widzisz to tutaj, by Bubble.

5:34Dodatkowo pozostałe przygotowane są często

5:36właśnie przez jakiś twórców zewnętrznych, duże firmy, bądź pojedynczych użytkowników.

5:41A ich cena bywa różna.

5:42Te przygotowane przez same Bubble najczęściej są darmowe.

5:45Jak widzisz, nie mamy tutaj żadnego oznaczenia.

5:47Natomiast tutaj jest informacja free.

5:49Jeśli wyszukałbym np.

5:50plugin'u kalendarza, czyli zaczął tutaj wpisywać jakąś nazwę.

5:56To zostaną dla nas zwrócone oczywiście

5:58odpowiednie plugin'y kalendarze, ponieważ takich plugin'ów tutaj szukałem.

6:03Jak wiesz te są darmowe.

6:04Natomiast jeżeli zjedziemy niżej to

6:06okazuje się, że tutaj mamy już z kolei pluginy płatne. W Bubble

6:09za plugin'y można płacić na dwa różne sposoby.

6:13Możemy dokonać jednorazowej płatności za plugin np.

6:16w kwocie 94 albo 100 dolarów.

6:18Opcjonalnie możemy wykorzystać opcję

6:20subskrypcji miesięcznej i opłacać tutaj tą kwotę np.

6:2310 dolarów na miesiąc.

6:25Natomiast ten guzik subscribe jest na

6:27chwilę obecną wyszażony, a to dlatego, że korzystamy z planu darmowego.

6:31Jeżeli przeszlibyśmy na płatny to wówczas

6:34będziemy mogli właśnie wykorzystać tą opcję subscribe.

6:37I oprócz abonamentu za sam plan

6:40korzystania z edytora Bubble dodatkowo doliczana będzie jeszcze ta kwota

6:44tutaj za plugin.

6:45Dlaczego warto korzystać z tej opcji subskrypcji?

6:48Otóż na początku jeżeli będziesz tworzył

6:50aplikację, to bardzo często będziesz wykorzystywał w nich

6:53kilka lub nawet kilkanaście różnych plugin'ów, często również płatnych.

6:58Stąd też wydawanie na każdy z nich np.

7:00osobno 90 czy tam 100 dolarów może się okazać taką kwotą nie do przejścia.

7:05Dużo łatwiej dla naszego portfela będzie znieść po

7:08prostu takie opłacanie subskrypcji miesięcznej.

7:11Jeżeli Twoja aplikacja odniesie sukces i przyciągnie odpowiednią ilość

7:15użytkowników i zacznie na siebie zarabiać, to wtedy oczywiście warto przejść właśnie

7:18na taką jednorazową płatność, dokonać tej opłaty i korzystać potem z tego plugin'u.

7:24Skoro to mamy już jasne, wyszukajmy tego plugin'u, który nam będzie potrzebny.

7:32Wpiszmy tutaj odpowiednią nazwę.

7:35W naszym przypadku będzie to iconify.

7:39Musimy poczekać aż nam się tutaj to wszystko załaduje.

7:43Plugin został znaleziony, a my możemy kliknąć ten guzik Install i go zainstalować.

7:51Plugin został dodany, możemy zamknąć to okno.

7:54Jak widzisz, pojawił on się tutaj na liście zainstalowanych plugin'ów.

7:57Możemy go więc teraz wykorzystać w naszym projekcie.

8:00Do czego służy ten plugin?

8:01Otóż zapewnia nam on dostęp do ogromnej biblioteki różnych ikonek.

8:06I dodatkowo taki ikonki będziemy mogli dodawać w bardzo prosty sposób do naszego

8:09projektu, wykorzystując właśnie tutaj tą stronę

8:12Iconify.design.

8:14Przejdźmy sobie teraz do niej.

8:24To co musimy zrobić tutaj to kliknąć w browse icos i mamy dostęp,

8:29jak widzisz tutaj do różnych pack'ów ikon, z których możemy

8:32bezpłatnie korzystać w ramach właśnie naszego projektu.

8:36Wykorzystując ten plugin iconify.

8:39A my będziemy wykorzystywać tutaj ten zestaw, czyli phosphor.

8:44Klikam tutaj.

8:45Jak widzisz mam zestaw 125 stron z różnymi ikonkami.

8:49Aby teraz wykorzystać taki plugin bezpośrednio w naszej aplikacji.

8:53Musimy wrócić do edytora.

8:55Przejdźmy tutaj.

8:58I odajmy taką pierwszą ikonkę z wykorzystaniem plugin'u iconify.

9:01Jest on dostępny tutaj na liście.

9:03Wystarczy, że go klinknę i dodam w to miejsce to, co musimy teraz zrobić.

9:11To przede wszystkim tutaj ustalić kolor.

9:14Wybieramy kolor biały,

9:16a następnie chcemy odpowiednio rozmieścić taką ikonkę, czyli ją tutaj centrujemy.

9:23Nadajemy jej rozmiar 36 pixeli na 36 pixeli.

9:30To teraz pozostaje nam jeszcze wskazanie, jaka ikonka ma się tutaj pojawić.

9:36Aby to zrobić wracamy na stronę iconify.

9:40I w tym przypadku ja wykorzystam ikonkę o nazwie

9:45heart beat wybierzmy np.

9:47tą.

9:49I tutaj mamy

9:51jej nazwę, jak widzisz ph:heartbeat-thin.

9:55Wystarczy, że skopiujemy tą wartość, klikam kopiuj.

9:59Wracamy do edytora i w miejsca name wstawiamy

10:04tą skopiowaną wartość.

10:05Coś nam się tutaj nie skopiowało, o już teraz skleiło się poprawnie.

10:09Taka ikona została dodana do naszego projektu.

10:12Jeżeli teraz podejrzymy go sobie w przeglądarce.

10:20To jak widzisz odpowiednia ikonka została tutaj wstawiona.

10:24W ten właśnie sposób wykorzystujemy ikony z pakietu iconify w naszym projekcie.

10:30Możemy teraz to skopiować, wkleić w to miejsce.

10:34Oczywiście tutaj musimy zmienić kolor.

10:37Jak pamiętasz był to kolor 3F8CFF,

10:45czyli ten kolor niebieski, czcionka miała, rozmiar 64 na 64 pixele.

10:52I pozostaje nam jeszcze tylko

10:54tutaj namierzyć odpowiednią ikonę w tym pakiecie ikon.

10:58Wracamy więc do strony

11:00z ikonami i wyszukujemy odpowiednie ikony.

11:04Będzie to ta ikona.

11:08Zaznaczam, znów kopiuję tą wartość.

11:13Wracam do edytora i podmieniam w tym miejscu.

11:17Ikona została wstawiona.

11:19Mogę ją teraz tutaj zaznaczyć, skopiować i poustawiać tu i tu.

11:25I oczywiście tylko namierzyć odpowiednią ikonę.

11:29W tym przypadku będzie to ikona o nazwie clipboard.

11:38Wykorzystamy tą ikonę.

11:41Zaznaczamy, kopiujemy, wracamy do edytora i podmieniamy nazwę.

11:46Pozostaje nam jeszcze ta ikona.

11:50Tu z kolei wykorzystamy

11:53ikonę usera +, czyli tą

11:59zaznaczam kopiuję, wracam do edytora, wklejam tą wartość

12:05i już teraz wszystkie ikonki będą zgodne z naszym projektem jeżeli go podajrzymy.

12:13To jak widzisz wszystko jest jak trzeba.

12:15Zgadza się tutaj z naszym projektem wzorcowym.

12:19Mam więc nadzieję, że dostrzegasz już jak

12:21ogromny potencjał tkwi w wykorzystywaniu plugin'ów wewnątrz naszej aplikacji.

12:25Plugin Iconify

12:27jest dosyć prostym plugin'em, bardzo przyjemnie się z niego korzysta,

12:30dlatego też ja bardzo często wykorzystuję go w swoich aplikacjach, ponieważ daje mi

12:34dostęp do ogromnej biblioteki różnych ikon.

12:37To by było na tyle w tej lekcji.

12:39Widzimy się już za chwilę.