MVP aplikacji w rekordowym czasie z Bubble: Wishlists - design i logika
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?
Rozwój naszej aplikacji zmierza w dobrym kierunku, a nas w tej lekcji czeka dodanie
kolejnej bardzo ważnej moim zdaniem funkcjonalności.
Oczywiście wdrożymy ją w możliwie jak najprostszej wersji.
I tak starałem się ją delikatnie rozbudować poza to, co z reguły
pokazywane jest w innych tutorialach.
Natomiast pamiętaj, że wszystko to, co budujemy stanowi platformę
do dalszego rozwoju.
Tak więc jeśli skończysz kurs i uznasz, że ta funkcjonalność, którą tutaj
przygotowaliśmy, to za mało, to oczywiście będziesz mógł ją
rozbudować we własnym zakresie.
Natomiast jest ona na tyle prosta moim zdaniem, że ja tutaj część operacji,
zwłaszcza tych takich bardziej nudnych, typu budowanie kolejnych elementów i
wdrażanie designu, już sobie przygotowałem między lekcjami, tak aby nie zanudzać.
Myślę, że na tym etapie nauki będziesz w stanie już sam wdrożyć odpowiednie Poppy i
odwzorować to, co ja już teraz przygotowałem.
Ale nie przedłużamy, nie przystąpimy do działania.
Celem tej lekcji będzie oczywiście umożliwienie użytkownikowi dodania
ulubionej oferty do jego wishlisty.
A więc zaloguj się jako Gaston, ponieważ tylko goście będą mieli taką
możliwość, czyli login demo Guest.
Przechodzimy do widoku Wish list.
Jak widzisz, tutaj już się pojawiły pewne zmiany.
Przede wszystkim dałem użytkownikowi możliwość tworzenia nowej listy.
Tutaj z tego poziomu oczywiście moglibyśmy taką funkcjonalność
dodać również w momencie, kiedy użytkownik klika w ikonkę z serduszkiem.
Ale ja uznałem, że zrobimy to możliwie jak najprościej.
A więc tutaj mogę teraz kliknąć i utworzyć taką nową wish listę.
Natomiast żeby ją w ogóle utworzyć, musimy oczywiście dodać odpowiedni
data type w naszej bazie danych.
A więc wróćmy do edytora.
Przejdźmy do zakładki Data.
Jak widzisz, mam tutaj już odpowiedni Data Type o nazwie Wish List, który zawiera
tak naprawdę tylko cztery pola.
Pierwsze i najważniejsze to oczywiście name, czyli nazwa listy.
Jest to zwykłe pole tekstowe.
Drugie to owner, czyli właściciel takiej listy.
I tu oczywiście jako filtr ustawiamy user.
Kolejno mamy listę z listingu AMI, która będziemy dodawać właśnie do takiej listy
oraz jedno bardzo ważne pole o nazwie default.
Do tego jeszcze sobie wrócimy.
Natomiast ja chciałbym, żeby jedna z tych wish list użytkownika
była default i nie dało się jej usunąć.
A więc skoro wiemy już jak ma wyglądać ta lista, to dam Ci teraz chwilę,
żebyś sobie utworzył taki The Type.
OK, mam nadzieję, że to już jest gotowe.
To co musimy teraz zrobić, to dodać kolejne pole do listingu.
Ja tutaj nazwałem je Like by.
Jest to po prostu lista użytkowników.
Dlaczego robimy to w tej formie?
A dlaczego nie możemy np.
wyszukiwać sobie wishlisty po userzy i po listingu?
Otóż w tym przypadku największą przeszkodą będzie wydajność.
Jak pamiętasz, my już na naszej stronie wyświetlamy listing za pomocą search for
i tam pokazujemy odpowiednią ilość takich rekordów.
Natomiast jeżeli byśmy teraz wewnątrz każdego takiego listingu, wewnątrz każdego
takiego itemu chcieli wyszukać właśnie tą listę poprzez search for, to musielibyśmy
powielać takie zapytanie razy każde wyświetlony item.
Czyli wystarczyłoby, że na liście wyświetla tylko 9 itemów.
Oznaczałoby to, że wyślesz kolejnych 9 zapytań do swojej bazy danych
pytając właśnie o już listę.
Dlatego dużo lepiej jest to zrobić w ten sposób.
Jeżeli użytkownik doda taki listing to właśnie swojej wishlisty,
to automatycznie dodamy go właśnie do listy takich użytkowników
w tym jednym polu i dużo łatwiej i dużo wydajniej będzie to przeszukiwać.
Tak, wiem, że tutaj istnieje ryzyko, że bardzo szybko przekroczymy te 10 000.
No ale nic, musimy się po prostu z tym pogodzić.
A więc dodaj proszę takie pole tutaj do swojego listingu.
Ja ustawiłem je tutaj jako widoczne dla wszystkich like dbaj
i tak tą ikonkę z serduszkiem pokazujemy tylko dla zalogowanych użytkowników i
tylko dla tych, którzy mają konto typu guest.
Więc tutaj nie ma problemu, że to pole wyświetla się również dla wszystkich.
OK, mamy Data Type White List, mamy poprawiony Data Type Listing.
Wracamy więc do elementu Guest Witch List RR.
Tu, jak widzisz poczyniłem już kilka zmian.
Jest to właśnie ten button.
Po jego kliknięciu po prostu otwiera mi się właśnie ten popup.
U mnie nosi on nazwę Wish list pop up.
Nie ma tutaj nic trudnego.
Dodałem tylko pole Input, gdzie użytkownik będzie mógł przekazać nazwę
listy oraz guzik Create.
I teraz możemy sobie tutaj dodać odpowiednie workflow.
To co chcemy zrobić to oczywiście utworzyć nowy Fink w bazie danych.
Będzie to wish list.
To na razie odznaczamy.
Tym się zajmiemy za chwilę.
Listingu też na razie nie mamy.
Mamy jedynie name z pola input.
Oraz owner, czyli Current User.
No i oczywiście tutaj ukrywamy popup.
Po wykonaniu tej operacji jest to całe zadanie jakie
nas czeka dla tego przycisku.
Dajmy mu może jakiś kolor zielone, żeby on się nam tutaj wyróżniał.
Wróćmy tutaj do designu.
Zamknijmy to.
Zanim przejdziemy tutaj do tej reptile grupy, to jeszcze przejdźmy na stronę i
dodajmy tutaj przynajmniej ze dwie już listę.
A więc dodałem pierwszą o nazwie Default.
Jak widzisz już mi się pojawia odpowiednia karta.
Ten obrazek ze stanu mglistej przeniosłem tutaj.
Czyli jeżeli nie mamy na razie żadnych itemów na takiej liście, to pojawia
się właśnie taki domyślny obrazek?
Klikam kolejną.
Powiedzmy tak.
Klikam Create i mamy już dwie utworzone wishlisty.
Natomiast chciałbym, aby w momencie kiedy użytkownik w ogóle rejestruje swoje konto
i ma konto typu guest, automatycznie tworzyła mu się w naszym systemie taka już
lista, tak żeby jeżeli tutaj przejdzie miał od razu właśnie tą default ową,
której nie będzie mógł usunąć, a do której będzie mógł dodawać nowe itemy.
A więc aby to zrobić musimy poprawić naszą boarding.
W tym celu wracamy sobie na stronę od brandingu.
Jak widzisz pojawiło mi się tutaj kilka nowych elementów.
Natomiast nie przejmuj się, jeżeli widzisz takie, o których jeszcze nie rozmawialiśmy
jak messages czy coś innego z tym powiązane.
Ja po prostu musiałem przygotować webinar otwierający do tego kursu i
dlatego już wdrożyłem te elementy.
A my przejdziemy i omówimy je sobie później w kolejnych lekcjach.
Ale wracajmy teraz na stronę od brandingu.
Przejdźmy do Workflow.
Tu mamy nasze główne workflow.
Tutaj zapisujemy zmiany dla użytkownika.
Tu tworzymy sobie Slack, a więc tutaj możemy utworzyć nowy Fink,
czyli Create New Fink.
Będzie to oczywiście wish lista.
Tu dodajemy wszystkie pola.
W tym przypadku chcę ustawić default na Jest tylko ta jedna lista ze wszystkich
będzie miała właśnie tą wartość ustawioną na Yes.
Listingu na razie tutaj żadnych nie mamy.
Wpiszmy tu nazwę po prostu Default.
A bannerem będzie oczywiście current user i tworzymy ją tylko i wyłącznie wtedy,
kiedy tutaj chcemy.
Ustawiamy sobie jego typ, a on tutaj go wybiera.
Czyli możemy się odnieść do step numer 1.
Czy my tutaj możemy tutaj to zrobić?
OK Anwen, dlaczego nie możemy się odnieść do moich Changes?
Aha, już wiemy dobrze, bo w przypadku korzystania z make changes to
create user nie będziemy w stanie wywoływać tutaj tego jako
jeden z warunków w kanalach.
A więc skoro przeszliśmy przez ten step, to odniesiemy się do Current User
User Type.
is guest czyli tylko dla gościa.
Tworzymy taką listę.
I następnie możemy już przejść na stronę Dashboard.
Natomiast tutaj chciałbym zwrócić Twoją uwagę na jedną bardzo ważną rzecz.
Tworzymy tą listę.
Jest to takie zadanie poboczne, którego teoretycznie nie powinniśmy
wykonywać w tym miejscu. Dlaczego?
Ponieważ każdy krok, który tutaj dodasz, będzie przedłużał właśnie taki workflow, a
użytkownik będzie musiał dłużej czekać na przejście na stronę Dashboard.
Do tego takie operacje, które są dla nas przydatne, ale nie muszą być
wykonane po stronie użytkownika, powinny być przeniesione na backend.
I o tym jeszcze sobie porozmawiamy w module 3, kiedy przejdziemy właśnie do
workflow wykonywanych po stronie serwera.
A więc teraz możemy przejść do następnego elementu.
W moim przypadku, zanim jeszcze wrócimy do gestu raz, chciałbym przejść
do elementu o nazwie tutaj.
On się nazywa Listing Listing like re.
Przynajmniej tak to jest moim wypadku.
Jest to po prostu ta ikonka z serduszkiem, która pojawia się właśnie na listingu.
Żeby Ci pokazać jak to wygląda, To tak, tu mamy już utworzone jakieś listy.
Na razie nie mamy dodanych do nich żadnych listingu, a więc teraz
będziemy musieli się tym zająć.
W tym celu mogę sobie przejść na przykład na stronę wyszukiwania
i tutaj jakieś wartości tylko po to, żeby nam się pojawiły jakiekolwiek listingu.
I teraz pojawia się tutaj ta ikonka.
Ja dodałem do niej kolejne workflow.
Po kliknięciu otwiera mi się właśnie taki tutaj element, czyli nowy
popup opcją Add wish list.
Zaraz Ci pokażę jak on tutaj został utworzony.
A więc właśnie wracamy tutaj.
I w przypadku tego popup znów nie ma tutaj nic trudnego.
Nie przekazuje tutaj praktycznie już żadnych informacji, żadnego typu contentu.
Całego tego elementu.
Oczywiście przekazujemy listing, żebyśmy wiedzieli, który listing użytkownik
chce dodać do takiej listy.
Natomiast tutaj mamy trap down.
Jak widzisz tutaj typowy proces to jest właśnie wish list.
Wyszukuje sobie wszystkich wish list, które należą do danego użytkownika.
Sortuje je tutaj po nazwie, natomiast po jakim polu ustawił sortowanie
oczywiście zależy od Ciebie.
Tu oczywiście na liście wyświetlamy nazwę takiej listy jako default value.
Będę chciał właśnie wyświetlać tą listę, gdzie x default mamy ustawione na jest,
więc może o to zadbajmy.
I rzeczywiście ustawmy takiemu użytkownikowi default całą listę.
Czyli przechodzimy do data.
Tutaj do naszej wish list.
I teraz na tej default owej mogę zmienić ten parametr na Yes.
Natomiast co się ma wydarzyć, kiedy użytkownik wybierze do jakiej listy chce
dodać dany listing i klika button Add?
Dodajemy tutaj odpowiedni workflow.
W pierwszej kolejności musimy sobie utworzyć tutaj, a w zasadzie nie
tyle utworzyć, co zmienić naszą już listę.
Skąd ją możemy pobrać.
Z naszego tutaj drop dał no value, Tu mamy już wybraną odpowiednią
listę i tutaj odnosimy się tylko do pola Listing
i dodajemy sobie listing z całego tego elementu.
Listing like.
To wszystko, co musieliśmy tutaj zrobić.
A więc teraz dodaliśmy ten listing u dołu już listy.
Jeszcze oczywiście do samego listingu musimy dodać parent usera
do tego pola like adb.
Robimy to oczywiście po to, abyśmy mogli za chwilę dodać odpowiedni condition all,
który wskaże użytkownikowi, że już rzeczywiście dodał
taką ofertę do swoich ulubionych.
A więc.
Data Fink, Make Changes a Fink, odnosimy się tutaj do listingu
i oczywiście do pola like adb.
I tutaj dodajemy po prostu current usera.
I na koniec oczywiście zamykamy ten popup.
Mamy tutaj jeszcze ikonkę czyszczenia drop down, więc może ustawmy tutaj
również odpowiednie workflow od razu.
Jeżeli to będzie wybrana wartość, to po kliknięciu w tą ikonkę chcę to zrobić.
Jest to taka dodatkowa funkcjonalność.
A więc Start Edit Workflow i tu wybierzmy Reset Group pop up
i u mnie ta grupa nosi nazwę.
Jeśli z Drop down Group to wszystko co chcę tutaj zrobić.
Jeśli chodzi o workflow.
To możemy zamknąć i teraz przejść do Conditions, czyli dla naszej ikonki
ukryjemy ten pop up i tutaj condition.
Ale co chcemy zrobić?
Jak to w ogóle wygląda taka ikonka?
Odświeżamy sobie.
Mamy tutaj białe tło i taką fioletową ikonkę.
A więc może tak zmieńmy kolor całej tej grupy, czyli background color.
Oczywiście najpierw when when.
Tutaj możemy się odnieść do RS, czyli listing Reel listing.
Light bike contains car end user.
A więc właśnie na podstawie takiego warunku możesz
sprawdzać, czy użytkownik polubił daną ofertę, czy też nie.
I teraz dopiero tutaj background color.
OK, mamy tutaj jakiś kolor dla tej grupy.
Zerknijmy gdzie mamy ustawione co ona ma kolor biały.
Tego tutaj teraz namierzyć.
Group ok.
Tutaj mamy biały kolor, czyli nie dla całego, całego tego copy condition.
Remove stąd.
Dodajemy to tutaj oczywiście do grupy Likes Group.
I teraz dopiero background color ustawiamy sobie na miarę 600.
Dodatkowo nie chcę, żeby użytkownik mógł kliknąć w taki element
czyli this element i klika jest.
A więc nie będzie mógł otworzyć tego papu.
To od Ciebie zależy czy będziesz chciał to blokować, czy będziesz chciał tutaj
umożliwić użytkownikowi, żeby dodawał właśnie taką ofertę do innych list.
Ja to chwilowo zablokuje i skopiuję sobie ten condition.
Przejdę tutaj do samej tej ikonki.
I tutaj ustawię jej kolor na Primary 600.
Tutaj też zablokuję możliwość kliknięcia.
Możecie to dziwić.
No bo zobacz mam ustawione workflow, które otwiera mi ten popup po kliknięciu w
tą grupę, ale również po kliknięciu w tą ikonkę.
Dlaczego ja to robię?
Otóż w przypadku właśnie korzystania z ikon WiFi niestety musimy to powielać,
ponieważ po najechaniu na samą ikonkę musimy utworzyć dokładnie takie same
workflow jakie mamy dla tej grupy. Gdzie ona się znajduje?
Inaczej będziesz musiał kliknąć grupę poza ikonką, żeby to workflow Ci się uruchomiło
lub w samą ikonkę, a wtedy kliknięcie poza nią nie będzie uruchamiało.
Możesz sobie to oczywiście przetestować, dodać workflow tylko do grupy i zobaczysz
oczywiście zaraz o czym mówię, a ja wracam tutaj do naszych ustawień.
Tutaj mamy ten kolor, nie jest klikalne i jeszcze tylko chcę sobie zmienić nazwę.
U mnie powinna ona wyglądać tak.
A więc teraz nasze workflow powinno już tutaj zadziałać.
Zerknijmy, czy rzeczywiście tak jest.
Odświeżamy.
I spróbujmy dodać tę ofertę do ulubionych.
Powinna tu wskoczyć nasza grupa default owa.
Zgadza się? Powinnam ją wyczyścić.
OK, to nie do końca działa.
No nic, nie przejmujemy się tym.
To w przypadku drop down.
Czasami może to nie do końca zadziałać tak jak powinno, ale to nic.
Mamy tutaj default. Mamy drugą już listę.
Zaznaczamy Default, klikamy Add.
OK, to się zmieniło, tylko ikonka zmieniła kolor.
Pewnie na ten fioletowy.
Zaraz to sobie poprawimy.
Natomiast jak widzisz nie mogę tutaj już kliknąć drugi raz dodać tej nowej listy.
To samo zróbmy tutaj.
Tym razem wybiorę sobie drugą i to samo zrobię tutaj.
Jeszcze tylko wrócę i poprawię te ikonkę.
Kolor. Będzie to tutaj.
Kolor Dagmary Kontrast.
I wygląda na to, że teraz już powinno to działać.
Powinniśmy mieć dodane wszystkie te oferty do naszych wish list.
OK, teraz wygląda to już właściwie, a ja mogę sobie wrócić właśnie do Dashboard.
I powinny się teraz zmienić te karty z wish listami.
OK, wygląda na to, że jest w porządku.
Tu musielibyśmy jeszcze dopasować rozmiary tych obrazków, ale to
to już zostawiam Tobie.
Ja uznaję, że tak też może być.
Natomiast jak te karty wyglądają i co ja tam dla nich po ustawiałem,
Już Ci mogę pokazać.
Przechodzimy tutaj do wishlisty kart RR.
I tak sam element przyjmuje oczywiście najpierw content ustawiony na wish list.
Z kolei przekazujemy tutaj nazwę takiej listy, datę utworzenia,
tutaj ilość listing ów na niej.
Mamy tutaj też jeszcze obrazki i one są tutaj super proste, przynajmniej
condition, ale są super proste.
Jeżeli listing skąd jest mniejsza od 1, czyli mamy tutaj żadnego listingu
to wyświetlam właśnie ten empty state.
Jeśli mamy 1 to wyświetlam tutaj listing numer 1.
Z niego wyciągam feels i jest to niemal dokładnie to samo co robiliśmy
wcześniej na Other wish list.
I tutaj mam znowu.
Jeżeli tutaj są 2 listing, to wyciągam obrazek z pierwszego i z drugiego.
Jeżeli są trzy lub więcej, to oczywiście z pierwszego, drugiego i trzeciego.
Natomiast dodałem tutaj jeszcze bardzo prosty popup, który pozwala mi
podejrzeć takie właśnie listing.
W tym przypadku przekazuję tutaj jako typowy content wish list data source To
będzie zawsze lista całego takiego elementu.
To wyciągamy jej name za pomocą tej ikonki tego przycisku,
tylko zamykamy właśnie cały ten popup.
Natomiast tutaj mamy repeat grupę.
Jak widzisz przekazuję wszystkie listing jakie mamy dodane właśnie
tutaj do tej listy.
Możemy ustawić również tutaj opcje np.
że po kliknięciu nie w całą komórkę, bo tu mam element właśnie z takim leasingiem
oraz ikonkę, więc może tutaj pod Listing Group dajmy workflow, które będzie
kierowało użytkownika właśnie na taki listing, czyli Navigation Go to Page
Listing i oczywiście Parent Group listing.
Natomiast tutaj dla tej ikonki zaraz dodamy workflow, które pozwoli
usunąć właśnie taki listing z wishlisty.
Tu już nie będziemy się bawić w żadne potwierdzenia.
Po prostu kliknięcie w tą ikonkę usunie właśnie ten element z danej listy, a
użytkownik w każdej chwili będzie mógł potem po prostu dodać ją
ponownie na daną już listę.
A więc klikamy Start Edit Workflow.
Co musimy tutaj zrobić najpierw?
Make changes.
Fink.
Odnosimy się tutaj do całego tego elementu, czyli White list Charter.
A wish list.
I tutaj odnosimy się do listingu i odejmujemy oczywiście ten parent group
listing z tej całej listy listingu.
Dodatkowo.
Odnosimy się do Parent Group Listing i tu jak się domyślasz
z tej grupy like adb usuwamy bieżącego użytkownika tak, żeby ponownie mógł
taką ofertę dodać do ulubionych.
Na koniec oczywiście ukrywamy ten element.
I to w zasadzie wszystko, co się tutaj dzieje,
więc mogę sobie przejść do gestu ręką, do naszego głównego widoku.
Tu mam repeat grupę CIA zamiast Ashley Select przekazuję po prostu teraz nasz
Data Type wyszukuje oczywiście wszystkich list należących do bieżącego użytkownika
i tutaj przekazuję Karen kredyt lub jeśli jest to element.
W ten sposób wygląda to właśnie tak.
Teraz mogę kliknąć w ten button i wyświetlić wszystkie listing,
które tutaj dodałem do danej listy.
Oczywiście teraz usunąć dany listing.
Jak widzisz, oczywiście nam to zadziałało.
Możemy zamykać ten popup po usunięciu albo nie.
Dodatkowo mógłbyś zadbać również o to, aby po usunięciu wszystkich listingu z danej
wishlisty, która nie jest nowa, automatycznie ją usuwać.
Natomiast to już jest zadanie dodatkowe, które możesz wdrożyć, jeżeli będziesz
chciał w ramach pracy domowej.
Natomiast ja uważam, że ta funkcjonalność w takiej formie działa
naprawdę całkiem fajnie.
A nasze zadanie w tej lekcji zostało wykonane poprawnie.
A więc widzimy się już za moment.