Bubble: Tworzymy wireframe
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.
Witam Cię w kolejnej lekcji, w której tym
razem skupimy się na budowie sekcji features, ponieważ w tym przypadku layout
jest nieco bardziej skomplikowany niż ten, z którym mieliśmy dotychczas do czynienia.
Postanowiłem, że pracę rozbijemy sobie na dwie osobne części.
W pierwszej z nich przygotujemy prosty wireframe
czyli taki szkic tego, jak mają być rozmieszczone elementy na naszej stronie.
Dodatkowo porozmawiamy, jakie typy layoutu
tam należy poustawiać, jakie właściwości nadać poszczególnym grupom
i dopiero kiedy ta część będzie już skończona, uzupełnimy taki wireframe o
już właściwe elementy, czyli właściwe obrazki, teksty oraz ikony.
Na koniec porozmawiamy jeszcze o jednej
bardzo ważnej kwestii, czyli o tym, jak pracuje się ze stylami w edytorze Bubble.
A skoro wiemy już, co mamy robić, to przystąpmy do działania.
W tym celu wracamy do edytora.
Zanim przystąpimy do konkretnej pracy, chciałbym, abyś wykonał razem ze mną pewną
operację, a mianowicie zdefiniował nasz pierwszy styl w Bubble.
W tym celu dodaję tutaj element grupy.
Odpinam jej istniejące style i nadaję styl background'u ustawiony na jednolity kolor
o wartości 0066FF, czyli taki niebieski kolor.
Dodatkowo ustawiamy mu tutaj przezroczystość.
Dodatkowo ustawiamy tutaj przezroczystość, ustawioną na wartość 10%.
Dlaczego akurat 10%?
Zaraz zobaczysz.
Zapiszmy teraz ten styl.
W tym celu klikam tutaj w zakładkę style.
Wybieram create a new style i nadaje mu nową nazwę.
W moim przypadku nazwę go wire, klikam przycisk create.
Nasz pierwszy styl został utworzony.
Zobacz natomiast co się stanie, jeżeli teraz do tej grupy
wstwię w środek dodatkowo grupę i jej również nadam styl wire.
Ponieważ kolor ustawiony jest na 10%
przezroczystości, to ta grupa jest po prostu ciemniejsza, ponieważ 10 plus tutaj 10
daje nam 20% przezroczystości dla tej grupy.
Gdybyśmy w środek dodali kolejną grupę.
I znowu wybrali nasz styl wire.
Tak jak widzisz, te elementy nam się tutaj wyraźnie odznaczają od siebie.
Ja zawsze właśnie do tworzenia wireframe'ów
korzystam wyłącznie z grup i tutaj zawsze z tym stylem ustawionym na wire.
Usuńmy więc te elementy, zostawmy tą jedną grupę.
Teraz tutaj nadajemy jej odpowiednią nazwę.
W naszym przypadku będzie to grupa o nazwie features.
Przejdźmy do zakładki layout i zastanówmy
się jaki typ layoutu, jakie wartości tutaj dla niej poustawiać.
W tym celu wracamy do projektu wzorcowego i sprawdzamy jak to jest tutaj ustawione.
Nasza grupa features to cała grupa, czyli
cały ten duży kontener, która obejmuje te dwie sekcje, a więc tą oraz tą drugą sekcje.
Dodatkowo jak widzisz cały ten kontener rozciąga się na jakąś określoną szerokość.
W naszym przypadku jest to 1280 pixeli, ponieważ z tej wartości zawsze korzystamy.
Dodatkowo te poszczególne sekcje umieszczone są jedna po drugiej,
a więc grupa features powinna posiadać layout ustawiony oczywiście na column.
Przejdźmy więc do odpowiednich ustawień.
W pierwszej kolejności musimy sobie wybrać typ layoutu ustawiony na column.
Następnie chcemy wyśrodkować taką grupę na całej naszej stronie.
Odznaczamy ten checkbox i w tym przypadku nie podaje żadnej
minimalnej wartości szerokości, natomiast maksymalną.
Jak się domyślasz ustawiam tutaj na 1280 pixeli.
Naszym kolejnym zadaniem będzie teraz
stworzenie tej pojedynczej sekcji, a więc sekcji składającej się z obrazka
oraz tutaj tego kontenera zawierającego content, czyli treści
tutaj jakieś nagłówki i ikonki.
Wracamy do edytora, wybieramy group,
wstawiamy ją wewnątrz tutaj tej grupy features i tym razem nadajemy jej nazwę feature.
Oczywiście musimy jeszcze tutaj nadać odpowiedni styl, czyli nasz wire.
I teraz
dodajemy tutaj odpowiednie wartości, a więc przede wszystkim typ layoutu.
W tym przypadku ustawiamy na row.
Odznaczamy ten check box.
Tutaj znów nie ustalam żadnej minimalnej wartości na szerokości.
O tym porozmawiamy jeszcze nieco później.
Natomiast wartość maksymalną mogę pozostawić pustą.
Dlaczego? Ponieważ, jak się domyślasz, skoro dla
rodzica, czyli dla całej grupy features, przejdźmy sobie tutaj do tego rodzica.
Select first parent i rozwińmy sobie tutaj jeszcze może to drzewko elements tree?
Tu dla grupy features ustawiliśmy maksymalną szerokość na 1280 pixeli,
co oznacza, że dzieci wewnątrz niej mogą się rozciągnąć tylko
na taką szerokość, jaką zapewnia im rodzic a więc właśnie również na 1280 pixeli.
Skoro to już jest jasne, to wróćmy do tej grupy feature.
Mam ją tutaj zaznaczoną i dodajmy jeszcze marginesy z góry
i z dołu, aby była ona tutaj lepiej widoczna wewnątrz całego kontenera rodzica.
Dodatkowo dla grupy features, czyli
rodzica możemy odznaczyć minimalną wysokość.
Ponieważ mamy zaznaczony tutaj ten checkbox co chcemy dostosować wysokość
tego kontenera dp elementów dzieci, które znajdują się w środku.
Wracamy do grupy feature, czyli pojedynczego
feature i znów wstawiamy do niej dwie grupy.
Pierwsza to będzie grupa z obrazkiem, czyli w tym przypadku grupa feature image.
Oczywiście nadajemy jej tutaj odpowiedni styl, aby była widoczna.
Kolejno dodajemy następną grupę.
W tym przypadku
feature content.
Znów nadajemy jej odpowiedni styl.
I teraz zastanówmy się, jakie właściwości ustalić dla tych poszczególnych grup.
Przejdźmy do naszego projektu wzorcowego.
Tu mamy feature image, a w środku obrazek, który na dodatek ma być wyśrodkowany.
A więc aby tą obcje osiągnąć.
Tutaj ustawiamy layout na align to parent.
W ten sposób łatwo mi wyśrodkować elementy w środku.
Dodatkowo odznaczamy checkbox i tym razem ustalam minimalną szerokość na
320, a maksymalną pozostawiam tutaj na 0, czyli na Infinity.
Ponieważ chcę, aby ta grupa rozciągnęła mi się na całą dostępną szerokość
dla grupy feature content.
Z kolei zerknijmy jakk mamy tutaj rozwiązane.
To jest ta grupa feature content.
Tutaj będziemy musieli zastosować layout
typu column, ponieważ mamy tutaj najpierw nagłówek, a potem te poszczególne grupy.
Wróćmy więc do edytora.
Ustalmy tutaj column.
Odznaczmy ten checkbox.
I znów ustalmy 320.
A tutaj nie uzupełniamy żadnej wartości, dzięki czemu jak widzisz te grupy
rozciągneły się tutaj na całą szerokość rodzica, a tutaj teraz
jest to lepiej widoczne i zajmują dokładnie po połowie.
Dlaczego teraz dla tych grup ustawiliśmy 320 pixeli, a nie robiliśmy tego np.
właśnie tutaj dla grupy features czy całej grupy feature?
Otóż dlatego, że chcę, aby właśnie tylko
taka pojedyncza grupa skurczyła mi się do minimalnie do 320 pixeli.
Zobacz, co by się stało, gdybyśmy dla tych grup odznaczyli tą wartość.
Natomiast żeby to było lepiej widoczne, to może tutaj nadajemy im chwilowo tylko
inne kolory, taki i tutaj może powiedźmy ten kolor czerwony.
Więc zobacz teraz odznaczamy im minimalne szerokości.
I zastanówmy się, jak te grupy się będą zachowywać.
Nie mają tutaj maksymalnej szerokości, a więc rozciągają się równo po połowie.
Ponieważ zajmują całą dostępną przestrzeń, a ponieważ nie mają
minimalnych wartości, to przy podglądzie zobacz co się będzie działo.
Jak wiesz, stosując nasze podejście to 320
razy x powinniśmy tutaj dojść do 640 pixeli.
Czyli takiej wartości, gdzie te dwie grupy powinny się jeszcze tutaj mieścić.
Jesteśmy przy 640 pixelach.
Jak widzisz tutaj mamy te dwie grupy,
ponieważ mamy tutaj ustawione minimalną szerokość 320.
Natomiast jeżeli zjadę
chociaż pixel niżej, to te grupy zajmują teraz całą dostępną przestrzeń.
Natomiast tutaj takiej minimalnej wartości nie zdefiniowaliśmy.
A więc te grupy będą się kurczyć
w tym przypadku aż do zera, czyli tutaj tej wartości ustawionej w tym miejscu.
Jeśli bym teraz przejechał na widok 320 pixeli.
No jak widzisz znajduję się tutaj obok siebie i teraz każda z nich zajmuje po 160 pixeli.
Oczywiście nie jest to efekt, który chcemy osiągnąć.
My chcemy mieć właśnie taki layout, gdzie taka pojedyncza grupa
będzie się rozciągała na całą szerokość tutaj dostępną, czyli na te 320 pixeli
i poniżej tej wartości granicznej się już nie kurczyła.
Możemy więc teraz zaznaczyć taką grupę,
czyli grupę features image i przywrócić jej tutaj 320 pixeli.
Jak widzisz teraz zajęła nam tutaj całą dostępną przestrzeń,
przykrywając przy okazji tam tą grupę, zostały one skurczone do zera.
Tu jest właśnie nasza grupa feature content.
Totalnie niewidoczna, ponieważ ma ona szerokość zero pixeli.
Aby na niej przejść, muszę wrócić tutaj do drzewka elementów, zaznaczyć ją tutaj
i nadać jej minimalną szerokość 320 pixeli.
Jak widzisz, teraz otrzymujemy dopiero taki layout, na jakim nam zależy.
Ponieważ te grupy mają tutaj minimalną szerokość, to nie musimy takiej minimalnej
szerokości ustawiać ani dla nich na ich rodzica, czyli tutaj dla grupy feature.
Stąd też zostawiliśmy tutaj wartość 0,
ani tym bardziej dla tego górnego kontenera dla features.
Ponieważ jak wiesz to wszystko dostosowuje się do elementu w środku.
A więc skoro taka najbardziej zagnieżdżone
grupa, czyli ta grupa image nie skurczy się poniżej 320 pixeli.
To i jej rodzic i kolejny rodzic jego rodzica
również poniżej tej wartości się nie skurczy.
Mam nadzieję, że jest to dla Ciebie jasne i że wiesz jak to działa.
Wróćmy więc teraz do buildera
i odpowiednio sobie zdefiniujmy te poszczególne grupy, przywróćmy im nasz styl wire
i przejdźmy jeszcze teraz do kolejnych ustawień dla całej grupy features.
Oznaczyliśmy minimalną wysokość, czyli dokładnie to, co powinniśmy zrobić.
To samo róbmy teraz dla feature,
czyli obejmującej tej feature image i feature content.
Tutaj też odznaczamy minimalną wysokość.
Teraz tutaj tak samo darujmy sobie obrazek, który będzie się znajdował w środku.
W tym celu ja sobie ustawię tutaj grupę
wyśrodkuję
ją tutaj wewnątrz całego konteneru rodzica, nazywę ją po prostu image.
Ustawie styl wire i jeszcze dodatkowo ustawię margines z każdej strony na 20 pixeli.
Teraz możemy zastanowić się, jak
rozmieszczone są elementy w tej grupie feature content.
Zerknijmy na nasz projekt wzorcowy.
Mamy tutaj jakiś nagłówek.
Kolejno tutaj grupę.
Gdzie znów mamy tutaj najpierw ikonkę obok, kolejną grupę, która będzie zawierać
ten mniejszy nagłówek i ten tekst, a więc przystąpmy do działania.
Nadajmy tutaj jakikolwiek wzorcowy tekst, na razie bez żadnych wartości.
Jedyne co mu tutaj ustawia, to odpowiednie marginesy.
W moim przypadku jest to 40 pixeli z tej strony i 20 z tej.
I rozciągnijmy go sobie tutaj jeszcze na całą szerokość.
Jak widzisz teraz jest to troszkę lepiej widoczne.
To jest nasze pole tekstowe, które pod spodem będzie miało
ustawioną tutaj kolejną grupę.
Nazwijmy ją w tym przypadku feature
content inner.
Dodajmy jej odpowiedni styl, czyli nasz styl wire.
I kolejno odsuńmy,
tak jak nagłówek o 40 pixeli z lewej strony, 20 pixeli z prawej.
Jak wiesz, ta grupa feature content inner to jest ta grupa.
Czyli tutaj znowu mamy ikonkę oraz kolejną grupę, która zawiera tą część.
W tym celu musimy tutaj nadal być
ustawiony na row, ponieważ chcemy umieścić tu jeden element obok drugiego.
Odznaczamy fix-width
i odznaczamy tutaj minimalną wartość, czyli ustawiamy ją po prostu na 0.
Maksymalnej nie ustawiamy i kolejno musimy zadbać jeszcze o minimalne wysokości.
W tym celu sprawdźmy to tutaj feature content.
Chcemy odznaczyć minimalną wysokość.
Tutaj na razie tego nie odznaczamy,
ponieważ zobacz, co by się stało, gdybym to zrobił.
Taka grupa skurczyłaby się do zera i nie moglibyśmy z nią pracować.
Przywróćmy więc na chwilę.
Tą domyślną i ustawmy tutaj kolejne elementy.
Pierwsza to będzie ta grupa z ikonką.
Możemy ją sobie tutaj wstawić.
W moim przypadku mogę i od razu nadać określoną szerokość.
Będzie to 64 pixele oraz
tutaj oczywiście styl wire.
Żeby to było widoczne, nazwijmy ją tutaj może
feature icon.
Inna kolejna grupa.
Tym razem będzie
to ta część, czyli grupa zawierająca tutaj ten nagłówek oraz tekst pod spodem.
Skoro te elementy będą umieszczone jeden po
drugim, to oczywiście zanim tutaj przystąpimy dalej, nadajemy styl wire.
Wracamy do layoutu, ustawiamy typ na column, znów odznaczamy
ten checkbox i nie chcemy minimalnej szerokości,
nie chcemy maksymalnej szerokości.
Chcemy, żeby to nam się rozciągało tutaj na całą szerokość.
Natomiast ja chcę, żeby ta grupa była tutaj odsunięta od tej ikonki.
O powiedzmy 10 pixeli.
A może nawet 20 będzie to lepiej widoczne.
Teraz musimy tutaj zamodelować sobie nasze teksty.
Czyli najpierw wstawiamy tekst, który będzie odpowiadał za nagłówek,
kolejno tekst, który będzie odpowiadał za treść pod nim.
I teraz dopiero, skoro mamy te elementy tutaj w środku, możemy dla całej tej grupy.
Powiedzmy, że będzie to grupa
feature text.
OK.
Przechodzimy do zakładki layout, odznaczamy minimalną wysokość.
Chcemy, żeby dostosowała się do elementu w
środku i teraz możemy to samo zrobić tutaj
dla rodzica, czyli dla grupy feature content-inner.
Tutaj również odznaczamy minimalną wysokość.
Nasz layout powoli zaczyna przypominać ten wzorcowy.
Natomiast jak pamiętasz takich grup tutaj mamy 3.
Możemy więc skopiować sobie całą tą grupę, czyli grupę feature content-inner i ją wkleić.
Nadajemy jej tutaj jeszcze może margines
od góry chwilowo ustawiony powiedzmy na 50 pixeli.
Później to jeszcze odpowiednio dostosujemy.
Znów zaznaczam grupę feature inner
kopiuję jeszcze raz.
I tylko tutaj usuwam tą nazwę copy z samej nazwy.
I teraz cały szkic
mamy już tutaj gotowy. Mamy grupę z obrazkiem.
Mamy zamodelowany obrazek.
Mamy tutaj zamodelowaną tą część z tekstami, tu jak widzę jeszcze pod nagłówkiem
nie dodaliśmy żadnego marginesu, ustalamy go więc może tutaj na 50 pixeli.
I taka pojedyncza sekcja jest już gotowa.
Natomiast ponieważ druga ta sekcja jest po prostu jej powieleniem.
Tylko zamienimy kolejność i to po lewej stronie będziemy mieć tekst,
po prawej obrazek, to zajmiemy się tym później.
Tak więc możemy zakończyć pracę w tej lekcji i widzimy się już za chwilę.