MVP aplikacji w rekordowym czasie z Bubble: Messenger w aplikacji - logika
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?
Naszą pracę rozpoczynamy dokładnie od tego miejsca, w którym zakończyliśmy
ją w lekcji poprzedniej.
A więc przystąpimy do działania.
Zamykam sobie to okno, wracam do edytora i w pierwszej kolejności robię porządki.
Przynajmniej u siebie.
Chcę usunąć po prostu te istniejące wiadomości.
I oczywiście tutaj czat.
I przejść przez ten cały proces od początku.
Zacznijmy może właśnie od pierwszego miejsca startowego, czyli w naszym
przypadku jest to póki karta red.
I tutaj mamy ten przycisk Send messages.
Mam tutaj dodane dwa workflow.
Przede wszystkim jeśli nie mam jeszcze żadnego czatu aktywnego czatu, bo
właśnie takie czaty tutaj wyszukuję.
Czyli status Active Booking dotyczący właśnie takiego bookingu Users contains
current user i oczywiście tutaj host.
Czyli jeśli jeszcze nie rozpoczęliśmy takiej rozmowy, to po prostu pokazuje
sobie ten popup i go zaraz przejdziemy.
Natomiast jeśli taki czat już mam.
Dokładnie to samo tutaj i mam chociaż jeden, czyli jeden taki
aktywny czat, to nie chcę rozpoczynać drugiego identycznego, tylko chcę
użytkownika przekierować waśnie tutaj do tej konwersacji.
I tak jak mówiłem będę to przekazywał właśnie jako trzeci parametr do URL a
i robimy to w ten sposób tutaj, żeby przekazać jakąś większą
wartość niż tylko 1 data type, tak jak to robiliśmy do tej pory,
możemy wykorzystać właśnie tą funkcję o nazwie orbitalnej Text.
I teraz jeśli sobie tutaj kliknę tak jak widzisz mogę tutaj przekazywać
dużo, dużo więcej tych parametrów.
A więc standardowo tutaj przekazujemy nasz widok, czyli gas messages.
A tutaj odnoszę się właśnie do takiego istniejącego czatu.
Wyszukuję go sobie i przekazuję tutaj jego unikalne ID.
Dokładnie taką samą funkcjonalność będziemy mieć na stronie listingu.
Mogę Ci to udowodnić.
Tu znowu jak widzisz mam te batony, które albo właśnie otwierają odpowiedni
element, czyli właściwy popup, albo właśnie przekierowują
użytkownika znów na stronę dashboard.
Oczywiście musielibyśmy zadbać o to, żeby sprawdzać, czy mamy go kierować na
stronę gościa, czy na stronę hosta itd.
Ale myślę, że to jest dla Ciebie analogiczne.
Tutaj znów właśnie guest messages i oczywiście tutaj właściwy chat
jako trzeci parametr do naszego URL a.
No skoro wiemy jak to przekazywać, to co w zasadzie się dzieje, kiedy
tworzymy taką wiadomość?
Przejdźmy może do właśnie.
Booking messages popup rate.
Tutaj wygląda on właśnie w ten sposób.
Mamy tą kartę z listing iem pole input, do którego będziemy oczywiście
wprowadzać naszą wiadomość.
Całego tego elementu, jak się domyślasz, przekazujemy po prostu konkretny booking,
którego będzie dotyczyła taka konwersacja, a po kliknięciu w button
przechodzimy do prostego workflow.
Ja tutaj zastosowałem sztuczkę Już pokazuję jaką.
Dodałem prosty custom state o nazwie Button status i stworzyłem sobie właśnie
taki option set, który będzie miał tutaj trzy wartości.
Dziwne mi to wyskoczyła mamy default in progress oraz Done.
Nie wiem dlaczego jakoś tak dziwnie nam to przeskoczyło.
W każdym bądź razie teraz mamy to lepiej.
Te trzy wartości i default ustawiam sobie jako domyślną.
Następnie dla samego tego przycisku.
Dodaję sobie Condition.
Ale ja je tutaj zdefiniowałem.
Nie, chyba tutaj tylko ten custom state.
Ale przejdźmy tutaj do Booking messages.
Listing messages Popup tutaj chyba mam właśnie to Już wykorzystuje
tam kastą State.
Tam go tylko dodałem, ale nie chciało mi się po prostu
już drugi raz tego powtarzać.
A więc ta sama sytuacja Custom State button status dla przycisku.
Możemy się teraz odnieść oczywiście do takiego właśnie custom state.
To zresztą już pewnie na pewno wiesz.
I teraz tak jeśli jego wartość jest równa in progress, to pojawia się tutaj inny
napis, inny background color, inny font color.
Jeśli mamy tutaj status done, to wyświetlam takiemu użytkownikowi
informację, że wiadomość została wysłana, zmieniam kolor przycisku na zielony
i oczywiście font tutaj na białe.
Dodatkowo jeśli będziesz właśnie stosował taki trick ze zmienianiem właśnie tego
tekstu, to pamiętaj tutaj, aby ustawić jakiś stały rozmiar takiego przycisku,
ponieważ jeśli wybierzesz tutaj tą opcję to content to ten przycisk będzie się
kurczowo rozszerzał w zależności od tego ile tekstu będziesz miał w środku.
No właśnie, czyli ustawmy tutaj stałą szerokość 180 pikseli.
I teraz tak po kliknięciu w taki przycisk.
Ustawiamy sobie ten custom stat na nim, czyli blokujemy możliwość
kliknięcia w taki button.
Użytkownik drugi raz już nie będzie w stanie uruchomić kolejnego workflow.
Następnie tworzymy w pierwszej kolejności nowy czat.
I jak się domyślasz, w tym przypadku dotyczy on listingu.
Czyli przekazuję tutaj konkretne listing Message Setup To jest po prostu
current date time and sidebar user.
Przez kogo taka wiadomość nie została odczytana?
Oczywiście jeśli to ja nadaję, to będzie to host, czyli odbiorca takiej wiadomości.
Tutaj do tej grupy users dodaje siebie oraz oczywiście hosta.
Tutaj ustawiam sobie na odbiorcę właśnie takiej wiadomości.
Tutaj mam listing name.
Po prostu z listingu wyciągam nazwę oczywiście SID.
Myślę, że wartości, które tutaj przekazujemy są jak
najbardziej zrozumiałe.
Nie ma tutaj nic trudnego.
Skoro mamy utworzony taki czat, no to oczywiście musimy utworzyć wiadomość.
I znów tutaj mamy Message input value.
Mamy czat, mamy nadawcę.
Musimy jeszcze uzupełnić pole users, która w tym przypadku ustawiamy na listę.
Users wyciągnięte z naszego czatu, który przed chwilą ustawiliśmy
i kolejno dodajemy sobie tutaj. Ile odpoczynku?
Za pomocą tab pause Ja ustawiam tutaj z reguły na 1000
milisekund, w zależności od tego ile będziesz tutaj operacje wykonywał.
Jeśli będą jakieś mocno skomplikowane to oczywiście nie musisz dodawać pauzy.
Ja tu chcę dać złudzenie, że coś rzeczywiście pod spodem
się dzieje, czyli użytkownik klika, pojawia mu się ten napis Standing
czy processing trwa tą sekundę.
Zmieniamy tutaj ten status na Down dostanie informację właśnie,
że coś się tutaj wykonało.
I tutaj znowu dodaję kolejną pauzę, a potem ustawiam sobie
taki status na default.
A w zasadzie najpierw ukrywam, a potem ustawiam właśnie
ten status tutaj na default.
Natomiast chciałbym zwrócić Twoją uwagę na jedną bardzo ważną rzecz.
Jeśli klikniesz sobie tutaj na pauzę, to dostaniesz właśnie taki komunikat, że
te pauzy dotyczą tylko tego, co dzieje się na ekranie, natomiast nie tego,
że coś zapisujesz w bazie danych.
Potem odczytujesz.
A więc jeśli Twoje workflow wymaga czegoś takiego, że najpierw np.
coś tworzysz i chcesz mieć pewność, że w kolejnym kroku będziesz w stanie wyciągnąć
tą informację z tego co tutaj utworzyłeś, zmieniło i zacytowałeś,
to musisz się odnieść tak jak ja to zrobiłem do poprzedniego kroku.
Dlaczego?
Dlatego, że pomimo iż tutaj mamy step 1, step 2 i step 3 i mogło by Ci się wydawać,
że właśnie Babel tak działa, że wykonuje sobie te workflow krok po kroku,
to niestety wcale tak nie jest.
Jeśli tam zapisujemy coś do bazy danych, odczytujemy, że robimy coś co nie jest
związane z wyświetlaniem jakiś elementów na ekranie.
To Babel będzie starał się wykonać taki workflow jak najszybciej się da, czyli
jednocześnie odpalić nawet 2 lub 3 takie stepy na raz.
Żeby do tego właśnie nie dopuścić to wykonuje sobie jakąś operację np.
właśnie tworzę nowy czat i w kolejnym kroku mówię, że się do tego odnoszę.
Jeśli będziesz to robił właśnie w ten sposób, będziesz odnosił
się do poprzedniego kroku.
To Babel zadziała w ten sposób, że najpierw wykona właśnie tą operację
ten Step 2 po to, aby dopiero później przejść do step 3 i
odczytać takie wiadomości.
Gdybym tego nie zastosował to bym tutaj znowu np.
napisał, że to jest czat jakiś tam wyszukiwania,
a nie odnosił się tutaj do tego to starał by się wykonać to i to np.
jednocześnie.
No i mielibyśmy problem, bo nie odnieśliśmy się do czatu,
który został utworzony.
Moglibyśmy próbować wyszukać taki czat zamiast się do niego odnosić.
O to mi właśnie chodzi.
No i wtedy mamy problem.
To dwie operacje wykonały by się np.
jednocześnie i tutaj już nie wskoczył by nam właściwy czat.
Mam nadzieję, że rozumiesz jak to działa i dlaczego tak ważne jest odnoszenie się
tutaj do tego poprzez result of step x itd.
W ten sposób możesz zadbać o to, że jeśli tworzy jesteś w bazie danych, potem
aktualizuje, wiesz, potem dodajesz nowe itemy i chce, żeby te operacje wykonywały
się jedna po drugiej, a nie jednocześnie.
To właśnie w każdym kolejnym kroku odnosisz się do kroku poprzedniego.
To by było na tyle z teorii.
Jak widzisz sama to workflow do tworzenia wiadomości nie jest zbyt skomplikowane.
Niemal identycznie będzie ona wyglądała dla bookingu.
W tym przypadku zamiast listing przekazujemy odpowiedni booking.
To zresztą mogę Ci teraz oczywiście udowodnić.
Czyli Message popup dotyczący Booking.
I tutaj właśnie mamy niemal te same pola.
Odnosimy się oczywiście do właściwego bookingu.
Tu oczywiście pamiętaj ja to na razie ustawiłem tylko sposobu widzenia gościa.
Twoim zadaniem będzie oczywiście dostosowanie takiego workflow również pod
hosta, ponieważ tak jak mówiłem ja jako gość mogę rozpocząć rozmowę z
poziomu listingu i wtedy działa to tylko w jednym kierunku, czyli gość do hosta,
ale z poziomu bookingu już ta opcja działa w obie strony.
Czyli zarówno gość może rozpocząć taką wiadomość, no i wtedy oczywiście odbiorcą
jest host oraz oczywiście sam host może do nas wysłać wiadomość i wtedy
tutaj odbiorcą będzie gość.
Mam nadzieję, że rozumiesz o co mi chodzi, że jak to ma działać?
Ale to już oddaje w Twoje ręce.
Będziesz musiał po prostu tylko skopiować całe te workflow i sprawdzać po prostu
user type użytkownika, który kliknął w taki button i wtedy
odpowiednio to sobie podmienić.
A więc skoro wiemy już właśnie jak działają takie wiadomości,
jak one zostały utworzone, to może rzeczywiście je tutaj dodajmy.
Chwilowo obecnie nie mamy żadnych.
wiadomości.
Znów będziesz musiał zadbać o to, aby wyświetlać tutaj odpowiednie elementy
w naszym dashboard ie, ale myślę, że te conditions nie sprawią Ci
najmniejszego problemu.
W tym przypadku właśnie sprawdzamy czy mamy jakieś wiadomości
i jeśli tak, to dopiero wtedy właśnie wyświetlamy tutaj całą tę sekcję.
A więc jestem na stronie, a w zasadzie w dashboard ie gościa
naszego ulubionego weekly I może tutaj rozpocznijmy właśnie
tą konwersację od prostego Hello.
Jak widzisz tutaj nic się nie zadziało.
Wysłałem taką wiadomość.
Button się nie zmienił. Dlaczego?
Dlatego, że właśnie tutaj dla bookingu ustawiłem ten prosty system.
Ale jak Ci pokazywałem w przypadku listingu możemy sobie do niego przejść.
A właśnie niech nam się tutaj to załaduje.
Jestem na jakimś przykładowym listingu znów zalogowany właśnie jako John Weeks
i tym razem chcę napisać właśnie do naszego hosta Send Message
i tym razem po prostu hej i zobaczę jak będzie wyglądał ten przycisk.
Zmienił się na Standing Message Send i dopiero potem znika nam cały popas.
W ten właśnie prosty sposób wykorzystaniem tego tricku będziesz mógł zaprezentować
użytkownikowi, że coś tam się dzieje pod spodem.
Operacja jest wykonywana, ponieważ w przypadku tego pierwszego pop
upów użytkownik nie wie, czy rzeczywiście coś się stało po tym jak kliknął w ten
button, bo nic się tam nie zmienia, chwilę to zajmuje.
Dopiero potem zamyka się nasz pop up.
A tu jak widzisz duża.
Fajnie wygląda to pod kątem UX i odbioru przez naszego usera.
OK, skoro wysłaliśmy takie wiadomości to one powinny się pojawić w sekcji Messages.
Jak widzisz ok, mamy konwersacje, mamy dwa czaty, mamy tego i tego.
Oczywiście po kliknięciu ta misja zmienia, czyli przekazuje właśnie to do URL.
A potem sobie wyciągam tutaj grupy wrapper group.
Dodatkowo mogę tutaj.
Jaki mamy tutaj booking Mordor?
Spróbujmy wpisać Mordor.
I powinno nam się tutaj to zawęzić.
O właśnie, ok.
Mordor dotyczy właśnie tylko tego.
Jakie mamy tutaj miasto Big Sur?
Zerknijmy, czy jak zaczniemy wpisywać Big.
OK, widzisz, działa. Wpisuję BIG.
To dotyczy miasta i zawiesiło mi się to tylko do tego jednego wyniku.
Tak samo jak zacznę wpisać tutaj Sara, to odpowiednio mi się te czaty zawężają.
Czyli przeszukujemy za pomocą jednego pola input nasze czaty, a tam sprawdzamy
trzy różne, czyli trzy różne kolumny.
OK, dodatkowo mamy dwa aktywne czaty.
Ja mogę sobie teraz jeden zarchiwizować.
Ta ikonka pojawia mi się dopiero wtedy, kiedy właśnie są 2 aktywne.
Natomiast zanim to zrobię, to może właśnie odpowiedzmy sobie tutaj na ten czat.
Czyli loguję się tutaj na konto Sary.
OK, mam wiadomość od jednego, która mi się gdzieś tutaj powinna pojawić,
ale chyba tam nie ustawiłem po prostu.
tego workflow. Jeszcze zerknijmy Create new message.
Nie dodałem tutaj userów.
Mówiłem Ci o tym polu, a zapomniałem je dodać tutaj.
Users Setlista.
Ma to być oczywiście czat users.
No i właśnie dzieje się to, o czym mówiłem wcześniej, czyli ja jako tutaj Sender
widzę właśnie, a w zasadzie nie tyle Sender to created, co
twórca takich wiadomości.
Widzę je właśnie tu u siebie, czyli z poziomu Johnnego.
Natomiast właśnie tutaj Sara nie widzi wiadomości od Johnnego, ale
jeśli coś napisze, to będzie widziała swoją.
OK.
I teraz jeśli wrócę to znów mamy dokładnie tę samą sytuację, że widzimy tylko
swoje, chociaż tutaj nam to wskoczyło.
No, trzeba było zadbać o to, żeby dodać tamtych użytkowników.
Może zróbmy to, żeby ci udowodnić, że ten czat rzeczywiście funkcjonuje.
Przejdźmy sobie właśnie tutaj, do czatów, a w zasadzie do Messages.
I w którejś. Aha, tu mamy tak.
Hello! To było chyba do Sary.
Spróbujmy tutaj dodać zarówno.
Office. No właśnie siebie.
I to była chyba Sara.
Teraz powinniśmy już widzieć te wiadomości.
Mam nadzieję, że dodałem je odpowiednio ok.
Konwersacja z Sarą.
Hello, hello, OK.
Again.
Przechodzę tutaj i nasza konwersacja już działa poprawnie.
Widzimy wszystkie wiadomości.
A więc wiemy już jak rozpoczynać konwersację.
Jak utworzyć taką pojedynczą wiadomość?
Tutaj chyba tego jeszcze nie sprawdziliśmy dla samego elementu messages, a
więc jeszcze do niego przejdźmy.
Tutaj w zasadzie do tych workflow.
Przede wszystkim tak.
Kiedy strona jest tworzona, to właśnie tutaj sprawdzamy,
czy to dotyczy gościa, czy dotyczy hosta i czy mamy jakiś taki aktywny czat.
I czy ta wartość jest pusta jeśli nie przekazaliśmy tego parametru 3.
Po prostu odnoszę się do tej reptile grupy, którą mamy tutaj.
I ten czat pierwszy z niej ustawiam właśnie jako ten aktywny.
Mam nadzieję, że to jest tutaj jasne.
Widzisz czat lista chat first i tam i tu kieruje do widoku hosta albo
dokładnie to samo robię kierując użytkownika do widoku gościa.
A tutaj mamy tak odpowiedni widok.
Potem te czaty, jeśli są aktywne.
I potem właśnie tutaj to musi być puste, ok.
Natomiast kliknięcie w samo wysłanie wiadomości tworzy oczywiście
tutaj nową wiadomość.
O to już sobie ustawiłem users, czyli tam gdzie zapomniałem tego dodać.
I znów mamy tutaj Buddy, czyli pole input.
Mamy czat, czyli Parent group chat.
Oczywiście Sender to klient user, czyli my.
Listę ustawiamy znów właśnie tutaj na tą listę użytkowników
wyciągniętych z czatu i oczywiście aktualizujemy sam czat.
Pole Last Message Send Add, żebyśmy mogli sortować te czaty i
sprawdzać kiedy była wysłana taka wiadomość.
I jak widzisz tutaj.
Unreal by user to znów ta sama sztuczka, czyli z listy użytkowników odejmuje siebie
i ustawiam tam właśnie tego pozostałego.
Kolejne workflow jakie tutaj mam to tak jak mówiłem zmieniania tego statusu
status czyli naszego Custom status oraz oczywiście ikonkę archiwizacji, która
odnosi się do czatu i po prostu zmienia jego status na Received.
Tutaj znów powinniśmy wyświetlić jakieś pole pop ups z ostrzeżeniem, że taki czat
zostanie zarchiwizowane, ale jak mówię, to pozostawiam Tobie.
Ja staram się pokazywać w tym kursie głównie funkcjonalności i logikę,
a rozbudowanie tego o dodatkowy design pozostawiam już w Twoich rękach.
I dziękuję Ci w takim razie za uwagę i do zobaczenia za moment.