MVP aplikacji w rekordowym czasie z Bubble: Paginacja i geolokalizacja w Bubble
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?
Ostatnim elementem, o który musimy zadbać na naszej stronie search.
Zresztą nie tylko tutaj, ale wszędzie tam, gdzie wyświetla dużą liczbę
elementów za pomocą repeat grupy.
Jest oczywiście odpowiednia pagina cja.
W naszym przypadku jest ona tutaj dodana na sztywno.
Niczym nie łączy się właśnie z tą listą, którą wyświetlamy.
A więc musimy teraz to odpowiednio dostosować.
Najprostsze do ustawienia będą te dwie strzałki, czyli kierująca do
poprzedniej strony oraz do następnej. Jak to zrobić?
Wracamy do edytora.
Przejdźmy sobie do tej grupy Results Scripting Group.
Żeby wyświetlić większą liczbę wyników.
Na chwilę obecną pozbądźmy się tutaj tego skomplikowanego Data source.
Klikamy Clear Expression Search For i wyświetlamy tutaj wszystkie
listing, jakie mamy w bazie.
Mamy tutaj ograniczenie trzy rzędy, trzy kolumny.
Ja chcę zmienić to do dwóch rzędów, czyli wyświetlać sześć rekordów naraz.
Zerknijmy, czy to rzeczywiście zadziała.
Wyświetlamy pierwsze sześć.
OK, i teraz musimy znaleźć sposób, żeby wyświetlić kolejne sześć,
bo wszystkich w bazie.
Jeżeli sobie wrócimy i sprawdzimy, mamy jak się okazuje, dwanaście.
A więc powinniśmy mieć dwie strony i móc się między nimi przełączać.
Tak jak mówiłem RAW i Next jest super proste.
Mogę kliknąć na tą ikonkę PF icon.
Oczywiście zaznaczamy, że jest klikalne i teraz chcemy dla niej ustawić odpowiednie
workflow, a więc Start Edit Workflow.
Dodajmy tutaj teraz odpowiedni folder.
Będzie to plugin Nation.
I teraz w tej liście akcji mogę się odnieść do sekcji Element actions.
Kolejno przejść do Repeat Group i wybrać sobie po prostu Show reviews.
I jeszcze oczywiście wskazujemy, której grupy w zasadzie której
repeat grupy ma to dotyczyć.
U nas jest to result g i to samo musimy zrobić dla next,
a więc zaznaczamy, że jest. Klikam na.
Start Edit Workflow, odpowiedni folder i tym razem mamy tutaj Show Next, czyli
przy Next next, przy Preview Shop Reviews i oczywiście tutaj właściwa repeat grupa
i zerknijmy czy to rzeczywiście działa.
Jesteśmy na pierwszej stronie z wynikami. Klikam tutaj.
Jak widzisz ładują mi się kolejne i mogę sobie wrócić.
Natomiast chciałbym zablokować możliwość kliknięcia w te ikonki jeżeli jesteśmy
tutaj na pierwszej stronie, a tu na ostatniej.
Znowu bubel niesamowicie nam w tym pomoże dając tam odpowiednie conditions.
Ale zerknijmy czy mogę się tutaj do tego odnieść.
Czasami w przypadku niektórych elementów trudno jest się odnieść do
repeat ING Group, które mamy na stronie, A teraz zaraz zobaczysz,
jak to łatwo rozwiązać.
Przejdźmy na przykład do naszego tekstu.
I tu mam już taki warunek wyszukany Result scripting group.
Jest on the first page.
Kopiuję sobie ten conditions, stąd go wywalamy.
To jest niepotrzebne, ale teraz mogę wrócić do tej ikonki
i po prostu go tutaj wstawić.
Jak widzisz teraz Razor Scripting Group została odpowiednio wyszukana,
więc co się ma stać, jeżeli jesteśmy na pierwszej stronie?
Przede wszystkim nie chcemy dać tutaj użytkownikowi możliwości
kliknięcia w taką ikonkę.
Dodatkowo zmieńmy jej kolor na przykład właśnie tutaj, na powiedzmy
35%, żeby była odpowiednio oznaczona.
Kopiuję sobie ten warunek, przechodzę do next icon, dodaję go.
Tym razem odnoszę się do Real Scripting Group is on the last page.
I już mamy znowu odpowiedni condition real i robimy dokładnie to samo.
Czy to teraz działa? Odświeżamy.
Jesteśmy na pierwszej stronie. To się zgadza.
Ikonka jest nie klikalne i tak delikatnie tutaj strzeżona.
Natomiast mogę kliknąć tutaj, przejść do następnej i teraz się
to oczywiście zmienia.
Natomiast nieco więcej problemu będziemy mieć tutaj z tą sekcją,
właśnie z tymi liczbami stron.
Ponieważ musimy tutaj przekazać po prostu repeat ID grupę, a do niej po prostu
tyle stron, ile uzyskamy właśnie dzieląc wszystkie te
listing przez 6, ponieważ tyle ich na raz wyświetlamy.
No i tu będzie problem, ponieważ dodajmy sobie tutaj repeat id grupę.
Wstawiamy ją w to miejsce, nazwijmy ją po prostu back i Nation
RPG, czyli od Rapid Ink grupy.
Wstawiamy tutaj ten jeden item, czyli ten ładny, który mamy tutaj zaznaczony.
Ja go sobie stąd wycinam, a w zasadzie po prostu przenoszę tutaj do tej grupy.
Z Pack Nation wywalamy całą resztę.
Tutaj co chcemy mieć, chcemy mieć taki jeden rząd i dowolną liczbę kolumn.
Taki jeden element ma 32 x 32 piksele, więc to sobie zastosujmy.
Czyli minimalna szerokość takiej kolumny powinna być równa tutaj 32 pixele.
OK, nie wiemy ile takich kolumn będzie, ponieważ nie wiemy ile takich listingu w
przyszłości może się na takiej liście pojawić.
Oddzielamy sobie jeszcze te elementy.
Tutaj wybieram sobie kolor weight i szerokość ustawiam na 16 pikseli.
Teraz pozostaje mi tylko tutaj pozbyć się min.
Vive min Height.
No i teraz musimy tutaj przekazać jakiś typowy content.
Co tutaj ma być po kliknięciu w taki element?
Mamy dostępną akcję Przejdź pod konkretną stronę.
Tam musimy przekazać numer strony, a więc tutaj musimy wyświetlać jakiś number.
Mówiłem Ci, że to ma być ilość stron, która
uzyskamy dzieląc właśnie tutaj te wszystkie listing jakie
szukaliśmy w result group przez tą ilość, którą wyświetlamy.
A więc spróbujmy coś takiego tutaj zrobić.
Czyli powiedzmy, że tu mamy mieć number.
No i jak tutaj spróbuję się odnieść do tego w ten sposób, czyli Results
Scripting Group, List of Things Count.
I teraz podzielę to na 6.
No Bo to nam daje number, a nie listę numerów.
Widzisz Evaluation number.
W jaki więc sposób tutaj uzyskać listę takich numerków,
które będziemy mogli potem wyświetlać?
Musimy w tym celu wykorzystać zewnętrzny plugin.
Przechodzimy do pluginów i dodajemy taki, który nazywa się Toolbox.
Jest on już tutaj mega popularny.
Pozwala dodawać również wyrażenia JavaScript.
Ja z niego bardzo często korzystam, ale w tej najprostszej wersji,
czyli klikamy Install.
Daje on tutaj również coś, co się nazywa List of numbers i musimy zaraz
sobie to wstawić gdzieś na stronę.
Wybieram ten element i może umieśćmy go tak, żeby nam nic tutaj nie popsuł.
Na samej górze mamy grupę Back.
W ten sposób dostosujemy go jeszcze wymiarowo.
Wysokość dajmy tutaj 20 na 20.
Mamy tutaj tą grupę.
Tak b.
Przenieśmy na początek tą grupę nazwijmy w ogóle content top, może inner.
I tak stosujmy te elementy.
OK, to się zgadza.
Tu mamy też jeszcze.
Aha, mamy też element mapki.
OK, to nic, że ten element również tutaj nie będzie wyświetlany nigdzie na stronie.
Służy jako zmienna pomocnicza, ale musi być niestety od razu załadowany,
więc nie może być ukryty w mapie.
Nazwijmy to tak plugin Navigation Numbers.
Teraz tutaj Do tego wyrażenia musimy przekazać 3 rzeczy takiego numeru.
Chcemy startować od strony numer 1, czyli wpisuję to na sztywno jedynkę
co ile chcemy zwiększać takie strony o 1, czyli znowu jedynka.
A ile stron takich elementów tutaj chcemy wyświetlać?
To właśnie tutaj przekazuje to wyrażenie, czyli results repeat group
lista tych elementów.
Ich ilość dzielona tutaj na 6.
No i dodatkowo jeszcze.
Tutaj jest jeden problem.
U nas takich elementów jest 12, a więc mamy równy podział.
Jeśli podzielimy to na 6 da nam po prostu 2.
Natomiast co się stanie jakbyśmy mieli np. 13?
Da nam to oczywiście 2 z kawałkiem.
A więc tutaj żeby to zadziałało, musimy taką wartość zaokrąglić
jak najbardziej w górę.
Czyli jeżeli mielibyśmy 13 elementów to powinniśmy mieć 3 strony na pierwszej, 6,
na drugiej 6, na ostatniej 1, a więc możemy to uzyskać tutaj.
W ten sposób najpierw mamy ten zapis, teraz na końcu dajemy selling,
czyli zaokrąglanie do góry i to wszystko.
W ten sposób jeżeli będzie 2 z kawałkiem to Bubble zaokrągla to do 3.
I teraz skoro mamy właśnie List of Numbers, to możemy ją
wykorzystać w naszej repeat grupie.
A więc wracamy na dół i tutaj do naszej właśnie repeat
grupy gdzie mamy number przekazujemy.
Tutaj tą pagina numbers, Tu mamy jeszcze jakąś inną listę.
Będzie to po prostu ta lista.
O właśnie to daje nam tutaj tą listę numerów.
Zerknijmy, gdzie mamy jeszcze List of Numbers.
Gdzieś tam się to ustawiło.
Aha, to może jakiś test testy?
Wywalamy to tutaj z Papu i zostawiamy tylko jedną taką listę
właśnie umieszczoną tutaj w tej grupie.
No i teraz zastosujmy to najpierw Content number.
Data Source to właśnie to List of Numbers.
Teraz taka pojedyncza grupa.
Tu przekazujemy number.
Current Number i tutaj będzie oczywiście Number wyciągnięty właśnie z Parent grupy.
I zerknijmy czy to zadziała.
Odświeżamy.
Wygląda na to, że tak.
Oczywiście musimy sobie dostosować scripting grupę.
Mamy 12 elementów podzielone na sześć daje nam tutaj dwie strony,
natomiast jeszcze tutaj musimy dodać odpowiedni custom state,
który będzie sprawdzał, na której stronie aktualnie jesteśmy.
Czyli jeżeli klikniemy jedynkę czy dwójkę, to właśnie będziemy go zmieniać.
I w ten sposób właśnie dostosowywać wygląd, czyli tak jak
mieliśmy to oryginalnie.
A więc przechodzę tutaj, klikam w Twitchu content, żeby się odpowiednio dostosowała.
Teraz do całej tej repeat grupy dodajmy sobie custom state.
Będzie to Current page albo Current number, jakkolwiek to nazwiemy.
oczywiście number.
2 to 1, ponieważ chcemy, żeby w pierwszej kolejności była tutaj zaznaczona strona
numer 1 i teraz możemy dodać odpowiedni warunek.
U nas będzie to polegało tylko na tym, że wywalamy sobie tutaj te style.
Mamy flat color, mamy secondary 600.
Domyślnie ustawiamy go na 0.
A tą cyfrę tutaj właśnie na secondary 600.
I teraz Condition. Kiedy?
Tutaj RGB odnosimy się do naszej Rapid grupy PAG i Nation ERG
do stanu Current number jest równy równe parent number.
To tutaj zmieniamy ten kolor na białe.
Kopiuję sobie cały ten condition, zaznaczam całą tą grupę i tutaj ten
background color przywracam tutaj 100%.
I teraz powinniśmy uzyskać dużo lepszy efekt.
Jesteśmy na stronie pierwszej.
Jest to tutaj odpowiednio zaznaczone.
Mamy dwie strony.
No i teraz dodajmy akcję, która po pierwsze zmieni ten custom state, a po
drugie pozwoli przejść na odpowiednią stronę.
Jest to znów super proste w Babel zaznaczam ten item
wybieram sobie tutaj a do workflow.
Przypuśćmy go do folderu pagina i zmieńmy może ten kolor na zielony, żeby
nam się to fajnie wyróżniało i w pierwszej kolejności zmieniamy state.
AG i on RG Current number to będzie oczywiście Current Number
i następnie Element Actions.
Mamy tutaj opcję Goto page.
Tak jak mówiłem, znowu musimy przekazać numer strony, czyli kalendarz number
i na jaki repeat link grupie Result Scripting Group.
I teraz nasza pagina już wygląda poprawnie i powinna również poprawnie działać.
Jesteśmy na stronie numer 1. Klikam.
Przechodzimy na stronę numer 2.
Możemy się wrócić. Możemy oczywiście użyć press in next.
A więc tą część lekcji mamy już za sobą.
Wiesz, jak tworzyć machinacje?
Wiesz już jak obsługiwać prefiks next?
Jak dodawać sobie właśnie takie te cyferki, które odpowiadają
za liczbę stron.
Natomiast kolejnym zadaniem, do którego chciałbym wrócić, to przede
wszystkim przejdźmy sobie na stronę index.
I zjedziemy tutaj niżej, ponieważ te listing, które tutaj wyświetlamy
powinny bazować na mojej lokalizacji.
Czyli przeglądarka powinna pobrać sobie moją bieżącą lokalizację
i na tej podstawie właśnie dostosować tutaj te wyniki.
Jak to zrobić?
Babel Znów jest to super proste.
Przechodzę na stronę index ową.
Umieśćmy sobie tutaj to repeat link Groupe.
Mamy ją tutaj i musimy tutaj dodać odpowiedni odpowiedniego train.
Które będzie mówiło, że miasto takiego listingu czy coś podobnego
robiliśmy właśnie na stronie Search.
Znajduje się w odległości powiedzmy tak jak 50.
Kilometrów od miasta, w którym aktualnie jestem, czyli wykryta
przez moją przeglądarkę.
Jak teraz z Babel uzyskać taką informację o pobranej lokalizacji użytkownika?
Wystarczy, że zacznę tutaj wpisywać.
Czyli grafik. Mam tutaj opcję klient grafik.
Position.
Wybierzmy tutaj Empty constant.
Jeżeli użytkownik nie zgodzi się na pokazanie takiej lokalizacji, to domyślnie
wyświetlimy wszystkie listing, a ten warunek zostanie tutaj całkowicie
zignorowane i zobacz jak to zadziała.
Wracam sobie do podglądu.
Odświeżam.
I teraz moja przeglądarka prosi mnie właśnie o dostęp do lokalizacji.
Klikam Allow.
I powinno nam się to odpowiednio załadować.
Powinny się oczywiście dostosować, natomiast to działa,
mimo, że tutaj nie mamy żadnego wyniku.
Dlaczego?
Ponieważ wszystkie nasze tutaj listing są daleko za granicą, a ja nagrywam je w
Polsce, a więc nie ma opcji, żeby właśnie tutaj jakiś listing mi się pojawił.
Natomiast jeżeli zmieniłbym jakiś adres właśnie na przykład na zbliżone,
spróbujmy może sprawić, żeby nam się Word pojawił, Czyli tutaj dodajmy może nie 500.
Dajmy jakiś bardzo duży zakres, powiedzmy 1000 km.
Wtedy w ten okręg powinna się załatwiać również Warszawa.
Odświeżamy i sprawdźmy.
Mabel Meli i przeszukuję te rekordy na podstawie mojej lokalizacji i zaraz
zobaczymy, czy uda mu się namierzyć właściwe.
Niestety ma z tym jakiś problem, ale może dlatego, że ja mam włączonego VPN a i tam
pewnie przypisywana jest znowu jakaś inna dziwna wartość.
Natomiast jeśli ustawiłeś to tak jak trzeba i masz chociaż jakiś jeden listing
zlokalizowany przynajmniej w odległości tysiąca kilometrów
od tej swojej lokalizacji, to oczywiście powinno to zadziałać.
Pamiętaj, to wszystko zależy od przeglądarek.
Bardzo wiele przeglądarek blokuje właśnie dostęp o.
Teraz pojawił się Nordic Snooker Street, gdzieś w ogóle z Danii.
To jest bardzo ciekawe.
No nic, przynajmniej coś tam się ładowało.
Także uważaj proszę na to log właśnie Geographic location.
To potrafi być często blokowane albo przez przeglądarkę, albo użytkownik po
prostu nie wyrazi na to zgody.
Natomiast wydaje mi się, że jest to całkiem fajna funkcjonalność, którą można
dodać do swojej strony, ale bardziej jako ciekawostkę niż taką
rzeczywistą, której będziesz musiał korzystać.
Natomiast teraz wiesz jak po prostu pobierać tą lokalizację użytkownika
i czasami będziesz musiał budować aplikacje, które właśnie
będą na tym działały. Tak np.
działają właśnie Tinder i tym podobne aplikacje, które pokazują Ci użytkowników
w pobliżu Twojej lokalizacji.
Ja dziękuję Ci za uwagę i widzimy się już za moment.