Aplikacje no-code z Bubble: Nawigacja w dashboardzie

0:00Witam Cię w kolejnej lekcji, w której

0:01nadal kontynuujemy naszą przygodę z bardem i tym razem.

0:05Naszym zadaniem będzie dodanie funkcjonalnego menu.

0:08Zanim jednak do tego przejdziemy, ja tutaj

0:11całej bazy z Nest War Table dodałem nową tabelę o nazwie OS Dashboard Views.

0:16Jeżeli nie widzisz jej w swoich

0:17skopiowanych wersji, to otwórz proszę pliki źródłowe.

0:21Kliknij w link do tej tabeli War Table tej

0:23głównej i zobaczysz dodaną tutaj nową tabelę.

0:27W ten sposób będziesz mógł na nowo

0:29skopiować sobie całą bazę, albo po prostu posiłkować się tylko tą jedną tabelą.

0:33Aby dodać do swojej aplikacji Babel właśnie ten nowy set, który my zaraz

0:39wykorzystamy do budowy naszego funkcjonalnego menu.

0:43A więc ja już taką operację wykonałem.

0:46Jak widzisz mam tutaj nowy set o nazwie Ostatni wóz.

0:50Tak więc teraz zapał mój proszę to wideo i

0:52uzupełnij właśnie ten set zgodnie z tabelą wzorcową.

1:01OK. Mam nadzieję, że dodałeś już ten open set.

1:04A my zanim przystąpimy do budowy naszego

1:06menu, musimy sobie omówić jedną bardzo ważną rzecz.

1:09Przejdźmy tutaj do przeglądarki Chrome.

1:12Jestem teraz na

1:14naszym projekcie wzorcowym, z którego korzystam i chciałbym, żebyś zwrócił swoją

1:18uwagę w to miejsce przede wszystkim tutaj na pasek adresu oraz tutaj na tą ikonkę.

1:23Zobacz co się dzieje, jeżeli będąc na stronie index owej.

1:26Przejdę sobie teraz na stronę search.

1:29Przede wszystkim zmienił mi się tutaj URL,

1:32a tutaj pojawiła się taka ikonka ładowania.

1:35Dlaczego?

1:36Ponieważ oczywiście połączyliśmy się między stronami.

1:38I takie podejście w tworzeniu aplikacji jest jak najbardziej

1:42poprawne i użytkownicy są przyzwyczajeni do tego, że przełączają się między

1:46stronami Twojego serwisu, a więc w naszym przypadku jest to np.

1:49strona indeksowana.

1:51Mamy tutaj osobno zaprojektowaną stronę search, osobno projektowaliśmy stronę

1:56tutaj listingu, a także strony autentykacji.

1:59Natomiast zobacz co się stanie, jeżeli

2:01teraz w projekcie wzorcowym zaloguje się do Dashboard u.

2:06Na przykład na konto gościa.

2:09I tak mamy tutaj menu,

2:12które teoretycznie powinno przełączać użytkownika pomiędzy stronami.

2:16A więc zwróć proszę uwagę na pasek URL oraz tutaj na tę ikonkę.

2:20Jestem teraz na stronie bookingu.

2:22Mam tutaj informację o tym guest box.

2:25Przełączam się na guest reviews i tak URL

2:28mi się zmienił, ale tutaj nic się nie ładowało.

2:31Dlaczego?

2:33Otóż odpowiedz jest bardzo prosta.

2:35W przypadku dashboard ów najczęściej

2:36korzysta się z podejścia o nazwie SPA, czyli Single Page Application.

2:41Oznacza to, że pracujemy w ramach jednej strony.

2:44Cały czas jesteśmy tutaj na stronie Dashboard, a przełączając się tutaj

2:48pomiędzy różnymi widokami lub tak naprawdę w naszym przypadku różnymi stronami.

2:53I tu się ten pasek URL ów zmienia.

2:56Nadal jesteśmy jednak na stronie Dashboard u.

2:59Wiem, że to brzmi trochę zagmatwanie,

3:01ale oznacza tylko tyle, że pracujemy tylko i wyłącznie na tej jednej stronie.

3:06Mimo, że mamy tutaj różne widoki, dalej

3:08pozostajemy właśnie w obrębie strony Dashboard.

3:10Jedyne co robimy,

3:12to ukrywamy bądź pokazujemy odpowiednie sekcje, w naszym przypadku właśnie

3:16te tutaj na środku, więc przełącza się na booking.

3:19Mam tutaj właśnie content dla tej strony bookingu.

3:24Takie podejście jest Inner Page Application.

3:26Ma bardzo wiele zalet.

3:28Przede wszystkim działa to niesamowicie szybko i

3:31niesamowicie płynnie, ponieważ użytkownik nie przeładowuje całej strony, nie musi

3:35czekać na ponowne wczytanie wszystkich elementów, a jedynie label odpowiednio

3:39pokazuje bądź ukrywa odpowiednie sekcje, a cała reszta pozostaje niezmieniona,

3:44dzięki czemu działa to tak niesamowicie szybko.

3:47Natomiast bardzo dużą wadą, na którą bardzo często ludzie zwracają uwagę

3:52jest fakt, że już w momencie załadowania się strony Dashboard musimy sobie pobrać i

3:56załadować wszystkie te sekcje, które będziemy wyświetlać.

3:59Natomiast w Babel nie do końca tak działa, co zresztą udowodnię Ci później.

4:04Natomiast chcę, abyś na ten moment

4:05zapamiętał tylko tyle właśnie, że single Page Application

4:09oznacza nie mniej nic więcej niż pracę właśnie z jedną stroną.

4:14To znaczy, że cała Twoja aplikacja, w naszym przypadku cały nasz dashboard, jest

4:18ładowany właśnie w obrębie tej jednej strony.

4:20A skoro ten przydługi wstęp mamy już za

4:23sobą, to przejdźmy do naszego edytora i przystąpimy do pracy.

4:27A więc przechodzę sobie tutaj na stronę

4:29Dashboard, gdzie jestem na stronie Dashboard.

4:32Przechodzę do zakładki Design i chcę teraz tutaj utworzyć nasze menu.

4:36Dla ułatwienia skopiuję sobie tą grupę, czyli menu Left Bottom Group.

4:42Kopiuję i wklejam tutaj do menu Left Top.

4:46To co będę chciał zrobić, to przede wszystkim pozbyć się tego burdelu na

4:49górze, a w zasadzie odznaczyć ten checkbox.

4:52Nie potrzebujemy tutaj żadnego obramowania.

4:54Przechodzę do layout i pozbywam się jeszcze tego padding na górze.

5:00Teraz zmieniam nazwę na.

5:04Gest menu Group.

5:13Teraz zaznaczam tutaj tą grupę Help Center i nazwę zmieniam na.

5:20Jest.

5:21Booking.

5:23Grób.

5:26Będę chciał sobie pozostawić tutaj te

5:27wszystkie layouty i wszystkie style bez zmian.

5:31Natomiast wstawić tutaj typowy content będzie to dashboard views.

5:36I w naszym przypadku odnoszę się do

5:38konkretnego rekordu, czyli do Guest Booking.

5:41W ten sposób będę mógł teraz do środka

5:43przekazywać dynamicznie odpowiednie wartości, czyli dla tej grupy.

5:48Help Center Icon zmieniamy nazwę na.

5:53Gest.

5:55Po Kings Icon Group.

5:57Ustawiamy odpowiedni type of content.

6:00Wybieramy odpowiedni Tata Soros

6:03i teraz to mogę przekazać właściwą ikonkę naszego setu.

6:09A tutaj w tym przypadku chcę się odnieść.

6:12Nie do display tylko do text.

6:17I teraz wywalamy tą grupę Lock out Group.

6:21Na wszelki wypadek może powiedzmy chwilowo tylko jeden raz.

6:27Zmieńmy nazwę na gest.

6:29Raz jeszcze sprawdzę to w projekcie wzorcowym.

6:32W tym przypadku będzie to gest reviews.

6:38Tutaj zmienimy to na Geste Reviews Group.

6:49Poprawne to dla tej grupy z ikonką.

6:53Odniesienie się do właściwego Data Souls.

6:56I przejdźmy teraz do podglądu naszej aplikacji.

6:59Ja zamknę ten projekt wzorcowy,

7:01a tu mam podgląd naszej aplikacji, którą właśnie teraz budujemy.

7:05Jestem na stronie logowania, loguje się jako demo gest.

7:10Jest to w naszym dashboard, a więc nasze menu jak widzisz tutaj działa.

7:13Mamy zakładkę Books, mamy zakładkę Review.

7:17Natomiast w jaki sposób możemy teraz przełączać się pomiędzy tymi widokami tak

7:21aby zmieniał nam się pasek URL, a nie przeładowywania nam się cała strona?

7:25Czyli jak mamy tutaj zastosować to

7:27podejście singiel Page Application, o którym Ci wcześniej mówiłem.

7:31Babel Jest to niesamowicie proste.

7:33Przede wszystkim po kliknięciu w taką grupę będę chciał wykorzystać tutaj akcje

7:38nawigacji i przejścia pod stronę Dashboard.

7:41Natomiast Bubble zadziała to w ten sposób,

7:43jeżeli przechodzisz ze strony na tą samą stronę, czyli jeżeli przejdziemy ze strony

7:47Dashboard znów na stronę Dashboard, to Babel jest na tyle sprytne, że nie będzie

7:51nam przeładowywać całej strony, ale jedynie menu to co zmienić się

7:55powinno, czyli ewentualnie ukryje bądź pokaże jakieś właściwe grupy,

8:00albo zastosuje inne conditions, ale zaraz zobaczysz jak to działa.

8:05Natomiast tak jak przekazywać tutaj

8:08ten pasek adresu tak, żeby on był zgodny z naszym projektem wzorcowym.

8:12Pamiętasz, w lekcji z listingu pokazywałem Ci, jak działają

8:15właśnie tutaj URL parameters, czyli moglibyśmy tutaj go zastosować.

8:20Zresztą spróbujmy to zrobić.

8:22Wracamy do edytora.

8:23Zaznaczam całą tą grupę, klikam Add workflow i wybieram Account.

8:29A w zasadzie Navigation Go to Page Dashboard.

8:34I wykorzystajmy tutaj parameters.

8:38Skrócony zapis, czyli v jw.

8:40Chcę się odnieść do DS Group całej tej grupy.

8:43Ona jest dashboard WS i tym razem do Display.

8:49I zobacz co się teraz stanie.

8:51Odświeżam.

8:54Klikam na grupę Brookings i wszystko się zgadza.

8:57Nasz URL parametr się pojawił.

8:59Natomiast dla mnie taki zapis dashboard jest niesamowicie brzydki.

9:03Bardzo nie lubię właśnie tutaj takiego zapisu.

9:06Wolałbym, żeby to wyglądało w ten sposób,

9:08czyli dashboard łamane tutaj na Xbox w ten sposób.

9:14Jak taki efekt osiągnąć?

9:16Babel Jest to niesamowicie proste.

9:18Mamy odpowiednie narzędzia, które ułatwią nam pracę i zaraz Ci to udowodnię.

9:22Wracamy sobie tutaj i tym razem.

9:25Zamiast przekazywać display naszego seta jako parametr,

9:29będę chciał to odznaczyć, przekazać go w to miejsce, czyli w pole Data to Send.

9:34Czyli znów odnoszę się do Disk Group, a jest dashboard display.

9:39I to wszystko co musieliśmy zrobić.

9:43Przejdźmy tutaj.

9:44Tak, pozbądźmy się chwilowo tego, czyli

9:46wróćmy do normalnego adresu, czyli naszego URL dashboard.

9:51Klikam na grupę Bugs.

9:53Wskoczyło mi już teraz to poprawnie, żeby Ci to udowodnić.

9:56Żeby dokładnie.

9:59Taki sam.

10:01Workflow utworzyć dla tego drugiego

10:04linku, czyli ADO Workflow i skopiuje sobie ten krok.

10:12I teraz przejdźmy do podglądu.

10:14Odświeżamy.

10:16Mamy gest, bo King's Quest Reviews i tak dalej.

10:21A więc już teraz wiesz, w jaki sposób

10:22możesz przekazywać takie dane do paska adresu.

10:25A więc wszystko to, co przekażesz tutaj.

10:27W tym polu data to send zostanie wyświetlone w pasku URL.

10:32Po znaku forward slash na stronie, na którą kierujesz użytkownika.

10:36W naszym przypadku kierowaliśmy go ze strony Dashboard na stronę Dashboard.

10:40To się zgadza i właśnie przekazywaliśmy

10:42tutaj nasz display, czyli w tym przypadku np.

10:45Xbox, a tutaj Guest reviews.

10:48OK, wiesz już w takim razie jak przekazywać te dane tutaj do URL?

10:53Ale jak się do nich odnieść?

10:54W zasadzie jak sobie pobrać teraz te dane?

10:56Jak sprawdzić jaką wartość tutaj mamy?

10:59Aby teraz odpowiednio wyświetlać

11:01elementy właśnie tutaj, w tej naszej głównej sekcji contentu?

11:06Znów w Babel.

11:07Mamy do tego odpowiednie narzędzia.

11:09Jest to niesamowicie proste, co zresztą zaraz Ci udowodnię.

11:14Wracamy na stronę designu.

11:17I może zacznijmy odpowiedniego

11:18dostosowania tutaj tych naszych linków w menu.

11:21Ja będę tak chciał zmieniać tutaj kolor całej tej grupy.

11:27Domyślnie ma ona kolor biały.

11:29Ja będę chciał ją zmienić na kolor primary.

11:32A więc tak dodajmy tutaj przede wszystkim.

11:35Background style transition ustawiony na 300.

11:39Teraz przejdźmy do zakładki Condition.

11:41Ale skoro mamy do czynienia z gorylem, to

11:44jak się domyślasz zaczynamy od pisania URL.

11:46Odnosimy się do znanej Ci już opcji Get data from page Wall.

11:50Z tego korzystaliśmy na stronie listingu

11:52i tam właśnie wybieraliśmy ten typ parametru i odnosiliśmy się do jego nazwy.

11:57W tym przypadku wybieramy z tej listy segment as List.

12:03Jaki typ te dane mają mieć.

12:06To nie będzie tekst tylko będzie nasz OS Dashboard views.

12:11Samo to jeszcze nie wystarczy, ponieważ

12:13musimy wskazać teraz do którego itemu z tego URL chcemy się odnieść.

12:18Jak to działa w praktyce?

12:20To jest nasz główny URL pomijalny.

12:24Natomiast to jest rozbite na poszczególne segmenty.

12:28A więc tak dashboard to jest item numer 1.

12:31To będzie item nr 2.

12:33Gdyby to był forward, slash i cokolwiek innego byłby to item numer 3 itd itd.

12:39A więc w naszym przypadku musimy się odnieść do item nr 2 czyli do tego.

12:45Sam wybieram item hash 2 i mówię, że to ma być równe.

12:52Jest Brookings.

12:54Aby sobie sprawdzić czy rzeczywiście tak jest, porównaj ten conditions.

12:58Jeżeli to będzie działało, jeżeli to

13:00osiągnie wartość true, to oczywiście ten warunek tam zadziała.

13:04Ja tutaj chcę się odnieść do background color i zmienić kolor na primary.

13:11Mogę sobie skopiować.

13:13Ten condition.

13:15I to samo zmienić teraz dla ikonki.

13:18Zmienić jej kolor na kolor biały.

13:23A dodatkowo ten tekst.

13:26Tutaj zmienić.

13:29Na kolor.

13:32Primary 600.

13:37I zerknijmy, czy to zadziała.

13:39Przechodzę, pozbywam się tego, przechodzę do.

13:45Tu się jeszcze nic nie dzieje, ale klikam sobie tutaj na ten link.

13:47Booking jak widzisz ma już to zastosowanie.

13:50Nasz condition, ale się odpalił.

13:52Sprawdził sobie wartość tego segmentu

13:55czyli itemu numer 2 i on jest akurat równy Guess booking a więc te condition.

14:01Ale się zastosowały i to samo.

14:03Możemy zresztą zastosować tutaj

14:05Laos reviews, żeby Ci to zabawą sterować, że to działa tak jak powinno.

14:10A więc.

14:12Zaznaczam sobie tą grupę i tym razem mówię, że to ma być równanie

14:15Guest booking tylko jak się domyślasz guest reviews.

14:20Kopiujemy cały ten całe to wyrażenie.

14:26A w zasadzie niestety musimy zrobić tak kopię Condition.

14:30No właśnie najpierw tak musi się zmienić kolor ikonki na białe.

14:36I teraz dopiero tutaj wskazać gest RWS.

14:43Kopiuje Condition All.

14:45Dodaję go tutaj.

14:47I Font Color.

14:52Zmieniam na Primary 600.

14:55Przechodzę do strony.

14:56Odświeżam.

14:59Jak widzisz teraz.

15:01Działa to tak jak powinno.

15:03I właśnie tutaj to od razu widać zastosowanie Single page Application.

15:06Czyli przechodzimy ze strony Dashboard na stronę Dashboard.

15:09Nic się tutaj nie przeładowuje, a Babel tylko wyłapuje sobie odpowiednie

15:13conditions i aktualizuje to na stronie, czyli właśnie tutaj.

15:16Dodaje odpowiednie kolorki, zmienia kolor ikony, kolor tekstu i kolor tej grupy.

15:22Już działa to niesamowicie płynnie i bardzo szybko.

15:25Możemy więc tutaj dodać resztę naszego menu.

15:29Dla ułatwienia ja sobie tak

15:30skopiuje tą grupę, ale z wykorzystaniem workflow, czyli kopii zapasowej.

15:35Wybieram Copy Witch Workflow.

15:38Zaznaczam całą tą grupę.

15:40Jaka jest menu grup?

15:42Edit.

15:45Vide Workflow.

15:47Jeszcze raz.

15:50Jest menu grup.

15:52Edit.

15:53Pakiet Fit Workflow.

15:56I teraz to stosuje tutaj odpowiednio nazwę to będzie w naszym przypadku.

16:03Wish list.

16:05Czyli gest.

16:08Jeśli jest.

16:10Mogę sobie to skopiować?

16:13Poprawić tutaj.

16:18Poprawić tutaj nazwę ikonki.

16:21Mamy jakąś literówkę.

16:27Zaraz poprawimy te conditions, ale zerknijmy czy tutaj.

16:31Wszystko jest ok.

16:32East Reviews.

16:35OK.

16:37Musimy to zmienić.

16:43To samo zresztą tu i tu tylko tę literówkę poprawić.

16:48I ok.

16:50Przejdźmy do tych conditions, czyli.

16:53Warunki są poprawne, musimy tylko odnieść się do odpowiedniego itemu.

16:58Najpierw do całej tej grupy gestów i stóp

17:01odnosimy się do rekordu Gas with this option setu.

17:06I teraz przechodzimy do tych conditions i wybieramy właściwy item.

17:14Tutaj.

17:16I tutaj jeszcze.

17:18To samo musimy zrobić tutaj.

17:20To będzie gest.

17:23Messages.

17:30Przekazuję tu odpowiedni temat.

17:35Zmieniam tu nazwę.

17:38I tutaj też zaraz będziemy musieli to jeszcze poprawić, bo zapomniałem.

17:46Tu mamy messages.

17:49Tu mamy gest messages icon.

17:56I jeszcze wszystkie conditions.

17:59Zaczynam od grupy.

18:02Z ikonką.

18:05Kolejna sama ikonka.

18:09I jeszcze ten tekst.

18:13Teraz zaznaczmy s ten gest fit listy Icon Group i musimy poprawić.

18:20Na to Soros.

18:21Reszta powinna się zgadzać.

18:23Zaraz sprawdzimy to w praktyce.

18:24Mam nadzieję, że nic nie pominąłem.

18:30Tu nam się coś nie przekazuje.

18:32Zaraz zobaczymy o co chodzi.

18:38Jest Messages Group.

18:41Jest messages co mamy tutaj,

18:45a nie przekazuje nam się, bo nie uzupełniłem tego patrząc.

18:55Wstawiam odpowiednią ikonkę i teraz już powinno być dobrze.

19:04Mamy wszystkie cztery pozycje w naszym menu.

19:07Po kliknięciu przechodzimy.

19:10Odpowiedniego widoku.

19:12I tutaj się to odpowiednio zmienia.

19:15Więc skoro zmieniamy to w menu, to zmieńmy to również tutaj.

19:19W tej sekcji, czyli w tym miejscu

19:21powinniśmy wyświetlać właściwy widok, na którym aktualnie jesteśmy.

19:26Jak to zrobić?

19:27Dokładnie tak samo jak wykorzystaliśmy Condition, ale tutaj

19:30do zmiany tych stylów musimy przejść do naszego.

19:38Czyli na dashboard.

19:40Re.

19:43I ten tekst będę chciał zmienić na

19:44dynamiczne, czyli wyciągnąć go sobie z URL.

19:51Segment Assist.

19:52Tutaj zostawiam to jako tekst, chociaż może zmieńmy to na dashboard Views.

19:59I tutaj chcemy.

20:02Co my chcemy wyciągnąć.

20:03Hitem numer dwa.

20:07I wartość display.

20:10Teraz powinna to działać.

20:13Już właściwie.

20:16OK, tylko pewnie to jest nie pole display tylko pole text.

20:21A właśnie nie ten atrybut wyciągnąłem.

20:27Teraz się zgadza.

20:29Przełączamy widoki, nazwa nam się zmienia, style się dostosowują,

20:33a to co możemy jeszcze zrobić to utworzyć sobie tutaj menu mobilne.

20:40W tym celu oczywiście ułatwimy sobie zadanie.

20:43Wracam na stronę Dashboard i zaznaczam tutaj całą grupę Guest Menu Group.

20:49Kopiuję ją razem z workflow, czyli Edit Kopi Special Kopi Video Workflow.

20:56Wstawiam tutaj do naszego menu mobilnego czyli.

21:00Edit.

21:03Twój workflow.

21:05I teraz musimy tylko odpowiednio to pozmieniać.

21:08Będzie to gest menu Mobile Group.

21:19Przechodzę do layoutu i zmieniam go z kolumnowy na row.

21:24I będę chciał tutaj wybrać opcję Space between.

21:30Tu nic więcej nie zmieniać.

21:33I tylko poprawić te grupy.

21:35Przede wszystkim pozbyć się tych tekstów.

21:43I tutaj zmieniać nazwę na gest mobilny.

21:51Po Kings Group.

21:53W sumie to skopiuję.

21:56To samo zrobię tutaj.

21:58Usuwam tekst.

22:08Poprawiam nazwę.

22:10Oczywiście powinniśmy ją zmienić również i tutaj.

22:12Ja zajmę się tym później, aby nie marnować Twojego czasu.

22:21Tu wstawiam jeszcze nazwę mobile i to samo robię tutaj dla Messages.

22:36Teraz sprawdźmy jeszcze etykietę grupy

22:39i wybierzmy dla każdej z nich fit fit content.

22:51I tu, i tu. Content i tutaj też.

22:57A jak widzisz teraz to się odpowiednio zastosowało to wyrównanie space between,

23:03a my możemy sobie sprawdzić czy nam to odpowiednio zadziała.

23:08Przejdźmy tutaj do widoku.

23:11Tablet owego.

23:15Już style mają zastosowanie po kliknięciu tutaj.

23:18URL też tam się zmienia.

23:21A więc Pani mobilna działa fantastycznie i desktopowe również.

23:27Jak widzisz, tutaj te style się dostosowują.

23:31A więc nasze zadanie w tej lekcji jest już skończone.

23:34Ty dowiedziałeś się czym jest singiel Page

23:36Application i jak to wykorzystać Babel w praktyce?

23:40A naszym kolejnym zadaniem będzie dopracowanie tej prawej kolumny.

23:44Ale tym zajmiemy się już w lekcji następnej.