MVP aplikacji w rekordowym czasie z Bubble: Data Type - Listing
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 z poprzedniej lekcji nie sprawiła Ci
najmniejszego kłopotu i wdrożyła się odpowiednio workflow blokujące
dostęp do wybranych stron.
Natomiast skoro tą część mamy już za sobą, to możemy przystąpić do dalszej pracy.
I w tej lekcji zajmiemy się dodaniem do naszej bazy danych kolejnego data type,
jakim będzie oczywiście nasz listing.
Ja już to zrobiłem.
Przejdźmy więc do zakładki Data z zakładki Data Types.
Jak widzisz mam tutaj nowy Data type o nazwie Listing.
Wystarczy, że wpiszesz tutaj jego nazwę i klikniesz Create.
Nie musisz zaznaczać tego check boxa, o tym porozmawiamy sobie nieco później.
Natomiast jak widzisz dodałem tutaj również odpowiednie kolumny.
I teraz chciałbym omówić każdą z nich, a Ty oczywiście w międzyczasie będziesz
mógł je dodawać do własnej bazy danych.
Jako wzorzec posłuży nam oczywiście nasza zakładka Option Sets.
W pierwszej kolejności sprawdziłem jakie Option sety tutaj dodawaliśmy
powiązane z listingu.
Był to oczywiście sam Other listing, natomiast mieliśmy tutaj jeszcze jak
widzisz kilka różnych statów, które były z nim powiązane.
I może tutaj tego rzeczywiście nie uwzględniliśmy.
A więc zacząłem od dodania sobie tych pól.
Pierwsze był to Amen Cities, czyli ten listing Amen Cities.
W tym przypadku, jak pamiętasz, mieliśmy tutaj listę, więc użytkownik mógł
wybrać kilka różnych wartości.
Podobnie było z OST Listing Features.
To również będzie lista odnosząca się właśnie do tego setu.
Mamy tutaj również. To jest listing Property Type.
To oczywiście nie będzie już lista, ponieważ użytkownik będzie mógł
wybrać tylko jedną wartość.
Podobnie zresztą dla tutaj typeof place.
A więc wracamy i mamy pole Cities.
Jest to List of OS Listing Cities.
Odnosimy się do setu i zaznaczamy ten checkbox, że będzie to lista.
Podobnie mamy tutaj, a w zasadzie z kolumną Features.
To również jest lista.
Tak jak mówiłem, a także tutaj mamy Property Type oraz Type of Places.
W tym przypadku już to nie jest lista, ale nadal odnosimy się do właściwych setów,
więc dam Ci teraz chwilę, abyś sobie mógł dodać te pola i odpowiednio
zdefiniować ich rodzaj.
OK, skoro to mamy gotowe to zerknijmy jeszcze jakie tam sety mieliśmy.
Mieliśmy również Option Set o nazwie OSS Listing Numbers i w tym
przypadku mamy takie wartości.
Jak będziemy z tego korzystać?
Otóż chciałbym, aby użytkownik nie mógł wpisać z palca
wartości dla liczby sypialni, liczby gości, liczby łóżek i co tam jeszcze mamy.
Mamy sypialnie, mamy łóżka, mamy liczbę gości.
A więc dla tych trzech wartości one mają się odnosić właśnie do tego setu.
I tak właśnie również ja to sobie ustawiłem.
Czyli tutaj zarówno liczba łazienek, jak i liczba łóżek,
a także liczba gości jak widzisz odnosi się do naszego setu, a jest listing
Numbers, a więc możesz teraz dodać te wartości i odpowiednio ustawić tutaj
powiązanie z właściwym Option setem.
Wracamy do naszego Option Setup.
Skoro to mamy już tutaj gotowe, to już sobie ustawiliśmy.
To przejdźmy do samego S listing i zerknijmy jakie tutaj pola mieliśmy.
City tutaj.
Do tej pory było to zwykłe pole tekstowe.
Natomiast chciałbym, abyś w tym przypadku naszym Data Type dodał tutaj pole City,
ale jego rodzaj określił jako grafik adres.
Będzie to niesamowicie przydatne i bardzo funkcjonalne w kontekście
naszej aplikacji.
Kolejno mamy tutaj pole Description i ja już przeniosłem jeden do jednego.
Będzie to po prostu zwykłe pole tekstowe.
Podobnie zresztą zrobiłem tutaj dla tych dwóch pól, czyli image
main oraz images list.
W tym przypadku znowu będzie to pole typu obrazek, ale w obu przypadkach
również zaznaczamy, że będzie to lista.
Jak pamiętasz przydało nam się to przy naszym papie i będziemy chcieli
zachować tą funkcjonalność.
A więc dlatego w obu tych przypadkach ustawiamy, że jest to lista.
Mimo, że dla tego pierwszego pola zawsze będziemy wgrywać tylko jeden obrazek.
Pole display tutaj zmieniło się na pole name i znów jest to zwykły tekst.
Pole price przenieśliśmy jeden do jednego i będzie to zwykły number.
Tutaj nic się nie zmieniło.
Natomiast w przypadku naszego setu mieliśmy tutaj pole Host.
Jeżeli wrócimy sobie do tablic do podglądu jak to tam wyglądało,
to jak pamiętasz tutaj mieliśmy w polu Host Professional Host albo Private Host.
To już od Ciebie zależy czy będziesz chciał przenieść tą wartość.
Możesz np.
właśnie dla konta użytkownika dodać dwie takie wartości
i dodać oczywiście potem jakieś odpowiednie workflow, jakąś odpowiednią
logikę do tego aby przydzielać takiemu control właśnie informację czy jest to
private host czy też professional host.
Ja stwierdziłem, że jest to trochę przerost formy nad treścią
i po prostu wywaliłem sobie te wartości.
Nie będziemy z nich korzystać.
I jak już Ci mówiłem wcześniej, każdy host, który dołączy do naszego serwisu
będzie otrzymywał miano Professional host.
Dlatego też w tym przypadku pole Host będzie prowadziło do
użytkownika, który taki listing dodał do naszego serwisu.
A więc host ustawiłem tutaj na Type User.
Na chwilę obecną są to wszystkie pola jakich potrzebujemy.
Jeżeli będzie trzeba coś dodać to oczywiście wyjdzie to w ramach pracy nad
naszym serwisem i wtedy aktualizujemy Data Type.
A teraz chciałbym abyś właśnie dodał te wszystkie kolumny, odpowiednio ustawił
typy ich wartości, a my widzimy się już w kolejnej lekcji.