Aplikacje no-code z Bubble: Sekcja i strona bookingu - guest
Wdrożenie projektu
15 godz. 6 min · UI, UX i Webdesign
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Z jakich narzędzi i serwisów korzystać, by zaprojektować interesujący i ciekawy layout.
- Podstawowych technik pracy z narzędziem Figma, by nasz statyczny design zamienić na aplikację.
- Pracy z edytorem Bubble, gdzie skupimy się na jego podstawowych elementach i funkcjonalnościach
- Tego jak przygotować nowoczesny landing page, posiadający wszystkie niezbędne elementy strony sprzedażowej
- Dodatkowo wdrożymy również inne strony w naszym serwisie - czyli logowania/rejestracji, wyszukiwania, stronę pojedynczego itemu oraz stronę profilową i stronę rezerwacji
- Na koniec zajmiemy się również wdrożeniem w pełni funkcjonalnego dashboardu dla naszych użytkowników i wynajmujących
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 udało Ci się przygotować element dla wszystkich Empty State na
konta tutaj gościa i działają one dokładnie tak jak u mnie,
czyli mogę się przełączać pomiędzy widokami.
I mam teraz bardzo fajne informacje tutaj
z grafiką, dzięki czemu ten dashboard dużo ciekawiej wygląda.
A my możemy teraz wrócić do Booking.
Skoro mamy Empty State to przystąpimy teraz tutaj do modelowania Full state.
A więc wracam do edytora i to co będę chciał zrobić to ukryć cały ten element.
To jest booking z Empty State.
W ogóle go nie pokazywać, żeby nam się tutaj nie stwarzał nam żadnych problemów.
I rozpocznijmy od dodania nowej grupy i przystąpimy do działania.
Będzie to.
Wrapper grup.
W moim przypadku kolumn będę chciał tutaj strzelić elementy.
I dać tutaj jeszcze pozbyć się.
Tej minimalnej szerokości.
Rozciągnąć to na całą dostępną wysokość, czyli pozbyć się też minimalnej wysokości.
I teraz tak do środka będę chciał wstawić grupę z przyciskami.
Ją mogę sobie skopiować z jednego właśnie.
Tych drugich zabil element.
Tą grupę.
Skopiuję ją, wróćmy.
To dashboard zostawmy tutaj do Wrapper Group.
I dodajmy tutaj jeszcze grupę.
Tylko ją przesuniemy
na górę w ten sposób, żeby te przyciski wskoczyły nam na sam dół.
To, co będę chciał dla nich zrobić, to tak tutaj zmienić.
Nazwę napraw button.
I tak samo tekst.
Teraz tego zduplikowane i zgrupować oba te przyciski.
From container.
Ma on być tutaj na First Cap Space Ink powiedzmy 24 piksele.
Myślę, że będzie ok.
Dajmy tu i tu i tu content.
To będzie CETA Buttons Group.
I to nie będzie prawy button, tylko next button.
I oczywiście zmienił jeszcze tekst.
I tutaj zmieńmy tekst na Empty State.
Dolna część jest gotowa, a my tutaj możemy zacząć pracować nad górną.
To będzie tak.
Hop siup.
Oczywiście.
Tutaj myślnik.
Tu będę chciał ustawić kolumn.
Gap z passing gap.
Tutaj na 32 piksele pozbywamy się tak minimalnej szerokości.
I zacznijmy od tekstu.
I.
Serwuję sobie layouty.
To będzie Reading 5 typu.
Tylko kolor ustawiony na neutral i będę
chciał wyświetlać dokładnie ten sam tekst, który wyświetlam tutaj.
Czyli mogę się odnieść dynamicznie do URL.
Paw Segment z list.
Nasz port wniósł.
Item 2.
I tutaj będzie to tekst.
Natomiast jak pamiętasz ten tekst ukrywaliśmy na rozdzielczości poniżej 768
pikseli, więc ja ten będę chciał wtedy pokazywać.
Domyślnie go ukrywamy.
Tu jeszcze odznaczamy.
I dodajmy tutaj condition.
Mniejsze równe 7, 6, 8.
A więc takich widokach tablet owych będę
chciał, żeby on tutaj był widoczny dopiero.
OK.
Teraz dodajmy tutaj kolejny przycisk.
Mam tutaj odpowiedni styl.
Button Filters.
Chcę tutaj wysokość ustawić na 40 pikseli.
I będzie to.
App coming btn.
Teraz tak powielam ten button jeszcze dwa
razy, zaznaczam wszystkie trzy i grupuje w container.
To będzie filter.
Spadł on z Filters Buttons Group.
Tabs passing dajmy tutaj na 16 pikseli.
Pozostawmy fit fit content i tylko teraz poprawiamy te batony.
To będzie active BTN.
A to będzie ended.
Teraz zaznaczam sobie całą grupę Filters
Button Group i znowu ją grupuje w container.
Niech to będzie po prostu Filters Group.
Będę chciał zastosować Space Between.
I teraz tak.
Dodać tu kolejną grupę.
Ustawić row.
Kolumn GAP.
Spróbujmy na osiem pikseli.
Teraz wrzucam tu ikonkę oraz tekst.
Tak tekst.
Sobie daruję i to będzie sort update.
A czcionka do body XS 12 pikseli 600.
Fit Tweet to content.
Rozmiar ikonki zmieniam na 24 na 24 piksele.
To będzie sort ikon.
Color Secondary 600.
Sama ikonka ma taką nazwę.
Teraz tak zaznaczam tą grupę.
To będzie Tate Group.
I pozbywam się tutaj oczywiście minimalnej szerokości feed white content.
Generujemy minimalną wysokość i w centrum.
My sobie jeszcze tą grupę tutaj w pionie.
A więc tak mamy tekst, Mamy tutaj te filtry, dzięki którym będziemy mogli
sobie w przyszłości filtrować naszą listę z Buckingham i
będziemy mogli sobie to posortować jeszcze tutaj po dacie.
To co chciałbym zrobić, to dodać jeszcze tutaj Group Fokus.
A więc tak.
Stawiam.
W moim przypadku będzie ona miała tak.
Layout ustawiony na kolumnie szerokość 96 pikseli.
Kolor.
Białe.
Reference Element to będzie nasza Date Group, czyli tutaj.
To znaczy, że ten element cały on ma 102.
OK, to zmniejsz.
Zwiększymy tutaj szerokość do 102,
żeby ta pasowała do tej grupy tutaj z ikonką i tym tekstem.
To będzie date Focus Group, a w zasadzie group fokus czyli na odwrót GF.
Offset top ustawmy na 5.
Delikatnie to usuńmy
tak obramowanie z każdej strony na standardowy kolor 8 pikseli.
W środku padding i równe szesnaście pikseli z każdej strony.
Teraz chcę sobie skopiować ten tekst i wstawić go tutaj dwa razy.
Tu jeszcze passing ustawmy na 12 pixeli i teraz to będzie tak jeden do dziewięciu.
Dziewięć do jednego.
Postulujemy minimalną wysokość i nasza grupowa kurs jest już tutaj widoczna.
Możemy tylko dodać workflow, żeby ją pokazać.
A więc do tej grupy Davis Group.
Dodajemy workflow szablony element.
I to będzie datę.
Klub Focus.
Tutaj sporą część mamy już gotową.
Będę chciał teraz tutaj za modelować nasze sukienki.
Natomiast aby nie dodawać już kolejnego
tutaj setu i nie rozbudowywać tej bazy aż za bardzo,
to po prostu pójdziemy na łatwiznę i wykorzystamy Option Set Listing.
Ponieważ z niego wyciągniemy większość rzeczy, a resztę po prostu ustawimy tak na
sztywno, żeby to na razie tylko za modelować.
W przyszłości oczywiście utworzymy do tego
odpowiedni data w naszej bazie danych, ale na razie idźmy na łatwiznę.
A więc dodajmy tutaj RIP Setting Group.
Wybierzmy sobie tutaj.
A jest listing z.
Dajmy tu może 4 rzędy.
Jedna kolumna to jest ok.
Separator.
Wybierzmy sobie na solid szerokość powiedzmy 24 piksele.
Kolor biały.
Oczywiście Office Things.
Wybierzmy tutaj na przykład Rau.
Pozbywamy się minimalnej szerokości i zaczynamy tutaj
pracować nad pojedynczą grupą, czyli pojedynczą kartą.
Wstawiamy tutaj grupę.
Będzie to po prostu booking kart.
Grób.
Tu będę chciał ustawić rolę.
W ten sposób pozbyć się minimalnej szerokości.
Zaokrąglenie 8 pikseli.
Nasz standardowy border.
I tak do środka wstawić obrazek.
Ale zanim to zrobimy, to jeszcze
oczywiście przekażmy to właściwy typowy content, czyli listing Karen oraz listing.
I teraz tak teraz dodajmy obrazek.
Będzie to.
Po prostu listing Kimiego.
Tu przekażemy oczywiście nasz image main.
Wybieramy Zuma.
Musimy go sobie tutaj zaokrąglić w tych rogach, czyli.
Top left 8 i potem left 8 przechodze do layoutu.
I tak max ustawiam sobie na 320 pikseli.
Zeruje minus.
Minimalną wysokość ustawiam na fixed i będzie to 100%.
Teraz dodajemy tutaj kolejną grupę.
Będzie to pół King.
Content Group.
Typ layoutu kolumn w tym przypadku.
Pozbywamy się tutaj minimalnej szerokości.
Gap Space Ring ustawiam na 16 pikseli padding z każdej strony na 24.
W ten sposób.
I teraz tak kopiuję sobie najpierw ten tekst.
Tylko czy mamy tutaj przekazany właściwy, typowy content?
Nie mamy.
A więc zadbajmy o to.
W ten sposób.
Tak zaznaczam ten tekst wklejam tu.
Chcę zmienić to na body XS 12 pikseli 400.
I tutaj odnieść się.
Na przykład do.
Powiedzmy typeof place.
Na razie zróbmy to w ten sposób.
Wstawiam ten tekst,
kopiuję go i wstawiam go jeszcze raz Tutaj Znowu zmieniam czcionkę i tutaj ustawmy.
Na sztywno taki tekst.
Zaznaczam oba te teksty grupuje, jak się domyślasz w Container.
Ostrzeliwuje do przeciwnych krańców.
To będzie grupa.
Picking Cars Top Group.
Teraz tak.
Kopiuję sobie ten tekst, wstawiam tutaj.
Dwa razy.
Tak, żeby on mi tu wskoczył właśnie do tej grupy Booking Content Group.
To będzie tak body.
LG.
18 pikseli 500.
Tu chcę wyświetlać display.
Mamy tutaj jakiś condition.
OK, to się go pozbądźmy.
I dla tych tekstów też.
OK. I tutaj też.
Następnie tutaj.
Wybieram body s m 14 pikseli 500.
I tym razem chcę się odnieść do host.
Dobra, mamy górę, Mamy tutaj nazwę.
Mamy tutaj to, czego potrzebowaliśmy.
Będę chciał tu jeszcze pokazywać cenę, ale w tym celu wróćmy do karty z listingu.
Ułatwimy sobie życie i kupujmy sobie całą tą grupę.
Gdzie mamy ten listing?
I tutaj permit mamy Price i ten tekst permit.
Wracamy do Dashboard u.
OK. Co się tu zadziało?
A ok, dobra ten tekst tutaj się ukrywał
i kopiowałem, więc oczywiście muszę tutaj przywracać.
I to oczywiście tak.
Ten tekst tutaj również.
I te dwa teksty również.
Zostawiłam grupę tylko.
To zmieniam na.
Body MD 16 pikseli 700.
Primary 600.
A ten tekst.
Na coś takiego.
Teraz tak mam całą tą grupę i chcę ją.
Tutaj jeszcze zgrupować.
From container.
Nazwijmy ją jakoś w miarę sensownie.
Niech to będzie.
Content Linear Group.
Może właśnie w ten sposób.
I teraz tak będę tutaj chciał wstawić tekst.
A więc mam tutaj tą grupę. Tego nie da.
Listing prices tylko.
Poza nią.
To będzie tekst.
A coming.
Zacznijmy od body 114 pikseli.
Więc.
Będę chciał sobie ustawić Line Space Ink na jeden kolor, wybrać kolor.
Może zacznijmy od Warning 600.
I teraz pozbyć się tych ustawień.
Dać white content i dać padding z każdej strony na powiedzmy 16 pikseli.
I jeszcze zaokrąglenie narożników.
Na 8.
I dodatkowo ustawić tutaj.
Background flat color.
Na kolor obornik 25.
Co się tutaj zadziało?
Czemu się to tak rozprzestrzeniło?
Aha, bo ustawiłem Letters Passing, a nie zaokrąglenie narożników.
Dobra, teraz zaznaczmy tą grupę Booking content.
Pozbądźmy się minimalnej wysokości.
Tutaj też.
Jak to zadziała?
Przejdźmy do podglądu.
Odświeżamy.
OK. Wygląda, że jest całkiem fajnie.
Te grupy są jednak tutaj jakoś mocno za duże.
Zwłaszcza ten obrazek jest tutaj.
To właśnie robi się teraz.
Chyba to zadziałało tak jak powinna.
O właśnie, coś tam wcześniej nie wskoczyło.
Teraz znowu tutaj obrazek się nie pojawia.
Ale to nic.
Tu jeszcze musimy dodać margines, który będzie odsuwał tę grupę od siebie.
A więc.
Cała ta CETA.
Dajmy jej margin top 32 piksele.
Z jakiegoś powodu nie chcę tutaj wskoczyć.
OK, Teraz widzisz Skoczyła.
Oczywiście moglibyśmy to jeszcze dopasować tutaj, dodać odstępy itd.
Ale to już pozostawiam Tobie, podobnie zresztą jak dopasowanie całej tej grupy
tutaj do RWD, czyli do oczywiście niższych rozdzielczości.
Twoim zadaniem będzie również zamienić to na element.
Natomiast zanim jeszcze zakończę tą lekcję to tak zastanówmy się w jaki sposób
pokazywać empty state i full state, a w zasadzie jak go sobie przełączać.
Ja w tym celu wykorzystam możliwość
prostego dostępu do bazy danych, a tym bardziej do konta Current User.
Jak pamiętasz korzystaliśmy z rent user tutaj sprawdzaliśmy czy jest zalogowany
czy nie potrafiliśmy wyciągnąć sobie jego np.
właśnie maila.
Ja w tym przypadku chcę wrócić do edytora, przejść do data.
I dodać tutaj nowy filtr.
Oczywiście wiem, że mieliśmy bardzo nie
pracować z bazą danych, ale zobaczysz, że będzie to niesamowicie proste.
Dodajemy tutaj pole o nazwie Pub Kings, a w zasadzie tag booking SNMP.
Ustawmy typ na number.
I teraz tak będę chciał.
Po kliknięciu w ten przycisk Empty State
ustawić właśnie wartość tego pola na Current user na wartość 0 i wtedy
pokazywać właśnie ten element na empty status.
A natomiast tą całą grupę, którą zaprojektowaliśmy wtedy,
kiedy właśnie to pole po King's Number będzie miało wartość 1.
A więc.
A to workflow.
I mogę się odnieść tutaj.
To account I update
make changes to current user i muszę wybrać które pola chcemy zmieniać.
W naszym przypadku to Booking number i wpisujemy tutaj wartość
0, ponieważ w tym przypadku chcemy się przełączyć do empty.
Teraz przechodzę do element o nazwie Xbox Empty.
I tutaj będę chciał wykonać bardzo podobną operację, tylko na odwrót.
A więc zaznaczam ten button start.
Edit Workflow Znów odnoszę się do.
Make changes current user.
Wybieram pole po Kings Number i tu po prostu na sztywno
wpisuję 1 i zaraz zobaczysz jak to zadziała.
Wrócimy do.
Dashboard dół.
I tak zaznaczmy całą tą grupę.
Tutaj wrapper group.
Na razie nie będę jej zamieniał tutaj na element, później się tym zajmę.
Natomiast tak chcę ją na dzień dobry ukryć.
I pokazywać ją kiedy?
Przede wszystkim wtedy, kiedy widok to jest Bóg Guest booking.
A więc to, co przedtem robiliśmy, czyli.
URL.
Hitem numer dwa.
Jest równy Xbox i dodatkowo coś jeszcze.
Moim przypadku będzie to end.
Current User Pole Box Number jest równa 1.
Czyli te oba warunki muszą być tutaj spełnione, żeby to zadziałało.
Czyli musimy być w widoku Xbox i dodatkowo current user.
Właśnie ten jego field po King's Number ma mieć wartość 1.
Mogę sobie skopiować to.
Przejdź teraz do tego z booking z Empire i zaktualizować sobie.
Ten warunek i tutaj zmienić to po prostu na zero i zaraz zobaczysz
jak w prosty sposób będziemy mogli się przełączać tymi widokami.
Przejdźmy do podglądu.
Odświeżamy.
Powinien nam skoczyć widok Empty.
Dlaczego nam ten widok nie wskoczył?
Mam nadzieję, że się domyślasz.
Jeżeli przejdę tutaj do update a.
I do naszego tutaj rekordu z użytkownikiem o koncie Guest Booking number.
Nie ma tutaj żadnej wartości.
A więc ustawmy ją sobie domyślnie na 0. To wszystko.
Mogę sobie w ten sposób oczywiście zaktualizować ten rekord.
I teraz dopiero będę mógł sobie przejść do podglądu.
A jak widzisz, Babel już wprowadził tę zmianę.
A więc tak jesteśmy w widoku Booking dla konta gościa.
Ten konkretny gość jego rekord w bazie
danych ma pole o nazwie Booking number ustawione chwilowo na wartość równą 0.
A więc zadziałało nam ten condition ale, które pokazuje nam tutaj Empty State.
Teraz po kliknięciu w ten button będę
chciał właśnie ten booking saber dla tego current user zmienić na 1.
No i zadziałało.
Więc połączyliśmy się. Zadziałało super.
Płynnie ukryliśmy tamten widok, pokazaliśmy ten.
I możemy oczywiście to odwrócić.
Empty State.
Jak widzisz ten mega super prosty sposób
mogliśmy tutaj odnieść się do bieżącego użytkownika.
Nie musieliśmy wyszukiwać takiego rekordu w bazie danych.
Wystarczyło odnieść się do Current User Bubble.
Dokładnie wiedział jaki rekord ma sobie
namierzyć, a my w prosty sposób zmieniliśmy tylko jedno pole.
I dzięki temu mamy bardzo fajną dynamikę w naszym dashboard.
Faza modelowa, czyli możliwość
przełączania się pomiędzy full lub empty state.
Ja dziękuję Ci za uwagę i do usłyszenia w kolejnej lekcji.