Aplikacje no-code z Bubble: Podstawowa struktura strony wyszukiwania

0:00Poprzedniej lekcji dowiedziałeś się czym

0:02są workflow oraz jak je wykorzystać w praktyce.

0:05Do tego tematu jeszcze będziemy wracać i jeszcze będziemy z workflow korzystać.

0:09Wykorzystamy również w praktyce element Current User,

0:13czyli będziemy wyświetlać na stronie nie tylko adresy e-mail, co pokazałem Ci w

0:16poprzedniej lekcji, ale również inne dane użytkownika.

0:19A gdy będziemy budować dashboard, pokażę

0:22Ci w jaki sposób rozróżnić różne typy konta użytkowników np.

0:26czy będzie to konto typu gościa czy też hosta.

0:29Jeżeli po ostatniej lekcji zastanawiasz

0:30się, czy za pomocą workflow możemy obsłużyć opcję przypomnienia hasła

0:34użytkownikowi, to odpowiedź brzmi oczywiście tak.

0:37Pablo posiada odpowiednią akcje, która to obsługuje.

0:41Natomiast jej działanie jest moim zdaniem bardzo kiepskie, ponieważ wysyła maila,

0:45który wygląda tragicznie i moim zdaniem tak naprawdę wygląda jak taki scam, a nie

0:50coś co powinien otrzymać użytkownik z Twojego serwisu.

0:53Dlatego też ulepszamy sobie tą opcję w Sprint nr 2, a chwilowo pozostawiamy

0:58przypomnienie hasła jako taką samą malowaną stronę i nic więcej.

1:02Przejdźmy jednak do tematu, który mamy

1:04zająć się w tej lekcji, a więc za modelowaniem strony

1:07wyszukiwania, którą właśnie widzisz na ekranie.

1:09Jest to strona z wynikami wyszukiwania, które otrzyma użytkownik, kiedy w

1:13przyszłości wpisze odpowiednie wartości na naszej stronie głównej w tym polu Search,

1:17a my przekieruje my go tutaj i wyświetlimy to, czego potrzebuje.

1:21A więc nie przedłużając, przystąpimy do

1:23przynajmniej zaprojektowania podstawowej struktury takiej strony.

1:26A więc wracamy do edytora.

1:31I utwórzmy sobie nową stronę.

1:34O nazwie Search.

1:36Nie chcę niczego klonować.

1:40Klikam Create.

1:42I nadajemy tutaj odpowiednie ustawienia. Czyli np.

1:46rosół.

1:481440 na 900 pikseli.

1:54I zacznijmy dodawać elementy.

1:56Pierwszym będzie oczywiście nasza grupa Page Wrapper.

2:07Tym przypadku będzie ona miała układ typu kolumnowy.

2:11Pozbywam się minimalnej szerokości, nie dodaję żadnej maksymalnej.

2:16Minimalną wysokość możemy ustawić chwilowo na 280 pikseli.

2:21Następnie będę chciał dodać tutaj.

2:24Oczywiście i footer.

2:26A więc dodajmy sobie nowy bar i kolejno footer.

2:32I sprawdźmy jak tam to tutaj wyskakiwało.

2:36Na samej górze będzie oczywiście bar.

2:39Tu nie musimy nic zmieniać.

2:41Kolejno pod spodem chcemy mieć Page wrapper.

2:46Dla niego. Musimy oczywiście ustalić tutaj margines

2:50od góry równe 97 pikseli, czyli 90 pikseli, które ma sam

2:55+ 1 piksela obramowania, które posiada, czyli 91 pikseli.

2:59Zmieńmy jeszcze tylko.

3:01Typ strony na kolumn. O właśnie.

3:04I teraz przesuniemy sobie tutaj page wrapper na środek.

3:09I oczywiście na samym dole będziemy mieć nasz footer.

3:12Tutaj usuńmy tą minimalną wysokość i nie musimy się tym przejmować.

3:16I w zasadzie taka podstawowa struktura

3:18jest już gotowa, a my możemy tutaj przystąpić do edycji rapera.

3:24Dodajemy tutaj kolejną grupę.

3:27Będzie to grupa zawierająca.

3:30Tutaj te kategorie oraz button otwierający nam filtry.

3:34Na razie tylko same darujmy sobie samą grupę.

3:36A więc będzie to kategorii z grup.

3:45Typ roku.

3:47Odznaczamy minimalną szerokość.

3:50Minimalną wysokość ustawmy na powiedzmy 180 pikseli.

3:54Chwilowo dodajmy tutaj tylko padding i 32 piksele z każdej strony.

4:01I na razie to wszystko, co tutaj potrzebujemy.

4:05Kolejno dodajemy następną grupę.

4:10Tylko chcę ją wyciągnąć poza kategorie.

4:13Najpierw kategorie, potem grupa o nazwie Content Group.

4:17Jak widzisz tutaj nie mamy żadnego

4:20kontenera, który wyśrodkować by nam treści.

4:22Wszystko jest rozciągnięte na całą

4:24szerokość ekranu, a więc musimy to sobie odpowiednio zamalować na naszej stronie.

4:29Dlatego też nigdzie nie stosuję kontenera.

4:34A więc mamy Content Group.

4:39Tu będziemy mieć układ typu ROW.

4:43Pozbywamy się minimalnej szerokości.

4:47Chwilowo zostawiamy to w ten sposób.

4:50I dodaje tu następną grupę.

4:56Mamy tutaj układ typu kolumn.

5:01Padding.

5:02Z lewej i z prawej strony ustawione na 32 piksele.

5:07Pozbywamy się.

5:10Minimalnej szerokości.

5:12Nazwa tej grupy to po prostu content Stop.

5:21I możemy sobie tutaj skopiować i wkleić

5:23elementy z jakich będziemy korzystać, ale dajemy tutaj jeszcze Deep Space Link.

5:29Szesnaście pikseli.

5:32I teraz tak przejdźmy na stronę.

5:35Password Recovery chce sobie skopiować tą grupę back.

5:43I wkleić ją do miejsca.

5:48Następnie przechodzimy na stronę index ową.

5:56I tutaj chcę sobie skopiować całą tą grupę.

6:00Czyli z nagłówkiem oraz tekstem.

6:05Przechodzimy na stronę search i wklejamy ją tutaj.

6:10To co musimy zrobić to jeszcze tylko pozbyć się tutaj marginesu dolnego.

6:17To będzie content.

6:21Harding.

6:23A w zasadzie header powiedzmy.

6:26Tak treści chcę przesunąć do lewej krawędzi.

6:32Pozbyć się tutaj maksymalnej szerokości dla tej grupy.

6:37I teraz tak ten nagłówek muszę tutaj

6:39przesunąć do lewej, ten tekst też przesunąć do lewej.

6:44I oczywiście zmienić wartości.

6:52To będzie taki tekst.

6:57A w tym przypadku.

7:00Taki.

7:05Mogę się pozbyć minimalnej wysokości.

7:16I chyba tutaj jest już wszystko, czego potrzebujemy.

7:19Jeszcze tylko sprawdźmy sobie tutaj tą grupę content.

7:23OK.

7:23Tutaj będę chciał nadać Gab Space Ink równy 24 piksele dla ROW.

7:31A tu w środku mamy content top czyli tą grupę ok i dajemy następną grupę.

7:44Przesuniemy ją niżej.

7:47I zerknijmy. OK.

7:50Content.

7:51To ma być też column, czyli content group.

7:54Też mamy układ typu kolumn.

7:57A więc jeszcze raz przejdźmy Page wrapper kolumn kategorii z group.

8:02Na razie zostawiamy na ROW Content Group na kolumn Row Gap 24 pixele.

8:08Tu mamy Content Top Group.

8:12Kolumn 16 i padding z lewej i z prawej strony po 32 piksele.

8:18I teraz kolejna grupa to będzie Content Inner Group.

8:27Tutaj będziemy mieć rolę.

8:30Odznaczamy tą opcję i teraz dodaję tutaj dwie grupy.

8:40To będzie content.

8:43Left Group.

8:45Ustawione na kolumn.

8:49Chcę tutaj nadać maksymalną szerokość równą 60%.

8:55Pozbyć się minimalnej.

8:57Jak widzisz zajmuję na teraz tylko 60%

9:00dostępnej przestrzeni wewnątrz elementu rodzica.

9:04I teraz dodajemy tutaj kolejną grupę.

9:07Tym razem będzie to.

9:09Content.

9:11Wait.

9:15Ustawione na all in to parent.

9:19Maksymalna szerokość 40%.

9:24Instalujemy tutaj minimalną

9:28szerokość, a minimalną wysokość w tym przypadku będę chciał ustawić na 100%.

9:36Teraz zadbajmy o tą grupę Content Level Group, a dajmy tutaj przede wszystkim

9:41padding z lewej i z prawej strony równe 32 piksele.

9:45Kolejno ustawmy tutaj Caps Passing na 32 piksele.

9:54I to co chcę zrobić to wstawić tutaj listę, bo jak widzisz mamy tutaj listę

9:57wyników, a więc możemy wykorzystać po prostu standardową Reporting Group.

10:03Wykorzystać kartę z listingu, którą sobie wcześniej

10:06przygotowaliśmy i wyświetlić odpowiednią ilość elementów.

10:10Oczywiście set mamy już gotowe, więc nie musimy go wdrażać ponownie.

10:14A więc wracamy do edytora.

10:18Dodajemy Scripting Group.

10:21To będzie.

10:24Results RG.

10:32Nie potrzebujemy minimalnej szerokości.

10:36A potrzebujemy typeof content ustawione na oz listing z data source all oz Listing.

10:44To co chcę tutaj wyświetlić to 3 rzędy oraz 3 kolumny.

10:50Pozbyć się separatora.

10:55I zerknijmy, jak to teraz będzie wyglądało.

10:58Oczywiście musimy tutaj jeszcze wstawić samą kartę, czyli listing kart Era.

11:05I oczywiście przekazać tutaj.

11:08Current sales as listing.

11:11Przejdźmy do podglądu.

11:12Odświeżamy.

11:15Zobaczmy jak to się prezentuje.

11:18Oczywiście pewnie będziemy musieli przejść

11:20do strony SERP, czyli możemy ręcznie wpisać w pasku adresu.

11:27OK, mamy tutaj za modelowaniu naszą listę.

11:31Tutaj dodamy komponent map, ale tym się zajmiemy troszkę później.

11:37Podamy tutaj też odpowiednie kategorie.

11:40Natomiast to są tematy do wdrożenia w przyszłych lekcjach.

11:45Wróćmy jeszcze na chwilę tylko do edytora,

11:46bo chciałbym porozmawiać o jednej bardzo ważnej rzeczy dotyczącej Reporting Group.

11:52Jak widzisz, przekazujemy tutaj OL

11:54listing, czyli wszystkie elementy, jakie znajdują się tutaj w tym pierwszym secie.

11:59Najczęściej będziemy to jednak przekazywać głównie elementy z naszej bazy danych, ale

12:02nie ważne czy to jest baza danych, czy to jest option set.

12:05Musisz pamiętać o jednym kiedy tworzymy nasz serwis, czyli to co

12:08robimy teraz Data source, czyli liczba tych elementów jest stosunkowo niewielka.

12:13O ile dobrze pamiętam, mamy chyba tylko 9 tych listingu.

12:17Natomiast jeżeli wdrożyć taki serwis

12:20w przyszłości już tak, żeby użytkownicy z niego korzystali,

12:23to ten zasób danych bardzo szybko wzrośnie i może się okazać, że np.

12:29listing, które będziemy wyświetlać to nie będzie 9 elementów w bazie, ale np.

12:33900.

12:34I tu nie ma z tym problemu, ponieważ jasno

12:36określiliśmy Bobowi, ile elementów naraz na stronie chcemy wyświetlić.

12:40Czyli trzy rzędy, trzy kolumny, czyli dziewięć elementów na naraz.

12:46Będzie natomiast na tyle sprytne, że nie pobierze sobie naraz wszystkich 900

12:50elementów z naszej bazy danych, ale tylko pierwsze dziewięć,

12:53bo tyle mamy wyświetlić oraz drugie dziewięć pod spodem.

12:56Aby w momencie, kiedy przełączasz się na

12:58kolejną stronę, móc jak najszybciej załadować te elementy.

13:01Natomiast jak pamiętasz, w momencie kiedy

13:04wyświetlimy artykuły na bloga, oznaczyliśmy tutaj sobie liczbę kolumn.

13:08A więc Babel nie wie, ile tak naprawdę elementów ma wyświetlać.

13:11Mówimy mu, że tam był jeden rząd i tyle kolumn, ile masz elementów.

13:16Więc gdybyś miał 900 elementów w bazie, to

13:18Babel niestety pobierze i naraz wyświetli 900 takich artykułów na bloga,

13:23co sprawi, że Twoja strona najprawdopodobniej się skasuje, ponieważ

13:27nie będzie w stanie wyświetlić naraz tylu elementów.

13:30Musisz o tym pamiętać

13:31i wtedy, jeżeli chcesz rzeczywiście tutaj odznaczyć tę opcję, czyli np.

13:36wyświetlać dowolną ilość kolumn. To tutaj.

13:40W momencie kiedy pobieramy sobie ten data sources musimy dobrać opcję.

13:47Items until, czyli maksymalną liczbę elementów, które chcesz naraz wyświetlić.

13:53Na przykład powiedzmy, że z całych 900 chcę wyświetlić powiedzmy 12, więc

13:58musiałbym tutaj wybrać Items until 12 i wtedy Babel rzeczywiście wyświetli mi

14:02tylko 12, bo tyle sobie pobrał, bo tyle mu wskazałem.

14:06Natomiast pamiętaj, że to jest tylko i wyłącznie wtedy na przyszłość,

14:09kiedy rzeczywiście będziesz miał tych elementów bardzo dużo.

14:12Ja Cie po prostu przestrzegam, żebyś sobie o tym pamiętał.

14:15Jeżeli jasno zaznaczasz ile jest kolumn, ile rzędów to nie musisz się przejmować

14:21opcją items until, bo Babel i tak wyświetli tylko tyle ile wskazałeś.

14:25Ale jeżeli odznaczyć którąś z tych opcji,

14:28to już wtedy musisz sam zadbać o to, żeby nie wyświetlić na stronie naraz np.

14:32900, 1000 czy 10 000 rekordów, bo to po prostu zawiesi Twój serwis.

14:38To taka rada na przyszłość.

14:40A my zadbajmy jeszcze tutaj o to, aby

14:42dodać, a w zasadzie za modelować po prostu.

14:47Nację, którą mamy.

14:48Jak pamiętasz tutaj na elemencie wzorcowym, czyli te elementy.

14:53A więc nie przedłużają. Wróćmy do edytora.

14:57Dodajmy tutaj kolejną grupę.

15:01Zerknijmy, gdzie nam wskoczyła.

15:06Powinna być content Left jest

15:09tylko podgrupą result, czyli pod tą listą Scripting group.

15:15To będzie.

15:17Tutaj pagina już on group.

15:24Layout ustawiony oczywiście na Real.

15:28Chcę w centrowanie elementy w środku pozbyć się minimalnej szerokości.

15:34Minimalną wysokość ustawić na 80.

15:36Zaraz to poprawimy.

15:38I dodać tutaj.

15:41Pierwszą grupę.

15:43A w zasadzie czy potrzebujemy grupy?

15:45Chyba nawet nie, bo możemy dodać po prostu tekst.

15:48Chociaż chyba z grupą będzie lepiej.

15:49Zostawmy po prostu grupę.

15:53Nadajemy ją nazwę, nadajemy jej nazwę pagina item.

16:07Ustawmy. Alain to Parent.

16:1232 na 32 piksele.

16:19Pełne zaokrąglenie, czyli jakaś duża wartość.

16:22Background style ustawmy tutaj na flat color.

16:28To będzie kolor secondary.

16:32I do środka wstawiamy jeszcze tekst.

16:37Będzie to jedynka.

16:41Wybierzmy tutaj Body SM 14 500.

16:46Na In Space Ring ustaw na 1.

16:50I kolor zmieńmy na kolor.

16:54Białe.

16:55To, co chcę zrobić jeszcze, to centrowanie.

16:58Ten tekst.

16:58Na razie nic tu nie widać, ale nie przejmuj się, ustawiamy go na środku.

17:04Pozbywamy się minimalnej szerokości fito content, pozbywamy się minimalnej

17:11wysokości i już Tutaj mamy właściwy element.

17:15To co chcę teraz zrobić, to powielić tą grupę jeszcze powiedzmy.

17:21Tutaj ze cztery razy, a w zasadzie może nie tak powiem iloraz.

17:26I ustalmy tutaj troszkę inne style.

17:29Zmieńmy ten kolor tutaj background tu na kolor biały.

17:36A kolor tego tekstu w środku na kolor secondary i zmieńmy wartość na 2.

17:44I dopiero taką grupę.

17:47Powiedzmy sobie.

17:49A jeszcze powiedz mi tutaj kilka razy to będzie 3.

17:554.

17:58A tu będzie 5.

18:01To co chcę zrobić jeszcze to dodać tutaj ikonka z ikoną wsi.

18:07Będzie to taka ikonka.

18:11Color Secondary 600.

18:19Wymiary tej ikonki to 28 na 28 pikseli.

18:25Chcą ją wyceny w pionie.

18:30Będzie to.

18:34RF icon.

18:39Kopiuję i wklejam jeszcze raz.

18:41Tym razem będzie to Next icon.

18:48I zmieniam tylko odpowiednią ikonkę.

18:51Tym razem będzie to.

18:57Taka ikonka.

19:00To co chcę teraz zrobić, to zaznaczyć całą tą grupę Back in Nation Group.

19:04Usunąć minimalną wysokość.

19:08I nadać tutaj space.

19:11Niech to będzie szesnaście pikseli.

19:14I teraz zerknijmy do podglądu.

19:21Nasza publikacja jest tutaj już

19:22zaadaptowana, a my możemy przystąpić do dalszej pracy,

19:27ale kolejnymi tymi elementami zajmiemy się w kolejnych lekcjach.

19:30Ja dziękuję Ci za uwagę i widzimy się już dosłownie za moment.