MVP aplikacji w rekordowym czasie z Bubble: Nowy listing - poprawki w designie
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?
Mam nadzieję, że zadanie z poprzedniej lekcji nie sprawiło Ci problemu.
Udało Ci się odpowiednio wygenerować te klucze, poustawiać konto w konsoli
Google'a i wkleić je w odpowiednie miejsce w edytorze Babel.
Pamiętaj, że nie jest to super obowiązkowe.
Jeżeli nawet nie podamy tych kluczy, to mapki w bubble i tak będą nam działały.
Natomiast będą miały po prostu ograniczoną ilość zapytań.
To znaczy, że przy dużej ilości odświeżeniu strony, a to się będzie
zdarzało oczywiście bardzo często, ponieważ pracujemy tutaj cały czas, coś
zmieniamy, te mapki mogą się nie wyświetlać.
Albo Babel wyśle ci komunikat, że wykorzystałeś ten limit zapytań.
Dlatego też ja wolę to zrobić już na tym etapie, żeby po prostu dużo lepiej i
dużo wygodniej nam się z nimi pracowało.
Natomiast teraz naszym kolejnym zadaniem będzie dodanie listingu
do naszej aplikacji.
W naszej aplikacji utworzyliśmy już odpowiedni Data Type Listing.
Mamy również stronę New Listing, która obsługuje właśnie to, jak będziemy
taki listing tworzyć w aplikacji.
Natomiast jest to dosyć rozbudowane zadanie, dlatego ja
podzieliłem je na dwie lekcje.
W tej lekcji skupimy się na drobnych poprawkach, designie
i dodaniu tych elementów, które będą wymagane, aby właśnie potem ta logika
zadziałała nam już tak, jak trzeba.
W pierwszej kolejności chciałbym przypomnieć to, o czym rozmawialiśmy w
lekcji poprzedniej, czyli to, czym jest auto building, jak go
wykorzystać w praktyce.
Jak pamiętasz na stronie on buildingu mówiłem Ci, że dużo lepiej wykorzystywać
custom staty, niż od razu edytować rekord w naszej bazie danych.
Zresztą jeżeli wykonałeś to zadanie, o które prosiłem i zamieniłeś to na
odwołania do bazy danych, to doskonale wiesz, że w takim przypadku
rzeczywiście działa to trochę wolniej.
Natomiast niestety nie zawsze się sprawdzają.
Nasza strona nie.
Listing, jeżeli teraz do niej przeszedł, czyli tutaj zawiera formularz, który jak
pamiętasz składa się z 9 różnych kroków.
Rozbiliśmy to tak, aby po prostu host krok po kroku uzupełniał
nam listing, potrzebne dane.
I tutaj niestety custom staty moim zdaniem nie do końca się sprawdzą.
Oczywiście one działają bardzo szybko, ponieważ działają tak jak Ci wspominałem
w samej przeglądarce użytkownika.
Natomiast ich problemem jest to, że wystarczy odświeżyć stronę, a w
zasadzie nasz host odświeży stronę w przeglądarce i te wszystkie
informacje są zachowane.
Więc domyślasz się, że jeżeli ktoś by doszedł np.
do 8 czy 9 kroków i po prostu coś mu się zacięło, odświeżył stronę i stracił
wszystkie informacje, to mógłby nie być do końca zadowolony.
Dlatego też ja tutaj wykorzystam przede wszystkim auto binding building
po to, aby te informacje od razu były zapisywane do bazy danych.
Natomiast zanim do tego przejdziemy, czeka nas jeszcze kilka poprawek.
Wracamy do zakładki Data.
Mamy tutaj zakładkę Privacy a Privacy Rules.
Już rozmawialiśmy.
Natomiast ja chciałbym Ci pokazać mój typ pracy z Privacy Rules i to jak do tego z
reguły podchodzę i myślę, że jest to całkiem fajne
podejście, ponieważ jesteś w stanie kontrolować na bieżąco
wszystko to, co robisz.
Przede wszystkim tutaj dodaliśmy sobie reguły dla ownera, czyli
właściciela takiego rekordu.
Ja z reguły dodaję jeszcze jeden typ użytkownika i jest to admin.
Możemy to zrobić.
Przejdźmy do Options Set, a tutaj of User type i dodajmy kolejnego o nazwie Admin.
Adminem będziesz oczywiście Ty lub inne osoby, które potem do tego wyznaczysz.
Natomiast z założenia admin powinien mieć dostęp absolutnie do wszystkiego
co się dzieje w aplikacji.
Dlatego też wracamy do Privacy.
Klikamy Define New Roll.
Dajemy tutaj tylko nazwę admin i warunek to this user.
I locked in.
Musimy tutaj.
Coś nam się.
Babel nie chciało zaskoczyć.
A w zasadzie tak nie DS user oczywiście tylko current user.
Dokładniej tutaj dopiero będziemy mieć is located in end this user user type.
Is admin.
W tym przypadku zawsze pozostawiam tutaj wszystko włączone.
Możesz włączyć również auto binding i ustawić to dla wszystkiego,
co tam się znajduje.
Nie ma najmniejszego problemu.
Ja najczęściej po prostu pozostawiam sobie te 3 pola, a potem włączam auto binding,
jeżeli już tego potrzebuję i wykorzystuję.
W ten sposób mamy fajny podział.
Czyli admin widzi wszystko, a owner z reguły jest w stanie widzieć wszystko.
Oczywiście pod warunkiem, że rzeczywiście chcesz mu pokazywać wszystkie
pola jakie tam dodałeś.
Czasami będziesz korzystał z jakiś polu roboczych i nie do końca chcesz, żeby on
mógł sobie takie pola pobrać i zobaczyć te wartości.
Natomiast tutaj dla całej reszty możesz już spokojnie ustawiać, które
wartości powinni widzieć, a których nie.
Za każdym razem jak dodajesz jakąś nową kolumnę w ten sposób ona
jest tutaj nie zaznaczona.
I to bardzo dobrze, ponieważ jeżeli będzie zaznaczona z automatu, a potem ją np.
odznaczyć, to może się okazać, że część Twoich workflow nie działa,
albo coś na stronie nie do końca wyświetla się tak jak powinno,
ponieważ zapomniałeś o to zadbać.
Dlatego też zostawiamy to w ten sposób.
Przechodzimy do listingu i tutaj definiujemy nową rolę.
Będzie to owner.
I tutaj dajemy current user.
Czym musi być zalogowany?
Dajmy mu, że niech będzie zalogowany i slogan In and this listing.
Mamy tutaj pole o nazwie host.
Dokładnie to jest właściciel takiego rekordu.
I skręt usera.
Tutaj na razie zaznaczmy, że widzi wszystko.
Tutaj odznaczamy sobie to, żeby cała reszta widziała wszystko
i zastanówmy się co powinni widzieć wszyscy nie zalogowani użytkownicy albo
tacy, którzy nie są owner em, czyli nie są hostem dla takiego listingu.
Ja sobie tutaj zaznaczę chyba nie mal wszystkie pola.
Nie ma tutaj najmniejszego problemu.
Nie mamy jakiś tajnych danych, więc nie musimy się o to martwić.
I dbaj też niech będzie ok.
Dodajemy jeszcze nową, czyli rolę admina.
W tym przypadku mogę sobie skopiować.
To Expression wstawić je tutaj.
End jest listing?
Nie, chyba nie. To sobie skopiowałem.
Spróbujmy jeszcze raz kopii Expression.
Coś mi tutaj nie chce zaskoczyć.
Current user is login and current user user type is admin.
OK, to mamy gotowe.
Więc teraz porozmawiajmy o tym co jeszcze potrzebujemy dla listingu i
jak to ogólnie ma działać.
Jeżeli przeszedł do Dashboard, to ja muszę tutaj.
Odświeżyć stronę.
Poczekaj aż mi się załaduje edytor.
OK, jestem w Dashboard.
Jak widzisz jest tam dashboard ja hosta ponieważ mam tutaj new listing.
Chciałbym żeby to działało w ten sposób.
Po kliknięciu w tym przycisk będziemy sobie tworzyć od razu
w bazie danych nowy listing i będziemy mu przypisywać odpowiedni status.
W naszym przypadku na początek będzie to draft.
W ten sposób utworzymy taki listing, przypisujemy status
i przekierowuje użytkownika właśnie na tą stronę New listing i tam jako właśnie cały
Page type ustawiamy właśnie ten listing.
W ten sposób użytkownik w miarę przechodzenia przez kolejne kroki będzie
uzupełniał ten rekord o kolejne wartości w naszej bazie danych.
Nawet jeżeli kliknie Cancel, w której będzie chciał przerwać albo po prostu
zamknie przeglądarkę cokolwiek, to tak, listing zostanie zachowany,
ale będzie miał nadal status draft.
Czyli host będzie mógł sobie do niego wrócić, poprawić coś i
dopiero na koniec opublikować.
Natomiast dopiero kliknięcie w ten ostatni guzik Publish w naszym formularzu będzie
zmieniało właśnie ten status na Publish.
i taki listing będzie już normalnie widoczny w całym naszym serwisie.
Jeżeli nadal jest to nie do końca jasne, to się nie przejmuj, zaraz będziemy to
ustawiać, zobaczysz jak to wszystko będzie działało.
W pierwszej kolejności chcę wrócić tutaj do Options Setup i dodać kolejne,
gdzie to Other Listing Status.
I tak jak mówiłem będziemy mieć tu trzy wartości.
Draft.
Published i ostatnia wartość, czyli Archive.
Za jej pomocą host będzie mógł zarchiwizować taki listing, czyli po
prostu ukryć go i nie wyświetlać w naszym serwisie.
Do tego też jeszcze wrócimy.
Na razie klikamy Create.
Wracamy do Data Types. Do listingu.
dodajemy pole Status.
Będzie to jak się domyślasz listing Status Create.
I tutaj nawet możemy od razu sobie ustawić status na draft.
Każdy nowo utworzony listing będzie miał w ten sposób status ustawiony na draft.
OK, skoro zadbaliśmy o Privacy Rules, zadbaliśmy tutaj właśnie o ten.
status. Przejdźmy jeszcze do Privacy.
Tutaj rules status może być widoczny.
Nie ma najmniejszego problemu.
Nie jest to jakieś tajne pole.
Teraz musimy wrócić do naszej strony z Dashboard.
A w zasadzie nawet nie do Dashboard, tylko do mamy tutaj na dashboard.
Re Szukajmy guzika listing
Mamy Then new listing button i tutaj dodajemy nowe workflow.
Tak jak ci mówiłem, to co będę chciał zrobić, to zanim przejdziemy do strony
listing tworzyć taki nowy element.
Czyli Tata things create new thing.
Tworzymy nowy element w bazie danych.
Będzie to listing.
Nie uzupełniamy na razie żadnych innych pól.
Będę chciał przekierowywać właśnie te Data to send co chcę przekierowywać.
Ten listing, który tutaj dopiero utworzyłem.
A jak to zrobić w Workflow?
Jeżeli coś tworzysz, to w każdym kolejnym kroku możesz się odnieść do tego, co było
utworzone albo co zmieniłeś w krokach poprzednich.
I zobacz jak to zadziała.
Powiem, że tutaj chcę przekazywać rezultat STEP, czyli po prostu nowy listing.
Babel mi oczywiście krzyczy, że przekazujemy tam listing, ale nie
ustawiliśmy odpowiedniego page type, więc zadbajmy o to.
Przechodzimy na stronę New Listing.
I tutaj ustawiamy Type of content listing.
I już ten problem powinien nam zniknąć.
Dlaczego?
Tutaj Babel dalej krzyczy Aha, nie zapisał nam zmian, ponieważ były na czerwono.
Musimy tu wrócić i odnieść się.
Aha, mamy tutaj jeszcze jakiś main button, za pomocą którego też tworzymy listing.
OK, czyli ten listing możemy utworzyć w dwóch miejscach?
Nie ma problemu. Czyli robimy dokładnie to samo.
Klikamy.
Create Jumping over listing i przekazujemy go tutaj właśnie jako data to send.
Teraz już nie mamy problemu.
Za pomocą tych dwóch przycisków będziemy mogli sobie utworzyć
właśnie taki nowy listing.
Skoro to mamy gotowe, to wracamy na stronę New Listing.
Będziemy tutaj robić porządki.
Zanim jednak do tego przejdziemy, zerknijmy, czy mamy jakieś foldery.
Mamy.
Jak widzisz, ja już sobie tutaj podzieliłem te workflow, które tworzyliśmy
wcześniej na odpowiednie foldery oraz dodałem odpowiedni
folder step 1, step 2 itd.
I do każdego z nich przypisałem właśnie te nasze workflow.
Na razie one tylko po prostu przełączają nas między kolejnymi krokami
i zmieniają ten slajd.
Karen Step na odpowiednią wartość.
Jedyne co chcę zrobić, to tutaj nie dawać koloru zielonego,
tylko powiedzmy niebieski, żeby mi się nie mylił później z innymi.
Jak widzisz nie ma tutaj nic trudnego, po prostu step 4 next
button step 4 ref button.
Dany jest tutaj do folderu Step 4.
I tak zrobiłem po prostu dla wszystkich tych poszczególnych kroków.
Zmieńmy ten kolor wszędzie na niebieski.
Tutaj.
To będzie ostatni krok, jaki będziemy wykonywać, więc tutaj możemy zostawić
kolor zielony, ponieważ jak widzisz będzie to publikacja całego naszego listingu.
OK.
Wracamy do dizajnu i teraz dodajmy odpowiednie poprawki wszędzie
tam, gdzie są wymagane.
A więc przechodzę tutaj.
Odkrywam każdy krok i sprawdzam, czy mamy tutaj to wszystko dobrze ustawione.
Przede wszystkim czy mamy tutaj odpowiednie nazwy.
Zauważyłem, że gdzieś kopiowałem te kroki, a one nie wszędzie są takie jak powinny.
Mamy tutaj property type, mamy tutaj Type of place.
OK, jest ok.
Wygląda na to, że tutaj wyświetlamy to co trzeba, czyli odnosimy się do Listing
property type, tutaj do other listing type of place.
To co chcę zrobić tutaj, to od razu dodać sobie odpowiednie condition, ale tak żeby
było wiadomo, że ten guzik został odpowiednio wciśnięty
i ta wybrana opcja jest aktualnie przypisana do tego listingu.
Logiką zajmiemy się później.
Na razie ustawiamy tylko sobie taki design.
Przechodzę do Condition i mówię, że tak.
Current page Listing property type.
Jest równa Current sell as OSD Listing property type.
Czyli to jest właśnie ten wybrany element.
To chcę tu zmienić dwie opcje.
Będzie to border color.
I background color.
Background color ustawiam tutaj na neutral 25, a border na primary 600.
Teraz mogę sobie skopiować condition i kliknąć tutaj.
Oczywiście to nam tutaj zaczyna sypać błędami, bo to mamy
typeof place, więc musimy sobie wybrać, że current page listing.
W tym przypadku typeof place jest równe tej wartości,
którą tutaj sobie wybraliśmy.
Wtedy zmieniamy te kolory. OK.
Krok pierwszy mamy z głowy.
Przechodzimy do kroku drugiego.
Tutaj znów mamy dokładnie to samo.
Odnosimy się wszędzie do OS Listing Numbers.
A więc musimy tylko znowu dodać tutaj odpowiednie condition, ale.
Tym przypadku będzie to guest.
Number.
OK, tutaj będzie jak się domyślasz bet number.
Tu mamy jakiś problem bez RG. O co chodzi?
A dobra, dodałem to do całej repeat grupy zamiast do konkretnej komórki.
Tu widzę też jest jakiś problem.
To jest bez button.
Zerknijmy. Tu mamy ok.
No widzisz, mamy źle nazywane repeat. ID grupy.
To jest gest repeat King Group i tu będzie gest BTN.
Tu mamy B Scripting Group b btn pojedyncza liczba.
OK, zostawmy condition.
A widzisz, konfesjonale są bardzo podobne.
Odnosimy się po prostu tylko do innych wersetów.
Wiem, że jest to dosyć nużące i męczące, ale niestety musimy o to zadbać.
Tutaj mamy odpowiednią nazwę.
Tutaj już nie.
I my tu po prostu.
Podnieśmy się odpowiednie wartości.
Teraz wygląda na to, że wszystko jest jak trzeba.
Mogę nie zamknąć Step 2, przejść do Step 3.
Tutaj mamy już pola, które będę chciał odpowiednio przypisać do właściwych
kolumn dla naszego listingu.
A więc mamy Location Search Box.
Klikamy Auto Building.
To będzie pole City.
Oczywiście musimy teraz ustawić auto building na ownera i dajmy od razu dla
admina, żeby admin też to mógł zrobić.
Oczywiście takie pole może zmieniać tylko właściciel, czyli ta osoba.
W zasadzie ten host, który dodaje ten listing.
Dlatego tutaj dla Everyone else nie zaznaczamy Allow auto binding.
Wracamy do designu.
Jak się domyślasz, to samo robimy tutaj.
Tu będziemy się odnosić do pola.
Tutaj klikamy i będzie to oczywiście Price.
Znów musimy sobie takie pole zaznaczyć tu i tu.
Privacy rules.
To co chcę jeszcze tylko zrobić, to dodać znaczek dolara, żeby było wiadomo
w jakiej walucie jest to dodawane.
Ten krok mamy gotowy.
Ukrywam, pokazuję Step 4.
Tutaj musimy tylko wskazać skąd chcemy pobierać ten adres.
Zostawiamy tutaj single i wybieramy Karen Page Listing City.
I to wszystko W ten sposób.
Teraz mapka będzie powiązana z tym adresem, które podaliśmy
w poprzednim kroku.
Tyle działania dla Step 4.
Mamy tutaj tag Step 5.
Tutaj czeka nas sporo poprawek, ponieważ języki host już wybiera wcześniej, dlatego
będę chciał, żeby tutaj wybierał a menu this oraz Features a menu this jest ok.
Mamy tutaj odpowiedni option set.
Mamy chyba też odpowiednie nazwy, a menu i tak zgadza się.
To co będę chciał zrobić to skopiować sobie style condition, ale dla tej ikonki,
która mieliśmy tutaj na stronie on boarding.
Czyli ta ikonka.
W zasadzie tylko jej nazwę będziemy sobie zmieniać.
Kopiujemy conditions.
New Listing.
Musimy przejść do kroku nr 5.
I w tym przypadku nazwa zostaje taka.
Natomiast czyścimy sobie Expression i mówimy, że parent page listing
elements contains parents group of listing menu cities.
Wtedy właśnie zmieniamy tą ikonkę na zaznaczoną.
Teraz przechodzimy tutaj i zmieniamy nazwę.
To nie będzie To już nie będą języki tylko features.
Tutaj tak samo.
Przechodzę do Appearance.
Wybieram odpowiedni Type of content i mamy tutaj OS features.
Nas natomiast interesuje OS Listing Features, więc to sobie zaznaczam.
Tutaj mówię, że chcę sobie wybrać all OS listing features.
Teraz tutaj zmieniamy nazwę na feature group.
Oczywiście odnosimy się do odpowiedniego setu, aby poprawił resztę
tak jak powinno być.
Tu mamy ikonkę. Dodajmy dla niej odpowiedni condition.
Czyli znowu.
Parent page listing features contains parent group of listing features.
Zmieniamy nazwę.
Zerknijmy, czy tekst pobiera właściwą wartość, pobiera sobie display.
A więc wygląda na to, że wszystko jest OK.
To co chciałbym jeszcze zrobić, to na chwilę wrócić do Option Setów.
I teraz tą nazwę listingu S features, czyli te ficzery, które wyświetlamy na
stronie głównej zmienić na nazwę OZ Home Features.
Ponieważ cały czas mi się to myli.
Czyli tutaj po prostu dodaje Home.
Wracamy do designu Step nr 5. Mamy gotowy.
Zerknijmy na krok nr 6.
OK, tutaj wyświetlamy obrazek.
Aha, odnosiliśmy się do jakiegoś option setu.
OK, to teraz zróbmy to w ten sposób.
Jaki obrazek chcemy tutaj wyświetlać?
Oczywiście Current page listing main, a w zasadzie image main first item.
Natomiast jeżeli ta wartość jest pusta, kopie expression.
Ukryjemy ten obrazek Na dzień dobry zaznaczmy
collapse on hidden i wyświetlimy go tylko wtedy, kiedy
rzeczywiście taki obrazek został tutaj wgrany.
Czyli.
Career page image first item empty this element is visible.
Tak, zgadza się.
Mamy tutaj jeszcze button i tu będę chciał zastosować dokładnie to samo sztuczkę,
którą zastosowaliśmy na on buildingu.
Czyli ubieramy to w grupę Align to parent.
Będzie to.
Main Image Group.
Oznaczam tutaj minimalną szerokość oznacza minimalną wysokość.
Ta grupa dostosowała mi się teraz do tego przycisku, który mam tam w środku.
I teraz będę chciał tutaj dodać Picture App Loader.
Muszę go sobie tutaj namierzyć.
Jest Picture App Loader.
Wstawiam go tutaj.
Mogę podać albo pełne wymiary w pikselach, tak jak robiliśmy to
wcześniej, albo po prostu zrobić taką sztuczkę, że wpiszemy 100% na 100%.
Tutaj Picture App Loader dostosował się tutaj do wymiarów całej tej grupy, a ona z
kolei dostosowuje się do wymiarów buttona.
Jedyne co musimy jeszcze zrobić to tak będzie to Image Main
Picture App Loader albo Main Image.
Tutaj wcześniej stosowałem nazwę Main image, teraz Image Main.
OK, tak, mamy to chyba zapisane w naszym listingu, więc zmieńmy to tak,
aby było zgodne to co chce zrobić z tego picture app
loadera, a przede wszystkim dlaczego na przód czyli Bring to front
wrócić do Appearance i tutaj dla stylów wybrać,
a w zasadzie nie mamy tych stylów dla takiego ukrytego picture loadera,
więc je sobie utwórzmy.
Wracamy na on boarding.
Tutaj mieliśmy taki ukryty picture app loader, o ile dobrze pamiętam
tutaj na stronie od brandingu.
Nie, przepraszam, robiliśmy to na stronie profilowego i tutaj właśnie
na naszym Edit Profile Popup.
Tutaj dodawałem właśnie taki avatar Picture Loader.
Ukrywaliśmy go.
Utwórzmy nowy styl.
Będzie to Picture loader Hidden.
I teraz będę mógł sobie wykorzystać ten styl właśnie na naszej stronie brandingu.
A więc wracamy.
Znów musimy namierzyć j Bar Dingo.
Oczywiście tylko new listing.
Przełączanie się między tymi stronami bywa czasami mocno irytujące, ale właśnie
tak wygląda praca developera.
A więc T5 nie jest T5, step 6 też nie tak.
Step 6 tylko nie zaznaczyłem właściwy.
Mamy ten picture app loader, wybieramy sobie hidden style i ok.
Teraz wygląda to już tak jak powinno.
Czyli znów będziemy wykorzystywać tą sztuczkę, którą pokazałem Ci właśnie na
stronie profile owej, ale tym zajmiemy się w kolejnej lekcji.
Na razie wprowadzamy tylko właśnie takie design, owe zmiany.
Czyli ten krok mamy tutaj już z głowy.
Z krokiem numer 7 będzie czekało trochę więcej zabawy, dlatego ja do niego wrócę
sobie w kolejnej lekcji.
Tutaj mamy krok numer 8.
Tu, jak się domyślasz, znów musimy wykorzystać auto building i tylko
przypisać te wartości do odpowiednich kolumn, A w zasadzie pól
naszego data type listing.
Czyli w tym przypadku będzie to po prostu title, a u nas ma to nazwę name.
Tak nazwaliśmy to pole.
Skoro tu mamy title, to może rzeczywiście zmieńmy je na title albo zostawmy name.
Jak już chcesz, to zależy wszystko od Ciebie.
Ja na razie pozostawiam tutaj to name.
Jedyne co robię tutaj zaznaczam to właśnie Auto building name.
Dla admina i dla ownera.
Mamy tutaj jeszcze description.
Tym razem to pole description i w ten sam sposób ustawiamy Privacy Rules.
OK, ten krok mamy już z głowy.
Został nam step numer 9.
A widzisz, tutaj mamy info, że ustawiamy zasady dla naszych gości, a
wyświetlamy tutaj feature.
Musimy teraz to oczywiście sobie poprawić.
I teraz tak to nie jest grupa Property Type.
Będzie to grupa rules.
Będzie to Rules Scripting Group i żebyśmy mogli tutaj wybrać odpowiednie
Option Set, oczywiście najpierw musimy go utworzyć.
A więc dodajmy sobie kolejny Option Set. Będzie to.
Listing rules.
Tak, chcę tutaj dodać nowy atrybut.
Będzie to ikonka.
Typ ustawiony na text.
Na razie dodajmy tylko jakąś jedną opcję, np.
No smoking.
Wracamy do designu.
Zmieniamy Option Set.
Zmieniamy tutaj nazwę tej grupy.
Znów Options Set.
W środku mamy ikonkę i mamy.
Tutaj wyświetlamy display. OK.
Zadbajmy jeszcze o condition dla tej ikonki.
Czyli możemy wrócić chyba do kroku pierwszego.
Nie? Gdzie mieliśmy jakieś umieliśmy?
Przy kroku drugim.
OK, dobra pokryły mi się te grupy.
Pokażmy właściwą.
Trzecia nie czwarta, nie około.
Dopiero w kroku piątym mieliśmy te grupy.
I tutaj mogę sobie skopiować ten condition.
Pokazać krok numer 9, dodać tutaj właściwe i ok.
Oczywiście nie ustawimy tego, ponieważ dla listingu nie dodaliśmy tego pola.
A więc wracamy do Data Data type listing i dodajemy tutaj
kolejną kolumnę o nazwie Rules.
Będzie to oczywiście lista i tutaj ustawiony na OSD Listing Rules.
Klikamy na Privacy i zaznaczamy, że to pole ma być widoczne dla wszystkich.
Wracamy do designu i mówimy, że Parent page listing rules.
Contains parent group other listing rules to zmieniamy nazwę.
To będzie oczywiście rules.
I wygląda na to, że takie podstawowe zmiany mamy już gotowe.
Wydaje mi się tak.
Jesteśmy na kroku numer dziewięć.
Wygląda na to, że wszystko jest ok, a więc możemy zakończyć tą lekcję, a w
kolejnej zająć się już logiką i dodaniem tutaj odpowiednich workflow.
Dziękuję Ci za uwagę i widzimy się już za moment.