Bubble: Przyciski, linki i zakładka Conditional
od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Podstawy pracy z edytorem
- Wprowadzenie do workflows
- Praca z nowym silnikiem responsywnym
- Praktyczne wykorzystanie pluginów
- Statyczna strona główna
- Funkcjonalna strona logowania i rejestracji
Praca w stylu no-code
Zapomnij o ręcznym pisaniu kodu i żmudnym tworzeniu stron www lub aplikacji! Wykorzystując przejrzysty edytor Bubble będziemy w stanie rozpocząć naszą pracę od czystej kartki i wyklikać cały układ bezpośrednio w interfejsie. Dodatkowo pokażę Ci w jaki sposób można wdrożyć do projektu w pełni funkcjonalną logikę obsługi użytkowników nawet wtedy, gdy nie posiadasz żadnej wiedzy programistycznej. A to wszystko w niemal ekspresowym tempie i bez zbędnych konfiguracji, które bywają zmorą programistów.
Dlaczego warto korzystać z Bubble?
Edytor zapewnia spójny i intuicyjny interfejs, dzięki któremu stworzenie nawet skomplikowanej aplikacji staje się wyjątkowo proste. Dodatkowo wbudowana baza danych sprawia, że nie musimy korzystać z żadnych zewnętrznych rozwiązań a zarządzanie nią jest na tyle intuicyjne, że poradzi sobie z tym nawet niedoświadczony użytkownik. Kolejną zaletą jest dostęp do ogromnej biblioteki pluginów, dzięki którym będziemy mogli wzbogacić naszą aplikację o obsługę płatności, analitykę, SEO i wiele więcej.
Co można zbudować w Bubble?
Niemal wszystko, z wykorzystaniem Bubble bezproblemowo stworzymy klony takich serwisów jak: Twitter, Asana, Todoist, AirBnB, Trip Advisor lub Yelp. Edytor pozwala stworzyć w pełni funkcjonalną aplikację w ciągu nawet kilku dni! Dzięki temu nie będziemy musieli przepalać naszego budżetu na zewnętrzne software house, którym wdrożenie podobnych rozwiązań może zająć tygodnie pracy.
Czego dowiesz się z kursu?
W tym kursie skupimy się na podstawach pracy z edytorem, tak aby korzystanie z niego stało się dla Ciebie naturalne. Wykorzystamy w praktyce zakładkę Design, która jest odpowiedzialna za front-end naszej strony oraz zapoznamy się z działaniem workflows, które "tchną życie" w nasz projekt. Efektem naszej pracy będzie nowoczesny landing page oraz w pełni funkcjonalna strona logowania/rejestracji. Dodatkowo zadbamy również o to, by całość była w pełni responsywna i dobrze prezentowała się zarówno na ekranach desktopowych, jak i urządzeniach mobilnych.
Wykraczamy poza edytor
Jedną z zalet edytora Bubble jest to, że nie stanowi on hermetycznego środowiska, w którym jesteśmy skazani na korzystanie jedynie z rozwiązań zaprojektowanych przez jego twórców. To niesamowicie funkcjonalna platforma, którą w prosty sposób możemy połączyć również z zewnętrznymi usługami wykorzystując gotowe pluginy. Pokażę Ci w jaki sposób możemy zaimplementować do naszego projektu opcję logowania i rejestracji z wykorzystaniem Google, tak, aby użytkownik mógł utworzyć konto w naszym serwisie za pomocą jednego kliknięcia. A kolejnym bonusem będzie przesyłanie adresów e-mail z formularza zapisu na newsletter bezpośrednio do bazy w Airtable!
Dla kogo jest ten kurs?
Ten kurs powstał z myślą o osobach, które chcą poznać edytor Bubble i nowy kierunek rozwoju aplikacji no-code. Będzie również doskonałym punktem startowym dla tych wszystkich, którzy nie posiadają żadnej wiedzy programistycznej ale nadal chcą tworzyć w pełni funkcjonalne serwisy i strony internetowe. Poziom kursu został dopasowany zarówno do osób, które do tej pory nie korzystały z Bubble, jak i tych, którzy posiadają już przynajmniej podstawowe doświadczenie w tym zakresie. Dzięki zdobytej w nim wiedzy będziesz mógł postawić pierwszy krok na drodze, która pozwoli Ci przekuć Twój pomysł w działający startup.
Kontynuujemy naszą pracę z header'em i
zgodnie z projektem pozostało nam tutaj jeszcze dodanie tych dwóch przycisków.
Wróćmy więc do edytora i sprawdźmy jak możemy to zrobić.
Otóż w pierwszej kolejności możemy
wykorzystać gotowy komponent o nazwie button.
Dodajmy go sobie tutaj do grupy wrapper.
Odsuńmy od góry.
Żeby lepiej nam się z nim pracowało
i porozmawiajmy teraz o jego właściwościach.
Jak widzisz, nie ma tutaj nic, z czym nie spotkali byśmy się do tej pory.
Możemy mu tutaj dodać tooltip,
Możemy wybrać jakiś gotowy, predefiniowany styl.
Bądź taki styl usunąć i tutaj poustawiać sobie własne wartości.
Natomiast chciałbym zwrócić Twoją uwagę na jeden bardzo ważny fakt,
który sprawia, że ja takich gotowych button'ów nie używam zbyt często.
Otóż jeżeli przejdziemy do zakładki layout to jak widzisz na chwilę obecną nasz button
ma tutaj określoną stałą szerokość, możemy mu to wyłączyć i wtedy jak się
domyślasz rozciągnie się na całą dostępną szerokość konteneru rodzica.
Dodatkowo moglibyśmy tutaj jeszcze zaznaczyć opcję fit width to content
no i wtedy oczywiście zostanie to dostosowane do contentu.
Natomiast zobacz co się stanie, jeżeli usunę tutaj minimalną szerokość.
Jak się domyślasz, button skurczył się do
samego tekstu, który znajduje się w środku.
I niestety w przypadku button'ów nie możemy
dodać żadnego puddingu czy takiego odstępu
tutaj z lewej, np.
z prawej strony.
Musielibyśmy tutaj za każdym razem ustalać minimalną szerokość.
A ponieważ jak wiesz teksty w button'ach mogą być różne,
to za każdym razem musielibyśmy tutaj to odpowiednio definiować.
Dlatego też ja znalazłem dużo fajniejsze rozwiązanie na tworzenie takich własnych,
bardzo dynamicznych i bardzo responsywnych button'ów.
Pozbądźmy się tego button'u i zróbmy to od podstaw.
Przede wszystkim dodajmy sobie tutaj tekst,
znów odsuńmy go tutaj od góry o 100 pixeli.
Dodajmy mu tutaj odpowiednie ustawienia.
Przede wszystkim minimalną wysokość
ustawiamy na 0, tak aby dostosował się tutaj do tego tekstu.
W środku to pole tekstowe dostawało się do tekstu w środku.
Możemy też oczywiście usunąć tą wartość
i dostosować tutaj również szerokość do zawartości contentu.
Teraz oczywiście mamy tutaj tylko takie
pole tekstowe zawierające wyłącznie ten tekst, odpowiednio do niego dostosowane.
Więc to co możemy zrobić, to wykorzystać
tutaj opcja ustawienia padding'ów, którą już znasz.
Tekst jest jedynym elementem w Bubble, który pozwala nam dodać padding.
Aby to zrobić, musimy usunąć style i tutaj odpowiednio ustawić padding, co
robiliśmy zresztą już tutaj dla tego tekstu.
Dodajmy więc padding 10 pixeli od góry i od dołu.
I powiedzmy 20 pixeli od lewej od prawej
strony, dzięki czemu teraz ten button tutaj zyskał taki oddech,
a my, gdy będziemy zmieniać tekst, będzie się odpowiednio
dostosowywało, żeby to było lepiej widoczne.
Dodajmy mu może jeszcze
tutaj jakiś background, ustalmy kolor na nasz główny kolor.
Odpowiednio tutaj jeszcze dostosujmy fonty.
W moim przypadku będzie to
nunito suns nie 600
tylko
700.
Tutaj rozmiar fonta to 16 pixeli.
Line spacing ustawiam na 1, a tutaj nadajmy mu może kolor biały.
Jak widzisz uzyskaliśmy teraz taki fajnie wyglądający button.
Dodatkowo jeżeli będę tak jak mówiłem wcześniej zmieniał tutaj tekst.
To jak widzisz to się odpowiednio dostosowuje.
A te padding'i tutaj z każdej strony zostały odpowiednio zastosowane.
Sprawdźmy więc jak wygląda ten button w naszym wzorcowym projekcie.
Mamy tutaj Sign Up, a więc zmieńmy ten tekst.
Dodatkowo dodajmy jeszcze tutaj
zaokrąglone rogi w moim przypadku jest to 8 pixeli.
I uzyskaliśmy już niemal taki button, jakie mamy w projekcie.
Pozostaje nam dodania tylko dla niego
jeszcze tutaj cienia, aby uzyskać właśnie taki taki efekt
tutaj shadow, jaki widzisz.
Aby to zrobić przechodzimy tutaj do ustawień, które już znasz.
Wybieramy tutaj opcję outset i w moim przypadku to jest cień
który jest
przesunięty o 0 pixeli, czyli w ogóle nie przesuwamy go tutaj w osi X na osi X
dodajemy tutaj 8 pixeli, blur ustawiamy na 16 pixeli.
Spread'u nie ruszamy, a tutaj stosujemy kolor 8F95B2,
a dodatkowo przezroczystość ustawimy tutaj na 15
pixeli, dzięki czemu uzyskaliśmy tutaj taki efekt cienia.
Może jest to tutaj nie za bardzo widoczne, ale zaraz w podglądzie to zobaczysz.
Przejdźmy więc może tutaj do podglądu.
Jak widzisz mam już tutaj button.
I z takim delikatnym cieniem dodanym pod spodem.
Skoro nasz button jest gotowy, to dodajmy go tutaj do tej grupy z przyciskami.
Na chwilę obecną te wszystkie tutaj
przyciski, czyli po prostu teksty naszej nawigacji umieszczone są wewnątrz grupy
jak pamiętasz. Zgrupowaliśmy je wcześniej.
Natomiast ta grupa dostosowuje się
swoją szerokością do elementu wewnątrz, więc ciężko nam będzie ją zaznaczyć.
Możemy to zrobić na dwa sposoby.
Pierwszy to oczywiście wykorzystanie element string.
Jak widzisz, mamy tutaj te nasze teksty umieszczone w grupie D.
I teraz zaznaczyliśmy całą grupe.
Opcjonalnie moglibyśmy zaznaczyć jeden
taki tekst i wybrać tutaj opcję select first parent.
I w ten sposób przejdziemy do pierwszego
rodzica, czyli znów w tym przypadku do grupy D.
Zaznaczmy ten przycisk, wybierzmy sobie
tutaj cut, czyli wycinamy go, zaznaczam tą grupę
i klikając prawym przyciskiem myszy wybieram tutaj opcję paste.
Oczywiście musimy mu tutaj usunąć ten margines od góry.
Jest on nam w tym przypadku niepotrzebny.
Teraz nasz przycisk został dodany, ale
niekoniecznie w takim miejscu, jakim my go potrzebowaliśmy.
Zgodnie z projektem nasze przyciski
umieszczone są tutaj na samej prawej krawędzi.
Aby więc przesunąć taki przycisk tutaj wewnątrz, możemy wykorzystać tę opcję.
Za pomocą make first przesuniemy go tutaj na lewą krawędź.
Będzie on pierwszym elementem, jaki znajduje się tutaj w tej grupie.
Analogicznie działa make last.
W ten sposób oczywiście przesuniemy go tutaj na koniec.
Możemy go również cofać.
Jak widzisz,
za pomocą tych opcji previous i next odpowiednio przesuwać
i zarządzać tutaj rozmieszczeniem kolejnością tych elementów w środku.
Pozostaje nam jeszcze teraz utworzyć
tak wyglądający przycisk, a więc wykorzystajmy do tego ten gotowy.
Zaznaczam go za pomocą control C control V, kopiuję i wklejam.
Teraz odsuńmy sobie ten ostatni przycisk tutaj o 40 pixeli od tamtego,
a ten z kolei będzie odsunięty zgodnie z moim designem o 20 pixeli.
Dlaczego 20 pixeli?
Ponieważ tutaj
dodaliśmy 20 pixeli padding'u.
Jak pamiętasz, z lewej i z prawej strony.
Czyli tutaj mamy już 20 pixeli.
Dodatkowo potrzebujemy to jeszcze odsunąć
o kolejne 20, tak aby zachować właśnie taki jednolity układ.
Dodatkowo o cały header odsuńmy sobie od góry
o 40 pixeli i teraz dużo lepiej to wygląda.
Przejdźmy więc do ustawień tutaj tego przycisku.
To co chcę zrobić, to w tym przypadku poustawiać inne style.
Przede wszystkim nasz przycisk będzie miał inny kolor tutaj background'u.
W moim przypadku będzie to kolor
FAFBFF.
Jak widzisz teraz
ustawiłem kolor tekstu, a nie kolor tła, to oczywiście ustawiamy kolor tła.
Przepraszam Cię za to.
Teraz musimy odpowiednio dostosować kolor samej czcionki.
Ja wykorzystam ten kolor tutaj z cienia.
Oczywiście muszę się cofnąć, ponieważ niepotrzebnie ją zmieniłem.
Wystarczy, że tutaj tylko tutaj zaznaczę i skopiuję.
I wkleje w tym miejscu, nasz przycisk już powoli zaczyna przypominać
ten z designu.
Musimy mu jeszcze tutaj tylko dodać odpowiedni border.
W tym przypadku będzie to border typu solid.
Grubość tego bordera ustalamy tutaj.
Będą to 2 pixele
i wykorzystamy dokładnie ten sam kolor, który wykorzystaliśmy dla koloru czcionki.
Nasz przycisk tutaj jest gotowy.
Natomiast jak widzisz teraz wysokość tych przycisków jest różna.
Nie są one odpowiednio tutaj ustawione.
Dzieje się tak dlatego,
że do tego elementu dodaliśmy border, czyli jego tutaj wysokość
I szerokość została zwiększona właśnie o wartość tego border'a, czyli w naszym
przypadku o 2 pixele z każdej strony, aby więc dostosować ten przycisk.
Do tego layout'u musimy uwzględnić taką zmianę, a więc w tym przypadku tę padding
od góry i od dołu zwiększamy do wartości 12.
Teraz te przyciski mają już jednakowy
rozmiar i wyglądają dokładnie tak jak w naszym projekcie.
Pozostaje nam jeszcze tylko tutaj zmienić tekst na przycisku na sign in.
I podejrzeć nasz projekt.
Jak widzisz, wszystko wygląda tak jak trzeba natomiast zwrócić pewną uwagę
na to, co się dzieje, jeżeli najeżdżam tutaj kursorem
na ten tekst, jak widzisz przede wszystkim zmienia nam się tutaj kolor.
Podobnie dzieje się w tym przypadku
i tutaj kolor tła tego przycisku zmienia się na taki ciemniejszy.
Jak osiągnąć taki efekt?
Otóż do tego wykorzystamy teraz zakładkę conditional.
Zacznijmy może od tego przycisku, ponieważ będzie to najlepiej widoczne.
Przechodzę tutaj do niego,
wybieram zakładkę conditional i definiuję sobie pierwszy warunek, ponieważ właśnie
zakładka conditional odpowiada za dodawanie warunków.
Jak to działa w praktyce? Już Ci demonstruje.
Klikam tutaj tą opcję i teraz muszę zdefiniować warunek,
który musi zostać spełniony aby wykonały się tutaj potem jakieś operacje.
Czyli w tym przypadku np.
zmienimy jakieś właściwości tego przycisku.
Klikam tutaj i teraz jak widzisz mam dostęp do całego szeregu opcji.
W naszym przypadku chcemy powiedzieć, że ten tekst, czyli dokładnie ten element,
ten button i tutaj kolejno definiujemy co się ma stać.
Wybieramy opcję is hovered.
Czyli ten warunek spełni się wtedy, kiedy
użytkownik najedzie kursorem myszy na nasz przycisk.
A więc warunek mamy już zdefiniowany.
Teraz zmienimy odpowiednią właściwość.
W naszym przypadku będzie to background color.
Jak widzisz, mam tutaj dostęp do całego
szeregu różnych właściwości dostępnych dla tego przycisku.
Możemy zmienić, w zasadzie niemal wszystko to, co możemy
zdefiniować tutaj właśnie w tych ustawieniach dla stylów.
W naszym przypadku jedyne co chcemy
zmienić to background color na kolor zgodny z kolorem w naszym designie.
Zanim jednak to zrobimy, ja tutaj na chwilę obecną wybiorę ten
kolor czerwony, aby zademonstrować Ci jak to ładnie wygląda.
Przejdźmy do podglądu.
Odświeżmy sobie stronę.
Jeżeli teraz jak widzisz najeżdżam tutaj na na ten przycisk to następuje zmiana koloru z
naszego fioletowego na wybrany kolor czerwony.
Natomiast taka zmiana następuje właśnie
zero jedynkowo, a nam zależy na tym, aby była ona płynna.
Aby to zrobić musimy wrócić do edytora, przejść do zakładki appearance
i zjechać tutaj na sam dół, aż dotrzemy tutaj do tej opcji
z możliwością ustawienia tranzycji, czyli właśnie takiego płynnego przejścia.
W pierwszej kolejności musimy zdefiniować jaką właściwość
tutaj taka tranzycja ma obejmować.
W moim przypadku jest to background color,
a tutaj w Bubble wybieramy po prostu background style.
Następnie definiujemy czas trwania takiego
przejścia oraz easeing, na easeing'ach nie będę się skupiał.
Ja najczęściej korzystam tutaj z tego easeingu typu is.
Jeżeli jesteś ciekaw czym różnią się one, te easeingi między sobą to oczywiście w sieci
znajdziesz całą masę dokumentacji, która to dokładnie tłumaczy.
Ustawmy może tutaj tą tranzycji, czyli
czas trwania takiego przejścia na jakąś dużą wartość na 2000 milisekund, czyli
da nam to dwie sekundy i zaraz zobaczysz jak to będzie wyglądało w praktyce.
Znów wracamy do podglądu.
Odświeżamy sobie stronę.
I teraz jak najadę na przycisk to jak
widzisz zmiana tego koloru następuje właśnie w ciągu dwóch sekund.
Mamy takie płynne przejście.
Oczywiście nigdy nie ustawiamy tak dużych
wartości, ja najczęściej właśnie dla przycisków, tekstów ustawiam easeing
w zakresie od 250 do maksymalnie 450 milisekund.
W tym przypadku będzie to 250 milisekund.
I teraz, jeżeli wrócimy do podglądu.
Ta zmiana następuje jak widzisz płynnie, a dodatkowo w odpowiednim właśnie tutaj czasie.
Ustawmy więc kolor tego przycisku na właściwy, czyli zgodny z naszym layoutem.
W moim przypadku jest to kolor
6254BF
i możemy teraz przystąpić tutaj do
ustalania właśnie takich elementów efektów hover na pozostałych naszych elementach.
Przede wszystkim przejdźmy teraz do tego przycisku.
I zobaczmy jak on się zachowuje tutaj w naszym projekcie wzorcowym.
Jak widzisz, w tym przypadku zmienia się
zarówno kolor tekstu, jak i kolor obramowania tego przycisku.
A więc aby to zrobić, znów definiujemy sobie tutaj nowy warunek.
Moglibyśmy oczywiście znów zrobić to
ręcznie, natomiast jest na to prostszy sposób, ponieważ ten warunek będzie
dokładnie taki sam, jak zdefiniowaliśmy tutaj.
Mogę to usunąć klikając tutaj remove condition, wrócić do tego przycisku,
najechać tutaj na ten warunek, kliknąć
prawym przyciskiem myszy i wybrać opcję copy condition.
Wracamy do tego przycisku.
Przejeżdżamy kursorem w to miejsce prawy przycisk myszy i paste condition.
Tym razem nie będziemy zmieniać background
color, więc usuwamy tą właściwość i wybieramy tutaj z listy font color
oraz border color.
Wybieramy tutaj opcję border color all borders, ponieważ chcemy zmienić właśnie ten kolor
dla wszystkich obramowania, czyli obramowania z każdej strony.
Wystarczy tylko teraz, że skopiuje sobie wartość tego koloru z tego miejsca.
I ustawię ją tutaj dla obu tych właściwości.
Oczywiście, jak się domyślasz, musimy też ustawić tutaj tranzycje.
W tym przypadku zmieniamy font color oraz oczywiście border color.
W obu przypadkach ustawiamy wartość 250 milisekund.
I ten przycisk jest już gotowy.
Podobny efekt będziemy musieli zastosować
również tutaj dla tych tekstów w naszej nawigacji.
Przejdźmy więc może do pierwszego.
Dodajmy tutaj nowy warunek.
Tym razem znowu zdefiniujmy go sobie ręcznie.
Czyli mówimy, że to this text is hovered i to co chcemy zmienić
to jak się domyślasz, oczywiście font color,
a dokładnie tą samą wartość koloru, którą mieliśmy tam.
I oczywiście tranzycja
znów dotycząca font color,
wartość 250 milisekund.
Teraz tą operację będziemy musieli powtórzyć dla wszystkich tych tekstów.
A więc zróbmy to
od razu font color 250 milisekund.
Tutaj również 250 milisekund.
Niestety ustawień tranzycji nie możemy sobie skopiować tak jak robiliśmy to z
warunkami, więc za każdym razem będziemy musieli ustawić to ręcznie.
Na szczęście mamy tych przycisków tutaj nie za wiele,
więc zajmie nam to tylko chwilę, a teraz mogę sobie skopiować ten warunek.
Już doskonale wiesz jak to zrobić.
Prawy przycisk myszy copy condition i
powklejamy go tutaj, ponieważ dokładnie taką
samą zmianę będziemy chcieli zastosować na wszystkich tych tekstach.
Obejrzyjmy teraz nasz projekt.
Jak widzisz, teraz wszystko jest zgodne z naszym wzorcowym designem.
Kolor tekstu się zmienia,
tutaj odpowiednio zmienia się kolor tekstu i border, a tutaj tylko background color.
A więc praca z header'em jest już zakończona, a
my widzimy się za chwilę w kolejnej lekcji.