MVP aplikacji w rekordowym czasie z Bubble: Poprawiamy stronę indexową
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 praca domowa w ogólnym zakresie nie sprawiła Ci
najmniejszego problemu.
Ja natomiast chciałbym poruszyć kilka kwestii z nią związanych.
Przede wszystkim zacznijmy tutaj od wyświetlania liczby krajów.
Mamy tutaj właśnie tą pierwszą scripting grupę, gdzie wyświetlamy
te promowane kraje.
Jeżeli zamieniłeś tą grupę, którą mieliśmy tutaj na jakiś element, to
jestem z Ciebie oczywiście dumny.
A jeżeli nie to zrób to proszę.
W tej chwili, ponieważ powielamy tą grupę tu i tu to element jest
jak najbardziej przydatny.
Mam nadzieję, że to już zrobiłeś.
Natomiast przejdźmy sobie do tej pierwszej repeat grupy i zerknijmy
co my tutaj wyszukiwali.
Otóż wyszukiwali krajów, bo taki kontent ustawiliśmy tutaj dla
naszej repeat link grupy.
Kolejno dodaliśmy tutaj tylko jeden screen, który mówi, że is
featured jest równe Yes.
Ja w ten sposób ograniczam się tylko do tych promowanych krajów, a dodatkowo wiem
od razu, że takie kraje będą posiadały jakieś przypisane ratingi.
Natomiast jakie kraje chcemy wyświetlać tutaj?
Możemy sobie oczywiście skopiować to wyrażenie, przejść tutaj,
wkleić je i tylko zamienić z featured na NOW, żeby te kraje tutaj nie powalały.
Bubel Jeżeli taka kolumna jest nie posiada żadnej wartości to tutaj w wyszukiwaniu
będzie traktowana tak jakby tam było wstawione.
No ok, no to zerknijmy czy nam to zadziałało.
Odświeżamy sobie stronę główną.
Teraz przejdźmy tutaj do listy krajów.
Wygląda na to, że jest OK.
Mamy tutaj te dwa promowane, czyli USA oraz Polskę, które posiadają
odpowiednią ilość apartamentów.
Dodatkowo jak widzisz ja tutaj skróciłem sobie to formatowanie do 0 miejsc po
przecinku tak żeby pojawiała mi się tutaj ładna prosta cena, a nie ta właśnie
z kropkami, jakimiś tam cenami.
Natomiast co się dzieje tutaj?
Tutaj też wyświetlamy kraje gdzie jest feature.
Tu ustawiona jest na nos.
Natomiast dla Francji nie mamy tutaj żadnych apartamentów.
No i dodatkowo to average price jest ustawione na 0, co oczywiście jest jak
najbardziej poprawne, ponieważ średnia wartość to oczywiście 0.
Ja natomiast chciałbym tutaj wyświetlać tylko te kraje, które mają chociaż jeden
apartament do nich przypisany, czyli przynajmniej jeden listing.
No i jak do tego teraz podejść?
Gdybyśmy wrócili tutaj do naszej bazy danych
tutaj data type country, to niestety nie mamy tutaj linkowania bezpośrednio do
listingu, a więc nie jesteśmy w stanie w prosty sposób wyciągnąć sobie tej
wartości, sprawdzić czy tam są jakieś elementy, Jeżeli nie, to
odfiltrować sobie taki kraj.
Czyli w tym przypadku gdybyśmy dali pole typu listing, no to
sprawdzili byśmy jego count.
Jeśli jest mniejsze od 1 czy inaczej mówiąc jest równe 0
to nie wyświetlamy takiego kraju.
Tutaj to nie zadziała.
Jak więc do tego podejść?
Jak już nie raz wspominałem Babel dla danego problemu zawsze znajdzie
się kilka różnych rozwiązań.
Skoro nie możemy sobie tych krajów zawęzić w ten sposób, to możemy przejść
do listingu i wyszukać najpierw wszystkie listing,
ponieważ te, które mamy tutaj dodane na pewno mają przypisane country.
I właśnie dzięki temu uzyskamy sobie właśnie taką listę krajów.
OK, łatwo powiedzieć, ale teraz jak to zrobić w Babel?
Jak się domyślasz, musimy wrócić do dizajnu, przejść sobie tutaj.
Czyścimy to zamiast country.
Teraz chcę wyszukać listing i szukaliśmy wszystkie listing.
Wiemy, że te wszystkie listing mają jakiś kraj przepisane, ale oczywiście teraz to
wyrażenie świeci się na czerwono, ponieważ mamy typeof content country, a to jak
widzisz mamy ewakuowane do listy listingu.
Ale skoro mamy listę listingu, to z każdego elementu
możemy wyciągnąć teraz country, czyli poprzez Egipt, country
i teraz Bubble już jest zadowolony.
Oczekiwał najpierw Content country i dostał listę krajów, które
przekazujemy do repeat grupy.
Mam nadzieję, że rozumiesz w jaki sposób do tego podszedłem
i dlaczego to teraz zadziała.
Jedyne co musimy zrobić, to oczywiście dodać tutaj filtrowania,
żeby z tej listy krajów, które tutaj znajdziemy.
Usunąć te, gdzie i switche to było równe jest.
Czyli i switch w tym przypadku musi być równe.
No.
I to wszystko.
W ten sposób pojawiał się tylko te kraje, które mają przypisane jakiś listing i nie
będziemy mieć tam właśnie wartości 0 apartments.
Przejdźmy, odświeżamy.
I to się zgadza.
Mamy Japonię, mamy Włochy, mamy tutaj Danię i mamy przynajmniej po
jednym apartamencie i ładnie wyliczone. A w rozpisce.
Wróćmy więc na stronę index ową.
W przypadku bloga tutaj nie napotkałem na żadne problemy i myślę, że Ty również.
Wystarczyło tutaj zwyczajnie.
przekazać właściwy data SOS, który w naszym przypadku jest równy
po prostu Search for Blog Posts.
Żadnych kont straight.
Przekazujemy wszystkie i oczywiście odpowiednio
przekazujemy te wartości i wyciągamy je później w tym elemencie Block post ra.
Natomiast kolejnym zadaniem, które otrzymałeś było właśnie
przejście na stronę Search i poprawienie tej grupy tak, aby odnosiła
się teraz do właściwego data sources, czyli do naszych kategorii
bezpośrednio z bazy danych.
Ja jedyne co tutaj zrobiłem to dodałem sobie
do tego elementu dla ikonki i dla tekstu odpowiednie conditions, ale które mi tylko
zmieniają kolor tła Primary 600 kiedy ta cała grupa jest powalona.
Natomiast tutaj przynajmniej na moment nagrywania tego kursu możesz
natrafić na bardzo irytujący bug.
Otóż przejdźmy do podglądu na samą górę.
Przejdźmy na stronę Surge.
Jak widzisz, tutaj znowu wyświetla nam się lista kategorii.
Zmienia nam się kolor.
Niby wszystko jest ok, ale to mamy pierwszy item i zniknęła nam ikonka.
Nie wiemy dlaczego.
Koni FAI ma ostatnio bardzo duży problem z tym.
I zerknąłem sobie kiedyś do kodu co tam się dzieje i okazuje się, że z jakiegoś
niezrozumiałego dla mnie powodu dla pierwszego itemu
ten SVG, czyli ten obrazek, który się w środku pojawia zamiast tych wymiarów,
które mu ustawiliśmy otrzymały je wymiary 0 na 0 albo nawet 2 na 2 piksele, co
jest w ogóle jakoś bardzo śmieszne.
Dlatego jeżeli natrafisz na taki bug, to zaraz Ci pokażę jak go w
prosty sposób rozwiązać.
W tym celu przechodzimy na stronę Search.
Przechodzimy do tego elementu, do tej ikonki.
Ja sobie skopiowałem tą nazwę kategorię icon.
Czyli zaznaczamy kopiujemy, przechodzimy do print i wklejam ją tutaj
właśnie jako id atrybut.
Skoro mamy to id to jesteśmy się do takiego elementu w
stanie odnieść właśnie poprzez HTML i poprzez style CSS.
W tym celu przeszedłem do grupy Your Search
i jak widzisz dodałem tutaj element HTML.
Ustawiłem jego wymiary na 10 na 10 pikseli tak żeby on był tutaj jak najmniejszy i
nie wpływał na cały układ tutaj jaki mamy.
Natomiast jaki kod musimy przekazać?
Ja już Ci go wklejam.
I wygląda on w ten sposób odnosimy się do ID takiej ikonki.
Czyli u nas jest to category icon.
Potem do SVG, które jest środku i poprzez taki zapis z important wymuszamy
właśnie tą wysokość i szerokość dla takiego elementu.
Skąd ja wziąłem te 24 piksele? Już Ci pokazuję.
Jest to wymiar, który nadaliśmy tutaj, w tym miejscu, na tej ikonki.
Z jakiegoś powodu właśnie te 24 piksele działa nam na każdy kolejny
item oprócz pierwszego.
Natomiast taki zapis właśnie poprzez style teraz wymusi te 24 piksele również
dla tej ikonki.
Przejdźmy, odświeżamy.
Jak widzisz ikonka już się pojawiła i teraz nasza repeat Grupa
działa tak jak powinna.
A skoro już wszędzie zastosowaliśmy właśnie odniesienia do naszego data type,
to nie pozostaje nam nic innego jak wrócić do edytora, przejść do zakładki Data
set i pozbyć się tych, z których już nie korzystamy, czyli wywalamy OZ Block.
ustalamy OZ Categories i wywalamy OZ Countries.
Tutaj do wywalania pozostanie nam jeszcze OZ, Listing reviews oraz Wish list, ale
tym oczywiście zajmiemy się później.
Natomiast teraz najważniejszym zadaniem jest wprowadzanie kilku drobnych poprawek
na naszej stronie index nowej, dzięki którym użytkownik będzie mógł
poprzez pole Search właśnie wyszukać sobie jakiś listing.
A więc przechodzimy na stronę indeksowania.
Przechodzimy tutaj do tego elementu Search here do Edit element i będziemy wprowadzać
kilka poprawek, a w zasadzie ja już je tutaj wprowadziłem i zaraz Ci je omówię.
Przede wszystkim tu mamy pole Location.
Poprzednio, o ile dobrze pamiętam, wstawiliśmy tutaj chyba zwykłe pole input.
Dlatego proszę Cię zamienić teraz na pole Search Box i dostosuj
sobie odpowiednio stylami.
Ja jedyne co tutaj zrobiłem to zmieniłem właśnie kolor.
Tutaj główne na Secondary 600 place holder to secondary 600 ustawione na 35 pikseli
i kolejne pozbywam się background style obramowania.
Nie chcę tutaj żadnych cieni.
Przeszedłem do zakładki Condition i tutaj w zasadzie możemy usunąć sobie
wszystkie te condition, ale tak, żeby to pole było niemal niewidoczne.
I jako place order ustawiłem sobie taki text a choice style.
W tym przypadku oczywiście ustawiamy na Geographic Places.
W ten sposób będziemy mogli np.
wpisać sobie to w San Francisco.
Kolejno wywaliłem tutaj te dwa koty, które były odpowiedzialne za Pekin i Checkout
i wstawiłem znane Ci już pole typu date.
Ja je sobie skopiowałem ze strony listingu i tylko pozbyłem się tutaj Initial State
initial Date, które się odnosiły do parametrów z URL a
Project holder ustawiłem na taki Pekin checkout i mi nim date
znowu przywróciłem na karę.
Update date + 1 dzień.
Dodatkowo poniżej jeszcze te style, które ładnie formatuje auto pole.
A więc teraz wszystko będzie zgodne z naszym designem.
I teraz jeszcze trzecia poprawka tutaj dla guest wywalamy sobie
input, wstawiamy pole typu drop down i tu wybieramy tak Dynamic Success Faces
to jest po prostu other listing numbers.
I tu jak się domyślasz, te wszystkie numery i tutaj Karen to
Display, czyli niemal dokładnie to samo, co robiliśmy na stronie listingu.
Mógłbyś sobie np.
skopiować takie pole stamtąd i wstawić je tutaj i usunąć wszelkie conditions, ale
znów tutaj ustawiam te style tak, aby to pole po prostu miało tylko
ten place order widoczny.
Żadnych obramowanie, żadnego koloru tła, żadnych cieni itd.
Skoro to działa, to zobaczmy jak to wygląda na stronie index owej.
Wrzućmy sobie tutaj.
I.
Niezbyt wiele się zmieniło oprócz właśnie tego podziału na dwa osobne pola.
Mogę tutaj wpisać np. San Francisco.
Teraz tutaj wybrać sobie przedział dat.
Chcę użytkowników od razu przyzwyczaić do takiego formatu, gdzie wybierają sobie
przedział, a nie dwie osobne daty.
Teraz z kolei mamy tutaj pole typu drop down, a więc możemy sobie
wybrać liczbę gości.
No i teraz po kliknięciu w pole Search co się powinno stać?
Przede wszystkim powinniśmy zostać przeniesieni na tę stronę wyszukiwania.
Dodatkowo chcemy przekazać te wszystkie wartości, które nam
tutaj wpisał użytkownik.
A w jaki sposób w bubel przekazujemy wartości pomiędzy stronami?
Myślę, że już doskonale znasz odpowiedź, ponieważ korzystaliśmy z
takiego rozwiązania już nie raz.
Oczywiście poprzez parametry URL, a więc nie pozostaje nam nic innego
jak wrócić do edytora.
I dodać tutaj właśnie odpowiednie workflow.
Znów mógłbyś tutaj dodać additional, który zablokuje taki przycisk, jeżeli
wartości w tych polach są puste.
Ja to pozostawiam Tobie.
Skupimy się na głównej funkcjonalności, a więc.
Edit Workflow Mamy tutaj oczywiście już akcje Go to Page Search.
Teraz naszym zadaniem będzie dodanie tutaj kolejnych parametrów.
Więc zacznijmy i zaznaczamy Oczywiście to pole pierwsze to będzie Location.
I będzie to nasz Search box.
Value.
Kolejno mamy czekan.
To będzie nasz radę.
Przynajmniej u mnie tak się nazywa ten element date r date
i będzie to selected range start.
Mogę sobie to skopiować.
Kolejny parametr to checkout.
Tu wybieramy End.
No i jeszcze nam pozostaje liczba gości czyli guest.
Number.
Niech to będzie oczywiście u nas.
Ten drop down to jest drop down i jego value.
Jak widzisz w tym przypadku oczywiście value i display to jest option
set, więc musimy tutaj wybrać display.
Jak widzisz w tym przypadku ja stosuję już takie dłuższe nazewnictwo, nie elfów
itd jak Ci tłumaczyłem wcześniej.
W ten sposób będzie mi łatwiej zrozumieć co te parametry znaczą.
Natomiast to czy nazwiesz tą location czy elf nie ma najmniejszego znaczenia.
Wszystko zależy od Ciebie.
Pamiętaj tylko, żeby tutaj właśnie stosować się do reguł,
które obowiązują w rel parametrach, czyli właśnie do tego, aby nie przekazywać
tam dużych liter oraz dodatkowo znaków specjalnych.
Nasze workflow jest już w zasadzie gotowe.
Możemy więc wrócić na stronę indeksowania i rzeczywiście spróbujmy
poszukać jakiegoś listingu.
W San Francisco, czyli San Francisco.
W takim przedziale dat.
Powiedzmy, że dla jednej osoby. Klikam search.
Zgodnie z naszym workflow.
Zostałem przekierowany na właściwą stronę i zerknijmy jeszcze do paska adresu.
Wygląda na to, że wszystko zostało przekazane poprawnie.
Mamy location ustawione na odpowiednią wartość.
Mamy tutaj Pekin.
Mamy czeka out.
I zerknijmy jeszcze.
Mamy tutaj get number, więc wygląda na to, że wszystko jest ok.
Skoro nasza strona search już przyjmuje parametry, to zadaniem w kolejnej lekcji
będzie oczywiście pobranie tych parametrów i dostosowanie tych wyników,
a także dodanie później odpowiednich opcji, które pozwolą nam zawęzić
jeszcze takie wyszukiwanie.
Ja dziękuję Ci za uwagę i do zobaczenia w kolejnej lekcji.