Bubble: Rozmieszczanie elementów - czyli Flexbox w Bubble
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.
Witaj w kolejnej lekcji, w której chciałbym poruszyć bardzo ważną kwestię
rozmieszczenia elementów na naszej stronie.
A więc jeżeli kliknę tutaj dwa razy na
stronę indeksową to omówimy sobie tą część, czyli container layout.
Natomiast zanim to zrobimy, wróćmy jeszcze na chwilę tutaj do tych ustawień.
Bo pominąłem je w poprzedniej lekcji.
Mamy tutaj odpowiednie presety do ustawień szerokości takiej strony w oknie właśnie edytora.
Jeżeli wybrałbym tutaj np.
wersję mobile, to jak widzisz
tutaj szerokość strony, z którą będziemy pracowali skurczyła nam się do 380 pixeli.
Chciałbym natomiast, żebyś pamiętał, że ta
wartość to jest tylko wartość, na której pracujemy w samym edytorze.
Czyli tutaj mamy dostępne 380 pixeli.
Natomiast jeżeli chcielibyśmy podejrzeć
naszą stronę w przeglądarce, czyli korzystamy z opcji preview.
Jak widzisz to czerwone tło rozciąga się
na całą szerokość okna i dokładnie o to nam chodzi.
Nasza strona powinna rozciągać się na całą dostępną szerokość okna przeglądarki.
Natomiast naszym zadaniem będzie
odpowiednie rozmieszczenie elementów tutaj w środku.
Wróćmy więc z powrotem do edytora.
Ustawmy tutaj wartość 1280 pixeli.
Może zmieńmy to tło z czerwonego, żeby aż tak bardzo nie raziło nas po oczach.
Ustawmy tutaj może właśnie jakąś szarą wartość.
Powiedzmy, że FAFAFA.
Ok, natomiast żeby sobie omówić dokładnie to
rozmieszczenie, dużo łatwiej jest to pokazać na przykładzie grupy.
Dodajmy ją więc na stronę.
I tej grupie tutaj.
Ustawmy powiedzmy 1280 pixeli
na powiedzmy 1000 pixeli.
Nie 100 tylko 1000 i też dodajmy jej jakieś tło aby była lepiej widoczna.
Powiedzmy jakieś takie niebieskie tło i wartości na 10%.
Ok, teraz przejdźmy tutaj do ustawień container layout.
Całą nasza grupa, tą którą tutaj dodaliśmy to jest powiedzmy grupa rodzic,
ponieważ ona będzie rodzicem dla elementu, który umieścimy w środku.
Teraz możemy tutaj zdefiniować cztery
wartości, jak widzisz mamy tu fixed, align to parent, row i column.
Z opcji fixed nie korzystamy, natomiast jest to stary tryb rozmieszczania elementów
jeszcze przed wprowadzeniem silnika responsywnego.
Jak to działało? Otóż jeżeli teraz chciałbym
w ramach tej strony, wyśrodkujmy sobię tą grupę tutaj na
podglądzie, jeżeli teraz w ramach tej grupy chciałbym umieścić jakiś element np.
przycisk
zależy mi na tym, żeby on był tutaj w tym prawym górnym rogu, to nie muszę znać
żadnych właściwości CSS, nie muszę wiedzieć jak działają w ogóle HTML'e i CSS'y.
Jedyne co zrobię to klikam sonie tutaj i mówię, że ten przycisk ma się znajdować w tym roku.
Jeżeli teraz chciałbym, aby drugi przycisk znajdował się np.
na środku mojej grupy, to wystarczy, że go tutaj dodam.
Najadę sobie tutaj.
Jeżeli chcę go dokładnie wycentrować to klikam prawym przyciskiem myszy i wybieram
centrowanie w poziomie i centrowanie w pionie.
Jeżeli teraz podejrzymy sobie naszą stronę.
Jak się może domyślić, nasza grupa znajduje się tam, gdzie
ją umieściliśmy, a przyciski dokładnie w tych miejscach, na których nam zależało.
Dzięki czemu nawet osobom, które nie miały
zielonego pojęcia jak działa właśnie budowa stron za pomocą HTML'a i CSS'a,
bardzo łatwo przychodziło korzystanie z Bubble, ponieważ rysowały sobie elementy
dokładnie tam, gdzie chciały je mieć na stronie bądź w aplikacji.
A Bubble dbał o całą resztę.
Natomiast to się zmieniło i z tej opcji fixed już nie korzystamy,
ponieważ najczęściej będziemy korzystać z dwóch innych opcji.
Usunę teraz te przyciski.
Wracam tutaj do mojej grupy, czyli grupy rodzica i zmieniam teraz
ten styl na powiedzmy row, align to parent korzystamy bardzo rzadko.
Też Ci go wytłumaczę, ale skupmy się na
początek na tych dwóch, ponieważ te dwa będziemy wykorzystywać najczęściej.
Ustaw może tutaj column.
Jeżeli teraz będę do mojej grupy rodzica dodawał jakieś elementy dzieci, czyli np.
przyciski to zobacz co się stanie. Przed tym
jeżeli kliknąłem w tym miejscu to ten przycisk został właśnie tutaj umieszczony.
Jeżeli teraz wybiorę przycisk i kliknę na
środku, to ten przycisk został umieszczony tutaj w lewym górnym rogu.
Ponieważ ustawiliśmy. Dla
kontenera, że to jest column.
To jeżeli będę dodawał kolejne elementy to
będą one umieszczone tak jakbyśmy tworzyli kolumny, czyli jeden pod drugim.
Dodajmy jeszcze jeden taki przycisk.
Jak widzisz jeden wyskakuje nam tutaj pod drugi.
Dodatkowo wewnątrz takiego elementu rodzica, które
ma właśnie tutaj ustawione na column możemy rozmieszczać te elementy.
Aby to zrobić muszę przejść do samego elementu.
I jak widzisz mam tutaj
wypozycjonowanie tego elementu w ramach elementu rodzica.
Na chwilę obecną wszystkie te elementy,
widzisz mają tutaj przesunięcie do lewej strony.
Jednak jeśli teraz chciałbym np.
ten pierwszy przycisk wycentrować, to wystarczy, że wybiorę mu tutaj tę opcję.
Jak widzisz został umieszczony na środku kontenera rodzica.
Ten z kolei mogę przyciągnąć do prawej krawędzi, a ten pozostawić przy lewej.
Jeżeli teraz podejrzymy naszą stronę,
czyli wrócimy tutaj na stronę Home, klikniemy tutaj ten taki banerek,
to odświeży nam się strona z aktualnie wprowadzanymi zmianami.
Jak widzisz przyciski zostały tutaj
odpowiednio rozmieszczone, natomiast cała nasza grupa nam się przesunęła.
Dlaczego tak się stało?
Wróćmy do edytora i sprawdźmy co tu się stało.
Wróćmy do samej grupy.
Jak widzisz to jest rozmieszczenie tej grupy wewnątrz elementu rodzica, ponieważ
dla naszej grupy rodzic elementem nadrzędnym jest cała nasza strona.
A ponieważ całej naszej stronie
ustawiliśmy również column, to teraz aby grupę rodzica wycentrować w niej.
Robimy to samo, co robiliśmy tutaj z przyciskami, czyli klikam tutaj i teraz,
jak widzisz, tu wrócę do podglądu.
Cała nasza grupa.
Ta grupa niebieska grupa rodzica została wycentrowana.
Oczywiście jeżeli chciałbym ją przeciągnąć do prawej krawędzi całej strony to
wystarczy, że zaznaczę tą opcję.
Oczywiście muszę najpierw zaznaczyć tutaj wybrać to, odświeżyć.
Jak widzisz ma tutaj teraz odpowiednie zastosowanie.
Wróćmy więc z powrotem do edytora i tym razem.
Zmieńmy.
Tutaj na grupę rodzica container leyout na row.
I zobacz, co się stanie.
Teraz wszystkie te przyciski zostały umieszczone w jednym rzędzie, ponieważ
właśnie ta opcja row mówi nam, że elementy będą pozycjonowane
jeden koło drugiego, czyli właśnie będą tworzyły taki rząd.
Dodatkowo dla
rzędu możemy
odpowiednio tutaj sobie centrować te elementy już tutaj z jego poziomu.
Jak pamiętasz, dla kolumny musieliśmy
osobno przechodzić do wszystkich elementów.
Natomiast tutaj opcja row pozwala nam właśnie je tutaj odpowiednio rozmieszczać.
Na chwilę obecną wszystkie przeciągnięte są do lewej strony.
Za to odpowiada właśnie ta opcja.
Jeżeli chciałbym je wszystkie
wycentorwać to jak się domyślasz wystarczy, że kliknę tutaj i teraz
wszystkie elementy dzieci zostały
odpowiednio rozmieszczone w elemencie rodzica.
No i w ten sam sposób możemy je przeciągnąć tutaj do prawej krawędzi.
Za pomocą tej opcji rozmieścimy je tak, że podzielimy przestrzeń tą dostępną
przestrzeń tutaj pomiędzy te wszystkie elementy.
Sama zobaczysz jak to zadziała.
Jak widzisz, cała dostępna przestrzeń została
umieszczona z tej strony tutaj między elementami.
Tutaj jeszcze z tej strony.
Jeżeli natomiast wybiorę tą opcję space between.
Jak widzisz, tutaj nie mamy żadnych odstępów, natomiast
cała dostępna przestrzeń została równo podzielona tu i tutaj.
Oczywiście nic nie stoi na przeszkodzie,
abyśmy rozmieszczali same te elementy również.
Właśnie tutaj w elemencie rodzice.
Na chwilę obecną wszystkie przeciągnięte są do góry.
Jeżeli wybiorę teraz ten przycisk powiedzmy środkowy.
I wybiorę tą opcję. To i gdzie zostanę wycentrowany?
Tutaj na samym środku nie muszę tu już korzystać z tego, z tych opcji.
Nawet nie są one już tutaj teraz dostępne,
ponieważ korzystam właśnie z tego nowego silnika responsywnego.
Jeżeli ten element chciałbym umieścić
teraz tutaj to nic nie stoi na przeszkodzie
wystarczy, że to zaznaczę i wybiorę tą opcję.
Natomiast ta opcja rozciągnie nam go na całą dostępną szerokość.
Jeżeli ją zaznaczę, to jak widzisz ten przycisk
tutaj rozciągnął się na całą dostępną szerokość elementu rodzica.
Wróćmy jednak może do tego ustawienia.
I do tego.
Więc tak właśnie działa tutaj
ta opcja row, która pozwala zarządzać
elementami zarówno z tego poziomu, dotyczy to wszystkich elementów w
środku, jak i jeżeli przejdziemy do elementu, to możemy zarządzać z nim
niezależnie i rozmieszczać go tak, jak nam tutaj to odpowiada.
Ostatnia opcja jaka nam tutaj została to
align to parent. Zaznaczmy ją.
Teraz sobie to omówmy.
Jak widzisz, w przypadku tej opcji nie
możemy tutaj zarządzać wszystkimi elementami dzieci.
Będziemy musieli je rozmieszczać indywidualnie.
Jeżeli teraz najadę na ten button,
to pojawiło mi się tutaj takie okienko z tzw. parentami, gdzie będę mógł
rozmieścić ten element właśnie zgodnie z tymi ustawieniami.
Na chwilę obecną jest on umieszczony tutaj w lewym górnym rogu.
Jeżeli chciałbym go wycentrować to wystarczy,
że kliknę tutaj, jak widzisz został umieszczony na środku.
Analogicznie mogę go wycentrować
w lewym dolnym rogu albo w lewym, albo w górnym prawym.
Jak widzisz, teraz wydaje nam się, że ten element zniknął, ale tak naprawdę nie
zniknął, ponieważ w tym miejscu mamy dwa przyciski.
Mogę Ci to udowodnić. Klikam tutaj.
Zaznaczam, że chcę go przenieść do tego rogu.
Jak widzisz tu mam jeden tu mam drugi.
W ten sposób właśnie za pomocą tej opcji, czyli tego ustawienia align to
parent będziemy mogli umieszczać elementy jeden na drugim.
Czasami jest to przydatne,
natomiast jak mówiłem w bardzo takich specyficznych warunkach, dlatego
najczęściej będziemy wykorzystywać tylko row i column.
Mam nadzieję, że już teraz rozumiesz jak to działa.
Oczywiście nie przejmuj się, przez wszystkie te opcje będziemy przechodzić za
każdym razem jak będziemy budować kolejne części składowe naszej strony,
a to co będziemy budować omówimy sobie już w następnej lekcji.