Bubble: Pracujemy z zakładką Responsive
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.
Mam nadzieję, że i tym razem praca domowa nie sprawiła Ci żadnego problemu.
Na wszelki wypadek zerknijmy jeszcze jak ja to rozwiązałem.
Mam tutaj grupę footer i layout ustawiłem na column i nie nadawałem
ani minimalnej ani maksymalnej szerokości.
Zostawiam tylko ten kolor tła ustawiony właśnie na taki niebieski kolor.
Wewnątrz mam grupę footer-inner, layout ustawione na row.
Grupa jest tutaj wycentrowana, jej maksymalna szerokość to 1280 pixeli.
Wewnątrz niej umieściłem 4 grupy footer-col,
które kolei mają minimalną szerokość 320 pixeli.
Maksymalnej nie ustawialiśmy,
a dodatkowo nadałem tutaj jeszcze margines na dole równy 40 pixeli
i dopiero wewnątrz takiej kolumny dodałem kolejną grupę footer-col-inner.
Oczywiście layout ustawiony na column i
tylko marginesy z lewej i z prawej strony równe 40 pixeli.
Możemy więc teraz podejrzeć naszą stronę.
Jak widzisz wszystko tutaj jest ok.
Natomiast pojawia się tu taki brzydki odstęp na dole footer'a.
Dzieje się tak dlatego, że jeżeli wrócimy tutaj do poglądu,
to mam wartość minimalnej wysokości dla całej naszej strony, ustawioną na
wartość większą niż łączna wysokość wszystkich elementów w środku.
Wspominałem Ci, że tą wartość
dostosowujemy sobie tak, aby nam się tutaj po prostu dobrze
pracowało w edytorze, ponieważ strona i tak dostosuje się do elementu w środku.
I tak oczywiście jest to prawda, pod warunkiem, że tu będziemy mieli mniejszą
wartość niż łączna wysokość tych elementów, które do środka wstawiamy.
Jeśli więc tutaj, ustawimy wartość równą 1000 pixeli.
A wewnątrz strony umieścił elementy, które zajmowałyby nam wysokość np.
1500 pixeli.
To nasza strona odpowiednio się rozciągnie i do nich dostosuje.
Natomiast tutaj ta wartość jest dużo
większa niż te elementy wszystkie w środku.
Czyli zaczynając od grupy wrapper, aż kończąc na grupie footer, zjedźmy więc
na sam dół. I okazuję się, że tutaj ustawiliśmy wartość wysokości o
47 pixeli za dużą. Jak widzisz widać to na samym dole,
tutaj mamy takie czerwone podświetlenia.
A więc odpowiednio to teraz dostosujemy.
I teraz tutaj będąc właśnie w
tej wartości mogę strzałkami zjechać w dół jeszcze o 7 pixeli.
Teraz wszystko już jest ok.
Jeżeli przejdziemy do podglądu, odświeżamy.
To jak widzisz ten brzydki odstęp na dole nam zniknął i footer jest ostatnim elementem.
Czyli wygląda to wszystko tak jak wyglądać powinno.
Wróćmy więc do edytora i porozmawiajmy o kolejnej bardzo ważnej kwestii.
Jak wiesz, projektowaliśmy naszą stronę
tak, aby dobrze prezentowała się na każdej rozdzielczości.
Możemy więc teraz sprawdzić, czy rzeczywiście tak jest.
Przejdźmy więc na samą górę.
Przejdźmy do zakładki responsive.
I teraz możemy przeanalizować zachowanie
wszystkich naszych elementów przy różnych szerokościach ekranu.
Zacznijmy więc od header'a.
Przy 1200 wszystko jest ok.
Zjdźmy na 992,
tu jak widzisz zaczyna nam się robić trochę
tłoczno i mało miejsca między logotypem a naszą nawigacją.
No jeśli będę zjeżdżał jeszcze niżej.
Jak widzisz w tym momencie,
cała nasza nawigacja przeskoczyła poniżej.
Nie jest to efekt oczywiście jaki chcemy osiągnąć.
Tak więc wróćmy do bulider'a i zastanówmy się jak go rozwiązać.
W tym przypadku najprostszym wyjściem będzie ukrywanie pełnej nawigacji przy
odpowiedniej szerokości ekranu, a pokazywanie poniżej tej wartości tylko
ikonki, za pomocą której będziemy mogli otworzyć takie menu mobilne.
Dodajmy więc tutaj odpowiednią ikonę, najpierw chciałbym tutaj dodać grupę.
Nazwijmy ją grupą
menu-icon.
Layout
chcę ustawić na align to parent i ustalić stałą wysokość i stałą szerokość równą
44 pixele.
Dodatkowo chcę wycentrować taką grupę już tutaj w elemencie rodzicach, czyli w samym
headerze.
Wybieram więc tą opcję i teraz oczywiście dodajemy odpowiednią ikonkę.
Niepotrzebnie nam się ona tutaj wstawiła.
Oczywiście możemy to usunąć, wybrać jeszcze raz ikonkę.
I dodać ją do tej grupy.
Chcę ją wycentrować.
Wymiary ikony to 42 na 42 pixele.
Nazwę to
menu-icon.
Kolor to nasz kolor middle.
Jeszcze tylko musimy namierzyć odpowiednią ikonę.
W moim przypadku jest to
ta ikona, która tak bardzo przypomina po prostu ikonkę menu.
Co prawda jest to ikonka article, ale to nic.
Kopiujemy, wracamy do edytora,
oczywiście wstawiamy.
Teraz te wszystkie elementy pojawiają się jednocześnie.
Nie jest to oczywiście sytuacja, na jakiej
nam zależy, ale doskonale już wiesz, jak możemy to rozwiązać.
Przechodzimy więc tutaj do całej grupy nav-links, do zakładki conditional
i oczywiście odnosimy się do current page width, czyli aktualnej szerokości ekranu.
I chcę powiedzieć, że dla
wartości mniejszej niż 960 pixeli nie chcę pokazywać tej grupy.
Wystarczy, że wybiorę tutaj z listy: this
element is visible i po prostu nie zaznaczę tego checkbox'a.
Wtedy ta grupa zostanie ukryta.
Jak się domyślasz, możemy skopiować ten warunek.
I zastosować go tutaj dla całej tej grupy.
Oczywiście dla, nie dla ikonki tylko, dla jej rodzica, czyli grupy menu-icon.
Wstawiam ten warunek i tym razem po prostu całą grupę pokazywać z tą ikonką.
Przejdźmy więc teraz do zakładki responsive.
Jak widzisz, menu nam zniknęło.
Ikonka się pojawiła, ale coś tu nadal jest nie tak.
Dzieje się tak dlatego, że to nasze menu
nadal tutaj jest widoczne, mimo że elementy w środku zostały ukryte,
menu powinno też zostać ukryte,
ponieważ odznaczyliśmy ten checkbox
to zapomnieliśmy zaznaczyć jednej bardzo ważnej opcji.
W zakładce layout musimy wybrać collaps when hidden,
wówczas taka ukryta grupa skurczy się do 00 pixeli.
Teraz już wszystko będzie ok.
To samo musimy oczywiście zrobić tutaj
dla tej całej grupy menu-icon tu też zaznaczyć
tą opcję i teraz już nasz header, jak widzisz będzie się zachowywał tak jak trzeba.
Oczywiście
pod warunkiem, że grupę menu-icon ukryjemy przy ładowaniu strony,
czyli musimy odznaczyć ten checkbox.
Chcemy ją pokazywać tylko i wyłącznie
wtedy, kiedy szerokość ekranu jest mniejsza niż 960 pixeli.
Natomiast cała grupa nav-links ma się pojawiać przy załadowaniu strony, ale
znikać gdy ta szerokość ekranu jest właśnie tutaj mniejsza niż 960 pixeli.
A więc teraz wszystko już jest ok.
Tutaj nasza ikonka wyświetla się
poprawnie, mobilne menu dodamy nieco później, ponieważ będzie ono ściśle
powiązane z obsługą workflows, o których porozmawiamy sobie w kolejnych lekcjach.
Przejdźmy więc może teraz do kolejnych elementów.
Tu jak widzisz wszystko jest ok, ale zejdźmy do 320.
No i okazuje się, że ten nagłówek jest
zdecydowanie za duży na takich rozdzielczościach.
Dodatkowo tutaj jeszcze ten header jakoś tak bardzo nam się ścisnął.
Dlaczego?
Okazuje się, że tutaj ma nadane 40 pixeli marginesu z każdej strony.
Możemy więc dla całej grupy header zastosować
warunek, że poniżej wartości 960 pixeli odznaczamy tą właściwość a
wybieramy lewy i prawy margines i ustawiamy ją na 20 pixeli.
I teraz możemy się zająć już naszym nagłówkiem.
Zanim jednak to zrobimy, zastanówmy się, jakie efekty tym razem chcemy osiągnąć.
Mi zależy na tym, aby przy określonej
szerokości ekranu ten rozmiar font był nieco mniejszy.
Natomiast tutaj możemy te warunki dodać na dwa różne sposoby.
W przypadku grupy header dodawaliśmy je bezpośrednio do tego elementu, czyli
właśnie zdefiniowaliśmy taki conditional tylko dla grupy header.
To samo moglibyśmy teraz zrobić tutaj dla tego nagłówka i tutaj też dodać ten warunek.
Mogę go wkleić i tym razem powiedzieć, że
przy rozdzielczości mniejszej niż 768 pixeli.
Nie chcę go ukrywać, ale chcę tylko zmienić rozmiar fonta.
Czyli wybieramy font size i nie 14, tylko może 44 pixele.
Ok, teraz ten nagłówek wygląda tak jak trzeba.
Natomiast jeśli zrobię to w ten sposób, to taki conditional będzie miał zastosowanie
tylko i wyłącznie do tego jednego elementu, do którego go dodałem.
Czy to jest efekt, który chcemy osiągnąć? No nie.
Nam zależy na tym, aby wszystkie takie nagłówki, niezależnie od tego ile ich mamy
na stronie, zachowywały się dokładnie w taki sam sposób.
Jak więc to osiągnąć?
Wystarczy, że skopiujemy ten warunek, usuniemy go z tego miejsca, a dodamy go
bezpośrednio tutaj do zdefiniowanego stylu.
Czyli w moim przypadku to stylu H1 dark.
Przechodzę do edycji stylu i teraz dopiero tutaj do zakładki conditional.
Gdybym chciał tutaj zdefiniować nowy
warunek, to okaże się, że jak widzisz tych opcji mamy tutaj znacznie mniej.
Możemy się tylko odnieść do tego elementu.
Do parent page width,
do tutaj pozycji przy scrollowaniu
i do zalogowanego użytkownika. O użytkownikach porozmawiamy nieco później.
Nas natomiast interesuje ta opcja, czyli current page width mniejsza niż 768 pixeli.
I to co my chcemy zrobić już doskonale wiesz.
Czyli font size 44 pixele.
Teraz taki warunek będzie miał
zastosowanie do wszystkich nagłówków H1 jakie będziemy mieć na stronie, czyli do
wszystkich tych, których dodamy właśnie tutaj
taki styl H1.
Wracamy więc do zakładki responsive.
Teraz nasz nagłówek pierwszego typu
zachowuje się już tak, jak zachowywać się powinien.
Dodatkowo te marginesy z lewej i prawej
strony na wszystkich tych elementów są identyczne.
Tym tekstem nie chcemy się zajmować.
Tutaj jego rozmiar fontu jest odpowiedni.
Przejdźmy więc niżej.
Natomiast ten będziemy musieli oczywiście poprawić.
Oczywiście zastosujemy dokładnie to samo podejście, czyli edycja stylu.
Page width mniejsza niż 768 pixeli.
I font size, tym razem równe 36 pixeli.
Wracamy do podglądu.
Teraz już wszystko jest ok.
Przejdźmy więc do kolejnych elementów.
Tutaj też wszystko jest tak, jak być powinno.
Sprawdźmy jeszcze to na
tych pozostałych
rozdzielczościach, to jak się okazuje ten tekst rozciąga się na zbyt dużą szerokość.
Zerknijmy dlaczego?
Przejdźmy do ustawień tej grupy.
Nadaliśmy jej minimalną szerokość, ale nie ustawiliśmy maksymalnej.
Więc może wpiszmy tutaj wartość 640 pixeli
i to samo zróbmy tutaj dla tych wszystkich kolumn.
Musimy jeszcze oczywiście zadbać o to, aby
te elementy były odpowiednio tutaj wycentrowane.
Czyli przechodzimy do grupy 3-col i
dla całego rodzica definiujemy wyśrodokowanie.
Teraz wygląda to już zdecydowanie dużo lepiej.
Może nawet jeszcze zmniejszmy tą wartość to powiedzmy 480 pixeli.
Teraz wygląda to zdecydowanie fajniej.
Przełączamy się na widok mobilny.
Tutaj wszystko jest okej.
Marginesy z lewej i prawej strony są identyczne.
Natomiast tutaj ten margines zdecydowania jest nie tak, jak powinien.
Przełączmy się więc znowu na widok tabletowy.
W tym miejscu udsuneliśmy tekst i te wszystkie elementy o 40 pixeli,
ponieważ jeszcze dla tego widoku mieszczą się one obok siebie.
Zastanówmy się więc, kiedy ten cały tutaj element przeskakuje nam pod obrazek.
Oczywiście w naszym przypadku taką wartością graniczną będzie 640 pixeli, a
poniżej jej ten rozciągnie się na całą szerokość, podobnie zresztą jak i ten.
A więc w tym przypadku przechodzimy tutaj do conditional
mamy tutaj, jak widzisz warunek zastosowany dla wszystkich nagłówków typu H2.
Ja tym razem chcę dodać po prostu warunek
tylko dla tego elementu i mówię nawet możemy to sobie skopiować
i wkleić.
I poniżej wartości 640 pixeli.
Chcemy zmniejszyć lewy margines na 20 pixeli.
Ten sam warunek chcemy tutaj zastosować do wszystkich tych grup.
I zerknijmy jak się to teraz będzie zachowywało.
Zjeżdżamy poniżej wartości 640 pixeli.
Jak widzisz teraz wszystko jest ok.
Ten margines z lewej i z prawej strony jest równy 20 pixeli, a ponieważ zawsze wiemy
przy jakich breakpoint'ach łamią się nasze layout'y, to jak widzisz stosowanie tutaj
tych odpowiednich warunków jest wyjątkowo proste.
To samo oczywiście musimy zrobić tutaj dla tego nagłówka i dla tych elementów.
Tutaj możemy się zastanowić, czy chcemy zachować taki układ.
Sprawdźmy, jak on się tutaj zachowuje przy innych rozdzielczościach.
Tu jeszcze wszystko jest ok.
Tutaj te białe grupy nam się jakoś bardzo mocno rozciągają.
Może więc nadajemy im po prostu stałą szerokość.
I wtedy nie będzie z tym najmniejszego problemu.
Postawmy dla wszystkie grupy companies-inner
po prostu stałą szerokość równą 320 pixeli.
I teraz odpowiednie style dodajemy tutaj dla companies-row.
No i chcemy to wycentrować,
no wygląda to całkiem fajnie, więc może zostańmy właśnie przy takim typie layout'u.
Jeśli będę to rozciągał to w tym momencie, potem przeskoczy nam to do jednego
rzędu, a tutaj będzie odpowiednio przeskakiwał poniżej i jest ok.
Tak więc jedziemy dalej.
O tutaj grupę pricing zadbaliśmy odpowiednio wcześniej.
Ona dobrze wygląda tutaj przy wszystkich rozdzielczościach.
Jak widzisz wszystko jest ok.
Mamy tutaj pojedynczą kartę o odpowiednich wymiarach.
Tutaj też wszystko jest ok, poza oczywiście tym nagłówkiem.
A to dlatego, że tu mamy H2 white, czyli inny styl.
Musimy więc dla niego też zdefiniować tutaj odpowiedni conditional.
I ustalić rozmiar fonta równy 36 pixeli.
Wracamy do podglądu.
Przechodzimy do widoku mobilnego.
Teraz już wszystko jest tak, jak być powinno.
Grupa footer też jest w porządku.
Sprawdźmy jeszcze jak się będzie zachowywała
tutaj dla innych szerokości ekranu czy musimy podać jakieś poprawki.
W tym momencie wszystko jest ok.
A zobaczmy.
Przy tych rozdzielczościach, no możemy zostawić to wyrównanie do lewej strony.
Wygląda to w porządku.
Tak więc nasza praca
z poprawieniem layout'u dla widoków mobilnych jest już tutaj zakończona.
I widzisz, teraz nasz layout dobrze się
prezentuje na wszystkich rozdzielczościach.
A ponieważ mieliśmy tutaj od razu zastosowane odpowiednie podejście do
tworzenia takiego layout'u, to wprowadzanie tych zmian zajęło nam dosłownie chwilę.
Dziękuję Ci więc za uwagę i widzimy się już za moment.