MVP aplikacji w rekordowym czasie z Bubble: Wdrażamy recenzje do aplikacji
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?
Rozpoczynamy naszą pracę dokładnie od momentu, w którym zakończyliśmy
ją w lekcji poprzedniej.
Natomiast jak widzisz ja już tutaj dokonałem kilku drobnych zmian,
a mianowicie pozbyłem się tych wszystkich review, które miałem utworzone wcześniej.
Przejdziemy sobie razem przez ten cały proces, porozmawiamy o workflow
i utworzymy je ponownie.
Natomiast zauważyłem tutaj jeden bardzo ważny błąd, który umknął
na lekcji poprzedniej.
Jak widzisz jestem tutaj teraz w sekcji review i nie mam
wystawionej żadnej opinii.
No i oczywiście pokazuje mi się ten empty state.
Natomiast tak jak Ci wspominałem, chciałbym, żeby w tej sekcji review
najpierw w tym pierwszym widoku ending pojawiały mi się te Kingi, które już się
zakończyły i wtedy będę mógł wstawić do nich odpowiednią recenzję.
Ja takie booking już tutaj mam.
Jeżeli przejdę sobie tutaj do sekcji Booking do ended to mam 3 booking,
które właśnie zostały zakończone.
Dodatkowo chciałbym też zwrócić Twoją uwagę na jedną bardzo ważną rzecz.
Jeżeli nie utworzyłeś bookingu po tym jak zaktualizowaliśmy nasze workflow, która
wyciąga sobie właśnie wartość end date i pracujesz utworzonych wcześniej, to
oczywiście musisz to sobie zaktualizować.
Czyli przejść po prostu do bazy danych.
Tutaj do Booking ów i odprowadzić po prostu ręcznie
odpowiednie wartości w tej kolumnie End date bazując na tym date range
czyli wyciągając tą końcową wartość.
Natomiast wracając do samego dashboard przejdźmy do dizajnu i do widoku.
Tutaj gest Reeves Empire.
Na razie mamy tutaj taki condition, ale kiedy jesteśmy w odpowiednim widoku i
kiedy nie mamy żadnych review to też by się zgadzało.
Natomiast chcę tu dodać jeszcze jeden warunek,
który będzie odnosił się do zakończonych booking ów, czyli search for booking guest
to oczywiście my, czyli current user.
And date ma być mniejsze bądź równe
Current date, czyli takie booking, które już zostały wcześniej
odpowiednio zakończone i ich ilość też musi być mniejsza od 1.
Tylko wtedy chcę właśnie pod takim warunkiem wyświetlać ten stan empty state.
Natomiast przechodząc do Guest Reviews here tutaj chce sobie dodać
kolejny warunek mogę skopiować ten.
I tym razem właśnie tutaj odnieść się do bookingu.
Dodać end date.
Target DateTime i tym razem oczywiście Count musi być większe bądź równe 1.
W ten sposób, jeżeli teraz przejdę, powinien mi zniknąć Empty State Reviews
i pojawić się ten widok z możliwością dodania pierwszej recenzji.
Zerknijmy, czy tak jest.
Wygląda na to, że teraz wszystko już działa poprawnie.
A więc skoro tą część mamy z głowy, no to teraz przystąpimy do właściwego działania.
Czyli rzeczywiście wystawiamy tutaj pierwszą recenzję.
A więc będąc w widoku Branding klikam tutaj i powinnam być w stanie
wystawić tutaj pierwszą recenzję, czyli utworzyć nowe review.
Jak to wygląda natomiast z poziomu samego workflow?
Przejdźmy do edytora gestem ręki i mamy tutaj odpowiednie workflow.
I tak po kliknięciu w ten button przede wszystkim
wyświetlam odpowiedni booking, a w zasadzie przekazuję ten booking do
naszego review popup i potem go oczywiście wyświetlam.
Natomiast kliknięcie w ten przycisk save będzie tutaj oczywiście
rozpoczynał kolejne workflow.
W pierwszym kroku chcemy utworzyć nową recenzję.
Mamy tutaj niemal wszystkie pola z Data typ review, czyli jest to
oczywiście My Current User Osta.
Listing wyciągamy oczywiście z bookingu.
Message to wartość naszego pola.
Input Rating to ilość zaznaczonych gwiazdek z tego komponentu.
Booking oczywiście wyciągamy z bookingu.
Natomiast ponieważ jest to główny komentarz, główna recenzja, a nie
odpowiedź na nią, to dlatego pominąłem tutaj te dwa pola,
czyli Replay i samo Replay.
To nie jest odpowiedź, więc tutaj na razie nie mamy nic do wstawienia
i tutaj też to nie jest replay.
Czyli nie musimy tutaj nic wstawiać.
Oczywiście moglibyśmy tutaj wybrać NOW.
Natomiast tak jak ci mówiłem, jeżeli zostawimy to pole puste, to będzie to
traktowane tak, jakby tam była po prostu wartość null.
Dlatego ja te pola sobie pominąłem, uzupełniamy tylko te.
Natomiast skoro tutaj mamy review połączone z naszym bookingu,
to tworzymy połączenie w drugą stronę, czyli do bookingu Parent Group Booking.
Przypisujemy odpowiednią recenzję, czyli to co utworzyliśmy w pierwszym kroku.
I oczywiście na sam koniec ukrywamy taki popup.
A więc skoro wiemy jak to działa, to rzeczywiście utwórzmy taką recenzja.
Wybieram pierwszą.
Dodajemy odpowiednią ilość gwiazdek.
Klikamy Send message.
To nam zniknęło z tego widoku, ponieważ dodaliśmy review
i wskoczyło do tego drugiego, gdzie oczekujemy na odpowiedź
właśnie na naszą recenzję.
Skoro po tej stronie mamy gotowe, nie mamy jeszcze żadnej tutaj recenzji z
odpowiedzią, to możemy przejść sobie teraz na konto hosta, któremu
wystawiliśmy właśnie taką recenzję.
W tym celu muszę przede wszystkim namierzyć odpowiedniego hosta.
A więc wracam do bazy danych.
Przechodzę do FW i w tym przypadku jest to właśnie taki
host, a więc uruchomimy aplikację z jego poziomu, a w zasadzie z jej poziomu.
No właśnie już jesteśmy w Dashboard.
Jeżeli możemy przejść do WS i mamy pierwszą, która
oczekuje tutaj na odpowiedź.
I znów sam komponent, jak widzisz, składa się dokładnie z tych samych
elementów, czyli tutaj listing.
Tu mam właśnie ten gest red i tutaj Button, który będzie odpowiadał
oczywiście recenzję.
Natomiast jak to w ogóle wygląda w samym tym elemencie, czyli Host Reviews Area?
Pierwsza ta repeat grupa, gdzie mamy właśnie wszystkie review
oczekujące na odpowiedź.
To jest po prostu search for reviews i mamy tutaj hosta.
Mamy reply i send.
Ponieważ jeszcze nie udzieliliśmy odpowiedzi i dodatkowo wybieram
reply jest równa.
Nowa natomiast mógłby się zastanawiać OK, to jest dla Ciebie dosyć zrozumiałe.
Co teraz? Będziemy tworzyć?
Odpowiedź dla takiej recenzji i ją przypisywać.
Natomiast czy rzeczywiście musimy zaznaczać tę opcję?
Pokażę Ci, co by się stało, jeżeli tutaj usuniemy ją sobie jako skrajne.
Czyli wyszukujemy wszystkich review.
Gdzie host to ja, czyli teraz current user i jeszcze nie udzieliliśmy odpowiedzi.
Zerknijmy, czy tutaj coś to zmieni. Odświeżamy.
Wygląda na to, że nie.
Mamy jedną recenzję, którą otrzymaliśmy, a ona czeka na odpowiedź.
To jest dla nas zrozumiałe.
A więc może teraz rzeczywiście jej udzielamy?
Czyli po kliknięciu w ten przycisk znów otwiera się button.
Wyciągnięte są oczywiście informacje dotyczące tej recenzji i teraz
mogę udzielić odpowiedzi.
A samo workflow wygląda w ten sposób.
Przejdźmy do Replay.
I tak najpierw tworzymy nowe Revue.
I tutaj znów wyciągamy niemal wszystkie pola.
Tylko w tym przypadku jak widzisz uzupełniam tutaj tą kolumnę i sleep ray i
ustawiam wartość na jest, ponieważ to jest odpowiedź do recenzji,
a nie główna recenzja.
I skoro taką odpowiedź tutaj utworzyliśmy, to musimy ją teraz kolejnym kroku
przypisać właśnie jako Ripley do tej głównej, tutaj wyciągniętej.
Mam nadzieję, że jest to dla Ciebie zrozumiałe.
W jaki sposób ja to tworzę?
Jak łączę jeden element z drugim?
Na koniec oczywiście zamykamy taki popup i zobacz co się stanie teraz.
Jeżeli udzielę tu odpowiedzi, to to powinno zniknąć z tego widoku
i wskoczyć do tego długiego reply.
Odpowiadamy.
Krótka odpowiedź tu nie bawimy się jakoś.
Zbyt wymyślne elaboraty.
Klikam Send message.
No i coś się zadziało.
Mam to w sekcji Reply w widoku Reply.
Komentarz Johnnego Moja odpowiedź.
Ale tutaj wskoczył jakiś drugi element.
Jak widzisz tutaj jest moja odpowiedź, ale jest ona podpisana jako Johny.
Dlaczego?
Otóż dlatego, że właśnie usunąłem tą flagę i replay z naszej grupy z search for.
A więc taka odpowiedź, której udzieliliśmy jest po prostu teraz traktowana jako
komentarz, który nie ma żadnej odpowiedzi.
Właśnie dlatego, że nie uwzględniliśmy tutaj tej flagi, a więc
dlatego ona jest tutaj tak super, mega ważna i dlatego musi tutaj zawsze być.
Tu chcemy wyświetlać tylko główne komentarze, czyli IS Replay
musi być równa no.
Wtedy odpowiedzi nie będą nam wyskakiwały właśnie do tego widoku,
do tej repeat grupy.
Odświeżam. Powinniśmy mieć tutaj puste.
Wygląda na to, że nam to zadziałało i mamy oczywiście tylko tutaj
ten element widoku reply.
A jak ten widok tutaj jest obsługiwany?
Proszę bardzo, tu mamy t writing grupę i tym razem po prostu takie,
gdzie host jest równy current user a reply nie jest puste.
W ten sposób właśnie udzieliliśmy odpowiedzi na
recenzję, którą otrzymaliśmy.
No i teraz oczywiście taka odpowiedź pojawi się na koncie
naszego gościa, co zresztą mogę Ci to oczywiście udowodnić.
Wystarczy, że się logujemy i logujemy jako demo.
Przechodzimy do Reviews.
Zniknęło to z widoku Waiting for Reply.
Oczywiście tutaj powinniśmy zadbać o wyświetlanie jakiejś krótkiej informacji,
że nie znaleziono żadnego takiego wyniku dla takiego filtru.
Natomiast to pozostawiam Tobie.
Mnie interesuje głównie przekazanie Ci tego, jak powinna działać logika.
A więc jesteśmy w widoku Reply i teraz już to wskoczyła.
Mam nadzieję, że teraz rozumiesz jak działa ta logika.
Dlaczego ja to przygotowałem w taki sposób?
Oczywiście pamiętaj jeszcze raz o tym, że to jest wyłącznie moje podejście do danej
funkcjonalności, bo musisz oczywiście uprościć i pozostawić
tylko opcja wystawiania np.
komentarza przez gościa po zakończonym bookingu.
Natomiast jeżeli chodzi o bookingu.
To wróćmy jeszcze do tej sekcji padding, ponieważ chciałbym Ci tutaj pokazać
jeszcze jedną bardzo fajną funkcjonalność.
Na chwilę obecną mamy tutaj ustawiony Contains, że na datę, czyli data
zakończenia takiego bookingu jest mniejsza od dzisiejszej daty.
Natomiast to z jednej strony jest fajne, a z drugiej moim zdaniem nie do końca,
ponieważ ja nie chciałbym właśnie tutaj powiadamiać naszego
gościa i przypominać mu o tym, że powinien wystawić komentarz zaraz po tym jak mu się
ten booking zakończy jeszcze tego samego dnia Chciałbym dać mu
tutaj jakąś chwilę oddechu.
Oczywiście zadbamy sobie w module trzecim, gdzie będziemy wysyłać odpowiednie
powiadomienia mailowe, natomiast chciałbym, żeby zadziałało w
ten sposób, póki się kończy.
Mijają 3 dni.
My wysyłamy maila z prośbą o to, żeby on sobie tutaj wrócił do tego widoku
reviews i wystawił recenzję.
Natomiast musimy również zadbać o to, żeby te booking tutaj wyskakiwały po 3
dniach od zakończenia i żeby osiągnąć taki efekt muszę przejść do guest reviews.
Tutaj do tej reptile grupy Padding.
Żeby tutaj dać mu właśnie te 3 dni.
To dajemy + days, ale tym razem chcę cofnąć to o
3 dni, czyli dodać minus 3 dni.
Niestety Babel nie ma takiej opcji, żeby od daty odjąć 3 dni,
ale musimy to zrobić w ten sposób czyli + datę i tutaj wpisać 3.
W ten sposób tutaj pojawią się tylko te bookingu, od zakończenia
których właśnie minęło 3 dni.
Czyli nie od razu tylko właśnie oczekujemy te 3 dni.
W moim przypadku chyba nic się tutaj nie powinno zmienić.
Zaraz zobaczymy.
Jak widać oba te booking spełniają ten warunek i zakończyły się dużo
wcześniej, dlatego się tutaj pojawiają.
Natomiast właśnie w ten sposób możesz dodawać tutaj, a w zasadzie odejmować
jakieś wartości dni, minut, sekund itd.
Poprzez + i potem wstawienie wartości ujemnej.
To jest wszystko, co chciałem Ci przekazać w tej lekcji.
Mam nadzieję, że podobała Ci się ta funkcjonalność,
a jeżeli nie to mam nadzieję, że uda Ci się wdrożyć ją po swojemu
i się tym pochwalić. A ja dziękuję Ci za uwagę.
I widzimy się dosłownie za moment.