MVP aplikacji w rekordowym czasie z Bubble: Dodajemy logikę do obsługi listings
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
W tej lekcji kontynuujemy naszą pracę z listingu.
Jak widzisz, ja w międzyczasie uzupełniłem sobie tutaj nasz Option set Listing rules.
Dlatego też jeżeli chcesz, możesz zatrzymać w tym momencie
odtwarzanie tego video i uzupełnić go zgodnie z tym co ja tutaj wpisałem lub po
prostu skorzystać z linku do mojego edytora i skopiować sobie te wartości.
Ja tutaj dodałem również odpowiednie ikonki, natomiast z góry zaznaczam, że one
są w pełni randomowe i nie do końca pasują właśnie do tych opcji.
Tak więc dam Ci chwilę, abyś mógł sobie teraz to odpowiednio uzupełnić.
OK, mam nadzieję, że wykonałeś zadanie.
Natomiast zanim przejdziemy do dalszej pracy jedna bardzo ważna rzecz.
Chciałbym na chwilę wrócić do Privacy Rules do naszego listingu.
Jak pamiętasz, mamy tutaj opcję, która pozwala nam edytować.
te pola poprzez Allow Auto binding.
O ile admin to jest tutaj zrozumiałe, tak tutaj ustaliliśmy, że
owner to jest zalogowany użytkownik i dodatkowo ustawione jako host, czyli
w tym polu właśnie na listingu.
Natomiast jak pamiętasz w poprzedniej lekcji po kliknięciu w button New listing
w tych obu miejscach tylko tworzymy nowy listing, ale nie ustawiamy tego pola host.
To oznacza, że nie będziemy mogli potem w formularzu edytować tych
pól poprzez auto binding. Jak to rozwiązać?
No tak, teraz musielibyśmy namierzyć wszędzie te workflow, gdzie
właśnie tworzymy taki listing.
Nasza aplikacja na chwilę obecną nie jest jakoś bardzo mocno skomplikowana,
ale znów przeszukiwanie tego wszędzie, zastanawianie się, gdzie ja wykorzystałem
taką akcję może być trochę skomplikowane.
Dlatego ja pokażę Ci dużo prostszy sposób.
Mega super przydatne narzędzie w babol jakim jest ta ikonka search.
Mamy tutaj opcję Search Tool, czyli przeszukiwanie wewnątrz naszej aplikacji.
Co ja potrzebuję? Potrzebuję Action Type.
Jaki rodzaj Create new Finka Widzisz, Tutaj są wszystkie akcje jakie masz
dostępne właśnie w edytorze Babel.
Ja chcę Create a muffinki i ten link, czyli ten element nazywa się Listing.
Klikam Search.
Jak widzisz mam od razu te miejsca, w którym to rzeczywiście robimy, czyli mogę
sobie kliknąć tutaj Zostajemy przeniesiony od razu właśnie do
Choose Listing Empire i to, co chcę robić.
To tutaj przy tworzeniu nowego listingu ustawić pole Host na Parent user.
Teraz klikam tutaj.
Przenoszę się do Dashboard here i tutaj robimy dokładnie to samo, czyli host
to jest parent usera.
OK, skoro te poprawki mamy już tutaj wdrożone, możemy sobie
zamknąć App Search Tool.
Jak widzisz jest on super przydatny i bardzo często z niego korzystam.
Pewnie jeszcze nie raz do niego wrócimy.
Zamykamy.
Przechodzimy teraz na stronę New Listing i oczywiście musimy dodać odpowiednią
ilość GB do obsługi naszego listingu, a więc do strony Design owej.
I pokażmy Step nr 1 co tutaj się dzieje.
OK.
Wybieramy w tym przypadku odpowiedni property type i odpowiedni typeof place,
więc musimy nadać właściwe workflow.
Klikam na ten button property type btn add workflow
i od razu zalecam ustawić workflow folder.
W tym przypadku oczywiście na step 1.
W ten sposób mogę sobie przejść tutaj i wybrać tak.
Zmieniam kolor tła na zielone.
Co robimy? Po kliknięciu w button?
Chcemy oczywiście zmienić odpowiedni element w naszej bazie danych,
czyli make changes link.
Jest to Parent page listing i będzie to property type.
Jego wartość ustawiamy na Parent.
A jest Listing Property type.
Wracamy do designu i to samo robimy dla typow plaze.
Zielony Step 1.
Możemy sobie skopiować ten krok, wstawić go tutaj
i oczywiście odnieść się do właściwej kolumny, czyli w tym
przypadku typeof place.
To jest wszystko, co musieliśmy zrobić kroku numer 1.
A więc ukrywamy ten element.
Pokazujemy krok numer 2.
Jak się domyślasz, musimy zrobić dokładnie to samo, czyli ustawić odpowiednie
wartości dla Test Number, number i number.
A więc nie przedłużamy.
Add Workflow Green Step nr 2.
Na razie zostawmy to w ten sposób.
Wróćmy do designu.
Zróbmy to samo tutaj.
Green Step 2 i jeszcze ten przycisk.
Teraz mogę sobie przejść tutaj i wkleić tutaj.
To wartość wcześniej skopiowana i tylko wybrać właściwe kolumnę, czyli
w tym przypadku będzie to pass number.
Wklejam i będzie to oczywiście Pets Number.
Wklejam oczywiście gest number.
W ten sposób krok numer 2 też mamy gotowy.
Możemy zminimalizować to, ukryć, pokazać step numer 3.
Tu w zasadzie nic nie musimy robić, bo już odpowiednio wpisaliśmy te wartości poprzez
auto binding i ustawiamy City oraz Price.
Skoro tak, to przechodzimy do kroku nr 4.
Co tu się działo?
Tu mamy mapkę, którą też już ustawiliśmy, a więc nic nie musimy robić.
Krok numer 5.
Tutaj mamy menu Cities i Features.
Jak się domyślasz, znów będziemy musieli dodawać te wartości,
a w zasadzie ustawiać je dla tych kolumn, a menu i features dla naszego listingu.
Ponieważ jest to lista, to będziemy robić niemal dokładnie taką
samą operację jak robiliśmy brandingu dla języków, czyli
będziemy dodawać taki element do danej listy, jeżeli go tam nie ma, albo
usuwać po kliknięciu jeżeli tam był.
Zaraz zobaczysz, że jest to niesamowicie prosta i bardzo, bardzo zbliżona do tego,
co już robiliśmy z wykorzystaniem custom states.
A więc klikam na amen Citigroup, klikam Add Workflow.
Dajmy sobie kolor zielony.
To jest step numer 5, kolor zielony.
Przejdźmy do tego kroku.
I tak po kliknięciu w taką grupę chcę dodać to do listy.
Kiedy?
Tylko wtedy, kiedy.
Parent page listing a menu This dataset contains
parent sales of listing a analysis.
Czyli jeżeli ta lista nie zawiera tej wartości, to co chcemy zrobić?
Oczywiście dodać ją do tej listy. A więc.
Make changes to a swing kolejno target, patch, listing and this tam.
W Custom State korzystaliśmy z klasy Item, a tu możemy wykorzystać
po prostu Add i parent.
SSL a scripting a Mantis.
To co chcę zrobić teraz to skopiować to wkleić, zmienić sobie kolor na czerwony.
W tym przypadku warunek będzie mówił, że jeżeli taka lista już zawiera
taki element, to tutaj zamiast Add wybieramy Remove.
Jak widzisz super proste i bardzo intuicyjne.
Wracamy teraz do grupy Feature Group i musimy zrobić dokładnie to samo.
Green Step 5.
Karen Karen Page Listing Features.
Ta Zend Container.
Zawiera tego elementu.
Changes swing.
Features add car and other listing feature.
Kopiujemy, wklejamy, Zmieniamy kolor na czerwony.
Tutaj zmieniamy warunek.
A tu oczywiście odejmujemy.
To jest wszystko, co mieliśmy do zrobienia w kroku numer 5.
Była to dosyć powtarzalna akcja, ale jak widzisz, niestety było to
wymagane przez nasze workflow.
Mamy krok numer 6.
Tutaj mieliśmy. Aha.
Tutaj dodawaliśmy sobie ten ukryty picture app loader, a więc musimy dodać
do tego odpowiednie workflow.
Ja sobie skopiuje nazwę tylko tego elementu.
Przejdę od razu do workflow nr 6.
Ponieważ odnosimy się do routera, to robimy to w ten sposób poprzez
element and input z value change.
Wklejam ten element, czyli Image Main picture app Loader.
Dajmy tu kolor zielony, żeby nam się to wyróżniało.
I oczywiście to co chcemy zrobić to taki obrazek, który użytkownik wgra
od razu przypisać do naszego listingu.
Czyli image main.
Tutaj możemy ustawić poprzez set list albo Add.
To będzie tak tylko jeden obrazek.
Możemy wybrać set list i to będzie list Picture Loader.
Value Settings nie zadziała, bo będziemy musieli to zamienić.
Damy radę to zamienić jako lista? Nie damy rady.
Więc zamiast setlisty po prostu ADD i już teraz to działa, czyli image main add,
ten konkretny obrazek.
I jeszcze na koniec oczywiście musimy zresetować tą grupę,
żeby ten obrazek nie pojawił się w tej, która ruderze czyli Image Main
Group i tą grupę sobie restartujemy.
Krok 6 za nami.
Jesteśmy coraz bliżej końca.
Przechodzimy do kroku numer 7.
Tu będziemy mieć najwięcej pracy.
Ja już zresztą poczyniłem drobne operacje, a mianowicie pozmieniałem
nazwy na właściwe.
Przede wszystkim cała ta grupa jest teraz Images List Wrapper group,
czyli zawiera ona właśnie.
Jak widzisz tutaj ten element z tą grupą z repeat group oraz ten przycisk.
Tutaj też zmieniłem nazwę na images list grup kolejno images list Inner.
To jest ta grupa, która w środku dopiero zawiera naszą scripting grupę.
Zrobimy tak, żebyś tutaj lepiej to widział.
Jak to teraz wygląda.
Tutaj też nazwę zmieniłem po prostu na Image Group, a tu mamy Image Image.
Trochę dziwna nazwa, ale niech będzie tak.
Dodatkowo wywaliłem tą ikonkę, która była tutaj dodana.
Zostawiamy tutaj sam obrazek.
I teraz, żeby tutaj wielu plików nam zadziałało będziemy
musieli wykorzystać zewnętrzny plugin.
Ja widziałem kilka rozwiązań.
Jednym z nich było np.
dodawanie pojedynczych plików poprzez pixela loadera.
I tak jest to jakieś rozwiązania, natomiast raczej nie wydaje mi się
zbyt intuicyjne dla naszego odbiorcy.
A która jak się pokażę też niestety nie jest idealna, ale moim zdaniem sprawdza
się całkiem nieźle i początek nam wystarczy.
Oczywiście jeżeli tylko starczy Ci czasu i ochoty, to zachęcam Cię do tego, abyś
dopracował takie rozwiązanie, albo może zamierzył jakiś inny plugin
i wdrożył coś fajnego.
A więc przechodzimy do pluginów i plugin, którego potrzebujesz nosi taką nazwę
File and Multi File Uploaded po IP.
Proszę napisz go teraz i zainstaluj w swojej aplikacji.
OK, skoro już go dodaliśmy, to wracamy do designu.
Ten element pojawił się tutaj na tej liście dostępnych elementów.
Ja go sobie muszę wybrać i wstawić tutaj.
On nie będzie widoczny po załadowaniu się strony, natomiast musi
być obecny na stronie.
Dlatego też ja go sobie tutaj umieszczę na środku, żeby on
nie wpływał mi na te buttony.
A tutaj nic się nie dzieje.
On jest umieszczony w tym miejscu, mogę go sobie nawet, żeby łatwiej
było w niego trafić.
I teraz tylko zmienia nazwę.
To będzie images list i zostawią to fire and define.
To jest pierwsza rzecz, którą musimy zrobić.
Teraz przechodzimy do ustawień.
Tutaj mamy maksymalny file size megabajtów.
Ja sobie robię to w ten sposób.
Tu wpisuję 20.
Tak, pozwalamy na ładowanie plików.
Do tego pola zaraz wrócimy.
Tutaj musimy podać, jakie rozszerzenia plików z obrazkami będziemy akceptować.
Wymieniamy je po prostu po przecinku, więc będzie to jpg.
JPG Dodajmy tu jeszcze PNG i może web.
Takie najbardziej popularne.
Dodatkowo jaki rozmiar, taki jeden pojedynczy obrazek może mieć.
Dajmy tutaj 2 MB.
Ile maksymalnie chcemy pozwolić grać użytkownikowi plików?
U nas jest to 6.
Resztę nie zmieniamy lub chwilowo nic więcej nie robimy.
Teraz tak.
To co musimy zrobić to tutaj wstawić nową grupę.
Wstawiamy ją właśnie tutaj i zbierzmy grupę razem z tym betonem, czyli Group.
Dajmy kolumn i niech to będzie np images list bottom group.
Obojętnie jakakolwiek nazwa.
Teraz to co chcę zrobić to tak tutaj dać odstęp między tymi elementami np.
na 16 pikseli.
Teraz przechodzę do ustawień.
Do danej grupy będzie to Images List.
Grup.
Teraz za pomocą pluginu będziemy właśnie taką grupę mogli zamienić na strefę, na
która użytkownik będzie mógł przeciągnąć i upuścić pliki z obrazkami.
Niestety jej największą wadą jest to, że nie można w nią kliknąć i wtedy niestety
nie otworzy nam się Picture App Loader.
Chociaż moglibyśmy kombinować i próbować to jakoś obejść poprzez workflow, a na
razie zostawię takie natywne zachowanie.
Tak jak mówiłem, nie jest to idealny sposób, ale jeżeli znajdziesz jakieś fajne
rozwiązanie, którego udoskonalić, to oczywiście z chęcią je zobaczę.
A więc nazwaliśmy sobie tą grupę.
Kopiuję sobie nazwę, pozbywamy się minimalnej szerokości, dajmy tutaj np.
100 pikseli wysokości, zmieńmy układ na Align to parent i teraz
trochę wyróżniamy tą grupę i style.
Dajemy tutaj flat kolor może na powiedzmy neutral 25 żeby się delikatnie wyróżniała.
Zaokrąglenia narożników na 8 pikseli.
I border typu solid ustawiony na neutral 300.
To co chcę zrobić teraz to skoro mamy już taką grupę,
skopiowali sobie tą nazwę to chcę właśnie tą nazwę wkleić tutaj
jako ID takiej grupy.
Już to kiedyś robiliśmy w przypadku pluginów, także
myślę, że rozumiesz jak to działa.
Po prostu wstawiamy to tutaj.
Jeżeli nie widzisz tego pola id atrybut to musisz przejść do Settings General.
Zjechać na sam dół i zaznaczyć właśnie tą ostatnią opcję, która jest tutaj dostępna.
Ja mam tutaj to zaznaczone, tak więc Ty też powinieneś mieć, jeżeli
korzysta z mojej wersji aplikacji.
Wracamy do designu.
Skoro nadaliśmy ID już dla tej grupy dla Drop Zone Group, to teraz
wracamy tutaj do pluginu.
To samo ID przekazujemy tutaj jako drop on element.
W ten sposób plugin rozpozna w którym miejscu, a w zasadzie do jakiej
grupy będziemy wrzucać nasze obrazki.
Jeszcze to co chcę zrobić, to skopiować sobie ten tekst,
wstawić go tutaj i zmienić tylko tą wartość na drag and images.
Hero.
Nasza tutaj Drop Zona Group jest gotowa.
Teraz przechodzę do tego przycisku.
Zmieniam sobie styl na Danger.
Zmieniam text na Clear All photos.
I jeszcze tutaj jego nazwę Images.
List Clear btn.
Zaraz zobaczysz jak to będzie wszystko działało.
Tak.
Teraz użytkownik będzie mógł przeciągnąć i wrzucić tutaj te pliki.
Ona nie zostaną od razu wgrane do bubla.
W ten sposób użytkownik nie będzie musiał czekać aż one się w tym momencie załadują.
Tak działa większość innych pluginów, że po prostu musisz czekać, aż każdy plik po
kolei zostanie wgrany, co niestety zajmuje sporo czasu.
Tutaj działa to troszkę inaczej.
Najpierw się tutaj przerzuca te obrazki i w ten sposób poprzez ten plugin
możemy mieć dostęp do ich podglądu.
Nie mam natychmiastowego jak to zrobić.
Wracamy tutaj do tej reptile grupy, czyli Images Scripting Group
i zmieniamy typeof Content.
Nie będzie to OST listing, nie będą to też obrazki.
Będzie to tekst.
Tak, wiem, wiem, wiem, że wygląda to dziwnie.
Mówimy o obrazkach, a Ty wstawiasz tekst.
Zaraz zobaczysz jak to działa.
Odnosimy się do.
File and multi file.
Files preview image Base64.
Obrazki są tutaj zakodowane właśnie w Base64, dlatego musimy
wybrać tutaj ten tekst.
Teraz przechodzę do tej grupy i tutaj wszędzie zmieniam to na tekst.
I tutaj ten obrazek też.
Mimo, że jest to obrazek, to po prostu tutaj wybieramy sobie Parent group text,
czytam text tak Parent group text O właśnie ta opcja
i teraz nam to już zadziała.
Żeby Ci to udowodnić mogę sobie przejść do edytora i pokazać Ci jak to działa.
Tu już testowałem, więc wracam sobie do Dashboard.
Jestem zalogowany jako host.
Mogę teraz kliknąć New listing i taki nowy listing zostanie utworzony.
Parent user czyli ja zostałem przypisany jako host do niego.
I teraz możemy sprawdzić czy to rzeczywiście będzie działało.
Wybierzmy tutaj jakieś opcje.
Jak widzisz mamy odpowiednie zaznaczenie za pomocą conditions, czyli
wybierzmy cokolwiek.
Jak widzisz nie działa to super extra szybko.
Niestety nie tak fajnie jak custom staty, ale trudno, musimy się na to zgodzić.
Klikam next step, wpiszę tutaj jakąś lokalizację.
Niech to będzie np.
San Antonio w Teksasie.
120 dolarów za noc.
Klikam Next step up.
Już mi się od razu dostosowała.
Wyciąga sobie City.
Pokazuje właściwe miejsce na mapach Google'a.
Wybierzmy cokolwiek.
Powiedzmy, że tak.
Teraz wgraj tutaj fajny image.
Ja wybieram np..
To będzie główny obrazek.
Klikam na next step.
Jak widzisz mam tutaj grupę i niestety nie mogę tutaj
kliknąć i otworzyć picture loadera.
To co muszę zrobić to wyjść z widoku pełno ekranowego i teraz po
prostu przeciągnąć obrazki.
Powiedzmy, że zaznacza sobie te 3. Wrzucam.
Jak widzisz od razu pojawiły.
Tak właśnie działa ten preview.
Obrazki jeszcze nie zostały wgrane.
One są tymczasowo przechowywane w naszym pluginie, a my od razu
mamy właśnie tutaj podgląd.
I to co chciałbym zrobić, to tak dostosować właśnie jeszcze
sobie te dwa elementy.
W jaki sposób chciałbym właśnie tą grupę wyświetlać?
Tylko wtedy, kiedy tu jest mniej niż 6 obrazków,
ponieważ maksymalnie możemy wybrać 6. Na razie wgrałem 3.
Jeżeli teraz chciałbym wrzucić kolejne 4, czyli o jeden za dużo,
a plugin nie tutaj oczywiście to jest problem z tym przyciąganiem,
tylko oczywiście tutaj w to miejsce to plugin grał mi tylko 3
i ograniczył to do sześciu.
I teraz chciałbym, żeby użytkownik przede wszystkim nie widział już tej
grupy, ponieważ nie może dograć więcej obrazków.
Natomiast pojawiłby się ten przycisk i po jego kliknięciu mógł
sobie wyczyścić obrazki.
Wgrał, uznał je, może jednak nie chce je sobie wszystkie wyczyścić i wtedy
na nowo pojawi mu się to pole i będzie mógł wgrywać właśnie nasze obrazki.
Natomiast co się stanie dalej?
Wrzuciliśmy te obrazki.
Mamy tutaj ich podgląd.
Użytkownik uznaje ok.
Takie super te chcę zachować.
Po kliknięciu w next step dopiero chce pobrać takie obrazki z pluginu i
rzeczywiście wgrać do blabla i ustawić jako właśnie listę dla pola images list
I jeżeli tak się stanie, to wtedy zamiast tego podglądu będę chciał wyświetlać
właśnie takie obrazki bezpośrednio z naszego data listing
i dodatkowo znów wtedy wyświetlać ten przycisk, który tym razem pozwoli
właśnie wyczyścić nasz data type listing.
Okej, wiem, że to brzmi dosyć skomplikowanie, ale zaraz rozbijemy to na
czynniki pierwsze i wdrożymy krok po kroku do naszej aplikacji.
A więc wracamy do edytora.
Przede wszystkim przechodzimy do Images List.
Domyślnie mamy jako tutaj Data Source właśnie tekst i podgląd tych obrazków,
ale poprzez Additional możemy wskazać jeszcze inny data Source.
W zależności od tego, czy ten warunek będzie spełniony, czyli
tylko wtedy, kiedy Current page listing images list
count, czyli liczba takich obrazków jest większa równa 1, czyli jest
tam przynajmniej jeden obrazek.
Data Source zmieniamy właśnie na Shared page Listing images List.
Czyli jeśli jeszcze tych obrazków nie wygraliśmy, to wyświetlamy podgląd, a
jeśli już je wygraliśmy, to chcemy wyświetlić właśnie te wygrane.
Dodatkowo całą grupę images List inner, czyli tą zawierającą właśnie w środku
torpedy grupę chce na początek ukryć.
Zaznaczamy collapse an hidden i chcę ją pokazywać tylko wtedy, kiedy rzeczywiście
taki repeat id grupy miałby wgrany chociaż jeden obrazek.
Nie ważne czy jest to podgląd, czy jest to obrazek wyciągany
bezpośrednio z bazy danych.
Możemy więc tutaj wybrać RGB, czyli images list, repeat group, list of text,
czyli po prostu lista elementów w środku.
Count musi być większe równe 1.
Wtedy chcę pokazywać właśnie taką grupę.
Tą część mamy tutaj już gotową.
Przejdźmy więc teraz do tej drag and group, kiedy chcemy ją wyświetlać.
Przede wszystkim tak jak mówiłem wtedy, czyli ukrywamy na załadowanie
strony collapse in hidden condition.
Kiedy images list, czyli lista elementów, taki repeat link grupie
count jest mniejsza od sześciu.
Czyli użytkownik wrzucił sobie cztery obrazki.
Wyświetlamy ten szybki podgląd, on może jeszcze dograć kolejne dwa
właśnie poprzez taką grupę.
Natomiast chcę tą opcję zablokować. Chcę ukryć to pole.
Jeżeli będziemy tu wyświetlać obrazki już bezpośrednio z bazy danych, niestety
wtedy nie zadziała to zbyt fajnie.
Tutaj będzie sobie wrzucał obrazki, a my wyświetlamy te obrazki
bezpośrednio z bazy danych.
To się będzie ze sobą gryzło.
Dlatego też muszę tutaj dodać kolejny warunek end.
End Karen page listing images list count jest mniejsza od jednego, Czyli
jeżeli jeszcze nie nagraliśmy tutaj do naszego listingu żadnego obrazka
do tego pola, to znaczy, że chcemy wyświetlać podgląd.
Skoro tą drop area mamy, a w zasadzie drop mamy już gotową, to teraz zróbmy
to samo tutaj dla przycisku.
Znowu przechodzimy do Layout.
Ukrywamy go collapse on hidden.
Ja tutaj wybrałem. Oczywiście, że nie.
Wybrałem this element is visible.
Oczywiście musi to być dla tej images lib strap on
tutaj wybrana na condition, ale zawsze zapominam, że pewnie Tobie
też się nie raz to zdarzyło.
Wracamy tutaj.
Dodajemy condition i chcę kiedy chcę go wyświetlać.
Znów odnoszę się do Images list repeat ing Group.
Jeżeli liczba tych obrazków jest równa 6, czyli użytkownik wgrał maksymalnie te 6
obrazków dostępnych i widzi ich podgląd na tym przycisku się pojawia i będzie
mógł je sobie wszystkie wyczyścić.
Albo wtedy, kiedy Karen Page Listing
images list count jest większe bądź równe 1,
czyli jeżeli został tam wgrany chociaż jeden obrazek, będziemy go wtedy
pobierać bezpośrednio z bazy danych.
Znów za pomocą clear and photos będziemy mogli sobie to wyczyścić.
Natomiast żeby te wszystkie dane, oczywiście elementy z
Visible nam zadziałały.
No to musimy dodać jeszcze odpowiednią logikę.
I w tym przypadku powiedziałem Ci, że po kliknięciu w ten button, czyli przejściu
do następnego kroku, będziemy właśnie chcieli taką tymczasową
listę wgrać do bubla i ustawić jako images list.
A więc klikam sobie na tym przycisk Wybieram API Lines Edit Workflow.
Będzie to step numer 7.
Mamy tutaj to już wcześniej ustawione.
Chwilowo przechodzimy tylko do kroku 8, a więc przejdźmy do właściwego folderu
i to co chcę zrobić tutaj to wybrać element action.
Tu mamy ten nasz element i wybieram tutaj tą opcję Save a file and pull divided.
I tak pobieramy obrazki właśnie z tego elementu na naszej stronie.
Tutaj musimy określić jaką nazwę będzie miał taki pojedynczy obrazek.
Tu masz jeszcze taką opcję.
Możesz sobie sprawdzić w dokumentacji dodawanie random owego stringu.
Na koniec ja sobie to zobaczę i zrobię to samemu.
Chcę, aby taki obrazek miał następującą nazwę.
To będzie tak listing.
Pobiorę sobie ID takiego listingu, czyli Current Page Listing UniCredit.
ID.
Od kliku jak klikam w to miejsce dodaje znowu podkreślenie dolne i wybieram tutaj
formula opcją Kalkulator Formula i mogę sobie tutaj wygenerować random string.
Chce tutaj żeby to były 4 znaki.
Niech używa literek tego i tego.
Dlaczego robimy to w taki dziwny sposób?
Otóż jeżeli użytkownik Twojego serwisu zgłosi, że chce
usunąć swoje konto całkowicie, a wraz z nim wszystkie rzeczy
jakie Ci udostępnił, czyli wszystkie obrazki jakie wgrał, to właśnie
takie nazewnictwo poprzez Unique ID pozwoli Ci namierzyć właśnie za pomocą
jego listingu ów wszystkie obrazki do nich przypisane.
Ażeby Babel nie miał problemu, że one się tak samo nazywają, czyli
listing i ten sam ID.
Na koniec dodajemy tutaj jakiś randomowy string.
Dobrze.
W ten sposób zapisaliśmy sobie takie obrazki.
I to co musimy jeszcze zrobić, to nasłuchiwać tutaj na akcje, że
one rzeczywiście zostały zapisane.
Przechodzimy więc tutaj.
Wybieramy element i mamy tutaj tą opcję File and modify file saved.
Dajmy tutaj na przykład ten kolorowy parasol.
I tak uniknęliśmy w ten button.
Wybraliśmy tą opcję zapisania tych obrazków do bubla.
Ta akcja uruchamia się wtedy, kiedy one wszystkie rzeczywiście zostaną zapisane i
są już właśnie tam wgrane, więc możemy wybrać teraz AK Changes to Fink.
Nothing.
Odnieść się do Images List i ustawić sobie tę listę, czyli set list
na te obrazki, czyli.
Images list files Multiple uploaded label files.
Teraz rzeczywiście dopiero takie pliki zostaną wgrane do bubla.
Jedyne co nam jeszcze zostaje to dopasować, a w zasadzie dodać workflow
do naszego betonu, który będzie czyścił te zdjęcia.
Znów workflow, tym razem kolor czerwony Workflow Order 7.
Przechodzę tutaj.
Tak, chciałbym, aby ten przycisk w pierwszej kolejności
zadziałał tylko wtedy, kiedy Current page Listing
Images List Count jest mniejsze od jednego, czyli
jeszcze nie wybraliśmy tych obrazków.
Na razie widzimy na tej repeat jing grupie tylko i wyłącznie właśnie ten podgląd do
tego base 6400 i wtedy kliknięcie w taki przycisk ma robić to odnosimy się znów do
elementu Actions file and multi file i restartujemy po
prostu te obrazki, które pobraliśmy, czyli restartujemy ten plugin.
W ten sposób one tam znikną.
A ta Rapid link grupa nam się automatycznie wyczyści.
Kopiuję, wklejam i tutaj zmieniam warunek.
Jeżeli te obrazki uzbieraliśmy, czyli będzie ich przynajmniej 1,
to tym razem nie restartujemy tego pola, tylko to co robimy zmieniamy oczywiście
w naszej bazie danych, czyli nasz listing.
Przechodzimy do Images List i tym razem wybieramy po prostu Search
list, a więc usuniemy te wszystkie obrazki.
I to w zasadzie jest wszystko, co musieliśmy tutaj zrobić.
Możemy sprawdzić, czy to zadziała.
Natomiast żeby mieć pewność, zobaczmy, czy jeżeli przejdziemy do podglądu,
Babel sobie z tym poradzi.
OK, wydaje mi się, że jesteśmy w tym elemencie, który właśnie utworzyliśmy.
Atakowaliśmy wcześniej, bo ponieważ mamy zapisane te wartości.
Jak widzisz poprzez słowo binding i poprzez
zmianę tego elementu w bazie danych wszystko to zostało zapisane
i pobierane jest w momencie.
OK, to się zgadza, to się zgadza.
Tak, mamy obrazek.
OK, mamy tylko parę.
Nie widzimy tutaj tej grupy z listing GM z tymi obrazkami.
OK, spróbujmy dodać.
4.
OK. Area nadal mi się pojawia.
Spróbujmy dorzucić jeszcze 2.
Ramki zniknęła i ok.
Pojawiły się przycisk.
Teraz po jego kliknięciu powinienem móc wyczyścić sobie właśnie
te wszystkie zdjęcia. Klikam.
Wygląda na to, że działa.
Zniknęło to. OK, a więc jeszcze raz dorzućmy tutaj np.
2 zdjęcia.
I klikniemy Next.
Mamy tutaj ten pasek informujący o tym, że coś się dzieje w bazie danych.
OK, wróćmy sobie.
Jak widzisz te obrazki już nam się tutaj wyświetlają.
Mamy przycisk, natomiast zerknijmy, czy ono rzeczywiście zostały
dodane do naszej bazy danych.
Możemy więc wrócić do edytora, przejść do Data AppData.
Mamy ten jeden listing, na którym pracujemy.
Przejdźmy do jego edycji.
I jest.
Mamy images lib. Mamy tutaj dwa obrazki.
Mamy image main jeden obrazek.
Wszystko działa tak jak powinno.
A więc jak widzisz to rozwiązanie zadziałało.
Jeżeli teraz kliknął bym Clear All photos to te obrazki zostaną usunięte
i znowu będziemy mogli je wgrać na nowo.
Klikam Next step.
Tutaj mamy tylko i wyłącznie możliwość podania tytułu i listing.
Auth Listing.
Klikamy Next step OK i musimy jeszcze tutaj dodać
odpowiednie workflow do ustalania tych ról oraz do publikacji.
A więc wracamy do edytora do designu.
Zamykamy krok numer 7.
Krok numer 8 nas nie dotyczy, bo tam mamy tylko auto building.
Wybieramy 9 i znów musimy zrobić dokładnie to samo,
co robiliśmy dla Benitez i dla Features.
Czyli tak kolor zielony step nr 9.
Podajmy tutaj odpowiedni warunek, czyli can't page listing.
rules.
Contains current all of listing rules a swing changes to a swing.
Znów wszystko powtarzalne.
Same dodawanie kopiujemy i ustawiamy odejmowanie.
Add contains i tym razem usuwamy taki element i to co nam jeszcze zostaje.
No właśnie. Kliknijcie tutaj w Publish.
Zanim przejdziemy tutaj do Dashboard i z powrotem, to to, co chcę zmienić, to
Data Fink, Make Changes Fink.
Robimy to w tym momencie czy po przejściu?
Dajmy tutaj od razu Current page Listing.
Status.
Jak się domyślasz, zmieniamy go na published.
I wydaje mi się, że to wszystko, co musimy zrobić.
Tam na poprzednich krokach uzupełniliśmy cały ten listing, a tutaj tylko nie
zmieniamy, że on został opublikowany.
Czyli wracamy.
Do podglądu odświeżamy.
Powinniśmy wrócić do tego samego rekordu, czyli możemy przejść przez kolejne kroki.
Oczywiście mógłbyś zadbać.
Szczerze Cię do tego zachęcam, abyś dodał taką funkcjonalność, która
będzie sprawdzała, czy rzeczywiście te wartości zostały wybrane
i dopiero wtedy użytkownik będzie mógł kliknąć następny step.
Natomiast my sobie ułatwiamy życie, a ta lekcja i tak jest wystarczająco długa.
Klikamy Next Step.
Tutaj jest ok.
Tu mamy wgrane obrazki, więc wygląda na to, że też jest ok.
Tu nazwy się zapisały.
To dajmy tutaj smoking i zachowanie ciszy. Klikam Publish.
I zostałem przekierowany tutaj do naszego dashboard.
A później będziemy musieli oczywiście zadbać o to, aby wyświetlać rzeczywiście
te listing, które dany host sobie wystawił.
A więc dziękuję za uwagę i widzimy się już w kolejnej lekcji.