Aplikacje no-code z Bubble: Wdrażamy dashboard dla hosta

0:00Cześć! W tej lekcji zajmiemy się kilkoma drobnymi

0:02poprawkami, dzięki czemu przygotujemy sobie pole do pracy w kolejnych lekcjach.

0:07Mowa oczywiście o koncie hosta w naszym dashboard.

0:10W pierwszej kolejności musimy zadbać o to, aby logowanie za pomocą tych dwóch

0:14przycisków, czyli Demo guest oraz demo host prowadziło nas odpowiednio do

0:18Dashboard u i przy okazji przekazywało tam odpowiedni widok.

0:22A więc przejdźmy do edytora. Przejdźmy na stronę.

0:26Zanim.

0:28Ja już takie poprawki odpowiednio

0:30wprowadziłem, czyli w przypadku konta demo gest.

0:33Logujemy użytkownika, kierujemy go na

0:36stronę Dashboard i oczywiście przekazujemy tutaj zespół Kings Display.

0:40W przypadku tego hosta.

0:44Jest to oczywiście ostry seks, ponieważ

0:46taki widok będzie pierwszym i domyślnym dla hosta.

0:51Skoro mamy gotowe to zaloguj się na odpowiednie konto.

0:57Jak widzisz już tutaj wprowadziłem odpowiednie poprawki.

1:00Pierwszą i najważniejszą jest oczywiście menu po lewej stronie.

1:05A więc wróćmy do Dashboard u.

1:09Nie on boarding, tylko strona Dashboard.

1:12I w tym przypadku.

1:14Jeżeli przejdziemy do grupy menu Left Top Group.

1:19Tak jak widzisz, ja nasze menu gościa

1:21zamieniłem po prostu Darius Abel Element później.

1:25Na podstawie tego utworzyłem tutaj menu hosta.

1:30Tu musisz oczywiście zadbać tylko o to, aby przekazywać odpowiednie widoki.

1:35A więc host listing.

1:38A z booking.

1:41Tu mamy host reviews i oczywiście host messages.

1:44Oczywiście nie zapominamy również o tym,

1:47aby dostosować tutaj condition, ale odnosząc się do odpowiednich widoków.

1:52A kolejno potem na stronie Dashboard u tylko ukrywamy oba te menu i pokazujemy je

1:58w zależności od tego, jakie konto jest aktualnie aktywne, czyli.

2:04Przejdźmy tutaj.

2:06Jeśli current User type jest gest, to oczywiście pokazujemy menu dla gościa.

2:10Analogicznie menu dla hosta.

2:13Ten sam sposób potraktowałem również menu mobilne.

2:16Jak widzisz tutaj.

2:18Mniej mobilne gościa Zawiniłem znów.

2:19Dariusz zapal element.

2:21Natomiast pamiętaj, że jeżeli to zrobisz,

2:23będziesz musiał wprowadzić kilka drobnych poprawek.

2:26Przede wszystkim.

2:29To z automatu. Niestety Babel zamienia na zwykłą grupę.

2:32A więc będziesz musiał tutaj ustawić opcję dla Floating Group.

2:37Kolejno te warunki, które dodawaliśmy do naszej floating grupy,

2:42która odpowiednio je pokazywały i ukrywały, musimy sobie stąd wyciąć.

2:46A tutaj w sekcji Layout zaznaczamy tę

2:48opcję, że cały ten element jest widoczny po załadowaniu się strony.

2:52Collapse to hide możemy zostawić.

2:54Tutaj nic się nie dzieje i dopiero po tym jak dodasz taki element do dashboard u.

3:03Tutaj ukrywasz ten element i dopiero tu

3:06oczywiście pokazujesz go kiedy ten conditions jest spełniony

3:09i potem dokładnie to samo robimy tutaj na menu hosta.

3:13Najprościej będzie Ci po prostu utworzyć taki element na podstawie tego

3:19głównego menu dla hosta i potem odpowiednio go

3:23dostosować właśnie do takich ustawień mobilnych.

3:25Jak widzisz w przypadku Dashboard jest to ogólnie podejścia signal page Application.

3:30Ja pracuję w ten sposób, że jeżeli coś ma

3:32być pokazywane przy określonych conditions w zależności od typu użytkownika bądź

3:37danego widoku, to zawsze zamieniam to na element.

3:41A więc zrobiłem to tutaj dla menu menu

3:44mobilnego i to samo zrobiłem tutaj z resztą dla tej prawej kolumny.

3:50Nie mamy oczywiście statystyki dla gościa,

3:51które utworzyliśmy w jednej z poprzednich lekcji.

3:54Znów zamieniamy to na element.

3:56Pokazujemy oczywiście wtedy, kiedy jest

3:58spełniony condition all, a na podstawie tego po prostu tworzymy

4:02sobie znów statystyki, tym razem dla hosta.

4:05Możesz sobie pobrać te wartości.

4:07Znów wpisujemy je tutaj na sztywno.

4:09Nie będziemy wykonywać na razie żadnych obliczeń.

4:11Tym zajmiemy się w sprincie numer 2.

4:15A więc tak skoro lewą

4:17prawą kolumnę mamy gotową, zajęliśmy się również mniej mobilnym dla

4:22obu typ kont, to pozostaje nam jeszcze tylko dopasować.

4:28Oczywiście na wybór.

4:31Pamiętaj, żeby.

4:34Tą grupę, która jest tutaj.

4:36Czyli rozwijamy container

4:38grupę na FB host pokazywać oczywiście wtedy kiedy user type jest równy host.

4:45Dodatkowo przy break point ciemniejszym bądź równym 768 pikseli ukrywamy tą lewą

4:50grupę, czyli tą z tym tekstem, a więc dla tego samego break pointa

4:54dla grupy na var host group musimy wyrównać elementy do lewej strony.

4:58Mamy tu tylko jeden przycisk, dzięki czemu to będzie dobrze się prezentowało.

5:04Jak widzisz mamy menu, mamy prawą kolumnę.

5:07No i oczywiście pozostaje Ci jeszcze tutaj

5:09dodanie tych startowych widoków dla Empty State.

5:131R User Element, w którym będziesz musiał przede wszystkim podmienić obrazek

5:17oraz dodać nowy filtr Data type User jest oczywiście host.

5:23Listing.

5:25Obrazek znajdziesz oczywiście w plikach źródłowych.

5:28Natomiast.

5:30Przechodzimy do data user i dodajemy tutaj

5:33po prostu kolejny filtr o nazwie Listing Number.

5:39Dzięki czemu bardziej będziemy mogli teraz

5:41pododawać te odpowiednie elementy na empty state.

5:45Jak widzisz, nie ma tutaj nic trudnego.

5:47Odnosimy się znów do konkretnego widoku, do konkretnego ludu.

5:52Skręt user.

5:54I w ten sam sposób zmieniamy full state na empty state itd.

6:00Więc po prostu wykonujemy dokładnie to samo co robiliśmy w lekcjach poprzednich.

6:05Ja tutaj narazie dodałem tylko 4 elementy dla Empty.

6:10Mamy tutaj jak widzisz host booking.

6:13W tym przypadku odnosimy się oczywiście

6:14już do tego filmy, które stworzyliśmy wcześniej, czyli Booking Number.

6:18Analogicznie dla RIF i analogicznie dla Messages.

6:21Natomiast co do samych tekstów, to ja je tutaj tylko odpowiednio

6:25dostosowałem, tak aby one bardziej pasowały do konta hosta.

6:29Jak widzisz one się tutaj delikatnie

6:31różnią w stosunku do tego co mieliśmy dla konta naszego gościa.

6:35Możesz wykorzystać te moje teksty.

6:38Możesz również za pomocą czat GPT lub innego narzędzia wygenerować własne teksty

6:42albo wymyślić je samemu, jeżeli masz taką fantazję.

6:45Nic nie stoi na przeszkodzie.

6:47Mam również nadzieję, że udało Ci się wdrożyć tą sekcję Messages.

6:50Ja ją pozostawiam pustą.

6:52Dodałem tylko ten widok dla Empty State.

6:55I to wszystko.

6:56A więc skoro nasz dashboard jest już

6:58przygotowany do tego, aby obsługiwać konto hosta, to oczywiście w kolejnych lekcjach

7:03zajmiemy się następnymi widokami, a zaczniemy oczywiście od Host listing.

7:08Ja dziękuję Ci za uwagę w tej lekcji.

7:10Była ona dosyć krótka, ale oczywiście te

7:12operacje i tak musimy wykonać, żeby w ogóle przystąpić do pracy.

7:16Tak więc jeszcze raz dziękuję za uwagę i widzimy się za.