Aplikacje no-code z Bubble: Sekcja wishlists - guest

0:00Tej lekcji zajmiemy się kolejnym z widoków naszym dashboard jakim są wishlisty.

0:05Tutaj w pierwszej kolejności dla naszego

0:07roju element dla empty state, czyli tego, który widzisz teraz na ekranie.

0:11Dodałem popup, który otwiera się po kliknięciu w przycisk.

0:15Jest on w pełni statyczny.

0:16Nie ma tutaj żadnych dynamicznych danych, żadnego przekazywania danych do popu itd.

0:21Mamy tutaj na sztywno wpisany tekst, pole input i przycisk.

0:26Jedyne workflow jakie tutaj działają to

0:28to, które otwiera ten popup oraz oczywiście to, którego zamyka.

0:31I to wszystko.

0:33Natomiast jeżeli przejdziemy do podglądu full state, myślę zresztą, że

0:36już na tym etapie wiesz, jak sobie przełączać te widoki.

0:40Mówiłem o tym w lekcji poprzedniej.

0:41Po prostu trzeba dodać kolejny atrybut do

0:44data type user i tutaj zmieniać go oczywiście 0/1 i na

0:48podstawie tego oczywiście dostosować sobie condition, ale.

0:51Natomiast jeżeli przejdę do full state

0:53to tutaj znów zastosowałem bardzo fajny trick, zaraz się pokaże jaki.

0:57Natomiast układ jest mega prosty stwierdzić.

1:00Wiem, że jeżeli chodzi o wishlisty to

1:01pójdźmy po najmniejszej linii oporu i tylko przygotujmy sobie listę.

1:05Oczywiście w przyszłości będziemy musieli zadbać o to, aby po kliknięciu np.

1:09taki item pojawiał się popup, który będzie wyświetlał wszystkie listing dodane takiej

1:14listy, ale na chwilę obecną tym się nie przejmujemy.

1:17Zadbamy o to w kolejnym sprincie.

1:20Natomiast tak ja w tym przypadku stworzyłem sobie nowe Option Set.

1:24Możemy do niego przejść.

1:26Wracamy więc do edytora Data set o nazwie OS VCS.

1:31Nie dodawałem go już do bazy for table, ponieważ jest on niesamowicie prosty.

1:38Mamy tutaj tylko display oraz listing czy odniesienie

1:42set listing, ale w tym przypadku wybrałem to jako listę.

1:46A więc wystarczy, że wskażesz tutaj

1:48listing i zaznaczysz ten checkbox, aby uzyskać właśnie taki typ pola.

1:55Natomiast dla samych tych rekordów.

1:59Możesz dodać tutaj konkretny listing, tak

2:01jak zresztą robiliśmy to właśnie o ile dobrze pamiętam na OST Reviews.

2:06Musisz pamiętać o tym, aby kliknąć tutaj

2:08Add, aby nam to wyskoczyło, podobnie zresztą jak to miało miejsce z obrazkami.

2:12Ja to zrobiłem w ten sposób.

2:15Że pierwszy ma tutaj tylko jeden rekord w tej kolumnie.

2:20Far Far Away ma 2, a Berk ma trzy.

2:23Jak widzisz jestem fanem animacji DreamWorks, o czym tutaj świadczą tytuły.

2:29I w ten sposób w podglądzie

2:32mogę sobie sprawdzić ile rekordów w tej kolumnie listing posiadam.

2:39Jeżeli jest jeden to wyświetlam tutaj ten

2:41jeden obrazek, który sobie z niego wyciągam.

2:43Jeżeli mam tam dwa listingu to wyświetlam sobie oba te obrazki.

2:47Pobieram je po prostu odnosząc się do tych listingu.

2:49Zaraz zobaczę jak to robię i wyciągam.

2:51Oczywiście mają mieć.

2:53W ten sam sposób wyświetlam tutaj

2:55informację, ile tych listingu tam się znajduje.

2:59Stwierdziłem, że maksymalnie będę to robił dla trzech, czyli tu 1 2.

3:04Jeżeli będzie 3 lub więcej, to właśnie będę wyświetlał w ten sposób.

3:07Dzięki czemu wydaje mi się, że te listy dużo fajniej się tu prezentują,

3:11zamiast po prostu wyświetlać za każdym razem tylko jeden obrazek.

3:15Ale jak to jest tak naprawdę skonstruowane?

3:17No więc wracamy do edytora.

3:20Jestem w gestii Sister.

3:27I tak przejdźmy do właściwych elementów.

3:32Tutaj w filtrach zostawiłem tylko sortowanie po dacie.

3:36Nie mamy tutaj żadnych przycisków.

3:38Tutaj mamy repeat thing grupę, która odnosi się do spójrz list.

3:43W tym przypadku tak.

3:44Nie mam określonej liczby rzędów, ponieważ

3:46nie wiem ile użytkownik takich list sobie stworzy.

3:49Zastosowałem standardowy trik, czyli min.

3:52Height ustawiłem na 100%.

3:54Pozbyłem się również tutaj stałej liczby kolumn i stwierdziłem, że minimalna

3:59szerokość takiej kolumny powinna wynosić 260 pikseli, dzięki czemu Babel sam zadba

4:04o to, aby odpowiednio wyświetlać liczbę tych elementów.

4:07Zaraz zresztą zobaczysz, jak to działa w podglądzie mobilnym.

4:11Natomiast przejdźmy tutaj.

4:15Do samej karty.

4:16Tutaj oczywiście przekazujemy sobie pojedynczy rekord.

4:21Mamy tutaj tak.

4:23Ten obrazek jak widzisz odnoszę się do pola listy, która jest listą

4:28i odnoszę się do itemu numer 1 i z niego wyciągam sobie

4:31oczywiście image main w ten sposób, że to ma być first image.

4:36Jest i w zasadzie nie.

4:37W zasadzie to ta sama czy First Aid, czy First Image.

4:40Tu mamy tylko jeden obrazek, w tym image main.

4:43Więc dokładnie w ten sposób możesz się odnieść.

4:45Tu również mógłbyś wstawić item 1 tak jak tutaj.

4:48Natomiast nam jest po prostu łatwiej to

4:50zrozumieć i zapamiętać, że sobie to ustawiam jako first item.

4:54Mam tutaj odpowiednik Andersona, który

4:56pokazuje mi ten obrazek tylko wtedy, kiedy to pole listing, jego count, czyli

5:02liczba rekordów, które się tam znajdują jest równa 1.

5:07Zamknijmy to, pokażmy sobie to.

5:11Tutaj jak widzisz kontekst zmienia nam się na dwa.

5:16Mam tutaj. Rafał.

5:18Odsunąłem te dwa piksele.

5:20Ustawiłem sobie tutaj stałą wysokość.

5:22Ten obrazek i wszystkie te grupy mają

5:23stałą wysokość, dzięki czemu te karty są równe i fajnie wyglądają.

5:27Możesz sobie oczywiście posprawdzać na moim edytorze i odpowiednio odwzorować.

5:33A w środku, jak się domyślasz tutaj.

5:36Odnosimy się do item 1 image main first

5:39item a tutaj oczywiście item nr 2 image main first item czyli wyciągamy

5:45sobie po prostu obrazki z poszczególnych elementów.

5:49Właśnie w tej kolumnie Listing.

5:52I analogicznie oczywiście tutaj.

5:58W tym przypadku nie korzystamy z ISIS, ponieważ gdybyśmy

6:01wybrali ISIS to by oznaczało, że to koniecznie musi mieć trzy obrazki.

6:05Ale wybieramy sobie tutaj ten operator większe bądź równe.

6:09Czyli jeżeli taki rekord w kolumnie listing posiada minimum trzy

6:13elementy lub więcej, to dopiero wtedy chcemy go wyświetlać.

6:17A więc większe równe 3.

6:19I tu, jak widzisz zresztą tutaj po samych

6:22nazwach odnosimy się do konkretnych itemów, czyli item numer 1, a potem numer

6:252 i 3 kolejno do Image main i wyciągamy właśnie ten obrazek.

6:30Kolejną ciekawą sztuczką, którą tutaj

6:32zastosowałem jest ten element, gdzie wyświetlamy liczbę itemów.

6:37Zobacz jaki mam tutaj zapis.

6:39Odnoszę się do tak Parent group use list listing account.

6:43No to to już wiesz.

6:43To wiesz, że możemy się tak odnieść do ilości rekordów.

6:47Natomiast pamiętaj, że mamy tutaj albo

6:50jeden item jeżeli to będzie właśnie jeden rekord, albo np.

6:54items czyli liczbę mnogą.

6:56Dlatego też ja mogę powiedzieć, że jeżeli ta liczba jest równa 1,

7:00to jak widzisz mam tutaj informacje ewoluują i to jest albo noł.

7:05Czyli mogę powiedzieć, że jeżeli ta liczba

7:07jest równa 1, otrzymuje jest albo, no to wtedy Babel

7:11pozwala mi to sformatować jako tekst i w tym przypadku.

7:15To wpisujesz wartość.

7:16Jeżeli to jest teraz to jest tutaj odpowiednia informacja.

7:19Czyli jeżeli tam jest jeden item to ja na sztywno wpisałem onet item.

7:24Jeżeli to nie jest 1 item czyli 0, 2, 3 itd.

7:29Na pewno nie jeden, to wtedy odnosimy się

7:31właśnie do konta i wpisuję na sztywno items.

7:34W ten sposób taki dynamiczny zapis zamiast stosować condition, ale tutaj

7:39możesz go właśnie zastosować w takiej formie.

7:41To jest taka skrócona forma, z której bardzo często się korzysta.

7:44Jeżeli jesteś w stanie osiągnąć tutaj

7:47coś, co ewoluuje do snow, to wtedy możesz sobie to sformatować jako tekst.

7:53Mam nadzieję, że rozumiesz jak to działa.

7:55Tu jest wartość dla jest, tu jest wartość dla nauki.

7:58I tutaj oczywiście znów możemy się odnosić

8:00do dynamicznych wartości albo wpisywać je na sztywno.

8:03To by było tyle jeżeli chodzi o całą tą grupę.

8:07A w zasadzie ten riff zawiera element.

8:10Jak widzisz nie ma tutaj nic trudnego.

8:11Kilka fajnych sztuczek, dzięki czemu uzyskaliśmy całkiem interesujący efekt.

8:16Ale zanim zakończymy tą lekcję, omówmy sobie jeszcze jak działa to właśnie

8:20dynamiczne wyświetlanie elementów, które zastosowaliśmy.

8:22Jak pamiętasz tutaj dla tej listy, dla całej tej repeat grupy.

8:26Nie mamy określonej liczby rzędów, nie mamy określonej liczby kolumn.

8:30Natomiast powiedzieliśmy Babel, że taka

8:32kolumna może mieć minimalnie 260 pikseli tutaj na YouTube.

8:37Jeżeli przejdę sobie do całej takiej karty.

8:40Jak widzisz nie mam tutaj żadnych jakiś

8:43maksymalnych szerokości, żadnego fit, fit tu content.

8:47W ten sposób Babel będzie działał

8:49tak, że postara się wszędzie wyświetlić jak najwięcej takich kolumn.

8:54Tu mamy 3, więc troszkę je rozciągnął, ale

8:56nie mają teraz 260, tylko na pewno trochę więcej.

9:00Natomiast jeżeli będę sobie zmniejszał tutaj tą rozdzielczość.

9:04Zacznijmy może właśnie od tej laptop owej 1440p.

9:08Tak, widzisz, one mi się teraz tutaj mieszczą.

9:11Natomiast jeżeli będę sobie zjeżdżał,

9:14to to się okazało, że Babel dotarł do tego minimum komórki 260 pikseli.

9:20Więcej już nie był w stanie jej ścisnąć.

9:22Określiliśmy taką minimalną szerokość

9:24danej kolumny, a więc wyświetlił ten rekord, który już się tutaj nie mieścił.

9:30W kolejnym rzędzie i tak to właśnie będzie działało.

9:33W ten sposób, jak widzisz, te komórki się

9:35tutaj zmniejszają, a ja mogę sobie zjeżdżać rozdzielczością.

9:40I ta lista będzie mi tutaj automatycznie się dopasowywać do szerokości.

9:43Jest to całkiem fajny efekt.

9:46Widzisz, tutaj to odpowiednio sama wskakuje.

9:48Nie musimy tak naprawdę nic więcej robić.

9:51Wszystko zadba Babel.

9:53I to ustawienie, które nadaliśmy właśnie dla całej tej repeat grupy.

10:00To by było na tyle, jeżeli chodzi o widok na wish list.

10:03W kolejnej lekcji powinniśmy się zająć

10:05widokiem Messages, ale tego nie zrobimy z jednego prostego powodu.

10:09Do tej pory pracowaliśmy wspólnie.

10:11Po Kings stworzyliśmy właśnie tutaj, razem pracując nad tą sekcją od podstaw Review i

10:16jeśli wdrożyłem sam, a Ty będziesz mógł je odwzorować albo po

10:21prostu wymyślać coś całkowicie innego, jeżeli tylko będziesz chciał.

10:25Natomiast w przypadku Messages chciałbym,

10:27abyś popuścił wodze fantazji i wdrożył tę sekcję sam.

10:30Ja ją specjalnie nie wdrażam, abyś się nie wzorował na żadnym moim rozwiązaniu.

10:35Nie chcę Ci narzucać żadnego kierunku pracy.

10:37Możesz wykorzystać weekendy, które polecałem na początku tego kursu.

10:42Możesz poszukać jakiś innych darmowych w sieci.

10:45Możesz tutaj jako wzór wykorzystać na przykład swój ulubiony komunikator.

10:49Cokolwiek postanowisz, trzymam kciuki za to, żeby Ci się udało.

10:53Myślę, że jesteś na takim etapie, że wdrożenie po prostu takiej pojedynczej

10:56sekcji nie powinno stanowić dla Ciebie żadnego problemu.

11:00Jeśli uda Ci się w jakiś fajny sposób zdynamizować, ja będę szczerze dumny.

11:04A jeżeli postanowisz po prostu stworzyć to

11:07po najmniejszej linii oporu, tak jak ja zrobiłem na With this, to też ok.

11:11Nie ma tutaj też złych rozwiązań, a przynajmniej taką mam nadzieję.

11:15A jeżeli wdrożysz tutaj swój widok

11:18ten Łukasz z Messages, to podziel się nim ze mną.

11:20Z chęcią zobaczę jakie efekty osiągnąłeś.

11:23A ja już teraz dziękuję Ci za uwagę i widzimy się w kolejnej lekcji.