MVP aplikacji w rekordowym czasie z Bubble: Dodajemy kolejne data types
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?
Witam Cię w kolejnej lekcji, w której tym razem czeka nas całkiem sporo żmudnej,
ale niestety koniecznej pracy.
Jak już pamiętasz, wspominałem Ci na początku tego sprintu, że będę chciał w
naszej aplikacji postawić bardzo wyraźną linię pomiędzy tym, co powinno być osią
setem, a tym, co powinniśmy umieścić w naszej bazie danych.
Dlatego też jest to zadanie, którym zajmiemy się dosłownie za moment.
Zanim jednak do tego przystąpimy, zgodnie z obietnicą pokażę Ci, w jaki sposób
możesz właśnie tutaj prosto wyczyścić zawartość pola input.
W naszym przypadku jest to pole typu start box, ale dokładnie ta sama metoda zadziała
Ci też i w przypadku innych polu input.
Zobacz wpiszę tutaj jakąkolwiek wartość.
Teraz mogę wybrać wskazany rekord.
I w tym momencie Field zadziałał, a tutaj pojawiła się odpowiednia ikonka.
Ona się pojawia dopiero wtedy, kiedy właśnie w takim polu jest jakaś
wartość i nie jest ona pusta.
Teraz mogę tutaj kliknąć.
I jak widzisz pole zostało wyczyszczone.
Ale jak to działa pod spodem?
Przejdźmy do edytora.
Mamy tutaj właśnie tą ikonkę, po kliknięciu w którą jedyne co robię to
resetuje w grupę, która zawiera taką ikonkę oraz pole typu input.
U nas jest to pole po prostu Search box.
Tu mam właśnie całą grupę Listing Select box group typu Align to parent.
W ten sposób mogę sobie umieścić nasze pole Search Box.
Na to nałożyć taką ikonkę z prostym conditions em, które właśnie mówi.
Jeżeli wartość takiego pola nie jest pusta, no to chcemy ją pokazywać
i tym razem po kliknięciu resetuje właśnie taką grupę, a tym samym resetuje również
wszelkie pola input, które taka grupa będzie zawierała.
Super prosty i bardzo przydatny trick i radzę Ci z niego oczywiście korzystać.
Natomiast teraz możemy przystąpić już do głównego założenia naszej lekcji.
Przejdźmy do zakładki Data i Option Setów.
Jak widzisz, mamy ich teraz tutaj całkiem sporo, ale oczywiście nie wszystkie
z nich powinny być cytatami.
Przede wszystkim chciałbym pozbyć się 3 bardzo ważnych z nich
OS Block OS Categories.
W tym miejscu możesz się zastanowić czy chcesz w swojej aplikacji zostawić to jako
właśnie obszar SET, czy może jednak zamienić na Data type.
Pytanie jakie powinnaś sobie zadać to to czy będziesz chciał
zajmować się tym ręcznie.
Mianowicie czy będziesz chciał sam potem dodawać takie kategorie
i przydzielać je do swoich listingu?
Oczywiście wydaje mi się, że nie jest to zbyt żmudne zadanie,
żebyśmy to robili ręcznie.
Dlatego zadbamy o to, aby w przyszłości nasza aplikacja wykonywała
taką operację automatycznie.
I podobnie zresztą tutaj w przypadku OSC Countries.
A więc pozbywamy się tych 3 setów i zamieniamy je na odpowiednie Data type.
Ja już tutaj to zrobiłem, a więc tutaj przede wszystkim pierwszy
Data Type o nazwie Block Post.
Jak widzisz tutaj ograniczyłem się do bardzo niewielu pól.
Mamy tylko autora, content, obrazek.
Czas czytania artykułu, krótki opis oraz jego tytuł.
Pole Autor po prostu linkuje nam do Data type User.
W przypadku kategorie mamy jeszcze prościej.
Przeniosłem tylko nazwę takiej kategorii oraz jej ikonkę i to samo zrobiłem tutaj
dla country mamy tylko nazwę i tym razem obrazek.
Nie linkowałem tutaj.
W przypadku kategorii oraz kraju do listingu z tego prostego powodu, że jak
się domyślasz bardzo szybko dla danego kraju bądź danej kategorii
będziemy w stanie uzyskać te 10000 rekordów w danej kolumnie, a to znacznie
spowolni nam potem aplikację i wyszukiwanie takich rekordów.
Dlatego też dla naszego Data Type Listing dodałem dwa nowe pola.
Jest to kategoria oraz country, czyli linkowanie po prostu
tutaj do tych nowych data type.
Dlatego teraz proszę Cię, abyś właśnie tutaj wzorował sobie ten Data type,
czyli Block Post.
Możesz po prostu wzorować się na tych polach, które miałeś w pierwszym secie.
Podobnie zresztą w przypadku kategorii, gdzie mamy tylko icon i name oraz
country, gdzie mamy name i image.
Dam Ci chwilę, abyś sobie to teraz odwzorować.
OK, mam nadzieję, że twoje Data Types są już gotowe.
Dodałeś odpowiednie tutaj tę kolumnę, kategorię i Country to listingu i to co
musimy teraz zrobić, to wzbogacić naszą bazę danych o odpowiednie rekordy.
Ja już je dla Ciebie przygotowałem w bazie Warrior Table.
Masz tutaj blog posty.
Zastosowałem dokładnie ten sam trick, który stosowaliśmy w przypadku listingu.
Jak widzisz mamy tutaj pole o nazwie Author Link, którym linkujemy do naszych
userów po prostu do gotowych rekordów.
Nie bawiłem się w dodawanie nowych.
Z tego wyciągam poprzez pole Autor odpowiednich Unique ID.
Tutaj powinny być oczywiście wartości z Twojej bazy danych.
Natomiast w przypadku krajów mamy tutaj widzisz tylko name i obrazek,
a tutaj tylko name i icon.
A więc teraz proszę abyś wyeksportować sobie te pliki do CSV, jeżeli oczywiście
tylko posiadasz możliwość ich potem importu w Babel, czyli jakiś plan płatny,
a następnie wgrał je odpowiednio.
Ja znów mam to gotowe.
Przejdę do AppData.
Jak widzisz mam tutaj już wgrane kraje oprócz tych istniejących wcześniej.
Dodałem również kraje, które będą teraz połączone z naszymi spinkami.
W ten sposób będziemy mogli wyświetlać odpowiednie informacje na stronie
indeksowe, do czego oczywiście za moment przejdziemy.
Kolejno mamy tutaj oczywiście wgrane kategorie, a także blog, posty
powiązane z odpowiednimi użytkownikami.
Natomiast aby teraz nasz nasza listing połączyć z odpowiednim krajem i kategorią,
czeka nas niestety żmudna ręczna praca.
A więc przechodzimy sobie po prostu do listingu i klikamy na pierwszy z nich
i mamy tutaj pole Country oraz mamy tutaj pole Category
i pojawia nam się również tutaj taki link, który pozwala nam zmienić Search Field.
Na czym to polega?
Domyślnie musielibyśmy wpisać Unique ID kategorii albo kraju.
Jak się domyślasz nie jest to jakoś bardzo intuicyjne.
Nie znasz tych Unique ID, więc musiałbyś się co chwilę przełączać
pomiędzy jednym a drugim.
Natomiast możemy sobie to ułatwić.
Klikamy w to miejsce i mówimy, że kategorie chcemy przeszukiwać
nie po unikaty, ale po nazwie.
I podobnie z resztą tutaj Country.
I zobacz jak to teraz zadziała.
Zerknijmy, jaki tutaj mamy w ogóle kraj. Mamy Gris.
Mogę sobie to skopiować, wkleić tutaj.
I jak widzisz, już mam linkowanie do właściwego kraju.
Jaką kategorię wybierzesz zależy od Ciebie.
Ja będę tutaj wybierał po prostu jakieś losowe.
Przejdźmy sobie tutaj.
Na przykład niech to będzie beach.
Wklejam. Wybieram odpowiedni rekord.
Musisz go wybrać z listy, tak żeby on tutaj wskoczył i tutaj
i teraz Klikamy Save.
OK.
Edit I to samo robimy dla pozostałych rekordów.
Ja to zaraz zrobię w przyspieszeniu, tak aby nie marnować Twojego czasu i dzięki
magii ekranu za chwilę będę miał to gotowe.
OK, w moim przypadku praca jest już gotowa, a więc możemy
przystąpić do dalszych działań.
Mam nadzieję, że podobnie jak ja odpowiednio zdefiniowałem sobie kategorie
Miasto dla wszystkich listingu jakie masz w serwisie.
A więc możemy przystąpić teraz do dalszej pracy.
Przede wszystkim wracamy na stronę index ową.
Naszym pierwszym zadaniem będzie tutaj właśnie przejście do tej
sekcji popularnych kierunków.
I tym razem nie odnosimy się tutaj do Open Society of Countries, tylko oczywiście
do naszego nowego, utworzonego Data Type.
Natomiast zanim to zrobimy, chciałbym do naszego Data Type Country dodać
jeszcze jedno pole o nazwie np.
IS Featured, dzięki czemu właśnie będzie to promowane w tych
dwóch, a nie w trzech kolumnach.
Wracamy więc sobie szybko do Data Type do Countries.
Tutaj dodajmy nowe pole z featured.
Niech to będzie pole typu jest nowe.
I teraz tak nie ustawiam tutaj żadnych privacy rules dla kraju kategorii postów.
Chcę, żeby one były publicznie widoczne dla każdego użytkownika, niezależnie od
tego, czy on jest zalogowany czy też nie.
Przejdźmy jeszcze tylko do AppData tutaj do naszych krajów i chcę
właśnie tą flagę ustawić dla USA.
Czyli wybieramy Yes.
Zapisujemy oraz zróbmy to samo dla Polski.
I zapisujemy.
Teraz wracamy do designu.
Tu odnosimy się do.
Country.
Wyszukujemy sobie odpowiednie data type i dodajemy właściwy screen,
gdzie i featured jest równe Yes.
I teraz tak musimy tutaj odpowiednio dostosować te pola w środku, Czyli tutaj
będzie to już Country, a nie Oskar Cruise.
Przejdźmy dalej.
Co my tutaj mamy?
Mamy country image, a więc odpowiednio wyciągamy to.
tutaj z naszego country.
Jest to po prostu pole image.
Mamy tutaj jeszcze inner stuff.
Przekazujemy sobie ten łańcuszek.
Nie category tylko country.
I teraz zastanówmy się, co my tutaj w zasadzie wyświetlamy?
Przede wszystkim mamy tutaj holding, a w nim mamy nazwę takiego kraju.
To akurat jest proste, więc tutaj country.
Tu przekazujemy country.
W ten sposób.
Tutaj możemy sobie wyciągnąć po prostu name.
Natomiast tu mamy liczbę apartamentów, które właśnie przynależą do takiego kraju.
A więc jak to zrobić?
Wybieramy.
Jak się domyślasz tutaj Search for wyszukujemy wszystkich listing ów, gdzie
country jest Karen Sell czy tam Parent Group Country.
Odnosimy się w przypadku właśnie do grupy rodzica.
I oczywiście wybieramy sobie count.
To nam pozwoli wyświetlić liczbę takich apartamentów.
Natomiast na tym betonie tutaj wyświetlamy sobie średnią cenę takiego apartamentu.
Jak to zrobić? Znów Babel.
Jest to niesamowicie proste.
Babel zrobi większość rzeczy dla nas.
Zaraz zobaczysz jak znów odnosimy się do search for i wybieramy sobie listing.
Ten sam const train.
Czyli country jest równe Parent group Country.
I tym razem mogę się tutaj odnieść do tych wszystkich pól, które mamy
zdefiniowane na Data type.
Nas interesuje price czyli ich item price.
Babel wyciągnie nam wszystkie ceny z takich listing ów, które tutaj namierzy,
a my możemy odnieść tutaj do Average i z tego wyciągnąć uśredniona wartość.
Oczywiście sformatowaniu, jak się domyślasz jako karencji.
Czyli co tutaj się zadziało?
Najpierw szukaliśmy wszystkich castingów, gdzie country jest równe.
Właśnie temu Parent Group country, czyli krajowi, którego
wyświetlamy w tej komórce.
Następnie z tych wszystkich elementów, czyli z całej tej listy,
wyciągamy pole Price.
Babel namierzy je wszystkie, a potem z tych wszystkich pól wyciągamy uśredniona
wartość poprzez właśnie tą opcję Average.
I teraz to mamy już gotowe.
Dokładnie to samo będziesz musiał zrobić tutaj dla tych countries free column.
Ja tego nie będę robił.
Przejdźmy do podglądu i zobaczmy, czy to zadziała.
Tutaj.
Odświeżamy. Wyloguj się.
Przejdźmy na stronę indeksowe.
Idziemy niżej i mamy USA 4 apartamenty.
Tutaj średnią cenę.
OK, to musimy się pozbyć tego znacznika dolara, żeby się nie powielał.
A tu dla Polski mamy 1 apartament i 500 dolarów.
To średnia cena.
A więc tylko wróćmy i.
Pozbądźmy się tego pisanego na sztywno znaczka dolara.
To już zapewnia nam właśnie to formatowanie tutaj jako właśnie karencji.
A więc czeka Cię teraz zabawa tutaj z tą kolejną sekcją.
Zanim przejdziemy do dalszych prac tutaj na stronie linuksowej,
chciałbym, żebyśmy jeszcze zrobili kilka bardzo ważnych rzeczy razem.
Zanim zadam Ci pracę domową, pierwszym zadaniem będzie przejście tutaj do Data
type User i pozbycie się tych dwóch pierwszych pól.
Czyli nie potrzebujemy już Booking number i nie potrzebujemy Listing Number.
Jak pamiętasz, te wartości zastąpiliśmy już wyszukiwaniem właśnie poprzez nasz
data type, a więc pozbywamy się tego.
I oczywiście tego.
To co możesz zobaczyć, jeżeli usuniesz jakieś pole, to właśnie taką opcję.
Show Related Fields Label pozwala Ci pokazać pola, które usunąłeś.
Jeżeli niestety kliknęło jesteś tutaj przez pomyłkę, no to możesz
wybrać tutaj Restore.
Ja tego nie potrzebuję.
Pozbyliśmy się tych pól.
Teraz chcę jeszcze przejść do dwóch elementów, a w zasadzie do czterech.
Wybierzmy najpierw gest.
Interesuje mnie gest booking empty. Re.
I tutaj chcę się pozbyć tego przycisku.
Show Full state Divide.
Zostawiamy tylko Start Explore Link exploding.
Znów wpisujemy sobie gest, tym razem booking here.
Robimy dokładnie to samo.
Znów pozbywamy się tych przycisków, a w zasadzie tego jednego przycisku DVD.
To było dla bookingu.
Teraz musimy jeszcze odnieść się do guest listing.
A nie guest.
Gość nie posiada listingu, więc tym się nie musimy przejmować, to
możemy przystąpić do poprawek elementów hosta, czyli host.
Booking is empty booking.
Pełen listing empty Listing pełen.
A więc zróbmy te poprawki.
Tu mamy tylko ten jeden button, więc pozbywamy się w ogóle tego CT a.
Tu z kolei Defendera i przycisku.
To samo dla liftingu.
2 liter i przycisk wylatuje.
I jeszcze tylko listing res.
OK.
Czyli porządki zarówno w elementach, jak i w bazie danych mamy już w zasadzie gotowe.
To co musisz zrobić, to teraz przejść na stronę najpierw indeksowana.
I to będzie już Twoja praca domowa, ponieważ są to bardzo proste operacje.
Ja nie chcę marnować na to naszego czasu.
Przechodzimy teraz tutaj do sekcji.
Jak się domyślasz z naszym blogiem.
Chciałbym, żebyś w tym miejscu znów pozbył się OS Blog.
Pod linkował tutaj oczywiście odpowiedni Data Type, a następnie przekazał tutaj
odpowiednie wartości i to co chciałbym żebyś zrobił
to Nie mamy tutaj akurat Block post ref, więc tego nie musimy już robić.
Oczywiście przekazał tam właściwy data Source i po wyciągał te wartości już
właśnie Static Type Block post, a kolejno przeszedł na stronę search i
zrobił dokładnie to samo tutaj dla naszych kategorii, czyli właśnie w tym miejscu
gdzie linkujemy do AS Categories, to teraz zamieniamy oczywiście na
nasz Data Type Categories.
Tak więc to jest Twoja praca domowa.
Masz trzy główne zadania poprawienia linkowania do
tej sekcji z trzema kolumnami zajęcie się blog postami oraz tutaj kategoriami.
Ja to oczywiście zaraz w drodze między lekcjami a Tobie życzę powodzenia
i widzimy się już za moment.