Aplikacje no-code z Bubble: Sekcja listings - host

0:00W tej lekcji kontynuujemy naszą pracę z widokami Dashboard dla hosta i oczywiście

0:04rozpoczynamy od pierwszego, czyli od listingu.

0:07Ja już przygotowałem odpowiedni full state.

0:10Jeżeli się przełącza to jak widzisz nie ma tutaj nic trudnego.

0:13Jest to znowu ponowienie tego co w zasadzie robiliśmy.

0:16Ja sobie skopiowałem XML element

0:19z booking z repo, zamieniłem tylko nazwę na tych przyciskach.

0:24Zostawiłem sortowanie po dacie, a tutaj

0:26wrzuciłem repeat Grupę z listingu to akurat skopiowałem sobie ze strony

0:32search, wkleiłem tutaj i oczywiście odpowiednio dostosowałem style

0:36dla widoków mobilnych tak aby ta lista się tam odpowiednio prezentowała.

0:40Możesz sobie zerknąć na mój edytor, ale myślę, że poradzisz sobie z tym sam.

0:44Nie ma tutaj nic trudnego, oczywiście dla

0:46odpowiednich condition all i wyświetlamy taki element.

0:50I oczywiście nie możemy zapomnieć o tym,

0:54aby działał ten przycisk przełączania do empty state.

0:57Natomiast nie to jest najważniejsze,

0:59ponieważ myślę, że z tą częścią radził sobie w zupełności sam.

1:02Ja chciałbym, aby ta lekcja była nieco

1:04bardziej interesująca, dlatego też dodałem tutaj nową stronę,

1:08którą będziemy otwierać po kliknięciu w przycisk New Listing tutaj.

1:11W tym zawiera element.

1:13Albo tutaj właśnie za pomocą naszego bara.

1:16Ta strona nazywa sie u mnie New listing.

1:19Jeżeli sobie kliknę.

1:23To otwiera mi się taki formularz, za

1:25pomocą którego nasz host będzie mógł dodać właśnie nowy listing.

1:30Zależało mi na tym, aby pokazać Ci jak w

1:32prosty sposób możesz przygotować właśnie taki stopniowy formularz.

1:36Jak widzisz mam tutaj informację, na którym kroku aktualnie jestem.

1:39Mogę się przełączać pomiędzy tymi krokami?

1:42Ten pasek postępu nam się tutaj odpowiednio dostosowuje.

1:46Dlaczego Ja utworzyłem to w zasadzie jako nową stronę?

1:49Ponieważ zależało mi na tym, aby host miał

1:51jak najmniej rozpraszaczy w momencie, kiedy będzie wystawiał nową ofertę.

1:55Dlatego też jak widzisz uprościłem do absolutnego minimum.

1:58Jest to tylko logo i przycisk Cancel.

2:01Po jego kliknięciu wracamy do Dashboard do widoku Hosting Things.

2:05Natomiast tutaj za pomocą tych guzików

2:08mogę się przełączać pomiędzy kolejnymi krokami.

2:11Jak widzisz, za każdym razem jest tutaj coś innego.

2:14Natomiast znów,

2:15żeby nie marnować tutaj zbyt wiele czasu, ja większość grup wykorzystałem po prostu

2:19z tych, które już mieliśmy wcześniej przygotowane, głównie z naszego Popup u na

2:23stronie serii, gdzie dodawaliśmy odpowiednie filtry.

2:26Jak widzisz, jeżeli wróciłbym do pierwszego.

2:30To mam tutaj property type type of place

2:33po prostu żywcem skopiowane z tego popup u.

2:38Następnie mamy tutaj liczbę gości, łóżek, łazienek.

2:43Kolejno nasz host będzie mógł podać

2:45lokalizację takiego lokalu oraz ustalić jego cenę za noc.

2:49Następnym kroku, kiedy będziemy mieć już

2:52zaimplementowaną odpowiednią lokalizację i mapkę, będziemy mogli osiedlać pozycję

2:57jego listingu na mapie, aby mógł ją potwierdzić.

3:01Kolejna może wskazać udogodnienia oraz języki, z jakich korzysta.

3:06W kolejnym kroku będzie mógł wysłać zdjęcie, a tutaj po prostu już na sztywno

3:10ustawiłem jakąś fotkę tak aby to fajnie wyglądało.

3:13Natomiast w sprincie numer 2 zadbamy o to,

3:15aby dodać pixel order i odpowiednio to obsługiwać.

3:20Podobnie zresztą zrobiłem w kolejnym kroku dałem tutaj po prostu repeat, grupę

3:25oraz listing i wyciągam sobie stąd tylko obrazki oraz tą ikonkę, za pomocą której w

3:29przyszłości nasz host będzie mógł usunąć to zdjęcie, które mu nie pasuje.

3:34Te przyciski też tutaj nic nie robią.

3:36One są na razie po prostu dodane, tylko aby za modelować taki wygląd.

3:42Kolejny krok to tutaj prosimy o podanie

3:44tytułu i opisu takiego listingu i w ostatnim kroku

3:48wskazania właśnie feature ów, jakie oferuje dla swojego listingu.

3:53A guzik Publish będzie nas przenosił z powrotem.

3:57To dashboard tutaj właśnie do widoku Listing.

4:01Natomiast jak skonstruowana jest ta strona?

4:03Otóż przejdźmy do edytora.

4:06Przejdźmy do strony New Listing.

4:11Już Ci pokazuję co tutaj zrobiłem.

4:13Mam na Page listing ustawiony standardowo Layout jest to Row 1440.

4:20Tutaj wkleiłem sobie RS.

4:22Następnie odpiąłem go od instancji tylko po to, aby zostawić w środku.

4:28Jak widzisz mam tutaj tylko container.

4:31Grupę na logo wrapper.

4:33Z niej usuwałem wszelkie conditions, aby

4:35ona się nie ukrywała w określonych rozdzielczościach.

4:38Dodatkowo zostawiłem tutaj tą grupę na etc group.

4:41Natomiast do środka wstawiłem tylko ten przycisk Cancel.

4:44Wrzuciłem właśnie ten odnośnik do naszego menu jak i samo menu.

4:49To kolejna.

4:50Powiesiłem sobie właśnie taki

4:53mega uproszczony i zrobiłem z niego footer tylko dodałem border na górze.

4:59W środku mam tylko i wyłącznie footer container.

5:02A w nim umieszczony tekst,

5:04który odnosi się do aktualnego kroku oraz progress bara.

5:09Teraz Ci pokażę jak to jest w ogóle skonstruowane, żeby to całość działała.

5:13Cały ten multi step form

5:15musimy tutaj dla całego tego elementu dodać odpowiednie staty.

5:20Ja standardowo przypisałem sobie do page wrapper i są to dwa oba typu number.

5:27Pierwszy nosi nazwę Current Step, czyli

5:29aktualny krok na którym jesteśmy, a drugi to Total Steps, czyli maksymalna

5:34ilość kroków jakie przewidujesz w swoim formularzu.

5:37U mnie domyślnie jest ich dziewięć,

5:40a zaczynamy właśnie od Default value dla Current Step Równego 1.

5:44W ten sposób w tym tekście możemy się do tego odnieść.

5:48Widzisz, mam tutaj sklep wpisany na sztywno.

5:51Następnie wyciągamy sobie wartość Current Step łamaną na Page Wrapper Total Steps.

5:56Natomiast żeby ten Progress bar nam tutaj

5:59odpowiednio zadziałał i dostosowywał się do tych wartości,

6:02to musimy zastosować taki dosyć skomplikowany na pierwszy rzut oka zapis.

6:06Natomiast jest on niesamowicie prosty.

6:08W pierwszej kolejności musimy 100%, bo taką wartość maksymalną może mieć nasz

6:13Progress Bar podzielić sobie na liczbę kroków.

6:15Natomiast jeżeli wpisał byś tutaj ręcznie to ja sobie tak skopiuje tą wartość.

6:20Całe to expression.

6:22Wyczyszczę i zobaczę jeżeli chciał bym tutaj wpisać 100.

6:26I teraz podzielić to.

6:29Liczba kroków, to nie mam tutaj żadnej opcji.

6:31Nic mi się więcej nie pojawia, Nie mogę z tym nic więcej zrobić.

6:35Dlatego też mogę wykorzystać tutaj tę opcję arbitrażu i tekst.

6:39I w ten sposób tu wpisać sobie 100.

6:42Normalnie po prostu na sztywno.

6:44I teraz mogę taki tekst przekonwertować na wartość liczbową.

6:49Czyli mamy tu już storage bazę.

6:51I teraz dopiero mogę zastosować

6:53te operacje matematyczne, czyli najpierw podzielić to przez liczbę kroków.

6:57Przywróćmy sobie to moje pierwotne

6:59wyrażenie i rozbijemy je tutaj na poszczególne kroki.

7:03A więc mamy tutaj wpisane na sztywno 100.

7:07Które zamieniamy na wartość liczbową.

7:10W ten sposób możemy zastosować tutaj dzielenie.

7:14Podzielić to przez.

7:16Total Steps, czyli maksymalną liczbę kroków, jaką Twój będzie miał Twój

7:19formularz, a następnie mnożymy to przez Karen Step, dzięki czemu jeżeli będziemy

7:25się przełączać, to będziemy właśnie tą wartość sobie zwiększać.

7:29To zresztą właśnie mogę Ci pokazać, jeżeli przejdziemy sobie tutaj, odświeżamy.

7:35Do listingu.

7:37Jak widzisz mamy tutaj 100% podzielone na

7:399 razy 1, bo to jest karnet step karnet step jest równy 1.

7:43W tym momencie przechodzę do następnego kroku i mam tu

7:47właśnie to Wartość pomnożona przez 2, potem przez 3 itd aż do końca.

7:54Wracamy do edytora, a więc tutaj na futer mamy z głowy.

7:59Przejdźmy do najważniejszej części, czyli w naszym przypadku tutaj Damage rapera.

8:04W środku mamy container.

8:08Oraz kolejne grupy, które będę wyświetlał.

8:12Jak się domyślasz, one są domyślnie ukryte, natomiast wyświetlamy je tylko

8:16wtedy, kiedy Current Step ma odpowiednią wartość dla grupy 1.

8:19Jest to oczywiście tutaj wartość 1.

8:22Tu będę miał niemal standardowy układ, jeżeli sobie to sprawdzisz.

8:25Tak. Cała taka grupa.

8:27Ma tutaj rok 48 pikseli.

8:30Zawsze mamy tutaj nagłówek, zawsze mamy

8:33grupę etc, w której będzie albo 1 albo 2 przyciski w zależności od kroku.

8:39A w środku mamy grupę z contentem Rock up 32 piksele.

8:43I tu najczęściej właśnie będę umieszczał konkretny content.

8:46W większości przypadków jak sam zaraz

8:48zobaczysz będą to grupy skopiowane bezpośrednio z naszego popup u.

8:53Natomiast tak, żeby te odstępy były tutaj

8:55odpowiednie, to ja sobie dla wszystkich tych tekstów ustawiłem Lens Passing na 1.

9:03W ten sposób.

9:04Jeżeli stosujemy tutaj divide

9:06to mamy odpowiedni odstęp pomiędzy tymi elementami.

9:09Jeżeli zastosował byś tutaj jakieś większe elementy passing to jak widzisz dodawany

9:13jest tutaj taki odstęp od góry i od dołu tego tekstu.

9:17My nie chcemy mieć niczego takiego, a więc wracamy do 1 ki.

9:22Grupie mamy odstęp 16 pikseli i to w zasadzie wszystko.

9:27Natomiast tak jeżeli utworzysz sobie taką jedną grupę, to przycisk next.

9:33Ja skonstruowałem go w ten sposób, że

9:34dałem mu minimalną szerokość i to content start.

9:38Edit Workflow I w tym przypadku zmieniasz sobie custom state developera w ten

9:43sposób, że odnosimy się tak, tak, a Rent step i następnie tutaj value przekazujemy

9:49Page wrapper Karen Step, czyli jego aktualną wartość.

9:53Jaką właśnie ma. W momencie kliknięcia w ten przycisk +1.

9:57Jak się domyślasz, przycisk Back będzie obejmował 1.

10:01A więc będzie sobie pobierał aktualną wartość i dodawał Albo podejmował 1.

10:06Jeżeli skonstruował jeszcze jedną taką

10:08grupę, to po prostu skopiuję ją sobie razem z workflow i powiem

10:13w ten sposób będzie Ci dużo łatwiej z tym pracować, bo mam np.

10:17grupę numer 2, gdzie są już 2 przyciski i odpowiednio powielone to workflow.

10:23Jeżeli właśnie będziesz tą grupę pobierał

10:24razem z workflow, to nie będziesz musiał ręcznie ustawiać ich dla tych przycisków.

10:31Babel zadba o to, aby to powielić.

10:33Jedyne co musisz zrobić to oczywiście zadbać o odpowiednie wyświetlanie takiej

10:36grupy i tylko zmianę tych nazw przycisków na odpowiedni krok.

10:41Oczywiście nic nie stoi na przeszkodzie,

10:43żebyś zamiast takiego rozbudowanego formularza stworzył po prostu jedną stronę

10:48i zamiast tych dziesięciu grup, które ja mam tutaj, która pokazuje na odpowiednich

10:51krokach, wyświetlił to po prostu w formie jednej długiej strony.

10:56Natomiast mówię to jest moja inwencja twórcza.

10:58Chciałbym cię w tej lekcji nauczyć czegoś

11:00nowego i pokazać, że takie multi step forms, Babel wymagają trochę pracy.

11:05Jak widzisz, nie są zbyt skomplikowane.

11:07Wystarczy tylko prosta technika odpowiedniego przełączania się pomiędzy

11:11tymi krokami i dostosowania sobie właśnie np.

11:14progress bara do tego, aby wyświetlał właściwe kroki.

11:17Znów zachęcam Cię do tego, abyś w

11:19pierwszej kolejności spróbował przeklikać się przez ten formularz, który ja

11:21stworzyłem i spróbował go odwzorować bez zaglądania do mojego edytora.

11:26Natomiast jeżeli będziesz miał jakieś

11:28problemy, coś będzie niejasne, no to oczywiście wtedy możesz sobie to tutaj

11:31sprawdzić, porównać Twoje rozwiązanie z moim i wprowadzić odpowiednie poprawki.

11:36A ja dziękuję Ci za uwagę i widzimy się w kolejnej lekcji.