Bubble: Wprowadzenie do silnika responsywnego

0:00Cześć. Witam Cię w kolejnej lekcji, w której tym

0:02razem skupimy się na zakładce design i zaczniemy pierwsze kroki do tego, aby

0:06zacząć projektować naszą stronę główną w aplikacji.

0:09Zanim jednak do tego przejdziemy, chciałbym poruszyć dwie ważne kwestie.

0:13Przede wszystkim przez cały kurs będziemy pracować z nowym responsywny silnikiem,

0:18jaki został dodany do Bubble pod koniec 2021 roku.

0:23Jest to bardzo oczekiwana aktualizacja przez bardzo wielu użytkowników, ponieważ

0:28teraz będziemy mogli tworzyć nasze aplikacje znacznie prościej,

0:31a dodatkowo będą one w pełni responsywne, czyli będą dobrze wyglądać zarówno na

0:35dużych ekranach desktopowych, jak i na małych ekranach telefonów komórkowych.

0:40Ponieważ na moment nagrywania tego kursu ten silnik responsywny nadal jest w wersji

0:44beta, będziemy musieli go uruchomić dla każdej z naszych stron osobno.

0:48Pokażę Ci dokładnie jak to zrobić.

0:50Zanim jednak do tej opcji przejdziemy, chciałbym odpowiedzieć na jedno bardzo

0:54ważne pytanie. Czy skoro jest to dalej wersja beta, to powinniśmy ją stosować?

0:58Otóż tak, ponieważ Bubble dba o to, aby to wszystko była kompatybilnie wsteczna.

1:03Zanim jednak przystąpimy do pracy,

1:05to odpowiedzmy sobie na jedno bardzo ważne pytanie.

1:07Skoro ten silnik responsywny nadal jest w

1:09wersji beta, to czy powinniśmy z niego korzystać w naszych aplikacjach?

1:13Odpowiedz jest prosta i brzmi tak.

1:15Zdecydowanie powinniśmy z niego korzystać, ponieważ Bubble zawsze dba o to,

1:20aby wszystko było kompatybilne wstecz, w związku z czym

1:24będzie po prostu dokładał nowe funkcjonalności, a ten istniejące tutaj

1:28wersja silnika będzie po prostu aktualizowana.

1:31Natomiast nie powinno nam się tutaj nic

1:32wysypać i wszystko powinno działać dokładnie tak jak tutaj to poustawiamy.

1:38Dodatkowo chciałbym też zwrócić Twoją

1:40uwagę na jedną bardzo ważną kwestię, może nie do końca przyjemną.

1:44Jeżeli pamiętasz.

1:45W poprzednich akcjach pokazywałem Ci, że mamy dostęp do Bubble Marketplace, gdzie

1:50możemy kupić gotowe pluginy albo nawet całe szablony.

1:53Tak jak tutaj

1:54mamy właśnie taki szablon przygotowany przez twórców Bubble.

1:57Niestety, przynajmniej na chwilę obecną

1:59większość z nich jest niedostosowana do nowego silnika.

2:03O ile sam edytor już tutaj działa

2:04poprawnie i możemy wykorzystywać wszystkie te elementy,

2:07to niestety pluginy przygotowane zarówno przez sam zespół Bubble'a,

2:11jak i zewnętrznych twórców, jednak nie do końca współpracują z tym nowym silnikiem.

2:16Czasami da się to obejść naprawdę bardzo

2:18prosty sposób poprzez kilka prostych linijek JavaScript'u albo CSS'a.

2:23Natomiast czasami będziemy musieli

2:25poczekać, aż twórcy takiego pluginu odpowiednio go zaktualizują.

2:30Podobnie będzie to miało miejsce również tutaj z szablonami.

2:33Tak więc czy warto z nich teraz korzystać?

2:37Moim zdaniem nie do końca, ponieważ

2:40teoretycznie da się tutaj taki szablon napisany w starym

2:43silniku przekształcić do silnika responsywnego.

2:46Jednak z doświadczenia wiem, że ten efekt jest daleki od ideału i czasami po prostu

2:51lepiej stworzyć taką stronę od podstaw samemu.

2:54Skoro już to wiemy, to w takim razie zaraz

2:55przystąpimy do odpowiednich tutaj ustawień naszej strony głównej, tak

2:59abyśmy mogli prosto tworzyć naszą aplikację.

3:03Zanim to jednak zrobimy, chciałbym tutaj posprzątać w edytorze.

3:07Jak widzisz, mamy tutaj ten szablon przygotowany przez Bubble'a.

3:11Możemy go sobie usunąć, ponieważ nie będziemy z niego korzystać.

3:14I tutaj pokażę Ci w jaki sposób możemy pozbyć się elementów.

3:17Wspominałem o tym już wcześniej w poprzedniej lekcji.

3:20Wystarczy, że najadę na jakiś element np.

3:22tutaj na przycisk i nacisnę klawisz grid.

3:26Jak widzisz element został usunięty.

3:29Tą samą operację mogę tutaj wykonać tutaj najeżdżając np.

3:32na ten tekst, klikając prawym przyciskiem myszy i wybierając tutaj delete.

3:38Jednak taka operacja jest bardzo czasochłonna i dodatkowo gdybyśmy zjechali

3:42tutaj do tej sekcji, to jak widzisz mamy tutaj jeden element.

3:45Świadczy o tym takie niebieskie

3:47obramowanie, które z kolei znajduje się tutaj w tym elemencie.

3:51A ten z kolei znajduje się gdzieś jeszcze tutaj.

3:53Tak więc, aby dotrzeć do takich elementów zewnętrznych, bo czasami trudno je będzie

3:57tutaj wyklikać, możemy skorzystać z tzw. elements tree.

4:01Wystarczy, że najadę na jakiś element np.

4:03na ten tekst kliknę prawy przycisk myszy

4:06i wybiorę tutaj tą opcję reveal in elements tree.

4:10W ten sposób rozwinie mi się tutaj drzewko

4:12ze wszystkimi elementami jakie znajdziemy na naszej stronie.

4:15Jak widzisz mam tutaj informacje, ten tekst UI Elements, czyli właśnie o tym elemencie.

4:19On z kolei znajduje się tutaj w elemencie rodzica i UI Elements, czyli jak widzisz jak

4:23zaznaczę to jest cały taki kontener obejmujący.

4:27Aby tutaj usunąć te elementy wystarczy, że

4:29na tej liście kliknę prawym przyciskiem myszy i wybiorę delete.

4:34Jak widzisz usunąłem tutaj całą taką sekcję.

4:37Dodatkowo mamy tutaj taką opcję

4:38only show hideable,

4:41która będzie nam pokazywała tylko te elementy, które normalnie są ukryte.

4:44Jak widisz mamy tutaj taki sigup login.

4:47Jeżeli kliknąłbym tutaj w ikonkę oczka to ten element nam się pojawi.

4:53Jeżeli znowu ją kliknę. To go ukryjemy.

4:56Signup i ogólnie popup'y będą właśnie takimi elementami, które są domyślnie ukryte.

5:01Będziemy je pokazywać poprzez zastosowanie

5:04workflow, o czym porozmawiamy sobie nieco później.

5:07Natomiast jeżeli chciałbyś wyświetlić tylko te elementy, które domyślnie są

5:10poukrywane na Twojej stronie, wystarczy, że zaznaczamy tą opcję.

5:14Jak widzisz teraz mamy tutaj informację właśnie, że takim elementem jest tu

5:18signup/login popup.

5:22Odznacznym sobie to i pousuwajmy pozostałe elementy.

5:41Ok, pozbyliśmy się już tutaj niemal wszystkich elementów.

5:44Jedynym elementem, który jest tutaj dostępny, to jest nasza właśnie

5:48strona i teraz możemy ją sobie przekształcić właśnie na nowy silnik

5:52responsywny, aby odpowiednio ją dostosować do naszych potrzeb.

5:55By to zrobić wystarczy, że kliknę tutaj tą zakładkę responsive.

6:00I teraz muszę wybrać tutaj tą opcję upgrade

6:03responsive. Bubble to oczywiście wyświetla mi odpowiednią informację.

6:08Dodatkowo tutaj możemy zaznaczyć tą opcje.

6:11Wtedy taka kopia strony zostanie stworzona.

6:15Będziemy mieć kopię w tym starym silniku,

6:17a dodatkowo zostanie utworzona nowa z silnikiem responsywnym.

6:20A nie chcę tworzyć takiej kopii.

6:23Nie będzie mi ona potrzebna, ponieważ nic na tej stronie nie mamy.

6:26Mogę więc odznaczyć tą opcję i kliknąć update.

6:29Muszę chwilę poczekać, żeby nasza strona została zamieniona na nowy silnik

6:32responsywny.

6:37No tutaj

6:39dodatkowo możesz jeszcze sobie obejrzeć filmik, który tak po części wyjaśnia jak ten

6:43nowy silnik działa i na czym jest on w zasadzie oparty.

6:46Na razie nas to nie interesuje, możemy to zamknąć.

6:49Nie chcemy upgrade'ować naszej aplikacji do planu płatnego

6:52i już w zasadzie możemy korzystać z dobrodziejstw nowego silnika.

6:58Zanim to zrobimy, to chciałbym jeszcze wyjaśnić jak on w zasadzie działa,

7:01ponieważ pod spodem nowy silnik responsywny oparty jest o CSS Flex Box.

7:06Jeżeli do tej pory o tym nie słyszałeś, to

7:08serdecznie zapraszam Cię do kursów na eduweb, na przykład od Wojtka

7:12Połowniaka, który dokładnie to wszystko tłumaczy.

7:14Ja nie będę się na tym skupiał, ponieważ

7:17z flex box'a tutaj takiego w Bubble będziemy korzystać niemal na każdym kroku.

7:21To dokładnie pokaże Ci jak to tutaj zrobić

7:23i pod koniec kursu będziesz wiedział jak sobie to wykorzystać w

7:27Bubble bez zastanowienia i spokojnie stosować w swoich własnych aplikacjach.

7:31Przejdźmy więc tutaj do ustawień i samej strony.

7:33Aby to zrobić muszę

7:35właśnie tutaj na nią najechać, tak aby mi się pojawiły, jak widzisz tu niebieskie obramowania,

7:39Kliknąć lewym przyciskiem myszy dwa razy i pojawia mi się okienko właściwości.

7:43O nim porozmawiamy dokładnie nieco później.

7:46Na chwilę obecną

7:47to co musimy tutaj ustawić to page title, czyli tytuł, który będzie się pojawiał

7:52jeżeli byśmy przeszli do podglądu takiej strony.

7:58Tak jak widzisz tutaj pojawia nam się page title. Na chwilę obecną jest to Bubble

8:02No-code apps, zmieńmy to sobie na

8:07naszą stronę.

8:07Nasza aplikacja nosi nazwę Projecto, a to będzie po prostu

8:13strona home.

8:16Tutaj dodatkowo mamy jeszcze jakiś nadany kolor.

8:20Dla naszej strony

8:21również jest to kolor FAFAFA, ja zmienię go po prostu na kolor biały.

8:26Ponieważ właśnie nasza strona ma być

8:29biała, a dodatkowo jeszcze tutaj tylko przejdę do ustawień.

8:33Wybiorę na chwilę obecną column.

8:35O tym też zaraz porozmawiamy sobie dokładniej.

8:37Odpowiednio to tutaj ustawie.

8:44Ok. I teraz tak.

8:46Szerokość naszej strony, czyli tą, którą

8:48będziemy widzieć tutaj w przeglądarce ma tutaj teraz wartość 1280 pixeli.

8:54Dlaczego akurat taką wartość ustawiłem?

8:57Ponieważ idealnie dzieli się ona przez 320.

9:00Ponieważ będziemy tworzyć naszą stronę główną tak, aby wyświetlała się dobrze

9:05zarówno na telefonach komórkowych, jak i na desktopie.

9:08To najmniejszą szerokość, na jaką taka

9:09strona się może skurczyć będzie właśnie 320.

9:13A ponieważ jest to po prostu wielokrotność 320, będzie nam łatwo to wszystko

9:17podzielić, o czym z resztą przekonasz się w samym kursie.

9:20Na chwilę obecną musisz mi po prostu uwierzyć na słowo,

9:22że taką wartość musimy tutaj zdefiniować, aby wszystko działało jak trzeba.

9:27Minimalna wysokość to po prostu wysokość.

9:29Tutaj tego okna możemy to też również sobie zmniejszyć.

9:32Jak widzisz jest to odpowiednio dostosowane.

9:34Teraz nasza strona ma tutaj wysokość 900 pixeli.

9:38Ja wrócę do 1080, abyśmy mieli

9:40wystarczająco dużo miejsca do pracy w edytorze.

9:44I teraz pozostaje nam tylko jeszcze jedna opcja, czyli dodanie siatki,

9:48dzięki której rozmieszczanie elementów będzie znacznie prostsze.

9:52Aby to zrobić zamykam to okienko właściwości.

9:55Przechodzę tutaj do created borders.

9:58I tak przede wszystkim będziemy musieli tutaj ustawić.

10:02Siatkę, a więc chcę pokazać siatkę

10:06i dodatkowo zastosuj proszę te ustawienia, które ja tutaj wpiszę.

10:11Tu ustawimy 20.

10:15Tutaj kolor 003CFF.

10:21Dodatkowo jego wartość tutaj odpowiednio sobie zmniejszymy.

10:24Wystarczy, że kliknę tutaj to

10:26takie kwadracik z kolorem i teraz tym suwakiem mogę zmniejszyć przezroczystość.

10:32Ustawmy to tylko tak, żeby była ledwo widoczne.

10:38Chcemy się pozbyć gutter'ów, czyli odstępów pomiędzy taką siatką i tutaj zaznaczamy

10:44tą opcję tak aby elementy

10:46przylegały nam do krawędzi innych elementów oraz do siatki.

10:51Dodatkowo zostawiamy tą opcję, która po najechaniu na element będzie nam

10:55pokazywała jego położenie względem innych elementów.

10:58To zresztą zobaczymy jeszcze później w praktyce.

11:02To są wszystkie ustawienia, jakie nam

11:03tutaj będą potrzebne do tego, aby rozpocząć pracę.

11:07Nasza strona indeksowa

11:09została tutaj odpowiednio ustawiona w edytorze, a my w następnej lekcji

11:13zajmiemy się już właśnie tworzeniem poszczególnych elementów.