Bubble: Podstawowa struktura strony
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.
Jestem absolutnie przekonany, że i tym
razem praca domowa nie sprawiła Ci najmniejszego problemu.
Standardowo przejdźmy przez moje
rozwiązanie, tak abyś mógł porównać je ze swoim.
Mamy tu grupę mobile menu,
a w nim oczywiście wszystkie linki z naszej nawigacji mobilnej.
Do każdego tego linku, czyli text'u about
contact, features i pricinig stosujemy niemal te same operacje, czyli
scrollujemy do odpowiedniej grupy, a następnie ukrywamy całą grupę mobile menu.
Zmieniłem tu tylko jej nazwę z menu mobile na mobile menu, tak
aby zgadzała mi się tutaj z nazwą tego folderu.
Jak widzisz ta sama operacja jest tutaj, tutaj i oczywiście i w tym miejscu.
Natomiast dla tekstów, czyli linków sign in oraz sign up, jedyne co robimy to tylko
przekierowujemy użytkownika na stronę logowania i rejestracji.
W tym przypadku nie musimy oczywiście pamiętać o tym, aby ukrywać tą grupę z
naszym mobilnym menu, bo nawet jeżeli użytkownik cofnie się i wróci z powrotem na stronę
indeksową, to ta grupa będzie z automatu ukryta.
Utworzyłem tu jeszcze dodatkowy folder o
nazwie pages links i w tym przypadku mam tutaj cztery workflow, które przypięte
są do wszystkich przycisków na naszej stronie, czyli do tych 4
do przycisku get started oraz tych trzech przycisków.
Tutaj w sekcji pricing.
Jak widzisz mam tu dokładnie tą samą operację.
Jedyne co robimy to przekierowujemy użytkownika na odpowiednią stronę.
W każdym przypadku jest to strona logowania i rejestracji.
Oczywiście ostatnim elementem o którym
musiałeś pamiętać było to, alby tutaj w sekcji header dla grupy nav-links,
zaznaczyć ten checkbox, tak aby ta grupa
pojawiała się przy załadowaniu strony, a dla grupy menu icon odznaczyć go,
tak aby pojawiała się ona dopiero tutaj, kiedy ten warunek zostanie spełniony.
Skoro to już mamy jasne, to przejdźmy teraz do strony
autentykacji.
Pierwsze co musimy zrobić to oczywiście
upgrade'ować naszą stronę do nowego silnika responsywnego.
A więc klikamy w responsive i przycisk upgrade responsive.
Musimy trochę poczekać, aż nasza strona zostanie z upgrade'owana.
Już wszystko jest tak, jak być powinno.
Możemy więc przejść do ustawień samej strony.
Możemy oczywiście w pierwszej kolejności zmienić tuaj tytuł.
A kolejno w zakładce layout ustalić odpowiedni typ i layout'u.
W tym przypadku jest to row.
Ja chcę mieć wycentrowane tutaj wszystkie elementy.
Szerokość 1280 pixeli.
Wysokość to oczywiście 900 pixeli.
Ja ustawiam to właśnie w takiej wartości, aby mi się wygodnie po prostu pracowało.
I teraz możemy przystąpić do dodawania poszczególnych grup.
To będzie grupa left.
Tutaj chcę ustawić
align to parent.
W tym przypadku.
Minimalna szerokość to 320 pixeli.
Maksymalnej nie chcemy.
Minimalna wysokość chwilowa może pozostać.
Oczywiście zajmiemy się tym później.
Kopiujemy i wklejamy.
Podajemy nazwę grupy right.
Tutaj znów minimalna szerokość to 320 pixeli, natomiast to, co chcę zrobić, to
rozciągnąć tę grupę na wysokość na całą dostępną przestrzeń.
Aby to zrobić wybieram tą opcje.
Jak widzisz teraz te grupy rozciągnęły nam się tutaj na całą tą wysokość okna przeglądarki.
A więc możemy przystąpić może w pierwszej kolejności tutaj do grupy right.
Będę chciał jej nadać tutaj jako tło obrazek.
Czyli wybieramy image.
I w tym przypadku będzie to ten obrazek.
Do środka chce wstawić kolejną grupę.
Nazwijmy ją może right-inner.
Chcę, aby ta grupa była wycentrowana, typ layout'u to column.
Odznaczam te wartości.
Nie chcę tutaj podawać minimalnej.
Nie chcę podawać też również maksymalnej.
Natomiast chcę ustawić tutaj wszędzie marginesy równe 40 pixeli.
Z każdej strony.
Teraz mogę wrócić do grupy right.
Usunąć tutaj minimalną wysokość.
I teraz przystąpić do dodawania elementów do tej grupy right-inner.
W pierwszej kolejności będzie to obrazek.
W moim przypadku jest to ten obrazek.
To co chcę zrobić to go tutaj oczywiście wycentrować, odznaczyć tą wartość.
Maksymalna szerokość to 480 pixeli.
Minimalnej nie potrzebuję.
Chcę natomiast zaznaczyć fixed ratio i dodatkowo jeszcze
ustawić tutaj marginesy z lewej i z prawej strony na 20 pixeli.
A pod spodem ma wartość równą 30 pixeli.
Następnie dodajemy tutaj tekst.
W tym przypadku jego style to nunito sans 700.
Przesuśmy sobie to okienko właściwości. Rozmiar fonta to 24 pixele, kolor to kolor biały.
Line spacing ustawmy może na 1.5.
To co chcę oczywiście jeszcze tutaj zrobić, to w
sekcji layout wycentrować sobie taki tekst, odznaczyć tą wartość,
nie chcę minimalnej szerokości, natomiast chcę ustawić maksymalną szerokość tym
razem równą nie 50 pixeli, ale 50% kontenera rodzica.
Czyli ten tekst nie zajmie nam więcej niż
połowę dostępnej tutaj przestrzeni, czyli całej tej grupy
right-inner.
Teraz musimy jeszcze tylko skopiować wartość tego tekstu.
I oczywiście zastosować tutaj bb-code.
Pozostaje nam tu jeszcze tylko odznaczyć
minimalną wysokość i już ten tekst jest gotowy.
Mogę go teraz oczywiście skopiować i wkleić pod spodem.
Skopiować sobie
ten tekst
i wkleić go tutaj w odpowiednie miejsce.
Tym razem w pierwszej kolejności wykorzystam sobie tutaj gotowy styl paragraf 200 middle.
Natomiast zmienie kolor fonta, tym razem na kolor biały.
Maksymalna szerokość to również 50%, a margines od góry to 20 pixeli i moja
prawa część strony wygląda dokładnie tak jak na layout'cie wzorcowym.
Możemy więc teraz przystąpić do działania
i utworzyć tutaj lewą część. W pierwszej kolejności
przesuniemy sobie panel właściwości.
Następnie zaznaczamy grupę left.
I jej tym razem będę chciał nadać jednolity kolor.
Wybieram więc
tutaj wpisuję wartość równą FAFBFF, czyli taki jasny kolor.
Następnie do środka wstawiam grupę,
i jak się domyślasz nazwałem, nadajemy nazwę left-inner.
Typ layout'u to column.
Chcę ją wyśrodkować, odznaczyć ten checkbox.
Nie potrzebuję minimalnej szerokości,
natomiast maksymalna w tym przypadku będzie równa 480 pixeli.
Dodatkowo margines z każdej strony to 40 pixeli.
Zerknijmy jeszcze tutaj
czy minimalne wysokości odpowiednio po zerowaliśmy, dla grupy, całej grupy right.
Jest to w porządku.
Dla grupy right-inner też mamy to wyzerowane, dla grupy left,
ok.
Dobra, czyli wracamy do grupy left-inner i zaczynamy dodawać treści do środka.
W pierwszej kolejności obrazek.
Będzie to moje logo.
Chcę ten element wyśrodkować.
Wymiary to 42 pixele, zachowane ratio, a margines pod spodem to 20 pixeli.
Kolejno mamy tam tekst.
Mogę wstawić tutaj jakiś dowolny tekst, nadać mu już gotowy styl, czyli H2_dark.
Zadbać oczywiście o usunięcie minimalnej wysokości oraz szerokości.
Odznaczamy tą opcję i oczywiście wstawiamy właściwy tekst.
Z wykorzystaniem znaczników bb-code.
Teraz taki tekst możemy skopiować, wkleić poniżej.
Tutaj rozpoczynam od gotowego stylu paragraf 300 middle.
Natomiast usuwam teraz ten styl i tylko zmieniam rozmiar
tutaj tego fonta grubszy, czyli na 700.
Kopiuje odpowiednie treści.
I nadaje margines na dole równe 20 pixeli.
Temu nagłówkomi również 20 pixeli na dole.
Teraz kolejnym elementem, który musimy dodać jest ten przycisk sign up with Google.
Tu chciałbym Ci pokazać pewną sztuczkę,
którą wykorzystuję, ponieważ gdybyśmy chcieli skorzystać z ikonki iconify,
to musielibyśmy wykorzystać tutaj tak naprawdę trzy różne elementy.
Przede wszystkim samą ikonkę, potem tekst, a dodatkowo obrać to jeszcze w grupę,
która służyłaby nam właśnie za to tło, czyli taki przycisk.
Ja pokażę Ci znacznie ciekawszy sposób.
Kopiuję sobie ten nagłówek i wklejam go poniżej.
Mogę wykorzystać już gotowy styl.
W moim przypadku jest to btn outline.
Odznaczam
tą opcja.
Chce usunąć ten styl. W pierwszej kolejności
rozmiar obramowania zmieniam na 1 pixel.
Przezroczystość tutaj ustawiamy na połowę.
Następnie line spacing zwiększamy do 2.
Teraz ten przycisk dużo lepiej wygląda.
Natomiast w jaki sposób dodać tutaj ikonkę?
Otóż wykorzystamy znów znane Ci już tutaj znaczniki bb-code,
natomiast nie będziemy tym razem centrować tego tekstu, w ogóle
zmienimy ten tekst na właściwy, czyli sign up with Google.
A pakiet ikon, z którego skorzystamy to domyślnie wbudowane ikonki font awsome.
Aby to zrobić w pierwszej kolejności musimy namierzyć odpowiednią ikonkę.
Wybieram więc tutaj element icon,
wstawiam gdziekolwiek na stronie i będę potrzebował ikonki Google'a, czyli Google
ja skorzystam z tej ikony, wybiorę ją tylko po to, aby sprawdzić jaką ona ma nazwę.
Jest to fa-google.
Ok, możemy sobie samo to Google skopiować, będzie nam potrzebne.
Usuwamy tą ikonę z tego miejsca.
Wracamy tu do przycisku.
Chcę wyśrodkować ten tekst.
I teraz, aby uzyskać tutaj taką samą
ikonkę, wystarczy, że wpiszę w znacznikach fa-google i domknę ten znacznik fa.
Jak widzisz otrzymałem odpowiednią ikonkę.
Teraz tylko muszę ją odsunąć od tekstu.
Czyli ustawiam tutaj po prostu 3 spację.
Teraz nasz przycisk jest już niemal gotowy.
Jedyne co musimy zrobić to tylko zmienić ten kolor tutaj na kolor dark.
No jak widzisz uzyskaliśmy bardzo fajny przycisk z ikonką, tak naprawdę
wykorzystując tylko jeden element tekstowy.
Nadajemy mu tutaj odpowiednie marginesy, to jest 40 pixeli od góry,
40 pixeli od dołu i sprawdźmy, jakie elementy jeszcze musimy tutaj dodać.
Mamy tutaj tą grupę z tym tekstem oraz liniami.
A więc nie przedłużając mogę skopiować
ten nagłówek, w pierwszej kolejności dodać tutaj nową grupę.
Typ layoutu to oczywiście row. Chcę tutaj
powiedzmy, że wycentorwać to elementy.
Odznaczamy tą wartość.
Nie potrzebujemy tutaj żadnej wartości minimalnej.
I aby teraz dodać linię.
Możemy wykorzystać np.
element shape, z którego do tej pory nie
korzystaliśmy, ale akurat w tym przypadku nam się przyda.
Wstawiam więc ten element.
To, co chcę tutaj zrobić, to przede
wszystkim nadać mu tutaj kolor o wartości middle.
Następnie odznaczyć tutaj
fixed-width, nie chce minimalnej, nie chce maksymalnej,
natomiast chce stałą wysokość równą 1 pixel.
Kolejno do grupy wstawiamy nasz skopiowany nagłówek.
Jeszcze to co musimy zrobić to zaznaczyć ten shape, aby to zrobić
oczywiście przejdźmy do drzewka elementów.
Zaznaczmy ten shape, copy,
wracamy tutaj do grupy, paste.
Teraz oczywiście musimy zadbać o to,
aby ten tekst znalazł się w odpowiednim miejscu, czyli tutaj na środku.
Nazwijmy tę grupę,
powiedzmy sign-wrapper.
Usuwamy minimalną wysokość.
Teraz oczywiście musimy podmienić ten tekst.
Kopiujemy.
Wstawiamy go w to miejsce.
Skorzystamy tutaj ze stylu paragraf 200 middle bold.
Usuwamy mu dolny marginesy.
I teraz jeszcze oczywiście musimy
wycentrować do shape, czyli wybrać tą opcję dla jednego shape'u i dla drugiego.
Jak widzisz uzyskaliśmy teraz efekt jaki nam chodzi.
Natomiast widzę, że to jednak nie jest kolor middle.
Teraz ustawmy więc tutaj odpowiednią wartość.
W moim przypadku jest to E6E8F0,
taki jasno szary kolor.
I to samo musimy zrobić tutaj dla tej drugiej linii podmienić te kolory.
Teraz wygląda to już dużo lepiej.
Dla całej tej grupy nadajemy margines
dolny, czyli grupy sign-wrapper, margines dolny równe 40 pixeli.
Nasz layout wygląda już dużo lepiej.
Pozostaje nam jeszcze tutaj wstawienie odpowiednich pól input.
Wstawmy więc jedno ja mam już wcześniej przygotowany taki styl.
W tym przypadku chcę, żeby to pole miało
wysokość powiedzmy 55 pixeli było takie odpowiednio tutaj większe.
Odznaczam to, nie chcę minimalnej szerokości.
Wracam do zakładki appearance.
Odpinam ten styl, ponieważ nie potrzebuję tutaj background style.
Na chwilę obecną jest mi tutaj niepotrzebny.
Obramowanie zostaje takie jak powinno być
tutaj wszystkie te ustawienia też są w porządku.
Ja natomiast tutaj chcę zadbać jeszcze o to, aby ten,
to pole input odpowiednio zachowywało się zarówno wtedy, kiedy użytkownik najedź
na nie kursorem myszki oraz kiedy kliknie i zacznie wpisywać tam jakąś wartość.
Przechodzimy do zakładki conditional.
Oczywiście będąc tutaj w tym polu input nazwijmy je,
w naszym przypadku będzie to full name.
To będzie pierwsze pole,
które będzie musiał wypełnić użytkownik przy rejestracji.
Przechodzimy do conditional'i i kiedy użytkownik najedzie, czyli is hovered
to chcę zmienić w tym przypadku border color na znany Ci już kolor middle.
Natomiast kiedy użytkownik zacznie coś w
tym polu wpisywać, czyli wybieramy tym razem is focused, chce zmienić kolor obramowania
na kolor primary oraz kolor tła, czyli background style
ustawiamy tym razem na flat color i musimy jeszcze dodać jego kolor, beckground color
to będzie też kolor primary, ale o wartości przezroczystości równej 10%.
Sprawdźmy jeszcze tylko, czy mamy tutaj odpowiednie tranzycje.
Wydaje mi się, że nie, nie mamy, a więc background style i border color
oczywiście w obu przypadkach 250 milisekund.
Teraz powinno to już wyglądać tak jak powinno.
Klikam więc preview.
I sprawdźmy, najeżdżam,
kolor obramowania mi się zmienia. Klikam
jak widzisz tutaj mam tło oraz odpowiedni kolor obramowania.
Wróćmy więc do edytora.
Skopiujmy sobie to pole.
W tym przypadku będzie to pole e-mail.
Pozostawiam te same właściwości.
Daję tutaj tylko margines od góry równy 40 pixeli.
Znów zaznaczam to pole, kopiuję, wstawiam.
Tym razem będzie to input password o takich samych tutaj właściwościach.
Natomiast to co musimy zrobić to ustawić odpowiedni typ takiego pola input.
W tym miejscu definiujemy content format,
czyli jakiego typu pole input ma tutaj mieć zastosowanie.
W tym przypadku jest to text.
Użytkownik po prostu będzie wpisywał tutaj swoje imię i nazwisko.
Tu potrzebujemy pola typu e-mail,
a więc wybieram z listy e-mail, a tu z kolei jak się domyślasz
wybieram password, dzięki czemu jak użytkownik zacznie tutaj coś wpisywać to
nie będzie widać co piszę, tylko będą pojawić się takie kropeczki albo
gwiazdeczki, tak żeby ta wartość była tutaj ukryta dla innych użytkowników.
Na koniec pozostanie nam jeszcze dodanie tutaj tylko przycisku.
Ustalamy go oczywiście na sam dół.
Zmieniamy tutaj styl na
primary, pozbywamy się ikonki.
Tekst to będzie po prostu sign up.
Usuwam ten styl.
Ustawiam line spacing na 2 i centruje tekst.
Teraz wygląda to tak jak powinno.
Dodajmy tutaj jeszcze odpowiednie palceholder'y.
W tym przypadku będzie to,
ustawiamy to w tym miejscu w sekcji palceholder. Będzie to full name,
tutaj e-mail.
A tutaj password.
Nasz formularz jest już niemal gotowy.
Brakuje nam tu jeszcze tylko tych dwóch tekstów.
Znów znajdują się one obok siebie, a więc
będziemy potrzebować dodatkowej grupy, która by je objęła.
Mogę więc tutaj ustawić jeszcze grupę.
Nazwijmy je może,
tak żebyśmy wiedzieli mniej więcej, co tam się będzie znajdowało.
Row odznaczamy fixed-width.
Zostawmy to chwilowo na 50 pixeli i wstawmy tylko odpowiednie teksty.
Mogę skopiować ten tekst i wstawić go tutaj do tej grupy.
Oczywiście zadbać o to, żeby tym razem mieć tutaj fit width to content.
I odpowiedni tekst, który sobie skopiujemy.
Nie potrzebujemy wycentrowania, więc możemy wstawić sam tekst.
W tym przypadku będzie to paragraf 200
dark.
Kolejno kopiuję i wstawiam ten tekst jeszcze raz.
Mamy tutaj tekst login.
Tym razem odpinamy ten styl.
Zmieniamy kolor na primary.
Odsuwamy go jeszcze tutaj o 10 pixeli.
Wygląda to coraz lepiej.
Potrzebujemy jeszcze tylko podkreślenia tekstu.
Teraz dla całej grupy authentication text możemy usunąć
minimalną wysokość. I sprawdźmy jeszcze tutaj tą grupę
left-inner, jej również usuwamy minimalną wysokość i przejdźmy do podglądu.
Pozbądźmy się tego debuggera na dole.
Jak widzisz teraz nasza strona wygląda dokładnie tak, jak powinna.
A więc nasza praca jest skończona.
A w kolejnej lekcji zajmiemy się tworzeniem odpowiednich workflows.