MVP aplikacji w rekordowym czasie z Bubble: Data Type - Booking
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, której tym razem zaczniemy przygotowania do wdrożenia
systemu bookingu do naszej aplikacji.
Oczywiście na początek będzie on mocno uproszczony, ponieważ nie będziemy
obsługiwać żadnych systemów płatności.
Tym zajmiemy się znacznie później, natomiast i tak czeka nas dużo pracy, a
więc nie przedłużamy i przystąpimy do działania.
W pierwszej kolejności musimy oczywiście utworzyć odpowiedni data type,
a więc przechodzimy tutaj i nazywamy go po prostu Booking.
I teraz tak zastanówmy się, jakie kolumny będą nam tutaj potrzebne.
Przede wszystkim na pewno będzie to listing, którego dany booking dotyczy.
I wybierzmy tutaj listing.
Kolejna mamy tutaj hosta.
Oczywiście moglibyśmy takie dane wyciągać poprzez listing.
Natomiast ja chciałbym mieć takie właśnie float data i wszystkie informacje
od razu właśnie tutaj w bookingu.
A więc host to będzie oczywiście user.
Kolejno guest to też oczywiście będzie user.
Potrzebujemy tutaj jeszcze przedziału dat jaki będzie ten booking obowiązywał, a
więc dodajmy tutaj pola o nazwie Date range i wybierzmy dokładnie taki sam typ.
Jeszcze z nim nie pracowaliśmy, ale zobaczysz, że bywa on
czasami naprawdę przydatny.
Czyli date range.
Kolejno dodajemy tutaj pole o nazwie Total Price.
Będzie to oczywiście Number.
Następnie chciałbym sobie jeszcze wstawić status takiego bookingu.
To znaczy czy jest on komplet?
Czyli co znaczy, że został opłacony i tam wszystko przebiegło poprawnie,
czy też ma status in completed?
Nastąpił jakiś problem?
Tak jak mówiłem wcześniej, do płatności przejdziemy nieco później.
Natomiast to pole na pewno nam się przyda.
Potem mógł sobie sprawdzać w przyszłości, czy są jakieś problemy z tymi księgami,
czy wszystko przebiega poprawnie.
A więc najpierw musimy dodać odpowiedni option set.
Będzie to OS Booking Status i będzie
posiadał tylko dwie wartości in complete.
Oraz Complete. Split.
Wracamy do Data Type, dodajemy status do naszego bookingu.
I tak w przypadku Data Type Booking są to wszystkie pola jakie na
chwilę obecną potrzebujemy.
Dodatkowo ja nie będę chciał łączyć tego w drugą stronę, czyli po Kingu z listingu.
Z tego prostego powodu, że dla jednego listingu możemy bardzo szybko
osiągnąć, jak się domyślasz dużą liczbę takich zablokowanych pobytów i szybko
możemy dobić do tej wartości 10000.
Dlatego zostawimy to w ten sposób.
Natomiast na stronie konkretnego listingu będę chciał wyświetlać zablokowane daty.
Oczywiście moglibyśmy wyświetlać tutaj te routing i wyszukiwać je w bazie danych i z
tego pobierać sobie tutaj właśnie te wartości, czyli zablokowane terminy.
Ja natomiast chcę to zrobić po prostu w dużo prostszy sposób.
Wracamy więc do listingu i dodajemy sobie tutaj odpowiednie pole.
I tak mógłby się zastanowić jaki tutaj filtr typu ustawić.
Skoro tam ustawiliśmy date range to powinniśmy tutaj wybrać Date range.
Ale tym razem ustawione na list.
No i byłoby to oczywiście jak najbardziej racjonalne myślenie.
A więc zróbmy tak.
Zróbmy to najpierw w ten sposób, czyli nazwijmy to pole Book Tate Rangers.
Natomiast zobaczysz, jeżeli będziemy potem przeszukiwać takie booking i
starać się namierzyć odpowiednie listing, to to pole właśnie daje range.
W trybie listy nie do końca działa właściwie.
Jeszcze do tego wrócimy.
Na razie musisz mi wierzyć na słowo.
Dlatego dodajemy zarówno to pole, jak i drugie pomocnicze,
z którego będziemy w przyszłości znacznie częściej korzystać i będzie
dużo prostsze w obsłudze.
Czyli pola o nazwie punkt dist Date dokładnie w ten sposób i będzie to
po prostu date ustawione jako lista.
Skoro dodaliśmy towar w ten sposób, to teraz oczywiście musimy sobie dodać tutaj
Riva Skills do naszego bookingu.
Definiujemy i oczywiście zaczynamy od tego co powinniśmy tutaj mieć.
Moim zdaniem powinniśmy ustawić tutaj trzy reguły, ponieważ tylko
trzy osoby powinny widzieć dane takiego bookingu.
Jest to host.
Jest to gest, czyli te dwie osoby, których tych booking dotyczy
i oczywiście nasz admin.
Natomiast cała reszta nie powinna nigdy widzieć żadnych informacji
dotyczących tego konkretnego bookingu.
A więc zacznijmy od host.
Dla całej reszty odznaczamy sobie to wszystko.
A tutaj będą to wszystkie pola.
Zostawiamy to na razie.
Może w ten sposób Mamy tutaj jakieś informacje, takie mega prywatne?
Wydaje mi się, że nie i raczej nie będziemy ich chyba trzymać,
więc to już od Ciebie zależy, czy będziesz chciał rzeczywiście odznaczać
i zaznaczać każde pole.
Ja na razie dla ułatwienia zostawię to w ten sposób i host to będzie tak
current user i log in, czyli musisz być zalogowany.
And this booking host is car and user.
I w ten sposób mamy tutaj pierwszą regułę.
Dodajmy następną.
Będzie to guest.
Mogę sobie skopiować to wyrażenie, wkleić tutaj i tylko zmienić tutaj.
Czyli użytkownik musi być zalogowany i bez takiego bookingu to musi być
właśnie nasz parent user.
No i zostaje nam jeszcze jedna standardowa czyli admin.
I tu możemy sobie to skopiować.
Czyli użytkownik musi być zalogowany i jego user type musi
być ustawiony na admin.
Skoro to mamy już tutaj gotowe, no to teraz musimy jeszcze zająć się
dodatkowymi przygotowaniami.
A mianowicie skoro utworzyliśmy tutaj już w naszej bazie Data Type Listing, to może
zacznijmy właśnie zmieniać to na naszej stronie.
Na przykład przejdźmy na stronę indeksowania.
Jak pamiętasz, tutaj wyświetlamy listing z naszej aplikacji.
Nie tutaj, tylko niżej, a właśnie w tym miejscu odnosiliśmy się do OS Listing.
Natomiast w tym przypadku możemy wykorzystać właśnie te listing,
które wcześniej dodaliśmy i wybraliśmy do aplikacji.
A więc wybieram tutaj listing.
Clear Dajmy tutaj Search for i chwilowo wyszukamy wszystkie listing.
I tak mamy tutaj ograniczenie poprzez liczbę rzędów i liczbę kolumn, więc Babel
zwróci nam z całej bazy tylko 10 wyników, czyli listing.
Nie bawimy się w żadne skrajne.
Klikamy tak.
I oczywiście musimy teraz wprowadzać odpowiednie poprawki, czyli tutaj
przekazujemy już current listing.
No i oczywiście mamy problem, ponieważ nasza karta jest do tego niedostosowana.
A więc to co musimy zrobić to oczywiście przejść do edycji takiego elementu.
Klikam więc Edit Element.
No i teraz tutaj przechodzimy do listingu kart i oczywiście typowy content
to będzie listing, a nie listing.
Oczywiście spowoduje to całą masę następnych błędów, ale tym się nie
przejmujemy i już sobie to poprawiamy.
Listing parent Group Listing i przechodzimy po kolei.
Mamy tutaj obrazek.
Będzie to oczywiście Listing i Parent Group Listing.
Co mamy tutaj w środku?
OK, mamy listing image, czyli możemy sobie wziąć Clear expression
i będzie to Parent group listing.
image main wersji.
I teraz jak będzie się wyświetlać grupa Likes?
Tutaj na razie zostawiamy to bez zmian.
Nie musimy tu chwilowo nic przekazywać, chociaż możemy od razu przekazać listing.
Będziemy potem i tak wdrażać tą funkcjonalność.
To zadbajmy o to, żeby to właśnie dotyczyło właściwego listingu,
czyli Parent Group Listing.
Obrazek mamy z głowy.
Przechodzimy do listing inner.
Tu mamy trochę więcej zabawy, ale nie powinno nam to zająć zbyt wiele czasu.
Czyli listing.
I kolejno reading.
Tutaj również listing.
Tutaj mamy.
Ja bym chciał tutaj wyświetlać taką informację.
Parent Group Listing.
Tutaj dajmy property type. O właśnie.
Oczywiście display spacja alt 8, żeby wstawić taką kropkę.
parent lub listing typeof place.
I oczywiście display mogę sobie skopiować to expression
i tutaj będzie oczywiście name, czyli.
Właśnie w ten sposób skopiuję to tutaj było SID, o ile dobrze pamiętam.
I tu mamy format. Adres.
Wybierzmy to.
To zadziała, Nie.
Zerknijmy, co my tutaj mamy.
Mamy ekstrakt.
Możemy z całego tego adresu wybrać ekstrakt i powiedzieć, że
nas interesuje City właśnie.
Jak widzisz, ten sposób Babel ułatwia nam zadanie i z całego takiego geograficznego
adresu możemy sobie wyciągnąć np. tylko miasto.
Tutaj chciałbym wyświetlać imię i nazwisko hosta.
Listing name Nie będzie to listing name, tylko będzie to.
Najpierw odnosimy się do hosta tak jak podobnie robiliśmy to w stable,
gdzie właśnie publikowaliśmy sobie do tej kolumny.
Jak widzisz Bubble pozwala nam przejść dalej i właśnie z takiego
hosta wyciągnąć tę informację.
A nas interesuje tutaj First name last name.
Co moglibyśmy tutaj wyświetlić?
Powiedzmy chwilowo email.
Raczej nie powinniśmy go wyświetlać w aplikacji, ale przyjmijmy, że w naszym
przypadku będzie to po prostu email do hosta.
Tutaj oczywiście będzie Prize, mamy Prize.
Oczywiście to nam już nawet fajnie wskoczyło, A nie, nie wskoczyło, bo tutaj
nam wskoczył listing na całą tą grupę.
I tu mamy kolejną grupę.
Musimy zadbać o poprawki w całym tym łańcuszku.
No właśnie i teraz dopiero pojawia się problem, czyli Parent Group listing.
I teraz wybieramy sobie Price.
OK, Babel zadbał o to, żeby to się sformatować poprawnie.
Tu mamy rating.
Chwilowo tym się nie przejmujemy, bo mamy per night.
Zastanawiam się jeszcze tutaj nad tym mailem.
Dajmy to może po prostu first name.
Najpierw nie wyświetlimy właśnie maila.
Niech to będzie po prostu first name.
I teraz tak. Tu listing price mamy z głowy.
Tu mamy Divide. Nas interesuje listing Info Group.
Tu jeszcze musimy wprowadzić poprawki.
Czyli będzie to oczywiście listing i kolejno dla tych wszystkich grup.
Najpierw zajmijmy się grupami, zaraz zejdziemy jeszcze głębiej do
poszczególnych zagnieżdżonych informacji.
I tutaj mamy Parent Group Listing CSS number.
Gdzie mamy guest number i będzie to oczywiście Display.
Tutaj mamy number.
I jeszcze liczba łazienek.
Mamy tutaj number. numbers.
Oczywiście display.
Dobra, zerknijmy co tutaj się jeszcze dzieje.
OK, tutaj mamy jakieś informacje.
A tu mamy tą skróconą wersję bez guest.
Czyli będzie to w tym przypadku gest po prostu.
Display OK.
Tutaj będzie to bet number po prostu.
I jeszcze.
Tutaj znów liczba łazienek.
OK, tu mamy jeszcze gdzieś jakiś problem.
Aha, mamy problem z przekazywaniem właśnie takiego listingu,
więc w pierwszej kolejności wróćmy sobie na stronę całego listingu
i tym razem ustalmy tutaj cały Page type type of content.
Oczywiście listing.
Mamy tutaj cały szereg błędów.
Nie ma problemu, tym się oczywiście zajmiemy.
Wracamy do listing kart Re i tutaj, gdzie wysyłamy użytkownika
właśnie na taką stronę listingu.
Pozbywamy się już tego parametru?
Nie będziemy z niego korzystać.
Jak się domyślasz, będziemy tutaj przekazywać po prostu
Parent Group listing.
W ten sposób właśnie wysyłać takie informacje.
Zerknijmy na stronę indeksowe.
Czy to zaskoczyło?
Oczywiście do podglądu aplikacji.
Niech sobie bubel odświeży wszystko.
Muszę się wylogować.
I wrócić na stronę indeksowe.
OK, nie mamy tutaj powrotu. To nic.
Zróbmy to w ten sposób i musimy dopracować tę stronę timeline, żeby one pozwoliły
nam szybko wrócić na stronę główną.
Natomiast zerknijmy na stronę indeksowe i zerknijmy.
Jak widzisz, mamy tutaj wszystkie listing już tym razem pobrane właśnie
z bazy danych.
Tutaj mamy lepiej.
OK, może to pracujmy jeszcze w ten sposób, czyli przejdźmy do karty z Listing Gem.
Listing kart Fire Właśnie tutaj, gdzie wyświetlamy imię
naszego hosta dodajemy jako host.
Spacja i może tutaj rzeczywiście dajemy imię i nazwisko, czyli dajemy spację.
parent lub listing.
Last name.
Zerknijmy teraz, jak to tylko tutaj odświeżamy.
OK, mamy Your Host Enterprise House.
Mamy nazwę, Mamy tutaj całą informację o naszych castingach.
Wszystko się zgadza.
To co czeka nas teraz to oczywiście powrót do edytora i jak się domyślasz
poprawki tutaj.
Na stronie listingu natomiast jest ich bardzo dużo i ja chciałbym, żebyś to
zrobił właśnie w ramach pracy domowej.
Ja to zrobię między lekcjami.
No niestety, znowu tutaj będziemy musieli przekazywać te wszystkie informacje.
Natomiast jak pamiętasz mówiłem Ci, że w przypadku właśnie
Data Type, którego ustawiasz tutaj właśnie jako listing dla całej strony, nie musisz
się bawić czasami w cały ten łańcuszek.
Moim zdaniem oczywiście czasami się to przydaje jak najbardziej.
Natomiast ja w przypadku właśnie kiedy mam data type dla całego strony całej strony
ustawione robię to w ten sposób, że tutaj po prostu się odnoszenie do Parent group
tylko do parent page listing i to w przypadku będzie to np.
name.
Czy to ułatwi pracę, czy utrudni?
Trudno powiedzieć.
Wyjdzie oczywiście w trakcie działania.
Natomiast chciałbym tutaj dla Twojego ułatwienia jeszcze dodać dwie rzeczy.
Tu oczywiście będziemy musieli wyświetlać features itd.
Tu gdzie dasz radę postaraj się powstawać jakieś odpowiednie wartości.
Jeżeli nie będziesz wiedział jak to zrobić, to możesz to zostawić
i potem zerknąć na mój edytor.
Natomiast tutaj mamy Basic info i mamy shared room naszej aplikacji.
Mamy jeszcze opcje private room i oczywiście Third place I tu
wyświetla się nieco inny tekst.
Ja zrobiłem to w ten sposób, że przeszedłem do Options.
Jest on tutaj się nazywa chyba Type of Place.
Tak?
Dodałem sobie tutaj kolejną kolumnę o nazwie info
i wstawiłem Jak widzisz tutaj taki prosty tekst, który będziemy wyświetlać w
zależności od tego jaki typeof place będzie ustawiony dla danego listingu.
I potrzebujemy jeszcze jednej tutaj rzeczy kolejnego option setu.
Będzie on się nazywał Set Servis WiFi, czyli opłata za
korzystanie z naszego serwisu.
Jeżeli wrócimy na stronę listingu.
Przejdźmy nie tutaj, tylko do designu.
Jak widzisz, tutaj mamy serwis.
Na razie wpisaliśmy to na stałe, natomiast ja będę chciał, żeby ta wartość
była wyliczana z automatu.
Jak to ma działać?
To linijki ustawimy sobie chwilowo właśnie na sztywno.
Oczywiście nic nie stoi na przeszkodzie, żebyś potem w przyszłości zamienił to na
jakąś wartość dynamiczną, albo pozwalał po prostu Twojemu
hotelowi podać tutaj jakąś wartość. Za sprzątanie.
Natomiast to będzie opłata, którą my jako administratorzy serwisu będziemy
zarabiać właśnie za takie oferty.
I tu będzie to po prostu procent od całości, którą będzie płacił użytkownik
w zależności ile dni wybierze i jaka jest cena za noc dla takiego listingu.
Do tego jeszcze przejdziemy później.
Natomiast mógłbyś się zastanawiać dlaczego ja to robię setu, a nie po prostu ustawiam
dla hosta jakąś konkretną wartość?
No moglibyśmy teraz przejść data do usera i dodać tutaj właśnie service TWI.
I wybrać tutaj po prostu zwykły number i wpisać np.
01, co by znaczyło, że pobieramy sobie 10%.
Ale co w sytuacji, kiedy będziesz chciał mieć jakieś promocje dla nowych
użytkowników, albo będziesz chciał zmienić wartość dla istniejących w prosty sposób?
No właśnie, jeżeli wpiszemy tutaj number będzie to ciężko osiągnąć.
Natomiast jeżeli wpiszemy Option seed to okaże się, że wystarczy szybka zmiana
option setu, do którego będzie przypisana właśnie
taka numeryczna wartość naszej prowizji.
I dużo szybciej, dużo wygodniej będzie to działało.
Wiem, że może chwilowo jest to dla Ciebie mało zrozumiałe, ale zobaczysz, że jeżeli
będziemy nadawać system płatności właśnie pobierania takiego procentu,
to ten właśnie Option set super się tutaj sprawdzi.
Czyli mamy OS Serwis Phi.
OK, przejdźmy do niego.
Dodajmy chociaż jedną opcję.
Niech to będzie standardowo.
Jako display.
Jeszcze musimy sobie pobrać tutaj dodać nową kolumnę.
Będzie to value.
W tym przypadku będzie to Number.
I tutaj rzeczywiście będziemy przekazywać jaki procent pobieramy.
Ja ustawiam to na 0 1 co jest odpowiednikiem 10%.
Powiedzmy, że zarabiamy 10% na każdej takiej transakcji.
Więc skoro to mamy już gotowe to nie pozostaje mi nic innego
jak przystąpić do działania.
I Tobie radzę zrobić dokładnie to samo i widzimy się w kolejnej lekcji, gdzie już
właśnie te poprawki na stronie listingu będą wdrożone.